/* ══════════════════════════════════════════
   41&Three Kinetic – Master Stylesheet
   Design System: Kinetic Precision
   ══════════════════════════════════════════ */

/* ─── CSS Custom Properties (Design Tokens) ─── */
:root {
    /* Primary */
    --color-primary-gold: #FFCD29;
    --color-primary-light: #FFEEC8;
    --color-primary-dim: #F1C017;
    --color-primary-fixed: #FFE08E;
    
    /* Secondary (Green) */
    --color-secondary-green: #9AD3B0;
    --color-secondary-container: #1A5338;
    
    /* Surface / Background Tiers */
    --color-surface: #151218;
    --color-surface-dim: #151218;
    --color-surface-container-lowest: #0F0D12;
    --color-surface-container-low: #1D1B20;
    --color-surface-container: #211F24;
    --color-surface-container-high: #2C292F;
    --color-surface-container-highest: #373439;
    --color-surface-bright: #3B383E;
    
    /* On-Surface */
    --color-on-surface: #E7E0E8;
    --color-on-surface-variant: #D1C5AC;
    --color-on-background: #E7E0E8;
    
    /* Outline */
    --color-outline: #9A9079;
    --color-outline-variant: #4E4633;
    
    /* Error */
    --color-error: #FFB4AB;
    --color-error-container: #93000A;
    
    /* Inverse */
    --color-inverse-surface: #E7E0E8;
    --color-inverse-on-surface: #322F35;
    --color-inverse-primary: #755B00;
    
    /* Fonts */
    --font-headline: 'Space Grotesk', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-label: 'Inter', sans-serif;
    
    /* Spacing scale */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
}

/* ─── Base Reset & Defaults ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important; /* Enforce 0px radii globally */
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-surface);
    color: var(--color-on-background);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Selection */
::selection {
    background-color: var(--color-primary-gold);
    color: var(--color-surface);
}

/* ─── Typography Utility Classes ─── */
.font-headline { font-family: var(--font-headline); }
.font-body { font-family: var(--font-body); }
.font-label { font-family: var(--font-label); }

/* ─── Color Utility Classes ─── */
/* Backgrounds */
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest); }
.bg-primary-gold { background-color: var(--color-primary-gold); }
.bg-secondary-green\/20 { background-color: rgba(26, 83, 56, 0.6); }

/* Text */
.text-primary-gold { color: var(--color-primary-gold); }
.text-primary-dim { color: var(--color-primary-dim); }
.text-secondary-green { color: var(--color-secondary-green); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-surface-dark { color: var(--color-surface); }
.text-surface-dark\/80 { color: rgba(21, 18, 24, 0.8); }
.text-surface-dark\/60 { color: rgba(21, 18, 24, 0.6); }

/* Border */
.border-primary-gold { border-color: var(--color-primary-gold); }
.border-primary-gold\/20 { border-color: rgba(255, 205, 41, 0.2); }

/* Decoration */
.decoration-primary-gold { text-decoration-color: var(--color-primary-gold); }

/* ─── Navigation ─── */
#main-nav {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#main-nav.scrolled {
    background-color: rgba(15, 13, 18, 0.95);
}

/* ─── Hero Section ─── */
@supports (-webkit-touch-callout: none) {
    /* iOS fallback: disable parallax fixed attachment */
    .parallax-bg {
        background-attachment: scroll !important;
    }
}

/* ─── Race Scroller ─── */
#race-scroller::-webkit-scrollbar {
    display: none;
}

#race-scroller {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

/* ─── Cards – No borders, no radii ─── */
.card-hover-lift {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.card-hover-lift:hover {
    transform: translateY(-2px);
}

/* ─── Article Image Grayscale Effect ─── */
.grayscale {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.group:hover .grayscale,
.grayscale:hover {
    filter: grayscale(0%);
}

/* ─── Line Clamp ─── */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Buttons ─── */
button, .btn,
a[class*="bg-primary-gold"],
a[class*="bg-surface-dark"] {
    border-radius: 0 !important;
    cursor: pointer;
    text-decoration: none;
}

/* Primary button gradient sheen */
a[class*="bg-primary-gold"]:not([class*="text-surface-dark"]) {
    background: linear-gradient(135deg, var(--color-primary-gold) 0%, var(--color-primary-dim) 100%);
}

/* ─── Input Fields ─── */
input, textarea, select {
    border-radius: 0 !important;
    outline: none;
}

input:focus, textarea:focus {
    border-color: var(--color-primary-gold) !important;
    box-shadow: none !important;
}

/* ─── Animate Pulse (for live indicator) ─── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ─── Tonal Shift Background ─── */
.tonal-shift {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-container-low) 100%);
}

