/*
 * assets/css/theme-cairn.css
 * ─────────────────────────────────────────────────────────────────────────────
 * "Cairn" theme – Highland cattle ranch.
 *
 * Palette inspired by Highland cattle coats (warm amber, deep peat brown),
 * Scottish moorland (heather slate, straw cream) and open skies (cool grey-blue).
 * Modern and contemporary in structure, warm and characterful in colour.
 *
 * To activate: set SITE_THEME = 'cairn' in config/site.php
 *
 * HOW THEME FILES WORK
 * ─────────────────────
 * The :root block below redefines all CSS variables consumed by base.css,
 * layout.css and components.css. The selector overrides further down handle
 * the handful of places where components.css uses hardcoded rgba() values
 * (badge backgrounds, focus rings, etc.) that can't be reached via variables
 * alone. This is the correct pattern – keep variable redefinitions at the top,
 * selector overrides below, clearly separated.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Google Fonts: keep Cormorant Garamond, swap body to Source Serif / Lato ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Lato:wght@300;400;500&display=swap');

/* ══ 1. CSS VARIABLES ════════════════════════════════════════════════════════ */

:root {
    /* ── Colour palette ── */
    --color-background:   #F9F5EF;   /* warm parchment cream – lightened for contrast */
    --color-surface:       #FFFFFF;   /* pure white for cards and form areas */
    --color-primary:      #B5651D;   /* Highland coat amber-brown */
    --color-primary-dark: #8B4513;   /* deeper saddle brown on hover */
    --color-secondary:    #C9B59A;   /* dry straw – slightly darker for border contrast */
    --color-accent:       #6B4E2A;   /* dark peat brown for strong text */
    --color-text:         #2E1F0F;   /* near-black warm brown */
    --color-text-light:   #5C3D1E;   /* deeper warm brown – stronger contrast */
    --color-full:         #B0A898;   /* muted stone grey for unavailable */
    --color-white:        #FFFFFF;   /* true white for card/form backgrounds */

    /* ── Shadows – warmer tint ── */
    --shadow-soft:  0 4px 20px rgba(46, 31, 15, 0.08);
    --shadow-hover: 0 8px 30px rgba(46, 31, 15, 0.16);

    /* ── Border radii – slightly squarer for a more grounded feel ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* ── Transitions ── */
    --transition: all 0.3s ease-in-out;

    /* ── Typography ── */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body:    'Lato', sans-serif;
}


/* ══ 2. SELECTOR OVERRIDES ═══════════════════════════════════════════════════
   These override the handful of components.css rules that use hardcoded
   rgba() green values instead of CSS variables.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Form focus ring ── */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    box-shadow: 0 0 0 3px rgba(181, 101, 29, 0.18);
}

/* ── Custom select chevron ── */
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23B5651D' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

/* ── Radio button checked state ── */
.radio-label:has(input:checked) {
    background-color: rgba(181, 101, 29, 0.07);
}

/* ── Class availability badges ── */
.class-badge.Tilaa {
    background-color: rgba(181, 101, 29, 0.12);
    color: var(--color-primary-dark);
}

.class-badge.few-spots {
    background-color: rgba(181, 101, 29, 0.2);
    color: var(--color-primary);
}

.class-badge.full {
    background-color: rgba(176, 168, 152, 0.25);
    color: var(--color-full);
}

/* ── Classes section background – warm moorland instead of green ── */
.classes {
    background-color: #E8DDD0;   /* slightly deeper moorland tone */
    background-image: radial-gradient(circle at 20% 80%, rgba(181, 101, 29, 0.12) 0%, transparent 50%);
}

/* ── Course waitlist note ── */
.course-waitlist-note {
    background: rgba(217, 201, 176, 0.4);
    border-color: var(--color-secondary);
    border-left-color: var(--color-primary);
}

/* ── Form success banner ── */
.form-success {
    background-color: rgba(181, 101, 29, 0.08);
    color: var(--color-accent);
    border-color: rgba(181, 101, 29, 0.3);
}

/* ── Nav logo colour ── */
.nav-logo {
    color: var(--color-primary);
}

/* ── Nav underline on hover ── */
.nav-links a::after {
    background-color: var(--color-primary);
}

/* ── About section: white bg → warm cream ── */
.about,
.contact {
    background-color: var(--color-white);
}

/* ── Image treatment: suppress the offset rectangle, use layered warm shadows ── */
.about-image::before,
.content-image::before {
    display: none;
}

.about-image img,
.content-image img {
    box-shadow:
        0  2px  6px  rgba(46, 31, 15, 0.08),
        0  8px  24px rgba(46, 31, 15, 0.14),
        0 20px  48px rgba(46, 31, 15, 0.10);
}

/* ── Feature numbers ── */
.feature-number {
    color: var(--color-primary);
}

/* ── Scroll-to-top button ── */
.scroll-top {
    background-color: var(--color-primary);
}
.scroll-top:hover {
    background-color: var(--color-primary-dark);
}


/* ══ 3. HERO OVERRIDE ════════════════════════════════════════════════════════
   Targets .hero-bg--default — the class hero/view.php adds ONLY when no
   background photo is set. This way a photo background is never overridden.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-bg--default {
    background: linear-gradient(
        150deg,
        rgba(247, 243, 238, 0.97) 0%,
        rgba(217, 195, 165, 0.92) 50%,
        rgba(181, 101, 29,  0.25) 100%
    );
}

/* Hero text colours when no photo bg is set */
.hero-subtitle {
    color: var(--color-primary);
}

.hero h1 em {
    color: var(--color-primary);
}


/* ══ 4. TEXTURE LAYER ════════════════════════════════════════════════════════
   A very subtle SVG noise texture on the page body gives warmth and depth
   without being heavy-handed. Barely perceptible — adds tactility.
   ══════════════════════════════════════════════════════════════════════════ */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}


/* ══ 5. TYPOGRAPHY REFINEMENTS ═══════════════════════════════════════════════
   Slightly looser letter-spacing on headings and a warmer link colour.
   ══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3 {
    letter-spacing: 0.01em;
}

/* Nav links default colour */
.nav-links a {
    color: var(--color-text);
}

/* Footer background: deep peat ── */
.footer {
    background-color: #1C1108;
}

.footer-logo {
    color: var(--color-secondary);
}

.footer-socials a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ── Section header text ── */
.section-header p {
    color: var(--color-text-light);
}