/**
 * Sticky two-tier header — MOBILE only.
 * Desktop must not inherit max-height / collapse rules: theme sets
 * --mobile-header-navigation-height: 0px on PC, which would clip .nav-content-bc.
 *
 *   - .layout-header-holder-bc → position:sticky; top:0
 *   - .hdr-main-content-bc     → always visible (logo / auth / toggle)
 *   - .hdr-navigation-scrollable-bc-holder / .nav-content-bc → hide on scroll-down,
 *     show on scroll-up via html.header-nav-collapsed
 */

/* Whole header block sticks with document flow (mobile) */
html.is-mobile .layout-header-holder-bc {
  position: sticky !important;
  top: 0 !important;
  transition:
    min-height var(--default-transition-duration, 0.24s) ease,
    height var(--default-transition-duration, 0.24s) ease;
}

/* Break theme mobile fixed shell — header scrolls/sticks with page */
html.is-mobile .layout-header-holder-bc > .header-bc,
html.is-mobile .layout-header-holder-bc .header-bc {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  transition: min-height var(--default-transition-duration, 0.24s) ease;
}

/* Logo row always above collapsing nav */
html.is-mobile .layout-header-holder-bc .hdr-main-content-bc {
  position: relative;
  z-index: 3;
}

/* Nav strip — animate box collapse */
html.is-mobile .layout-header-holder-bc .hdr-navigation-scrollable-bc-holder,
html.is-mobile .layout-header-holder-bc .nav-content-bc {
  max-height: var(--mobile-header-navigation-height, 48px);
  transform-origin: top center;
  transition:
    max-height var(--default-transition-duration, 0.24s) ease,
    opacity var(--default-transition-duration, 0.24s) ease,
    margin var(--default-transition-duration, 0.24s) ease,
    padding var(--default-transition-duration, 0.24s) ease;
  will-change: max-height, opacity;
}

/* Collapse nav out of flow + shrink sticky shell to logo row only */
html.is-mobile.header-nav-collapsed .layout-header-holder-bc {
  height: var(--mobile-header-main-section-height, 72px) !important;
  min-height: var(--mobile-header-main-section-height, 72px) !important;
}

html.is-mobile.header-nav-collapsed .layout-header-holder-bc > .header-bc,
html.is-mobile.header-nav-collapsed .layout-header-holder-bc .header-bc {
  min-height: var(--mobile-header-main-section-height, 72px) !important;
  height: auto !important;
}

html.is-mobile.header-nav-collapsed .layout-header-holder-bc .hdr-navigation-scrollable-bc-holder,
html.is-mobile.header-nav-collapsed .layout-header-holder-bc .nav-content-bc {
  max-height: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  overflow: hidden !important;
  border-width: 0 !important;
  pointer-events: none;
  visibility: hidden;
  transform: none !important;
}

html.is-mobile.header-nav-collapsed .layout-header-holder-bc .hdr-navigation-scrollable-bc-holder .hdr-navigation-scrollable-bc,
html.is-mobile.header-nav-collapsed .layout-header-holder-bc .hdr-navigation-scrollable-bc {
  max-height: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
}

/*
 * Side menu open: pin header to viewport top (fixed) and keep full logo+nav
 * expanded. Soft-sheet padding uses logo clearance (aside-menu-content.css).
 */
html.is-mobile .layout-bc.navigation-is-visible .layout-header-holder-bc,
html.is-mobile .layout-bc.generic-navigation-is-visible .layout-header-holder-bc {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--mobile-header-full-height, 100px) !important;
  min-height: var(--mobile-header-full-height, 100px) !important;
}

html.is-mobile.header-nav-collapsed .layout-bc.navigation-is-visible .layout-header-holder-bc,
html.is-mobile.header-nav-collapsed .layout-bc.generic-navigation-is-visible .layout-header-holder-bc {
  height: var(--mobile-header-full-height, 100px) !important;
  min-height: var(--mobile-header-full-height, 100px) !important;
}

html.is-mobile.header-nav-collapsed .layout-bc.navigation-is-visible .layout-header-holder-bc > .header-bc,
html.is-mobile.header-nav-collapsed .layout-bc.generic-navigation-is-visible .layout-header-holder-bc > .header-bc,
html.is-mobile.header-nav-collapsed .layout-bc.navigation-is-visible .layout-header-holder-bc .header-bc,
html.is-mobile.header-nav-collapsed .layout-bc.generic-navigation-is-visible .layout-header-holder-bc .header-bc {
  min-height: var(--mobile-header-full-height, 100px) !important;
  height: auto !important;
}

html.is-mobile.header-nav-collapsed .layout-bc.navigation-is-visible .layout-header-holder-bc .hdr-navigation-scrollable-bc-holder,
html.is-mobile.header-nav-collapsed .layout-bc.generic-navigation-is-visible .layout-header-holder-bc .hdr-navigation-scrollable-bc-holder,
html.is-mobile.header-nav-collapsed .layout-bc.navigation-is-visible .layout-header-holder-bc .nav-content-bc,
html.is-mobile.header-nav-collapsed .layout-bc.generic-navigation-is-visible .layout-header-holder-bc .nav-content-bc {
  max-height: var(--mobile-header-navigation-height, 48px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border-width: 0 !important;
  transform: none !important;
}

html.is-mobile.header-nav-collapsed .layout-bc.navigation-is-visible .layout-header-holder-bc .hdr-navigation-scrollable-bc,
html.is-mobile.header-nav-collapsed .layout-bc.generic-navigation-is-visible .layout-header-holder-bc .hdr-navigation-scrollable-bc {
  max-height: var(--mobile-header-navigation-height, 48px) !important;
  height: var(--mobile-header-navigation-height, 48px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html.is-mobile .layout-header-holder-bc,
  html.is-mobile .layout-header-holder-bc > .header-bc,
  html.is-mobile .layout-header-holder-bc .header-bc,
  html.is-mobile .layout-header-holder-bc .hdr-navigation-scrollable-bc-holder,
  html.is-mobile .layout-header-holder-bc .nav-content-bc {
    transition: none !important;
  }
}