/* ThornBloom Studio — Global Header Theme
 * Source of truth: shared/redesign-style-system.md §3.2 (Nav pattern) + §4.3 (Nav component)
 * Purpose: Theme the Astra site-header / primary header bar / nav globally so every page
 * (redesigned + legacy) renders with the dark midnight-blue bg + ivory/gold nav per redesign.
 * Deployed: 2026-04-19 to staging by website-manager.
 *
 * Tokens only — zero hardcoded hex. Loads AFTER templates.css so it wins the cascade
 * against both child theme header rules and Astra's customizer inline CSS.
 *
 * Legacy templates (template-home-redesign.php, template-freebie.php) still hide the
 * Astra header with display:none — their scoped overrides are unaffected by this file.
 * template-collection-redesign.php uses the real Astra header — this file themes it.
 */

/* ─── 1. Header bar + surrounding wrappers ─── */
/* Apply dark realm bg to every Astra header surface. Uses var(--realm-bg) so
   collection realm classes (body.realm-enchanted-forest etc.) inherit correctly. */
.site-header,
header.site-header,
#masthead,
.ast-above-header,
.ast-above-header-wrap,
.ast-above-header-bar,
.ast-main-header-wrap,
.main-header-bar-wrap,
.main-header-bar,
.ast-primary-header-bar,
.ast-primary-header,
.ast-main-header-bar-alignment,
.ast-header-break-point .ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-wrap {
  background: var(--realm-bg) !important;
  background-color: var(--realm-bg) !important;
  background-image: none !important;
}

/* Compact/scrolled variant per §3.2 — elevated surface color (var(--realm-primary)). */
.ast-primary-header-bar {
  border-bottom: 1px solid var(--tb-border-gold) !important;
}

/* Above-header (tagline/utility bar) — muted hairline separator. */
.ast-above-header-bar {
  border-bottom: 1px solid var(--tb-border-taupe) !important;
}

/* Kill any legacy green gradient from style.css. The gradient was hardcoded green
   (Enchanted Forest theme) — doesn't match the redesign's midnight-blue house palette. */
