/* =========================================
   HEADER — BRISTLE DNA
========================================= */

.hero-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  pointer-events: none;
  transform: translateY(0);

  transition:
    transform var(--duration-header) var(--ease-header),
    background-color var(--duration-slow) var(--ease-smooth),
    box-shadow var(--duration-slow) var(--ease-smooth);
}

.hero-header.is-menu-open,
.hero-header.is-cart-open,
.hero-header.is-search-open {
  transform: translateY(0) !important;
}

.hero-header.is-hidden {
  transform: translateY(-100%);
}

.hero-header.is-solid {
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-xs);
}

.hero-header.is-blur {
  background: var(--glass-header);
}

.hero-header.is-solid .hero-header__link,
.hero-header.is-solid .hero-icon-btn {
  color: var(--color-text-primary);
}

.hero-header.is-solid .hero-header__link::after {
  background: var(--color-text-primary);
}

.hero-header.is-solid .hero-mobile-menu-btn span {
  background: currentColor;
}

/* ================= INNER ================= */

.hero-header__inner {
  position: relative;
  z-index: var(--z-header);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);

  min-height: var(--header-height);
  padding: 0 var(--panel-padding-x);
}

/* ================= NAV ================= */

.hero-header__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  pointer-events: auto;
}

.hero-header__nav--left {
  justify-self: start;
}

.hero-header__nav--right {
  justify-self: end;
}

/* ================= BRAND ================= */

.hero-header__brand {
  justify-self: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  pointer-events: auto;
  transform: translateY(-2px);
}

.hero-header__brand-image {
  display: block;
  height: var(--header-logo-height);
  width: auto;
}

/* ================= LINK ================= */

.hero-header__link {
  position: relative;

  display: inline-flex;
  align-items: center;
  min-height: var(--size-sm);

  color: var(--color-text-inverse);
  background: transparent;
  border: var(--border-0);
  padding: var(--space-0);

  font-size: var(--text-fluid-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;

  opacity: var(--opacity-header-link);
  cursor: pointer;

  transition:
    opacity var(--duration-normal) var(--ease-smooth),
    color var(--duration-normal) var(--ease-smooth);
}

.hero-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nav-underline-offset);

  height: var(--border-1);
  background: var(--color-white-strong);

  transform: scaleX(0);
  transform-origin: center;

  transition: transform var(--duration-normal) var(--ease-smooth);
}

.hero-header__link:hover,
.hero-header__link.is-active {
  opacity: 1;
}

.hero-header__link:hover::after,
.hero-header__link.is-active::after {
  transform: scaleX(1);
}

/* ================= MOBILE HEADER AREAS ================= */

.hero-header__mobile-left,
.hero-header__mobile-right {
  display: none;
  pointer-events: auto;
}

/* ================= ICON BUTTON ================= */

.hero-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--header-icon-btn-size);
  height: var(--header-icon-btn-size);

  color: var(--color-text-inverse);
  background: transparent;
  border: var(--border-0);
  padding: var(--space-0);

  cursor: pointer;
}

.hero-icon-btn svg {
  width: var(--header-icon-size);
  height: var(--header-icon-size);
}

.hero-mobile-menu-btn {
  flex-direction: column;
  gap: var(--header-menu-line-gap);
}

.hero-mobile-menu-btn span {
  display: block;
  width: var(--header-menu-line-width);
  height: var(--border-1);
  background: currentColor;
}

/* =========================================
   DESKTOP NAV OVERLAY
========================================= */

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: calc(var(--z-header) - 1);
  pointer-events: none;
}

.nav-overlay.is-open {
  pointer-events: auto;
}

/* ================= BACKDROP ================= */

.nav-overlay__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  visibility: hidden;
  pointer-events: none;
  opacity: 0;

  background: var(--glass-dark);
  backdrop-filter: var(--backdrop-blur-lg);
  -webkit-backdrop-filter: var(--backdrop-blur-lg);

  transition: opacity var(--duration-slow) var(--ease-smooth);
}

.nav-overlay.is-open .nav-overlay__backdrop {
  visibility: visible;
  opacity: 1;
}

.nav-overlay:has(.nav-overlay__panel--large.is-active) .nav-overlay__backdrop {
  height: var(--panel-height-large);
}

/* ================= PANEL ================= */

.nav-overlay__panel {
  position: absolute;
  inset: 0 0 auto 0;

  visibility: hidden;
  pointer-events: none;
  opacity: 0;

  transform: translateY(calc(var(--space-4) * -1));

  transition:
    opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth),
    visibility 0s linear var(--duration-slow);
}

.nav-overlay__panel.is-active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;

  transform: translateY(0);

  transition:
    opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth),
    visibility 0s linear 0s;
}

.nav-overlay__panel--large {
  top: 0;
  bottom: auto;
  height: auto;
  min-height: var(--panel-height-large);
}

.nav-overlay__panel--search {
  top: 0;
  bottom: auto;

  height: var(--panel-height-search);
  background: var(--glass-dark);

  backdrop-filter: var(--backdrop-blur-lg);
  -webkit-backdrop-filter: var(--backdrop-blur-lg);
}

/* ================= PANEL INNER ================= */

.nav-overlay__panel-inner {
  width: 100%;
  padding:
    calc(var(--header-height) + var(--space-8))
    var(--panel-padding-x)
    var(--space-8);

  background: transparent;
}

.nav-overlay__panel--large .nav-overlay__panel-inner {
  min-height: var(--panel-height-large);
}

.nav-overlay__panel-inner--search {
  padding-top: calc(var(--header-height) + var(--space-8));
}

