/**
 * Unified site header — the home page treatment, applied to every page.
 *
 * index.html loads only orion-design-system.css + home.css, so its header is
 * the design system's. Every other page stacks legacy theme layers on top
 * (theme.css, monochrome-theme.css, cosmic-ref-theme.css, mobile.css — roughly
 * 345 rules touching .site-header / .site-nav / .site-brand between them).
 * Those target `.site-header[data-shared-header]` at (0,2,1) with !important,
 * which outranks the design system's `.site-header` at (0,1,0). Result: the
 * header was 83px tall, transparent + blurred, with a 34px letterspaced Inter
 * wordmark and maroon Inter nav links, instead of the home 65px cream bar with
 * a 17px Fraunces wordmark and Work Sans links.
 *
 * Values here are the literal computed values measured on index.html rather
 * than tokens, because the legacy layers redefine --text-primary and friends;
 * going through tokens would re-introduce the divergence this file exists to
 * remove. Load this LAST, after every legacy sheet.
 */

/* ── Bar ── */
.site-header[data-shared-header],
body .site-header[data-shared-header] {
  background: #F6F1E7 !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-soft, rgba(120, 90, 70, 0.16)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* theme.css pins this to --shared-header-height (82px). Home lets content
     set the height, giving a 65px bar. The variable itself is left alone
     because .site-nav-backdrop and the mobile drawer offset from it. */
  min-height: 0 !important;
}

.site-header[data-shared-header] .site-header__inner {
  max-width: 1400px;
  min-height: 0 !important;
  gap: 16px !important;
  padding: 12px 24px !important;
}

