/* ==========================================================================
   1st National Adivasi Olympiad — Design Tokens
   Every value here is the single source of truth. Nothing downstream
   hardcodes a colour, size, or spacing value.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Ink & surface ---------------------------------------------------- */
  --ink:            #111827;   /* body text — near-black, never pure black */
  --ink-muted:      #5B6472;   /* secondary text, captions */
  /* 4.58:1 on white — passes AA, but ONLY on white. On --surface-warm it
     drops to 4.39 and fails. Use --ink-muted on any warm surface. */
  --ink-faint:      #6E7684;
  --surface:        #FFFFFF;   /* primary canvas */
  --surface-warm:   #FDFAF3;   /* alternating sections — a whisper of cream */
  --surface-sunk:   #F6F3EC;   /* inset wells, table headers */
  --line:           #E7E2D8;   /* hairline rules, card borders */
  --line-strong:    #D2CABA;

  /* --- Brand ------------------------------------------------------------
     Deepened from the booklet so the palette survives WCAG AA on white.
     The bright booklet values are kept for decoration only.               */
  --primary:        #0F5A96;   /* 6.4:1 on white — safe for text */
  --primary-bright: #1878C4;   /* booklet blue — accents, illustration */
  --primary-deep:   #0A4271;
  --primary-tint:   #EAF2F9;

  --accent:         #B02127;   /* deepened booklet red — primary CTA */
  --accent-deep:    #8C1A1F;
  --accent-tint:    #FBEEEE;

  --gold:           #87670F;   /* deepened gold — 5.28:1 on white,
                                  4.80:1 on --gold-tint (the badge case,
                                  which is the binding constraint) */
  --gold-bright:    #C9A227;   /* seal accents, icon fills — not text */
  --gold-light:     #F0D96B;   /* booklet gold — DECORATIVE ONLY, 1.41:1 */
  --gold-tint:      #FBF4DD;

  /* --- Status ------------------------------------------------------------ */
  --success:        #1E7A4B;
  --success-tint:   #E8F5EE;
  --warning:        #9A5B00;
  --warning-tint:   #FDF2E2;
  --danger:         #A8181E;
  --danger-tint:    #FBEAEA;

  /* --- Typography --------------------------------------------------------
     Production self-hosts Fraunces (display) + Inter + Noto Sans Devanagari,
     subsetted. These stacks stand in for the mockups so nothing is fetched
     from a third-party CDN.                                               */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Modular scale, ratio 1.25, base 16px */
  --step--2: 0.64rem;   /* 10.24 */
  --step--1: 0.8rem;    /* 12.8  */
  --step-0:  1rem;      /* 16    */
  --step-1:  1.25rem;   /* 20    */
  --step-2:  1.5625rem; /* 25    */
  --step-3:  1.9531rem; /* 31.25 */
  --step-4:  2.4414rem; /* 39    */
  --step-5:  3.0518rem; /* 48.8  */

  /* Fluid display sizes — clamp so headings never overflow a 320px screen */
  --display-lg: clamp(2.25rem, 1.4rem + 4.2vw, 4rem);
  --display-md: clamp(1.85rem, 1.3rem + 2.6vw, 3rem);
  --display-sm: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* --- Spacing — 8px grid. Every margin is a multiple of these. ---------- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* --- Layout ------------------------------------------------------------ */
  --container:      1180px;
  --container-tight: 900px;
  --prose:          68ch;
  --radius-sm:      4px;
  --radius:         8px;
  --radius-lg:      14px;
  --radius-pill:    999px;

  /* --- Elevation — restrained. Borders do most of the work. -------------- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow:    0 2px 8px rgba(17, 24, 39, 0.07);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  /* --- Motion — subtle and purposeful. ---------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.15, 1);
  --dur-fast: 150ms;
  --dur:      220ms;

  /* --- Focus — visible, never removed. ---------------------------------- */
  --focus-ring: 3px solid var(--primary-bright);
  --focus-offset: 2px;

  /* Minimum touch target (WCAG 2.5.5) */
  --touch: 44px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

h1 { font-size: var(--display-lg); }
h2 { font-size: var(--display-md); }
h3 { font-size: var(--display-sm); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 650; letter-spacing: 0; }

p  { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-deep); }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li + li { margin-top: var(--space-2); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }

/* Focus is never removed — only refined. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

::selection { background: var(--gold-light); color: var(--ink); }

/* `hidden` must mean hidden. The browser's own [hidden] rule loses to ANY author rule that
   sets display, so every component with `display:flex` (.alert, .field__error, .cluster…)
   kept rendering when a script set el.hidden = true. On 13 Sep 2026 that showed every
   student "The payment did not go through" on the pay page before they had tried to pay.
   It had been patched per component (.row[hidden], .contact-fab__actions[hidden]); this is
   the general fix. Scripts here only ever toggle the property, never style.display, so
   !important breaks nothing. */
[hidden] { display: none !important; }

/* The site header is sticky and 77px tall, so a fragment target lands underneath it
   unless it reserves the space. Applied by class rather than to every [id], because
   only a handful of sections are ever linked to and a blanket rule would push
   unrelated anchors around. */
.anchor-target { scroll-margin-top: 6rem; }

/* NO `html { scroll-behavior: smooth }` here, deliberately. It looks better on an
   in-page click but it breaks the case this exists for: arriving at /Home/Olympiad
   #syllabus from another page, the smooth scroll begins during load and is cancelled
   as images resolve and shift the layout — measured landing at 84px down a page that
   should have gone to 1250. An instant jump lands every time. */

@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;
  }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--tight { max-width: var(--container-tight); }

.section { padding-block: var(--space-8); }
.section--warm { background: var(--surface-warm); }
.section--sunk { background: var(--surface-sunk); }

@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}

.prose { max-width: var(--prose); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

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

/* Language variants for blocks that contain markup — a data-en/data-hi
   textContent swap would destroy nested elements, so those use these
   instead. Production renders only one of these server-side. */
html:not([lang="hi"]) .only-hi { display: none; }
html[lang="hi"]       .only-en { display: none; }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--ink); color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); z-index: 200;
  text-decoration: none; font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* ==========================================================================
   Text helpers
   ========================================================================== */

.eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.eyebrow--blue { color: var(--primary); }

.lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.muted  { color: var(--ink-muted); }
.faint  { color: var(--ink-faint); }
.numeric { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   The tribal border band — from the booklet cover.
   Used once or twice per page as a divider. Never as wallpaper.
   ========================================================================== */

.motif-band {
  height: 18px;
  color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'%3E%3Cg fill='%23B02127'%3E%3Cpath d='M12 2 L16 9 L12 16 L8 9 Z'/%3E%3Cpath d='M36 2 L40 9 L36 16 L32 9 Z'/%3E%3Ccircle cx='24' cy='9' r='2.4'/%3E%3Ccircle cx='0' cy='9' r='2.4'/%3E%3Ccircle cx='48' cy='9' r='2.4'/%3E%3Cpath d='M24 1 L25.2 4 L24 7 L22.8 4 Z'/%3E%3Cpath d='M24 11 L25.2 14 L24 17 L22.8 14 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}
.motif-band--gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'%3E%3Cg fill='%23C9A227'%3E%3Cpath d='M12 2 L16 9 L12 16 L8 9 Z'/%3E%3Cpath d='M36 2 L40 9 L36 16 L32 9 Z'/%3E%3Ccircle cx='24' cy='9' r='2.4'/%3E%3Ccircle cx='0' cy='9' r='2.4'/%3E%3Ccircle cx='48' cy='9' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
}