.site-header,
header.site-header,
#masthead,
.ast-primary-header-bar,
.ast-main-header-bar-alignment,
.main-header-bar,
.ast-header-break-point .ast-mobile-header-wrap .ast-primary-header-bar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── 2. Nav links — desktop ─── */
/* Per §3.2: IvyPresto Display 11px, weight 600, letter-spacing 0.18em, uppercase. */
.main-header-menu > .menu-item > a,
.ast-header-break-point .main-header-menu > .menu-item > a,
.ast-builder-menu .menu-item > a,
.ast-builder-menu-1 .menu-item > a,
.ast-masthead .ast-sitename-text {
  color: var(--tb-ivory) !important;
  font-family: var(--tb-font-heading) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  transition: color 0.25s ease !important;
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item > a:focus,
.main-header-menu > .current-menu-item > a,
.main-header-menu > .current_page_item > a,
.ast-builder-menu .menu-item > a:hover,
.ast-builder-menu .menu-item > a:focus {
  color: var(--tb-gold) !important;
}

/* Menu items container — transparent (background comes from header bar). */
.main-header-menu,
.ast-header-break-point .main-header-menu,
.main-header-menu > .menu-item {
  background: transparent !important;
  background-image: none !important;
}

/* ─── 3. Dropdown / submenu ─── */
/* Elevated surface (--realm-primary), gold hairline, subtle shadow. */
.main-header-menu .sub-menu,
.main-header-menu .children,
.ast-desktop-header-content .sub-menu {
  background: var(--realm-primary) !important;
  border: 1px solid var(--tb-border-gold) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
  z-index: 99999 !important;
}

.main-header-menu .sub-menu .menu-item a,
.main-header-menu .children .menu-item a {
  color: var(--tb-ivory) !important;
  font-family: var(--tb-font-heading) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  background: transparent !important;
  transition: color 0.25s ease, background 0.25s ease !important;
}

.main-header-menu .sub-menu .menu-item a:hover,
.main-header-menu .sub-menu .menu-item a:focus {
  color: var(--tb-gold) !important;
  background: color-mix(in srgb, var(--tb-gold) 8%, transparent) !important;
}

.main-header-menu .sub-menu .menu-item {
  background: transparent !important;
  border-bottom: none !important;
}

/* ─── 4. Cart + search icons ─── */
/* Color the Astra cart icon + search icon to match nav links. */
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-site-header-cart a,
.ast-site-header-cart-li a,
.ast-header-woo-cart a,
.ast-header-woo-cart .ast-cart-menu-wrap,
.ast-search-icon,
.ast-search-menu-icon .search-field,
.ast-search-menu-icon .astra-search-icon,
.ast-search-icon .ast-icon {
  color: var(--tb-ivory) !important;
  fill: var(--tb-ivory) !important;
}

.ast-site-header-cart a:hover,
.ast-search-icon:hover,
.ast-search-menu-icon:hover .astra-search-icon {
  color: var(--tb-gold) !important;
  fill: var(--tb-gold) !important;
}

/* Cart icon SVG glyph paths — Astra ships as inherit currentColor so color: above handles it. */
.ast-site-header-cart svg,
.ast-search-menu-icon svg {
  fill: currentColor !important;
}

/* Cart count bubble per §4.3: 16px metallic circle with realm-primary text. */
.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-site-header-cart-li .count,
.ast-header-woo-cart .count {
  background: var(--realm-metallic) !important;
  color: var(--realm-primary) !important;
  border: none !important;
  font-family: var(--tb-font-heading) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  top: -6px !important;
  right: -8px !important;
}

/* ─── 5. Logo area ─── */
/* Logo wrapper background matches header (transparent → header shows through). */
.ast-site-identity,
.site-branding,
.site-logo-img,
.ast-header-custom-item,
.site-title-wrap,
.ast-site-title-wrap {
  background: transparent !important;
}

/* Hide Astra's text site-title (logo handles it). */
.ast-site-title-wrap .site-title {
  display: none !important;
}

/* Custom logo sizing consistent across pages. */
.site-logo-img .custom-logo,
.ast-header-custom-item .custom-logo,
.custom-logo-link img {
  max-height: 50px !important;
  width: auto !important;
}

/* ─── 6. Mobile hamburger trigger ─── */
/* Per §3.2: gold bordered, IvyPresto 10/600/0.2em uppercase. */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-outline,
.menu-toggle,
.main-header-menu-toggle {
  background: transparent !important;
  color: var(--tb-gold) !important;
  border: 1px solid var(--tb-border-strong) !important;
  padding: 10px 14px !important;
}

.ast-mobile-menu-trigger-minimal:hover,
.menu-toggle:hover,
.main-header-menu-toggle:hover {
  color: var(--tb-gold-bright) !important;
  border-color: var(--tb-gold) !important;
}

.ast-mobile-menu-trigger-minimal svg,
.ast-mobile-menu-trigger-fill svg,
.menu-toggle svg {
  fill: currentColor !important;
}

/* ─── 7. Mobile drawer (<768px) ─── */
/* Per §4.3: full-height overlay, --realm-primary bg, padded, centered stack. */
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-main-header-nav-open .ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
#ast-mobile-header .ast-mobile-header-content,
.ast-mobile-popup-content,
.main-header-bar-navigation,
#ast-hf-mobile-menu,
#ast-hf-mobile-menu ul,
.ast-builder-menu-mobile {
  background: var(--realm-primary) !important;
  background-color: var(--realm-primary) !important;
}

.ast-mobile-header-wrap .ast-mobile-header-content a,
.ast-mobile-popup-drawer a,
#ast-mobile-header .ast-mobile-header-content a,
.ast-mobile-popup-content a,
.main-header-bar-navigation a,
#ast-hf-mobile-menu a {
  color: var(--tb-ivory) !important;
  font-family: var(--tb-font-heading) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-bottom-color: var(--tb-border-taupe) !important;
}

.ast-mobile-header-wrap .ast-mobile-header-content a:hover,
.ast-mobile-popup-drawer a:hover,
#ast-mobile-header .ast-mobile-header-content a:hover,
.main-header-bar-navigation a:hover,
#ast-hf-mobile-menu a:hover {
  color: var(--tb-gold) !important;
}

.ast-mobile-header-wrap .ast-mobile-header-content li,
.ast-mobile-popup-drawer li,
#ast-hf-mobile-menu li,
.main-header-bar-navigation li {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--tb-border-taupe) !important;
}

/* Mobile drawer close button — gold. */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .ast-mobile-menu-close,
.menu-toggle-close {
  color: var(--tb-gold) !important;
  background: transparent !important;
}

/* ─── 8. Header inner container widths ─── */
/* Preserve existing full-width behavior (style.css sets these). Included here so this
   file is self-contained and legacy style.css rules becoming redundant is safe. */
.site-header .ast-builder-grid-row-container {
  max-width: 100% !important;
  width: 100% !important;
}

.site-header .ast-builder-grid-row {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 24px !important;
}

/* ─── 9. Defeat Astra customizer inline CSS ─── */
/* Astra writes `.ast-primary-header-bar { background-color:#c4bcb1; background-image:none; }`
   inline in wp_head — that's what was turning the header white. This file loads after it
   in cascade (via enqueue), and our !important + identical specificity wins. */

/* ─── 10. Preserve promo bar (tb-announcement) independence ─── */
/* The announcement bar is NOT part of Astra's header; no overrides here touch .tb-announcement.
   If future promo variants need theming, do it in templates.css / tokens.css — not here. */