/* Unica Laundry Systems - design system
   Bron: Unica_Corporate_Style_Guide.md v3.1 (22-08-2026), tokenblok 16.
   De gids overrulet elke implementatie (0). Waarden zijn overgenomen, niet gekozen. */

@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Questrial&display=swap");

:root {
  /* base palette */
  --unica-blue:#46AEE6; --unica-red:#BD0027;
  --unica-turquoise:#1ABC9C; --unica-dark-gray:#7F7F7F; --unica-black:#333333;
  --unica-light-blue:#C5E8F9; --unica-light-cream:#FFF8E7;

  --blue-50:#EEF7FD; --blue-100:#C5E8F9; --blue-300:#A5CEE7; --blue-500:#46AEE6;
  --blue-600:#339ED5; --blue-700:#007EB2; --blue-800:#005F88; --blue-900:#004767;
  --red-500:#BD0027; --red-800:#B50025; --red-900:#8A001A;
  --turquoise-500:#1ABC9C; --turquoise-700:#00866E;

  /* neutrals - 3.7 */
  --ink:#333333; --muted:#687075; --muted-dark:#52595E; --disabled:#9BA3A8;
  --line:#DFE6EA; --line-strong:#CCD6DC; --surface:#EEF3F6; --surface-hover:#F4F7F9;

  /* semantic roles */
  --text:var(--ink); --text-muted:var(--muted);
  --text-link:var(--blue-800); --text-link-hover:var(--blue-900);
  --border:var(--line); --border-strong:var(--line-strong);
  --focus:var(--blue-700); --accent:var(--blue-500);
  --action:var(--red-500); --action-hover:var(--red-800);
  --bg:#FFFFFF; --surface-raised:#FFFFFF;

  /* type - 2 */
  --font-heading:"Arvo", Georgia, serif;
  --font-body:"Century Gothic", "Questrial", Arial, sans-serif;

  /* geometry - 22: screen radius 4/8/16, spacing in stappen van 4 */
  --r-s:4px; --r-m:8px; --r-l:16px;
  --skew:-15deg; --light-angle:105deg;

  /* elevation - 11.2 */
  --elev-1:0 1px 2px rgba(51,51,55,.08), 0 2px 8px rgba(51,51,55,.05);
  --elev-3:0 2px 3px rgba(51,51,55,.12), 0 6px 14px rgba(51,51,55,.09);

  /* motion - 12.1 */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:90ms; --t-ui:150ms; --t-confirm:260ms;

  --measure:1180px;
}

/* dark mode - 21: alleen scherm. Logo daar mono wit (20.2). */
:root[data-theme="dark"] {
  --bg:#12181C; --surface:#1B2429; --surface-hover:#222D33; --surface-raised:#1B2429;
  --ink:#E8EEF1; --text:#E8EEF1; --muted:#A7B3BA; --text-muted:#A7B3BA;
  --line:#2C383F; --line-strong:#3A4850; --border:#2C383F; --border-strong:#3A4850;
  --text-link:var(--blue-300); --text-link-hover:var(--blue-100);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--measure); margin:0 auto; padding:0 24px}
@media (max-width:768px){.wrap{padding:0 20px}}

/* ---------- typografie - 2.2 ---------- */
h1,h2,h3,h4{font-family:var(--font-heading); line-height:1.25; margin:0 0 16px}
h1{font-size:clamp(2rem,1.4rem + 2.2vw,3rem); color:var(--red-500); letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem); color:var(--blue-800)}
h3{font-size:1.25rem; color:var(--ink)}
p{margin:0 0 16px; max-width:72ch}
a{color:var(--text-link); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-s)}

/* ---------- de diagonaal - 7.2/19: drum momentum, -15 graden ---------- */
.wedge{position:relative; overflow:hidden}
.wedge::after{
  content:""; position:absolute; right:-6%; top:0; bottom:0; width:38%;
  background:linear-gradient(var(--light-angle),var(--blue-500),var(--blue-300));
  transform:skewX(var(--skew)); opacity:.14; pointer-events:none;
}

