/* ---------- header ----------
   FIXED, like the React nav. It was sticky while the "PROTOTYPE" strip was above it;
   with that gone, fixed is right — a transparent bar can only sit over the dark hero
   if it overlaps it, and overlapping is what makes the landing page's nav work.

   #app clears the bar and the hero pulls back up under it, so the hero is a true full
   viewport with the nav floating on top, while every other view still starts below. */
/* backdrop-filter:none IS NOT DECORATIVE. Every page this generator stamps arrived
   with its own hand-written bar, and three of them style it as
     header{background:rgba(6,20,13,.72);backdrop-filter:saturate(180%) blur(14px)}
   The rule above overrides background, position, z-index and the border — but a
   shorthand cannot reset a property it does not mention, so backdrop-filter survived
   and kept saturating whatever sat behind a bar that is meant to be transparent. On
   /compare that read as a green wash across the top of the hero, brighter than the
   hero itself, and it was mistaken for a background three times before anyone looked
   at the computed style. The card-country pages carry an in-page patch for exactly
   this ("nav transparent + hero fixes v2"); this makes that patch unnecessary and
   stops the next static surface inheriting the bug.
   The .scrolled states below re-apply blur(12px), which is where nav.tsx wants it —
   the React bar has no blur at rest either. */
#site-header{position:fixed;inset:0 0 auto 0;z-index:60;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid transparent;transition:background .2s ease,border-color .2s ease}

#app{padding-top:64px}
/* EVERY COLOURED HERO PULLS BACK UP UNDER THE BAR, not just the hub's.
   #app's 64px top padding clears the fixed header. A hero that does not cancel it
   starts 64px down the page, and those 64px are #app's own white — so on any page with
   a coloured hero you get a white band across the top that looks exactly like a solid
   white nav bar, even though #site-header is transparent. That was the reported bug:
   the "white nav background" was never the nav.
   .thero had this from the start; .hero-planner (holiday + conference planners) and
   .hero-country (the nine country pages) did not.
   Their inner .wrap keeps its own top padding (96px and 104px), so the copy still
   clears the bar by 32-40px after the pull-up. */
.thero,.hero-planner,.hero-country{margin-top:-64px}
/* Scrolled states, mirroring nav.tsx exactly: transparent at the top, then frosted —
   kite-deep/40 over a dark section, background/60 over a light one. Both back off when
   a dropdown or the mobile menu is open, because those make the bar opaque white. */
#site-header.scrolled.on-dark:not(.shell-light):not(.menu-open){
  background:rgba(4,98,45,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.1)}
#site-header.scrolled:not(.on-dark):not(.shell-light):not(.menu-open){
  background:rgba(252,253,252,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(226,233,230,.5)}
