/* ═══════════════════════════════════════════
   WV Support Page — Styles
   ═══════════════════════════════════════════
   Page-scoped stylesheet.
   Prefix: wv-support-
   Theme fonts: --wv-font-primary (General Grotesque),
                --wv-font-serif  (Office Times Round),
                --wv-font-mono   (General Grotesque Mono)
   ═══════════════════════════════════════════ */


/* ── Page-Scoped Variables ── */

:root {
  --support-surface: #FDFAF5;           /* TODO: promote to global variable if used on other pages */
  --support-ink: #1E1E1C;              /* TODO: promote to global variable if used on other pages */
  --support-border-mid: #C8C2B4;       /* TODO: promote to global variable if used on other pages */
  --support-text-light: #A09A8E;       /* TODO: promote to global variable if used on other pages */
  --support-text-muted: #BDB5AC;       /* TODO: promote to global variable if used on other pages */
  --support-cream-dark: #EDE8DC;       /* TODO: promote to global variable if used on other pages */
  --support-cream-deeper: #E0D9CC;     /* TODO: promote to global variable if used on other pages */
  --support-olive: #5C6B2E;            /* TODO: promote to global variable if used on other pages */
  --support-olive-pale: #EEF1E8;       /* TODO: promote to global variable if used on other pages */
  --support-coral-light: #F5EAE7;      /* TODO: promote to global variable if used on other pages */
  --support-blue:        #3A7A8E;      /* Phone-contact icon stroke (was inline on SVG) */
  --support-blue-pale:   #E4F0F5;      /* Phone-contact icon background (was inline) */
}


/* ═══════════════════════════════════════════
   0. SHARED
   ═══════════════════════════════════════════ */

.wv-support-wrap {
  /* Page-level content cap — uses --wv-content-max (768px) so the
     Support page aligns with Shipping and Policies, which already
     use the same compressed-utility-page width. Was incorrectly
     pointing at --wv-page-content-max (1060px), which is the
     SECTION content width — too wide for a single-column utility
     page. Designer call 2026-06-02. */
  max-width: var(--wv-content-max);
  margin: 0 auto;
  padding: 0 20px;
}


/* ═══════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════ */

.wv-support-hero {
  padding: 56px 0 26px;
  text-align: center;
}

.wv-support-hero__title {
  /* font-* covered by .wv-h2 global class on the element. */
  margin: 0 0 12px;
}

.wv-support-hero__body {
  /* font-* covered by .wv-body-lg global class on the element. */
  color: var(--wv-color-text-secondary);
  max-width: 480px;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════
   2. CONTACT METHODS
   ═══════════════════════════════════════════ */

.wv-support-contacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  padding: 16px 0 52px;
  border-bottom: 1px solid var(--wv-color-border);
}

.wv-support-contact {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: var(--support-surface);
  border: 1px solid var(--wv-color-border);
  border-radius: 10px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform var(--wv-transition-fast), box-shadow var(--wv-transition-fast);
  text-decoration: none;
  text-align: left;
  color: inherit;
}

.wv-support-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.wv-support-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Contact icon variants. Background tints + stroke colors used to be
   set via inline style and stroke="#hex" on the SVG — now lifted to
   CSS so the markup is presentation-free and the SVGs ride on
   currentColor.
   Background hexes added as new locals since they don't appear in
   any global token; tokens to be promoted in a later cleanup pass. */
.wv-support-contact__icon--chat {
  background: var(--support-olive-pale);
  color: var(--support-olive);
}

.wv-support-contact__icon--phone {
  background: var(--support-blue-pale);
  color: var(--support-blue);
}

.wv-support-contact__icon--email {
  background: var(--support-coral-light);
  color: var(--wv-color-accent);
}

.wv-support-contact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wv-support-contact__label {
  /* font-* covered by .wv-label-nav global class on the element. */
  color: var(--wv-color-text-primary);
}

.wv-support-contact__sub {
  /* font-* covered by .wv-label-small global class on the element. */
  color: var(--wv-color-text-secondary);
}

