/* ============================================================
   NOVARA — NAVIGATION & HEADER
   css/navigation.css
   Premium light navbar with frosted-glass effect, mint hover states.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   HEADER WRAPPERS
   ────────────────────────────────────────────────────────── */
.wd-header,
.whb-main-header {
  background: #FFFFFF !important;
}

/* General header (logo + tools row) — kill WoodMart's inline bottom border
   so we don't get a double line between rows. The single divider lives
   on .whb-header-bottom's top border.
   z-index: 2 ensures the my-account dropdown (which lives here) paints
   above the nav row below it in the same stacking context. */
.whb-row.whb-general-header,
.whb-row.whb-general-header.whb-border-fullwidth {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 0 !important;
  border-top: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Bottom header row (primary nav) — enforce real height so the nav
   menu sits inside it, not bleeding through the row separator.
   z-index: 1 keeps it below the general-header's dropdown. */
.whb-header-bottom {
  background: rgba(255,255,255,0.96) !important;
  border-top: 1px solid var(--novara-border) !important;
  min-height: 56px;
  position: relative !important;
  z-index: 1 !important;
}
.whb-header-bottom .whb-flex-row {
  min-height: 56px;
  align-items: center !important;
}
.whb-header-bottom .whb-column {
  min-height: 56px;
  display: flex;
  align-items: center;
}

.whb-row.whb-sticky-row.whb-stuck {
  box-shadow: var(--novara-shadow-header) !important;
  background: rgba(255,255,255,0.96) !important;
}

/* Strip top-bar fragments WoodMart may render */
.whb-top-bar { display: none !important; }
.header-banner.wd-hb { display: none !important; }

/* ──────────────────────────────────────────────────────────
   LOGO — enlarged for the new wordmark; the inline <style> in
   functions.php enforces final size on all viewports so this
   only sets the unscoped base.
   ────────────────────────────────────────────────────────── */
.site-logo .wd-logo img,
.site-logo img {
  display: block !important;
  opacity: 1 !important;
  max-height: 56px;
  width: auto;
}

/* ──────────────────────────────────────────────────────────
   PRIMARY NAV
   ────────────────────────────────────────────────────────── */
.wd-nav.wd-nav-main > li > a,
.wd-nav.wd-nav-main > li > span,
.wd-nav-header > li > a,
.woodmart-navigation .menu > li > a {
  font-family: var(--novara-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--novara-body);
  padding: 0 16px;
  transition: color var(--novara-transition);
  text-transform: none;
}

.wd-nav.wd-nav-main > li:hover > a,
.wd-nav.wd-nav-main > li.current-menu-item > a,
.wd-nav.wd-nav-main > li.current-menu-ancestor > a,
.wd-nav-header > li:hover > a,
.wd-nav-header > li.current-menu-item > a,
.woodmart-navigation .menu > li:hover > a,
.woodmart-navigation .menu > li.current-menu-item > a {
  color: var(--novara-teal) !important;
}

/* ──────────────────────────────────────────────────────────
   HEADER CTA — pill button at end of nav
   ────────────────────────────────────────────────────────── */
.nv-header-cta,
.nv-nav-cta,
.nv-nav-cta-btn,
.menu-item .nv-nav-cta,
.wd-nav-main > li.menu-item-cta > a {
  background: var(--novara-gradient-cta) !important;
  color: #FFFFFF !important;
  font-family: var(--novara-font-body);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 9px 22px !important;
  border-radius: var(--novara-radius-pill) !important;
  border: none !important;
  margin-left: 8px;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  transition: transform var(--novara-transition), box-shadow var(--novara-transition), filter var(--novara-transition);
}

.nv-header-cta:hover,
.nv-nav-cta:hover,
.nv-nav-cta-btn:hover,
.wd-nav-main > li.menu-item-cta > a:hover {
  background: var(--novara-gradient-cta-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: var(--novara-shadow-cta);
  text-decoration: none;
}

/* ──────────────────────────────────────────────────────────
   DROPDOWN / MEGA MENU — light, premium
   ────────────────────────────────────────────────────────── */
.wd-nav .sub-menu,
.wd-dropdown-menu,
.woodmart-navigation .sub-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--novara-border) !important;
  border-radius: var(--novara-radius-md) !important;
  box-shadow: var(--novara-shadow-lg) !important;
  padding: 12px !important;
  min-width: 220px;
}

.wd-nav .sub-menu li a,
.woodmart-navigation .sub-menu a {
  font-family: var(--novara-font-body);
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--novara-body) !important;
  padding: 10px 14px !important;
  border-radius: var(--novara-radius-sm) !important;
  transition: background var(--novara-transition), color var(--novara-transition) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.wd-nav .sub-menu li:hover > a,
.wd-nav .sub-menu li.current-menu-item > a,
.woodmart-navigation .sub-menu a:hover {
  color: var(--novara-deep-teal) !important;
  background: var(--novara-surface-alt) !important;
}

/* ── Mega menu: single row, no column wrapping ──────────────────────────── */

/* Force all columns onto one row */
.menu-mega-dropdown .wd-sub-menu.wd-grid-f-inline {
  flex-wrap: nowrap !important;
  align-items: flex-start;
}

/* Equal-width columns that shrink to fit, never wrap */
.menu-mega-dropdown .wd-sub-menu.wd-grid-f-inline > .wd-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Column header link (category label at depth-1) */
.menu-mega-dropdown .wd-col > a.woodmart-nav-link {
  font-family: var(--novara-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--novara-deep-teal) !important;
  padding: 4px 14px 10px !important;
  border-bottom: 1px solid var(--novara-border) !important;
  display: block !important;
  pointer-events: none;
  cursor: default;
}

