/* ==========================================================================
   WC · Navigation
   Two visual states, expressed as custom properties so every child inherits
   the right colour without duplicating rules:
     transparent — over a dark hero at scroll 0
     solid       — scrolled, mega panel open, mobile menu open, or a light page
   ========================================================================== */

.wc-nav {
  --wc-nav-fg: var(--wc-white);
  --wc-nav-hover: var(--wc-aqua);
  --wc-nav-border: rgba(var(--wc-white-rgb), 0.35);
  --wc-nav-logo-primary: 0;
  --wc-nav-logo-reverse: 1;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--wc-nav-fg);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

/* ---- Solid state ---- */
.wc-nav--solid-always,
.wc-nav[data-solid="true"] {
  --wc-nav-fg: var(--wc-midnight);
  --wc-nav-hover: var(--wc-marine); /* marine not teal: 15px nav link on the white bar fails AA */
  --wc-nav-border: rgba(var(--wc-midnight-rgb), 0.25);
  --wc-nav-logo-primary: 1;
  --wc-nav-logo-reverse: 0;

  background: rgba(var(--wc-white-rgb), 0.95);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(var(--wc-midnight-rgb), 0.08);
}

/* Same solid treatment without JavaScript, while a mega panel is open. */
@supports selector(:has(*)) {
  .wc-nav--dark-start:not(.wc-nav--js):has(.wc-nav__item--panel:hover),
  .wc-nav--dark-start:not(.wc-nav--js):has(.wc-nav__item--panel:focus-within) {
    --wc-nav-fg: var(--wc-midnight);
    --wc-nav-hover: var(--wc-marine); /* marine not teal: 15px nav link on the white bar fails AA */
    --wc-nav-border: rgba(var(--wc-midnight-rgb), 0.25);
    --wc-nav-logo-primary: 1;
    --wc-nav-logo-reverse: 0;

    background: rgba(var(--wc-white-rgb), 0.95);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: rgba(var(--wc-midnight-rgb), 0.08);
  }
}

.wc-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* ---------- Logo ---------- */
.wc-nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.wc-nav__logo-img {
  height: 41px;
  width: auto;
}

.wc-nav__logo-stack {
  position: relative;
  display: inline-block;
}
.wc-nav__logo-stack .wc-nav__logo-img--primary {
  opacity: var(--wc-nav-logo-primary);
  transition: opacity .25s ease;
}
.wc-nav__logo-stack .wc-nav__logo-img--reverse {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  opacity: var(--wc-nav-logo-reverse);
  transition: opacity .25s ease;
}

.wc-nav__wordmark {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wc-nav-fg);
  transition: color .25s ease;
}

/* ---------- Primary nav ---------- */
.wc-nav__primary { flex: 1 1 auto; }

.wc-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Static so the absolutely positioned panel spans the whole header. */
.wc-nav__item {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wc-nav__link {
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  color: var(--wc-nav-fg);
  white-space: nowrap;
  transition: color .2s ease;
}
.wc-nav__link:hover,
.wc-nav__item:hover .wc-nav__link { color: var(--wc-nav-hover); }
/* Grouping labels (a panel parent with no destination of its own). An inline
   span ignores the vertical padding above, so box it like the anchor. */
.wc-nav__link--static { display: inline-block; cursor: default; }

.wc-nav__disclosure {
  display: inline-flex;
  align-items: center;
  padding: 6px 2px;
  color: var(--wc-nav-fg);
  transition: color .2s ease;
}
.wc-nav__item:hover .wc-nav__disclosure { color: var(--wc-nav-hover); }

.wc-nav__chevron {
  font-size: 9px;
  line-height: 1;
  opacity: 0.6;
  transition: transform .2s ease;
}
.wc-nav__item--panel:hover .wc-nav__chevron,
.wc-nav__item--panel:focus-within .wc-nav__chevron,
.wc-nav__item--panel[data-open="true"] .wc-nav__chevron { transform: rotate(180deg); }
.wc-nav__item--panel[data-open="false"] .wc-nav__chevron { transform: none; }

/* ---------- Mega panel ---------- */
.wc-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  color: var(--wc-midnight);
  background: rgba(var(--wc-white-rgb), 0.98);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(var(--wc-midnight-rgb), 0.06);
  border-bottom: 1px solid rgba(var(--wc-midnight-rgb), 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

/* No-JS / pointer path */
.wc-nav__item--panel:hover > .wc-nav__panel,
.wc-nav__item--panel:focus-within > .wc-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* module.js takes explicit control once it has initialised. */
.wc-nav__item--panel[data-open="false"] > .wc-nav__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.wc-nav__item--panel[data-open="true"] > .wc-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wc-nav__panel-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.9fr;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 44px;
}

.wc-nav__panel-eyebrow {
  color: var(--wc-marine); /* marine not teal: 12px eyebrow on white panel fails AA */
  margin: 0 0 16px;
}

.wc-nav__panel-heading {
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--wc-midnight);
}

