/* ==========================================================================
   Eethuis Marina Smir · Laakshop IT Services · 2026-09-04

   La identidad es DEL CLIENTE y no se ha tocado: rojo #B22222 sobre negro, y
   Poppins. Salen del wireframe de abril y de su logo. Lo que cambia aqui es
   la ejecucion, no la marca.

   REGLAS: un acento (el rojo). Dos radios. Movimiento bajo. El verde solo
   aparece en el boton de WhatsApp, porque ahi el color es de WhatsApp y
   cambiarlo lo hace irreconocible.
   ========================================================================== */

:root {
  --rood:       #b22222;
  --rood-diep:  #8b0000;
  --rood-zacht: #2a1113;

  --zwart:      #111111;
  --zwart-2:    #1a1a1a;
  --zwart-3:    #232323;
  --lijn:       #2f2f2f;

  --wit:        #f4f2f0;
  --grijs:      #b9b3ae;
  --grijs-diep: #8b8580;

  --whatsapp:   #25d366;

  --r-sm: 10px;
  --r-md: 16px;
  --wrap: 72rem;
  --nav-h: 86px;
  --t: .18s cubic-bezier(.4,0,.2,1);

  --sans: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Poppins NO es variable: son cuatro ficheros distintos (md5 comprobado), asi
   que aqui si van cuatro @font-face. */
@font-face{font-family:Poppins;src:url(../fonts/poppins-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--grijs);
  background: var(--zwart);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3 { color: var(--wit); line-height: 1.15; margin: 0 0 .6rem; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }

/* Ninguna imagen se sale nunca de su columna. Sin esto, las fotos de las
   secciones (que no llevan clase) se pintaban a su ancho nativo de 900px y
   en un movil de 390 el documento se iba a 924px de ancho. Detectado el
   13-09-2026 midiendo el scrollWidth en un viewport real de 390. */
img, picture, svg, video { max-width:100%; height:auto }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1rem; max-width: 62ch; }
a  { color: var(--wit); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.sect { padding: 5rem 0; }
.sect--alt { background: var(--zwart-2); }

.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rood); margin-bottom: .8rem;
}
.lead { font-size: 1.1rem; color: var(--grijs); }

