/*
Theme Name: OKTAN
Template: blocksy
Description: Child theme för OKTAN motorsportverkstad. Self-hostade typsnitt och egen design.
Author: Webbfabriken
Version: 1.0
*/

:root{
  --kv-ink:#101216;
  --kv-ink-2:#1b1e24;
  --kv-paper:#f2f3f5;
  --kv-white:#ffffff;
  --kv-red:#e10600;          /* racing-rött (vit text klarar AA) */
  --kv-red-bright:#ff3b30;   /* ljusare rött för accenter på mörk bg */
  --kv-red-text:#cc0500;     /* mörkare rött för liten text på ljus/grå bg (AA) */
  --kv-muted:#565b66;
  --kv-muted-d:#a9afba;
  --kv-line:rgba(16,18,22,.12);
  --kv-line-d:rgba(255,255,255,.14);
  --kv-display:"Saira Condensed",Impact,"Arial Narrow",sans-serif;
  --kv-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Bas ---------- */
body{font-family:var(--kv-body);color:var(--kv-ink);background:var(--kv-white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.kv-display{font-family:var(--kv-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
h1{font-size:clamp(2.8rem,7vw,6rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.7rem)}
h3{font-size:clamp(1.4rem,2.6vw,2rem)}
p{line-height:1.65}
a{color:inherit}
strong{font-weight:700}

/* ---------- Mörka sektioner ---------- */
.kv-dark{background:var(--kv-ink);color:var(--kv-paper)}
.kv-dark h1,.kv-dark h2,.kv-dark h3,.kv-dark h4{color:var(--kv-white)}
.kv-dark p{color:var(--kv-muted-d)}
.kv-accent{color:var(--kv-red)}

/* ---------- Eyebrow ---------- */
.kv-eyebrow{display:inline-block;font-family:var(--kv-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:.78rem;color:var(--kv-red-text);margin-bottom:1rem}
.kv-eyebrow.kv-on-dark{color:var(--kv-red-bright)}

/* ---------- Hero ---------- */
.kv-hero{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.kv-hero h1{font-size:clamp(3.2rem,9vw,7.5rem);max-width:16ch}
.kv-hero .kv-lead{font-size:clamp(1.05rem,1.7vw,1.35rem);max-width:48ch;color:#e7e8ea}

/* ---------- Stat-rad ---------- */
.kv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.kv-stat .kv-num{font-family:var(--kv-display);font-weight:800;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--kv-red-bright)}
.kv-stat .kv-lbl{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--kv-muted);margin-top:.4rem;font-weight:600}
.kv-dark .kv-stat .kv-lbl{color:var(--kv-muted-d)}
@media(max-width:780px){.kv-stats{grid-template-columns:repeat(2,1fr);gap:1.8rem}}

/* ---------- Kort ---------- */
.kv-card{position:relative;border-radius:6px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;color:#fff}
.kv-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease}
.kv-card:hover img{transform:scale(1.06)}
.kv-card .kv-card-body{position:relative;z-index:2;padding:1.6rem;background:linear-gradient(to top,rgba(6,7,9,.92),rgba(6,7,9,0))}
.kv-card h3{margin:0 0 .4rem}
.kv-card p{margin:0;color:#e6e7e9;font-size:.95rem}

/* ---------- Prislista ---------- */
.kv-price{border:1px solid var(--kv-line);border-radius:8px;padding:2.2rem 1.8rem;background:#fff;display:flex;flex-direction:column;height:100%}
.kv-price.kv-feat{background:var(--kv-ink);color:#fff;border-color:var(--kv-ink)}
.kv-price.kv-feat p,.kv-price.kv-feat li{color:var(--kv-muted-d)}
.kv-price .kv-plan{font-family:var(--kv-display);font-weight:700;font-size:1.7rem}
.kv-price .kv-amt{font-family:var(--kv-display);font-weight:800;font-size:3.4rem;line-height:1;margin:.5rem 0}
.kv-price .kv-amt span{font-family:var(--kv-body);font-size:1rem;font-weight:600;color:var(--kv-muted)}
.kv-price ul{list-style:none;margin:1.2rem 0;padding:0;flex:1}
.kv-price li{padding:.5rem 0;border-bottom:1px solid var(--kv-line);font-size:.95rem}
.kv-price.kv-feat li{border-color:var(--kv-line-d)}
.kv-price li::before{content:"›";color:var(--kv-red);font-weight:700;margin-right:.6rem}
.kv-price.kv-feat li::before{color:var(--kv-red-bright)}

/* ---------- Tabell ---------- */
.kv-schedule{width:100%;border-collapse:collapse;font-size:.95rem}
.kv-schedule th,.kv-schedule td{padding:.85rem 1rem;border-bottom:1px solid var(--kv-line);text-align:left}
.kv-schedule th{font-family:var(--kv-body);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--kv-muted)}
.kv-schedule td .kv-pass{font-weight:700}
.kv-schedule td .kv-time{color:var(--kv-red);font-weight:700}

/* ---------- Logo ---------- */
a.ct-logo-text,.site-title a{font-family:var(--kv-display)!important;font-weight:800;text-transform:uppercase;letter-spacing:.04em}

/* ---------- Hjälp ---------- */
.kv-center{text-align:center}
.kv-maxw{max-width:60ch;margin-left:auto;margin-right:auto}

/* ---------- Layout-verktyg ---------- */
.entry-content{margin-top:0!important}
.kv-full{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.kv-wrap{max-width:1200px;margin:0 auto;padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
.kv-sec{padding-block:clamp(3.5rem,8vw,7rem)}
.kv-sec-sm{padding-block:clamp(2.5rem,5vw,4rem)}
.kv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.kv-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.kv-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:880px){.kv-grid-2,.kv-grid-3,.kv-grid-4{grid-template-columns:1fr}}
.kv-imground{border-radius:8px;overflow:hidden}
.kv-imground img{display:block;width:100%;height:100%;object-fit:cover}
.kv-btnrow{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.kv-btn{display:inline-block;background:var(--kv-red);color:#fff;font-family:var(--kv-body);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;padding:.95em 1.9em;border-radius:3px;text-decoration:none;transition:transform .15s,background .15s}
.kv-btn:hover{background:var(--kv-ink);color:#fff;transform:translateY(-2px)}
.kv-btn-ghost{background:transparent;border:2px solid currentColor;color:inherit;padding:calc(.95em - 2px) calc(1.9em - 2px)}
.kv-btn-ghost:hover{background:var(--kv-red);border-color:var(--kv-red);color:#fff}
.kv-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6}
.kv-mt0{margin-top:0}.kv-mb0{margin-bottom:0}
.kv-feature-ico{font-family:var(--kv-display);font-weight:800;font-size:2.6rem;color:var(--kv-red);line-height:1}
.kv-dark .kv-feature-ico{color:var(--kv-red-bright)}