/*
Theme Name: Valitsevälittäjä
Description: Kevyt teema valitsevalittaja.fi:lle. Sama runko kuin sisarsivustoilla, oma sävykartta ja oma ilme — myyjälle ei saa tulla tunnetta, että kyseessä on sama palvelu eri nimellä.
Version: 1.0.0
Requires PHP: 8.0
Author: Atkpiste Helsinki Oy
Text Domain: valitsevalittaja
*/

/* ═══════════════════════════════════════════════════════════════════
   SÄVYKARTTA: syvä metsänvihreä ~150° (docs/mockup.html = ilmeen
   totuus). Kolmen inbound-sivuston perhe on viini / pronssi / vihreä,
   ja hubi pitää petrolin.

   ILME-EROTTELU (INBOUND-SIVUSTOT.md §5): tämän sivuston tunnisteet
   ovat valkoinen topbar vihreällä hiusviivalla, ✓-merkkipallo
   logossa ja PILLERIN muotoiset napit — kilpailutussivustolla on
   tumma topbar, serif-otsikot ja kulmikkaat napit, AHA:lla vaalea
   sans. Sama runko, eri vaatteet.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#16241c; --ink-2:#31463a; --muted:#5a7264; --faint:#87998c;
  --hair:#d9e4d8; --hair-strong:#b5c7b6;
  --ground:#f2f6f1; --surface:#ffffff; --surface-2:#e6efe5;
  --accent:#1f6b47; --accent-2:#2c8a5e; --accent-ink:#ffffff;
  --accent-soft:#ddeee2;
  --warn:#8a5a1c;
  --foot-bg:#0e1611; --foot-ink:#e3ece5; --foot-muted:#87998c; --foot-hair:#28382e;
  --r:12px; --r-s:8px; --label:.75rem;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem;
  --step-2:1.5rem; --step-3:2.125rem; --step-4:3rem;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mitta:1080px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e3ece5; --ink-2:#bccfc1; --muted:#87998c; --faint:#5a7264;
    --hair:#28382e; --hair-strong:#3d5244;
    --ground:#0e1611; --surface:#16241c; --surface-2:#1e3025;
    --accent:#4fae7f; --accent-2:#6cc596; --accent-ink:#0e1611;
    --accent-soft:#173325;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
img,svg{max-width:100%;height:auto}
a{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:800}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1)}
p{margin:0 0 14px}
.wrap{max-width:var(--mitta);margin:0 auto;padding:0 24px;width:100%}
main{flex:1 0 auto;padding:44px 0 64px}

/* Topbar: valkoinen + vihreä hiusviiva (oma tunniste) */
.topbar{background:var(--surface);border-bottom:2px solid var(--accent)}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.logo{font-weight:800;letter-spacing:-.03em;text-decoration:none;color:var(--ink);
  white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.logo .merkki{width:24px;height:24px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;font-size:14px;font-weight:800}
.logo b{color:var(--accent)}
.logo span{color:var(--faint);font-weight:600}
.nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:var(--step--1);font-weight:650;text-decoration:none;color:var(--muted);
  padding:7px 14px;border-radius:999px}
.nav a:hover{color:var(--ink);background:var(--surface-2)}

/* Napit: PILLERI (oma tunniste) */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;
  border-radius:999px;padding:13px 26px;font-weight:700;text-decoration:none;
  font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:var(--accent-2)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hair-strong)}
.btn-ghost:hover{background:var(--surface-2)}

.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.13em;
  font-weight:700;color:var(--accent);margin:0 0 10px}
.selite{font-size:var(--step--1);color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r)}


.foot{background:var(--foot-bg);color:var(--foot-ink);padding:34px 0;margin-top:auto}
.foot a{color:var(--foot-ink)}
.foot .selite{color:var(--foot-muted)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* ═══ MOCKUPISTA (docs/mockup.html = ilmeen totuus) ═══════════════
   Hero kuvituksineen, askeleet ja lohkorytmi poimittu mockupista ja
   käännetty teeman muuttujiin (--brand → --accent). Sivu on nyt
   mockupin mukainen: hero + aluehaku + kolme askelta + reiluus +
   hinnasto — ei suppea "tulossa"-sivu. */
/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:52px 0 58px}
@media(max-width:840px){.hero{grid-template-columns:1fr;gap:30px}}
.hero h1{margin:10px 0 14px}
.haku{display:flex;gap:10px;margin-top:22px;max-width:440px}
.haku input{flex:1}
.hero-lupaukset{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.hero-lupaukset li{padding-left:28px;position:relative;font-size:var(--step--1);color:var(--muted)}
.hero-lupaukset li::before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px;
  border-radius:50%;background:var(--accent-soft)}
.hero-lupaukset li::after{content:'';position:absolute;left:5px;top:7px;width:8px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.hero-lupaukset b{color:var(--ink)}

/* Herokuvitus: kolme korttia, keskimmäinen valittu. Piirretty
   CSS:llä eikä SVG-poluilla — samat tokenit, ei käsin dataa. */
.kuvitus{position:relative;height:300px;user-select:none}
.kuvitus .kortti{position:absolute;width:200px;padding:16px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.kuvitus .kortti .pallo{width:38px;height:38px;border-radius:50%;background:var(--surface-2);margin-bottom:10px}
.kuvitus .kortti .viiva{height:8px;border-radius:4px;background:var(--surface-2);margin:6px 0}
.kuvitus .kortti .viiva.lyhyt{width:60%}
.kuvitus .k1{left:4%;top:36px;transform:rotate(-5deg)}
.kuvitus .k3{right:4%;top:44px;transform:rotate(5deg)}
.kuvitus .k2{left:50%;top:6px;transform:translateX(-50%);z-index:2;
  border-color:var(--accent);box-shadow:0 16px 40px rgba(31,107,71,.22)}
.kuvitus .k2 .pallo{background:var(--accent-soft)}
.kuvitus .valintamerkki{position:absolute;right:-10px;top:-10px;width:34px;height:34px;
  border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800}
:root[data-theme="dark"] .kuvitus .valintamerkki{color:#0e1611}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kuvitus .valintamerkki{color:#0e1611}}


/* ── ASKELEET ─────────────────────────────────────────────────────── */
.askeleet{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:760px){.askeleet{grid-template-columns:1fr}}
.askel{padding:18px}
.askel .nro{width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:10px}
:root[data-theme="dark"] .askel .nro{color:#0e1611}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .askel .nro{color:#0e1611}}
.askel h3{margin:0 0 6px;font-size:var(--step-0)}


/* ── HAKEMISTOKORTIT — sivuston tunniste ──────────────────────────── */
:root[data-theme="dark"] @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :root[data-theme="dark"] @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) 

section.lohko{padding:50px 0}
section.lohko.tint{background:var(--surface)}
.pill{display:inline-block;font-size:12.5px;font-weight:700;
  border-radius:999px;padding:3px 10px;background:var(--accent-soft);color:var(--accent)}
.tblkaari{overflow-x:auto;max-width:660px}
table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair)}
th{color:var(--faint);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
td{color:var(--muted)}
td:first-child{color:var(--ink)}
.huomiorivi{background:var(--surface-2);border-radius:var(--r);
  padding:12px 16px;font-size:var(--step--1);color:var(--muted);max-width:70ch}