/* ─── Glass Effect ─── */
.glass {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ─── Ghost Border ─── */
.ghost-border {
    outline: 1px solid rgba(78, 70, 51, 0.15);
    outline-offset: -1px;
}

/* ─── Material Symbols ─── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ─── WordPress-Specific Overrides ─── */

/* Remove default WP admin bar spacing */
html {
    margin-top: 0 !important;
}

#wpadminbar {
    position: fixed !important;
}

/* Override WP block defaults */
.wp-block-image img,
.wp-block-cover,
.wp-block-group,
.wp-block-button__link {
    border-radius: 0 !important;
}

/* ─── Responsive Adjustments ─── */

/* Mobile: reduce hero text */
@media (max-width: 639px) {
    .hero-headline {
        font-size: 3rem;
    }
}

/* Tablet and up: increase spacing */
@media (min-width: 768px) {
    .section-spacing {
        padding-top: var(--spacing-32);
        padding-bottom: var(--spacing-32);
    }
}

/* Large screens: constrain content width */
@media (min-width: 1536px) {
    .max-w-screen-2xl {
        max-width: 1536px;
    }
}

/* ─── Print Styles ─── */
@media print {
    body {
        background: white;
        color: black;
    }
    
    nav, footer, .scroll-indicator,
    .cta-section {
        display: none !important;
    }
}

/* ─── Video Archive Specific ─── */

/* Play button exception: keep rounded for media controls */
.group .rounded-full {
    border-radius: 9999px !important;
}

/* Featured video aspect ratio fallback */
@media (max-width: 767px) {
    .aspect-\[21\/9\] {
        aspect-ratio: 16 / 9;
    }
}

/* Video card stagger animation for initial load */
@media (prefers-reduced-motion: no-preference) {
    #video-grid > article {
        animation: fadeSlideUp 0.5s ease both;
    }

    #video-grid > article:nth-child(1) { animation-delay: 0s; }
    #video-grid > article:nth-child(2) { animation-delay: 0.08s; }
    #video-grid > article:nth-child(3) { animation-delay: 0.16s; }
    #video-grid > article:nth-child(4) { animation-delay: 0.24s; }
    #video-grid > article:nth-child(5) { animation-delay: 0.32s; }
    #video-grid > article:nth-child(6) { animation-delay: 0.40s; }

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

/* ─── Blog Archive Specific ─── */

/* Category filter scrollbar hide */
.blog-filter-scroll::-webkit-scrollbar {
    display: none;
}

/* Newsletter input on yellow background */
section.bg-primary-gold input::placeholder {
    color: rgba(21, 18, 24, 0.4);
}

section.bg-primary-gold input {
    color: var(--color-surface);
}

section.bg-primary-gold input:focus {
    border-color: var(--color-surface) !important;
}

/* "Next Chapter" animated underline */
.next-chapter-line {
    transition: width 0.5s ease;
}

/* Blog grid stagger animation */
@media (prefers-reduced-motion: no-preference) {
    .blog-grid > article {
        animation: fadeSlideUp 0.5s ease both;
    }

    .blog-grid > article:nth-child(1) { animation-delay: 0.0s; }
    .blog-grid > article:nth-child(2) { animation-delay: 0.06s; }
    .blog-grid > article:nth-child(3) { animation-delay: 0.12s; }
    .blog-grid > article:nth-child(4) { animation-delay: 0.18s; }
    .blog-grid > article:nth-child(5) { animation-delay: 0.24s; }
    .blog-grid > article:nth-child(6) { animation-delay: 0.30s; }
    .blog-grid > article:nth-child(7) { animation-delay: 0.36s; }
    .blog-grid > article:nth-child(8) { animation-delay: 0.42s; }
}

/* Wide card responsive */
@media (max-width: 767px) {
    .md\:col-span-2 {
        grid-column: span 1;
    }
}