/* ==========================================================================
   Site header — app banner + nav (template-parts/fh-site-header.php).
   Loaded on every page that shows the new header (functions.php →
   fh_site_header_enqueue_assets()), including New Home, whose own
   css/new-home.css no longer contains header rules.

   Everything is scoped to #fh-site-header so it can't leak into Salient
   page content, and resets the Salient defaults (fonts, list styles,
   button styles, line heights) that would otherwise leak in.
   ========================================================================== */
#fh-site-header {
  --red: #E02E40;
  --red-hover: #c4202f;
  --dark: #0a0a0a;
  --white: #fff;
  --text-white-soft: rgba(255,255,255,0.55);
  --fhnh-banner-h: 0px;
  position: relative;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  color: #fff;
}
#fh-site-header *, #fh-site-header *::before, #fh-site-header *::after { margin: 0; padding: 0; box-sizing: border-box; }
#fh-site-header ul, #fh-site-header li { list-style: none; }
#fh-site-header a, #fh-site-header button, #fh-site-header span { font-family: inherit; letter-spacing: normal; }
#fh-site-header button { line-height: 1; text-transform: none; }

/* Pages other than New Home (header.php passes 'spacer' => true): reserve the
   header's height so Salient page content starts below it. The header is out
   of flow (absolute under the banner, then fixed), so the wrapper's bottom
   padding stands in for it. --fh-header-h is measured by js/fh-header.js; the
   fallback avoids a jump before JS runs. */
#fh-site-header.fh-site-header--spacer { padding-bottom: var(--fh-header-h, 92px); background: var(--dark); }

/* No banner: the header is fixed at top: 0 — keep it below a logged-in admin bar. */
.admin-bar #fh-site-header:not(.has-app-banner) .fh-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #fh-site-header:not(.has-app-banner) .fh-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar #fh-site-header:not(.has-app-banner) .fh-header:not(.header-scrolled) { position: absolute; top: 0; } }

#fh-site-header .fh-header{position: fixed;top: 0;left: 0;right: 0;z-index: 1000;padding: 16px 32px;background: rgba(10,10,10,0.72);backdrop-filter: saturate(180%) blur(28px);-webkit-backdrop-filter: saturate(180%) blur(28px);border-bottom: 1px solid rgba(255,255,255,0.07);transition: border-color 0.3s;}
#fh-site-header #nav{max-width: 1240px;margin: 0 auto;width: 100%;display: flex;align-items: center;justify-content: space-between;}
#fh-site-header .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
#fh-site-header .nav-logo-img { height: 60px; width: auto; display: block; }
#fh-site-header .nav-center { display: flex; align-items: center; gap: 36px; list-style: none; }
#fh-site-header .nav-center li{list-style: none;}
#fh-site-header .nav-center a { font-size: 14px; font-weight: 500; color: var(--text-white-soft); text-decoration: none; transition: color 0.2s; }
#fh-site-header .nav-center a:hover { color: #fff; }
#fh-site-header .nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
#fh-site-header .fh-nav-toggle{width: 32px;height: 32px;flex-shrink: 0;background-color: transparent;border: none;box-shadow: none;outline: none;margin-left: auto;}
#fh-site-header .fh-nav-toggle svg {color: var(--white);}
#fh-site-header .btn-nav-ghost{font-size: 14px;line-height: normal;font-weight: 500;padding: 6px 16px;border-radius: 980px;background: rgba(255,255,255,0.08);color: #fff;text-decoration: none;border: 1px solid rgba(255,255,255,0.1);transition: background 0.2s;}
#fh-site-header .btn-nav-ghost:hover{background: rgba(255,255,255,0.14);}
#fh-site-header .btn-nav-red{font-size: 14px;line-height: normal;font-weight: 600;padding: 12px 24px;border-radius: 980px;background: var(--red);color: #fff;text-decoration: none;transition: background 0.2s, transform 0.2s;}
#fh-site-header .btn-nav-red:hover{background: var(--red-hover);transform: scale(1.03);}

@media (min-width: 992px) {
  #fh-site-header .fh-nav-toggle{display: none;}
}

@media (max-width: 1199px) {
  #fh-site-header #nav{gap: 16px;}
  #fh-site-header .nav-logo-img{height: 40px;}
  #fh-site-header .nav-center{gap: 16px;}
}

