/* The Flower Kitchen — Prins Willemstraat 32, Scheveningen

   De kleuren komen uit de winkel zelf: het diepe groen van hortensiablad, de gekalkte muur
   van het pand dat Steven en Lilith in 2018 verbouwden, het grijs van de zinken emmers
   waar de bloemen in staan, het satijnen lint om een boeket en het raffiatouw eromheen.
   Geen enkele daarvan is een modekleur; ze staan allemaal in de winkel.

   Instrument Serif voor de koppen omdat het leest als een geschilderde winkelruit, en
   Work Sans eronder omdat die uit de weg blijft. */

:root {
  --blad:   #20362C;   /* hortensiablad, het donkerste groen in de winkel */
  --blad-2: #2C4839;   /* hetzelfde blad, een tint lichter */
  --kalk:   #EEF1EA;   /* de gekalkte muur van het pand */
  --kalk-2: #E3E8DE;   /* diezelfde muur in de schaduw */
  --zink:   #8C9A97;   /* de zinken emmers achter de toonbank */
  --lint:   #A82945;   /* het satijnen lint om het boeket */
  --lint-d: #8A1F37;   /* hetzelfde lint, donker genoeg voor kleine letters op licht */
  --raffia: #C6A05C;   /* het raffiatouw */
  --inkt:   #1A1F1C;
  --grijs:  #1A1F1C99;
  --lijn:   #20362C22;
  --lijn-l: #FFFFFF2E;
  --max: 1140px;
  --soepel: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--kalk); color: var(--inkt);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 1.02rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sier {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400; line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
p { margin: 0 0 1rem; }
a { color: var(--lint-d); }

/* Een afbeelding met een height-attribuut in de HTML wint anders van de CSS en rekt uit.
   Dat is een keer een halve site komen kosten, dus dit staat er nu altijd. */
img { max-width: 100%; height: auto; display: block; }

.binnen { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--raffia); color: var(--inkt); padding: .6rem 1rem; border-radius: 3px; }
:focus-visible { outline: 3px solid var(--lint); outline-offset: 3px; }
.donker :focus-visible, .voet :focus-visible { outline-color: var(--raffia); }

/* ---------- kop ---------- */
.balk { background: var(--kalk); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 30; }
.balk .binnen { display: flex; align-items: center; gap: .5rem 1.4rem; flex-wrap: wrap; padding: .6rem 0; }
.merk { display: block; line-height: 0; flex: none; }
.merk img { width: clamp(118px, 12vw, 158px); }
.menu { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.menu a {
  color: var(--inkt); text-decoration: none; font-size: .93rem; font-weight: 600;
  padding: .3rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .18s, border-color .18s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--lint-d); border-bottom-color: var(--lint); }
.balk .rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.knop {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--lint); color: #fff; text-decoration: none;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  padding: .62rem 1.15rem; border: 2px solid var(--lint); border-radius: 2px; cursor: pointer;
  transition: background .2s var(--soepel), border-color .2s, color .2s, transform .2s var(--soepel);
}
.knop:hover { background: var(--blad); border-color: var(--blad); color: #fff; transform: translateY(-2px); }
.knop.leeg { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop.leeg:hover { background: var(--inkt); color: var(--kalk); }
/* Op de donkergroene vlakken moet de lege knop licht zijn. De hero hoorde hier ook bij en
   stond er niet in: die telefoonknop was donkergroen op donkergroen, dus onzichtbaar. */
.donker .knop.leeg, .voet .knop.leeg, .hero .knop.leeg { color: var(--kalk); border-color: var(--kalk); }
.donker .knop.leeg:hover, .voet .knop.leeg:hover, .hero .knop.leeg:hover { background: var(--kalk); color: var(--blad); }
.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }

/* ---------- vlakken ---------- */
.vlak { padding: clamp(2.6rem, 2rem + 3vw, 4.6rem) 0; }
.vlak.donker { background: var(--blad); color: var(--kalk); }
.vlak.donker h1, .vlak.donker h2, .vlak.donker h3 { color: var(--kalk); }
.vlak.donker p { color: #EEF1EAcc; }
.vlak.muur { background: var(--kalk-2); }
.kop {
  font-family: 'Work Sans', sans-serif; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; font-size: .74rem; color: var(--lint-d); margin: 0 0 .8rem;
}
.donker .kop, .voet .kop { color: var(--raffia); }
.lood { font-size: 1.1rem; max-width: 60ch; }

.paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.6rem, 1rem + 3vw, 3.2rem); align-items: start; }
.paar > * { min-width: 0; }
.paar.gelijk { align-items: center; }

