/**
 * Header Layout: Flyout Header
 *
 * Dual-header (Hero + Ghost) architecture with full-screen flyout panel.
 * Uses native DOM nesting for infinite submenu depth.
 * Implements Mathematical 50% Force-Field for Priority+ native collision handling.
 *
 * @package Celeste_Theme
 * @since   2.4.0
 */

/* ==========================================================================
   1. DUAL HEADERS — BASE
   ========================================================================== */

   .fh-header.fh-header--hero,
   .fh-header.fh-header--ghost {
       width: 100%;
       z-index: 1000;
       left: 0;
       right: 0;
       overflow: visible;
   }
   
   .fh-header--hero {
       position: absolute;
       top: 0;
       background-color: transparent !important;
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
       color: var(--fh-text-glass, #1a1a1a);
       transition: color 0.35s ease;
   }
   
   .fh-header--hero::before {
       content: '';
       position: absolute;
       inset: 0;
       z-index: -1;
       pointer-events: none;
   }
   
   .fh-header--ghost {
       position: fixed;
       top: 0;
       background-color: var(--fh-bg-sticky, #1a1a1a);
       color: var(--fh-text-sticky, #f8f7f2);
       transform: translateY(calc(-100% - var(--fh-hide-buffer, 25px)));
       transition: transform 0.5s cubic-bezier(0.25, 0.6, 0.25, 1);
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
   }
   
   .fh-header--ghost.is-visible {
       transform: translateY(0);
       box-shadow: var(--fh-sticky-shadow, none);
   }
   
   body.fh-flyout-open {
       overflow: hidden;
   }
   
   #masthead-fh-hero .container {
       height: 90px;
       display: grid;
   }
   
   .fh-bar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding-top: 24px;
       padding-bottom: 24px;
       position: relative;
       width: 100%;
   }
   
   /* ==========================================================================
      2. LEFT ZONE — HAMBURGER + FEATURED MENU
      ========================================================================== */
   
   .fh-bar-left {
       display: flex;
       align-items: center;
       gap: 24px;
       flex: 1;
       max-width: 50%;
       padding-right: calc(clamp(40px, 7.5vw, 140px) + 24px);
       min-width: 0;
   }
   
   .fh-hamburger {
       background: none;
       border: none;
       cursor: pointer;
       padding: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       color: currentColor;
   }
   
   .fh-burger-icon {
       display: flex;
       flex-direction: column;
       gap: 5px;
       width: 26px;
   }
   
   .fh-burger-icon span {
       display: block;
       width: 100%;
       height: 2px;
       background-color: currentColor;
       transition: transform 0.3s ease, opacity 0.3s ease;
   }
   
   body.fh-flyout-open .fh-burger-icon span:nth-child(1) {
       transform: translateY(7px) rotate(45deg);
   }
   
   body.fh-flyout-open .fh-burger-icon span:nth-child(2) {
       opacity: 0;
       transform: scaleX(0);
   }
   
   body.fh-flyout-open .fh-burger-icon span:nth-child(3) {
       transform: translateY(-7px) rotate(-45deg);
   }
   
   .fh-featured-nav {
       display: flex;
       align-items: center;
       flex: 1;
       min-width: 0;
   }
   
   /* The native wrap-and-clip engine */
   .fh-featured-menu {
       display: flex;
       list-style: none;
       margin: 0;
       padding: 0 0 5px 0;
       gap: 24px;
       align-items: flex-start;
       flex-wrap: wrap; /* Allows items to wrap when they hit the mathematical wall */
       height: 25px; /* Locks visibility to exactly one line */
       overflow: hidden; /* Invisibly clips any item forced to line 2 */
       justify-content: flex-start;
       width: 100%;
   }
   
   .fh-featured-menu a {
       position: relative;
   }
   
   .fh-featured-menu .fh-featured-item {
       white-space: nowrap;
       flex-shrink: 0;
       line-height: 20px;
   }
   
   .fh-featured-menu .fh-featured-item a {
       font-family: var(--font-nav, var(--font-modern));
       font-weight: var(--weight-nav-default, 500);
       font-size: var(--size-header-desktop, 16px);
       text-transform: uppercase;
       letter-spacing: 0.08em;
       text-decoration: none;
       color: currentColor;
       opacity: 1 !important;
   }
   
   .fh-featured-menu .fh-featured-item a::after {
       content: '';
       position: absolute;
       bottom: -4px;
       left: 0;
       width: 100%;
       height: 2px;
       background-color: currentColor;
       transform: scaleX(0);
       transform-origin: left;
       transition: transform 0.3s ease;
   }
   
   .fh-featured-menu .fh-featured-item a:hover::after {
       transform: scaleX(1);
   }
   
   /* ==========================================================================
      3. CENTER ZONE — LOGOS
      ========================================================================== */
   
   .fh-logos {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;
   }
   
   .fh-logo {
       display: flex;
       align-items: center;
       text-decoration: none;
       line-height: 0;
       margin: 0;
       padding: 0;
   }
   
   .fh-header--hero .fh-logo--light {
       opacity: 1;
       pointer-events: auto;
       transition: opacity 0.35s ease;
       align-self: center;
   }
   
   .fh-header--hero .fh-logo--light img {
       height: 100%;
       max-height: 60px;
       width: clamp(80px, 15vw, 280px);
       max-width: 280px;
       object-fit: contain;
       display: block;
   }
   
   .fh-header--ghost .fh-logo--sticky {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 1;
       pointer-events: auto;
       transition: opacity 0.35s ease, transform 0.35s ease;
       transform: translateY(var(--fh-bleed-transform, 0%)); 
   }
   
   .fh-header--ghost .fh-logo--sticky img {
       width: auto;
       height: var(--fh-sticky-logo-height, clamp(70px, 8vw, 150px));
       max-width: clamp(70px, 8vw, 150px);
       object-fit: contain;
       display: block;
   }
   
   /* ==========================================================================
      4. RIGHT ZONE — CTA
      ========================================================================== */
   
   .fh-cta-wrapper {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       flex: 1;
   }
   
   .fh-cta-group {
       display: flex;
       flex-direction: column;
       align-items: stretch;
       position: relative;
   }
   
   .fh-cta-primary {
       font-family: var(--button-font-family);
       font-weight: var(--button-font-weight, 700);
       font-size: var(--button-size-desktop, 1rem);
       text-transform: uppercase;
       letter-spacing: 0.08em;
       text-decoration: none;
       padding: 12px 24px;
       border: var(--fh-cta-border-width, 2px) solid var(--fh-cta-border, #1a1a1a);
       border-radius: var(--fh-cta-border-radius, 50px);
       background-color: var(--fh-cta-bg, transparent);
       color: var(--fh-cta-text, #1a1a1a);
       cursor: pointer;
       white-space: nowrap;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       position: relative;
       overflow: hidden;
       transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, padding 0.8s ease, font-size 0.8s ease;
       z-index: 1;
   }
   
   .fh-cta-primary .btn-text {
       position: relative;
       z-index: 3;
   }
   
   .fh-header--ghost .fh-cta-primary {
       border-color: var(--fh-cta-sticky-border, #f8f7f2);
       background-color: var(--fh-cta-sticky-bg, transparent);
       color: var(--fh-cta-sticky-text, #f8f7f2);
   }
   
   .fh-header--hero .fh-cta-primary:hover,
   .fh-header--hero .fh-cta-group:hover .fh-cta-primary {
       border-color: var(--fh-cta-border-hover, #1a1a1a);
       background-color: var(--fh-cta-bg-hover, #1a1a1a);
       color: var(--fh-cta-text-hover, #f8f7f2);
   }
   
   .fh-header--ghost .fh-cta-primary:hover,
   .fh-header--ghost .fh-cta-group:hover .fh-cta-primary {
       border-color: var(--fh-cta-sticky-border-hover, #f8f7f2);
       background-color: var(--fh-cta-sticky-bg-hover, #f8f7f2);
       color: var(--fh-cta-sticky-text-hover, #1a1a1a);
   }
   
   .fh-cta-dropdown {
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translate(-50%, -8px);
       width: max-content;
       min-width: 100%;
       display: flex;
       flex-direction: column;
       gap: 10px;
       padding-top: 15px;
       background: transparent;
       border-radius: 0;
       overflow: visible;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.25s ease, transform 0.25s ease;
       z-index: 0;
   }
   
   .fh-cta-group:hover .fh-cta-dropdown,
   .fh-cta-group:focus-within .fh-cta-dropdown,
   .fh-cta-group[data-open="true"] .fh-cta-dropdown {
       opacity: 1;
       transform: translate(-50%, 0);
       pointer-events: auto;
   }
   
   .fh-cta-dropdown-item {
       font-family: var(--button-font-family);
       font-weight: var(--button-font-weight, 700);
       font-size: var(--button-size-desktop, 1rem);
       line-height: var(--button-line-height, 20px);
       text-transform: uppercase;
       letter-spacing: 0.08em;
       text-decoration: none;
       padding: 12px 24px;
       width: 100%;
       box-sizing: border-box;
       text-align: center;
       display: flex;
       align-items: center;
       justify-content: center;
       border: var(--fh-cta-border-width, 2px) solid var(--fh-cta-border, #1a1a1a);
       background-color: var(--fh-cta-bg, transparent);
       color: var(--fh-cta-text, #1a1a1a);
       white-space: nowrap;
       position: relative;
       overflow: hidden;
       transition: color 0.3s ease, background-color 0.3s ease;
       border-radius: var(--fh-cta-border-radius, 50px);
   }
   
   .fh-cta-dropdown-item .btn-text {
       position: relative;
       z-index: 3;
   }
   
   .fh-cta-dropdown-item:hover {
       background-color: var(--fh-cta-bg-hover, #1a1a1a);
       color: var(--fh-cta-text-hover, #f8f7f2);
   }
   
   .fh-header--ghost .fh-cta-dropdown-item {
       border-color: var(--fh-cta-sticky-border, #f8f7f2);
       background-color: var(--fh-cta-sticky-bg, var(--fh-bg-sticky, #1a1a1a));
       color: var(--fh-cta-sticky-text, #f8f7f2);
   }
   
   .fh-header--ghost .fh-cta-dropdown-item:hover {
       background-color: var(--fh-cta-sticky-bg-hover, #f8f7f2);
       color: var(--fh-cta-sticky-text-hover, #1a1a1a);
   }
   
   /* ==========================================================================
      4b. MOBILE — CTA DROPDOWN
      ========================================================================== */
   
   @media (max-width: 767px) {
       .fh-cta-group:hover .fh-cta-dropdown,
       .fh-cta-group:focus-within .fh-cta-dropdown {
           opacity: 0 !important;
           visibility: hidden !important;
           transform: translateY(-10px) !important;
           pointer-events: none !important;
       }
   
       .fh-cta-group.fh-cta-open .fh-cta-dropdown,
       .fh-cta-group.fh-cta-open:hover .fh-cta-dropdown,
       .fh-cta-group.fh-cta-open:focus-within .fh-cta-dropdown {
           opacity: 1 !important;
           visibility: visible !important;
           transform: translateY(0) !important;
           pointer-events: auto !important;
       }
   
       .fh-header--hero .fh-cta-group.fh-cta-open .fh-cta-primary {
           border-color: var(--fh-cta-border-hover, #1a1a1a) !important;
           background-color: var(--fh-cta-bg-hover, #1a1a1a) !important;
           color: var(--fh-cta-text-hover, #f8f7f2) !important;
       }
   
       .fh-header--ghost .fh-cta-group.fh-cta-open .fh-cta-primary {
           border-color: var(--fh-cta-sticky-border-hover, #f8f7f2) !important;
           background-color: var(--fh-cta-sticky-bg-hover, #f8f7f2) !important;
           color: var(--fh-cta-sticky-text-hover, #1a1a1a) !important;
       }
   
       .fh-cta-wrapper,
       .fh-cta-group {
           position: static;
       }
       .fh-cta-primary, .fh-cta-dropdown-item {
           padding: 10px 10px;
           font-size: calc(var(--button-size-desktop, 1rem) * 0.7);
           transition: padding 0.8s ease, font-size 0.8s ease;
       }
   
       .fh-cta-group .fh-cta-dropdown {
           position: absolute;
           top: 100%;
           left: 0;
           right: 0;
           width: 100vw;
           margin-left: calc(-50vw + 50%);
           flex-direction: row;
           flex-wrap: wrap;
           gap: 10px;
           padding: 15px 20px;
           border-radius: 0;
           box-sizing: border-box;
           display: flex;
           opacity: 0;
           visibility: hidden;
           transform: translateY(-10px);
           pointer-events: none;
           transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
           z-index: 10;
       }
   
       .fh-cta-group .fh-cta-dropdown .fh-cta-dropdown-item {
           flex: 1 1 calc(50% - 5px);
           width: calc(50% - 5px);
       }
   
       .fh-cta-group .fh-cta-dropdown a:nth-child(odd):last-child {
           flex: 1 1 100%;
           width: 100%;
       }
       
       .fh-header--ghost:has(.fh-cta-group.fh-cta-open) .fh-logo--sticky {
           transform: translateY(0) !important;
       }
   }
   
   /* ==========================================================================
      5. FLYOUT PANEL — BACKDROP
      ========================================================================== */
   
   #fh-flyout-panel {
       position: fixed;
       inset: 0;
       z-index: 2000;
       pointer-events: none;
       visibility: hidden;
       transition: visibility 0s linear 0.5s;
   }
   
   body.fh-flyout-open #fh-flyout-panel {
       pointer-events: auto;
       visibility: visible;
       transition: visibility 0s linear 0s;
   }
   
   #fh-flyout-overlay {
       position: absolute;
       inset: 0;
       background-color: var(--fh-flyout-overlay, rgba(0,0,0,0.5));
       opacity: 0;
       transition: opacity 0.35s ease;
   }
   
   body.fh-flyout-open #fh-flyout-overlay {
       opacity: 1;
   }
   
   /* ==========================================================================
      6. LEVEL 1 PANEL & CONTAINERS
      ========================================================================== */
   
   .fh-flyout-inner {
       position: absolute;
       top: 0;
       left: 0;
       display: flex;
       flex-direction: row;
       align-items: flex-start;
       pointer-events: none;
       transform: translateX(-100%);
       transition: transform 0.45s cubic-bezier(0.25, 0.6, 0.25, 1);
       z-index: 2;
       width: max-content;
       height: max-content; 
   }
   
   body.fh-flyout-open .fh-flyout-inner {
       transform: translateX(0);
   }
   
   .fh-flyout-l1 {
       position: static;
       min-width: 280px;
       width: max-content;
       height: max-content; 
       max-height: 100dvh;
       background-color: var(--fh-flyout-bg, #1a1a1a);
       overflow-y: auto;
       display: flex;
       flex-direction: column;
       padding: 40px 24px 60px;
       pointer-events: auto;
       box-sizing: border-box;
   }
   
   .fh-flyout-close {
       background: none;
       border: none;
       cursor: pointer;
       padding: 8px 0px;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       color: var(--fh-flyout-close, #f8f7f2);
       margin-bottom: 32px;
       flex-shrink: 0;
       align-self: flex-start;
   }
   
   .fh-close-icon {
       display: block;
       width: 24px;
       height: 24px;
   }
   
   .fh-close-icon svg {
       width: 100%;
       height: 100%;
       display: block;
   }
   
   /* ==========================================================================
      7. FLYOUT NAV — LEVEL 1
      ========================================================================== */
   
   .fh-flyout-nav {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
   }
   
   .fh-nav-list {
       list-style: none;
       margin: 0;
       padding: 0;
   }
   
   .fh-nav-list > li {
       opacity: 0;
       border-bottom: 1px solid var(--fh-flyout-divider, rgba(248,247,242,0.2));
       position: static; 
   }
   
   .fh-nav-list > li:first-child {
       border-top: 1px solid var(--fh-flyout-divider, rgba(248,247,242,0.2));
   }
   
   body.fh-flyout-open .fh-nav-list > li {
       opacity: 1;
       transition: opacity 0.4s ease;
   }
   
   body.fh-flyout-open .fh-nav-list > li:nth-child(1) { transition-delay: 0.10s; }
   body.fh-flyout-open .fh-nav-list > li:nth-child(2) { transition-delay: 0.15s; }
   body.fh-flyout-open .fh-nav-list > li:nth-child(3) { transition-delay: 0.20s; }
   body.fh-flyout-open .fh-nav-list > li:nth-child(4) { transition-delay: 0.25s; }
   body.fh-flyout-open .fh-nav-list > li:nth-child(5) { transition-delay: 0.30s; }
   body.fh-flyout-open .fh-nav-list > li:nth-child(6) { transition-delay: 0.35s; }
   body.fh-flyout-open .fh-nav-list > li:nth-child(7) { transition-delay: 0.40s; }
   body.fh-flyout-open .fh-nav-list > li:nth-child(n+8) { transition-delay: 0.45s; }
   
   #fh-flyout-panel:not([aria-hidden="false"]) .fh-nav-list > li {
       transition: none;
   }
   
   .fh-nav-list li > a {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 18px 24px;
       font-family: var(--font-nav, var(--font-modern));
       font-weight: var(--weight-nav-default, 500);
       font-size: calc(var(--size-menu-mobile, 24px) * 0.8);
       text-transform: uppercase;
       letter-spacing: 0.1em;
       text-decoration: none;
       color: var(--fh-flyout-text, #f8f7f2);
       transition: color 0.25s ease;
   }
   
   .fh-nav-list li > a:hover,
   .fh-nav-list li.current-menu-item > a,
   .fh-nav-list li.current-menu-ancestor > a {
       color: var(--fh-flyout-text-hover, #c8b87a);
   }
   
   .fh-nav-list li.menu-item-has-children > a::after {
       content: '→';
       font-size: 14px;
       color: var(--fh-flyout-arrow, #f8f7f2);
       transition: color 0.25s ease, transform 0.25s ease;
       flex-shrink: 0;
       margin-left: 12px;
   }
   
   @media (min-width: 768px) {
       .fh-nav-list li.menu-item-has-children:hover > a::after,
       .fh-nav-list li.menu-item-has-children.fh-hover-locked > a::after {
           color: var(--fh-flyout-text-hover, #c8b87a);
           transform: translateX(4px);
       }
   }
   
   /* ==========================================================================
      8. FLYOUT SOCIAL
      ========================================================================== */
   
   .fh-flyout-social {
       display: flex;
       gap: 16px;
       align-items: center;
       padding: 24px 24px 0;
       margin-top: auto;
       border-top: 1px solid var(--fh-flyout-divider, rgba(248,247,242,0.2));
   }
   
   .fh-social-icon {
       width: 28px;
       height: 28px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--fh-flyout-text, #f8f7f2);
       transition: color 0.3s ease;
   }
   
   .fh-social-icon:hover {
       color: var(--fh-flyout-text-hover, #c8b87a);
   }
   
   .fh-social-icon svg {
       width: 100%;
       height: 100%;
       display: block;
   }
   
   /* ==========================================================================
      9. SUBMENU PANELS (INFINITE NATIVE DEPTH)
      ========================================================================== */
   
   @media (min-width: 768px) {
       .fh-flyout-tier {
           position: absolute;
           top: 0;
           left: 100%; 
           height: max-content; 
           max-height: 100dvh;
           min-width: 280px;
           width: max-content;
           box-sizing: border-box;
           opacity: 0;
           visibility: hidden;
           pointer-events: none;
           transform: translateX(-15px);
           transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
           z-index: -1 !important; 
       }
   
       .fh-flyout-tier::before {
           content: '';
           position: absolute;
           top: -2000px;
           bottom: -2000px;
           left: -120px; 
           width: 120px;
           z-index: -2;
           pointer-events: auto;
       }
   
       .fh-nav-list li.menu-item-has-children:hover > .fh-flyout-tier,
       .fh-nav-list li.menu-item-has-children.fh-hover-locked > .fh-flyout-tier {
           opacity: 1;
           visibility: visible;
           pointer-events: auto;
           transform: translateX(0);
       }
   
       .fh-flyout-tier-inner {
           position: static; 
           height: max-content;
           max-height: 100dvh;
           overflow-y: auto;
           overflow-x: visible;
           background-color: var(--fh-flyout-bg, #1a1a1a);
           box-sizing: border-box;
       }
   
       .fh-flyout-tier[data-border-type="color"] .fh-flyout-tier-inner > ul {
           border: var(--fh-submenu-border-width, 2px) solid var(--fh-submenu-border-color, #c8b87a);
           padding: calc(112px - var(--fh-submenu-border-width, 2px)) 24px calc(60px - var(--fh-submenu-border-width, 2px));
           min-height: auto;
           box-sizing: border-box;
       }
   
       .fh-flyout-tier[data-border-type="image"] .fh-flyout-tier-inner {
           background-image: var(--fh-submenu-border-image);
           background-size: var(--fh-submenu-border-bg-size, cover);
           background-position: var(--fh-submenu-border-bg-position, center);
           background-repeat: no-repeat;
           padding: var(--fh-submenu-border-padding, 12px);
       }
       
       .fh-flyout-tier[data-border-type="image"] .fh-flyout-tier-inner > ul {
           background-color: var(--fh-flyout-bg, #1a1a1a);
           padding: calc(112px - var(--fh-submenu-border-padding, 2px)) 24px calc(60px - var(--fh-submenu-border-padding, 2px));
           min-height: auto;
           box-sizing: border-box;
       }
   
       .fh-flyout-tier-inner ul {
           list-style: none;
           margin: 0;
           padding: 112px 24px 60px;
       }
   
       .fh-flyout-tier-inner > ul > li {
           border-bottom: 1px solid var(--fh-flyout-divider, rgba(248,247,242,0.2));
           position: static; 
       }
   
       .fh-flyout-tier-inner > ul > li:first-child {
           border-top: 1px solid var(--fh-flyout-divider, rgba(248,247,242,0.2));
       }
   
       .fh-flyout-tier-inner ul li a {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 18px 8px;
           font-family: var(--font-nav, var(--font-modern));
           font-weight: var(--weight-nav-default, 500);
           font-size: calc(var(--size-menu-mobile, 24px) * 0.8);
           text-transform: uppercase;
           letter-spacing: 0.1em;
           text-decoration: none;
           color: var(--fh-flyout-text, #f8f7f2);
           transition: color 0.25s ease;
       }
   
       .fh-flyout-tier-inner ul li a:hover {
           color: var(--fh-flyout-text-hover, #c8b87a);
       }
   }
   
   /* ==========================================================================
      10. MOBILE — ACCORDION
      ========================================================================== */
   
   @media (max-width: 767px) {
       #masthead-fh-hero .container {
           padding-left: 20px;
           padding-right: 20px;
       }
   
       .fh-bar {
           padding-top: 16px;
           padding-bottom: 16px;
       }
   
       .fh-featured-nav {
           display: none;
       }
   
       .fh-flyout-inner {
           width: 100vw;
       }
   
       .fh-flyout-l1 {
           width: 100%;
           max-width: 100%;
           height: 100dvh;
       }
   
       .fh-flyout-close {
           align-self: flex-end;
           margin-left: 0;
       }
   
       .fh-flyout-tier {
           position: static !important;
           transform: none !important;
           opacity: 1 !important;
           visibility: visible !important;
           pointer-events: auto;
           height: auto;
           min-height: 0;
           z-index: auto !important; 
       }
   
       .fh-nav-list ul.sub-menu,
       .fh-nav-list .fh-flyout-tier-inner {
           display: block !important;
           visibility: visible !important;
           opacity: 1 !important;
       }
   
       .fh-flyout-tier-inner {
           background: none !important;
           padding: 0 !important;
           height: auto;
           overflow: hidden;
       }
       
       .fh-flyout-tier[data-border-type="color"] .fh-flyout-tier-inner > ul,
       .fh-flyout-tier[data-border-type="image"] .fh-flyout-tier-inner > ul {
           border: none !important;
           background: none !important;
           padding: 0 !important;
           min-height: 0;
       }
   
       .fh-nav-list .fh-flyout-tier {
           overflow: hidden;
           max-height: 0;
           transition: max-height 0.4s ease, margin 0.4s ease;
       }
   
       .fh-nav-list li.menu-item-has-children.fh-open > .fh-flyout-tier {
           max-height: 1200px;
           margin-top: 8px;
           margin-bottom: 8px;
       }
   
       .fh-nav-list .sub-menu {
           margin: 0 0 0 24px;
           padding: 0;
           list-style: none;
       }
   
       .fh-nav-list li.menu-item-has-children > a::after {
           content: '';
           display: block;
           width: 8px;
           height: 8px;
           border-right: 2px solid currentColor;
           border-bottom: 2px solid currentColor;
           transform: rotate(45deg) translateY(-2px);
           transition: transform 0.3s ease;
           flex-shrink: 0;
           margin-left: 12px;
       }
   
       .fh-nav-list li.menu-item-has-children.fh-open > a::after {
           transform: rotate(225deg) translateY(-2px);
       }
   
       .fh-flyout-tier-inner ul li a {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 12px 24px 12px 40px !important;
           font-family: var(--font-nav, var(--font-modern));
           font-size: calc(var(--size-menu-mobile, 24px) * 0.6) !important;
           text-transform: uppercase;
           letter-spacing: 0.08em;
           text-decoration: none;
           color: var(--fh-flyout-text, #f8f7f2);
           opacity: 0.8;
           transition: opacity 0.2s ease, color 0.2s ease;
       }
       
       .fh-nav-list .sub-menu .sub-menu li a {
           padding-left: 56px !important; 
       }
   
       .fh-flyout-tier-inner ul li a:hover,
       .fh-nav-list li.menu-item-has-children:hover > a::after {
           opacity: 1;
           color: var(--fh-flyout-text-hover, #c8b87a);
       }
   }
   
   /* ==========================================================================
      11. ACCESSIBILITY — REDUCED MOTION
      ========================================================================== */
   
   @media (prefers-reduced-motion: reduce) {
       .fh-header--hero,
       .fh-header--ghost,
       .fh-flyout-inner,
       .fh-flyout-tier,
       #fh-flyout-overlay,
       .fh-cta-dropdown,
       .fh-nav-list > li,
       .fh-cta-primary {
           transition: none !important;
           animation: none !important;
       }
   
       .fh-featured-menu .fh-featured-item a::after {
           transition: none !important;
       }
   }
   
   /* ==========================================================================
      SKIN STATE — Glass Hero Header (added Chunk 11.R3)
      Skin class set by layout-flyout-header.php on #masthead-fh-hero.
      CSS vars set by the inline CSS builder on .layout-flyout-header.
      ========================================================================== */
   
   .fh-header--hero.skin--light {
       background-color: transparent !important;
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
       color: var(--fh-text-glass, #1a1a1a);
   }
   .fh-header--hero.skin--light::before {
       background-color: var(--fh-bg-glass, rgba(255,255,255,0.15));
       backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
       -webkit-backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
   }
   
   .fh-header--hero.skin--dark {
       background-color: transparent !important;
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
       color: var(--fh-text-glass-dark, #f8f7f2);
   }
   .fh-header--hero.skin--dark::before {
       background-color: var(--fh-bg-glass-dark, rgba(0,0,0,0.75));
       backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
       -webkit-backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
   }
   
   .fh-header--hero.skin--light .fh-burger-icon span {
       background-color: var(--fh-text-glass, #1a1a1a);
   }
   
   .fh-header--hero.skin--dark .fh-burger-icon span {
       background-color: var(--fh-text-glass-dark, #f8f7f2);
   }
   
   /* CTA primary — glass state base colors */
   .fh-header--hero.skin--light .fh-cta-primary {
       color: var(--fh-cta-text, #1a1a1a);
       background-color: var(--fh-cta-bg, transparent);
       border-color: var(--fh-cta-border, #1a1a1a);
   }
   
   .fh-header--hero.skin--dark .fh-cta-primary {
       color: var(--fh-cta-text-dark, #f8f7f2);
       background-color: var(--fh-cta-bg-dark, transparent);
       border-color: var(--fh-cta-border-dark, #f8f7f2);
   }
   
   /* CTA primary — glass state hover (non-animated fallback; animation CSS from inline builder overrides) */
   .fh-header--hero.skin--light .fh-cta-primary:hover,
   .fh-header--hero.skin--light .fh-cta-group:hover .fh-cta-primary {
       color: var(--fh-cta-text-hover, #f8f7f2);
       background-color: var(--fh-cta-bg-hover, #1a1a1a);
       border-color: var(--fh-cta-border-hover, #1a1a1a);
   }
   
   .fh-header--hero.skin--dark .fh-cta-primary:hover,
   .fh-header--hero.skin--dark .fh-cta-group:hover .fh-cta-primary {
       color: var(--fh-cta-text-dark-hover, #1a1a1a);
       background-color: var(--fh-cta-bg-dark-hover, #f8f7f2);
       border-color: var(--fh-cta-border-dark-hover, #f8f7f2);
   }
   
   /* ==========================================================================
      DROPDOWN ITEM — Per-Item Skin-State Color Vars (added Chunk 11.R3)
      --fh-cdi-gl-* / --fh-cdi-gd-* / --fh-cdi-s-* set via inline style
      on each item element. Falls back to global CTA vars if not set.
      ========================================================================== */
   
   .fh-header--hero.skin--light .fh-cta-dropdown-item {
       color: var(--fh-cdi-gl-text, var(--fh-cta-text, #1a1a1a));
       background-color: var(--fh-cdi-gl-bg, var(--fh-cta-bg, transparent));
       border-color: var(--fh-cdi-gl-border, var(--fh-cta-border, #1a1a1a));
   }
   
   .fh-header--hero.skin--light .fh-cta-dropdown-item:hover {
       color: var(--fh-cdi-gl-text-h, var(--fh-cta-text-hover, #f8f7f2));
       background-color: var(--fh-cdi-gl-bg-h, var(--fh-cta-bg-hover, #1a1a1a));
       border-color: var(--fh-cdi-gl-border-h, var(--fh-cta-border-hover, #1a1a1a));
   }
   
   .fh-header--hero.skin--dark .fh-cta-dropdown-item {
       color: var(--fh-cdi-gd-text, var(--fh-cta-text-dark, #f8f7f2));
       background-color: var(--fh-cdi-gd-bg, var(--fh-cta-bg-dark, transparent));
       border-color: var(--fh-cdi-gd-border, var(--fh-cta-border-dark, #f8f7f2));
   }
   
   .fh-header--hero.skin--dark .fh-cta-dropdown-item:hover {
       color: var(--fh-cdi-gd-text-h, var(--fh-cta-text-dark-hover, #1a1a1a));
       background-color: var(--fh-cdi-gd-bg-h, var(--fh-cta-bg-dark-hover, #f8f7f2));
       border-color: var(--fh-cdi-gd-border-h, var(--fh-cta-border-dark-hover, #f8f7f2));
   }
   
   .fh-header--ghost .fh-cta-dropdown-item {
       color: var(--fh-cdi-s-text, var(--fh-cta-sticky-text, #f8f7f2));
       background-color: var(--fh-cdi-s-bg, var(--fh-cta-sticky-bg, transparent));
       border-color: var(--fh-cdi-s-border, var(--fh-cta-sticky-border, #f8f7f2));
   }
   
   .fh-header--ghost .fh-cta-dropdown-item:hover {
       color: var(--fh-cdi-s-text-h, var(--fh-cta-sticky-text-hover, #1a1a1a));
       background-color: var(--fh-cdi-s-bg-h, var(--fh-cta-sticky-bg-hover, #f8f7f2));
       border-color: var(--fh-cdi-s-border-h, var(--fh-cta-sticky-border-hover, #f8f7f2));
   }
   
   /* ==========================================================================
      MOBILE DROPDOWN SKIN STATES
      ========================================================================== */
   
   @media (max-width: 767px) {
       .fh-header--hero.skin--light .fh-cta-dropdown {
           background-color: var(--fh-bg-glass, rgba(255,255,255,0.15));
           backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
           -webkit-backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
       }
   
       .fh-header--hero.skin--dark .fh-cta-dropdown {
           background-color: var(--fh-bg-glass-dark, rgba(0,0,0,0.75));
           backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
           -webkit-backdrop-filter: blur(var(--fh-backdrop-blur, 8px));
       }
   
       .fh-header--ghost .fh-cta-dropdown {
           background-color: var(--fh-bg-sticky, #1a1a1a);
           backdrop-filter: none;
           -webkit-backdrop-filter: none;
       }
   }