/* ── Brand lockup ── */
.site-header[data-shared-header] .site-brand__mark {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  background: url("assets/logo/orion-sunrise-icon.svg") center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header[data-shared-header] .site-brand__text strong {
  font-family: Fraunces, Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: #2A2117 !important;
}

.site-header[data-shared-header] .site-brand__text > span {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  color: #9C8D75 !important;
}

/* ── Nav links ──
   The `body ` prefix is not decoration: birth-chart-dashboard.css paints every
   link on a .life-menu-page in #993C1D via
   `body.life-menu-page a:not([class*="button"]):not(.btn)`, which outranks a
   bare `.site-header[data-shared-header] .site-nav > a` and turned the nav
   orange on the dashboard pages. Matching its specificity is enough — this file
   loads last. */
body .site-header[data-shared-header] .site-nav > a,
body .site-header[data-shared-header] .site-nav__parent,
.site-header[data-shared-header] .site-nav > a,
.site-header[data-shared-header] .site-nav__parent {
  font-family: "Work Sans", -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #6B5A44 !important;
  padding: 6px 2px !important;
  background: none !important;
  border: none !important;
}

.site-header[data-shared-header] .site-nav > a:hover,
.site-header[data-shared-header] .site-nav__parent:hover {
  color: #4A1B0C !important;
}

.site-header[data-shared-header] .site-nav > a[aria-current="page"],
.site-header[data-shared-header] .site-nav > a.is-active {
  color: #712B13 !important;
}

/* ── Header action buttons (Chat / Profile / credits chip) ──
   Home renders these at 13.5px Work Sans with 8px 16px padding, giving a 40px
   control and the 65px bar. The legacy layers shrink them to 12px with
   0 13px padding and put a border on all three. The credits chip is kept
   visible — it is newer than the home markup, and hiding it to match would
   lose the wallet balance from the header. */
.site-header[data-shared-header] .site-header__actions .header-chat-button,
.site-header[data-shared-header] .site-header__actions .header-auth-button,
.site-header[data-shared-header] .site-header__actions .header-credits-chip {
  font-family: "Work Sans", -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.65 !important;
  padding: 8px 16px !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 999px !important;
}

.site-header[data-shared-header] .site-header__actions .header-chat-button {
  border: 0 !important;
}

/* The chip wraps its value in child elements whose line boxes ran 2px taller
   than the sibling buttons, making it — not the brand — the tallest thing in
   the bar. Normalising them lands every control on the same 40px height. */
.site-header[data-shared-header] .site-header__actions .header-credits-chip > * {
  line-height: 1.65 !important;
  font-size: inherit !important;
}

/* The credits chip is a wallet readout, not a call to action. `[class*="chip"]`
   in monochrome-theme.css fills it solid maroon, which put three identical
   maroon pills in a row beside Chat and Login and made the balance read like
   a button. Dawn chip treatment: amber wash, bronze label, maroon value. */
.site-header[data-shared-header] .site-header__actions .header-credits-chip {
  background: rgba(232, 163, 61, 0.16) !important;
  border: 1px solid rgba(186, 117, 23, 0.32) !important;
  color: #854F0B !important;
  box-shadow: none !important;
}

/* `.header-credits-chip__balance` also contains the substring "chip", so the
   same [class*="chip"] rule that painted the pill maroon also drew its own
   1px maroon border + box-shadow around just the number inside. */
.site-header[data-shared-header] .site-header__actions .header-credits-chip__balance,
.site-header[data-shared-header] .site-header__actions .header-credits-chip strong,
.site-header[data-shared-header] .site-header__actions .header-credits-chip b {
  background: transparent !important;
  color: #4A1B0C !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Dropdown submenu ──
   theme.css restyles the panel and its links (12px Inter, 11px/14px padding,
   12px radius), so the Forecast/Kundali/My Life dropdowns opened in a different
   type scale from the nav bar that triggered them. Home values restored. */
.site-header[data-shared-header] .site-nav__submenu {
  padding: 8px !important;
  min-width: 200px !important;
  border: 1px solid #E6DCC6 !important;
  border-radius: 10px !important;
  background: #FFFDF8 !important;
  background-image: none !important;
  box-shadow: 0 4px 16px rgba(58, 42, 18, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header[data-shared-header] .site-nav__submenu a {
  display: block !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-family: "Work Sans", -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #6B5A44 !important;
}

/* The "… overview" entry is the section landing page — darker and heavier so it
   reads as the parent of the links beneath it. */
.site-header[data-shared-header] .site-nav__submenu a.site-nav__overview {
  font-weight: 600 !important;
  color: #2A2117 !important;
}

.site-header[data-shared-header] .site-nav__submenu a:hover,
.site-header[data-shared-header] .site-nav__submenu a:focus-visible,
.site-header[data-shared-header] .site-nav__submenu a[aria-current="page"] {
  background: #FBF6EC !important;
  color: #712B13 !important;
}

/* ── "Viewing chart" picker ──
   theme.css stacks this as a grid (caption above the select) and drops the
   select's own box, while a global form rule inflates the control to 48px —
   which is what made the bar 93px tall here against 65px on home. Back to the
   home lockup: caption inline, select as a cream pill, 40px control. */
.site-header[data-shared-header] .site-header__actions > .chart-selector {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin-right: 8px !important;
  font-family: "Work Sans", -apple-system, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* `body ` prefix again — cosmic-ref-theme.css strips this control back to a
   bare inline one ("background: transparent; border: 0") for .life-menu-page
   and .kundali-menu-page, at a specificity a bare selector here cannot reach. */
body .site-header[data-shared-header] .site-header__actions > .chart-selector select,
.site-header[data-shared-header] .site-header__actions > .chart-selector select {
  width: auto !important;
  max-width: 150px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid #E6DCC6 !important;
  border-radius: 999px !important;
  background: #EFE7D6 !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: "Work Sans", -apple-system, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: #2A2117 !important;
}

/* ── Compact tier, drawer breakpoint → 1320px ──
   Just above the drawer breakpoint the brand, nine inline nav links and a
   signed-in action row (picker + credits + Chat + Profile) only just fit; past
   the brand track's own collapse the header runs over its box. The design
   system tightens the same things at this width, but theme.css owns the nav gap
   and this file owns the picker and buttons, so the band has to be restated at
   this weight or it only takes effect on the two pages that skip the legacy
   layers. Dropping the caption is what buys the room — the select keeps its own
   aria-label, so nothing is lost but width. */
@media (min-width: 1180.02px) and (max-width: 1320px) {
  body .site-header[data-shared-header] .site-header__actions > .chart-selector select,
  .site-header[data-shared-header] .site-header__actions > .chart-selector select {
    max-width: 130px !important;
  }

  .site-header[data-shared-header] .site-nav {
    gap: 8px !important;
  }

  /* The buttons are pinned to 8px 16px above so they clear the legacy layers'
     mobile shrink; that pin also blocks the design system's own compact-tier
     padding, which is the last few pixels this band needs. */
  .site-header[data-shared-header] .site-header__actions .header-chat-button,
  .site-header[data-shared-header] .site-header__actions .header-auth-button,
  .site-header[data-shared-header] .site-header__actions .header-credits-chip {
    padding-inline: 12px !important;
  }
}

/* Every nav item (top-level links, dropdown triggers, submenu links) drew a
   maroon rectangle on hover/focus. Two Dawn Vedic tokens are the cause:
   cosmic-ref-theme.css and monochrome-theme.css both redefine
   --electric-blue and --hover-border to #8C2A3A (maroon) for the button
   palette, but orion-interactions.css's shared interaction-feedback layer
   reuses those same tokens for `:focus-visible` outlines and `:hover`
   box-shadows on `.site-nav a` / `.site-nav__parent` / `.site-nav__toggle`
   too — so every nav item inherited a maroon ring instead of the intended
   blue. index.html never loads the files that redefine those tokens, which
   is why the home page nav never showed this. Neutralised directly for all
   nav items rather than chasing the token, since it is reused by real
   button styling elsewhere that should keep its maroon hover treatment. */
.site-header[data-shared-header] .site-nav > a:focus-visible,
.site-header[data-shared-header] .site-nav > a:hover,
.site-header[data-shared-header] .site-nav__parent:focus-visible,
.site-header[data-shared-header] .site-nav__parent:hover,
.site-header[data-shared-header] .site-nav__toggle:focus-visible,
.site-header[data-shared-header] .site-nav__toggle:hover,
.site-header[data-shared-header] .site-nav .site-nav__parent:focus-visible,
.site-header[data-shared-header] .site-nav .site-nav__parent:hover,
.site-header[data-shared-header] .site-nav .site-nav__toggle:focus-visible,
.site-header[data-shared-header] .site-nav .site-nav__toggle:hover,
.site-header[data-shared-header] .site-nav__submenu a:focus-visible,
.site-header[data-shared-header] .site-nav__submenu a:hover {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ── Mobile drawer layout ──
   styles.css still sets .site-nav { position:absolute; left/right:0|1rem; display:none }
   and .is-open { display:grid }, which turns the menu into a full-screen sheet that
   covers the whole page (especially bad on chat). Force a right-side panel instead.
   Starts at 1180px, the width where theme.js and theme.css drop the inline nav. */
@media (max-width: 1180px) {
  .site-header[data-shared-header] .site-nav,
  body .site-header[data-shared-header] .site-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(18.5rem, 82vw) !important;
    max-width: 18.5rem !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding:
      calc(1.15rem + var(--orion-safe-top, env(safe-area-inset-top, 0px)))
      1rem
      calc(1.25rem + var(--orion-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 1px solid #E6DCC6 !important;
    background: #FFFDF8 !important;
    background-image: linear-gradient(180deg, #FFFDF8 0%, #FBF6EC 100%) !important;
    box-shadow: -12px 0 40px rgba(58, 42, 18, 0.16) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: 1200 !important;
    transform: translateX(105%) !important;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
    gap: 0 !important;
    /* Keep off-screen drawer from taking focus/hit area */
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .site-header[data-shared-header] .site-nav.is-open,
  body .site-header[data-shared-header] .site-nav.is-open,
  body.menu-open .site-header[data-shared-header] .site-nav {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .site-header[data-shared-header] .site-nav-backdrop,
  body .site-header[data-shared-header] .site-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1190 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(42, 33, 23, 0.42) !important;
  }

  .site-header[data-shared-header]:has(.site-nav.is-open) .site-nav-backdrop,
  body.menu-open .site-header[data-shared-header] .site-nav-backdrop {
    display: block !important;
  }

  .site-header[data-shared-header] .mobile-menu-toggle {
    position: relative !important;
    z-index: 1210 !important;
  }

  /* The desktop picker is forced to `display: flex !important` above so it can
     beat theme.css's stacked grid. That !important also beats theme.css's
     plain drawer-mode hide, so a signed-in visitor got the full 236px picker
     wedged into the phone bar — on top of the copy the drawer already carries.
     Restate the hide here, where the drawer owns the layout. */
  body .site-header[data-shared-header] .site-header__actions > .chart-selector,
  .site-header[data-shared-header] .site-header__actions > .chart-selector {
    display: none !important;
  }

  /* …and the copy the drawer does carry gets the same lockup as the desktop
     one. theme.css leaves it a 16px boxed field with a 10px radius, so the
     picker changed shape when the same header crossed the breakpoint. */
  .site-header[data-shared-header] .site-nav .chart-selector--mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    width: 100% !important;
    margin: 0 0 0.85rem !important;
    padding: 0 0 0.95rem !important;
    border: 0 !important;
    border-bottom: 1px solid #E6DCC6 !important;
    background: transparent !important;
  }

  .site-header[data-shared-header] .site-nav .chart-selector--mobile > span {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #9C8D75 !important;
  }

  /* `body ` prefix: cosmic-ref-theme.css strips the picker's box on
     .life-menu-page / .kundali-menu-page at a specificity a bare selector here
     cannot reach, which left this select transparent on those pages only. */
  body .site-header[data-shared-header] .site-nav .chart-selector--mobile select,
  .site-header[data-shared-header] .site-nav .chart-selector--mobile select {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid #E6DCC6 !important;
    border-radius: 999px !important;
    background: #FFF8EC !important;
    font-family: "Work Sans", -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: #2A2117 !important;
  }
}

/* Language switch — sits with the header actions. Text rather than a flag: a
   flag names a country, and Hindi is not a country.

   A short code ("EN" / "हिं") rather than the full sentence. Spelled out it ran
   121px, wider than the credits chip and Chat together, on a bar that also has
   to hold nine nav items and a chart selector. The full phrase survives as the
   title and the accessible name. */
.header-lang-switch {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-soft, #E6DCC6);
  border-radius: 999px;
  color: var(--text-secondary, #6B5A44);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.header-lang-switch:hover,
.header-lang-switch:focus-visible {
  border-color: var(--accent-maroon, #8C2A3A);
  color: var(--accent-maroon, #8C2A3A);
}

/* On narrow screens the header is tight; the switch moves into the menu. */
@media (max-width: 900px) {
  .header-lang-switch {
    padding: 5px 10px;
    font-size: .75rem;
  }
}


/* ---------------------------------------------------------------------------
   Desktop header breathing room.

   Between the mobile breakpoint (1180px) and roughly 1500px the bar has to fit
   the brand, nine nav items, the chart selector, the language switch, credits,
   Chat and Profile. Signed out it just fits; signed in the chart selector
   pushes it into a congested row. These trims apply in that band only.
   --------------------------------------------------------------------------- */
@media (min-width: 1181px) and (max-width: 1500px) {
  /* The caption goes first: the select keeps aria-label="Viewing chart", so a
     screen reader still announces it, and a dropdown holding a person's name
     needs no label for everyone else. */
  .site-header[data-shared-header] .chart-selector select {
    max-width: 120px;
  }

  .site-header__actions {
    gap: 8px;
  }

  .site-header[data-shared-header] .header-chat-button,
  .site-header[data-shared-header] .header-auth-button {
    padding: 8px 12px;
  }
}