/* ===========================================================================
   AITA — public design system
   Extracted from the inline <style> block in app/Views/web/layout.php and
   extended with the BOLD federation treatment (heavy type scale, full-bleed
   navy section bands, elevation) borrowed from the LTAT Tour design line.

   Palette stays SAFFRON — India's flag identity. We borrow the TREATMENT,
   not LTAT Tour's gold. Self-hosted only, no CDNs (GR-4) — the sealed CSP in
   Filters/SecurityHeaders.php needs no loosening.
   =========================================================================== */

:root{
    /* --- brand (unchanged) --- */
    --navy:#0a2540; --saffron:#E2762B; --saffron-d:#c25f1d; --saffron-lt:#f0a35e;
    --saffron-050:#fdf2e9;   /* pale wash — mega-menu icon chips (SI-4: token, never an inline hex) */
    --saffron-glow:rgba(226,118,43,.55);  /* the country's halo — India's outline on the map */
    /* DAY MAP (SI, S15): in LIGHT mode the map is white-on-blue. Blue is a SYSTEM colour for the
       map chrome only — saffron and navy remain AITA's brand identity, which never flips. */
    --blue:#1f6fd6; --blue-d:#1857ab; --blue-050:#eaf2fc; --blue-glow:rgba(31,111,214,.5);
    --green:var(--saffron);                       /* legacy alias — never an actual green */
    /* --- NEW: navy depth, for full-bleed bands --- */
    --navy-800:#0b2f52; --navy-900:#061a30;
    /* --- NEW: neutrals + system tokens --- */
    --ink:#1c2b3a; --muted:#5e6e82; --line:#e3e8ee; --bg:#ffffff; --bg-alt:#eef3f9;
    --shadow:0 18px 50px rgba(10,37,64,.18); --shadow-sm:0 6px 20px rgba(10,37,64,.10);
    --radius:16px; --radius-lg:20px; --maxw:1240px;   /* 20px = the reference's card radius */
    --font:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ===========================================================================
   DARK MODE (SI-3) — Captain S14: three modes, auto by INDIA time (6am-6pm light,
   6pm-6am dark, IST for everyone), with a user override.
   ---------------------------------------------------------------------------
   Only SYSTEM tokens flip. The brand does NOT: saffron is India's flag identity and
   navy is AITA — a federation that changes colour at dusk has no identity. What
   changes is the page beneath them.

   The one real design problem: in light mode the drama comes from navy BANDS on a
   white page. Flip the page to navy and the bands vanish into it. So dark mode goes
   DEEPER than the bands (--bg below --navy-900) and the bands stay as raised blocks.
   That is why --bg is not simply --navy-900.
   =========================================================================== */
:root[data-theme="dark"]{
    --bg:#050f1c;            /* deeper than --navy-900 so the navy bands still read as blocks */
    --bg-alt:#0c1d31;        /* the "alt" band — a step up from the page, not down */
    --ink:#e7eef6;
    --muted:#92a8c0;
    --line:rgba(255,255,255,.13);
    --shadow:0 18px 50px rgba(0,0,0,.5);
    --shadow-sm:0 6px 20px rgba(0,0,0,.38);
    /* Saffron lifts slightly in the dark so it stays legible without glaring. */
    --saffron-d:#e8873c;
    --saffron-050:rgba(226,118,43,.14);
}
:root[data-theme="dark"] body{ background:var(--bg); }

/* Cards/blocks that assumed a white page. */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .card-flat{ background:var(--bg-alt); color:var(--ink); }
:root[data-theme="dark"] .section-alt{ background:var(--bg-alt); }
/* The navy bands stay navy — they are the brand — but now sit ABOVE the page. */
:root[data-theme="dark"] .section-navy, :root[data-theme="dark"] .map-band{ background:var(--navy-900); }
:root[data-theme="dark"] .bg-white{ background:var(--bg-alt) !important; }
:root[data-theme="dark"] .text-secondary{ color:var(--muted) !important; }
:root[data-theme="dark"] .dl-item{ background:var(--bg-alt); }
:root[data-theme="dark"] .dl-item:hover{ background:#12293f; }
:root[data-theme="dark"] .dl-title{ color:var(--ink); }
:root[data-theme="dark"] .doc-viewer{ border-color:var(--line); background:var(--bg-alt); }
:root[data-theme="dark"] .dv-bar{ background:var(--bg-alt); border-color:var(--line); }
:root[data-theme="dark"] .pdfjs, :root[data-theme="dark"] .pdfjs-pages{ background:var(--bg-alt); }
/* A rendered PDF page is white paper — never invert it, it would look broken. */
:root[data-theme="dark"] .mega{ background:var(--bg-alt); }
:root[data-theme="dark"] .mega-item:hover{ background:#12293f; }
:root[data-theme="dark"] .mega-item .tt{ color:var(--ink); }
:root[data-theme="dark"] .map-tip{ background:var(--bg-alt); color:var(--ink); }

/* The toggle itself */
.theme-btn{ width:38px; height:38px; border:0; border-radius:8px; background:rgba(255,255,255,.14);
    color:var(--saffron); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem;
    cursor:pointer; padding:0; }
.theme-btn:hover{ background:var(--saffron); color:#fff; }
.theme-btn .ti{ display:none; }
:root[data-theme="light"] .theme-btn .ti-light,
:root:not([data-theme="dark"]) .theme-btn .ti-light{ display:inline; }
:root[data-theme="dark"] .theme-btn .ti-dark{ display:inline; }

/* ===========================================================================
   LIGHT-MODE CHROME (SI, S15) — Captain: "the Header, the Maps page, and any other page with a
   dark background must be LIGHT during the day (6am–6pm IST) and dark after 6pm."
   The navy chrome was hardcoded var(--navy), so it stayed dark even at midday. Here we flip it
   for the LIGHT theme ONLY (`:not([data-theme="dark"])` = light-or-unset, matching the theme-btn
   convention above); the dark theme keeps AITA's navy identity untouched.
   Deliberately NOT flipped (flagged for the Captain): the hero photo-overlay (its dark gradient
   exists so white text stays legible over photographs) and the site footer (the conventional dark
   anchor of the page). Both are trivial to flip too if he wants them.
   =========================================================================== */
:root:not([data-theme="dark"]) .nav-wrap{ background:#fff; box-shadow:0 2px 10px rgba(10,37,64,.06);
    border-bottom:1px solid var(--line); }
:root:not([data-theme="dark"]) .nav-wrap .brand{ color:var(--navy); }
:root:not([data-theme="dark"]) .nav-wrap .brand small{ color:var(--saffron-d); }
:root:not([data-theme="dark"]) .nav-wrap a.nav-link{ color:var(--ink); }
:root:not([data-theme="dark"]) .nav-wrap a.nav-link:hover,
:root:not([data-theme="dark"]) .nav-wrap a.nav-link.active{ color:var(--saffron-d); }
:root:not([data-theme="dark"]) .aita-menu>li>a{ color:var(--ink); opacity:.9; }
:root:not([data-theme="dark"]) .aita-menu>li>a:hover,
:root:not([data-theme="dark"]) .aita-menu>li.has-mega:hover>a,
:root:not([data-theme="dark"]) .aita-menu>li.has-mega:focus-within>a{ background:var(--bg-alt); color:var(--saffron-d); opacity:1; }
:root:not([data-theme="dark"]) .theme-btn{ background:rgba(10,37,64,.08); color:var(--saffron); }
:root:not([data-theme="dark"]) .theme-btn:hover{ background:var(--saffron); color:#fff; }
:root:not([data-theme="dark"]) .menu-btn{ background:var(--navy); color:#fff; }
:root:not([data-theme="dark"]) .menu-btn:hover{ background:var(--saffron); color:#fff; }

/* Utility bar → light */
:root:not([data-theme="dark"]) .util-bar{ background:var(--bg-alt); color:var(--muted); border-bottom:1px solid var(--line); }
:root:not([data-theme="dark"]) .util-bar a{ color:var(--muted); }
:root:not([data-theme="dark"]) .util-bar a:hover{ color:var(--navy); }

/* Inner-page hero strip → light (breadcrumb + title use Bootstrap text-white utilities, so
   they need explicit overrides or they vanish on the now-light band). */
:root:not([data-theme="dark"]) .page-hero{ background:var(--bg-alt); color:var(--ink); border-bottom:1px solid var(--line); }
:root:not([data-theme="dark"]) .page-hero h1,
:root:not([data-theme="dark"]) .page-hero .display-6{ color:var(--ink); }
:root:not([data-theme="dark"]) .page-hero .text-white-50{ color:var(--muted) !important; }
:root:not([data-theme="dark"]) .page-hero a.text-white-50{ color:var(--saffron-d) !important; }

/* Player-card showcase band → light */
:root:not([data-theme="dark"]) .pcard-showcase{ background:var(--bg-alt); }
:root:not([data-theme="dark"]) .pcard-showcase .eyebrow{ color:var(--saffron-d); }
:root:not([data-theme="dark"]) .pcard-showcase .text-white,
:root:not([data-theme="dark"]) .pcard-showcase .h-sec{ color:var(--ink) !important; }
:root:not([data-theme="dark"]) .pcard-showcase .text-white-50{ color:var(--muted) !important; }

/* Generic navy section band → light */
:root:not([data-theme="dark"]) .section-navy{ background:var(--bg-alt); color:var(--ink); }
:root:not([data-theme="dark"]) .section-navy .h-sec,
:root:not([data-theme="dark"]) .section-navy .h-sub{ color:var(--ink); }
:root:not([data-theme="dark"]) .section-navy .lead-sec{ color:var(--muted); }
:root:not([data-theme="dark"]) .section-navy .eyebrow{ color:var(--saffron-d); }
:root:not([data-theme="dark"]) .section-navy a{ color:var(--saffron-d); }

body{ font-family:var(--font); color:var(--ink); background:var(--bg); }
h1,h2,h3,h4,.brand{ font-family:var(--font); }
a{ color:var(--green); }

/* ===========================================================================
   NEW — the "bold" layer (this is what makes AITA read confident, not passive)
   =========================================================================== */

/* Type — measured from the reference: bold = UPPERCASE + tight tracking at a MODERATE
   weight (600), not heavy weight. Long news headlines stay sentence-case for readability. */
.h-sec{ font-weight:600; font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-.4px; line-height:1.06;
    text-transform:uppercase; margin:0; }
.h-sec.center{ text-align:center; }
.h-sub{ font-weight:600; font-size:clamp(1.05rem,1.7vw,1.3rem); letter-spacing:-.2px; line-height:1.2; text-transform:uppercase; }
.eyebrow{ color:var(--saffron-d); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; display:inline-block; }
.lead-sec{ color:var(--muted); font-size:1.02rem; max-width:64ch; }

/* Section rhythm: confident air + alternating bands = the drama that was missing. */
.section{ padding:4.5rem 0; }
.section-alt{ background:var(--bg-alt); }
.section-navy{ background:var(--navy-900); color:#fff; }
.section-navy .h-sec, .section-navy .h-sub{ color:#fff; }
.section-navy .lead-sec{ color:#b9cde2; }
.section-navy .eyebrow{ color:var(--saffron-lt); }
.section-navy a{ color:var(--saffron-lt); }
@media (max-width:767px){ .section{ padding:3rem 0; } }

/* FLAT, not shadowed. The reference uses solid colour + 20px radius and ZERO shadow —
   flat + saturated reads confident; shadowed reads 2015. */
.card-flat{ border:0; border-radius:var(--radius-lg); box-shadow:none !important; overflow:hidden;
    transition:transform .2s ease; }
.card-flat:hover{ transform:translateY(-3px); }

/* Solid colour-block cards — used where there is no photo, and for feature/CTA blocks. */
.block-card{ display:flex; flex-direction:column; justify-content:flex-end; min-height:200px;
    border-radius:var(--radius-lg); padding:1.1rem 1.15rem; text-decoration:none; box-shadow:none;
    transition:transform .2s ease; }
.block-card:hover{ transform:translateY(-3px); }
.block-card.b-navy{ background:var(--navy); }
.block-card.b-navy-lt{ background:#1c3a5c; }
.block-card.b-deep{ background:var(--navy-900); }
.block-card.b-saffron{ background:var(--saffron); }
.block-card .bc-eyebrow{ color:var(--saffron-lt); font-size:.66rem; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; margin-bottom:.25rem; }
.block-card.b-saffron .bc-eyebrow{ color:#4a1b0c; }
.block-card .bc-title{ color:#fff; font-weight:600; font-size:.98rem; line-height:1.25;
    text-transform:uppercase; letter-spacing:-.2px; margin:0; }

/* Photo cards keep the imagery (it's AITA's biggest asset) but take the flat 20px treatment. */
.photo-card{ position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden;
    min-height:200px; background:var(--navy); box-shadow:none; transition:transform .2s ease; }
.photo-card:hover{ transform:translateY(-3px); }
.photo-card .pc-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .35s ease; }
.photo-card:hover .pc-img{ transform:scale(1.05); }
.photo-card .pc-cap{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    padding:1rem 1.1rem; background:linear-gradient(to top, rgba(6,26,48,.92) 0%, rgba(6,26,48,.45) 45%, rgba(6,26,48,0) 100%); }

/* ===========================================================================
   Existing chrome — moved verbatim from the layout's inline block
   =========================================================================== */

/* ===========================================================================
   Full-screen navy TAKEOVER menu — the reference's signature.
   It's not just style: it's the only pattern that can hold AITA's 11 menus /
   ~80 nodes / 3 levels. A dropdown navbar physically cannot (which is exactly
   why the current WordPress site's dropdowns overflow).
   =========================================================================== */
.menu-btn{ width:44px; height:44px; border:0; border-radius:8px; background:#fff; color:var(--navy);
    display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; cursor:pointer; padding:0; }
.menu-btn:hover{ background:var(--saffron); color:#fff; }
/* Translucent frost — the user should be able to MAKE OUT the home page behind it.
   Opacity + blur are the levers that reveal the page (saturate only enriches what survives),
   so: alpha .90→.80 and blur 14→10px, with saturate at 150%. Links get a soft shadow so the
   uppercase type stays legible where a bright hero photo sits behind. */
.nav-takeover{ position:fixed; inset:0; background:rgba(6,26,48,.80); z-index:2000; overflow-y:auto;
    display:none; padding:1.1rem 0 3.5rem;
    -webkit-backdrop-filter:blur(10px) saturate(150%); backdrop-filter:blur(10px) saturate(150%); }
.nav-takeover .tk-top, .nav-takeover .tk-brand{ text-shadow:0 1px 14px rgba(6,26,48,.6); }
.nav-takeover .tk-sub a{ text-shadow:0 1px 10px rgba(6,26,48,.5); }
/* No backdrop-filter support → fall back to near-solid so text never sits on raw photo. */
@supports not (backdrop-filter: blur(2px)){ .nav-takeover{ background:rgba(6,26,48,.97); } }
.nav-takeover.show{ display:block; }
body.tk-open{ overflow:hidden; }
.tk-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2.2rem; }
.tk-brand{ display:flex; align-items:center; gap:.55rem; color:#fff; text-decoration:none; font-weight:600; letter-spacing:.14em; }
.tk-brand img{ height:34px; width:auto; background:#fff; border-radius:6px; padding:3px 5px; }
.tk-close{ background:transparent; border:0; color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; padding:.2rem .5rem; }
.tk-close:hover{ color:var(--saffron); }
.tk-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.7rem 2rem; }
.tk-top{ color:#fff; font-size:1.2rem; font-weight:600; text-transform:uppercase; letter-spacing:-.3px;
    text-decoration:none; display:block; margin-bottom:.45rem; }
.tk-top:hover{ color:var(--saffron); }
.tk-sub{ display:flex; flex-direction:column; }
.tk-sub a{ color:#b9cde2; font-size:.84rem; text-decoration:none; padding:.2rem 0; }
.tk-sub a:hover{ color:var(--saffron-lt); }
.tk-sub .tk-deep{ padding-left:.7rem; font-size:.78rem; color:#8fb3d4; }  /* 3rd level (e.g. calendar years) */
.tk-rule{ width:70px; height:3px; background:var(--saffron); margin:2.4rem 0 1.1rem; }
.tk-foot{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.tk-foot a{ color:#8fb3d4; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.tk-foot a:hover{ color:var(--saffron-lt); }

/* Sticky header — the whole header (util-bar + nav) now pins as one unit, wrapped in .site-header
   (S15) so it can also float over the homepage hero. */
.site-header{ position:sticky; top:0; z-index:1030; }
.nav-wrap{ box-shadow:0 2px 10px rgba(10,37,64,.12); background:var(--navy); }

/* HOME ONLY — full-bleed hero with the header floating over it (Captain S15). A translucent navy
   scrim keeps the menus legible on ANY hero image (light or dark); once you scroll past the hero
   the header snaps back to the normal theme chrome (body.nav-solid, toggled in JS). */
body.home .site-header{ position:fixed; left:0; right:0; top:0; transition:background .25s ease; }
body.home:not(.nav-solid) .site-header{
    background:linear-gradient(180deg, rgba(6,26,48,.72) 0%, rgba(6,26,48,.34) 55%, rgba(6,26,48,0) 100%); }
body.home:not(.nav-solid) .util-bar,
body.home:not(.nav-solid) .nav-wrap{ background:transparent; box-shadow:none; border:0; }
body.home:not(.nav-solid) .nav-wrap .brand,
body.home:not(.nav-solid) .aita-menu>li>a,
body.home:not(.nav-solid) .nav-wrap a.nav-link,
body.home:not(.nav-solid) .util-bar,
body.home:not(.nav-solid) .util-bar a{ color:#fff !important; }
body.home:not(.nav-solid) .nav-wrap .brand small{ color:var(--saffron-lt) !important; }
body.home:not(.nav-solid) .theme-btn{ background:rgba(255,255,255,.18); }
body.home.nav-solid .site-header{ box-shadow:0 2px 10px rgba(10,37,64,.12); }
.nav-wrap .brand{ color:#fff; font-weight:800; letter-spacing:.5px; text-decoration:none; display:flex; align-items:center; gap:.55rem; }
.nav-wrap .brand img{ height:40px; width:auto; background:#fff; border-radius:8px; padding:3px 6px; }
.nav-wrap .brand small{ color:var(--saffron-lt); font-weight:600; letter-spacing:2px; }
/* Indian flag tucked BEHIND the brand lockup (Captain S16) — the tricolour ribbon, faint, sitting
   under the logo + wordmark. z-index:-1 within the brand's own stacking context keeps it above the
   header bg but behind the text; pointer-events:none so it never intercepts the click. Tune opacity. */
.nav-wrap .brand{ position:relative; z-index:0; }
.nav-wrap .brand::before{ content:""; position:absolute; inset:-6px -14px; z-index:-1; pointer-events:none;
    background:url("../img/flag-ribbon.png") center / cover no-repeat; opacity:.32; border-radius:10px; }
.nav-wrap a.nav-link{ color:#c7d6e6; font-weight:500; }
.nav-wrap a.nav-link:hover, .nav-wrap a.nav-link.active{ color:#fff; }

/* O7: sticky social rail — icons fixed to the right edge; slide out on hover.
   pointer-events:none on the CONTAINER so its empty 168px box can't swallow clicks
   down the right edge of the page (the icons re-enable it). */
.social-rail{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:1030;
    display:flex; flex-direction:column; gap:4px; pointer-events:none; }
.social-rail a{ pointer-events:auto; display:flex; align-items:center; height:44px; width:168px; color:#fff; text-decoration:none;
    border-radius:6px 0 0 6px; transform:translateX(124px); transition:transform .25s ease; box-shadow:-2px 2px 8px rgba(0,0,0,.18); }
.social-rail a:hover, .social-rail a:focus{ transform:translateX(0); }
.social-rail a .si-ic{ width:44px; min-width:44px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.social-rail a .si-lb{ font-size:.85rem; font-weight:600; white-space:nowrap; }
.social-rail a.fb{ background:#1877f2; } .social-rail a.ig{ background:#e1306c; } .social-rail a.tw{ background:#111; }
.social-rail a.yt{ background:#ff0000; } .social-rail a.li{ background:#0a66c2; }
@media (max-width:576px){ .social-rail{ display:none; } }

/* Utility bar (Editorial Federation chrome) */
.util-bar{ background:var(--navy-900); color:#9fc4e6; font-size:.78rem; }
.util-bar a{ color:#9fc4e6; text-decoration:none; }
.util-bar a:hover{ color:#fff; }
.util-bar .util-social a{ font-size:.95rem; }
.util-bar .portal-cta{ background:var(--saffron); color:#fff; font-weight:600; padding:.2rem .7rem; border-radius:4px; }
.util-bar .portal-cta:hover{ background:var(--saffron-d); color:#fff; }

/* Site-wide partner / affiliation strip */
.partner-strip{ background:#fff; border-top:1px solid var(--line); }
.partner-strip .eyebrow-p{ letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; font-weight:700; color:#8595a8; }
.partner-strip img{ height:46px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .2s ease, opacity .2s ease; }
.partner-strip a:hover img{ filter:grayscale(0); opacity:1; }

/* K: slim inner-page hero strip ≈ header height (title + breadcrumb only) */
.page-hero{ background:linear-gradient(135deg, var(--navy), #123a63); color:#fff;
    padding-top:.85rem !important; padding-bottom:.85rem !important; }
.page-hero nav{ margin-bottom:.1rem !important; }
.page-hero h1, .page-hero .display-6{ font-size:1.4rem !important; margin-bottom:0 !important; }
.page-hero > .container > p{ display:none; }

footer.site-footer{ background:var(--navy); color:#aebfd4; }
footer.site-footer a{ color:var(--saffron-lt); text-decoration:none; }

.btn-aita{ background:var(--saffron); border-color:var(--saffron); color:#fff; font-weight:700; }
.btn-aita:hover{ background:var(--saffron-d); border-color:var(--saffron-d); color:#fff; }
.text-bg-success{ background-color:var(--navy)!important; color:#fff!important; }  /* success toasts: navy, never green */

/* integration-shell skeleton loaders (GR-2 — data wired by the dev team) */
.skeleton{ background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%); background-size:400% 100%;
    animation:shimmer 1.4s ease infinite; border-radius:.5rem; }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.integration-badge{ background:rgba(226,118,43,.12); color:var(--saffron-d); font-weight:700; font-size:.72rem;
    letter-spacing:.05em; padding:.25rem .6rem; border-radius:1rem; }

/* ===========================================================================
   MEGA-MENU (desktop) + the takeover as a MOBILE accordion
   ---------------------------------------------------------------------------
   Captain (S12), comparing our takeover with LTAT Tour's mega: "The menu are
   still looking very disorganized... it is too over powering for a mobile user."
   He was right. The measured difference was NOT node count — LTAT's panels hold
   ~8-10 items, our TOURNAMENTS holds 10 — it was that every LTAT item carries an
   ICON + a one-line DESCRIPTION, and its columns are balanced. 71 bare labels in
   a grid read as a wall in ANY pattern.

   Copied from ltat-tour-website (Office C) into Office B with the Captain's
   EXPLICIT permission (house-charter R3 — never stroll into another office).
   Deltas kept deliberately:
     - SAFFRON, not LTAT's gold (India's flag identity — the Captain's standing call).
     - Bootstrap Icons (bi-*), not LTAT's FontAwesome — AITA self-hosts BI (GR-4).
     - DB-DRIVEN, not hardcoded: LTAT Tour hardcodes its panels and hand-splits the
       two columns. AITA cannot — the executives must curate this in the Admin Zone,
       which is the entire point of the handover. So columns are split at render.
     - No promo/feature tile yet: LTAT's needs a per-menu image + eyebrow + CTA, i.e.
       more admin surface than we have. The 3rd grid slot is left for it.
   MOBILE: a mega-menu is hover-driven (`:hover .mega`) and cannot work on a phone —
   LTAT Tour runs a separate mobile nav for exactly this reason. We keep the
   full-screen takeover there, but COLLAPSED: tap a section to open it. That is what
   fixes "overpowering" — not swapping the pattern.
   =========================================================================== */

.aita-menu{ display:none; list-style:none; margin:0; padding:0; gap:.15rem; }
.aita-menu>li{ position:static; }
/* The bar sits on the NAVY header — so these are WHITE, not --ink. (S12: shipped them as --ink,
   which rendered near-invisible dark-on-navy. The header background is the constraint, not the
   page's.) Hover/open lifts to a pale pill whose white ties visually into the mega panel below. */
.aita-menu>li>a{ display:flex; align-items:center; gap:.3rem; white-space:nowrap; color:#fff;
    font-weight:600; font-size:.82rem; padding:.55rem .55rem; border-radius:9px; transition:.15s;
    text-transform:uppercase; letter-spacing:.02em; text-decoration:none; opacity:.92; }
.aita-menu>li>a:hover{ background:var(--bg-alt); color:var(--saffron-d); opacity:1; }
.aita-menu>li.has-mega:hover>a,
.aita-menu>li.has-mega:focus-within>a{ background:var(--bg-alt); color:var(--saffron-d); opacity:1; }
.aita-menu>li.has-mega>a::after{ content:''; width:.42em; height:.42em; margin-left:.1rem;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px); opacity:.6; }

/* the panel */
.aita-menu .mega{ position:absolute; left:50%; transform:translateX(-50%) translateY(10px); top:100%;
    width:min(880px,94vw); background:#fff; border-radius:18px; box-shadow:var(--shadow);
    padding:1.4rem; opacity:0; visibility:hidden; transition:.16s; z-index:1200; }
.aita-menu li.has-mega:hover .mega,
.aita-menu li.has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem 1.6rem; }
.mega-col h6{ color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    margin:.2rem .6rem .55rem; font-weight:600; }
.mega-item{ display:flex; gap:.8rem; padding:.55rem .6rem; border-radius:12px; transition:.13s; text-decoration:none; }
.mega-item:hover{ background:var(--bg-alt); }
.mega-item .ic{ width:38px; height:38px; flex:none; border-radius:11px; background:var(--saffron-050);
    color:var(--saffron-d); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.mega-item>span{ display:flex; flex-direction:column; min-width:0; }
.mega-item .tt{ font-weight:600; font-size:.9rem; color:var(--ink); line-height:1.25; }
.mega-item .ds{ font-size:.76rem; color:var(--muted); margin-top:.1rem; line-height:1.25; }

/* Desktop takes the bar; the hamburger + takeover are the MOBILE surface. */
@media (min-width:1200px){
    .aita-menu{ display:flex; }
    .menu-btn{ display:none; }
}

/* ---- the takeover, collapsed (mobile) ------------------------------------ */
.tk-acc{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    background:none; border:0; padding:0; color:inherit; text-align:left; }
.tk-acc .chev{ flex:none; width:.5em; height:.5em; border-right:2px solid currentColor;
    border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.7; transition:transform .18s; }
.tk-acc[aria-expanded="true"] .chev{ transform:rotate(-135deg); }
.nav-takeover .tk-sub[hidden]{ display:none; }

/* ===========================================================================
   DOWNLOADS on a page (Phase 2.3)
   The Captain: "all these pdfs ... should be there on the page, but for downloading."
   Flat, 20px radius, zero shadow — same treatment as the cards. Every row states its
   TYPE and SIZE before the click: the Library is not PDF-only (S12 adopted .docx/.xlsx/
   .xls), so "Download" alone would be a small lie.
   =========================================================================== */
.dl-block{ border-top:1px solid var(--line); padding-top:2rem; }
/* At the TOP of the page (Captain S13: "download pdf from the button on the top of the page") the
   block leads rather than closes — so it gets a saffron edge and no top rule to divide it from the
   heading it sits under. */
.dl-top{ border-top:0; padding-top:0; border-left:3px solid var(--saffron); padding-left:1rem; }
.dl-head{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--saffron-d); margin:0 0 .6rem; }

/* ---- The page that IS a document (display_mode = file) --------------------------------------
   <object>, never <iframe>: the sealed CSP is frame-src <youtube only> — an iframe of our own PDF
   is BLOCKED — but it declares no object-src, so that falls back to default-src 'self' and a
   same-origin <object> is allowed. That is why this needs no seal change. */
.doc-viewer{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.dv-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    padding:.75rem 1rem; background:var(--bg-alt); border-bottom:1px solid var(--line); }
.dv-name{ font-weight:600; color:var(--ink); min-width:0; display:flex; align-items:center; flex-wrap:wrap; }
.dv-meta{ font-size:.72rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-left:.6rem; }
.dv-frame{ display:block; width:100%; height:min(82vh,900px); border:0; background:var(--bg-alt); }

/* ---- PDF.js canvas viewer -------------------------------------------------------------------
   Replaces <object type="application/pdf">, which showed the Captain NOTHING (no browser PDF
   plugin) and would have failed for every phone visitor — the opposite of "all pdfs should
   display in this fashion only". Canvas rendering also needs no CSP change: it touches neither
   frame-src nor object-src. */
.pdfjs{ background:var(--bg-alt); }
.pdfjs-status{ display:flex; align-items:center; justify-content:center; padding:3.5rem 1rem; color:var(--muted); font-size:.9rem; }
.pdfjs-pages{ display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:.75rem; max-height:min(82vh,1000px); overflow-y:auto; }
.pdfjs-page{ display:block; width:100%; height:auto; background:#fff; border-radius:4px;
    box-shadow:0 2px 10px rgba(10,37,64,.14); }
.pdfjs-fail{ text-align:center; padding:3.5rem 1.25rem; color:var(--muted); }
.pdfjs-fail i{ font-size:2.6rem; color:var(--saffron); display:block; margin-bottom:.75rem; }
@media (max-width:767px){ .pdfjs-pages{ max-height:70vh; padding:.5rem; } }
.dv-fallback{ text-align:center; padding:3.5rem 1.25rem; color:var(--muted); }
.dv-fallback i{ font-size:2.6rem; color:var(--saffron); display:block; margin-bottom:.75rem; }
@media (max-width:767px){ .dv-frame{ height:70vh; } }
.dl-list li + li{ margin-top:.5rem; }
.dl-item{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; text-decoration:none;
    background:var(--bg-alt); border-radius:var(--radius); transition:transform .15s ease, background .15s ease; }
.dl-item:hover{ background:#e4edf7; transform:translateX(3px); }
.dl-ic{ width:42px; height:42px; flex:none; border-radius:12px; background:var(--saffron-050);
    color:var(--saffron-d); display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.dl-main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.dl-title{ font-weight:600; color:var(--ink); line-height:1.3; }
.dl-meta{ font-size:.74rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:.1rem; }
.dl-go{ flex:none; color:var(--saffron-d); font-size:1.1rem; opacity:.75; }
.dl-item:hover .dl-go{ opacity:1; }
@media (max-width:575px){ .dl-item{ padding:.7rem .8rem; gap:.7rem; } .dl-ic{ width:36px; height:36px; font-size:1rem; } }

/* ===========================================================================
   THE INDIA MAP (Captain S13: the interactive centrepiece of Tournaments + Rankings)
   Self-hosted inline SVG built by `php spark map:build-india` — no map library, no CDN,
   so the sealed CSP needs no loosening (GR-4). All colour via tokens (SI-4).
   The map NEVER computes a stat — see the GR-2 note in partials/india-map.php.
   =========================================================================== */
.map-band{ background:var(--navy-900); color:#fff; padding:4.5rem 0; }
.map-head{ text-align:center; max-width:60ch; margin:0 auto 2.5rem; }
.map-head .h-sec{ color:#fff; margin:.35rem 0 .5rem; }
.map-head .eyebrow{ color:var(--saffron-lt); }
.map-head .lead-sec{ color:#b9cde2; margin-inline:auto; }

.map-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr); gap:2rem; align-items:start; }
@media (max-width:991px){ .map-grid{ grid-template-columns:1fr; } }

.map-canvas{ position:relative; }
.map-canvas svg{ display:block; width:100%; height:auto; max-height:78vh; }

/* THE COUNTRY OUTLINE (Captain S14: "there needs to be a map outline on the outer periphery of the
   entire country including andaman nicobar ladhak, J&K and all north eastern states").
   drop-shadow on the GROUP is the whole trick: the browser has already composited the 36 states, so
   the halo traces their UNION — the true coastline — and every offshore path (Andaman & Nicobar,
   Lakshadweep) gets its own halo for free. Internal borders sit INSIDE the silhouette and never glow.
   Doing this with a per-state stroke would instead thicken all 36 internal borders and draw no
   coastline at all; a real polygon union in PHP is unnecessary when the compositor does it exactly.
   Two shadows: a tight bright edge, then a wide soft bloom. */
.in-states{
    filter:drop-shadow(0 0 1.5px var(--saffron)) drop-shadow(0 0 10px var(--saffron-glow));
}

/* The states. --w is set only when real data arrives; without it every state reads equal,
   which is the honest look for "we have no numbers yet". */
.in-state{
    /* SOLID, not translucent. Two reasons, both from the Captain (S13/S14):
       (a) "Blue over Blue is a bit dark" — a 9%-white wash barely separated the landmass from the
           --navy-900 band, so India never read as land. --navy-800 is a step lighter than the band.
       (b) drop-shadow() traces the ALPHA channel. At 9% alpha the halo below would also render at 9%
           — i.e. invisible. The glow only works over an opaque silhouette. (My own SI-10 note said
           "try drop-shadow first" without spotting this; it is why the fill had to change too.) */
    fill:var(--navy-800);
    stroke:var(--navy-900); stroke-width:.5;
    transition:fill .15s ease, opacity .15s ease;
    cursor:pointer; outline:none;
}
.in-state:hover{ fill:var(--saffron); }
.in-state:focus-visible{ stroke:#fff; stroke-width:1.4; }
.in-state.is-active{ fill:var(--saffron); stroke:#fff; stroke-width:1; }
/* With data: saffron weighted by value (--w). Set only from numbers we were handed. */
/* Weighted saffron, MIXED INTO the navy rather than laid over it at partial alpha. Two reasons:
   a translucent fill would punch a hole in the group's alpha and break the country halo exactly where
   a state's value is lowest; and rgba(226,118,43,…) is a hardcoded hex (SI-4). color-mix keeps every
   state fully opaque at any weight. The plain fill is the fallback for engines without color-mix. */
.has-data .in-state.has-val{
    fill:var(--navy-800);
    fill:color-mix(in srgb, var(--saffron) calc(var(--w, .15) * 100%), var(--navy-800));
}
.has-data .in-state.has-val:hover, .has-data .in-state.has-val.is-active{ fill:var(--saffron-lt); }

.map-tip{ position:absolute; pointer-events:none; transform:translate(12px,-50%);
    background:#fff; color:var(--ink); font-size:.78rem; font-weight:600; padding:.25rem .55rem;
    border-radius:6px; white-space:nowrap; box-shadow:var(--shadow-sm); z-index:2; }

.map-panel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius-lg); padding:1.5rem; position:sticky; top:5.5rem; min-height:260px; }
@media (max-width:991px){ .map-panel{ position:static; } }
.mp-empty{ text-align:center; color:#8fa9c4; padding:2.5rem 0; }
.mp-empty i{ font-size:2rem; color:var(--saffron-lt); display:block; margin-bottom:.6rem; }
.mp-eyebrow{ color:var(--saffron-lt); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.mp-name{ color:#fff; font-weight:600; font-size:1.35rem; text-transform:uppercase; letter-spacing:-.3px; margin:.3rem 0 1rem; }
.mp-stats{ margin:0; display:grid; grid-template-columns:1fr auto; gap:.55rem 1rem; }
.mp-stats dt{ color:#b9cde2; font-weight:400; font-size:.86rem; }
.mp-stats dd{ margin:0; color:#fff; font-weight:600; font-size:1.15rem; text-align:right; }
.mp-note{ color:#8fa9c4; font-size:.85rem; line-height:1.5; margin:0; }

/* ---- MAP in LIGHT mode (SI, S15) — Captain: "white background on the maps page, and the outline
   of the entire country and even the states can all be blue, with a Blue glowing halo on the country
   boundary" — the day-time mirror of the saffron-on-navy dark treatment above. Same drop-shadow-on-
   the-group trick traces the UNION; only the palette changes navy→white and saffron→blue. The land
   fill stays OPAQUE (pale blue) so the halo still traces a solid silhouette — a translucent fill
   would render the halo at the fill's alpha and break it (the SI-10 lesson, unchanged). */
:root:not([data-theme="dark"]) .map-band{ background:var(--bg); color:var(--ink); }
:root:not([data-theme="dark"]) .map-head .h-sec{ color:var(--ink); }
:root:not([data-theme="dark"]) .map-head .eyebrow{ color:var(--blue-d); }
:root:not([data-theme="dark"]) .map-head .lead-sec{ color:var(--muted); }
:root:not([data-theme="dark"]) .in-states{
    filter:drop-shadow(0 0 1.5px var(--blue)) drop-shadow(0 0 10px var(--blue-glow)); }
:root:not([data-theme="dark"]) .in-state{ fill:var(--blue-050); stroke:var(--blue); stroke-width:.6; }
:root:not([data-theme="dark"]) .in-state:hover{ fill:var(--blue); }
:root:not([data-theme="dark"]) .in-state:focus-visible{ stroke:var(--navy); stroke-width:1.4; }
:root:not([data-theme="dark"]) .in-state.is-active{ fill:var(--blue); stroke:var(--navy); stroke-width:1; }
:root:not([data-theme="dark"]) .has-data .in-state.has-val{
    fill:var(--blue-050);
    fill:color-mix(in srgb, var(--blue) calc(var(--w, .15) * 100%), var(--blue-050)); }
:root:not([data-theme="dark"]) .has-data .in-state.has-val:hover,
:root:not([data-theme="dark"]) .has-data .in-state.has-val.is-active{ fill:var(--blue-d); }
/* Side panel + labels → light */
:root:not([data-theme="dark"]) .map-panel{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
:root:not([data-theme="dark"]) .mp-empty{ color:var(--muted); }
:root:not([data-theme="dark"]) .mp-empty i{ color:var(--blue); }
:root:not([data-theme="dark"]) .mp-eyebrow{ color:var(--blue-d); }
:root:not([data-theme="dark"]) .mp-name{ color:var(--navy); }
:root:not([data-theme="dark"]) .mp-stats dt{ color:var(--muted); }
:root:not([data-theme="dark"]) .mp-stats dd{ color:var(--navy); }
:root:not([data-theme="dark"]) .mp-note{ color:var(--muted); }

/* ===========================================================================
   INDIAN FLAG WATERMARK (Captain S15, exploratory) — a faint tricolour ribbon felt across the whole
   site. Fixed to the viewport, very low opacity, pointer-events:none so it never touches readability
   or clicks. Anchored to the bottom so it reads as a national accent, not a full-page tint.
   Tune freely (opacity / height / position) or drop the two rules to remove.
   =========================================================================== */
body::before{ content:""; position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:1;
    background:url("../img/flag-ribbon.png") center bottom / min(1100px, 96%) auto no-repeat;
    opacity:.05; pointer-events:none; }
:root[data-theme="dark"] body::before{ opacity:.08; }

/* ===========================================================================
   LANDING NOTICE MODAL (Obs#6) — the notice every visitor sees on arrival. Centered, dismissible,
   once per session. A top accent bar + eyebrow shift by type (notice / obituary / launch / postpone).
   =========================================================================== */
.aita-notice .modal-content{ border:0; border-radius:var(--radius-lg); overflow:hidden; position:relative;
    background:var(--bg); color:var(--ink); box-shadow:var(--shadow); }
.aita-notice .modal-content::before{ content:""; display:block; height:5px; background:var(--saffron); }
.aita-notice .notice-close{ position:absolute; top:.7rem; right:.7rem; z-index:3;
    background:rgba(255,255,255,.85); border-radius:50%; padding:.55rem; opacity:1; }
.aita-notice .notice-img{ display:block; width:100%; max-height:260px; object-fit:cover; }
.aita-notice .notice-body{ padding:1.75rem; }
.aita-notice .notice-eyebrow{ display:inline-block; color:var(--saffron-d); font-weight:600; font-size:.7rem;
    letter-spacing:.16em; text-transform:uppercase; margin-bottom:.4rem; }
.aita-notice .notice-title{ font-weight:600; font-size:clamp(1.2rem,2.4vw,1.6rem); letter-spacing:-.3px;
    margin:0 0 .6rem; text-transform:uppercase; line-height:1.12; }
.aita-notice .notice-text{ color:var(--muted); }
.aita-notice .notice-text :last-child{ margin-bottom:0; }
/* per-type accents */
.aita-notice .notice-obituary::before{ background:#3a4654; }
.aita-notice .notice-obituary .notice-eyebrow{ color:#5e6e82; }
.aita-notice .notice-obituary .notice-img{ filter:grayscale(1); }
.aita-notice .notice-launch::before{ background:linear-gradient(90deg, var(--saffron), var(--navy)); }
.aita-notice .notice-postponement::before{ background:var(--saffron-d); }
:root[data-theme="dark"] .aita-notice .modal-content{ background:var(--bg-alt); }

/* IMAGE-format banner (Obs#3): the uploaded artwork IS the banner — no card chrome, no accent bar,
   just the picture and a skip button (the atf.hitcourt.com pattern). */
.aita-notice.notice-imageonly .modal-content{ background:transparent; box-shadow:none; }
.aita-notice.notice-imageonly .modal-content::before{ display:none; }
.aita-notice.notice-imageonly .notice-close{ background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.aita-notice .notice-img-full{ display:block; width:100%; height:auto; border-radius:var(--radius-lg); }