.wv-support-hours {
  font-family: var(--wv-font-primary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wv-support-hours--open {
  color: var(--support-olive);
}

.wv-support-hours--closed {
  color: var(--wv-color-accent);
}

/* Neutral / muted colour-only variants — replace prior inline
   style="color:#hex" tags on the call-line and email-line hours. */
.wv-support-hours--neutral {
  color: var(--support-text-light);
}

.wv-support-hours--muted {
  color: var(--support-text-muted);
}


/* ═══════════════════════════════════════════
   3. TWO-PATH SECTION
   ═══════════════════════════════════════════ */

.wv-support-paths-wrap {
  background: var(--wv-color-surface);
  border-top: 1px solid var(--wv-color-border);
  border-bottom: 1px solid var(--wv-color-border);
  padding: 52px 0;
}

.wv-support-paths__heading {
  /* font-* covered by .wv-h2 global class on the element. */
  text-align: center;
  margin: 0 0 24px;
}

.wv-support-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ── Path picker (button row + disclosure panel) ─────────
   Replaces .wv-support-paths visually: two large buttons sit where
   the two content cards used to sit, and the selected card's content
   reveals below as a single full-width panel. Behavior in
   assets/js/wv-support.js: radio + click-again-collapses.

   Mobile-first: buttons stack single column; tablet+ moves them to
   the same 1fr 1fr layout the columned content used. */

.wv-support-path-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.wv-support-path-picker__btn {
  /* font-* covered by .wv-body-lg global class on the element. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 88px;
  padding: 20px 24px;
  background: var(--wv-color-card-bg);
  border: 1px solid var(--wv-color-border);
  border-radius: 14px;
  color: var(--wv-color-text-primary);
  cursor: pointer;
  transition: border-color var(--wv-transition-fast), background var(--wv-transition-fast), color var(--wv-transition-fast);
}

.wv-support-path-picker__btn:hover {
  border-color: var(--wv-color-text-primary);
}

.wv-support-path-picker__btn--active,
.wv-support-path-picker__btn[aria-expanded="true"] {
  background: var(--wv-color-accent);
  border-color: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
}

.wv-support-path-panel {
  margin-top: 16px;
}

.wv-support-path-panel:empty,
.wv-support-path-panel__pane[hidden] {
  display: none;
}

/* Header offset for the smooth scroll-into-view that wv-support.js
   triggers when a picker button is clicked — keeps the pane top
   from sliding behind the fixed site header. Token resolves to 48px
   at mobile, 81px at tablet+. Added 2026-06-05. */
.wv-support-path-panel__pane {
  scroll-margin-top: calc(var(--wv-header-height) + 16px);
}


/* ── Rec Pane (light, bordered — matches Help pane treatment) ── */

.wv-support-path--rec {
  background: var(--wv-color-card-bg);
  border: 1px solid var(--wv-color-border);
  border-radius: 14px;
  padding: 28px 20px;
}

.wv-support-path--rec .wv-support-path__body {
  /* font-* covered by .wv-body global class. */
  color: var(--wv-color-text-secondary);
  margin-bottom: 24px;
}

.wv-support-rec-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.wv-support-rec-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  background: var(--support-surface);
  border: 1px solid var(--wv-color-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--wv-transition-fast);
  text-decoration: none;
  text-align: left;
  color: inherit;
}

.wv-support-rec-step:hover {
  border-color: var(--support-border-mid);
}

.wv-support-rec-step__num {
  /* font-* covered by .wv-h5. Serif/italic dropped per discipline. */
  color: var(--wv-color-accent);
  flex-shrink: 0;
}

.wv-support-rec-step__info {
  flex: 1;
  min-width: 0;
}

.wv-support-rec-step__label {
  /* font-* covered by .wv-label-nav global class. */
  color: var(--wv-color-text-primary);
  margin-bottom: 3px;
}

.wv-support-rec-step__sub {
  /* font-* covered by .wv-body-sm global class. */
  color: var(--wv-color-text-secondary);
  margin-bottom: 5px;
}

.wv-support-rec-tag {
  display: inline-block;
  font-family: var(--wv-font-primary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--wv-radius-pill);
  padding: 2px 8px;
  line-height: 1.4;
}

/* Tag variants — color treatments on light card bg. */
.wv-support-rec-tag--read {
  background: var(--support-cream-dark);
  color: var(--wv-color-text-secondary);
}

.wv-support-rec-tag--chat {
  background: var(--support-olive-pale);
  color: var(--support-olive);
}

.wv-support-rec-tag--closed {
  background: var(--support-cream-dark);
  color: var(--support-text-muted);
}

/* ── Help Pane (light, bordered — matches Rec pane treatment) ── */

.wv-support-path--help {
  background: var(--wv-color-card-bg);
  border: 1px solid var(--wv-color-border);
  border-radius: 14px;
  padding: 28px 20px;
}

.wv-support-path--help .wv-support-path__body {
  /* font-* covered by .wv-body global class. */
  color: var(--wv-color-text-secondary);
  margin-bottom: 24px;
}

.wv-support-help-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.wv-support-help-topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--support-surface);
  border: 1px solid var(--wv-color-border);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color var(--wv-transition-fast);
  text-decoration: none;
  color: inherit;
}

