/* Tailwind v4 site stylesheet. Single source of truth for design + custom CSS.
 *
 * At draft time, this is read inline into a <style type="text/tailwindcss"> block.
 * At publish time, the Tailwind CLI compiles this file (plus templates) into
 * dist/styles.css. Every directive works here: @theme, @layer, @utility,
 * @apply, @keyframes, plus plain CSS. Do NOT write <style> blocks in PHP
 * templates for theme CSS — put it here so it lands in the compiled bundle.
 *
 * functions.php also parses the @theme block at runtime to register the
 * palette + font sizes with Gutenberg via add_theme_support().
 *
 * Conventions:
 *   1. @theme: tokens only (--color-*, --font-*, --text-*, --radius-*). No
 *      selectors, no @apply. Tokens auto-generate matching utilities.
 *   2. Plain CSS: outside @theme, inside @layer. Prefer utility classes in
 *      templates first; only write CSS here when utilities cannot express it.
 *      @layer base { h1 { font-size: var(--text-2xl); } }
 *      @layer components { .card { padding: --spacing(6); } }
 *   3. New reusable utilities: prefer @utility over @apply.
 *      @utility content-auto { content-visibility: auto; }
 *   4. Custom web fonts: load via <link> in template-parts/head.php, then
 *      reference here via --font-*.
 *
 * Token naming (Tailwind v4):
 *   --color-{slug}        → bg-{slug}, text-{slug}, border-{slug}
 *   --color-{slug}-{NN}   → numeric shades (skipped in the Gutenberg palette)
 *   --font-{slug}         → font-{slug}
 *   --text-{slug}         → text-{slug}
 *   --radius-{slug}       → rounded-{slug}
 */

@theme {
	--color-primary: #2563eb;
	--color-primary-50:  #eff6ff;
	--color-primary-100: #dbeafe;
	--color-primary-500: #3b82f6;
	--color-primary-600: #2563eb;
	--color-primary-700: #1d4ed8;
	--color-primary-900: #1e3a8a;

	--color-secondary: #475569;
	--color-secondary-50:  #f8fafc;
	--color-secondary-100: #f1f5f9;
	--color-secondary-200: #e2e8f0;
	--color-secondary-300: #cbd5e1;
	--color-secondary-500: #64748b;
	--color-secondary-600: #475569;
	--color-secondary-700: #334155;
	--color-secondary-900: #0f172a;

	--color-neutral: #171717;
	--color-background: #ffffff;

	--font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;
}

/* Element-level defaults. Reach for utility classes in templates first; put
 * a rule here only when the same styling needs to apply across every instance
 * of an element (e.g. body font features). Keep this layer small. */
@layer base {
	/* body { font-feature-settings: "ss01", "ss02"; } */
}

/* Reusable component classes. Use for compound patterns that recur and need
 * a name (e.g. .card, .hero-heading, .divider). Reference tokens via var();
 * @apply works but is finicky — prefer var() + utility classes in templates. */
