/* ==========================================================================
   HOLY MOLY PIZZA — Bestelflow
   base.css · design tokens, fonts, reset & typografie
   ========================================================================== */

/* ---------- Fonts ----------
   Brakle (koppen) is een commercieel font. Plaats brakle-bold.woff2 in
   assets/fonts/ en het wordt automatisch gebruikt. Tot die tijd valt de
   site terug op Archivo Expanded Black (OFL, self-hosted). */
@font-face {
  font-family: "Brakle";
  src: local("Brakle Bold"), local("Brakle-Bold"),
       url("../assets/fonts/brakle-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Brakle Fallback";
  src: url("../assets/fonts/archivo-expanded-black.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  size-adjust: 89%;          /* evenaart de breedte van Brakle */
}
@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Kleuren */
  --c-red: #be1622;
  --c-blue: #004f9f;
  --c-green: #4a7c4c;
  --c-green-dark: #2f5d31;
  --c-ink: #1b1512;
  --c-muted: #5e5548;
  --c-placeholder: #505050;
  --c-border: #d0cab3;
  --c-white: #fff;
  --c-bg: #fff4e0;
  --c-panel: #f8f1e0;
  --c-chip: #e9e1cd;
  --c-red-soft: #fcebe5;
  --c-red-tint: #f8dcdd;
  --c-blue-soft: #dce7f4;
  --c-green-soft: #e4e9de;
  --c-green-bg: #ecffec;

  /* Typografie */
  --font-display: "Brakle", "Brakle Fallback", "Arial Black", sans-serif;
  --font-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --fs-h1: clamp(2rem, 1.25rem + 3.2vw, 3.25rem);   /* 52px desktop */
  --lh-h1: 1.115;                                     /* 58px */
  --fs-h2: 1.625rem;  /* 26 */
  --fs-h2-sm: 1.5rem; /* 24 */
  --fs-h3: 1.25rem;   /* 20 */
  --fs-h4: 1.125rem;  /* 18 */
  --fs-lead: 1.125rem;/* 18 */
  --fs-body: 1rem;    /* 16 */
  --fs-sm: .875rem;   /* 14 */

  /* Ruimte */
  --space-2xs: 4px;
  --space-xs: 10px;
  --space-sm: 15px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 50px;
  --space-2xl: 100px;

  /* Vormen & effecten */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border: 2px solid var(--c-border);
  --shadow: 10px 10px 30px rgb(0 0 0 / .25);
  --shadow-sm: 10px 10px 15px rgb(0 0 0 / .25);
  --focus: 0 0 0 3px var(--c-white), 0 0 0 5px var(--c-blue);

  /* Layout */
  --gutter: clamp(16px, 3.3vw, 50px);
  --panel-width: clamp(320px, 27.3vw, 413px);

  /* Iconen (mask-image / background-image) */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.28571' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.28564 8.00002H13.7142M9.14279 12.5714L13.7142 8.00002L9.14279 3.42859'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.28571' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.7142 8.00002H2.28564M6.85707 12.5714L2.28564 8.00002L6.85707 3.42859'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.28571' stroke-linecap='round'%3E%3Cpath d='M2.28564 8H13.7142'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.28571' stroke-linecap='round'%3E%3Cpath d='M7.99993 2.28571V13.7143M2.28564 7.99999H13.7142'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.57143' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5'/%3E%3C/svg%3E");
  --icon-check-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='%23000' stroke-width='1.57143' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.96436 5.89286L4.3215 8.25L9.03578 2.75'/%3E%3C/svg%3E");
  --icon-check-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23fff' stroke-width='1.85714' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.8215 15.4643L13.6072 18.25L19.1787 11.75'/%3E%3C/svg%3E");
  --icon-check-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15L11 21L23 7'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23fff'%3E%3Cpath d='M15.528 8.8H20.39L19.558 20.994H16.386L15.528 8.8ZM15.528 25.388C15.528 24.7293 15.7533 24.192 16.204 23.776C16.672 23.36 17.2613 23.152 17.972 23.152C18.6827 23.152 19.2633 23.36 19.714 23.776C20.182 24.192 20.416 24.7293 20.416 25.388C20.416 26.0467 20.182 26.584 19.714 27C19.2633 27.416 18.6827 27.624 17.972 27.624C17.2613 27.624 16.672 27.416 16.204 27C15.7533 26.584 15.528 26.0467 15.528 25.388Z'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%235E5548' stroke-width='1.8'%3E%3Cpath d='M10.5001 2.72223H3.50011C2.42622 2.72223 1.55566 3.59279 1.55566 4.66667V10.5C1.55566 11.5739 2.42622 12.4445 3.50011 12.4445H10.5001C11.574 12.4445 12.4446 11.5739 12.4446 10.5V4.66667C12.4446 3.59279 11.574 2.72223 10.5001 2.72223Z'/%3E%3Cpath d='M1.55566 5.83332H12.4446M4.66678 1.55554V3.88888M9.33344 1.55554V3.88888' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231B1512' stroke-width='2.28571' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5L7 9L11 5'/%3E%3C/svg%3E");
  --icon-check-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%234A7C4C' stroke-width='2.57143' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5'/%3E%3C/svg%3E");
  --icon-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%232F5D31'%3E%3Cpath d='M10 1.5C4.5 1.5 2 4.5 2 7.5C2 8.3 2.2 9 2.55 9.6C3.15 7.4 4.75 5.75 7 4.75C5.2 6.1 3.9 7.75 3.35 9.8C3.8 9.95 4.25 10 4.7 10C8.5 10 10 6.5 10 1.5Z'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-muted);
  font: 400 var(--fs-body)/1.4 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; }
button { color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
hr { border: 0; border-top: 1px solid var(--c-border); width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* Tekst trimmen tot kapitaalhoogte, net als "text-box trim" in Figma.
   Browsers zonder ondersteuning tonen iets meer witruimte. */
:where(h1, h2, h3, h4, p, li, dt, dd, label, legend, small, figcaption) {
  text-box: trim-both cap alphabetic;
}
/* …maar niet bij lijstitems met knoppen of tellers erin: die moeten hun
   volle hoogte houden, anders overlappen rijen bij het afbreken. */
:where(li):has(> .btn, > .qty, > button) { text-box: none; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: 32px; }
h3 { font-size: var(--fs-h3); line-height: 1.5; }
h4 { font-size: var(--fs-h4); line-height: 30px; }

.lead { font-size: var(--fs-lead); line-height: 1.5; }
.text-sm { font-size: var(--fs-sm); }
.text-error { color: var(--c-red); font-weight: 700; }
.text-info  { color: var(--c-blue); font-weight: 700; }
.required::after { content: " *"; color: var(--c-red); }
.legend::before { content: "* "; color: var(--c-red); }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}