/*
Theme Name: DSV Headless
Theme URI: https://nieuw.deschattenvan.nl
Description: Lichtgewicht, builder-loos (Elementor-vrij) thema voor De Schatten Van. Native WooCommerce, performance-first. Visueel gelijk aan de Elementor-site.
Author: Joey / DSV
Version: 0.1.0
Requires PHP: 8.0
Text Domain: dsv
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* brand */
  --c-primary:#009A9B;        /* teal / groenblauw */
  --c-primary-dark:#007a7b;
  --c-offwhite:#F7F3EE;       /* beige achtergrond */
  --c-ink:#1B1C1C;            /* tekst zwart */
  --c-brown:#431E18;          /* donkerbruin */
  --c-sale:#FF6868;           /* sale rood */
  /* kinderpalet */
  --c-pink:#F086AA;
  --c-blue:#23B3CF;
  --c-yellow:#FFCC00;
  --c-orange:#EF7D00;
  --c-lightgreen:#D7E9CF;
  --c-green:#60AE4D;
  /* neutrals */
  --c-white:#fff;
  --c-line:#e7e1d8;
  --c-muted:#7a756d;

  /* type */
  --f-head:'Akshar',-apple-system,BlinkMacSystemFont,sans-serif;
  --f-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* layout */
  --wrap:1280px;
  --wrap-wide:1480px;
  --gap:24px;
  --radius:14px;
  --radius-sm:8px;
  --header-h:72px;
  --shadow:0 6px 24px rgba(27,28,28,.08);
  --shadow-lg:0 18px 50px rgba(27,28,28,.16);
  --t:.25s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.875;
  color:var(--c-ink);background:var(--c-white);-webkit-font-smoothing:antialiased;letter-spacing:.2px}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t)}
a:hover{color:var(--c-primary)}
button{font:inherit;cursor:pointer;border:0;background:none}
ul,ol{margin:0;padding:0;list-style:none}
input,select,textarea{font:inherit;color:inherit}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4,h5,h6{font-family:var(--f-head);font-weight:500;margin:0 0 .4em;
  letter-spacing:.5px;line-height:1.2;text-transform:capitalize;color:var(--c-ink)}
h1{font-size:40px;line-height:50px}
h2{font-size:35px;line-height:45px}
h3{font-size:25px;line-height:30px}
h4{font-size:18px;line-height:28px}
p{margin:0 0 1em}
.lead{font-size:18px;line-height:30px}
@media(max-width:1024px){h1{font-size:35px;line-height:42px}h2{font-size:28px;line-height:38px}}
@media(max-width:600px){h1{font-size:30px;line-height:40px}h2{font-size:24px;line-height:34px}h3{font-size:20px}}

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap--wide{max-width:var(--wrap-wide)}
.section{padding-block:56px}
.section--tight{padding-block:32px}
.text-center{text-align:center}
.bg-offwhite{background:var(--c-offwhite)}
.eyebrow{font-family:var(--f-body);font-weight:600;text-transform:uppercase;
  letter-spacing:1px;font-size:13px;color:var(--c-primary)}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn,a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;
  line-height:1;padding:14px 26px;border-radius:999px;background:var(--c-primary);color:#fff;
  transition:transform var(--t),background var(--t),box-shadow var(--t)}
.btn:hover{background:var(--c-primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--c-ink);border:1.5px solid var(--c-ink)}
.btn--ghost:hover{background:var(--c-ink);color:#fff}
.btn--sale{background:var(--c-sale)}
.btn--block{display:flex;width:100%}

/* visually hidden */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}