/* spintech-child — header chrome
 * Site renders with body.header-nav-white. We override that scope so the
 * navigation bar reads as paper + hairline + mono uppercase nav with gold
 * underline-on-hover. Specificity matched to parent rules.
 */

/* ---------- Top contact strip (.header-above-bar) ---------- */
.header-above-bar {
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.header-above-bar a {
  color: var(--paper);
  transition: color var(--dur-fast) var(--ease-standard);
}
.header-above-bar a:hover,
.header-above-bar a:focus {
  color: var(--gold);
}
.header-above-bar .header-above-btn {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Theme-aware logo swap ---------- */
.custom-logo-link {
  display: inline-block;
}
.logo .custom-logo-dark {
  display: none;
}
[data-theme="dark"] .logo .custom-logo:not(.custom-logo-dark) {
  display: none;
}
[data-theme="dark"] .logo .custom-logo-dark {
  display: inline-block;
}

/* ---------- Theme toggle strip (injected by theme-toggle.js) ---------- *
 * Editorial three-state switch. The Spintech parent's .header-above-bar
 * is an off-canvas panel (top:-250%), not a visible strip — so we build
 * our own .ct-theme-strip and insert it before the main header. Thin
 * navy bar, mono-uppercase labels right-aligned, gold active state with
 * a 1px hairline underline. Selected state has visual weight without
 * size change so the strip never reflows when toggled.
 */
.ct-theme-strip {
  background: var(--navy);
  color: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  position: relative;
  z-index: 5;
}
.ct-theme-strip-inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 28px;
}
.theme-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.theme-toggle-sep {
  color: var(--paper);
  opacity: 0.35;
  font-size: 10px;
  user-select: none;
}
.theme-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin: 0;
  color: var(--paper);
  opacity: 0.6;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  position: relative;
  transition:
    color var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
  opacity: 1;
  color: var(--gold);
  outline: none;
}
.theme-toggle-btn[aria-pressed="true"] {
  opacity: 1;
  color: var(--gold);
}
.theme-toggle-btn[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

@media (max-width: 560px) {
  .ct-theme-strip-inner {
    padding: 6px 16px;
  }
}

/* ---------- Main navigation bar ---------- */
.header-nav-white .main-navigation {
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* Default nav link (idle state). Match parent's exact selector chain so
 * specificity ties cleanly and the cascade picks the later rule (ours). */
.header-nav-white
  .main-navbar:not(.breadcrumb-menu)
  .main-menu > li.menu-item:not(.focus):not(.active):not(:hover)
  > a:not(:focus):not(:hover) {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* All nav links — common typography (covers hover/active too) */
.main-navbar .main-menu > li.menu-item > a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-color var(--dur-fast) var(--ease-standard);
}

/* Hover/focus/active — keep text ink, add gold underline */
.main-navbar .main-menu > li:hover > a,
.main-navbar .main-menu > li.focus > a,
.main-navbar .main-menu .menu-item.active > a,
.main-navbar .main-menu > li.current-menu-item > a,
.main-navbar .main-menu > li.current-menu-parent > a,
.main-navbar .main-menu > li.current-menu-ancestor > a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

/* ---------- Dropdowns ---------- */
.main-menu .dropdown-menu {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: 0 8px 24px -16px var(--shadow-tint);
  padding: 8px 0;
}
.main-menu .dropdown-menu .menu-item > a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding: 10px 18px;
  text-decoration: none;
}
.main-menu .dropdown-menu .menu-item > a:hover,
.main-menu .dropdown-menu .menu-item > a:focus,
.main-menu .dropdown-menu .menu-item.current-menu-item > a {
  color: var(--ink) !important;
  background: var(--paper-deep);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ---------- Right-side block (search/cart/contact) ---------- */
.header-nav-white .main-navigation-area .contact-info .title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.header-nav-white .main-navigation-area .contact-info .text {
  color: var(--navy);
  font-weight: 600;
}
.header-nav-white .main-header .header-search-toggle,
.header-nav-white .cart-icon-wrap {
  color: var(--ink);
}

/* ---------- Mobile nav ---------- */
.header-nav-white .main-mobile-nav {
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-nav-white .menu-collapsed {
  border-color: var(--ink);
  color: var(--ink);
}
.hamburger-menu .menu-collapsed,
.hamburger-menu .menu-collapsed:before,
.hamburger-menu .menu-collapsed:after {
  background-color: var(--ink);
}

/* Mobile menu items inside the slide-out / collapsed wrap */
.menu-collapse-wrap .menu-item > a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Sticky header refinement ---------- */
.main-navigation.is-sticky-on,
.main-mobile-nav.is-sticky-on {
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 8px 24px -20px var(--shadow-tint);
}