.wv-support-help-topic:hover {
  border-color: var(--support-border-mid);
}

.wv-support-help-topic__label {
  /* font-* covered by .wv-body global class. */
  color: var(--wv-color-text-primary);
}

.wv-support-help-topic__arrow {
  font-size: 12px;
  color: var(--support-text-muted);
  flex-shrink: 0;
}

.wv-support-path--help .wv-support-path__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   4. LOCATION
   ═══════════════════════════════════════════ */

/* Dark surface wrapper. Added 2026-06-05 when Location moved below
   FAQ; full-bleed bg sits on .wv-support-location-wrap, with the
   .wv-support-wrap content cap inside. Cascade target for child
   color inversion is set here via `color`; children opt in with
   `color: inherit` per CLAUDE.md Rule 3 exception. */
.wv-support-location-wrap {
  background: var(--support-ink);
  color: var(--wv-color-text-inverse);
}

.wv-support-location {
  padding: 52px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* Inverted text on dark — children inherit cream from the wrapper.
   wv-h2/wv-body/wv-h6/wv-label-legal typography classes carry over;
   only the color cascade flips. */
.wv-support-location-wrap .wv-support-location__title,
.wv-support-location-wrap .wv-support-location__body,
.wv-support-location-wrap .wv-support-loc-detail__label,
.wv-support-location-wrap .wv-support-loc-detail__value,
.wv-support-location-wrap .wv-support-loc-detail__note {
  color: inherit;
}

/* Icon stays on its sage box (stands out on dark) but the inner
   SVG (rides on currentColor) flips to ink-dark for legibility. */
.wv-support-location-wrap .wv-support-loc-detail__icon {
  color: var(--wv-color-text-primary);
}

.wv-support-location__title {
  /* font-* covered by .wv-h2. Serif/italic dropped per discipline. */
  color: var(--wv-color-text-primary);
  margin: 0 0 12px;
}

.wv-support-location__body {
  /* font-* covered by .wv-body global class. */
  color: var(--wv-color-text-secondary);
  margin-bottom: 24px;
}

.wv-support-location__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.wv-support-loc-detail {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wv-support-loc-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--wv-color-surface);
  border-radius: 8px;
  flex-shrink: 0;
  /* Inner SVG rides on currentColor; was stroke="#A09A8E" inline. */
  color: var(--support-text-light);
}

.wv-support-loc-detail__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wv-support-loc-detail__label {
  /* font-* covered by .wv-h6 global class. */
  color: var(--wv-color-text-primary);
}

.wv-support-loc-detail__value {
  /* font-* covered by .wv-body global class. */
  color: var(--wv-color-text-secondary);
}

.wv-support-loc-detail__note {
  /* font-* covered by .wv-label-legal. Italic kept locally. */
  font-style: italic;
  color: var(--support-text-muted);
}