/* ---------- kop ---------- */
.site-head{
  position:sticky; top:0; z-index:50; background:#FFFFFF;
  border-bottom:1px solid var(--border);
}
:root[data-theme="dark"] .site-head{background:#12181C}
.site-head .wrap{display:flex; align-items:center; gap:24px; min-height:72px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand svg{height:40px; width:auto; display:block}
.brand b{font-family:var(--font-heading); font-size:1.05rem; letter-spacing:.02em; color:var(--ink); display:block}
.brand span{display:block; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:400}
nav.main{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.main a{
  padding:8px 12px; border-radius:var(--r-m); text-decoration:none;
  color:var(--ink); font-size:.94rem; transition:background var(--t-ui) var(--ease);
}
nav.main a:hover{background:var(--surface-hover)}
nav.main a[aria-current="page"]{color:var(--red-500); font-weight:700}
.langs{display:flex; gap:2px; margin-left:8px}
.langs a{padding:6px 8px; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.06em; border-radius:var(--r-s); text-decoration:none; color:var(--muted)}
.langs a[aria-current="true"]{background:var(--blue-800); color:#fff}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px; background:var(--surface)}
.hero .tagline{
  font-family:var(--font-heading); color:var(--blue-800);
  font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px;
}
.hero .lead{font-size:1.2rem; color:var(--muted-dark); max-width:64ch}
:root[data-theme="dark"] .hero .lead{color:var(--text-muted)}

/* ---------- knoppen - 12: 150ms, een easing ---------- */
.btn{
  display:inline-block; padding:12px 24px; border-radius:var(--r-m);
  background:var(--action); color:#fff; text-decoration:none; font-weight:700;
  transition:background var(--t-ui) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover{background:var(--action-hover); color:#fff; transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--text-link); border:1px solid var(--border-strong)}
.btn.ghost:hover{background:var(--surface-hover); color:var(--text-link-hover)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}

/* ---------- specificatietabel: de kern van de site ---------- */
.specs{width:100%; border-collapse:collapse; margin:24px 0; font-size:.95rem}
.specs caption{
  text-align:left; font-family:var(--font-heading); font-size:1.1rem;
  color:var(--blue-800); padding-bottom:12px;
}
.specs th,.specs td{padding:10px 16px; border-bottom:1px solid var(--border); text-align:left}
.specs th{width:52%; font-weight:400; color:var(--muted-dark)}
:root[data-theme="dark"] .specs th{color:var(--text-muted)}
.specs td{font-weight:700; font-variant-numeric:tabular-nums}
.specs tbody tr:hover{background:var(--surface-hover)}
.specs .unit{font-weight:400; color:var(--muted); font-size:.88em}

/* vergelijkingsmatrix over alle modellen */
.matrix{width:100%; border-collapse:collapse; font-size:.9rem}
.matrix th,.matrix td{padding:9px 12px; border-bottom:1px solid var(--border);
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.matrix th:first-child,.matrix td:first-child{text-align:left; font-weight:700}
.matrix thead th{
  background:var(--blue-800); color:#fff; font-weight:400; font-size:.82rem;
  letter-spacing:.03em; border-bottom:none;
}
.matrix tbody tr:hover{background:var(--surface-hover)}
.matrix td a{font-weight:700; text-decoration:none}
.scroll-x{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-m)}

/* ---------- kaarten ---------- */
.grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{
  background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--r-l); padding:24px; box-shadow:var(--elev-1);
  transition:box-shadow var(--t-confirm) var(--ease), transform var(--t-confirm) var(--ease);
}
.card:hover{box-shadow:var(--elev-3); transform:translateY(-2px)}
.card h3{margin-bottom:8px}
.card h3 a{text-decoration:none; color:var(--red-500)}
.card .meta{color:var(--muted); font-size:.9rem; margin:0}
.card img{width:100%; height:auto; border-radius:var(--r-m); margin-bottom:16px; background:#fff}

/* linkerrand-callout - 7.3 */
.callout{
  border-left:4px solid var(--blue-500); background:var(--blue-50);
  padding:16px 20px; border-radius:0 var(--r-m) var(--r-m) 0; margin:24px 0;
}
:root[data-theme="dark"] .callout{background:rgba(70,174,230,.08)}
.callout p:last-child{margin-bottom:0}

section{padding:56px 0}
section.tight{padding:32px 0}
.eyebrow{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px}

/* ---------- voet ---------- */
.site-foot{
  background:var(--ink); color:#D8E0E5; margin-top:64px;
  padding:48px 0 32px; font-size:.92rem;
}
:root[data-theme="dark"] .site-foot{background:#0B1013}
.site-foot a{color:var(--blue-300)}
.site-foot .cols{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.site-foot h4{font-family:var(--font-heading); color:#fff; font-size:.95rem; margin:0 0 12px}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:6px}
.site-foot .legal{
  border-top:1px solid #46525A; margin-top:32px; padding-top:16px;
  color:#9AA7AE; font-size:.85rem;
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; background:#fff; padding:12px 16px; z-index:100; border-radius:var(--r-m)}

/* ---------- twee kolommen: beeld naast inhoud ---------- */
.split{display:grid; gap:40px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split-media img{width:100%; height:auto; border-radius:var(--r-l); background:#fff}
.split-media .callout{margin-top:0}

/* ---------- redactionele tekst ---------- */
.prose{max-width:76ch}
.prose h2{margin-top:40px}
.prose h3{margin-top:32px; color:var(--blue-800)}
.prose h4{margin-top:24px; font-size:1.05rem; color:var(--ink)}
.prose ul{margin:0 0 20px; padding:0; list-style:none}
.prose li{position:relative; padding-left:26px; margin-bottom:8px}
/* de druppel uit 19: de bullet is de waterdruppel, geen emoji */
.prose li::before{
  content:""; position:absolute; left:4px; top:.55em; width:9px; height:9px;
  background:var(--blue-500); border-radius:0 50% 50% 50%; transform:rotate(45deg);
}

/* ---------- formulier ---------- */
.form{max-width:none}
.fields{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form label{display:block; margin-bottom:16px; font-size:.9rem; color:var(--muted-dark)}
:root[data-theme="dark"] .form label{color:var(--text-muted)}
.fields label{margin-bottom:0}
.form input,.form textarea{
  display:block; width:100%; margin-top:6px; padding:11px 14px;
  font:inherit; font-size:.97rem; color:var(--text);
  background:var(--surface-raised); border:1px solid var(--border-strong);
  border-radius:var(--r-m); transition:border-color var(--t-ui) var(--ease);
}
.form input:hover,.form textarea:hover{border-color:var(--blue-300)}
.form input:focus,.form textarea:focus{border-color:var(--focus); outline:none;
  box-shadow:0 0 0 3px rgba(0,126,178,.18)}
.form textarea{resize:vertical}
.form .check{display:flex; gap:10px; align-items:flex-start; margin:20px 0 24px}
.form .check input{width:auto; margin:2px 0 0; flex:0 0 auto}
.form button{border:none; cursor:pointer; font-family:inherit; font-size:1rem}
.form button[disabled]{opacity:.55; cursor:progress}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-msg{margin:16px 0 0; font-weight:700; min-height:1.5em}
.form-msg.ok{color:var(--turquoise-700)}
.form-msg.bad{color:var(--action)}

/* contactpagina: het formulier krijgt de brede kolom, de gegevens de smalle */
.split.form-first{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media (max-width:900px){.split.form-first{grid-template-columns:1fr}}

/* direct-answer: het feitelijke antwoord bovenaan, wat AI-crawlers citeren */
.answer{
  font-size:1.06rem; line-height:1.6; color:var(--ink);
  border-left:4px solid var(--red-500); padding:2px 0 2px 18px; margin:0 0 28px;
  max-width:68ch;
}

/* veelgestelde vragen */
details.faq{
  border-bottom:1px solid var(--border); padding:14px 0;
}
details.faq summary{
  cursor:pointer; font-family:var(--font-heading); font-size:1.02rem;
  color:var(--blue-800); list-style:none; padding-right:28px; position:relative;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+"; position:absolute; right:4px; top:-2px; font-size:1.3rem;
  color:var(--muted); transition:transform var(--t-ui) var(--ease);
}
details.faq[open] summary::after{content:"\2212"}
details.faq p{margin:12px 0 0; color:var(--muted-dark)}
:root[data-theme="dark"] details.faq p{color:var(--text-muted)}