/* Strip inherited dropdown box from the sub-sub-menu ul */
.menu-mega-dropdown .sub-sub-menu {
  padding: 4px 0 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  min-width: 0 !important;
}

/* Stack links within each column allow text to wrap naturally */
.menu-mega-dropdown .sub-sub-menu li a {
  white-space: normal !important;
  word-break: break-word;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  padding: 7px 14px !important;
}

/* ──────────────────────────────────────────────────────────
   HEADER ROWS — tighter padding
   ────────────────────────────────────────────────────────── */
.whb-general-header .whb-flex-row,
.whb-header-bottom .whb-flex-row {
  align-items: center !important;
}
.whb-general-header .whb-flex-row {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.whb-header-bottom .whb-flex-row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: center !important;
}

/* Nav spans the full width of the bottom header row.
   WoodMart's header builder places the nav in whb-col-left plus two
   empty sibling columns. Collapse the empty columns and grow the nav
   column to fill the available space so the 5 items can each hold 20%. */
.whb-header-bottom .whb-flex-row {
  width: 100% !important;
}

/* Collapse WoodMart's empty sibling columns in the header bottom row */
.whb-header-bottom .whb-empty-column {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Expand the nav column to fill the remaining space */
.whb-header-bottom .whb-col-left {
  flex: 1 1 0% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Expand nav container chain down to the ul */
.whb-header-bottom .woodmart-navigation,
.whb-header-bottom .woodmart-navigation nav,
.whb-header-bottom .wd-nav-container {
  width: 100% !important;
  display: flex !important;
}

/* Nav ul spans full column width */
.whb-header-bottom .wd-nav.wd-nav-main {
  width: 100% !important;
  display: flex !important;
  justify-content: stretch !important;
  flex-wrap: nowrap !important;
}

/* Each item: exactly 20% */
.whb-header-bottom .wd-nav.wd-nav-main > li {
  flex: 0 0 20% !important;
  width: 20% !important;
  max-width: 20% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Center the link text within each item */
.whb-header-bottom .wd-nav.wd-nav-main > li > a,
.whb-header-bottom .wd-nav.wd-nav-main > li > span {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   HEADER TOOL ICONS (search, account, cart)
   ────────────────────────────────────────────────────────── */
.wd-header-cart .wd-action-icon,
.wd-header-my-account .wd-action-icon,
.wd-tools-element a {
  color: var(--novara-ink);
  transition: color var(--novara-transition);
}
.wd-header-cart .wd-action-icon:hover,
.wd-header-my-account .wd-action-icon:hover,
.wd-tools-element:hover a,
.wd-tools-element a:hover {
  color: var(--novara-teal);
}

.wd-cart-number,
.wd-tools-count {
  background: var(--novara-teal) !important;
  color: #FFFFFF !important;
}

/* Mobile burger */
.wd-header-side-btn svg,
.wd-header-side-btn i,
.wd-header-side-btn a {
  color: var(--novara-ink);
}

/* ──────────────────────────────────────────────────────────
   MOBILE NAVIGATION
   ────────────────────────────────────────────────────────── */
.wd-mobile-nav {
  background-color: var(--novara-ink);
}

.wd-mobile-nav a,
.wd-mobile-nav span {
  color: rgba(255,255,255,0.85);
  font-family: var(--novara-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
}

.wd-mobile-nav a:hover {
  color: var(--novara-mint);
}

.wd-mobile-nav .sub-menu {
  background: rgba(255,255,255,0.04) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────
   BREADCRUMBS
   ────────────────────────────────────────────────────────── */
.wd-breadcrumbs {
  font-family: var(--novara-font-body);
  font-size: 0.8125rem;
  color: var(--novara-muted);
}

.wd-breadcrumbs a {
  color: var(--novara-muted);
  transition: color var(--novara-transition);
}

.wd-breadcrumbs a:hover {
  color: var(--novara-teal);
}

.wd-breadcrumbs .current {
  color: var(--novara-body);
}

.wd-breadcrumbs .delimiter {
  color: var(--novara-subtle);
  opacity: 0.6;
}

/* ──────────────────────────────────────────────────────────
   STICKY HEADER — scroll state
   ────────────────────────────────────────────────────────── */
.wd-header.is-scrolled,
.whb-row.whb-sticky-row.whb-stuck {
  box-shadow: var(--novara-shadow-header) !important;
}

.wd-header.is-scrolled .wd-header-inner {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  transition: padding 0.2s ease;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .nv-header-cta,
  .wd-nav-main > li.menu-item-cta > a {
    font-size: 0.8125rem !important;
    padding: 8px 16px !important;
  }
}

@media (max-width: 767px) {
  .nv-header-cta { display: none; }
}

/* ──────────────────────────────────────────────────────────
   FOOTER NAV (legacy hooks)
   ────────────────────────────────────────────────────────── */
.wd-footer .wd-nav > li > a {
  color: rgba(255,255,255,0.70);
  font-family: var(--novara-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--novara-transition);
}

.wd-footer .wd-nav > li > a:hover {
  color: var(--novara-mint);
}

.nv-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
}

.nv-legal-nav a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--novara-transition);
  text-decoration: none;
}

.nv-legal-nav a:hover {
  color: var(--novara-mint);
}

/* Disable any legacy disclaimer-bar offset on sticky header */
body.has-disclaimer-bar .woodmart-sticky-header { top: 0 !important; }