/* ============================================================================
   Nexian Global — Base styles
   Reset, root sizing, body defaults, scrollbar, focus rings.
   Depends on tokens.css (load tokens.css first).
   ============================================================================ */

/* --- Reset (modern, minimal) ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* --- Root sizing (V0 uses 14.4px = 90% of 16px) ---------------------- */
html {
  font-size: var(--size-root);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* --- Body ------------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  line-height: 1.55;
  color: var(--text-300);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- hCaptcha challenge popup containment ---------------------------- */
/*
 * hCaptcha appends its challenge popup as an absolutely positioned child of
 * <body> (302px wide) and anchors it with a `left` offset next to the widget.
 * On a phone that offset puts its right edge past the viewport: measured
 * 477px against a 412px screen on the live site.
 *
 * The `overflow-x: hidden` above cannot stop it. <body> is position:static, so
 * the popup's containing block is the initial containing block rather than
 * body; and that overflow value propagates to the viewport, which leaves body
 * itself treated as overflow:visible. The document genuinely grows, mobile
 * Chrome widens the layout viewport to match, and every position:fixed layer
 * stretches with it - which is what pushed the navbar's hamburger off-screen
 * and let the whole page pan sideways.
 *
 * ⚠ document.body.scrollWidth reports 412 the entire time. Only
 * documentElement.scrollWidth shows the growth. Measure the right box.
 *
 * Phones only: on a desktop the popup has room and its anchored position is
 * the better placement.
 *
 * ⚠⚠ Do NOT key this on aria-hidden. hCaptcha flips it to "false" the moment
 * it SHOWS the challenge, which is the only moment the rule is needed: keyed on
 * [aria-hidden="true"] the selector switched itself off exactly when it mattered
 * and the bug survived a deploy that measured green. Verified both ways:
 * aria-hidden=true -> 412 (passes for the wrong reason), aria-hidden=false ->
 * 477 (the live bug), this selector -> 412 in both.
 *
 * The `> div > iframe` chain is deliberate. It matches the challenge container
 * only; the checkbox widget iframe sits many levels deep inside .journey-root,
 * so a loose descendant match would drag the whole modal into this rule.
 * Asserted: the selector matches exactly 1 element.
 */
@media (max-width: 900px) {
  body > div:has(> div > iframe[src*="hcaptcha.com"]) {
    right: 0 !important;
    left: auto !important;
    max-width: 100% !important;
  }
}

/* --- Typography defaults --------------------------------------------- */
/* V0 doesn't apply Cinzel by default to h-tags — only explicitly via class.
 * Inheriting Inter from <body> matches V0; classes that need Cinzel set
 * `font-family: var(--font-display)` explicitly (page-title, scroll-section-
 * title, doc-title, legacy-title, swcard-name, hofw-name, etc.).
 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-100);
}

p { line-height: 1.6; }

strong, b { font-weight: 600; color: var(--text-200); }

/* Branded link */
a.brand-link {
  color: var(--gold-400);
  transition: color var(--dur-fast) var(--ease-out);
}
a.brand-link:hover { color: var(--gold-200); }

/* --- Focus rings (accessibility CRITICAL) ----------------------------- */
*:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

/* Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Scrollbar (hidden by default, opt-in via .custom-scroll) -------- */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar { display: none; }

.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 120, 20, 0.45) transparent;
}
.custom-scroll::-webkit-scrollbar { display: block; width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(var(--gold-rgb), 0)   0%,
    rgba(var(--gold-rgb), 0.55) 20%,
    rgba(180, 120, 20, 0.65)    50%,
    rgba(var(--gold-rgb), 0.55) 80%,
    rgba(var(--gold-rgb), 0)   100%
  );
  border-radius: var(--radius-full);
}

/* --- Selection ------------------------------------------------------- */
::selection {
  background: rgba(var(--gold-rgb), 0.35);
  color: var(--text-100);
}

/* --- Utility: visually hidden (a11y) -------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Container ------------------------------------------------------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
  max-width: var(--container-7xl);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

/* --- Icon sizing utilities (Tailwind-equivalent) -------------------- */
/* Used by the icon() helper and a few inline svg/img elements.        */
.h-3   { height: 0.75rem; }     .w-3   { width: 0.75rem; }      /* 12px */
.h-3-5 { height: 0.875rem; }    .w-3-5 { width: 0.875rem; }     /* 14px */
.h-4   { height: 1rem; }        .w-4   { width: 1rem; }         /* 16px */
.h-5   { height: 1.25rem; }     .w-5   { width: 1.25rem; }      /* 20px */
.h-6   { height: 1.5rem; }      .w-6   { width: 1.5rem; }       /* 24px */
.h-7   { height: 1.75rem; }     .w-7   { width: 1.75rem; }      /* 28px */
.h-8   { height: 2rem; }        .w-8   { width: 2rem; }         /* 32px */
.h-10  { height: 2.5rem; }      .w-10  { width: 2.5rem; }       /* 40px */
.h-12  { height: 3rem; }        .w-12  { width: 3rem; }         /* 48px */

/* SVG icons honor currentColor and have inline-block flow.
 * IMPORTANT: don't force `fill: none` here. CSS overrides the inline `fill`
 * presentation attribute, which made every <Play fill="currentColor"> render
 * hollow. The icon() helper now controls fill per-icon. */
svg[aria-hidden="true"] {
  flex-shrink: 0;
  stroke: currentColor;
}


/* The shell's <main>. Moved out of an inline style on 2026-08-22 so a page can
   override it; the values are exactly what the inline style carried. */
.site-main {
  flex: 1 0 auto;
  padding-block: var(--space-8) var(--space-12);
}