/* ============================================================
   SITE HEADER, Two-tier: utility bar + primary nav
   ============================================================ */

/* ── UTILITY BAR ── */
#utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: #0A0A0F;
  border-bottom: 1px solid rgba(201,169,110,0.2);
  font-family: 'DM Sans', sans-serif;
  transition: transform 0.3s ease;
  /* PWA standalone: keep the bar below the status bar / notch */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* Deterministic height: locks the bar so the nav offset below (which equals
     this height) can never sit under the bar, regardless of font size / zoom.
     This is the root-cause fix for the logo being crowded/covered by the bar. */
  height: calc(44px + env(safe-area-inset-top));
  box-sizing: border-box;
}
#utility-bar.ub-dismissed .ub-ann { display: none; }
#utility-bar.ub-dismissed { display: none; }

.ub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  gap: 16px;
}
.ub-left { flex: 1; min-width: 0; overflow: hidden; }
.ub-ann {
  /* display:block is REQUIRED for text-overflow:ellipsis to engage. As a plain
     inline span the announcement never truncated on desktop, so at intermediate
     widths it overflowed into the Sign In / Become a Member actions ("cut off
     halfway"). Block + the constrained flex parent now ellipsis-truncate it
     cleanly while the actions + dismiss stay fully visible. */
  display: block;
  font-size: 12px;
  color: var(--gold, #C9A96E);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ub-ann a {
  color: #E2C99A;
  text-decoration: underline;
  margin-left: 4px;
}
.ub-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* Sign In + Become a Member moved OUT of the utility bar into #nav .nav-actions
   (see "ALWAYS-ON CONVERSION CLUSTER" below). The utility bar's right side now
   holds only the search toggle. */
.ub-dismiss {
  background: none;
  border: none;
  color: var(--muted, #7A7088);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  transition: color 0.3s;
}
.ub-dismiss:hover { color: var(--cream, #FAF7F1); }

/* ── PRIMARY NAV ── */
#nav {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top)); /* utility-bar height (44px) + 8px GUARANTEED clearance - nav/logo never touches the bar even with sub-pixel rounding / font rendering */
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  background: transparent;
}
#nav.s {
  background: rgba(7,5,10,0.97);
  border-bottom: 1px solid var(--brdp, rgba(61,26,92,0.35));
  padding: 12px 40px;
  /* bg is 97% opaque, so a lighter blur reads identically while cutting per-frame GPU
     re-sampling on scroll. No paint containment here: the nav hosts .ddm dropdowns that
     render below its box, which contain:paint would clip. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* When utility bar is dismissed, nav moves up */
#utility-bar.ub-dismissed ~ #nav,
#utility-bar.ub-dismissed + #nav { top: env(safe-area-inset-top); }

/* ── SEARCH ── */
.site-search { position: relative; }
.ss-toggle {
  background: none;
  border: 1px solid var(--brdp, rgba(61,26,92,0.35));
  color: var(--body, #BFB5CE);
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-radius: 4px;
}
.ss-toggle:hover { border-color: var(--am-l, #7B4FA6); color: var(--am-ll, #B08FCC); }

.ss-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: var(--d2, #0F0C15);
  border: 1px solid var(--brdp, rgba(61,26,92,0.35));
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  z-index: 1010;
}
.ss-input {
  width: 100%;
  background: var(--d3, #16121F);
  border: none;
  border-bottom: 1px solid var(--brdp, rgba(61,26,92,0.35));
  color: var(--cream, #FAF7F1);
  padding: 14px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
}
.ss-input::placeholder { color: var(--muted, #7A7088); }
.ss-input:focus { border-bottom-color: var(--am-l, #7B4FA6); }

.ss-results { max-height: 360px; overflow-y: auto; }
.ss-result {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--brdp, rgba(61,26,92,0.15));
  transition: background 0.2s;
}
.ss-result:hover, .ss-result.ss-selected {
  background: var(--am-s, rgba(61,26,92,0.18));
}
.ss-result-title {
  font-size: 13px;
  color: var(--cream, #FAF7F1);
  margin-bottom: 4px;
}
.ss-result-desc {
  font-size: 11px;
  color: var(--muted, #7A7088);
  line-height: 1.4;
}
.ss-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #7A7088);
}

/* Mobile search results */
.ss-results-mob {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}
.ss-results-mob .ss-result {
  padding: 10px 12px;
  background: var(--d3, #16121F);
}
.ss-results-mob .ss-result-title { font-size: 14px; }

/* ── RESPONSIVE — SINGLE AUTHORITATIVE SOURCE for the header's responsive layout ──
   This file is the ONLY place the header's responsive layout lives.
   THE CONVERSION CLUSTER (#nav .nav-actions = Sign In + Become a Member + theme
   toggle + hamburger) is pinned TOP-RIGHT at EVERY width 320-1920 and NEVER
   collapses into the hamburger. Only .nl (the nav links) and the search collapse
   into the drawer. At every width the header is one of two clean states:
     • DESKTOP (>=1024) : logo | nav links | [Sign In · Become a Member · toggle], or
     • COLLAPSED (<1024): logo | [Sign In · Become a Member · toggle · hamburger]
   It can never be a broken in-between.
   Invariants at ALL widths:
     • .logo and .nav-actions never shrink (flex-shrink:0) → the logo is never
       squeezed and the conversion actions are never crammed off-screen.
     • Only .ub-left (announcement) and .nl (link row) yield space: the announcement
       ellipsis-truncates and the links collapse into the drawer, so the cluster can
       never be pushed over the logo or off the row.
     • #nav always sits a guaranteed 8px BELOW the utility bar.
   !important is kept ONLY where a rule must beat a per-page inline <head> copy. */

/* Shared invariants (all widths) */
#nav { flex-wrap: nowrap; max-width: 100vw; }
.logo { flex-shrink: 0; }
.theme-toggle { flex-shrink: 0; }
.ub-right { flex-shrink: 0; }
.ub-left { flex: 1 1 auto; min-width: 0; }

/* ── ALWAYS-ON CONVERSION CLUSTER ────────────────────────────────────────────
   The right-hand cluster inside #nav. flex-shrink:0 so it is never crammed; the
   nav's justify-content:space-between pins it hard-right (logo hard-left). On
   desktop the centered, flexible .nl sits between them; below 1024 .nl is
   display:none so the only two flex children are logo + .nav-actions. ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  flex-shrink: 0;
  flex-wrap: nowrap;
}
/* The toggle lives INSIDE the cluster now, so cancel the standalone
   margin-left:auto that design-tokens.css applies at <=1023 (that rule assumed
   the toggle was a direct nav child that had to push ITSELF right; here the whole
   cluster is already right-pinned). Higher specificity + !important beats it. */
#nav .nav-actions .theme-toggle { margin-left: 0 !important; margin-right: 0 !important; }

.hdr-signin {
  color: var(--body, #BFB5CE);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s;
  flex-shrink: 0;
}
.hdr-signin:hover { color: var(--am-ll, #B08FCC); }
[data-theme="light"] .hdr-signin { color: var(--body, #4A3D5C); }

.hdr-cta {
  background: var(--gold, #C9A96E);
  color: var(--dark, #07050A);
  padding: 8px 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 2px;
  transition: background 0.3s, transform 0.3s;
  flex-shrink: 0;
}
.hdr-cta:hover { background: var(--gold-l, #E2C99A); transform: translateY(-1px); }
.hdr-cta .cta-short { display: none; }   /* "Join" hidden until the narrow widths */

/* ── TABLET + PHONE shared (<=1023): hamburger nav, drawer holds nav links + search.
   The conversion cluster (.nav-actions) stays pinned top-right via space-between.
   (Listed FIRST among the max-width blocks so the narrower phone tiers below win.) ── */
@media (max-width: 1023px) {
  #nav { padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right)); }
  #nav.s { padding: 10px 16px; }
  #utility-bar.ub-dismissed ~ #nav { top: env(safe-area-inset-top); }
  .nl { display: none !important; }
  .hbg { display: flex !important; }
}

/* ── TABLET + SMALL LAPTOP (768-1023): bar shows announcement + search; the
   conversion cluster stays in #nav (top-right) with the hamburger for nav links. ── */
@media (min-width: 768px) and (max-width: 1023px) {
  #utility-bar { height: calc(44px + env(safe-area-inset-top)); }
  .ub-inner { padding: 0 20px; }
  #nav { top: calc(52px + env(safe-area-inset-top)); } /* 44px bar + 8px clearance */
}

/* ── PHONE (<=767): compact bar; the cluster STAYS top-right (never in the drawer).
   Shrink the logo (ratio preserved, NOT squeezed) + tighten the cluster so
   Sign In + Become a Member + toggle + hamburger all fit beside the logo. ── */
@media (max-width: 767px) {
  #utility-bar { height: calc(38px + env(safe-area-inset-top)); }
  .ub-inner { padding: 0 16px; }
  .ub-right { display: none; }   /* search folds into the drawer here */
  /* Reserve room so the announcement ellipsis-truncates BEFORE the dismiss ✕. */
  .ub-left { padding-right: 30px; }
  .ub-dismiss { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
  #nav { top: calc(46px + env(safe-area-inset-top)); } /* 38px bar + 8px clearance */
  #nav .logo img { height: 44px !important; }   /* id-scoped: beats any inline copy */
  .nav-actions { gap: 8px; }
  .hdr-signin { font-size: 10px; letter-spacing: 0.05em; }
  .hdr-cta { padding: 7px 13px; letter-spacing: 0.08em; }
  #nav .theme-toggle { padding: 2px; gap: 1px; }
  .hbg { padding: 6px; }
}

/* ── NARROW PHONE (<=560): shorten "Become a Member" -> "Join" ── */
@media (max-width: 560px) {
  .hdr-cta .cta-long { display: none; }
  .hdr-cta .cta-short { display: inline; }
}

/* ── TIGHT PHONE (<=400): squeeze so 320px fits with no overlap / no horizontal
   scroll. Logo a touch smaller, toggle + gaps + nav padding minimal. ── */
@media (max-width: 400px) {
  /* !important is REQUIRED here: mobile-fixes.css `nav{padding:16px 20px!important}`
     (<=768) otherwise wins by importance over a plain #nav rule, keeping 20px side
     padding that leaves too little room at 320 — logo + cluster then pack with a 0px
     gap. id + !important reclaims the space so a clean gap opens between them. */
  #nav { padding: 12px max(10px, env(safe-area-inset-left)) 12px max(10px, env(safe-area-inset-right)) !important; }
  #nav.s { padding: 10px 10px !important; }
  #nav .logo img { height: 36px !important; }
  .nav-actions { gap: 4px; }                     /* tighter so a clean gap opens up between logo + cluster at 320 */
  .hdr-signin { font-size: 9px; letter-spacing: 0.03em; }
  .hdr-cta { padding: 7px 9px; font-size: 9px; letter-spacing: 0.06em; }
  #nav .theme-toggle { gap: 0; }
  .hbg { padding: 4px; }
  .hbg span { width: 20px; }
}

/* ── DESKTOP (>=1024): nav links inline, hamburger hidden, full single-row layout.
   #nav distributes logo | links | cluster; only .nl grows/shrinks. The conversion
   cluster now permanently occupies the right of this row, so the logo is right-
   sized from 88px -> 72px (still larger than the 54px mobile / equal to the 72px
   tablet logo — a smooth non-decreasing progression, NOT a squeeze) to give the
   inline links room beside the cluster. id-scoped so it beats any per-page inline
   `nav .logo img` height copy. ── */
@media (min-width: 1024px) {
  #nav { padding: 18px clamp(20px, 3vw, 60px); gap: clamp(8px, 1.2vw, 24px); }
  #nav.s { padding: 12px clamp(20px, 3vw, 60px); }
  #nav .logo img { height: 72px !important; }
  .hbg { display: none; }
  .nl { display: flex !important; flex: 1 1 auto; min-width: 0; justify-content: center; overflow: visible; gap: clamp(12px, 1vw, 24px); }
  .nl a { font-size: clamp(10px, 0.75vw, 12px); letter-spacing: 0.05em; white-space: nowrap; }
  .theme-toggle { display: flex; transform: none; }
}

/* ── CONDENSED LAPTOP (1024-1399): the full 9-link nav does not fit, so show only
   the PRIMARY links inline (Packages, Services, Communities, Founding 500, Contact)
   and move the SECONDARY links (Success Stories, About, Why Evara, Journal) into
   the hamburger drawer. The conversion cluster (Sign In · Become a Member · toggle
   · hamburger) stays pinned top-right. Links + cluster are tightened (id-scoped to
   beat any inline copy) so the 5 primary links fit beside the cluster at 1024. ── */
@media (min-width: 1024px) and (max-width: 1399px) {
  .ub-inner { padding: 0 20px; }
  .ub-ann { font-size: 11px; }
  #nav .nl .nl-2 { display: none !important; }   /* secondary links -> drawer */
  .hbg { display: flex !important; }             /* drawer reachable for them */
  #nav .nl { gap: clamp(8px, 0.9vw, 16px); }
  #nav .nl a { font-size: clamp(10px, 0.8vw, 11px); letter-spacing: 0.04em; }
  .nav-actions { gap: 9px; }
  .hdr-cta { padding: 8px 13px; letter-spacing: 0.1em; }
}

/* ── WIDE DESKTOP (>=1400): every link fits inline; hamburger hidden (base rule).
   The secondary links reappear automatically because nothing hides them here.
   Gaps tightened from the old 1.5vw so all 9 links + the cluster fit at 1400. ── */
@media (min-width: 1400px) {
  #nav .nl { gap: clamp(10px, 0.9vw, 20px); }
  #nav .nl a { font-size: clamp(10px, 0.7vw, 12px); letter-spacing: 0.04em; }
}

/* Hero offset for two-tier header */
body { padding-top: 0; }
.hero, .ph, .p-hero, [class*="page-hero"] {
  padding-top: calc(156px + env(safe-area-inset-top)) !important; /* utility bar (44) + nav + breathing + safe area; +8 tracks the nav offset moving 44->52 (8px clearance band) so hero content is never clipped */
}

/* HOMEPAGE HERO GAP: the shared clearance above already offsets the fixed header,
   so the hero column needs only light breathing room on top. Previously .hero-l's
   own ~160px top padding stacked ON the 156px clearance, leaving a large empty
   band between the navbar and the hero. .hero-l exists only on the homepage, so
   this is page-scoped. Loaded last -> wins over the mobile-fixes !important copy. */
#main .hero-l { padding-top: 52px !important; }
@media (max-width: 767px) { #main .hero-l { padding-top: 16px !important; } }

/* Light theme adjustments */
[data-theme="light"] #utility-bar {
  background: #F0ECE4;
  border-bottom-color: rgba(61,26,92,0.12);
}
[data-theme="light"] .ub-ann { color: var(--gold-d, #705930); }
[data-theme="light"] .ub-ann a { color: var(--gold-d, #705930); }
/* Gold CTA: near-white label needs the deep gold in light theme for AA (4.5+) */
[data-theme="light"] .hdr-cta { background: var(--gold-d, #705930); color: #fff; }
[data-theme="light"] .hdr-cta:hover { background: #8A6D3B; }
[data-theme="light"] #nav.s {
  background: rgba(253,252,248,0.97);
}
[data-theme="light"] .ss-toggle {
  border-color: rgba(61,26,92,0.15);
  color: var(--body, #4A3D5C);
}
[data-theme="light"] .ss-panel {
  background: var(--d2, #FAF7F1);
  border-color: rgba(61,26,92,0.15);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
[data-theme="light"] .ss-input {
  background: #fff;
  color: var(--cream, #1A0D2E);
}
[data-theme="light"] .ss-result:hover,
[data-theme="light"] .ss-result.ss-selected {
  background: rgba(93,45,138,0.06);
}


/* Admin/sold-out hide of the Founding 500 utility bar */
html.hide-founding-bar #utility-bar { display: none !important; }
html.hide-founding-bar #nav { top: env(safe-area-inset-top) !important; }

/* ============================================================
   HEADER COMPONENT APPEARANCE — logo, nav links, dropdowns,
   hamburger, mobile drawer.
   ------------------------------------------------------------
   ROOT-CAUSE FIX: these component styles previously existed ONLY
   as inline <head> CSS on each page. site-header.js injects the
   nav + dropdowns + mobile drawer on EVERY page, but 6 "orphan"
   landing pages (press, 500, partners, imperial-family, waitlist,
   nri-welcome) never received the inline copy. On those pages the
   injected dropdown (.ddm) and mobile drawer (.mm) had no
   display:none rule, so they DUMPED in-flow over the logo as raw
   blue links. Moving the styles into this shared stylesheet makes
   the header fully self-sufficient on every page — a new page can
   never again ship a broken/different header.
   site-header.css owns .nl / .hbg DISPLAY via the breakpoints
   above; the rules below set APPEARANCE only and use the same
   EFFECTIVE values as the canonical inline block, so the pages
   that already carry the inline copy render identically (no
   regression) while the orphan pages are repaired.
   ============================================================ */
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; cursor: pointer; }

/* LOGO ANTI-SQUEEZE — keep the true art ratio (305:140) at all times. This lives
   in mobile-fixes.css too (with !important, which wins where both load); but
   thank-you.html does not load mobile-fixes.css, so without this safeguard its
   logo squeezed. Putting it here means any page that loads the shared header gets
   correct logo proportions even without mobile-fixes.css. */
.logo img { width: auto; max-width: none; aspect-ratio: 305 / 140; object-fit: contain; }

/* LOGO HEIGHT at tablet/desktop. mobile-fixes.css only sets the <=768 height
   (54px); the 72px/88px tablet+desktop heights were INLINE-ONLY, so the 34 pages
   that lack the inline copy (blogs, nri/*, community-*-delhi, the orphan landing
   pages) rendered the logo at its FULL 500x229 natural SVG size above 768px — a
   giant logo overlapping the nav links and page content. Constraining it here
   makes every page size the logo correctly. (Pages that carry the inline
   height:!important copy already win at the same values, so no regression.) */
@media (min-width: 769px) { .logo img { height: 72px; } }
@media (min-width: 1024px) { .logo img { height: 88px; } }

/* Primary nav links (display owned by the breakpoints above) */
.nl { list-style: none; gap: 32px; }
.nl a { color: var(--body, #BFB5CE); text-decoration: none; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s; position: relative; padding-bottom: 4px; cursor: pointer; }
.nl a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--am-ll, #B08FCC); transition: width 0.4s cubic-bezier(0.16,1,0.3,1); }
.nl a:hover { color: var(--am-ll, #B08FCC); }
.nl a:hover::after { width: 100%; }

/* Dropdown menus (Services / Communities) */
.dd { position: relative; }
.ddm { display: none; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); background: var(--d3, #16121F); border: 1px solid var(--brdp, rgba(61,26,92,0.35)); min-width: 220px; padding: 8px 0; box-shadow: 0 24px 80px rgba(0,0,0,0.8); z-index: 1010; }
.dd:hover .ddm,
.dd:focus-within .ddm { display: block; }
.dd.dd-collapsed .ddm { display: none; }
.ddm a { display: block; padding: 11px 22px; font-size: 11px; color: var(--body, #BFB5CE); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.25s; border-left: 2px solid transparent; }
.ddm a:hover { color: var(--am-ll, #B08FCC); background: var(--am-s, rgba(61,26,92,0.18)); border-left-color: var(--am-l, #7B4FA6); padding-left: 26px; }
/* Keyboard focus visibility (a11y): clear ring on dropdown trigger + items, both themes */
.dd > a:focus-visible,
.ddm a:focus-visible { outline: 2px solid var(--am-l, #7B4FA6); outline-offset: 2px; border-radius: 2px; }

/* Hamburger button (display owned by the breakpoints above) */
.hbg { flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; -webkit-appearance: none; appearance: none; background: none; border: none; }
.hbg span { display: block; width: 22px; height: 1.5px; background: var(--am-ll, #B08FCC); transition: all 0.3s; }

/* Mobile drawer — hidden until .o; width-independent.
   SCROLL FIX: justify-content:flex-start (NOT center) + vertical padding +
   box-sizing:border-box. A centered overflowing flex column clips its content
   symmetrically at BOTH ends and cannot be scrolled to its top/bottom items, so
   on short viewports Sign In + Become a Member (the last items) sat below an
   unreachable fold. flex-start pins content to the top so the drawer scrolls
   cleanly to the very last item; the 80px top padding clears the close ✕, the
   48px bottom padding keeps the CTA off the edge; border-box stops the padding
   from pushing the fixed/inset:0 box wider than the viewport. */
.mm { display: none; position: fixed; inset: 0; box-sizing: border-box; background: linear-gradient(135deg, var(--dark, #07050A), var(--d3, #16121F)); z-index: 100000; flex-direction: column; align-items: center; justify-content: flex-start; gap: 28px; padding: 80px 20px 48px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mm.o { display: flex; }
.mm a { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--cream, #FAF7F1); text-decoration: none; font-weight: 300; transition: color 0.3s; padding: 12px 0; min-height: 48px; display: flex; align-items: center; }
.mm a:hover { color: var(--am-ll, #B08FCC); }
.mmx { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--am-ll, #B08FCC); font-size: 24px; cursor: pointer; z-index: 2; }
[data-theme="light"] .mm { background: linear-gradient(135deg, #FDFCF8, #F0ECE4); }
[data-theme="light"] .mm a { color: #2A1B3D; }

/* ============================================================
   iOS SAFARI HARDENING — conversion cluster + theme toggle circle
   ------------------------------------------------------------
   BUG 1A (iPhone): .nav-actions mixes <a> (Sign In, Join), a <div> pill
   (theme toggle) and a <button> (hamburger). On real iOS Safari these sit on
   different vertical centers — an <a> aligns to a TEXT BASELINE, a <button>
   gets a native -webkit-appearance box with its own metrics, and an inline
   <svg> carries a baseline gap — so the row looked misaligned with uneven
   gaps (correct on macOS, where the defaults differ). Sign In also rendered as
   a bare 12px text line beside ~30px controls. Fix: blockify EVERY item to one
   inline-flex box, line-height:1, one normalized height, appearance reset, so
   all items share an identical vertical center on every engine.

   BUG 1B (iPhone): the round .theme-btn is a <button>. Without
   -webkit-appearance:none iOS gives it a native button box and the
   border-radius:50% background stretches into an OVAL (a perfect circle on
   macOS). Reset appearance + lock equal axes so no circle can ever oval.
   This file loads LAST (after design-tokens + mobile-fixes), so these rules
   are authoritative over the per-page inline copies.
   ============================================================ */
#nav .nav-actions { display: flex; align-items: center; flex-wrap: nowrap; }
#nav .nav-actions > .hdr-signin,
#nav .nav-actions > .hdr-cta,
#nav .nav-actions > .theme-toggle,
#nav .nav-actions > .hbg {
  box-sizing: border-box;
  vertical-align: middle;
  align-self: center;          /* a flex parent can never push one item off-center */
  flex: 0 0 auto;
}
#nav .nav-actions > .hdr-signin,
#nav .nav-actions > .hdr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;              /* kill the <a> text-baseline drift */
}
#nav .nav-actions > .hbg,
#nav .nav-actions .theme-btn {
  -webkit-appearance: none;    /* THE 1A/1B root cause: drop the iOS native button box */
  appearance: none;
}
/* Normalize the cluster to ONE height so no item sits taller/shorter than the
   rest. The toggle pill is the tallest control; match Sign In + Join + burger
   to it via a shared min-height so all four read as one aligned row. */
#nav .nav-actions > .hdr-signin,
#nav .nav-actions > .hdr-cta,
#nav .nav-actions > .hbg { min-height: 32px; }

/* BUG 1B — the round theme button, hardened ENGINE-INDEPENDENTLY. iOS Safari
   does NOT reliably honor aspect-ratio inside this flex row, so the circle is
   pinned BY CONSTRUCTION: identical width AND height in fixed px with matching
   min/max (defeats iOS flex min-size:auto + any cross-axis stretch) plus a fixed
   flex-basis. Equal w/h + border-radius:50% = a perfect circle on EVERY engine —
   no aspect-ratio, no padding-derived sizing. This file loads LAST so these win
   over design-tokens + per-page inline copies. Sizes are ordered base -> 767 ->
   400 so the narrower override always wins by source order. */
#nav .theme-btn,
#nav .theme-btn.active {
  width: 30px; height: 30px;
  min-width: 30px; min-height: 30px;
  max-width: 30px; max-height: 30px;
  flex: 0 0 30px;
  box-sizing: border-box;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  border: none;
}
#nav .theme-btn svg {
  display: block;
  width: 15px; height: 15px;
  min-width: 15px; min-height: 15px;
}
@media (max-width: 767px) {
  #nav .theme-btn,
  #nav .theme-btn.active {
    width: 27px; height: 27px;
    min-width: 27px; min-height: 27px;
    max-width: 27px; max-height: 27px;
    flex: 0 0 27px;
  }
  #nav .theme-btn svg { width: 14px; height: 14px; min-width: 14px; min-height: 14px; }
}
@media (max-width: 400px) {
  #nav .theme-btn,
  #nav .theme-btn.active {
    width: 25px; height: 25px;
    min-width: 25px; min-height: 25px;
    max-width: 25px; max-height: 25px;
    flex: 0 0 25px;
  }
  #nav .theme-btn svg { width: 13px; height: 13px; min-width: 13px; min-height: 13px; }
}
@media (max-width: 767px) {
  #nav .nav-actions > .hdr-signin,
  #nav .nav-actions > .hdr-cta,
  #nav .nav-actions > .hbg { min-height: 30px; }
}
@media (max-width: 400px) {
  #nav .nav-actions > .hdr-signin,
  #nav .nav-actions > .hdr-cta,
  #nav .nav-actions > .hbg { min-height: 28px; }
}