@layer components {
  .support-section { padding-bottom: 48px; }
  .support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .support-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--sage); border-radius: var(--radius); padding: 34px; }
  .support-card:nth-child(2) { border-top-color: var(--gold-deep); }
  .support-card h3 { font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.18; margin: 0 0 18px; }
  .support-card p { margin: 0 0 18px; }
  .support-card .support-examples { color: #56616d; font-size: .96rem; }
  .support-card .button { margin-top: auto; border-radius: 16px; font-size: .94rem; }
  .support-overlap { max-width: 780px; margin: 30px auto 0; text-align: center; color: #56616d; }
  .journey-section { padding-top: 48px; }
  .help-support-paths { margin-bottom: 44px; }
  .help-support-paths .support-card { scroll-margin-top: 110px; }
  .help-support-paths .section-nav { margin: 8px 0 0; justify-content: center; }
  .help-support-paths h2 { font-family: Georgia, serif; font-weight: 500; font-size: 2rem; line-height: 1.2; margin: 0 0 18px; }
  .help-gambling-note { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
  .help-gambling-note h3 { font-size: 1.5rem; }
  @media (max-width: 820px) {
    .support-grid { grid-template-columns: 1fr; }
    .support-card { padding: 26px; }
    .support-section { padding-top: 60px; }
  }
}


.n2d-world{color:#26372f;font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:1120px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box}
.n2d-world *{box-sizing:border-box}.n2d-world h1,.n2d-world h2,.n2d-world h3,.n2d-world h4{line-height:1.22;margin:0 0 18px;color:#173328}.n2d-world h1{font:clamp(42px,6vw,68px)/1.1 Georgia,serif}.n2d-world h2{font:clamp(28px,4vw,40px)/1.2 Georgia,serif}.n2d-world h3{font-size:23px}.n2d-world h4{font-size:18px}
.n2d-world a{color:#21513e;text-underline-offset:4px}.n2d-world p{margin:12px 0}.n2d-world .eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase}.n2d-world .intro{font-size:20px}.n2d-world .note{color:#536359;font-size:14px}.n2d-world .emergency{background:#f4ead2;border-left:4px solid #b78622;padding:14px 18px;margin:24px 0}.n2d-world .region-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0}.n2d-world .region-link{border:1px solid #c7d6cb;border-radius:14px;padding:18px 20px;display:flex;align-items:center;min-height:75px;text-decoration:none;background:#fff;font-weight:650}.n2d-world .region-link:hover,.n2d-world .region-link:focus-visible{background:#e9f0e8;outline:2px solid #28563f}.n2d-world .back{display:inline-block;margin:0 0 22px}
.n2d-world .country{border:1px solid #d1ddd3;border-radius:14px;background:#fff;margin:12px 0;scroll-margin-top:120px}.n2d-world summary{cursor:pointer;padding:18px 22px;font-weight:650;font-size:19px}.n2d-world summary:hover{background:#f2f6ef;border-radius:14px}.n2d-world details[open]>summary{border-bottom:1px solid #e2e8df}.n2d-world .country-content{padding:24px}.n2d-world .columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.n2d-world .columns>section{min-width:0}.n2d-world .resource{border-bottom:1px solid #e4eae1;padding:14px 0}.n2d-world .resource:last-child{border:0}.n2d-world .resource p{margin:6px 0}.n2d-world .tag{font-size:12px;letter-spacing:.03em;color:#526357;text-transform:uppercase}.n2d-world .native{font-size:20px;font-weight:600}.n2d-world .international{background:#eaf0e7;border-radius:18px;padding:28px;margin-top:32px}.n2d-world .language-list{font-size:15px}.n2d-world .search{margin:24px 0}.n2d-world label{display:block;font-weight:600}.n2d-world input{font:inherit;width:100%;max-width:540px;padding:13px 15px;border:1px solid #a6b8aa;border-radius:12px;margin-top:7px}.n2d-world .region-page{scroll-margin-top:100px}.n2d-world [hidden]{display:none!important}.n2d-world ul{padding-left:24px}.n2d-world footer{border-top:1px solid #d6dfd3;margin-top:36px;padding-top:18px}.n2d-world .smalllink{font-size:15px}.n2d-world .review-strip{font-size:13px;background:#163729;color:white;padding:8px 12px;border-radius:6px;display:inline-block}.n2d-world .review-strip a{color:white}
@media(max-width:720px){.n2d-world{padding:18px}.n2d-world .region-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.n2d-world .columns{grid-template-columns:1fr;gap:24px}.n2d-world .country-content{padding:20px}.n2d-world .international{padding:22px}}
@media(max-width:390px){.n2d-world .region-menu{grid-template-columns:1fr}}

 .n2d-care{max-width:1120px;margin:auto;padding:24px;color:#243b2e;font:17px/1.6 system-ui,sans-serif}.n2d-care *{box-sizing:border-box}.n2d-care h1{font:clamp(36px,6vw,62px)/1.15 Georgia,serif}.n2d-care h2{font:32px/1.25 Georgia,serif}.n2d-care .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.n2d-care .card{background:white;border:1px solid #ccd8cf;border-radius:16px;padding:22px}.n2d-care .meta{font-size:13px;letter-spacing:.04em}.care-button{display:inline-block;background:#21533b;color:white!important;border-radius:9px;padding:10px 16px;text-decoration:none;margin:5px 8px 5px 0}.n2d-care a{color:#21533b}.n2d-care .muted{font-size:14px;color:#58665e}.n2d-care [hidden]{display:none!important}.care-path{border-top:1px solid #d6dfd3;padding-top:18px;margin-top:18px}.draft-nav{background:#173b29;color:white;padding:12px 24px;position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:22px}.draft-nav a{color:white}.n2d-care select{font:inherit;max-width:100%;padding:10px;border:1px solid #879c8c;border-radius:8px}.n2d-care .language-title{text-align:center;margin-bottom:32px}.n2d-care .language-title h1{margin-bottom:12px}.n2d-care .language-title p{margin:10px 0}.n2d-care .language-title p:last-child{margin:0;font-style:italic}.n2d-care details{margin:20px 0}.n2d-care table{border-collapse:collapse;width:100%}.n2d-care th,.n2d-care td{padding:12px;border-bottom:1px solid #ddd;text-align:left}@media(max-width:720px){.n2d-care .grid{grid-template-columns:1fr}.n2d-care{padding:18px}.draft-nav{position:static}}
.n2d-spanish .profile-card img {max-width:220px;height:auto;border-radius:18px;} .n2d-spanish .profile-card {display:block;} .n2d-spanish .country-links {display:flex;flex-wrap:wrap;gap:12px;} .n2d-inquiry label {display:block;margin-top:16px;} .n2d-inquiry input,.n2d-inquiry select,.n2d-inquiry textarea {max-width:100%;border:1px solid #bbb;padding:12px;border-radius:8px;} .n2d-inquiry .button {margin-top:20px;}
.n2d-care a.button, .n2d-care button.button {color:#ffffff!important;background:#17212b;}
.n2d-care a.button:hover, .n2d-care a.button:focus-visible, .n2d-care button.button:hover, .n2d-care button.button:focus-visible {color:#ffffff!important;background:#263a30;}
.n2d-care .card > p:last-child, .n2d-care .profile-card > p:last-child {margin:16px 0 0!important;padding-top:0;}
.n2d-care .card > p:last-child > .button, .n2d-care .profile-card > p:last-child > .button {margin:0!important;max-width:100%;white-space:normal;line-height:1.4;color:#fff!important;}
.n2d-care .card > .care-button {margin-top:16px!important;margin-bottom:0!important;}