.nav-overlay__panel-inner,
.nav-overlay__panel-inner--search {
  background: transparent;
}

/* ================= OVERLAY MENU ================= */

.nav-overlay__menu-col {
  display: grid;
  align-content: start;
  justify-content: start;
  gap: var(--space-5);
}

.nav-overlay__menu-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;

  color: var(--color-white-strong);

  font-size: var(--text-fluid-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;

  transition:
    opacity var(--duration-normal) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
}

.nav-overlay__menu-link:hover {
  opacity: var(--opacity-disabled);
}

/* ================= SEARCH ================= */

.nav-search {
  width: min(100%, var(--nav-search-width));
  margin-left: auto;
}

.nav-search__field {
  position: relative;

  display: flex;
  align-items: center;

  border-bottom: var(--border-1) solid var(--color-border-inverse);
  padding-bottom: var(--space-3);
}

.nav-search__input {
  flex: 1;
  min-width: var(--space-0);

  color: var(--color-text-inverse);
  background: transparent;
  border: var(--border-0);
  outline: none;
  box-shadow: none;
  padding: var(--space-0);

  font-size: var(--text-fluid-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.nav-search__input::placeholder {
  color: var(--color-border-inverse);
  opacity: 1;

  font-size: var(--text-fluid-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.nav-search__clear {
  position: absolute;
  right: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--size-2xs);
  height: var(--size-2xs);

  color: var(--color-white-soft);
  background: transparent;
  border: var(--border-0);
  padding: var(--space-0);

  font-size: var(--text-xs);
  line-height: 1;

  cursor: pointer;
}

/* =========================================
   DESKTOP NAV OPEN — FORCE INVERSE HEADER
========================================= */

.hero-header.is-blur .hero-header__link,
.hero-header.is-blur .hero-icon-btn {
  color: var(--color-text-inverse);
}

.hero-header.is-blur .hero-header__link::after {
  background: var(--color-white-strong);
}

.hero-header.is-blur .hero-mobile-menu-btn span {
  background: currentColor;
}

/* =========================================
   LANGUAGE SWITCHER
========================================= */

.hero-header__language {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: auto;
}

.hero-header__language .hero-header__link::after {
  display: none;
}

.hero-header__language-sep {
  color: var(--color-text-inverse);
  opacity: var(--opacity-subtle);

  font-size: var(--text-fluid-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
}

.hero-header.is-solid .hero-header__language-sep {
  color: var(--color-text-primary);
}

.hero-header.is-blur .hero-header__language-sep {
  color: var(--color-text-inverse);
}

.hero-header__language .hero-header__link.is-active {
  color: var(--color-accent-soft) !important;
  opacity: 1;
  font-weight: var(--font-weight-semi-bold);
}

.hero-header__language .hero-header__link:not(.is-active):hover {
  opacity: var(--opacity-disabled);
}

/* =========================================
   LIGHT PAGE HEADER
========================================= */

.page-light-header .hero-header:not(.is-blur) .hero-header__link,
.page-light-header .hero-header:not(.is-blur) .hero-icon-btn {
  color: var(--color-text-primary);
}

.page-light-header .hero-header:not(.is-blur) .hero-header__link::after {
  background: var(--color-text-primary);
}

.page-light-header .hero-header:not(.is-blur) .hero-mobile-menu-btn span {
  background: currentColor;
}

.page-light-header .hero-header.is-blur .hero-header__link,
.page-light-header .hero-header.is-blur .hero-icon-btn {
  color: var(--color-text-inverse);
}

.page-light-header .hero-header.is-blur .hero-header__link::after {
  background: var(--color-white-strong);
}

.page-light-header .hero-header:not(.is-blur) .hero-header__language-sep {
  color: var(--color-text-primary);
  opacity: var(--opacity-subtle);
}

.page-light-header .hero-header.is-blur .hero-header__language-sep {
  color: var(--color-text-inverse);
  opacity: var(--opacity-subtle);
}

.page-light-header .hero-header__brand,
.page-light-header .hero-header.is-solid .hero-header__brand,
.page-light-header .hero-header.is-blur .hero-header__brand {
  transform: translateY(-2px);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
  .hero-header__inner {
    padding: 0 var(--space-6);
  }

  .hero-header__nav {
    gap: var(--space-4);
  }

  .nav-overlay__panel-inner {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (max-width: 768px) {
  .hero-header__inner {
    min-height: var(--header-height-mobile);
    padding: 0 var(--panel-padding-x-mobile);
    grid-template-columns: 1fr auto 1fr;
  }

  .hero-header__nav {
    display: none;
  }

  .hero-header__mobile-left,
  .hero-header__mobile-right {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .hero-header__mobile-left {
    justify-self: start;
  }

  .hero-header__mobile-right {
    justify-self: end;
  }

  .hero-header__brand {
    justify-self: center;
    margin-left: 0;
    transform: translateY(-1px);
  }

  .hero-header__brand-image {
    height: var(--header-logo-height-mobile);
  }

  .nav-overlay {
    display: none;
  }

  .hero-header.is-blur {
    background: var(--glass-dark);
    backdrop-filter: var(--backdrop-blur-lg);
    -webkit-backdrop-filter: var(--backdrop-blur-lg);
  }

  .hero-header.is-search-open {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-light-header .hero-header__brand,
  .page-light-header .hero-header.is-solid .hero-header__brand,
  .page-light-header .hero-header.is-blur .hero-header__brand {
    transform: translateY(-1px);
  }
}