/*
 * Header: WoodMart's header builder (logo, main menu, cart, burger elements)
 * restyled to design/shop/Main.dc.html (.hdr). The row colour, height and
 * stickiness come from the header "Tepavac" seeded by scripts/shop/layout.php.
 */

/* --- Bar ------------------------------------------------------------------ */
.whb-header {
  box-shadow: var(--tt-header-shadow);
}

.whb-header .container {
  max-width: calc(var(--tt-container-header) + 2 * var(--tt-section-x));
  padding-inline: var(--tt-section-x);
}

.whb-general-header {
  --wd-header-el-color: var(--tt-nav);
  --wd-header-el-color-hover: var(--tt-cream-hi);
}

/* --- Logo ----------------------------------------------------------------- */
.whb-header .site-logo,
.whb-header .wd-logo {
  flex: none;
  max-width: none;
}

.whb-header .wd-logo img {
  height: var(--tt-logo-height);
  width: auto;
  max-height: none;
  padding: 0; /* WoodMart pads the image 5px top and bottom inside its box. */
}

.whb-header .whb-hidden-lg .wd-logo img {
  height: var(--tt-logo-height-mobile);
}

/* --- Main menu ------------------------------------------------------------ */
.whb-header .wd-nav-main {
  gap: var(--tt-nav-gap);
}

.whb-header .wd-nav-main > li > a {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-nav);
  font-weight: 400;
  letter-spacing: var(--tt-tracking-nav);
  text-transform: uppercase;
  color: var(--tt-nav);
  padding: 0 0 6px;
  border-bottom: var(--tt-hairline) solid transparent;
  transition: border-color var(--tt-motion-chip) var(--tt-ease), color var(--tt-motion-chip) var(--tt-ease);
}

.whb-header .wd-nav-main > li > a:hover,
.whb-header .wd-nav-main > li > a:focus-visible,
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-main > li.current-menu-ancestor > a {
  color: var(--tt-nav);
  border-color: var(--tt-sage-3);
}

.whb-header .wd-nav-main > li.tt-ext > a {
  color: var(--tt-sage-2);
}

/* --- Cart pill: WoodMart's icon element with its count badge, one outline -- */
.whb-header .wd-header-cart {
  margin-inline-start: 22px;
}

.whb-header .wd-header-cart > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tt-button-height); /* the main site's header pill */
  min-width: 68px;
  padding: 11px 22px;
  border-radius: var(--tt-radius-pill);
  border: var(--tt-hairline) solid var(--tt-outline-cream-50);
  color: var(--tt-cream);
  background: transparent;
  transition: border-color var(--tt-motion-chip) var(--tt-ease);
}

.whb-header .wd-header-cart > a:hover,
.whb-header .wd-header-cart > a:focus-visible {
  border-color: var(--tt-cream);
  color: var(--tt-cream);
}

.whb-header .wd-header-cart .wd-tools-inner {
  border: 0;
  padding: 0;
  background: transparent;
}

.whb-header .wd-header-cart .wd-tools-icon {
  color: var(--tt-cream);
}

.whb-header .wd-header-cart .wd-cart-number {
  background: var(--tt-royal);
  color: var(--tt-cream);
  font-family: var(--tt-sans);
  font-weight: 500;
}

/* --- Burger --------------------------------------------------------------- */
.whb-header .wd-header-mobile-nav > a {
  color: var(--tt-cream);
  min-width: var(--tt-tap-target);
  min-height: var(--tt-tap-target);
}

/* --- Mobile drawer: full-screen forest overlay (SPEC.md §04 "Mobile menu") --
 * WoodMart's side navigation, widened to the viewport: logo and close in the
 * heading row, stacked Cormorant links, and the cart pill with the contact
 * caption pinned to the bottom from the drawer's widget area.
 */
.mobile-nav {
  width: 100%;
  max-width: none;
  background: var(--tt-forest-1);
  color: var(--tt-cream);
  display: flex;
  flex-direction: column;
  padding: 0 var(--tt-section-x) 32px;
}

.mobile-nav .wd-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* the logo is the row's background, the close its only child */
  min-height: 64px;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  background: url("../img/logo-light.png") no-repeat left center / auto var(--tt-logo-height-mobile);
}

.mobile-nav .wd-heading .close-side-widget a {
  color: var(--tt-cream);
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  min-height: var(--tt-tap-target);
}

.mobile-nav .wd-nav-mobile > li > a {
  font-family: var(--tt-display);
  font-weight: 500;
  font-size: var(--tt-size-menu-mobile);
  line-height: 1.1;
  color: var(--tt-cream-hi);
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  padding: 11px 0;
}

.mobile-nav .wd-nav-mobile > li.tt-ext > a {
  color: var(--tt-sage-2);
}

.mobile-nav .widgetarea-mobile {
  margin-top: auto;
  padding-top: 40px;
}

.mobile-nav .tt-drawer__cart {
  width: 100%;
}

.mobile-nav .tt-drawer__caption {
  display: flex;
  gap: 12px;
  margin: 22px 0 0;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  color: var(--tt-sage-2);
}

.mobile-nav .tt-drawer__caption a {
  color: var(--tt-sage-2);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .whb-header .wd-nav-main > li > a,
  .whb-header .wd-header-cart > a {
    transition: none;
  }
}