/* White UI while a dark section is under the bar — links, logo and burger together,
   the same set nav.tsx switches via whiteUI. */
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-links a{color:rgba(255,255,255,.8)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-links a:hover{color:#fff}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-burger{color:#fff}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav .nav-geo{color:rgba(255,255,255,.8)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav .nav-geo:hover{color:#fff;background:rgba(255,255,255,.1)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .brand-w{display:block}
#site-header.on-dark:not(.shell-light):not(.menu-open) .brand-d{display:none}
#site-header .nav{position:static;display:flex;align-items:center;gap:30px;height:64px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
/* No underlines anywhere in the shell. The React nav carries no "no-underline" class
   at all — it relies on Tailwind's Preflight, which sets a{text-decoration:inherit}
   globally. A static page has no Preflight, so the browser default underline shows
   through on any link the shell does not override — which is what happened to the
   dropdown lists. One rule at the top of the scope rather than per-element. */
#site-header a{text-decoration:none}
#site-header .brand{display:flex;align-items:center;text-decoration:none}
#site-header .brand img{height:26px;width:auto}
/* This bar is ALWAYS a light surface, unlike the country pages' — which sit over a
   dark hero and start out transparent with the white mark showing. So the ink mark is
   the one that shows here; leaving the default would put a white logo on white. */
#site-header .brand-w{display:none}
#site-header .brand-d{display:block}
/* 18px, at every width. It was 26px, and a 20px-until-1280-then-26px version in between
   which was worse than either: THE WRAP CAPS AT 1200px, so past that the row keeps
   growing while the space it sits in does not. Widening the gap on wide screens is
   therefore the one thing that cannot help.
   Six labels and their carets are 425px of text, so the row is 515px here. */
#site-header .nav-links{display:none;gap:18px}
#site-header .nav-links a{color:#63746b;font-size:14px;font-weight:450;text-decoration:none;transition:color .15s}
#site-header .nav-links a:hover{color:#0b140f}
#site-header .nav-cta{margin-left:auto}
/* Country control. Scoped through .nav — (1,2,0) — because STYLE is injected after this
   stylesheet and its own `#site-header .nav-geo` colour, written for the card country
   pages' permanently dark bar, would otherwise win the tie and leave white on white.
   .shell-light there is (1,2,0) too and DOES win, which is correct: an open panel makes
   this bar white as well. */
#site-header .nav .nav-geo{color:#63746b;background:none}
#site-header .nav .nav-geo:hover{color:#0b140f;background:rgba(11,20,15,.05)}
#site-header .btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;line-height:1;text-decoration:none;background:#0bbc69;color:#fff;transition:background .15s}
#site-header .btn:hover{background:#039855}
/* The dropdown triggers are inline-FLEX, which is what puts the caret on the text's
   optical centre instead of its baseline. An inline <svg> with width and height but no
   display sits on the baseline, so the chevron rendered low against the label — the
   nine card country pages never showed it because their own stylesheet adds
   vertical-align:-1px to it, and nothing else did.
   Same construction as the React nav: flex, items-center, a 4px gap. The gap replaces
   the caret's own margin-left so the two cannot both apply. */
#site-header .nav-links a.mega-t{display:inline-flex;align-items:center;gap:4px}
#site-header .caret{width:13px;height:13px;margin-left:0;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
#site-header .mega-t[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* burger */
#site-header .nav-burger{display:flex;align-items:center;justify-content:center;margin-left:auto;width:42px;height:42px;padding:0;border:0;background:none;color:#0b140f;cursor:pointer}
#site-header .nav-burger svg{width:26px;height:26px}
#site-header .nav-burger .ic-x{display:none}
#site-header.menu-open .nav-burger .ic-bars{display:none}
#site-header.menu-open .nav-burger .ic-x{display:block}
/* mobile menu */
#site-header .mobile-menu{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;padding:8px 24px 40px;background:#fff;border-bottom:1px solid #e2e9e6;max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
#site-header.menu-open{background:#fff;border-bottom-color:#e2e9e6}
#site-header.menu-open .mobile-menu{display:flex}
#site-header .mobile-menu a{color:#0b140f;font-size:16px;font-weight:500;padding:14px 0;border-bottom:1px solid #eef3f0;text-decoration:none}
#site-header .mobile-menu .mm-label{margin:0;padding:14px 0 6px;border-bottom:1px solid #eef3f0;color:#63746b;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
#site-header .mobile-menu a.mm-sub{padding-left:14px;font-size:15px;color:#3f5047}
#site-header .mobile-menu .mm-cat{margin:0;padding:12px 0 4px 14px;border-bottom:1px solid #eef3f0;color:#91a199;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
#site-header .mobile-menu a.mm-deep{padding-left:28px}
#site-header .mobile-menu .mm-sub.mm-off{display:block;padding:14px 0 14px 28px;border-bottom:1px solid #eef3f0;color:#91a199;font-size:15px}
#site-header .mobile-menu .btn{margin-top:14px;border-bottom:0;color:#fff}

/* ==================== MOBILE NAV, MATCHED TO components/layout/nav.tsx ====================
   Measured off the React nav rather than approximated. Everything here is scoped to
   #site-header and lives in BASE_CSS, which only the travel planner receives — the ten
   country pages style their own shell and are NOT touched by these rules.

   The React nav, for the record:
     bar            container, flex, h-16 (64px), items-center, justify-between
     logo           h-7 (28px)
     burger         h-10 w-10 (40px), rounded-lg, hover bg-foreground/5, md:hidden
     bar CTA        hidden md:block  ->  NO CTA in the mobile bar at all
     menu           fixed inset-0 h-[100svh] bg-background, pt-20 pb-8, overflow-y-auto
     row            border-b border-border/60, py-3.5, text-base, font-medium, fg/80
     group label    IDENTICAL to a row — not an eyebrow
     sub-row        border-b border-border/40, py-2.5, pl-6, text-sm, fg/70
     category       text-[11px], font-semibold, uppercase, tracking-wide, fg/40
     menu CTA       full width, Button default = h-11 (44px), rounded-full            */

/* 1. No CTA in the mobile bar. It was showing a 36px "Get the Kite app" pill beside the
   burger, which the landing page does not have and which crowds a 375px bar. The
   country pages already hid it below 900px; the planner never did. */
@media(max-width:900px){ #site-header .nav-cta{display:none} }

/* 2. Burger and logo to the React sizes, with the hover state it has and this did not. */
#site-header .brand img{height:28px}
#site-header .nav-burger{width:40px;height:40px;border-radius:8px;transition:background .15s}
#site-header .nav-burger:hover{background:rgba(11,20,15,.05)}
#site-header.on-dark:not(.shell-light):not(.menu-open) .nav-burger:hover{background:rgba(255,255,255,.1)}

/* 3. THE MENU IS A DROPDOWN UNDER THE BAR. Reverted, and here is why.
   It was briefly a full-screen overlay — position:fixed, inset:0, z-index:1, 100svh — to
   match the React nav. That broke the close button, and the reason is worth keeping:

   .mobile-menu is a CHILD of .wrap.nav, alongside the logo and the burger. Giving the
   PARENT z-index:2 does nothing to lift its other children; within .wrap.nav's stacking
   context a positioned child at z-index:1 paints above its non-positioned siblings. So
   the white overlay covered the logo and the burger. The X was there, display:block,
   painted underneath a full-screen white panel. "The close icon is missing."

   Making it a full-screen overlay correctly would mean moving .mobile-menu OUT of
   .wrap.nav in buildHeader so it is a SIBLING of the bar row — which is exactly how the
   React nav does it (menu z-30, header z-40, siblings). That is a markup change across
   every generated page for a layout the nine card-country pages do not use.

   So: the same dropdown those pages use, which is also what the earlier rule in this
   stylesheet already did. top:64px clears the bar, max-height keeps it on screen, and the
   bar is never covered because the menu starts below it. Nothing here to override. */

/* 4. Row metrics. The group label was a 12px uppercase eyebrow; in React it is just
   another row, same size and weight as the links around it. */
#site-header .mobile-menu a{padding:14px 0;font-size:16px;font-weight:500;color:rgba(11,20,15,.8);
  border-bottom:1px solid rgba(226,233,230,.6)}
#site-header .mobile-menu a:hover{color:#0b140f}
#site-header .mobile-menu .mm-label{margin:0;padding:14px 0;border-bottom:1px solid rgba(226,233,230,.6);
  color:rgba(11,20,15,.8);font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none}
/* a.mm-sub, not just .mm-sub: an earlier rule is #site-header .mobile-menu a.mm-sub,
   which is (1,2,1) and outranks a class-only selector at (1,2,0). Matching its shape and
   winning on order is the fix; bumping !important would have hidden the reason. */
#site-header .mobile-menu a.mm-sub,
#site-header .mobile-menu .mm-sub{padding:10px 0 10px 24px;font-size:14px;color:rgba(11,20,15,.7);
  border-bottom:1px solid rgba(226,233,230,.4)}