/* ---------- de hero ---------- */
.hero { background: var(--blad); color: var(--kalk); padding: clamp(3rem, 2rem + 6vw, 6rem) 0 clamp(2.4rem, 2rem + 3vw, 4rem); }
.hero h1 { max-width: 15ch; }
.hero .lood { color: #EEF1EAd0; }
.nu {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; color: var(--kalk);
  border: 1px solid var(--lijn-l); border-radius: 999px; padding: .35rem .85rem; margin-bottom: 1.2rem;
}
.stip { width: 9px; height: 9px; border-radius: 50%; background: var(--zink); flex: none; }
.stip.open { background: #4FBF7A; }

/* ---------- de emmerrij: het handelsmerk van deze site ----------
   Zes emmers op een rij, zoals ze achter de toonbank staan. Elke emmer is een gelegenheid
   en gaat rechtstreeks naar de juiste categorie in hun eigen bestelwinkel. Nu staat daar
   één knop naar de voorpagina en mag de klant zelf zoeken; dit scheelt dat. */
.emmerrij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: clamp(.7rem, .4rem + 1vw, 1.2rem); margin-top: 1.8rem; align-items: end;
}
.emmer {
  position: relative; display: block; padding-top: 3.6rem;
  text-decoration: none; color: var(--inkt);
  transition: transform .22s var(--soepel);
}
/* Het blik zelf. De clip-path maakt de schuine zijkanten, en knipt daarmee ook alles weg
   wat erbuiten valt - daarom staat de bloem er los boven en niet erin. */
.emmer .blik {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 10.5rem; padding: 1rem 1.55rem 1.15rem;
  background: linear-gradient(100deg, #7C8A87 0%, #A9B4B1 22%, #C3CBC8 42%, #9DA9A6 62%, #7C8A87 100%);
  border-radius: 2px 2px 14px 14px;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
}
.emmer .blik::before {   /* de omgeslagen rand bovenaan */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1.15rem;
  background: linear-gradient(100deg, #6C7A77, #B6C0BD 40%, #6C7A77);
  border-bottom: 1px solid #5F6D6A;
}
.emmer .blik::after {    /* de gefelste band onderaan */
  content: ''; position: absolute; left: 0; right: 0; bottom: 3.1rem; height: 2px;
  background: #ffffff38;
}
.emmer:hover { transform: translateY(-5px); }
.emmer:hover .blik { filter: brightness(1.06); }
.emmer .gelegenheid {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); line-height: 1.04; color: #16261E;
  hyphens: auto; overflow-wrap: break-word;
}
.emmer .vanafprijs { font-size: .8rem; font-weight: 600; color: #24382E; margin-top: .3rem; }
.emmer .steel {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  line-height: 0; filter: drop-shadow(0 2px 3px #00000026);
}
.emmer .steel svg { display: block; }
@media (prefers-reduced-motion: reduce) { .emmer:hover { transform: none; } }

/* ---------- kaarten ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 1.2rem; margin-top: 1.7rem; }
.kaart {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--lijn); border-radius: 3px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .22s var(--soepel), border-color .22s, box-shadow .22s;
}
.kaart:hover { transform: translateY(-4px); border-color: var(--lint); box-shadow: 0 10px 24px #20362C14; }
.kaart .beeld { aspect-ratio: 4/5; background: var(--kalk-2); position: relative; }
.kaart .beeld img { width: 100%; height: 100%; object-fit: cover; }
.kaart .tekstvak { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.kaart h3 { font-size: 1.02rem; margin: 0; }
.kaart .soort { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zink); font-weight: 600; }
.kaart .onder { margin-top: auto; padding-top: .5rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.prijs { font-weight: 600; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.prijs .vanaf { font-weight: 400; font-size: .76rem; color: var(--grijs); margin-right: .2em; }
.kaart .pijl { color: var(--lint-d); font-weight: 600; font-size: .85rem; }
.vlag {
  position: absolute; top: .55rem; left: .55rem; background: var(--raffia); color: var(--inkt);
  font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 2px;
}

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.filters label { cursor: pointer; }
.filters input { position: absolute; opacity: 0; pointer-events: none; }
.filters span {
  display: inline-block; padding: .34rem .78rem; font-size: .87rem; font-weight: 600;
  border: 1px solid var(--lijn); border-radius: 999px; background: #fff; transition: all .18s;
}
.filters input:checked + span { background: var(--blad); border-color: var(--blad); color: var(--kalk); }
.filters input:focus-visible + span { outline: 3px solid var(--lint); outline-offset: 2px; }
.filters span:hover { border-color: var(--lint); }
.telling { font-size: .87rem; color: var(--grijs); margin: .9rem 0 0; }

/* ---------- fotorij ---------- */
.fotorij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; margin-top: 1.6rem; }
.fotorij figure { margin: 0; }
.fotorij img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 3px; }

/* ---------- openingstijden ---------- */
.tijden { list-style: none; margin: 1rem 0 0; padding: 0; }
.tijden li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--lijn); font-size: .96rem; }
.donker .tijden li { border-bottom-color: var(--lijn-l); }
.tijden li.vandaag { font-weight: 600; }
.tijden li.vandaag .dag::after { content: ' — vandaag'; color: var(--raffia); font-weight: 600; }
.tijden .uren { font-variant-numeric: tabular-nums; }

