/* Albert Lab v148 — collision-free adaptive header.
   This file intentionally loads after the legacy stylesheets. */

:root { --header-live-height: var(--header-h, 72px); }

/* Large desktop: retain the established full header without allowing wrapping. */
@media (min-width: 1500px) {
  .site-header .header-inner {
    flex-wrap: nowrap !important;
  }
  .site-header .main-nav,
  .site-header .nav-group,
  .site-header .utility-controls {
    flex-wrap: nowrap !important;
  }
}

/* Compact desktop: keep every label, but reduce only the chrome around it. */
@media (min-width: 1241px) and (max-width: 1499px) {
  .site-header .header-inner {
    width: calc(100% - 20px) !important;
    min-height: 64px !important;
    gap: .42rem !important;
    flex-wrap: nowrap !important;
  }
  .site-header .brand {
    gap: .46rem !important;
    max-width: 218px !important;
    min-width: 178px !important;
  }
  .site-header .brand-mark {
    height: 40px !important;
  }
  .site-header .brand-wordmark {
    display: grid !important;
    gap: .02rem !important;
    white-space: normal !important;
  }
  .site-header .brand-line-main {
    font-size: .76rem !important;
    line-height: 1.08 !important;
  }
  .site-header .brand-line-sub {
    font-size: .66rem !important;
    line-height: 1.05 !important;
  }
  .site-header .header-actions,
  .site-header .main-nav {
    gap: .34rem !important;
    flex-wrap: nowrap !important;
  }
  .site-header .nav-group-branches { gap: .04rem !important; }
  .site-header .nav-group-site {
    gap: 0 !important;
    padding-left: .48rem !important;
  }
  .site-header .main-nav .nav-branch,
  .site-header .main-nav .nav-site-link {
    padding: .36rem .34rem !important;
    font-size: .70rem !important;
    letter-spacing: 0 !important;
  }
  .site-header .utility-controls { gap: .24rem !important; }
  .site-header .palette-toggle,
  .site-header .mode-toggle,
  .site-header .flag-link {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
  }
  .site-header .header-contact-button {
    min-height: 36px !important;
    padding: .48rem .66rem !important;
    font-size: .70rem !important;
    letter-spacing: .065em !important;
  }
  .site-header .mobile-menu-button { display: none !important; }
}

/* Menu header. This starts before the legacy desktop navigation becomes crowded. */
@media (max-width: 1240px) {
  :root { --header-h: 64px; }

  .site-header {
    z-index: 10000 !important;
  }
  .site-header .header-inner {
    width: calc(100% - 20px) !important;
    min-height: 64px !important;
    margin-inline: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem !important;
  }
  .site-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: min(340px, 42vw) !important;
    gap: .55rem !important;
  }
  .site-header .brand-mark {
    display: block !important;
    width: auto !important;
    height: 42px !important;
    flex: 0 0 auto !important;
  }
  .site-header .brand-wordmark {
    display: grid !important;
    min-width: 0 !important;
    gap: .04rem !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .site-header .brand-line-main,
  .site-header .brand-line-sub {
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .site-header .brand-line-main {
    font-size: clamp(.72rem, 1.45vw, .88rem) !important;
    line-height: 1.08 !important;
  }
  .site-header .brand-line-sub {
    font-size: clamp(.62rem, 1.15vw, .74rem) !important;
    line-height: 1.05 !important;
  }
  .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: .34rem !important;
    margin-left: auto !important;
  }
  .site-header .mobile-menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: .46rem .72rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--surface-strong) 88%, #020712) !important;
    color: var(--ink) !important;
    white-space: nowrap !important;
  }
  html.light-mode .site-header .mobile-menu-button {
    background: rgba(255,255,255,.94) !important;
  }
  .site-header .utility-controls {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: .24rem !important;
    margin-left: 0 !important;
  }
  .site-header .palette-toggle,
  .site-header .mode-toggle,
  .site-header .flag-link {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
  }
  .site-header .header-contact-button {
    min-height: 38px !important;
    padding: .48rem .76rem !important;
    font-size: .72rem !important;
    letter-spacing: .065em !important;
    white-space: nowrap !important;
  }

  .site-header .main-nav {
    position: fixed !important;
    top: calc(var(--header-live-height) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    inset-inline: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - var(--header-live-height) - 18px) !important;
    overflow-y: auto !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: .7rem !important;
    padding: .85rem !important;
    border: 1px solid color-mix(in srgb, #ee7100 35%, var(--line)) !important;
    border-radius: 20px !important;
    background: #030a16 !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
    z-index: 10020 !important;
  }
  html.light-mode .site-header .main-nav {
    background: #fbfdff !important;
  }
  .site-header .main-nav.open {
    display: grid !important;
  }
  .site-header .main-nav .nav-group {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .site-header .main-nav .nav-group-branches {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .38rem !important;
  }
  .site-header .main-nav .nav-group-site {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .28rem .38rem !important;
    margin: 0 !important;
    padding: .72rem 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid color-mix(in srgb, #ee7100 48%, var(--line)) !important;
  }
  .site-header .main-nav .nav-group a {
    width: 100% !important;
    min-width: 0 !important;
    padding: .55rem .42rem !important;
    font-size: .78rem !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

/* Narrow windows: preserve the identity text and shrink controls before hiding anything. */
@media (max-width: 720px) {
  .site-header .header-inner {
    width: calc(100% - 14px) !important;
    gap: .32rem !important;
  }
  .site-header .brand {
    max-width: min(270px, 42vw) !important;
    gap: .38rem !important;
  }
  .site-header .brand-mark { height: 38px !important; }
  .site-header .brand-line-main { font-size: .70rem !important; }
  .site-header .brand-line-sub { font-size: .60rem !important; }
  .site-header .header-actions { gap: .2rem !important; }
  .site-header .mobile-menu-button {
    min-height: 34px !important;
    padding: .4rem .58rem !important;
    font-size: .72rem !important;
  }
  .site-header .palette-toggle,
  .site-header .mode-toggle,
  .site-header .flag-link {
    width: 1.82rem !important;
    height: 1.82rem !important;
    min-width: 1.82rem !important;
  }
  .site-header .header-contact-button {
    min-height: 34px !important;
    padding: .4rem .56rem !important;
    font-size: .66rem !important;
  }
}

@media (max-width: 560px) {
  .site-header .brand {
    max-width: min(205px, 39vw) !important;
  }
  .site-header .brand-mark { height: 35px !important; }
  .site-header .brand-line-main {
    font-size: .64rem !important;
    line-height: 1.02 !important;
  }
  .site-header .brand-line-sub { font-size: .56rem !important; }
  .site-header .palette-toggle { display: none !important; }
  .site-header .header-contact-button {
    padding-inline: .48rem !important;
    letter-spacing: .045em !important;
  }
  .site-header .main-nav .nav-group-site {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  .site-header .header-inner { width: calc(100% - 10px) !important; }
  .site-header .brand { max-width: 142px !important; }
  .site-header .brand-mark { height: 32px !important; }
  .site-header .brand-line-main { font-size: .60rem !important; }
  .site-header .brand-line-sub { font-size: .52rem !important; }
  .site-header .mode-toggle { display: none !important; }
  .site-header .header-contact-button { font-size: .62rem !important; }
}