#site-header .mobile-menu a.mm-deep{padding-left:24px}
#site-header .mobile-menu span.mm-sub.mm-off,
#site-header .mobile-menu .mm-sub.mm-off{padding:10px 0 10px 24px;font-size:14px;
  color:rgba(11,20,15,.4);border-bottom:1px solid rgba(226,233,230,.4)}
#site-header .mobile-menu .mm-cat{padding:12px 0 4px 16px;border-bottom:0;
  color:rgba(11,20,15,.4);font-size:11px;font-weight:600;letter-spacing:.02em}

/* 5. The coming-soon badge was WHITE ON WHITE here.
   The shared rule in STYLE is written for the country pages' dark menu
   (background rgba(255,255,255,.12), text rgba(255,255,255,.72)) and is unscoped, so it
   applied to this white one too. It only became visible now that Resources introduced a
   coming-soon item — Glossary — into the mobile menu. */
#site-header .mobile-menu .mega-soon{background:#e7f6ee;box-shadow:inset 0 0 0 1px #c6e8d6;
  color:#0a6b3a}

/* 6. Menu CTA: full width, sized by PADDING rather than a fixed height.
   Copied from the card-country pages, where this reads correctly: they set no height at
   all and let padding:13px 24px define it, which lands at about 45px. This previously set
   height:44px against #site-header .btn's height:36px and rendered thin, so the explicit
   height is gone rather than fought — height:auto is stated so the earlier 36px cannot
   apply. */
#site-header .mobile-menu .btn{display:flex;width:100%;height:auto;margin-top:14px;
  padding:13px 24px;font-size:15.5px;line-height:1.2;justify-content:center;
  border-bottom:0;color:#fff}

