/* ==========================================================================
   VROOM — restyle layer
   --------------------------------------------------------------------------
   This file does NOT replace racing_style.css or any view file. It's loaded
   last (see index.php, just before the closing </body>) so it wins the
   cascade and re-skins the existing markup/classes in place.

   Two sources feed the current look:
   1. public/css/racing_style.css — mostly driven by the --racing-* custom
      properties, so overriding the variables re-themes it in one place.
   2. Hardcoded colors inside <style> blocks in index.php and home.php
      (hero, stats, nav, motorsport hub, feature cards) — these don't use
      variables, so they're overridden directly by class selector below.
   ========================================================================== */

:root {
    /* Was: near-black + red/yellow F1 palette. Now: asphalt + hazard amber. */
    --racing-black: #14161A;
    --racing-white: #F2F1EC;
    --racing-yellow: #F5A623;
    --racing-grey: #2A2E33;
    --racing-red: #C1440E;      /* kept only for genuine alerts/discounts */
    --box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);

    /* New tokens used directly by this file */
    --vr-bg: #14161A;
    --vr-surface: #1D2024;
    --vr-surface-2: #24282D;
    --vr-line: #33383E;
    --vr-text: #F2F1EC;
    --vr-text-dim: #9AA0A6;
    --vr-amber: #F5A623;
    --vr-amber-dim: #C6821A;
    --vr-teal: #3FA796;
}

body {
    background-color: var(--vr-bg);
    color: var(--vr-text);
}

/* Calm the uppercase-everything default down to real labels only */
.hero-subtitle,
.section-subtitle,
.feature-description,
.stat-label {
    text-transform: none;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------
   Top / bottom navigation (hardcoded in index.php's own <style> block)
   -------------------------------------------------------------------- */
.top-nav {
    background: var(--vr-bg);
    box-shadow: 0 1px 0 var(--vr-line);
    border-bottom: 1px solid var(--vr-line);
    backdrop-filter: blur(10px);
}
.top-nav::before { display: none; } /* remove the auto-animating rainbow line — replaced by the scroll-progress bar */
.top-nav::after { display: none; }  /* remove the carbon-fiber texture overlay */

.top-nav.is-scrolled {
    background: rgba(20, 22, 26, 0.97);
    box-shadow: 0 1px 0 var(--vr-line), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.brand {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.brand::before { display: none; }
.brand:hover { background: transparent; box-shadow: none; transform: none; }

.logo-container {
    background: var(--vr-surface);
    border: 1px solid var(--vr-line);
    box-shadow: none;
}
.logo-container::before { display: none; }
.brand:hover .logo-container {
    transform: none;
    border-color: var(--vr-amber);
    box-shadow: none;
}
.logo-container img { filter: none; }
.brand:hover .logo-container img { filter: none; transform: none; }

.brand-text {
    font-family: 'Orbitron', sans-serif;
    background: none;
    -webkit-text-fill-color: var(--vr-text);
    color: var(--vr-text);
    text-shadow: none;
    letter-spacing: 1px;
}
.brand-text::after { display: none; }
.brand:hover .brand-text { filter: none; }

.nav-icon {
    background: transparent;
    border: 1px solid transparent;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
}
.nav-icon::before,
.nav-icon::after { display: none; }
.nav-icon i { filter: none; color: var(--vr-text-dim); }
.nav-icon span { color: var(--vr-text-dim); }

.nav-icon:hover {
    background: var(--vr-surface);
    border-color: var(--vr-line);
    transform: none;
    box-shadow: none;
}
.nav-icon:hover i,
.nav-icon:hover span { color: var(--vr-text); }
.nav-icon:hover i { transform: none; }

.nav-icon-active {
    background: var(--vr-surface) !important;
    border-color: var(--vr-amber) !important;
    box-shadow: none !important;
}
.nav-icon-active i { color: var(--vr-amber) !important; filter: none !important; }
.nav-icon-active span { color: var(--vr-amber) !important; }

.badge {
    background: var(--vr-amber) !important;
    color: #14161A !important;
}

.bottom-nav {
    background: var(--vr-bg);
    border-top: 1px solid var(--vr-line);
}
.nav-item a { color: var(--vr-text-dim); }
.nav-item a.active,
.nav-item a.active i { color: var(--vr-amber); }

/* --------------------------------------------------------------------
   Scroll-progress bar (JS adds this element — see scroll-effects.js)
   -------------------------------------------------------------------- */
.vr-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--vr-amber);
    z-index: 1100;
    transition: width 80ms linear;
}

/* --------------------------------------------------------------------
   Hero (hardcoded in home.php's own <style> block)
   -------------------------------------------------------------------- */
.hero-section {
    background: var(--vr-bg);
    min-height: 520px;
}
.hero-background { opacity: 0.12; filter: grayscale(0.4); animation: none; }
.hero-grid-overlay {
    background-image:
        linear-gradient(rgba(245, 166, 35, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 166, 35, 0.06) 1px, transparent 1px);
    animation: none;
}
.speed-line { background: linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.35), transparent); }

