/* =====================================================
   DUSH-HEADER.css — LUXE Fade Header (Astra) — FINAL
   - Fixed header (always on top)
   - Hero overlay fade ONLY on .home (via --hero-header-fade, JS)
   - After scroll: neutral cream + blur + shadow + dark links (body.has-scrolled)
   - No overlap: page offset via #page margin-top
   - MENU: no fill. Active = bold + underline
   - Readable on hero: subtle text-shadow
   - Micro-motion: smooth logo/menu settle on scroll
===================================================== */

:root{
  --header-cream: rgba(248,248,247,.94);
  --header-dark:  rgba(25,18,14,.88);
  --header-light: rgba(255,255,255,.92);

  /* JS drives (1 → 0) */
  --hero-header-fade: 1;
}

/* =====================================================
   0) Offset page under fixed header
===================================================== */
#page{ margin-top: 82px; }
@media (max-width: 921px){ #page{ margin-top: 72px; } }

/* =====================================================
   1) Fixed header base (Astra-safe)
===================================================== */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  padding: 10px 0 !important;

  transition:
    background-color .35s ease,
    box-shadow .35s ease,
    backdrop-filter .35s ease,
    padding .35s ease;
}

/* Astra internals cleanup */
.site-header .ast-primary-header-bar,
.site-header .ast-primary-header-bar-wrap{
  background: transparent !important;
  border: 0 !important;
}
.site-header .ast-builder-grid-row{ min-height: unset !important; }
.site-header .ast-primary-header-bar{ padding-top: 0 !important; padding-bottom: 0 !important; }
.site-header .ast-builder-layout-element{ display:flex; align-items:center; }

/* Logo sizing */
.site-header .site-logo-img,
.site-header .custom-logo-link img{
  max-height: 46px;
  width: auto;
}
@media (max-width: 921px){
  .site-header .site-logo-img,
  .site-header .custom-logo-link img{ max-height: 40px; }
}

/* =====================================================
   2) Links default
===================================================== */
.site-header a,
.site-header .menu a{
  color: var(--header-light) !important;
  opacity: .90;
  transition: color .22s ease, opacity .22s ease;
}
.site-header a:hover{ opacity: 1; }

/* =====================================================
   3) Hero overlay (ONLY home)
===================================================== */
.home .site-header{ background: transparent !important; }

.home .site-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.18) 50%,
    rgba(0,0,0,0) 100%
  );

  opacity: var(--hero-header-fade);
  transition: opacity .25s ease;
  z-index: 0;
}

/* keep header content above overlay */
.site-header > *{
  position: relative;
  z-index: 1;
}

/* =====================================================
   4) After scroll state
===================================================== */
body.has-scrolled .site-header{
  background: var(--header-cream) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
  padding: 8px 0 !important;
}

/* Dark links after scroll */
body.has-scrolled .site-header a,
body.has-scrolled .site-header .menu a{
  color: var(--header-dark) !important;
  opacity: 1;
}

/* Mobile: no blur */
@media (max-width: 921px){
  body.has-scrolled .site-header{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.96) !important;
  }
}

/* =====================================================
   5) MENU — no fill, readable, premium underline
===================================================== */

/* remove any fills/borders/shadows */
.main-header-menu > .menu-item > a,
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item.current_page_item > a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* base typography */
.main-header-menu > .menu-item > a{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;

  padding: 12px 14px !important;
  margin: 0 6px !important;

  font-weight: 500;
  opacity: .82;

  position: relative;
  transition:
    opacity .18s ease,
    color .18s ease,
    font-weight .18s ease,
    letter-spacing .22s ease,
    margin .22s ease;
}

