/* =============================================================================
 * SPA — REUSABLE UI COMPONENTS  (spa-components.css)
 *
 * Atoms and small molecules that appear across multiple sections.
 * Nothing section-specific lives here — see spa-sections.css.
 *
 * Also contains:
 *   0. Accessibility utilities (.spa-sr-only)
 *
 * Contents:
 *   1. Buttons
 *   2. Section header (eyebrow + title + divider)
 *   3. Service / feature cards
 *   4. Testimonial card
 *   5. Hours table
 * ============================================================================= */


/* ── 0. ACCESSIBILITY UTILITIES ─────────────────────────────────────────── */

/**
 * Visually hidden but available to screen readers and keyboard focus.
 * Use .spa-sr-only on any element that needs to be announced by assistive
 * technology but should not appear on screen.
 */
.spa-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── 1. BUTTONS ─────────────────────────────────────────────────────────── */

/**
 * .spa-btn-primary  — filled gold pill; main CTA
 * .spa-btn-outline  — outlined sage pill; secondary action
 * .spa-btn-white    — white pill on coloured backgrounds
 *
 * All buttons share base typography; hover lifts the element slightly.
 */
.spa-btn-primary,
.spa-btn-outline,
.spa-btn-white {
    display: inline-block;
    font-size: var(--spa-text-xs);
    font-weight: 700;
    letter-spacing: var(--spa-tracking-wide);
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: var(--spa-radius-pill);
    transition: background var(--spa-transition-base),
                color var(--spa-transition-base),
                transform 0.2s ease;
    cursor: pointer;
}

.spa-btn-primary {
    padding: 16px 44px;
    background: var(--spa-gold);
    color: var(--spa-white) !important;
    border: none;
}
.spa-btn-primary:hover,
.spa-btn-primary:focus-visible {
    background: var(--spa-gold-dark);
    transform: translateY(-2px);
}

.spa-btn-outline {
    padding: 14px 38px;
    background: transparent;
    color: var(--spa-sage) !important;
    border: 2px solid var(--spa-sage);
    margin-left: var(--spa-sm, 16px);
}
.spa-btn-outline:hover,
.spa-btn-outline:focus-visible {
    background: var(--spa-sage);
    color: var(--spa-white) !important;
}

.spa-btn-white {
    padding: 16px 48px;
    background: var(--spa-white);
    color: var(--spa-sage) !important;
    border: none;
}
.spa-btn-white:hover,
.spa-btn-white:focus-visible {
    background: var(--spa-gold);
    color: var(--spa-white) !important;
}


/* ── 2. SECTION HEADER ──────────────────────────────────────────────────── */

/**
 * Standard section intro block used by most sections.
 * Modifier .spa-section__header--left overrides centre-alignment
 * for the About section split layout.
 */
.spa-section {
    padding: var(--spa-space-2xl) var(--spa-space-md);
}
.spa-section--alt {
    background: var(--spa-cream);
}

.spa-section__header {
    text-align: center;
    margin-bottom: var(--spa-space-xl);
}
.spa-section__header--left {
    text-align: left;
    margin-bottom: var(--spa-space-md);
}

.spa-section__eyebrow {
    display: block;
    font-size: var(--spa-text-xs);
    font-weight: 700;
    letter-spacing: var(--spa-tracking-label);
    text-transform: uppercase;
    color: var(--spa-sage);
    margin-bottom: 14px;
}

.spa-section__title {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 300;
    color: var(--spa-dark);
    font-family: var(--spa-font-serif);
    margin: 0 0 var(--spa-space-sm);
    line-height: var(--spa-leading-tight);
}

.spa-section__divider {
    width: 48px;
    height: 2px;
    background: var(--spa-gold);
    margin: 0 auto;
}
.spa-section__header--left .spa-section__divider {
    margin: 0;
}


/* ── 3. SERVICE / FEATURE CARDS ─────────────────────────────────────────── */

.spa-card {
    background: var(--spa-white);
    border-radius: var(--spa-radius-lg);
    overflow: hidden;
    box-shadow: var(--spa-shadow-card);
    transition: var(--spa-transition-lift);
}
.spa-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--spa-shadow-card-hover);
}

.spa-card__img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.spa-card__body {
    padding: 28px var(--spa-space-md);
}

.spa-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--spa-dark);
    margin-bottom: 10px;
    font-family: var(--spa-font-serif);
}

.spa-card__desc {
    font-size: 14px;
    color: var(--spa-mid);
    line-height: 1.7;
    margin-bottom: var(--spa-space-md);
}

.spa-card__link {
    font-size: var(--spa-text-xs);
    font-weight: 700;
    letter-spacing: var(--spa-tracking-wide);
    text-transform: uppercase;
    color: var(--spa-sage) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--spa-sage);
    padding-bottom: 2px;
    transition: color var(--spa-transition-base),
                border-color var(--spa-transition-base);
}
.spa-card__link:hover {
    color: var(--spa-gold) !important;
    border-color: var(--spa-gold);
}


/* ── 4. TESTIMONIAL CARD ────────────────────────────────────────────────── */

.spa-testi {
    background: var(--spa-white);
    border-radius: var(--spa-radius-lg);
    padding: 36px 32px;
    box-shadow: var(--spa-shadow-card);
    position: relative;
}

/* Large decorative opening quotation mark */
.spa-testi::before {
    content: '\201C';   /* Unicode left double quotation mark */
    font-size: 80px;
    font-family: var(--spa-font-serif);
    color: var(--spa-sage-light);
    line-height: 1;
    position: absolute;
    top: 12px;
    left: var(--spa-space-md);
    opacity: 0.5;
    pointer-events: none;
}

.spa-testi__stars   { color: var(--spa-gold); font-size: 14px; margin-bottom: var(--spa-space-sm); }
.spa-testi__text    { font-size: 14px; color: var(--spa-mid); line-height: 1.8; margin-bottom: var(--spa-space-md); font-style: italic; }
.spa-testi__author  { font-size: var(--spa-text-sm); font-weight: 700; color: var(--spa-dark); }
.spa-testi__role    { font-size: 12px; color: var(--spa-sage); }


/* ── 5. HOURS TABLE ─────────────────────────────────────────────────────── */

.spa-hours-wrap {
    max-width: 700px;
    margin: 0 auto;
}

.spa-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--spa-text-base);
}

.spa-hours-table th {
    background: var(--spa-sage);
    color: var(--spa-white);
    padding: 14px var(--spa-space-md);
    text-align: left;
    font-weight: 600;
    font-size: var(--spa-text-xs);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.spa-hours-table td {
    padding: var(--spa-space-sm) var(--spa-space-md);
    border-bottom: 1px solid var(--spa-border);
    color: var(--spa-dark);
}

.spa-hours-table tr:last-child td { border-bottom: none; }
.spa-hours-table tr:nth-child(even) td { background: var(--spa-cream); }

.spa-hours-note {
    text-align: center;
    margin-top: var(--spa-space-sm);
    font-size: var(--spa-text-sm);
    color: var(--spa-mid);
    font-style: italic;
}