.wc-nav__panel-blurb {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--wc-midnight-rgb), 0.65);
  margin: 0 0 22px;
  max-width: 240px;
}

.wc-nav__panel-cta { padding: 12px 20px; }

.wc-nav__panel-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-content: start;
}

.wc-nav__panel-item {
  display: block;
  padding: 14px 16px;
  border-radius: var(--wc-radius-sm);
  transition: background .18s ease;
}
.wc-nav__panel-item:hover { background: var(--wc-mint); }

.wc-nav__panel-item-title {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--wc-midnight);
  margin-bottom: 3px;
}

.wc-nav__panel-item-desc {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(var(--wc-midnight-rgb), 0.6);
}

/* ---------- Shared "browse by situation" column ---------- */
.wc-nav__situations {
  border-left: 1px solid rgba(var(--wc-midnight-rgb), 0.1);
  padding-left: 32px;
}

.wc-nav__situations-heading {
  color: var(--wc-marine);
  margin: 0 0 16px;
}

.wc-nav__situations-list,
.wc-nav__mobile-situations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wc-nav__situation {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: rgba(var(--wc-midnight-rgb), 0.8);
  transition: color .2s ease;
}
.wc-nav__situation:hover { color: var(--wc-marine); } /* marine not teal: 14px link on white fails AA */
.wc-nav__situation-arrow { color: var(--wc-aqua); }

/* ---------- Right-hand actions ---------- */
.wc-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.wc-nav__currency {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.wc-nav__currency-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--wc-nav-fg);
  background: transparent;
  border: 1px solid var(--wc-nav-border);
  border-radius: 999px;
  padding: 9px 30px 9px 16px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.wc-nav__currency-select option {
  color: var(--wc-midnight);
  background: var(--wc-white);
}

.wc-nav__currency-chevron {
  position: absolute;
  right: 13px;
  font-size: 8px;
  line-height: 1;
  opacity: 0.7;
  pointer-events: none;
  color: var(--wc-nav-fg);
}

.wc-nav__cta {
  padding: 12px 22px;
  white-space: nowrap;
}

/* ---------- Hamburger ---------- */
.wc-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  color: var(--wc-nav-fg);
}

.wc-nav__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}

.wc-nav[data-mobile="true"] .wc-nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wc-nav[data-mobile="true"] .wc-nav__burger-bar:nth-child(2) { opacity: 0; }
.wc-nav[data-mobile="true"] .wc-nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile panel ---------- */
.wc-nav__mobile {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  color: var(--wc-midnight);
  background: rgba(var(--wc-white-rgb), 0.98);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: max-height .32s cubic-bezier(.2, .7, .2, 1), visibility .32s ease;
}
.wc-nav[data-mobile="true"] .wc-nav__mobile {
  max-height: 560px;
  overflow-y: auto;
  visibility: visible;
}
/* Without JavaScript the panel can never open, so keep it out of the way. */
.wc-nav:not(.wc-nav--js) .wc-nav__mobile { display: none; }

.wc-nav__mobile-inner {
  padding-top: 12px;
  padding-bottom: 32px;
}

.wc-nav__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-nav__mobile-link {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--wc-midnight);
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--wc-midnight-rgb), 0.08);
}
.wc-nav__mobile-link:hover { color: var(--wc-teal); }

.wc-nav__mobile-eyebrow {
  color: var(--wc-marine);
  margin: 26px 0 14px;
}

.wc-nav__mobile-situations .wc-nav__situation { font-size: 15px; }

