/* ============================================================================
 * ka-wes-theme.css
 * ---------------------------------------------------------------------------
 * Site-wide overrides that style K&A blocks (.ka_*) to match the bespoke WES
 * design (.wes-*). Enqueued by ka-divi-bridge so the K&A modules can replace
 * legacy wes-* sections without visual regression.
 *
 * Pattern:
 *   - Default K&A block markup uses .ka_<slug> classes
 *   - Adding theme="wes" on the block puts .ka_<slug>--theme-wes on the wrapper
 *   - This stylesheet has scoped rules: .ka_<slug>.ka_<slug>--theme-wes { ... }
 *
 * Each module's rules are taken from the corresponding .wes-* selector(s) in
 * the live design system (captured at releases/v1.2.0-artifacts/wes-design-system.css).
 *
 * Build status (2026-05-28):
 *   v1.2.0-pre  — skeleton + ka/cta proof-of-concept
 *   v1.2.0      — all 13 v1.1.0 modules + 8 new modules styled
 * ========================================================================== */

/* ----- WES brand tokens (single source of truth) -------------------------- */
:root {
  --wes-color-gold:        #D4A24E;
  --wes-color-gold-dark:   #B58A3D;
  --wes-color-dark:        #1c1d23;
  --wes-color-dark-2:      #23222a;
  --wes-color-dark-3:      #1c1c1e;
  --wes-color-cream:       #fbf6ec;
  --wes-color-cream-2:     #e6dfd1;
  --wes-color-text-on-dark:  rgba(255, 255, 255, 0.78);
  --wes-color-muted-on-dark: rgba(255, 255, 255, 0.65);
  --wes-color-line:        #e8e8e8;

  --wes-font-heading:      'Spectral', serif;
  --wes-font-body:         'AR One Sans', sans-serif;

  --wes-shadow-md:         0 6px 18px rgba(0, 0, 0, 0.08);
  --wes-shadow-lg:         0 16px 40px rgba(0, 0, 0, 0.12);
  --wes-shadow-2xl:        0 32px 80px rgba(0, 0, 0, 0.18);

  --wes-radius-sm: 4px;
  --wes-radius-md: 8px;
  --wes-radius-lg: 12px;
  --wes-radius-pill: 999px;
}

/* ============================================================================
 * SHARED HELPERS — buttons + ghost buttons + section marks
 * ========================================================================== */

/* WES gold CTA — used by every "primary" button in the theme. Mirrors .wes-hero-cta. */
.ka_theme_wes_btn,
.ka_cta.ka_cta--theme-wes .ka_cta__button,
.ka_banner_hero--theme-wes .ka_banner_hero__button--primary,
.ka_editorial_band--theme-wes-intro .ka_editorial_band__button,
.ka_editorial_band--theme-wes-why .ka_editorial_band__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wes-color-gold);
  color: var(--wes-color-dark);
  padding: 14px 28px;
  border-radius: var(--wes-radius-sm);
  font-family: var(--wes-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  border: 2px solid var(--wes-color-gold);
  transition: filter 150ms ease, transform 150ms ease;
}
.ka_theme_wes_btn:hover,
.ka_cta.ka_cta--theme-wes .ka_cta__button:hover,
.ka_banner_hero--theme-wes .ka_banner_hero__button--primary:hover,
.ka_editorial_band--theme-wes-intro .ka_editorial_band__button:hover,
.ka_editorial_band--theme-wes-why .ka_editorial_band__button:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* WES ghost CTA — outline-only secondary button. Mirrors .wes-hero-cta--ghost. */
.ka_theme_wes_btn--ghost,
.ka_banner_hero--theme-wes .ka_banner_hero__button--secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: inherit;
  padding: 14px 28px;
  border-radius: var(--wes-radius-sm);
  font-family: var(--wes-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  border: 2px solid currentColor;
  transition: background 150ms ease, color 150ms ease;
}
.ka_theme_wes_btn--ghost:hover,
.ka_banner_hero--theme-wes .ka_banner_hero__button--secondary:hover {
  background: currentColor;
  color: var(--wes-color-cream);
}

/* ============================================================================
 * ka/cta — wes theme (mirrors .wes-cta-band)
 * Source: releases/v1.2.0-artifacts/wes-design-system.css
 * ========================================================================== */