.skip { position:absolute; left:-9999px; background:var(--rood); color:#fff; padding:.7rem 1rem; z-index:100 }
.skip:focus { left:1rem; top:1rem }
:where(a,button,input,select):focus-visible { outline:3px solid var(--rood); outline-offset:2px }

/* ---------- Botones ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:var(--r-sm);
  font:inherit; font-weight:600; font-size:.97rem;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid transparent; transition:background var(--t),border-color var(--t),transform var(--t);
}
.btn:active { transform: translateY(1px); }
.btn--rood { background:var(--rood); color:#fff }
.btn--rood:hover { background:var(--rood-diep) }
.btn--lijn { background:transparent; color:var(--wit); border-color:var(--lijn) }
.btn--lijn:hover { border-color:var(--rood) }
.btn--wa { background:var(--whatsapp); color:#06301a }
/* Thuisbezorgd: borde naranja de su marca, sin relleno. Relleno naranja
   competiria con el degradado de fuego de los titulos y con el rojo de la
   marca; asi se reconoce sin robar protagonismo. */
.btn--tb { background:transparent; color:#ff8000; border-color:#ff8000 }
.btn--tb:hover { background:rgba(255,128,0,.12) }
.btn--wa:hover { filter:brightness(1.08) }

/* ---------- Cabecera ---------- */
.nav {
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(17,17,17,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
}
.nav__in { display:flex; align-items:center; gap:2rem }
.nav__brand { display:flex; align-items:center; gap:.7rem; text-decoration:none }
.nav__brand img { display:block; height:58px; width:auto }
.nav__links { display:flex; gap:1.5rem; margin-left:auto }
.nav__links a { color:var(--grijs); text-decoration:none; font-size:.94rem; font-weight:400 }
.nav__links a:hover { color:var(--wit) }
.nav__cta { display:flex; gap:.6rem }
.nav__burger { display:none; margin-left:auto; background:none; border:1px solid var(--lijn);
  border-radius:var(--r-sm); padding:.5rem .7rem; color:var(--wit); font-size:1.1rem; cursor:pointer }

/* ---------- Hero ---------- */
.hero { position:relative; padding:5rem 0 4rem; overflow:hidden; border-bottom:1px solid var(--lijn) }
.hero::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(48rem 30rem at 78% 8%, rgba(178,34,34,.34), transparent 62%);
  pointer-events:none;
}
.hero__grid { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center }
.hero p { font-size:1.14rem; max-width:44ch }
.hero__cta { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.8rem }
.hero__foto img { display:block; width:100%; height:auto; border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(0,0,0,.55) }

/* estado: abierto o cerrado ahora mismo, lo calcula el JS */
.status {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--lijn); border-radius:99px;
  padding:.35rem .9rem; font-size:.87rem; color:var(--wit);
  background:var(--zwart-2); margin-bottom:1.2rem;
}
.status__punt { width:9px; height:9px; border-radius:50% }
.status--open .status__punt { background:var(--whatsapp); box-shadow:0 0 0 4px rgba(37,211,102,.16) }
.status--dicht .status__punt { background:var(--rood) }
.status--bijna .status__punt { background:#f0a020; box-shadow:0 0 0 4px rgba(240,160,32,.18) }

/* ---------- Rejillas y tarjetas ---------- */
.grid { display:grid; gap:1.25rem }
.grid--2 { grid-template-columns:repeat(2,1fr) }
.grid--3 { grid-template-columns:repeat(3,1fr) }

.kaart {
  background:var(--zwart-2); border:1px solid var(--lijn);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color var(--t), transform var(--t);
}
.kaart:hover { border-color:var(--rood); transform:translateY(-2px) }
.kaart img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover }
.kaart__body { padding:1.25rem }
.kaart__body h3 { margin-bottom:.3rem }
.kaart__body p { margin:0 0 .7rem; font-size:.95rem; color:var(--grijs-diep) }
.kaart__prijs { color:var(--rood); font-weight:600; font-size:.95rem }

/* ---------- Horarios ---------- */
.uren { display:grid; gap:0; max-width:30rem }
.uren__rij { display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-top:1px solid var(--lijn); font-size:.97rem }
.uren__rij:first-child { border-top:0 }
/* La hora nunca se parte en dos lineas: con 10:00 - 00:00 la columna se
   quedaba corta y partia el rango por la mitad. */
.uren__rij span { white-space:nowrap }
.uren__rij strong { color:var(--wit); font-weight:600 }
.uren__rij.is-vandaag { color:var(--wit) }
.uren__rij.is-vandaag strong { color:var(--rood) }

/* ---------- Carta ---------- */
.menu-nav { position:sticky; top:var(--nav-h); z-index:40;
  background:rgba(17,17,17,.96); border-bottom:1px solid var(--lijn); padding:.7rem 0 }
/* La barra de desplazamiento iba pegada a los chips y salia azul, que es el
   color por defecto del navegador. Ahora va separada y en rojo de la marca. */
.menu-nav__in {
  display:flex; gap:.5rem; overflow-x:auto;
  padding-bottom:.85rem;
  scrollbar-width:thin;
  scrollbar-color: var(--rood) #262626;
}
.menu-nav__in::-webkit-scrollbar { height:5px }
.menu-nav__in::-webkit-scrollbar-track { background:#262626; border-radius:99px }
.menu-nav__in::-webkit-scrollbar-thumb { background:var(--rood); border-radius:99px }
.menu-nav__in::-webkit-scrollbar-thumb:hover { background:#d33 }
.menu-nav a { flex:0 0 auto; border:1px solid var(--lijn); border-radius:99px;
  padding:.42rem .95rem; font-size:.88rem; text-decoration:none; color:var(--grijs) }
.menu-nav a:hover { border-color:var(--rood); color:var(--wit) }
.menu-nav a { transition:border-color var(--t), color var(--t) }

/* Sin esto, al pulsar una categoria el titulo queda DEBAJO de las dos barras
   pegajosas (nav 72px + menu-nav ~50px) y en pantalla se ve ya la seccion
   siguiente: pulsabas Pasta y parecia que te llevaba a Ontbijt. */
/* El salto usa --sticky-h, que MIDE el navegador al cargar (ver el script del
   pie): altura real del nav mas la del indice de categorias. Antes era un
   numero a mano y se descuadro en cuanto se le anadio padding a la barra de
   scroll: el titulo quedaba medio tapado. Un valor medido no se descuadra. */
.kat { margin-bottom:3rem; scroll-margin-top:calc(var(--sticky-h, 170px) + 1.1rem) }
.kat__kop { display:flex; align-items:baseline; gap:.7rem; margin-bottom:.3rem }
.kat__kop h2 { margin:0 }
.kat__note { color:var(--grijs-diep); font-size:.9rem; margin:0 0 1rem }

.kolomkop { display:flex; justify-content:flex-end; gap:2.5rem;
  color:var(--grijs-diep); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; padding-bottom:.4rem; border-bottom:1px solid var(--lijn) }
.kolomkop span { width:4.5rem; text-align:right }

.regel { display:flex; align-items:baseline; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--zwart-3) }
.regel__naam { color:var(--wit); font-weight:400 }
.regel__naam small { color:var(--grijs-diep); font-weight:300; margin-left:.4rem }
.regel__stip { flex:1; border-bottom:1px dotted var(--lijn); transform:translateY(-4px) }
/* nowrap: sin esto "€ 26,00" parte el simbolo del numero en pantalla estrecha */
.regel__prijs { color:var(--wit); font-weight:600; font-variant-numeric:tabular-nums;
  width:4.9rem; text-align:right; flex:0 0 auto; white-space:nowrap }
.regel__prijs.is-tweede { color:var(--rood) }


/* ---------- Titulos de categoria: degradado de fuego ----------
   Los titulos blancos dejaban la carta plana al lado de la home, que si tiene
   el rojo del hero. El degradado va de brasa a llama, que es lo que pega en
   una cocina, y usa el mismo rojo de la marca como base.

   El color solido va PRIMERO: si un navegador viejo no soporta
   background-clip:text, el titulo se ve en rojo, nunca invisible. */
.kat__kop h2 {
  color: var(--rood);
  /* VERTICAL, no horizontal: en horizontal cada titulo sale de un color
     distinto segun lo largo que sea, y "Schotels" quedaba naranja entero
     mientras "Marokkaanse gerechten" llegaba hasta el rojo. En vertical todos
     tienen la misma llama, y ademas sube como el fuego. */
  background: linear-gradient(180deg, #ffcf7a 0%, #ff9330 42%, #ef5426 78%, #d13a22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .1em;   /* sitio para las colas de la g y la j */
}
@supports not (background-clip: text) {
  .kat__kop h2 { -webkit-text-fill-color: currentColor; color: #ff8a3d }
}

/* Rayita de brasa bajo el titulo, para separar sin meter otra linea gris */
.kat__kop::after {
  content: ""; display: block; height: 3px; width: 3.2rem; border-radius: 99px;
  background: linear-gradient(90deg, #ffb347, var(--rood));
  margin-top: .55rem;
}
.kat__kop { display: block }

/* La carta arranca con el mismo calor que la home, no en frio */
.kaart-kop {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--lijn);
  padding: 3rem 0 2.5rem;
}
.kaart-kop::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(42rem 22rem at 22% -10%, rgba(178,34,34,.38), transparent 62%);
  pointer-events: none;
}
.kaart-kop > * { position: relative }

/* ---------- Pie ---------- */
.foot { background:#0c0c0c; border-top:1px solid var(--lijn); padding:3.5rem 0 2rem; font-size:.93rem }
.foot a { color:var(--grijs); text-decoration:none }
.foot a:hover { color:var(--wit) }
.foot h4 { color:var(--wit); font-size:.95rem; margin-bottom:.8rem }
.foot__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem }
.foot__bar { margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--lijn);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.86rem; color:var(--grijs-diep) }

.todo { background:#4a3a00; color:#ffd75e; border-bottom:1px dashed #ffd75e;
  padding:0 .25rem; font-weight:600 }

/* ---------- Barra fija de movil ----------
   En un eethuis la mayoria entra desde el telefono, y casi siempre para pedir.
   Esta barra sigue al usuario mientras lee la carta, asi no tiene que volver
   arriba para encontrar el boton. En escritorio no aparece. */
.belbalk {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  gap: .6rem; padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(17,17,17,.97);
  border-top: 1px solid var(--lijn);
  backdrop-filter: blur(10px);
}
.belbalk .btn { flex: 1; justify-content: center; padding: .8rem 1rem }

@media (max-width: 700px) {
  .belbalk { display: flex }
  /* La barra de abajo ya lleva llamar y WhatsApp: repetirlos en el hero es
     duplicar el mismo CTA dos veces en la misma pantalla. */
  .hero__cta .btn--lijn, .hero__cta .btn--wa { display: none }
  /* hueco para que la barra no tape el final del pie */
  body { padding-bottom: 4.6rem }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero__grid { grid-template-columns:1fr; gap:2.25rem }
  .grid--3 { grid-template-columns:repeat(2,1fr) }
  .foot__grid { grid-template-columns:1fr 1fr }
}
@media (max-width:700px){
  .sect { padding:3.5rem 0 }
  .nav__links { display:none }
  .nav__links.is-open { display:grid; gap:.3rem; position:absolute; top:var(--nav-h);
    left:0; right:0; background:var(--zwart-2); border-bottom:1px solid var(--lijn); padding:1rem 1.5rem }
  .nav__burger { display:block }
  /* En movil la cabecera solo aguanta un boton: se queda Menukaart.
     El telefono y Thuisbezorgd viven en la barra fija de abajo. */
  .nav__cta .btn--lijn, .nav__cta .btn--tb { display:none }
  /* El indice de categorias DEJA de ser pegajoso en movil. Con las dos barras
     pegadas (cabecera + indice) se comian 120px de una pantalla de 844, y al
     hacer scroll los chips de categoria se quedaban colgados bajo la cabecera.
     Lo dijo Loco el 13-09-2026. En escritorio sigue pegajoso: ahi sobra sitio. */
  .menu-nav { position:static; top:auto }
  .nav__brand img { height:44px }
  .grid--2,.grid--3 { grid-template-columns:1fr }
  .foot__grid { grid-template-columns:1fr }
  .kolomkop span,.regel__prijs { width:4.4rem }
}