.hero-badge {
    background: var(--vr-surface);
    border: 1px solid var(--vr-line);
    color: var(--vr-amber);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    animation: none;
    box-shadow: none;
}

.hero-title {
    background: none;
    -webkit-text-fill-color: var(--vr-text);
    color: var(--vr-text);
    animation: none;
    letter-spacing: 2px;
}

.hero-subtitle { color: var(--vr-text-dim); font-size: 1.3rem; }

.hero-cta-btn { border-radius: 3px; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.03em; }
.hero-cta-primary {
    background: var(--vr-amber);
    color: #14161A;
    border: 1px solid var(--vr-amber);
}
.hero-cta-primary:hover { background: var(--vr-amber-dim); border-color: var(--vr-amber-dim); }
.hero-cta-secondary {
    background: transparent;
    color: var(--vr-text);
    border: 1px solid var(--vr-line);
}
.hero-cta-secondary:hover { border-color: var(--vr-text-dim); }

/* One-time entrance for the hero content only — the single "signature
   moment" for motion on this page, everything else stays still on load. */
.hero-content {
    animation: vrHeroIn 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes vrHeroIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-content { animation: none; }
}

/* --------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------- */
.stats-section { background: var(--vr-surface); border-top: 1px solid var(--vr-line); border-bottom: 1px solid var(--vr-line); }
.stat-card { background: transparent; border-right: 1px solid var(--vr-line); }
.stat-icon { color: var(--vr-amber); }
.stat-number { color: var(--vr-amber); font-family: 'Orbitron', sans-serif; }
.stat-label { color: var(--vr-text-dim); }

/* --------------------------------------------------------------------
   Sponsor / banner ad — kept to the one slot, just retoned
   -------------------------------------------------------------------- */
.banner-ad-wrapper { border: 1px dashed var(--vr-line); box-shadow: none; }
.banner-ad-wrapper:hover { transform: none; box-shadow: none; border-color: var(--vr-text-dim); }
.banner-ad-label { background: var(--vr-surface); border: 1px solid var(--vr-line); color: var(--vr-text-dim); }

/* --------------------------------------------------------------------
   Section headers / "view all" links (used by every content section)
   -------------------------------------------------------------------- */
.section-header h2 {
    color: var(--vr-text);
    font-family: 'Orbitron', sans-serif;
    text-transform: none;
}
.section-header h2 i { color: var(--vr-amber); }
.section-header::after { background: var(--vr-amber); }
.section-subtitle { color: var(--vr-text-dim); }

.view-all-btn {
    color: var(--vr-amber);
    border-color: var(--vr-line);
}
.view-all-btn:hover { border-color: var(--vr-amber); background: var(--vr-surface); }

/* --------------------------------------------------------------------
   Vehicle / product / news cards (racing_style.css, already var-driven —
   these are the few properties there that aren't)
   -------------------------------------------------------------------- */
.vehicle-card, .product-card, .news-card, .feature-card {
    background: var(--vr-surface);
    border: 1px solid var(--vr-line);
    border-radius: 3px;
    box-shadow: none;
}
.vehicle-card:hover, .product-card:hover, .news-card:hover, .feature-card:hover {
    border-color: var(--vr-text-dim);
    box-shadow: var(--box-shadow);
    transform: translateY(-2px);
}
.vehicle-badge { background: var(--vr-amber); color: #14161A; }
.vehicle-price, .product-price { color: var(--vr-amber); }
.news-category { background: var(--vr-surface-2); color: var(--vr-amber); }

/* --------------------------------------------------------------------
   Motorsport hub — trimmed visually to feel like a compact panel, not
   a second homepage; structure/content untouched
   -------------------------------------------------------------------- */
.ms-hub-panel {
    background: var(--vr-surface);
    border: 1px solid var(--vr-line);
    box-shadow: none;
}
.ms-hub-label { color: var(--vr-amber); }
.ms-hub-cd-box, .ms-cd-box {
    background: var(--vr-surface-2);
    border: 1px solid var(--vr-line);
    color: var(--vr-amber);
}
.ms-hub-winner-badge { background: var(--vr-amber); color: #14161A; }

/* --------------------------------------------------------------------
   Why-choose feature cards
   -------------------------------------------------------------------- */
.why-choose-section { background: var(--vr-bg); }
.feature-icon { color: var(--vr-amber); }
.feature-card::before { display: none; }
.feature-title { color: var(--vr-text); text-transform: none; }

/* --------------------------------------------------------------------
   Scroll-reveal — applied only to section headers via scroll-effects.js
   (IntersectionObserver toggles .vr-in). One clean rise-in per section,
   not per card, and it fires once.
   -------------------------------------------------------------------- */
.vr-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 550ms ease, transform 550ms ease;
}
.vr-reveal.vr-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .vr-reveal, .vr-reveal.vr-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}