@media (max-width: 991px) {
  #fh-site-header .nav-center{display: none; padding: 24px; position: fixed;top: 100%;left: 0;right: 0;background: var(--dark);flex-direction: column;align-items: flex-start;transition: all 0.35s cubic-bezier(0.22,1,0.36,1);}
  #fh-site-header #nav.active .nav-center{display: flex;}
}

@media (max-width: 600px) {
  #fh-site-header .nav-center { display: none; }
  #fh-site-header .fh-header{padding: 12px 16px;}
  #fh-site-header .nav-logo-img{height: 32px;}
  #fh-site-header .btn-nav-ghost,#fh-site-header .btn-nav-red{padding: 6px 10px;}
}

/* ── App banner (options page → "App Banner" tab) ──────────────────────────
   The banner sits in normal document flow and scrolls away with the page.
   .fh-header starts absolutely positioned just below it (--fhnh-banner-h is
   the banner's real height, measured by js/new-home.js; 44px avoids a jump
   before JS runs). After 100px of scroll JS adds .header-scrolled and the
   header becomes fixed at top: 0. The header is out of flow in both states,
   so switching never shifts the page content. */
#fh-site-header.has-app-banner { --fhnh-banner-h: 44px; }
#fh-site-header.has-app-banner .fh-header { position: absolute; top: var(--fhnh-banner-h); }
#fh-site-header.app-banner-dismissed { --fhnh-banner-h: 0px; }
#fh-site-header.app-banner-dismissed .app-banner { display: none; }
#fh-site-header .app-banner {
  position: relative; z-index: 1002;
  background: linear-gradient(90deg, #120305 0%, #1a080c 45%, #2a0b12 100%);
  border-bottom: 1px solid rgba(224,46,64,0.22);
  color: #fff; padding: 9px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
#fh-site-header .app-banner-content { display: flex; align-items: center; gap: 12px; font-size: 13.9px; font-weight: 500; line-height: 1.4; margin: 0 auto; }
#fh-site-header .app-banner-tag { background: var(--red); color: #fff; font-size: 10.7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 9999px; }
#fh-site-header .app-banner-badges { display: flex; align-items: center; gap: 8px; }
#fh-site-header .store-pill { line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 9999px; padding: 4px 12px; color: #fff; text-decoration: none; font-size: 11.8px; font-weight: 600; transition: all 0.2s ease; }
#fh-site-header .store-pill:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
#fh-site-header .store-pill svg { width: 13px; height: 13px; fill: currentColor; }
#fh-site-header .app-banner-close { background: transparent; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 17.1px; line-height: 1; display: flex; align-items: center; padding: 4px; transition: color 0.2s; }
#fh-site-header .app-banner-close:hover { color: #fff; }
@media (max-width: 767px) {
  #fh-site-header .app-banner { padding: 8px 16px; }
  #fh-site-header .app-banner-content { flex-wrap: wrap; justify-content: center; gap: 8px; text-align: center; font-size: 12.8px; }
}

/* Scrolled: header sticks to the top of the viewport and slides in. */
#fh-site-header .fh-header.header-scrolled { position: fixed; top: 0; animation: fhnhHeaderIn 0.35s cubic-bezier(0.22,1,0.36,1); }
@keyframes fhnhHeaderIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #fh-site-header .fh-header.header-scrolled { animation: none; } }

/* Logged-in admin bar is fixed above 600px wide: keep the sticky header below it. */
.admin-bar #fh-site-header .fh-header.header-scrolled { top: 32px; }
@media (max-width: 782px) { .admin-bar #fh-site-header .fh-header.header-scrolled { top: 46px; } }
@media (max-width: 600px) { .admin-bar #fh-site-header .fh-header.header-scrolled { top: 0; } }

/* ==========================================================================
   Nav dropdowns — the header menu is rendered by wp_nav_menu(), so items
   with children get .menu-item-has-children and a nested ul.sub-menu.
   Desktop: dropdown on hover / keyboard focus. Mobile menu (≤991px): the ▾
   button added by header-new-home.php expands the children inline.
   ========================================================================== */
#fh-site-header .nav-center li { position: relative; }
#fh-site-header .nav-center > li { display: flex; align-items: center; }
#fh-site-header .nav-center .current-menu-item > a,
#fh-site-header .nav-center .current-menu-ancestor > a { color: #fff; }
#fh-site-header .nav-center > .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 7px; }
#fh-site-header .nav-center > .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
#fh-site-header .nav-center > .menu-item-has-children:hover > a::after,
#fh-site-header .nav-center > .menu-item-has-children:focus-within > a::after { transform: translateY(1px) rotate(225deg); }
#fh-site-header .nav-center .sub-menu { position: absolute; top: calc(100% + 14px); left: -14px; z-index: 30; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: #15181b; border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; box-shadow: 0 20px 44px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
/* Invisible bridge over the gap so the dropdown stays open while the pointer moves down to it. */
#fh-site-header .nav-center .sub-menu::before { content: ''; position: absolute; top: -15px; left: 0; right: 0; height: 15px; }
#fh-site-header .nav-center li:hover > .sub-menu,
#fh-site-header .nav-center li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
#fh-site-header .nav-center .sub-menu li { display: block; }
#fh-site-header .nav-center .sub-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: rgba(255,255,255,0.72); transition: background 0.15s, color 0.15s; }
#fh-site-header .nav-center .sub-menu a:hover,
#fh-site-header .nav-center .sub-menu a:focus-visible { background: rgba(255,255,255,0.07); color: #fff; outline: none; }
#fh-site-header .nav-center .sub-menu .current-menu-item > a { color: #fff; background: rgba(224,46,64,0.14); }
/* Third level opens to the side */
#fh-site-header .nav-center .sub-menu .sub-menu { top: -9px; left: calc(100% + 8px); }
#fh-site-header .nav-center .sub-menu .sub-menu::before { top: 0; bottom: 0; left: -9px; right: auto; width: 9px; height: auto; }
#fh-site-header .nav-center .sub-menu .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
/* Near the right edge (last two items), the third level opens to the left instead */
#fh-site-header .nav-center > li:nth-last-child(-n+2) .sub-menu .sub-menu { left: auto; right: calc(100% + 8px); }
#fh-site-header .nav-center > li:nth-last-child(-n+2) .sub-menu .sub-menu::before { left: auto; right: -9px; }
/* The ▾ expand button is only for the mobile menu */
#fh-site-header .fhnh-submenu-toggle { display: none; }

@media (max-width: 991px) {
  #fh-site-header .nav-center { gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; }
  #fh-site-header .nav-center > li { flex-wrap: wrap; justify-content: space-between; width: 100%; }
  #fh-site-header .nav-center > li > a { padding: 10px 0; font-size: 16px; }
  #fh-site-header .nav-center > .menu-item-has-children > a::after,
  #fh-site-header .nav-center .sub-menu .menu-item-has-children > a::after { display: none; }
  #fh-site-header .fhnh-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: rgba(255,255,255,0.06); border: none; border-radius: 10px; color: #fff; cursor: pointer; }
  #fh-site-header .fhnh-submenu-toggle svg { width: 18px; height: 18px; transition: transform 0.2s; }
  #fh-site-header .is-open > .fhnh-submenu-toggle svg { transform: rotate(180deg); }
  #fh-site-header .fhnh-submenu-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  #fh-site-header .nav-center .sub-menu,
  #fh-site-header .nav-center .sub-menu .sub-menu { position: static; display: none; width: 100%; min-width: 0; margin: 2px 0 8px; padding: 2px 0 2px 14px; background: transparent; border: none; border-left: 1px solid rgba(255,255,255,0.14); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  #fh-site-header .nav-center .sub-menu::before { display: none; }
  #fh-site-header .nav-center li.is-open > .sub-menu { display: block; }
  #fh-site-header .nav-center .sub-menu li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  #fh-site-header .nav-center .sub-menu a { padding: 9px 10px; font-size: 15px; white-space: normal; }
  #fh-site-header .nav-center .sub-menu .fhnh-submenu-toggle { width: 32px; height: 32px; }
}


/* Right-hand menu (Appearance → Menus → location "Top Navigation Menu Pull
   Right"), rendered as ul > li.menu-item with the buttons inside. */
#fh-site-header .nav-right-menu { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
#fh-site-header .nav-right-menu li { margin: 0; padding: 0; list-style: none; }
#fh-site-header .nav-right-menu .btn-nav-ghost,
#fh-site-header .nav-right-menu .btn-nav-red { display: inline-flex; align-items: center; white-space: nowrap; }