/*
Theme Name: Acupuncture in Lisbon
Theme URI: https://acupunctureinlisbon.com
Author: Antigravity
Author URI: https://google.com
Description: High-end, clinical, and authoritative wellness theme for Acupuncture in Lisbon (Figtree Light + Plus Jakarta Sans).
Version: 2.6.0
Text Domain: acupuncture-lisbon
*/

/**
 * 0. Warm Cashmere & Luminous Sandstone Palette
 */
:root {
    --stone-base: #FAF8F5;          /* Warm Luminous Linen */
    --stone-card: #FFFFFF;          /* Pure Pearl Card Surface */
    --stone-dim: #F4EFEA;           /* Soft Warm Cream */
    --cashmere-btn: #EAE4DC;        /* Warm Cashmere / Soft Sandstone */
    --cashmere-hover: #18231E;      /* Deep Charcoal Espresso */
    --forest-technical: #1C2E24;    /* Deep Refined Cypress */
    --noir-ink: #111813;            /* Deep Forest Charcoal (High Contrast) */
    --badge-bg: #F0EAE1;            /* Soft Sandstone Badge */
    --badge-text: #4A4237;          /* Refined Warm Bronze / Espresso */
    --gold-accent: #8C7A68;         /* Subtle Muted Gold/Bronze */
    --transition-architectural: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--stone-base);
    color: var(--noir-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * 1. Typography Hierarchy — 4B Pairing (Figtree Light 300 + Plus Jakarta Sans 200 Italic)
 */
h1, h2, h3, h4, h5, h6, .font-serif, .font-headline {
    font-family: 'Figtree', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: -0.015em;
    line-height: 1.12;
    color: inherit;
}

/* Subtle, thin, italicized accent spans & terms */
h1 span, h2 span, h3 span, h4 span, .font-serif em, .italic-thin {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 200 !important;
    font-style: italic !important;
    letter-spacing: -0.01em;
}

p, span, li, input, select, textarea, .font-sans, .font-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.text-readable {
    color: rgba(17, 24, 19, 0.92);
}

.technical-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    opacity: 0.9;
    color: inherit;
    line-height: 1.4;
}

/* Global sub-label & description legibility enhancement */
.pkg-option-card span.font-serif,
.package-option span,
.addon-card p,
.font-serif.italic:not([class*="text-"]):not([class*="!text-"]) {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.45;
    color: rgba(17, 24, 19, 0.88);
}

/**
 * 2. Elevated Cards & Structural Layout
 */
.clinical-card {
    background: var(--stone-card);
    border: 1px solid rgba(24, 35, 30, 0.1);
    box-shadow: 0 10px 30px -10px rgba(24, 35, 30, 0.05);
    border-radius: 1.25rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--noir-ink);
}

.clinical-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(24, 35, 30, 0.12);
    border-color: rgba(24, 35, 30, 0.22);
}

.clinical-border {
    border: 1px solid rgba(24, 35, 30, 0.12);
}

