/* =====================================================================
   GODDESS RITUALS — BASE STYLESHEET
   =====================================================================
   Table of Contents
   1.  Design Tokens
   2.  Global Resets & Base Element Styles
   3.  Typography Utilities
   4.  Layout Chrome (Navbar, Dropdown, Glass)
   5.  Buttons
   6.  Forms & Auth
   7.  Product / Service Grid Cards
   8.  Home — Category Nav Cards
   9.  Modal — Mask Step / Peel Reveal Animation
   10. Pagination
   11. Filter Chips
   12. Footer
   13. HTMX / Page Transition Animations
   14. Third-Party Framework Utilities (Alpine)
   ===================================================================== */


/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
    /* --- Core Brand Colors (single source of truth) --- */
    --creme: #F5F0EA;
    --gold: #C4956A;
    --midnight: #1A1208;
    --terre: #6B4F3A;
    --peau: #F0E8DC;

    /* --- Surface / Neutral Colors --- */
    --ss-bg: #fcfaf8;
    --ss-bg-rgb: 252, 250, 248; /* for transparency tricks (glass, overlays) */
    --ss-white: #ffffff;
    --ss-text: #4a4a4a;
    --ss-text-muted: #999999;
    --ss-border: #eeeeee;
    --ss-border-dark: #dddddd;
    --ss-error: #dc3545;

    /* --- Typography --- */
    --ss-font-serif: 'EB Garamond', serif;
    --ss-font-sans: 'Poppins', sans-serif;

    /* --- Motion & UI --- */
    --ss-transition-speed: 1s;
    --ss-radius: 0px; /* Luxury often uses sharp corners; set to 8px for a "Soft" UI */
}


/* =====================================================================
   2. GLOBAL RESETS & BASE ELEMENT STYLES
   ===================================================================== */