/* ---------- Breakpoints ---------- */
@media (max-width: 980px) {
  .wc-nav__primary { display: none; }
  .wc-nav__currency { display: none; }
  .wc-nav__burger { display: inline-flex; }
  .wc-nav__panel { display: none; }

  /* No JavaScript: no hamburger, so wrap the primary links under the bar. */
  .wc-nav:not(.wc-nav--js) .wc-nav__bar { flex-wrap: wrap; }
  .wc-nav:not(.wc-nav--js) .wc-nav__primary {
    display: block;
    order: 3;
    flex: 1 0 100%;
  }
  .wc-nav:not(.wc-nav--js) .wc-nav__list {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 20px;
    padding-top: 10px;
  }
  .wc-nav:not(.wc-nav--js) .wc-nav__burger { display: none; }
}

@media (max-width: 720px) {
  .wc-nav__bar {
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .wc-nav__logo-img { height: 34px; }
  .wc-nav__wordmark { font-size: 20px; }
  .wc-nav__cta { padding: 11px 16px; }
  .wc-nav__cta .wc-btn-label { font-size: 11px; letter-spacing: 0.16em; }
  .wc-nav__mobile-link { font-size: 18px; padding: 14px 0; }
}

/* ==========================================================================
   Guided search (SW-04)
   The trigger sits in the right-hand actions and inherits the bar's
   foreground token, so it flips with the header over a dark hero.
   The panel is a fixed overlay: it is not inside the bar's stacking or
   overflow context, so it is safe at every breakpoint.
   ========================================================================== */

.wc-nav__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wc-nav-fg);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* Was teal-on-teal-tint: 1.0:1 against its own background, so on the dark nav
   the icon went from white to invisible on hover. The tint now carries the
   nav's own foreground, which is correct on both the dark and light bar. */
.wc-nav__search-btn:hover,
.wc-nav__search-btn:focus-visible {
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: var(--wc-nav-fg);
}

.wc-nav__search-icon { display: block; }

/* ---------- Overlay ---------- */
.wc-nav__search {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(16px, 8vh, 110px) 20px 20px;
}

.wc-nav__search[hidden] { display: none; }

.wc-nav__search-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 65, 0.5);
  backdrop-filter: blur(4px);
}

.wc-nav__search-dialog {
  position: relative;
  width: min(860px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--wc-radius-lg, 20px);
  background: var(--wc-white, #fff);
  color: var(--wc-midnight);
  box-shadow: 0 30px 80px rgba(0, 40, 65, 0.28);
}

/* ---------- Search field ---------- */
.wc-nav__search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--wc-midnight);
}

.wc-nav__search-form-icon {
  display: inline-flex;
  color: var(--wc-teal);
}

.wc-nav__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--wc-midnight);
  -webkit-appearance: none;
  appearance: none;
}

.wc-nav__search-input::placeholder { color: rgba(0, 40, 65, 0.5); }

.wc-nav__search-esc {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid rgba(0, 40, 65, 0.15);
  border-radius: 999px;
  background: var(--wc-white, #fff);
  font-family: inherit;
  font-size: 12.5px;
  color: rgba(0, 40, 65, 0.7);
  cursor: pointer;
}

.wc-nav__search-esc:hover,
.wc-nav__search-esc:focus-visible { border-color: var(--wc-midnight); color: var(--wc-midnight); }

/* ---------- Suggestions ---------- */
.wc-nav__search-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 28px;
}

.wc-nav__search-group[hidden] { display: none; }

.wc-nav__search-group-label {
  margin: 0 0 14px;
  color: var(--wc-marine);
}

.wc-nav__search-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wc-nav__search-list li[hidden] { display: none; }

.wc-nav__search-suggestion {
  display: inline-flex;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(0, 40, 65, 0.82);
  text-decoration: none;
}

.wc-nav__search-suggestion:hover,
.wc-nav__search-suggestion:focus-visible {
  color: var(--wc-midnight);
  text-decoration: underline;
}

.wc-nav__search-arrow { color: var(--wc-teal); }

.wc-nav__search-empty {
  margin: 28px 0 0;
  font-size: 16px;
  color: rgba(0, 40, 65, 0.7);
}

.wc-nav__search-empty[hidden] { display: none; }

/* Locks the page behind the overlay. */
body.wc-search-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wc-nav__search-btn { transition: none; }
}