/* ---------- kaartje bij het boeket ---------- */
.kaartje {
  background: #fff; border: 1px solid var(--lijn); border-left: 4px solid var(--raffia);
  padding: 1.1rem 1.2rem; border-radius: 2px; max-width: 46ch;
}
.kaartje p:last-child { margin-bottom: 0; }
.donker .kaartje { background: #ffffff10; border-color: var(--lijn-l); }

/* ---------- voet ---------- */
.voet { background: var(--blad); color: var(--kalk); padding: clamp(2.4rem, 2rem + 2vw, 3.4rem) 0 2rem; }
.voet a { color: var(--kalk); }
.voet a:hover { color: var(--raffia); }
.voetgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1.8rem; }
.voet .klein { font-size: .82rem; color: #EEF1EA99; max-width: 84ch; margin-top: 2rem; }
/* Hun logo is een PNG zonder transparantie, met een witte ondergrond. Omkeren maakte er
   een wit blok van. Zolang er geen versie met doorzichtige achtergrond is, zetten we hem
   op een licht plaatje - dat oogt als een bewuste keuze in plaats van een fout. */
.voet .merk { display: inline-block; background: var(--kalk); padding: .5rem .7rem; border-radius: 3px; }
.voet .merk img { width: clamp(112px, 11vw, 142px); }

/* ---------- beweging ---------- */
.onthul { opacity: 0; transform: translateY(14px); }
body.aan .onthul { transition: opacity .6s var(--soepel) var(--wacht, 0ms), transform .6s var(--soepel) var(--wacht, 0ms); }
.onthul.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .onthul { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- telefoon ---------- */
@media (max-width: 720px) {
  .balk .binnen { padding: .5rem 0; }
  .menu { order: 3; width: 100%; gap: .1rem .85rem; }
  .menu a { font-size: .87rem; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: .8rem; }
  .kaart .tekstvak { padding: .65rem .7rem .8rem; }
  .emmer { min-height: 9.5rem; }
}

@media print {
  .balk, .voet, .knoppen, .filters { display: none; }
  body { background: #fff; }
  .vlak.donker, .hero { background: #fff !important; color: #000 !important; }
}