/* Tazers header + mobile drawer. See docs/design-plan.md §4.1. */

/* Header sits in NORMAL DOCUMENT FLOW by default. Opaque always - so the red
   hero marquee never overlaps it. When the user scrolls past
   data-tz-float-threshold (~0.55 of viewport height), JS adds .is-floating
   which switches the same header to position:fixed and slides it in from
   above. A sibling .tz-header-spacer fills the gap so body content doesn't
   jump when the position swaps. */
.tz-header {
  position: relative;
  z-index: 50;
  padding: 14px 0;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--tz-cream);
  border-bottom: 1px solid rgba(229, 26, 26, 0.4);
  min-height: var(--tz-header-height);
}

/* Floating state - fixed at top, animates in from above */
.tz-header.is-floating {
  position: fixed;
  inset: 0 0 auto 0;
  animation: tz-header-slide-in var(--dur-base) var(--ease-out) forwards;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.tz-header.is-floating.is-leaving {
  animation: tz-header-slide-out var(--dur-base) var(--ease-out) forwards;
}

@keyframes tz-header-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes tz-header-slide-out {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-header.is-floating,
  .tz-header.is-floating.is-leaving {
    animation-duration: 0.01ms;
  }
}

/* Spacer - 0 height until JS activates it (when header goes fixed).
   Replaces the in-flow header's height so body content doesn't jump. */
.tz-header-spacer {
  height: 0;
  width: 100%;
  flex: none;
}
.tz-header-spacer.is-active {
  height: var(--tz-header-height);
}

.tz-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Tablet + mobile: collapse to simple flex with logo left, icons right.
   No dead 1fr column - keeps the icon cluster glued to the right edge. */
@media (max-width: 1023px) {
  .tz-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
}

.tz-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-height: 28px;
  flex-shrink: 1;        /* allow brand to shrink on small screens so burger never gets pushed off */
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 640px) {
  .tz-header__brand { max-width: 50vw; }
}
/* Two-class selector + explicit max-width:none + max-height:none lifts the
   specificity above WooCommerce's .woocommerce img {height:auto; max-width:100%}
   which would otherwise blow the logo up to its native size on shop pages. */
.tz-header .tz-header__logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;       /* keep the logo inside its brand slot */
  max-height: 28px;
  filter: drop-shadow(0 0 12px rgba(229,26,26,0.35));
  object-fit: contain;
}
/* Mobile - scale down the logo so it never crowds the burger */
@media (max-width: 640px) {
  .tz-header .tz-header__logo { height: 22px; max-height: 22px; }
}
@media (max-width: 380px) {
  .tz-header .tz-header__logo { height: 18px; max-height: 18px; }
}
.tz-header__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--tz-red);
  letter-spacing: -0.02em;
}

/* Desktop nav */
.tz-nav { display: none; justify-self: center; }
@media (min-width: 1024px) { .tz-nav--desktop { display: block; } }

.tz-nav__list {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
.tz-nav__list li { margin: 0; }
.tz-nav__list a {
  display: inline-block;
  padding: 8px 4px;
  color: var(--tz-cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.tz-nav__list a::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 2px;
  height: 1px;
  background: var(--tz-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.tz-nav__list a:hover { color: var(--tz-red); }
.tz-nav__list a:hover::after,
.tz-nav__list .current-menu-item > a::after,
.tz-nav__list .current_page_item > a::after { transform: scaleX(1); }

/* Actions cluster */
.tz-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tz-header__region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(245, 239, 226, 0.25);
  color: var(--tz-cream);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.tz-header__region:hover { border-color: var(--tz-red); }
.tz-header__region-code { opacity: 0.85; }

.tz-header__cart,
.tz-header__account {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--tz-cream);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.tz-header__cart:hover,
.tz-header__account:hover { color: var(--tz-red); }
.tz-header__cart-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: var(--tz-red);
  color: var(--tz-cream);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Hamburger - explicitly override Hello Elementor's button focus/hover styling
   (which uses a pink accent that bleeds into our burger if not killed). */
.tz-header__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px;
  background: transparent !important;
  border: 1px solid rgba(245, 239, 226, 0.25) !important;
  color: var(--tz-cream) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out) !important;
}
.tz-header__burger:hover,
.tz-header__burger:focus,
.tz-header__burger:focus-visible,
.tz-header__burger:active,
.tz-header__burger[aria-expanded="true"] {
  border-color: var(--tz-red) !important;
  background: transparent !important;
  outline: 2px solid var(--tz-red) !important;
  outline-offset: 2px !important;
  color: var(--tz-red) !important;
}
.tz-header__burger span {
  display: block;
  height: 2px; width: 18px; margin: 0 auto;
  background: var(--tz-cream);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.tz-header__burger:hover span,
.tz-header__burger:focus span,
.tz-header__burger:focus-visible span,
.tz-header__burger[aria-expanded="true"] span { background: var(--tz-red); }
@media (min-width: 1024px) { .tz-header__burger { display: none; } }
@media (max-width: 1023px) { .tz-header__region-code { display: none; } }

/* Mobile drawer */
.tz-mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 380px);
  background: var(--tz-black);
  color: var(--tz-cream);
  z-index: 60;
  padding: 64px 28px 32px;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--tz-red);
}
.tz-mobile-nav.is-open { transform: translateX(0); }
.tz-mobile-nav[aria-hidden="false"] { transform: translateX(0); }

/* Same treatment as the hamburger - hard-override Hello Elementor's button
   focus pink. */
.tz-mobile-nav__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  background: transparent !important;
  border: 1px solid rgba(245,239,226,0.25) !important;
  color: var(--tz-cream) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out) !important;
}
.tz-mobile-nav__close:hover,
.tz-mobile-nav__close:focus,
.tz-mobile-nav__close:focus-visible,
.tz-mobile-nav__close:active {
  background: transparent !important;
  border-color: var(--tz-red) !important;
  color: var(--tz-red) !important;
  outline: 2px solid var(--tz-red) !important;
  outline-offset: 2px !important;
}

.tz-mobile-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.tz-mobile-nav__list a {
  display: block;
  padding: 14px 4px;
  color: var(--tz-cream);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(245,239,226,0.08);
}
.tz-mobile-nav__list a:hover,
.tz-mobile-nav__list .current-menu-item > a,
.tz-mobile-nav__list .current_page_item > a { color: var(--tz-red); }

.tz-mobile-nav__account {
  display: inline-block;
  margin-top: var(--space-5);
  padding: 12px 16px;
  border: 1px solid rgba(245,239,226,0.3);
  color: var(--tz-cream);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tz-mobile-nav__account:hover {
  background: var(--tz-red);
  border-color: var(--tz-red);
  color: var(--tz-cream);
}

.tz-mobile-nav__foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(245,239,226,0.08);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--tz-red);
}

/* Body lock when drawer open */
body.tz-mobile-nav-open { overflow: hidden; }