.badge-glow {
    background: var(--badge-bg);
    color: var(--badge-text) !important;
    border: 1px solid rgba(74, 66, 55, 0.18);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Dark-hero variant: .badge-glow's own color/background are !important,
   which (since this file loads after the Tailwind build) previously beat
   any per-instance !bg-white/10 !text-[...] !border-white/20 utility
   override on the same element with equal specificity -- leaving the badge
   text unreadable wherever this badge sits on a dark background. Compound
   selector here has higher specificity than the plain .badge-glow rule
   above, so it wins regardless of load order. */
.badge-glow.badge-glow--on-dark {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #D4C3A3 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

@media (min-width: 640px) {
    .badge-glow {
        font-size: 11px;
        letter-spacing: 0.06em;
        padding: 0.35rem 0.85rem;
        gap: 0.45rem;
    }
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: var(--gold-accent);
}

/**
 * 3. Warm Cashmere Buttons & Interactive States
 */
.btn-clinical {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--cashmere-btn);
    color: var(--noir-ink) !important;
    padding: 0.7rem 1.35rem;
    border-radius: 9999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(24, 35, 30, 0.15);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(24, 35, 30, 0.06);
    white-space: nowrap;
    box-sizing: border-box;
    max-width: 100%;
}

@media (min-width: 640px) {
    .btn-clinical {
        padding: 0.85rem 1.85rem;
        letter-spacing: 0.14em;
    }
}

.btn-clinical:hover {
    background: var(--cashmere-hover);
    color: #FAF8F5 !important;
    border-color: var(--cashmere-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(24, 35, 30, 0.22);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #FFFFFF;
    color: var(--noir-ink) !important;
    padding: 0.85rem 1.85rem;
    border-radius: 9999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1.5px solid rgba(24, 35, 30, 0.2);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(24, 35, 30, 0.03);
}

/* Dark-hero variant: same load-order/!important tie-break problem as
   .badge-glow above -- .btn-outline's own color: ...!important was beating
   the page's !bg-transparent !text-white utility override, leaving this
   button's text the same near-black as its (now transparent) background:
   effectively invisible on a dark section. */
.btn-outline.btn-outline--on-dark {
    background: transparent !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn-outline.btn-outline--on-dark:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.btn-outline:hover {
    background: var(--cashmere-btn);
    color: var(--noir-ink) !important;
    border-color: rgba(24, 35, 30, 0.35);
    transform: translateY(-2px);
}

/**
 * 4. Clinical Calm Sanctuary & Somatic Breath Pacer (Deep Calming Twilight)
 */
#clinical-sanctuary {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

#clinical-sanctuary.active {
    opacity: 1;
    pointer-events: auto;
}

#clinical-sanctuary .sanctuary-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(22, 32, 26, 0.98) 0%, rgba(16, 23, 19, 0.98) 55%, rgba(10, 15, 12, 0.99) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

/* Silent Mode & Dedicated Calm Page Header Dark Glass Integration */
body.silent-mode #site-header,
body.page-template-page-calm #site-header,
body:has(#clinical-sanctuary.active) #site-header {
    background: rgba(18, 26, 21, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

body.silent-mode #site-header .brand-title,
body.silent-mode #site-header .brand-subtitle,
body.silent-mode #site-header a,
body.silent-mode #site-header span,
body.silent-mode #site-header button,
body.page-template-page-calm #site-header .brand-title,
body.page-template-page-calm #site-header .brand-subtitle,
body.page-template-page-calm #site-header a,
body.page-template-page-calm #site-header span,
body.page-template-page-calm #site-header button,
body:has(#clinical-sanctuary.active) #site-header .brand-title,
body:has(#clinical-sanctuary.active) #site-header .brand-subtitle,
body:has(#clinical-sanctuary.active) #site-header a,
body:has(#clinical-sanctuary.active) #site-header span,
body:has(#clinical-sanctuary.active) #site-header button {
    color: #FAF8F5 !important;
}

body.silent-mode #site-header .btn-clinical,
body.page-template-page-calm #site-header .btn-clinical,
body:has(#clinical-sanctuary.active) #site-header .btn-clinical {
    background: #FAF8F5 !important;
    color: #121A15 !important;
    border-color: transparent !important;
}

/* Somatic Breathing Orb on Dark Background */
.calm-breathing-orb {
    background: radial-gradient(circle at 38% 38%, #FFFFFF 0%, #DCD3C7 45%, #9E8E7D 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 50px rgba(196, 181, 165, 0.3), inset 0 0 25px rgba(255, 255, 255, 0.85);
    animation: calmOrbBreath 11s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes calmOrbBreath {
    0%, 100% {
        transform: scale(0.74);
        box-shadow: 0 0 25px rgba(196, 181, 165, 0.15), inset 0 0 15px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.18);
        box-shadow: 0 0 85px rgba(220, 211, 199, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.95);
    }
}

/* Concentric Resonant Ripple Rings */
.calm-ripple-ring {
    pointer-events: none;
    animation: calmRippleWave 11s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.calm-ripple-1 {
    animation-delay: 0.1s;
}

.calm-ripple-2 {
    animation-delay: 0.25s;
}

.calm-ripple-3 {
    animation-delay: 0.45s;
}

.calm-ripple-4 {
    animation-delay: 0.7s;
}

@keyframes calmRippleWave {
    0%, 100% {
        transform: scale(0.82);
        opacity: 0.15;
    }
    50% {
        transform: scale(1.22);
        opacity: 0.85;
    }
}

/**
 * 5. Navigation Bar & Dropdown Stacking Rules (Highest Priority)
 */
#site-header-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
}

#masthead {
    position: relative !important;
    z-index: 999999 !important;
}

#treatments-dropdown-container {
    position: relative !important;
    z-index: 1000000 !important;
}

#treatments-dropdown-menu {
    z-index: 1000001 !important;
    background: #FFFFFF !important;
    box-shadow: 0 25px 50px -12px rgba(24, 35, 30, 0.25) !important;
}

#mobile-menu {
    z-index: 1000010 !important;
}

/**
 * 6. International Telephone & WhatsApp Input Styling
 */
.iti {
    width: 100% !important;
    display: block !important;
}
.iti__country-list {
    background-color: #FAF8F5 !important;
    border: 1px solid rgba(24, 35, 30, 0.15) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    color: #111813 !important;
    max-height: 260px !important;
    z-index: 1000 !important;
    padding: 8px 0 !important;
}
.iti__country {
    padding: 10px 16px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.iti__country.iti__highlight {
    background-color: #EAE4DC !important;
    color: #111813 !important;
}
.iti__country-name, .iti__dial-code {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.iti__search-input {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(24, 35, 30, 0.15) !important;
    padding: 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin-bottom: 4px !important;
}

/* ==========================================================================
   Treatments Navigation Dropdown & Hover Bridge
   ========================================================================== */
#treatments-dropdown-container {
    position: relative;
    z-index: 1000000 !important;
}

#treatments-dropdown-container .dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 20rem; /* 320px */
    background: #FFFFFF !important;
    border-radius: 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(28, 46, 36, 0.15);
    box-shadow: 0 25px 50px -12px rgba(24, 35, 30, 0.25) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
    z-index: 1000001 !important;
}

/* Invisible hover bridge to maintain hover state when moving mouse between button and menu items */
#treatments-dropdown-container .dropdown-panel::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
    pointer-events: auto;
}

/* Hover or Active/Open State */
#treatments-dropdown-container:hover .dropdown-panel,
#treatments-dropdown-container:focus-within .dropdown-panel,
#treatments-dropdown-container.menu-open .dropdown-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

#treatments-dropdown-container:hover .dropdown-arrow,
#treatments-dropdown-container.menu-open .dropdown-arrow {
    transform: rotate(180deg);
}

/* ==========================================================================
   Intake Form Pill Buttons & Validation Highlights
   ========================================================================== */
.intake-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid rgba(28, 46, 36, 0.18);
    background-color: rgba(255, 255, 255, 0.95);
    color: #1C2E24;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.intake-pill:hover {
    background-color: #F4EFEA;
    border-color: #1C2E24;
}

.intake-pill input[type="checkbox"],
.intake-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.intake-pill:has(input:checked),
.intake-pill.is-selected {
    background-color: #1C2E24 !important;
    color: #FFFFFF !important;
    border-color: #1C2E24 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(28, 46, 36, 0.18) !important;
}

/* Normal focus styling for al-field inputs (replaces Tailwind focus: utilities) */
.al-field:focus,
.al-field:focus-within {
    border-color: #1C2E24 !important;
    background-color: #fff !important;
}

/* Error highlight: orange border + glow, survives focus state, overrides everything */
.field-error-orange,
.field-error-orange:focus,
.field-error-orange:focus-within,
.field-error-orange:hover,
input.field-error-orange,
input.field-error-orange:focus,
textarea.field-error-orange,
textarea.field-error-orange:focus,
.field-error-orange input,
.field-error-orange input:focus,
.field-error-orange input:focus-within,
.field-error-orange textarea,
.field-error-orange textarea:focus,
.iti.field-error-orange,
.iti.field-error-orange input,
.iti.field-error-orange input:focus,
body .field-error-orange,
body input.field-error-orange:focus,
body .field-error-orange input:focus {
    border-color: #EA580C !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.30) !important;
    background-color: rgba(234, 88, 12, 0.04) !important;
    outline: none !important;
    animation: shakeError 0.35s ease-in-out;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}