/*
Theme Name: Norevia
Description: Custom theme for Norevia, an arcade street-racing game for the Dutch market. Racing navy/orange/chrome palette, Rajdhani display type, reusable speedometer gauge widget, checkered-flag section dividers, distinct widget per page.
Version: 1.0
*/

:root{
  --bg:        #0A0014;
  --surface:   #170826;
  --surface-2: #23103D;
  --ink:       #F5EFFF;
  --ink-dim:   #B8A8D9;
  --orange:    #FF2E9F;
  --orange-deep:#C4147A;
  --chrome:    #00E5FF;
  --red:       #8B2FE0;
  --font-display:'Rajdhani', sans-serif;
  --font-body: 'Rubik', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --radius:    8px;
  --container: 1180px;
}

@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); margin:0; line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.05; margin:0 0 .5em; text-transform:uppercase; letter-spacing:.01em; }
h1{ font-size:clamp(2.6rem,5.6vw,4.6rem); font-style:italic; }
h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--ink-dim); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; }
.eyebrow::before{ content:''; width:20px; height:3px; background:var(--orange); }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 30px; font-family:var(--font-display); font-weight:700; font-size:1.05rem; text-transform:uppercase; font-style:italic; cursor:pointer; border:2px solid var(--ink); clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); }
.btn-primary{ background:var(--orange); color:var(--bg); border-color:var(--orange-deep); }
.btn-primary:hover{ background:var(--orange-deep); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--surface); }

/* HEADER */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(11,18,32,.94); backdrop-filter:blur(8px); border-bottom:2px solid var(--surface-2); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo svg{ height:38px; width:auto; }
.primary-nav ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.primary-nav a{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:.95rem; letter-spacing:.02em; }
.primary-nav a.current{ color:var(--orange); }
.menu-toggle{ display:none; background:none; border:2px solid var(--ink); color:var(--ink); cursor:pointer; padding:8px 12px; font-family:var(--font-display); }
@media (max-width:900px){
  .primary-nav{ position:fixed; inset:80px 0 0 0; background:var(--bg); transform:translateY(-110%); transition:transform .3s ease; overflow-y:auto; }
  .primary-nav.open{ transform:translateY(0); }
  .primary-nav ul{ flex-direction:column; padding:24px; gap:0; }
  .primary-nav a{ display:block; padding:16px 4px; font-size:1.15rem; border-bottom:1px solid var(--surface-2); }
  .menu-toggle{ display:block; }
  .header-cta .btn-primary{ display:none; }
}
.header-cta{ display:flex; align-items:center; gap:14px; }

/* HERO — full-bleed real photo */
.hero{ position:relative; min-height:88vh; display:flex; align-items:flex-end; padding:0; overflow:hidden; background-size:cover; background-position:center; }
.hero.hero-photo-bg{ background-image:url('images/hero-main.jpg'); }
.hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,0,20,.92) 10%, rgba(10,0,20,.35) 55%, rgba(10,0,20,.15) 100%); pointer-events:none; }
.hero-grid{ position:relative; z-index:1; width:100%; padding:60px 0 60px; display:block; }
.hero .lede{ font-size:1.1rem; max-width:52ch; }
.hero-actions{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.hero-photo{ border:3px solid var(--ink); border-radius:6px; overflow:hidden; }

/* SNELHEIDSMETER — signature speedometer gauge, reused across pages */
.snelheidsmeter{ position:relative; width:260px; height:260px; margin:0 auto; }
.snelheidsmeter svg{ width:100%; height:100%; }
.snelheidsmeter-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.snelheidsmeter-label strong{ font-family:var(--font-display); font-size:2.6rem; color:var(--orange); font-style:italic; }
.snelheidsmeter-label span{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; }

/* CHECKERED DIVIDER — signature section divider */
.checkered-divider{ height:16px; background-image:repeating-conic-gradient(var(--ink) 0% 25%, var(--bg) 0% 50%); background-size:16px 16px; }

section{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.dark-band{ background:var(--surface); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:2px solid var(--surface-2); border-radius:var(--radius); padding:26px; }
.card .num{ font-family:var(--font-mono); color:var(--orange); font-size:.85rem; }

/* GARAGE BUILDER (Auto's) — pick a car, colour, spoiler */
.garage{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
@media (max-width:800px){ .garage{ grid-template-columns:1fr; } }
.garage-preview{ background:var(--surface); border:2px solid var(--surface-2); border-radius:var(--radius); padding:30px; text-align:center; }
.garage-preview .car-swatch{ width:100%; aspect-ratio:16/9; border-radius:6px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.6rem; font-style:italic; color:var(--bg); transition:background .2s; }
.garage-options{ display:flex; flex-direction:column; gap:20px; }
.garage-group h4{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px; }
.garage-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.garage-swatch{ width:38px; height:38px; border-radius:50%; border:3px solid var(--surface-2); cursor:pointer; }
.garage-swatch.selected{ border-color:var(--ink); }
.garage-option-btn{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; padding:8px 16px; border:2px solid var(--surface-2); background:var(--surface); color:var(--ink); cursor:pointer; }
.garage-option-btn.selected{ border-color:var(--orange); color:var(--orange); }

/* LEADERBOARD (Reviews) */
.leaderboard{ width:100%; border-collapse:collapse; }
.leaderboard th{ font-family:var(--font-display); text-transform:uppercase; font-size:.85rem; text-align:left; padding:12px 14px; background:var(--surface-2); }
.leaderboard td{ padding:14px; border-bottom:1px solid var(--surface-2); font-family:var(--font-mono); font-size:.88rem; }
.leaderboard tr:nth-child(even){ background:var(--surface); }
.pos-badge{ display:inline-block; width:26px; height:26px; border-radius:50%; background:var(--orange); color:var(--bg); text-align:center; line-height:26px; font-family:var(--font-display); font-weight:700; font-size:.85rem; }

/* NEWS (blog) */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:28px; }
.news-card{ background:var(--surface); border:2px solid var(--surface-2); border-radius:var(--radius); overflow:hidden; }
.news-card img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.news-card .inner{ padding:20px; }
.news-card .date{ font-family:var(--font-mono); font-size:.75rem; color:var(--orange); }

article.single-post img.featured{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:2px solid var(--surface-2); border-radius:var(--radius); margin-bottom:26px; }
.entry-content img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:2px solid var(--surface-2); border-radius:var(--radius); margin:8px 0 22px; }
.entry-content h2{ margin-top:1.3em; font-size:1.4rem; text-transform:none; font-style:normal; }
.post-meta{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-dim); margin-bottom:20px; }