@media(min-width:901px){
/* IN FLOW, NOT ABSOLUTELY CENTRED — and this is the fix for "Help is touching
   Countries", after two attempts at it that were not.
   The row used to be position:absolute;left:50%, centred in the bar. Two consequences,
   both bad. It was out of flow, so when it ran out of room it slid UNDER the globe and
   the CTA instead of pushing them. And being centred, its half-width had to clear the
   WIDER of the two sides on both sides: a 118px logo against 303px of globe plus "Get
   the Kite app", so 185px of the bar was unusable by construction and six items never
   fitted.
   As a normal flex child it sits after the brand, exactly like the React nav's
   [data-nav-row], and .nav-geo's margin-left:auto still pushes the cluster right. It
   also makes the two navs match, which is what Jyothish was actually looking at: the
   landing page had the items beside the logo and the planner had them centred. */
#site-header .nav-links{display:flex;position:static;left:auto;top:auto;transform:none}
/* SPACED LIKE THE REACT NAV, which is the thing that was actually being compared.
   components/layout/nav.tsx puts three children in a justify-between flex row: brand,
   the data-nav-row element, and one wrapper holding the globe and the CTA. That splits
   the leftover space into two EQUAL gaps, so the row sits a third of the way in — closer
   to the logo than to the middle, because the right-hand cluster is wider than the logo.
   This bar has four children and no wrapper, and it put margin-left:auto on .nav-geo,
   which dumps ALL the slack on one side and jams the row up against the brand.
   Auto margins on both sides of the row reproduce justify-between exactly: the slack is
   halved either side of it. .nav-geo therefore must NOT keep its own auto margin, or the
   two autos split the free space between them and the row drifts back. */
#site-header .nav-links{margin-left:auto;margin-right:auto}
#site-header .nav-geo{margin-left:0}
#site-header .nav-burger{display:none}
}
/* THE BURGER HOLDS UNTIL 1040px, and this is the actual fix for "Help is touching
   Countries" rather than the gap tinkering above.
   .nav-links is ABSOLUTELY CENTRED in the bar (left:50%), which means it is out of flow:
   when it runs out of room it does not push the globe and the CTA aside, it slides under
   them. And because it is centred, its half-width has to clear the WIDER of the two
   sides on both sides — the logo is about 118px, the globe plus "Get the Kite app" plus
   the flex gap is about 303px, so 185px of the bar is unusable by construction.
   With six nav items there is not enough left below roughly 1040px at any gap. Measured
   against the real Inter metrics: at 18px the row is 515px and the tightest clearance
   above 1040px is 16px, at 1280px and beyond where the label shows and the wrap has
   stopped growing.
   A later rule with equal specificity, so it overrides the block above for this band
   only. The alternative was un-centring the row, which changes the look of every static
   page; this reuses the burger, which is already the answer at 900px. */
@media(min-width:901px) and (max-width:1039px){
#site-header .nav-links{display:none}
#site-header .nav-burger{display:flex}
#site-header .nav-geo{display:none}
#site-header .nav-cta{display:none}
}
/* ---------- footer ---------- */
.site-footer{background:#f2f7f5;border-top:1px solid #e2e9e6;color:#3f5047;padding:64px 0 0;margin-top:64px}
.site-footer a{text-decoration:none}
.site-footer .foot-top{display:flex;flex-direction:column;gap:48px}
.site-footer .foot-logo{height:32px;width:auto}
.site-footer .foot-tagline{margin:24px 0 0;font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1.02;letter-spacing:-.03em;color:#0b140f}
.site-footer .foot-tagline span{display:block}
.site-footer .foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 40px}
/* font-family IS REQUIRED HERE. The travel planner sets h1,h2,h3,h4 to Bricolage
   globally, and this rule named every other property but not the family, so the
   footer's column titles inherited a display face while the links under them stayed
   Inter. The nine card country pages never showed it because their own stylesheet
   sets .foot-col h4{font-family:InterV}. Naming it here fixes the one surface that
   was wrong without touching the ones that were right. */
.site-footer .foot-col h4{margin:0 0 14px;font-family:'Inter',system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#63746b}
.site-footer .foot-col a{display:block;margin-bottom:11px;color:#3f5047;font-size:15px}
.site-footer .foot-col a:hover{color:#027a48}
.site-footer .foot-col .foot-sub{color:#0b140f;font-weight:600;margin-top:8px}
.site-footer .foot-col p.foot-sub{margin:8px 0 11px;font-size:15px}
.site-footer .foot-sublist{display:flex;flex-direction:column}
.site-footer .foot-sublist a{padding-left:12px}
.site-footer .foot-sublist a::before{content:"\2022";margin-right:8px;color:#91a199}
.site-footer .foot-seclist{display:flex;flex-direction:column}
.site-footer .foot-seclist a{padding-left:12px}
.site-footer .foot-bot{display:flex;flex-direction:column;gap:20px;border-top:1px solid #e2e9e6;margin-top:56px;padding-top:28px}
.site-footer .foot-copy{flex-shrink:0;max-width:200px;margin:0;font-size:12px;color:#63746b}
.site-footer .foot-legal{display:flex;flex-direction:column;gap:12px;flex:1}
.site-footer .foot-legal p{margin:0;font-size:12px;line-height:1.6;color:#63746b}
.site-footer .foot-wordmark{display:block;width:100%;height:auto;margin-top:40px;opacity:.95;user-select:none}
@media(min-width:640px){.site-footer .foot-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(min-width:1024px){
.site-footer .foot-top{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:64px}
.site-footer .foot-cols{grid-template-columns:repeat(5,1fr);flex:1;min-width:0}
.site-footer .foot-bot{flex-direction:row;gap:44px}
}