/* hero readability */
body:not(.has-scrolled) .main-header-menu > .menu-item > a{
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
body:not(.has-scrolled) .main-header-menu > .menu-item.current-menu-item > a,
body:not(.has-scrolled) .main-header-menu > .menu-item.current_page_item > a{
  color:#fff !important;
}

/* after scroll colors */
body.has-scrolled .main-header-menu > .menu-item > a{
  color: rgba(25,18,14,.78) !important;
  text-shadow: none;
}
body.has-scrolled .main-header-menu > .menu-item.current-menu-item > a,
body.has-scrolled .main-header-menu > .menu-item.current_page_item > a{
  color: rgba(25,18,14,.94) !important;
}

/* hover */
.main-header-menu > .menu-item > a:hover{
  opacity: 1;
}

/* active */
.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item.current_page_item > a{
  opacity: 1;
  font-weight: 700;
}

/* underline */
.main-header-menu > .menu-item > a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: 2px;
  width:0;
  height:2px;
  transform: translateX(-50%);
  transition: width .22s ease, opacity .22s ease;
  opacity:.9;
}
.main-header-menu > .menu-item > a:hover::after{ width: 62%; }
.main-header-menu > .menu-item.current-menu-item > a::after,
.main-header-menu > .menu-item.current_page_item > a::after{ width: 72%; }

body:not(.has-scrolled) .main-header-menu > .menu-item > a::after{
  background: rgba(255,255,255,.95);
}
body.has-scrolled .main-header-menu > .menu-item > a::after{
  background: rgba(25,18,14,.70);
}

/* mobile: tighter so it doesn't wrap */
@media (max-width: 921px){
  .main-header-menu > .menu-item > a{
    margin: 0 4px !important;
    letter-spacing: .10em;
    padding: 12px 10px !important;
  }
}

/* =====================================================
   6) Logo subtle filter on home
===================================================== */
.home .site-header img{
  filter: brightness(1.18) contrast(1.05);
  transition: filter .25s ease, transform .28s ease, max-height .28s ease;
}
body.has-scrolled .site-header img{ filter: none; }

/* =====================================================
   7) Luxury micro-motion on scroll
===================================================== */
.site-header .custom-logo-link img{
  transition: transform .28s ease, max-height .28s ease, filter .25s ease;
  transform-origin: left center;
  will-change: transform;
}

body.has-scrolled .site-header .custom-logo-link img{
  transform: translateY(-1px) scale(.94);
}

/* =====================================================
   FIX — header width/height jump after scroll
===================================================== */

/* ОДИНАКОВАЯ высота всегда */
.site-header,
body.has-scrolled .site-header{
  padding: 10px 0 !important;
}

/* логотип НЕ меняет размер */
.site-header .custom-logo-link img,
body.has-scrolled .site-header .custom-logo-link img{
  max-height: 46px !important;
  transform: none !important;
}

/* меню НЕ двигается */
.main-header-menu > .menu-item > a,
body.has-scrolled .main-header-menu > .menu-item > a{
  margin: 0 6px !important;
  transform: none !important;
}

/* =====================================================
   HARD FIX — Header must NOT change height on scroll
   Astra containers can add min-height/padding → lock it.
===================================================== */

:root{
  --dush-header-h: 78px;        /* desktop */
  --dush-header-h-mobile: 68px; /* mobile */
}

/* 1) фиксируем высоту самой шапки */
.site-header{
  height: var(--dush-header-h) !important;
  box-sizing: border-box !important;
  padding: 0 !important; /* чтобы padding не влиял на высоту */
}

/* 2) все внутренние обёртки Astra растягиваем ровно на высоту хедера */
.site-header .ast-primary-header-bar,
.site-header .ast-primary-header-bar-wrap,
.site-header .ast-builder-grid-row,
.site-header .ast-builder-grid-row-container,
.site-header .ast-container{
  height: 100% !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) выравнивание контента по центру по высоте */
.site-header .ast-container,
.site-header .ast-builder-grid-row{
  display: flex !important;
  align-items: center !important;
}

/* 4) после скролла — НИКАКИХ изменений высоты/паддинга */
body.has-scrolled .site-header{
  height: var(--dush-header-h) !important;
  padding: 0 !important;
}

/* 5) логотип — стабильный, без “усадки” */
.site-header .custom-logo-link img{
  max-height: calc(var(--dush-header-h) - 24px) !important; /* оставляем воздух */
  transform: none !important;
}

/* 6) мобильный размер */
@media (max-width: 921px){
  .site-header{
    height: var(--dush-header-h-mobile) !important;
  }
  body.has-scrolled .site-header{
    height: var(--dush-header-h-mobile) !important;
  }
  .site-header .custom-logo-link img{
    max-height: calc(var(--dush-header-h-mobile) - 22px) !important;
  }
}