.wv-support-map {
  background: var(--wv-color-surface);
  border: 1px solid var(--wv-color-border);
  border-radius: 14px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Iframe styling moved off the inline style="border:0;border-radius:14px"
   on the <iframe> tag. The map wrapper already has overflow:hidden +
   border-radius, so we just zero the iframe's UA border here. */
.wv-support-map iframe {
  border: 0;
}

.wv-support-map-placeholder {
  font-family: var(--wv-font-primary);
  font-size: 13px;
  font-weight: 400;
  color: var(--support-text-muted);
}


/* ═══════════════════════════════════════════
   5. FAQ
   ═══════════════════════════════════════════ */

.wv-support-faq-wrap {
  background: var(--wv-color-background);
  border-top: 1px solid var(--wv-color-border);
  padding: 48px 0 60px;
  /* Anchored from the "Find Answers" jump link; offset accounts for
     the fixed header. Was inline style on the <div id="find-answers">. */
  scroll-margin-top: var(--wv-header-height);
}

.wv-support-faq-header {
  text-align: center;
  margin-bottom: 32px;
}

.wv-support-faq-header__title {
  /* font-* covered by .wv-h2. Serif/italic dropped per discipline. */
  color: var(--wv-color-text-primary);
  margin: 0 0 8px;
}

.wv-support-faq-header__sub {
  /* font-* covered by .wv-body global class. */
  color: var(--wv-color-text-secondary);
}


/* ── Search ──
   Now rendered via parts/faq-search.php; styling lives in
   assets/css/wv-faq-archive.css (enqueued as a dep on /support).
   Old .wv-support-faq-search* rules removed during the
   2026-06-04 CPT switchover. */


/* ── Tabs ── */

.wv-support-faq-tabs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  margin-bottom: 32px;
  padding-bottom: 4px;
}

.wv-support-faq-tabs::-webkit-scrollbar {
  display: none;
}

.wv-support-faq-tab {
  font-family: var(--wv-font-primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-pill);
  padding: 7px 14px;
  cursor: pointer;
  color: var(--wv-color-text-secondary);
  transition: background var(--wv-transition-fast), color var(--wv-transition-fast), border-color var(--wv-transition-fast);
}

.wv-support-faq-tab:hover {
  border-color: var(--support-border-mid);
  color: var(--wv-color-text-primary);
}

.wv-support-faq-tab.is-active {
  background: var(--support-ink);
  border-color: var(--support-ink);
  color: var(--wv-color-text-inverse);
}


/* ── FAQ List ──
   Now CPT-backed and rendered via parts/faq-archive-item.php (uses
   .wv-faq-archive__list / __item / __question classes from
   assets/css/wv-faq-archive.css). Old inline-accordion rules
   (.wv-support-faq-list/__item/__q/__icon/__a) removed during the
   2026-06-04 CPT switchover — questions now link to the standalone
   FAQ permalink instead of expanding inline. */

.wv-support-faq-empty {
  /* font-* covered by .wv-body global class. Italic kept locally. */
  text-align: center;
  font-style: italic;
  color: var(--support-text-muted);
  padding: 40px 0;
}


/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet+ (768px)
   ═══════════════════════════════════════════ */

@media (min-width: 768px) {
  .wv-support-wrap {
    padding: 0 48px;
  }

  .wv-support-contacts {
    justify-content: center;
    align-items: initial;
  }

  .wv-support-paths {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .wv-support-path-picker {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .wv-support-path--rec,
  .wv-support-path--help {
    padding: 28px 24px;
  }

  .wv-support-location {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .wv-support-map {
    height: 320px;
  }

  .wv-support-faq-tabs {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .wv-support-faq-tab {
    white-space: normal;
    flex-shrink: 1;
  }

  .wv-support-faq-wrap {
    padding: 64px 0 80px;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Desktop (1280px)
   ═══════════════════════════════════════════ */

@media (min-width: 1280px) {
  .wv-support-paths {
    gap: 20px;
  }

  .wv-support-path--rec,
  .wv-support-path--help {
    padding: 36px 32px;
  }

  .wv-support-location {
    gap: 48px;
  }
}