/* ==========================================================================
   WCPA theme switch — "Bluish" (default) ↔ "Moss/Clay"  (Session 11)
   --------------------------------------------------------------------------
   This file carries the FULL Moss/Clay scheme, scoped under
   `body.theme-moss`. Default (no class) = the current site-wide bluish
   scheme (#273c66 footer / #334e82 newsletter card / #21a7d0 buttons &
   nav) — NOTHING in here applies until theme-switch.js (or the visitor's
   saved choice) turns the Moss/Clay theme on, so adding this file to a
   page changes nothing visually until toggled.

   History: these rules lived as page-scoped demo <style> blocks on
   contact.html + workshops/workshop-the-art-of-cueing-pilates-on-
   suspension-straps.html (S9/S10) so Natalia could compare schemes. S11
   re-homed them here verbatim — extended with the booking-page buttons
   (.btn-book + the terms-gate button) and the workshops.html filter so
   EVERY page reads as one scheme in either mode — and deleted the page
   blocks.

   Endgame: when Natalia picks a winner, the winner becomes the DEFAULT
   (move these values into style.css / the page inline blocks, then delete
   this layer + the toggle). Do NOT `git revert 88e416d` — that rollback
   path was retired in S10 (stale commit vs diverged inline styles =
   conflicts). See AGENTS.md + next-session.md decision log.
   ========================================================================== */

/* --- Topbar strip → Moss ---------------------------------------------------
   !important required: style.css's `.dark-parimary-bg { background:#203154
   !important }` would otherwise win (this was the "still bluish topbar"
   bug fixed on the demo pages in S10). */
body.theme-moss .topbar-area.dark-parimary-bg { background: #2E4036 !important; }

/* --- Footer + newsletter card → Moss shades -------------------------------- */
body.theme-moss .rs-footer { background-color: #2E4036; }
body.theme-moss .rs-newsletter.style1 .newsletter-wrap { background: #3A5145; }

/* --- Nav menu hover + active/current item → Clay ----------------------------
   Out-specifies the end-of-file nav block in style.css (which sets the
   light-blue hover/active with !important). */
body.theme-moss .full-width-header.home1-modifiy .rs-header .menu-area .rs-menu-area .main-menu .rs-menu ul.nav-menu li a:hover { color: #CC5833 !important; transition: color 0.25s ease; }
body.theme-moss .full-width-header.home1-modifiy .rs-header .menu-area .rs-menu-area .main-menu .rs-menu ul.nav-menu li.current-menu-item > a,
body.theme-moss .full-width-header.home1-modifiy .rs-header .menu-area .rs-menu-area .main-menu .rs-menu ul.nav-menu li.active > a { color: #CC5833 !important; }

/* --- Footer menu hover + bullets → Clay ------------------------------------- */
body.theme-moss .rs-footer .footer-top .site-map li a { transition: color 0.25s ease; }
body.theme-moss .rs-footer .footer-top .site-map li a:hover { color: #CC5833 !important; }
body.theme-moss .rs-footer .footer-top .site-map li:before { background: #CC5833 !important; }

/* --- All CTA buttons → Clay (#b04724 on hover) ------------------------------
   .readon (Send Message, CTAs), .apply-btn (topbar "Book Workshop"),
   .btn-register (workshop detail pages), .btn-book (booking pages).
   !important: the button rules in style.css and each page's inline
   <style> would otherwise win. */
body.theme-moss .readon,
body.theme-moss .apply-btn,
body.theme-moss .btn-register,
body.theme-moss .btn-book { background: #CC5833 !important; }
body.theme-moss .readon:hover,
body.theme-moss .apply-btn:hover,
body.theme-moss .btn-register:hover,
body.theme-moss .btn-book:hover { background: #b04724 !important; }
/* .btn-book's inline hover glow is bluish — swap it for the Clay glow */
body.theme-moss .btn-book:hover { box-shadow: 0 8px 24px rgba(204, 88, 51, 0.35) !important; }

/* Terms-gate "Show Available Dates" button (workout-and-learn/* pages) */
body.theme-moss .terms-gate button { background: #CC5833 !important; }
body.theme-moss .terms-gate button:not(:disabled):hover { background: #b04724 !important; }

/* --- Newsletter submit → Clay ------------------------------------------------ */
body.theme-moss .rs-newsletter.style1 .newsletter-wrap .newsletter-form button { background: #CC5833 !important; }
body.theme-moss .rs-newsletter.style1 .newsletter-wrap .newsletter-form button:hover { background: #b04724 !important; }

/* --- Topbar "Contact Us" envelope icon + link hover → Clay ------------------- */
body.theme-moss .topbar-area .topbar-right li.login-register i { color: #CC5833 !important; }
body.theme-moss .topbar-area .topbar-right li.login-register a:hover { color: #CC5833 !important; }

/* --- workshops.html class-filter active state → Clay -------------------------
   (extended beyond the original two demo pages so the scheme is one
   consistent system on every page) */
body.theme-moss .gridFilter button.active { color: #CC5833; }
body.theme-moss .gridFilter button.active::after { background: #CC5833; }

/* ==========================================================================
   The switch UI — markup injected by theme-switch.js
   (fixed pill, bottom-right; styles live here so the look is one file)
   ========================================================================== */
.wcpa-theme-switch {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(242, 240, 233, 0.14);
    border-radius: 999px;
    padding: 6px 8px 6px 16px;
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.28);
    font-family: 'Outfit', sans-serif;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.wcpa-theme-switch.wcpa-ts-visible {
    opacity: 1;
    transform: translateY(0);
}
.wcpa-theme-switch .wcpa-ts-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(242, 240, 233, 0.66);
    white-space: nowrap;
}
.wcpa-ts-options {
    display: flex;
    gap: 3px;
    background: rgba(242, 240, 233, 0.08);
    border-radius: 999px;
    padding: 3px;
}
.wcpa-ts-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    cursor: pointer;
    background: transparent;
    color: rgba(242, 240, 233, 0.72);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.wcpa-ts-option:hover {
    background: rgba(242, 240, 233, 0.12);
    color: #F2F0E9;
}
.wcpa-ts-option:active { transform: scale(0.97); }
.wcpa-ts-option:focus-visible {
    outline: 2px solid #F2F0E9;
    outline-offset: 2px;
}
.wcpa-ts-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(242, 240, 233, 0.35);
}
.wcpa-ts-swatch--bluish { background: #21a7d0; }
.wcpa-ts-swatch--moss { background: linear-gradient(135deg, #2E4036 50%, #CC5833 50%); }
.wcpa-ts-option[aria-pressed="true"].wcpa-ts-option--bluish { background: #21a7d0; color: #1A1A1A; }
.wcpa-ts-option[aria-pressed="true"].wcpa-ts-option--moss { background: #2E4036; color: #F2F0E9; }
.wcpa-ts-option[aria-pressed="true"] .wcpa-ts-swatch { box-shadow: inset 0 0 0 1px rgba(242, 240, 233, 0.6); }

@media (max-width: 575px) {
    .wcpa-theme-switch {
        right: 12px;
        bottom: 12px;
        gap: 7px;
        padding: 5px 6px 5px 12px;
    }
    .wcpa-theme-switch .wcpa-ts-label { display: none; }
    .wcpa-ts-option {
        font-size: 12px;
        padding: 7px 11px;
    }
}
@media print {
    .wcpa-theme-switch { display: none; }
}