/* FORMS */
.form-box{ background:var(--surface); border:2px solid var(--surface-2); border-radius:var(--radius); padding:36px; }
.form-grid{ display:grid; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }
label{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:6px; color:var(--orange); }
input, textarea, select{ width:100%; background:var(--bg); border:2px solid var(--surface-2); border-radius:6px; padding:12px 14px; font-family:var(--font-body); font-size:.95rem; color:var(--ink); }
input:focus, textarea:focus{ outline:2px solid var(--orange); outline-offset:1px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-success{ background:rgba(255,90,31,.1); border:2px solid var(--orange); border-radius:6px; padding:16px 20px; margin-bottom:18px; }
.form-error{ background:rgba(255,59,59,.1); border:2px solid var(--red); border-radius:6px; padding:16px 20px; margin-bottom:18px; }
.star-input{ display:flex; gap:6px; direction:rtl; justify-content:flex-end; }
.star-input input{ display:none; }
.star-input label{ font-size:1.6rem; color:var(--surface-2); cursor:pointer; margin:0; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label{ color:var(--orange); }

.cta-band{ background:linear-gradient(120deg, rgba(255,90,31,.18), rgba(255,59,59,.12)); border:2px solid var(--surface-2); border-radius:10px; padding:56px; text-align:center; }

.legal-content{ max-width:760px; }
.legal-content h2{ font-size:1.4rem; margin-top:1.5em; text-transform:none; font-style:normal; }

.site-footer{ border-top:2px solid var(--surface-2); padding:50px 0 26px; margin-top:20px; background:var(--surface); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:var(--font-display); font-size:.95rem; color:var(--orange); margin-bottom:14px; text-transform:uppercase; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a:hover{ color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--surface-2); padding-top:20px; font-size:.82rem; color:var(--ink-dim); }

.text-center{ text-align:center; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--orange); color:var(--bg); padding:10px 16px; z-index:100; }
.skip-link:focus{ left:16px; top:16px; }

/* Full-bleed photo break (homepage, mid-scroll) */
.photo-break{ position:relative; min-height:65vh; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.photo-break::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,0,20,.25), rgba(10,0,20,.88) 78%); }
.photo-break-content{ position:relative; z-index:1; text-align:center; max-width:680px; padding:0 24px; }

/* Page hero with a real photo background (About, Garage, etc.) */
.page-hero-photo{ background-size:cover; background-position:center; position:relative; }
.page-hero-photo::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,0,20,.95) 42%, rgba(10,0,20,.5) 75%, rgba(10,0,20,.15)); }
.page-hero-photo .container{ position:relative; z-index:1; }

/* Glowing CTA button */
.glow-btn{ box-shadow:0 0 26px rgba(255,46,159,.55); }

/* Section background photo (Reviews, Contact) */
.section-photo-bg{ position:relative; background-size:cover; background-position:center; }
.section-photo-bg::before{ content:''; position:absolute; inset:0; background:rgba(10,0,20,.82); }
.section-photo-bg .container{ position:relative; z-index:1; }

/* COOKIE BAR — full-width bottom */
.cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:300; display:none; background:var(--surface); color:var(--ink); border-top:4px solid var(--orange); padding:26px 0; }
.cookie-bar.show{ display:block; }
.cookie-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cookie-bar p{ color:var(--ink-dim); margin:0; max-width:70ch; font-size:.98rem; }
.cookie-bar a{ color:var(--orange); text-decoration:underline; }
.cookie-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }
.cookie-actions .btn{ padding:12px 24px; }