/*
 * Westover Labs public-surface system — WES-85.
 *
 * This intentionally stays inside the westoverlabs.eu Pages root. It is the
 * shared visual contract for the company homepage and its booking journey,
 * not a redesign of the wider static-site estate.
 */

:root {
    color-scheme: dark;
    --wl-bg: #10151b;
    --wl-bg-card: #17212a;
    --wl-bg-elevated: #20303a;
    --wl-bg-screen: #0b1015;
    --wl-border: #2d3b43;
    --wl-border-lit: #3f555b;
    --wl-gold: #f4c542;
    --wl-gold-dim: #d59f2f;
    --wl-gold-faint: rgba(244, 197, 66, 0.1);
    --wl-gold-glow: rgba(244, 197, 66, 0.18);
    --wl-teal: #38d6ba;
    --wl-coral: #ff6b5f;
    --wl-text: #f4f1e8;
    --wl-text-muted: #bac7c2;
    --wl-text-faint: #879792;
    --wl-white: #ffffff;
    --wl-ink: #10151b;
    --wl-radius-sm: 6px;
    --wl-radius: 8px;
    --wl-radius-lg: 12px;
    --wl-content: 1080px;

    /* Compatibility aliases while the two pages converge incrementally. */
    --bg: var(--wl-bg);
    --bg-card: var(--wl-bg-card);
    --bg-elevated: var(--wl-bg-elevated);
    --surface: var(--wl-bg-card);
    --surface-2: var(--wl-bg-elevated);
    --border: var(--wl-border);
    --border-lit: var(--wl-border-lit);
    --gold: var(--wl-gold);
    --gold-dim: var(--wl-gold-dim);
    --gold-faint: var(--wl-gold-faint);
    --gold-glow: var(--wl-gold-glow);
    --teal: var(--wl-teal);
    --coral: var(--wl-coral);
    --accent: var(--wl-gold);
    --accent-2: var(--wl-gold-dim);
    --accent-soft: var(--wl-gold-faint);
    --accent-line: rgba(244, 197, 66, 0.3);
    --text: var(--wl-text);
    --text-2: var(--wl-text-muted);
    --text-3: var(--wl-text-faint);
    --text-muted: var(--wl-text-muted);
    --text-faint: var(--wl-text-faint);
    --heading: var(--wl-white);
    --white: var(--wl-white);
    --ink: var(--wl-ink);
    --btn-fg: var(--wl-ink);
    --nav-bg: rgba(10, 15, 20, 0.92);
    --shadow: var(--wl-gold-glow);
}

body {
    background:
        linear-gradient(90deg, rgba(56, 214, 186, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(244, 197, 66, 0.045) 1px, transparent 1px),
        var(--wl-bg);
    background-size: 56px 56px, 56px 56px, auto;
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 300;
    border-radius: 0 0 var(--wl-radius) var(--wl-radius);
    background: var(--wl-gold);
    color: var(--wl-ink);
    padding: 0.65rem 1rem;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--wl-teal);
    outline-offset: 3px;
}

nav {
    background: var(--nav-bg);
    border-bottom-color: var(--wl-border);
}

.nav-logo {
    color: var(--wl-text);
}

.nav-links a {
    color: var(--wl-text-muted);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: var(--wl-white);
}

.nav-cta {
    color: var(--wl-gold) !important;
    border: 1px solid var(--wl-gold);
    padding: 0.4rem 1rem;
    border-radius: var(--wl-radius-sm);
}

.nav-cta:hover {
    color: var(--wl-ink) !important;
    background: var(--wl-gold);
}

.wl-workshop-panel {
    position: relative;
    border: 1px solid var(--wl-border-lit);
    border-radius: var(--wl-radius);
    background:
        linear-gradient(180deg, rgba(244, 197, 66, 0.09), rgba(56, 214, 186, 0.08)),
        var(--wl-bg-card);
    padding: 1.25rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.wl-workshop-screen {
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-sm);
    background: var(--wl-bg-screen);
    padding: 1.1rem;
}

.wl-workshop-screen img {
    display: block;
    width: min(66%, 190px);
    height: auto;
    margin: 0 auto 1rem;
}

.wl-plate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.wl-plate strong {
    color: var(--wl-white);
    font-size: 0.86rem;
}

.wl-status {
    color: var(--wl-ink);
    background: var(--wl-teal);
    border-radius: 4px;
    padding: 0.16rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wl-craft-note {
    margin-top: 0.8rem;
    color: var(--wl-text-faint);
    font-size: 0.78rem;
    line-height: 1.55;
}

.btn-primary {
    background: var(--wl-gold);
    color: var(--wl-ink);
}

.btn-primary:hover {
    background: #ffd45a;
    box-shadow: 0 8px 24px var(--wl-gold-glow);
}

@media (max-width: 760px) {
    .nav-links li:not(:last-child) {
        display: none;
    }

    .nav-links {
        gap: 0.75rem;
    }

    .nav-cta {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}