/* ═══════════════════════════════════════════════════════
   ECM Theme Selector — Burgundy Theme Override
   Overrides --sage, --sage-light, --sage-pale and all
   hardcoded sage hex values when data-theme="burgundy"
   is set on <html>.
   ═══════════════════════════════════════════════════════ */

/* ── CSS variable overrides ─────────────────────────── */
:root[data-theme="burgundy"] {
  --sage:       #630e11;
  --sage-light: #c47076;
  --sage-pale:  #fdf2f2;
}

/* ── Focus ring ─────────────────────────────────────── */
[data-theme="burgundy"] :is(a, button, input, select, textarea):focus-visible {
  outline-color: #630e11;
}

/* ── Hover states that use hardcoded #6a8e6e ────────── */
[data-theme="burgundy"] .btn-sage:hover,
[data-theme="burgundy"] .btn-primary-lg:hover,
[data-theme="burgundy"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
[data-theme="burgundy"] .package-card--popular .package-cta:hover,
[data-theme="burgundy"] .search-bar-btn:hover,
[data-theme="burgundy"] .blog-subscribe-btn:hover,
[data-theme="burgundy"] .ecm-page-content #job_package_selection .job_listing_packages_title .button:hover,
[data-theme="burgundy"] .chat-fab:hover,
[data-theme="burgundy"] .form-submit:hover,
[data-theme="burgundy"] .fp-hero-cta--primary:hover,
[data-theme="burgundy"] .fp-form-submit:hover,
[data-theme="burgundy"] .fp-cta-btn:hover,
[data-theme="burgundy"] .fp-form-wrap button[type="submit"]:hover,
[data-theme="burgundy"] .chat-text-submit:hover,
[data-theme="burgundy"] .plan-card--popular .plan-card-cta-btn:hover,
[data-theme="burgundy"] .newsletter-signup__form .wpforms-submit:hover,
[data-theme="burgundy"] .newsletter-signup__form .wpforms-submit:focus-visible {
  background: #8b1a1d !important;
  border-color: #8b1a1d !important;
}

/* ── Gradient that hardcodes #628567 as end stop ────── */
[data-theme="burgundy"] .care-card--cta {
  background: linear-gradient(160deg, #630e11 0%, #8b1a1d 100%);
}

/* ── Why-cards — hardcoded #e5eee3 sage-green background ── */
[data-theme="burgundy"] .why-card         { background: #f5dfe0; }
[data-theme="burgundy"] .why-card:hover   { background: var(--sage); }

/* ── Provider CTA section — gradient end + glow use hardcoded sage-green ── */
[data-theme="burgundy"] .provider-cta {
  background: linear-gradient(135deg, var(--sage-pale) 0%, #e8b8bb 100%);
}
[data-theme="burgundy"] .provider-cta::before {
  background: radial-gradient(circle, rgba(196,112,118,0.25) 0%, transparent 70%);
}

/* ── Newsletter focus ring rgba ─────────────────────── */
[data-theme="burgundy"] .newsletter-signup__form .wpforms-submit:focus-visible {
  outline: 3px solid rgba(99, 14, 17, 0.2) !important;
}

/* ── Footer background ──────────────────────────────── */
[data-theme="burgundy"] footer {
  background-color: #4D3E3A;
}

/* ── Footer link hover — #c47076 on #4D3E3A is only 2.87:1 (fail).
      Lightened to #f0b4b7 → 5.78:1 ✓                           ── */
[data-theme="burgundy"] .footer-links a:hover {
  color: #f0b4b7;
}

/* ── Logo — hue-rotate only, same approach as ocean/plum, keeps two-colour split ── */
[data-theme="burgundy"] .nav-logo-image {
  filter: hue-rotate(167deg) saturate(1.2) brightness(0.88);
}

/* ── Visible input focus shadow ─────────────────────── */
[data-theme="burgundy"] .blog-subscribe-input:focus,
[data-theme="burgundy"] .form-field input:focus,
[data-theme="burgundy"] .form-field textarea:focus {
  box-shadow: 0 0 0 4px rgba(99, 14, 17, 0.12);
}


/* ═══════════════════════════════════════════════════════
   ECM Theme Selector — Ocean (Navy Blue) Theme Override
   ═══════════════════════════════════════════════════════ */

:root[data-theme="ocean"] {
  --sage:       #1a4571;
  --sage-light: #6a9fd4;
  --sage-pale:  #e8f3fb;
}

[data-theme="ocean"] :is(a, button, input, select, textarea):focus-visible {
  outline-color: #1a4571;
}

[data-theme="ocean"] .btn-sage:hover,
[data-theme="ocean"] .btn-primary-lg:hover,
[data-theme="ocean"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
[data-theme="ocean"] .package-card--popular .package-cta:hover,
[data-theme="ocean"] .search-bar-btn:hover,
[data-theme="ocean"] .blog-subscribe-btn:hover,
[data-theme="ocean"] .ecm-page-content #job_package_selection .job_listing_packages_title .button:hover,
[data-theme="ocean"] .chat-fab:hover,
[data-theme="ocean"] .form-submit:hover,
[data-theme="ocean"] .fp-hero-cta--primary:hover,
[data-theme="ocean"] .fp-form-submit:hover,
[data-theme="ocean"] .fp-cta-btn:hover,
[data-theme="ocean"] .fp-form-wrap button[type="submit"]:hover,
[data-theme="ocean"] .chat-text-submit:hover,
[data-theme="ocean"] .plan-card--popular .plan-card-cta-btn:hover,
[data-theme="ocean"] .newsletter-signup__form .wpforms-submit:hover,
[data-theme="ocean"] .newsletter-signup__form .wpforms-submit:focus-visible {
  background: #143661 !important;
  border-color: #143661 !important;
}

[data-theme="ocean"] .care-card--cta {
  background: linear-gradient(160deg, #1a4571 0%, #2a6098 100%);
}

/* ── Why-cards ── */
[data-theme="ocean"] .why-card         { background: #d4e9f7; }
[data-theme="ocean"] .why-card:hover   { background: var(--sage); }

/* ── Provider CTA section ── */
[data-theme="ocean"] .provider-cta {
  background: linear-gradient(135deg, var(--sage-pale) 0%, #b8d4ec 100%);
}
[data-theme="ocean"] .provider-cta::before {
  background: radial-gradient(circle, rgba(106,159,212,0.25) 0%, transparent 70%);
}

[data-theme="ocean"] .newsletter-signup__form .wpforms-submit:focus-visible {
  outline: 3px solid rgba(26, 69, 113, 0.2) !important;
}

[data-theme="ocean"] footer {
  background-color: #0f2235;
}

/* ── Logo — slight hue shift toward blue, matches navy family ── */
[data-theme="ocean"] .nav-logo-image {
  filter: hue-rotate(22deg) saturate(1.1) brightness(0.92);
}

[data-theme="ocean"] .blog-subscribe-input:focus,
[data-theme="ocean"] .form-field input:focus,
[data-theme="ocean"] .form-field textarea:focus {
  box-shadow: 0 0 0 4px rgba(26, 69, 113, 0.12);
}


/* ═══════════════════════════════════════════════════════
   ECM Theme Selector — Plum (Warm Purple) Theme Override
   ═══════════════════════════════════════════════════════ */

:root[data-theme="plum"] {
  --sage:       #5c2d6e;
  --sage-light: #a87cbf;
  --sage-pale:  #f5edf9;
}

[data-theme="plum"] :is(a, button, input, select, textarea):focus-visible {
  outline-color: #5c2d6e;
}

[data-theme="plum"] .btn-sage:hover,
[data-theme="plum"] .btn-primary-lg:hover,
[data-theme="plum"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
[data-theme="plum"] .package-card--popular .package-cta:hover,
[data-theme="plum"] .search-bar-btn:hover,
[data-theme="plum"] .blog-subscribe-btn:hover,
[data-theme="plum"] .ecm-page-content #job_package_selection .job_listing_packages_title .button:hover,
[data-theme="plum"] .chat-fab:hover,
[data-theme="plum"] .form-submit:hover,
[data-theme="plum"] .fp-hero-cta--primary:hover,
[data-theme="plum"] .fp-form-submit:hover,
[data-theme="plum"] .fp-cta-btn:hover,
[data-theme="plum"] .fp-form-wrap button[type="submit"]:hover,
[data-theme="plum"] .chat-text-submit:hover,
[data-theme="plum"] .plan-card--popular .plan-card-cta-btn:hover,
[data-theme="plum"] .newsletter-signup__form .wpforms-submit:hover,
[data-theme="plum"] .newsletter-signup__form .wpforms-submit:focus-visible {
  background: #4a2358 !important;
  border-color: #4a2358 !important;
}

[data-theme="plum"] .care-card--cta {
  background: linear-gradient(160deg, #5c2d6e 0%, #703485 100%);
}

/* ── Why-cards ── */
[data-theme="plum"] .why-card         { background: #ecdaf5; }
[data-theme="plum"] .why-card:hover   { background: var(--sage); }

/* ── Provider CTA section ── */
[data-theme="plum"] .provider-cta {
  background: linear-gradient(135deg, var(--sage-pale) 0%, #dbc2e8 100%);
}
[data-theme="plum"] .provider-cta::before {
  background: radial-gradient(circle, rgba(168,124,191,0.25) 0%, transparent 70%);
}

[data-theme="plum"] .newsletter-signup__form .wpforms-submit:focus-visible {
  outline: 3px solid rgba(92, 45, 110, 0.2) !important;
}

[data-theme="plum"] footer {
  background-color: #2d1738;
}

/* ── Logo — shift to purple/violet family, matches plum ── */
[data-theme="plum"] .nav-logo-image {
  filter: hue-rotate(96deg) saturate(0.9) brightness(0.9);
}

[data-theme="plum"] .blog-subscribe-input:focus,
[data-theme="plum"] .form-field input:focus,
[data-theme="plum"] .form-field textarea:focus {
  box-shadow: 0 0 0 4px rgba(92, 45, 110, 0.12);
}


/* ═══════════════════════════════════════════════════════
   ECM Theme Selector — Widget Styles
   Floating palette button + theme picker panel
   ═══════════════════════════════════════════════════════ */

.ecm-ts {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9000;
  font-family: 'DM Sans', Arial, Helvetica, sans-serif;
}

/* ── Trigger button ──────────────────────────────────── */
.ecm-ts__btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sage);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.20);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #fff;
}

.ecm-ts__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.26);
}

.ecm-ts__btn:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 3px;
}

/* ── Panel ──────────────────────────────────────────── */
.ecm-ts__panel {
  position: absolute;
  bottom: 62px;
  left: 0;
  width: 258px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 44px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  padding: 8px;
  display: none;
  transform-origin: bottom left;
}

.ecm-ts__panel.open {
  display: block;
  animation: ecmTsIn 0.18s cubic-bezier(0.34, 1.26, 0.64, 1);
}

@keyframes ecmTsIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Panel header ───────────────────────────────────── */
.ecm-ts__header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9a9a9a;
  padding: 8px 14px 6px;
}

/* ── Individual theme option ────────────────────────── */
.ecm-ts__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border: 2px solid transparent;
  outline: none;
}

.ecm-ts__item:hover {
  background: #f7f7f6;
}

.ecm-ts__item:focus-visible {
  border-color: var(--sage);
}

.ecm-ts__item[aria-selected="true"] {
  border-color: var(--sage);
  background: var(--sage-pale);
}

/* ── Color swatch (half-circle split) ──────────────── */
.ecm-ts__swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  border: 1.5px solid rgba(0,0,0,0.09);
}

.ecm-ts__swatch span {
  display: block;
  flex: 1;
  height: 100%;
}

/* ── Text labels ────────────────────────────────────── */
.ecm-ts__info {
  flex: 1;
  min-width: 0;
}

.ecm-ts__info strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2933;
  line-height: 1.2;
}

.ecm-ts__info span {
  display: block;
  font-size: 0.78rem;
  color: #777;
  margin-top: 2px;
  line-height: 1.3;
}

/* ── Checkmark for selected ─────────────────────────── */
.ecm-ts__check {
  flex-shrink: 0;
  color: var(--sage);
  opacity: 0;
  transition: opacity 0.15s;
}

.ecm-ts__item[aria-selected="true"] .ecm-ts__check {
  opacity: 1;
}

/* ── Responsive: move up on mobile so it clears the
      iOS Safari bottom bar                           ─── */
@media (max-width: 768px) {
  .ecm-ts {
    bottom: 20px;
    left: 16px;
  }
  .ecm-ts__btn {
    width: 46px;
    height: 46px;
  }
}