.ka_cta.ka_cta--theme-wes {
  background: var(--wes-color-dark-2);
  color: #fff;
  text-align: center;
  padding: 72px 32px;
}
.ka_cta.ka_cta--theme-wes .ka_cta__title {
  color: #fff;
  font-family: var(--wes-font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
}
.ka_cta.ka_cta--theme-wes .ka_cta__content,
.ka_cta.ka_cta--theme-wes .ka_cta__content p {
  color: var(--wes-color-cream-2);
  max-width: 680px;
  margin: 0 auto 28px;
  font-family: var(--wes-font-body);
  font-size: 18px;
  line-height: 1.6;
}
.ka_cta.ka_cta--theme-wes .ka_cta__button {
  /* inherits .ka_theme_wes_btn rules above */
  color: var(--wes-color-dark);
}
@media (max-width: 720px) {
  .ka_cta.ka_cta--theme-wes { padding: 48px 20px; }
  .ka_cta.ka_cta--theme-wes .ka_cta__title { font-size: 28px; }
  .ka_cta.ka_cta--theme-wes .ka_cta__content,
  .ka_cta.ka_cta--theme-wes .ka_cta__content p { font-size: 16px; }
}

/* ============================================================================
 * TODO — populate as each module's wes theme is fleshed out (build queue §8)
 * ----------------------------------------------------------------------------
 * [ ] ka/pullquote          → mirrors .wes-pullquote
 * [ ] ka/marquee            → mirrors .wes-brand-marquee
 * [ ] ka/poster             → mirrors .wes-poster (+ size/aspect variants)
 * [ ] ka/editorial-band     → mirrors .wes-intro-editorial + .wes-why-editorial
 *                             (incl. drop-cap, section-mark badge, seal SVG, 2-btn)
 * [ ] ka/stat-counters      → mirrors .wes-stats-band
 * [ ] ka/stat-counter       → mirrors .wes-stat-block + .wes-stat-value + .wes-stat-label + .wes-stat-sub
 * [ ] ka/timeline           → mirrors .wes-day-section
 * [ ] ka/timeline-item      → mirrors .wes-day-item + .wes-day-time + .wes-day-body + .wes-day-callout
 * [ ] ka/product-slider     → mirrors .wes-fp-section / .wes-na-section / .wes-shopslider
 *                             (incl. badge=new/sale/off-percent ribbon overlay)
 * [ ] ka/product-ranking    → mirrors .wes-stack-section
 * [ ] ka/project-bundles    → mirrors .wes-bundles-section + per-accent assignments
 * [ ] ka/slider/slide       → mirrors .wes-brslider (extended fields)
 * [ ] ka/banner-hero        → mirrors .wes-hero (static; rotation is ka/hero-slider)
 * [ ] ka/finder             → mirrors .wes-finder-section
 *
 * NEW modules' wes themes:
 * [ ] ka/header-bar         → mirrors .wes-top (logo + search + Quick Quote)
 * [ ] ka/overlay-menu       → mirrors .wes-megamenu (drawer + quick rows + bottom CTA)
 * [ ] ka/overlay-menu-card  → mirrors .wes-megamenu-card (img + body + sublist + cta)
 * [ ] ka/hero-slider/slide  → mirrors .wes-hero / .wes-hero-slide (1.5s+7.5s rotation)
 * [ ] ka/location-grid/card → mirrors .wes-counters / .wes-counter-card
 * [ ] ka/services-strip/item→ mirrors .wes-services-strip / .wes-services-item
 * ========================================================================== */

/* ============================================================================
 * Quick Quote modal — bridge-owned overlay (post v1.2.2 remediation)
 * Triggered by [data-quickquote-trigger] anywhere on the page.
 * Closed by [data-quote-close] OR ESC OR clicking the backdrop.
 * ========================================================================== */

.wes-quote-overlay {
  position: fixed;
  inset: 0;
  z-index: 99500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.wes-quote-overlay.is-open,
.wes-quote-overlay[aria-hidden="false"] {
  display: flex;
}
.wes-quote-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 27, 0.78);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.wes-quote-panel {
  position: relative;
  background: var(--ka-token-brand-color-white, #ffffff);
  color: var(--ka-token-brand-color-dark, #1c1d23);
  border-radius: var(--ka-token-radius-lg, 24px);
  padding: 48px 56px 40px;
  max-width: 720px;
  width: 100%;
  margin: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  font-family: var(--ka-token-font-body, "Inter", system-ui, sans-serif);
}
@media (max-width: 680px) {
  .wes-quote-panel {
    padding: 32px 24px 24px;
    border-radius: 16px;
  }
}
.wes-quote-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 21, 27, 0.06);
  color: var(--ka-token-brand-color-dark, #1c1d23);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
  z-index: 1;
}
.wes-quote-close:hover {
  background: rgba(20, 21, 27, 0.12);
  transform: scale(1.05);
}
.wes-quote-close:focus-visible {
  outline: 2px solid var(--ka-token-brand-color-primary, #D4A24E);
  outline-offset: 2px;
}
.wes-quote-header {
  text-align: center;
  margin-bottom: 28px;
}
.wes-quote-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ka-token-brand-color-primary, #D4A24E);
  font-weight: 600;
  margin-bottom: 12px;
}
.wes-quote-title {
  font-family: var(--ka-token-font-heading, "Playfair Display", Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.15;
}
.wes-quote-title em {
  font-style: italic;
  color: var(--ka-token-brand-color-primary, #D4A24E);
}
.wes-quote-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ka-token-brand-color-muted, #6b6f7a);
  margin: 0;
}
.wes-quote-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wes-quote-form input[type="text"],
.wes-quote-form input[type="email"],
.wes-quote-form input[type="tel"],
.wes-quote-form input[type="date"],
.wes-quote-form select,
.wes-quote-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(20, 21, 27, 0.18);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wes-quote-form input:focus,
.wes-quote-form select:focus,
.wes-quote-form textarea:focus {
  outline: 0;
  border-color: var(--ka-token-brand-color-primary, #D4A24E);
  box-shadow: 0 0 0 3px rgba(212, 162, 78, 0.18);
}
.wes-quote-form textarea {
  resize: vertical;
  min-height: 100px;
}
.wes-quote-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ka-token-brand-color-dark, #1c1d23);
  margin-bottom: -6px;
}
.wes-quote-form button[type="submit"] {
  background: var(--ka-token-brand-color-primary, #D4A24E);
  color: var(--ka-token-brand-color-dark, #1c1d23);
  border: 0;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wes-quote-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.wes-quote-open {
  overflow: hidden;
}

/* Quick Quote modal (Platt-style — tabs for line-by-line / paste / upload) */
.wes-qq-overlay,
#quickquote-overlay {
  position: fixed;
  inset: 0;
  z-index: 99500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.wes-qq-overlay.is-open,
#quickquote-overlay.is-open {
  display: flex;
}
.wes-qq-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 27, 0.78);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.wes-qq-panel {
  position: relative;
  background: var(--ka-token-brand-color-white, #ffffff);
  color: var(--ka-token-brand-color-dark, #1c1d23);
  border-radius: 24px;
  padding: 48px 56px 40px;
  max-width: 880px;
  width: 100%;
  margin: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  font-family: var(--ka-token-font-body, "Inter", system-ui, sans-serif);
}
@media (max-width: 680px) {
  .wes-qq-panel {
    padding: 32px 24px 24px;
    border-radius: 16px;
  }
}
.wes-qq-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 21, 27, 0.06);
  color: var(--ka-token-brand-color-dark, #1c1d23);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
  z-index: 1;
}
.wes-qq-close:hover {
  background: rgba(20, 21, 27, 0.12);
  transform: scale(1.05);
}
.wes-qq-header {
  text-align: center;
  margin-bottom: 24px;
}
.wes-qq-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ka-token-brand-color-primary, #D4A24E);
  font-weight: 600;
  margin-bottom: 12px;
}
.wes-qq-title {
  font-family: var(--ka-token-font-heading, "Playfair Display", Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 8px 0;
}
.wes-qq-title em {
  font-style: italic;
  color: var(--ka-token-brand-color-primary, #D4A24E);
}
.wes-qq-sub {
  font-size: 14px;
  color: var(--ka-token-brand-color-muted, #6b6f7a);
  margin: 0;
  line-height: 1.5;
}
.wes-qq-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(20, 21, 27, 0.1);
}
.wes-qq-tab {
  background: none;
  border: 0;
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--ka-token-brand-color-muted, #6b6f7a);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.wes-qq-tab.is-active {
  color: var(--ka-token-brand-color-dark, #1c1d23);
  border-bottom-color: var(--ka-token-brand-color-primary, #D4A24E);
}
.wes-qq-pane { display: none; }
.wes-qq-pane.is-active { display: block; }
.wes-qq-row-line {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: stretch;
}
.wes-qq-row-sku {
  display: flex;
  align-items: stretch;
}
.wes-qq-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(20, 21, 27, 0.18);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  width: 100%;
}
.wes-qq-input:focus {
  outline: 0;
  border-color: var(--ka-token-brand-color-primary, #D4A24E);
  box-shadow: 0 0 0 3px rgba(212, 162, 78, 0.18);
}
.wes-qq-search-btn,
.wes-qq-row-remove {
  background: rgba(20, 21, 27, 0.06);
  border: 0;
  width: 40px;
  cursor: pointer;
  border-radius: 8px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ka-token-brand-color-dark, #1c1d23);
  transition: background .15s ease;
}
.wes-qq-search-btn:hover,
.wes-qq-row-remove:hover { background: rgba(20, 21, 27, 0.12); }
.wes-qq-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}
.wes-qq-cancel {
  background: transparent;
  border: 1px solid rgba(20, 21, 27, 0.2);
  color: var(--ka-token-brand-color-dark, #1c1d23);
  padding: 12px 22px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.wes-qq-cancel:hover { background: rgba(20, 21, 27, 0.06); }
.wes-qq-submit {
  background: var(--ka-token-brand-color-primary, #D4A24E);
  color: var(--ka-token-brand-color-dark, #1c1d23);
  border: 0;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .15s ease;
}
.wes-qq-submit:hover { transform: translateY(-1px); }