body {
    background-color: var(--ss-bg);
    color: var(--ss-text);
    font-family: var(--ss-font-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .navbar-brand {
    font-family: var(--ss-font-serif);
    color: var(--midnight);
    letter-spacing: 1px;
}

[x-cloak] {
    display: none !important;
}


/* =====================================================================
   3. TYPOGRAPHY UTILITIES
   ===================================================================== */
.font-serif  { font-family: var(--ss-font-serif); }
.font-sans   { font-family: var(--ss-font-sans); }
.font-italic { font-style: italic; }

.font-gold     { color: var(--gold); }
.font-terre    { color: var(--terre); }
.font-midnight { color: var(--midnight); }
.font-creme    { color: var(--creme); }

/* Background surfaces + the text-color pairing each one implies */
.bg-midnight {
    background-color: var(--midnight);
    color: var(--creme);
}
/* Headings inherit --midnight (midnight) globally (see section 2),
   which is invisible on a midnight background — override it here. */
.bg-midnight h1,
.bg-midnight h2,
.bg-midnight h3 {
    color: var(--creme);
}

.bg-creme {
    background-color: var(--creme);
    color: var(--midnight);
}
.bg-creme .quote {
    font-family: var(--ss-font-serif);
    font-style: italic;
    color: var(--terre);
}


/* =====================================================================
   4. LAYOUT CHROME (Navbar, Dropdown, Glass effect)
   ===================================================================== */
.glass {
    background-color: rgba(var(--ss-bg-rgb), 0.5);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dropdown-menu {
    background-color: var(--ss-bg);
    border: 1px solid var(--ss-border) !important;
}

.dropdown-item {
    font-family: var(--ss-font-sans);
    letter-spacing: 1px;
}

.dropdown-item:hover {
    background-color: var(--midnight);
    color: var(--ss-white);
}

.dropdown-toggle::after {
    vertical-align: middle;
    border-top: 0.2em solid;
    border-right: 0.2em solid transparent;
    border-left: 0.2em solid transparent;
    color: var(--gold);
}

.list-group-item:hover {
    background-color: var(--midnight);
    color: var(--ss-white);
    border: 1px solid var(--midnight);
}


/* =====================================================================
   5. BUTTONS
   ===================================================================== */
.btn-ss-primary {
    background-color: var(--midnight);
    color: var(--ss-white);
    border-radius: var(--ss-radius);
    border: 1px solid var(--midnight);
}
.btn-ss-primary:hover {
    background-color: transparent;
    color: var(--midnight);
    border: 1px solid var(--midnight);
}

.btn-gr-bright {
    background-color: var(--gold);
    color: var(--midnight);
    border-radius: var(--ss-radius);
    border: 1px solid var(--gold);
}
.btn-gr-bright:hover {
    background-color: var(--ss-white);
    color: var(--midnight);
    border: 1px solid var(--gold);
}

.btn-link {
    background-color: transparent;
    color: var(--midnight);
    border: none;
}
.btn-link:hover {
    background-color: transparent;
    color: var(--gold);
    border: none;
}

.btn-link-bright {
    background-color: var(--creme);
    color: var(--gold);
    border: none;
}
.btn-link-bright:hover {
    background-color: transparent;
    border: 1px solid var(--gold);
}

/* ── Touch Action ─────────────────────────────────────── */
.disable-zoom-tap {
    touch-action: manipulation;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background-color: #FFFFFF;
    border: 1px solid #747775;
    border-radius: 4px;
    color: #1F1F1F;
    font-family: 'Google Sans', Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-google:hover {
    background-color: #F7F8F8;
    color: #1F1F1F;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}
.btn-google:focus-visible {
    outline: 3px solid #747775;
    outline-offset: 2px;
}
.btn-google img {
    display: block;
    width: 20px;
    height: 20px;
}
.email-toggle .bi { transition: transform 0.2s ease; }
.email-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .btn-google,
    .email-toggle .bi { transition: none; }
}


/* =====================================================================
   6. FORMS & AUTH
   ===================================================================== */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 12px 0;
    color: var(--midnight);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--ss-border-dark);
    border-radius: var(--ss-radius);
    transition: border-color var(--ss-transition-speed) ease;
}

.newsletter-input {
    display: block;
    width: 100%;
    padding: 12px 0;
    color: var(--ss-white);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--ss-border-dark);
    border-radius: var(--ss-radius);
    transition: border-color var(--ss-transition-speed) ease;
}

.auth-form input:focus,
.newsletter-input:focus {
    outline: none;
    box-shadow: none;
    border-bottom: 1px solid var(--gold);
}

.auth-form ul.errorlist {
    list-style: none;
    padding: 0;
    color: var(--ss-error);
    font-size: 0.8rem;
}


/* =====================================================================
   7. PRODUCT / SERVICE GRID CARDS
   ===================================================================== */
.gr-card .ss-image {
    transition: all var(--ss-transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
}
.gr-card:hover .ss-image {
    transform: scale(1.1);
    transition: all var(--ss-transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
}
.gr-card:hover .gr-view-text {
    opacity: 0.7 !important;
    transform: translateY(0);
}

/* Quick-view text overlay: background-color + backdrop-filter gives the glass effect */
.gr-view-text {
    background-color: rgba(var(--ss-bg-rgb), 0.5);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    transition: all var(--ss-transition-speed) ease;
    transform: translateY(10px);
    border: 1px solid var(--ss-border);
}


/* =====================================================================
   8. HOME — CATEGORY NAV CARDS
   ===================================================================== */
.ss-nav-card {
    position: relative;
    /* background-color: var(--terre); */
    color: var(--creme);
    border-color: var(--ss-border-dark) !important;
    transition: border-color var(--ss-transition-speed) ease,
                transform var(--ss-transition-speed) ease;
    overflow: hidden;
}

.ss-nav-card:hover {
    border-color: var(--gold) !important;
    transform: translateY(-4px);
}

.ss-nav-card:hover .ss-nav-card-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* Content sits above the peel overlay (see section 9) */
.ss-nav-card .content {
    position: relative;
    z-index: 2;
}

/* Reveal on scroll-into-view. --reveal-delay is set per-card inline
   so the stagger is controlled from the template, while duration/
   easing stay defined once on .peel itself (section 9). */
.ss-nav-card.visible .peel {
    transform: scaleY(0);
    transition-delay: var(--reveal-delay, 0s);
}

.gr-hero-reveal {
    animation: gr-rise 600ms ease-out both;
}
@keyframes gr-rise {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .gr-hero-reveal { animation: none; }
}

/* =====================================================================
   9. MODAL — MASK STEP / PEEL REVEAL ANIMATION
   ===================================================================== */
.mask-step {
    position: relative;
    overflow: hidden;
}
.mask-step .content {
    position: relative;
    z-index: 2;
}
.mask-step.visible .peel {
    transform: scaleY(0);
}

.peel {
    position: absolute;
    inset: 0;
    background: var(--peau);
    transform-origin: top center;
    transform: scaleY(1);
    transition: transform 1.6s cubic-bezier(.65, 0, .35, 1);
    z-index: 1;
}

/* .peel is shared by the modal mask-steps (section 9) and the home
   nav cards (section 8) — handle reduced motion for both here rather
   than duplicating the rule in each section. */
@media (prefers-reduced-motion: reduce) {
    .peel {
        transition: none;
    }
}


/* =====================================================================
   10. PAGINATION
   ===================================================================== */
.pagination {
    gap: 4px;
}

.page-link {
    color: var(--ss-text);
    background-color: transparent;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    font-family: var(--ss-font-sans);
    transition: all var(--ss-transition-speed) ease;
}

.page-link:hover {
    background-color: var(--midnight);
    color: var(--ss-white);
    border-color: var(--midnight);
}

.page-item.active .page-link {
    background-color: transparent;
    color: var(--gold);
    border-color: var(--gold);
    font-weight: bold;
}

.page-item.disabled .page-link {
    color: var(--ss-text-muted);
    background-color: transparent;
    border-color: var(--ss-border);
}


/* =====================================================================
   11. FILTER CHIPS
   ===================================================================== */
.ss-chip-row {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.ss-chip-row::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.ss-chip {
    font-family: var(--ss-font-sans);
    color: var(--ss-text);
    background-color: transparent;
    border-radius: var(--ss-radius);
    transition: all var(--ss-transition-speed) ease;
    cursor: pointer;
}

/* Active state uses the primary (midnight) color, not the accent —
   keep as-is to match existing active-chip visuals across the site. */
.ss-chip.ss-chip-active {
    background-color: var(--midnight);
    color: var(--ss-white);
    border-color: var(--midnight);
}


/* =====================================================================
   12. FOOTER
   ===================================================================== */
footer {
    background-color: var(--midnight);
    color: var(--ss-white);
    border-top: 1px solid var(--ss-border);
}

footer a {
    color: var(--gold);
    text-decoration: none;
}

.footer-brand {
    font-family: var(--ss-font-serif);
    color: var(--gold);
    text-decoration: none;
}
.footer-brand:hover {
    color: var(--ss-white);
}

.footer-header {
    letter-spacing: 2px;
}

.footer-link {
    color: var(--gold);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--ss-white);
}


/* =====================================================================
   13. HTMX / PAGE TRANSITION ANIMATIONS
   ===================================================================== */
.htmx-swapping {
    opacity: 0;
    transition: opacity var(--ss-transition-speed) ease-out;
}

.fade-in {
    animation: fadeIn 0.8s ease-in forwards;
}

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

/* =====================================================================
   14. BUTTON BASKET/CART FEEDBACK
   ===================================================================== */

/* The button that has just become "Review booking". Settles up into place
   with a slight overshoot — the scale past 1 is what reads as "landed",
   rather than merely "appeared". */
.gr-added {
    animation: grAdded 1s cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 0.3s; /* give the user a moment to see the button before it animates */
}

@keyframes grAdded {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    60%  { opacity: 1; transform: translateY(0) scale(1.1); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The navbar badge, when a service has just arrived in it. Fires only on the
   out-of-band swap, never on a plain page load — a badge that pops every time
   you open a page is noise, not feedback. */
.gr-badge-pop {
    animation: grBadgePop 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes grBadgePop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gr-added,
    .gr-badge-pop {
        animation: none;
    }
}