/* Van Oosten voor vis, Delft. Opzet gemaakt door Andor Manu.

   Het idee: hun eigen site zegt veertien keer "dagprijs", want ze kopen elke
   ochtend in op de afslag in Scheveningen. Op hun huidige site leest dat als
   een pagina die niet af is. Hier is het het bewijs dat de vis van vanochtend
   is, en het enige wat je hoeft te doen is bellen.

   Kleuren komen uit hun eigen winkel: het natte leisteen van de vloer, het
   gemalen ijs in de toonbank, het krijt van het bordje en het oranjerood van
   gekookte garnaal. Geen Delfts blauw, want dat verzint iedereen. */

:root {
  --natte-steen: #16201F;  /* de natte vloer van een viswinkel */
  --steen-licht: #1E2B2A;
  --ijs:         #DDE4E3;  /* gemalen ijs in de toonbank */
  --krijt:       #F4F2EC;  /* het bordje waar de dagprijs op staat */
  --noordzee:    #2E6B6B;  /* petrolgroen */
  --dagprijs:    #E4572E;  /* oranjerood van gekookte garnaal */
  --zilver:      #93A3A1;  /* haringzilver */
  --lijn:        #C6D0CE;
  --lijn-donker: #FFFFFF1f;

  --kop:   'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --tekst: 'Faustina', Georgia, serif;

  --regel: 34rem;
  --breed: 70rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--krijt);
  color: var(--natte-steen);
  font-family: var(--tekst);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--dagprijs); outline-offset: 3px; }

.overslaan {
  position: absolute; left: -9999px;
  background: var(--natte-steen); color: var(--krijt);
  padding: .7rem 1rem; z-index: 20;
}
.overslaan:focus { left: 1rem; top: 1rem; }

.binnen { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 1.4rem; }

h1, h2, h3 { font-family: var(--kop); font-weight: 700; letter-spacing: -.01em; margin: 0; }

/* ---------- de kop ---------- */

.kop { position: relative; background: var(--natte-steen); color: var(--krijt); }

.kop-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}

.kop-over {
  position: relative;
  padding: 4rem 0 3.2rem;
  background: linear-gradient(180deg, #16201Fcc 0%, #16201Fe6 55%, #16201F 100%);
}

.strook {
  font-family: var(--kop);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ijs);
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.8rem, 10vw, 5.4rem); line-height: .93; }

.onderkop {
  font-size: 1.2rem;
  max-width: var(--regel);
  margin: 1.3rem 0 0;
  color: #F4F2ECd9;
}

/* De stand van nu. Staat er alleen als het script draait, anders zou er een
   leeg vlak overblijven met een bewering die niemand gecontroleerd heeft. */
.nu {
  margin: 1.8rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--lijn-donker);
  background: #0000002e;
  max-width: 30rem;
}
.nu p { margin: 0; }
/* Op een telefoon loopt de stand over twee regels. De stip hoort dan bij de
   eerste regel, niet ergens tussen de twee in te zweven. */
.nu-stand { font-family: var(--kop); font-weight: 600; font-size: 1.05rem; display: flex; align-items: flex-start; gap: .6rem; }
.stip { width: .6rem; height: .6rem; border-radius: 50%; background: var(--zilver); flex: none; margin-top: .5em; }
.nu.open .stip { background: #57C08A; }
.nu.dicht .stip { background: var(--dagprijs); }
.nu-aanbod { margin-top: .3rem; color: #F4F2ECc4; font-size: .96rem; }
.nu-aanbod strong { color: var(--krijt); }

.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 0; }

.knop {
  font-family: var(--kop);
  font-weight: 600;
  font-size: 1rem;
  background: var(--dagprijs);
  color: var(--krijt);
  border: 1px solid var(--dagprijs);
  padding: .75rem 1.3rem;
  text-decoration: none;
}
.knop:hover { background: transparent; color: var(--dagprijs); }
.knop--stil { background: transparent; color: var(--krijt); border-color: #F4F2EC59; }
.knop--stil:hover { background: var(--krijt); color: var(--natte-steen); border-color: var(--krijt); }

/* ---------- categoriebalk ---------- */

.balk {
  position: sticky; top: 0; z-index: 10;
  background: var(--steen-licht);
  border-bottom: 1px solid var(--lijn-donker);
}
.balk .binnen { display: flex; gap: .2rem 1.4rem; overflow-x: auto; scrollbar-width: none; padding-block: .7rem; }
.balk .binnen::-webkit-scrollbar { display: none; }
.balk a {
  font-family: var(--kop);
  font-weight: 500;
  font-size: .86rem;
  letter-spacing: .03em;
  color: var(--ijs);
  text-decoration: none;
  white-space: nowrap;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.balk a:hover { border-bottom-color: var(--dagprijs); color: var(--krijt); }

/* ---------- blokken ---------- */

.blok { padding: 3.4rem 0; border-top: 1px solid var(--lijn); }
.blok h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: .9rem; }
.inleiding { max-width: var(--regel); margin: 0 0 1.8rem; }

/* ---------- HET DAGPRIJSBORD ---------- */

.bord {
  background: var(--natte-steen);
  color: var(--krijt);
  border-top: 0;
}
.bord .inleiding { color: #F4F2ECc9; }
.bord em { color: var(--dagprijs); font-style: normal; font-weight: 600; }

/* Een prijslijst leest slecht als naam en bedrag een halve meter uit elkaar
   staan. Daarom smaller dan de rest van de pagina. */
.prijzen { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.prijzen li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1.2rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--lijn);
}
.bord .prijzen li { border-bottom-color: var(--lijn-donker); }

.wat { font-family: var(--kop); font-weight: 600; font-size: 1.06rem; }
.hoe { grid-column: 1; font-size: .92rem; color: var(--zilver); }
.bord .hoe { color: #93A3A1; }
.prijs {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--kop);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.prijs small { display: block; font-weight: 400; font-size: .76rem; color: var(--zilver); white-space: nowrap; }

/* De dagprijs is het enige oranje op de pagina. */
.prijzen .dag .prijs a {
  color: var(--dagprijs);
  text-decoration: none;
  border-bottom: 2px solid var(--dagprijs);
}
.prijzen .dag .prijs a:hover { color: var(--krijt); background: var(--dagprijs); border-color: var(--dagprijs); }
.prijzen .buiten .prijs { color: var(--zilver); }

.bordvoet {
  margin: 1.6rem 0 0;
  max-width: 42rem;
  color: #F4F2ECc9;
}
.bordvoet a { color: var(--dagprijs); }

/* ---------- de week ---------- */

.week-blok { background: var(--ijs); }
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); }
.week li {
  background: var(--krijt);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .1rem;
}
.week .dagnaam {
  font-family: var(--kop); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zilver);
}
.week .deal { font-family: var(--kop); font-weight: 600; font-size: 1.02rem; }
.week .dagprijs {
  font-family: var(--kop); font-weight: 700; font-size: 1.5rem;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.week .klein { font-size: .84rem; color: var(--zilver); }

.week li.vandaag { background: var(--natte-steen); color: var(--krijt); }
.week li.vandaag .dagnaam { color: var(--dagprijs); }
.week li.vandaag .dagprijs { color: var(--dagprijs); }
.week li.vandaag .klein { color: #93A3A1; }

/* ---------- categorieblokken ---------- */

.cat-kop { display: grid; gap: 1.4rem; margin-bottom: 1.8rem; align-items: start; }
.cat-kop img { border: 1px solid var(--lijn); }
.cat-kop p { margin: 0 0 .8rem; max-width: var(--regel); }
.let-op { color: var(--noordzee); }
.allergie { background: var(--ijs); border-left: 3px solid var(--noordzee); padding: .7rem .9rem; }

.wisselend { margin-top: 1.4rem; border-top: 1px solid var(--lijn); padding-top: 1rem; }
.wisselend summary {
  font-family: var(--kop); font-weight: 600; cursor: pointer;
  padding: .3rem 0;
}
.wisselend summary:hover { color: var(--noordzee); }
.rij { color: var(--natte-steen); margin: .8rem 0; }
.bel { color: var(--zilver); font-size: .95rem; margin: 1rem 0 0; }
.bel a { color: var(--noordzee); }

/* ---------- bestellen ---------- */

.bestellen { background: var(--ijs); }
.stappen { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 1.4rem; counter-reset: s; }
.stappen li { counter-increment: s; padding-left: 2.6rem; position: relative; max-width: var(--regel); }
.stappen li::before {
  content: counter(s);
  position: absolute; left: 0; top: .05rem;
  font-family: var(--kop); font-weight: 700; font-size: 1.1rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--natte-steen); color: var(--krijt);
}
.stappen h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.stappen p { margin: 0; }
.bestellen .knop--stil { color: var(--natte-steen); border-color: var(--natte-steen); }
.bestellen .knop--stil:hover { background: var(--natte-steen); color: var(--krijt); }

/* ---------- geschiedenis ---------- */

.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 46rem; }
.tijdlijn li {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: .8rem 0;
  border-top: 1px solid var(--lijn);
}
.tijdlijn .jaar {
  font-family: var(--kop); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; color: var(--noordzee);
}
.tijdlijn .nu-jaar .jaar { color: var(--dagprijs); }
.tijdlijn .nu-jaar { border-top-color: var(--dagprijs); }

/* ---------- vacature ---------- */

.vacature { background: var(--noordzee); color: var(--krijt); border-top: 0; }
.vacature p { max-width: var(--regel); margin: 0; }
.vacature a { color: var(--krijt); }

/* ---------- voet ---------- */

footer { background: var(--natte-steen); color: var(--krijt); padding: 3rem 0 2rem; }
footer h3 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--zilver); margin-bottom: .8rem; }
footer a { color: var(--krijt); }
.voetgrid { display: grid; gap: 2.2rem; }
.voetfoto { border: 1px solid var(--lijn-donker); margin-top: 1rem; }
.tijden { border-collapse: collapse; width: 100%; max-width: 20rem; font-variant-numeric: tabular-nums; }
.tijden th, .tijden td { text-align: left; padding: .32rem 0; border-bottom: 1px solid var(--lijn-donker); font-weight: 400; }
.tijden td { text-align: right; }
.tijden tr.vandaag th, .tijden tr.vandaag td { color: var(--dagprijs); font-weight: 600; }
.klein { font-size: .86rem; color: var(--zilver); }
.voetregel { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--lijn-donker); }
.voetregel p { margin: 0; font-size: .9rem; color: var(--zilver); }

/* ---------- groter scherm ---------- */

@media (min-width: 46rem) {
  .kop-over { padding: 6rem 0 4.4rem; }
  .blok { padding: 4.4rem 0; }
  .week { grid-template-columns: repeat(5, 1fr); }
  .cat-kop { grid-template-columns: 20rem minmax(0, 1fr); gap: 2.2rem; }
  .voetgrid { grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; }
  .prijzen li { grid-template-columns: minmax(0, 1fr) 12rem; }
}

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

/* ===========================================================================
   Onderdelen voor de losse pagina's. Hun eigen site heeft twaalf pagina's, dus
   deze opzet ook. Een viswinkel met acht productcategorieen op een one-pager
   proppen kost de structuur die zij al hadden.
   =========================================================================== */

/* ---------- hoofdmenu ---------- */

.balk .binnen { align-items: center; gap: 0 1.4rem; }
.merk {
  font-family: var(--kop); font-weight: 700; font-size: 1.02rem;
  color: var(--krijt); text-decoration: none; white-space: nowrap; flex: none;
}
.merk span { color: var(--zilver); font-weight: 500; }
.balk-links { display: flex; gap: 0 1.2rem; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.balk-links::-webkit-scrollbar { display: none; }
.balk-bel {
  font-family: var(--kop); font-weight: 600; font-size: .9rem;
  color: var(--dagprijs); text-decoration: none; white-space: nowrap; flex: none;
}
.balk-bel:hover { text-decoration: underline; }
.balk a[aria-current="page"] { color: var(--krijt); border-bottom-color: var(--dagprijs); }

/* ---------- paginakop op de binnenpagina's ---------- */

.paginakop { background: var(--natte-steen); color: var(--krijt); padding: 3rem 0 2.6rem; }
.paginakop h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1; margin: .5rem 0 0; }
.paginakop .onderkop { font-size: 1.12rem; margin-top: .9rem; }
.kruimel { font-family: var(--kop); font-size: .82rem; letter-spacing: .06em; color: var(--zilver); margin: 0; }
.kruimel a { color: var(--zilver); }

/* ---------- categoriekaarten op de startpagina ---------- */

.kaarten { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.kaart {
  display: grid; gap: .1rem;
  border: 1px solid var(--lijn);
  background: var(--krijt);
  text-decoration: none;
  padding-bottom: 1rem;
  transition: border-color .15s;
}
.kaart:hover { border-color: var(--dagprijs); }
.kaart img { border-bottom: 1px solid var(--lijn); margin-bottom: .8rem; }
.kaart-naam { font-family: var(--kop); font-weight: 700; font-size: 1.1rem; padding: 0 1rem; }
.kaart-kop { font-size: .92rem; color: var(--zilver); padding: 0 1rem; }

/* ---------- galerij ---------- */

.galerij { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.galerij figure { margin: 0; }
.galerij img { border: 1px solid var(--lijn); }
.galerij figcaption { font-size: .88rem; color: var(--zilver); margin-top: .45rem; }

/* ---------- wisselend aanbod, op bestelling ---------- */

.wisselblok { background: var(--ijs); }
.aanvraag { margin-top: 1.8rem; border-top: 1px solid var(--lijn); padding-top: 1.1rem; }
.aanvraag h3 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zilver); margin-bottom: .5rem; }
.aanvraag ul { margin: 0; padding-left: 1.1rem; }
.aanbieding {
  background: var(--natte-steen); color: var(--krijt);
  padding: .8rem 1rem; font-family: var(--kop); font-weight: 600;
  border-left: 4px solid var(--dagprijs);
}

/* ---------- verder kijken ---------- */

.verder { background: var(--ijs); }
.verderrij { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin-bottom: 1.4rem; }
.verderrij a {
  font-family: var(--kop); font-weight: 500; font-size: .94rem;
  border: 1px solid var(--lijn); background: var(--krijt);
  padding: .45rem .8rem; text-decoration: none;
}
.verderrij a:hover { border-color: var(--dagprijs); color: var(--dagprijs); }

/* ---------- tekst en bestellen ---------- */

.tekstkolom { max-width: 42rem; }
.tekstkolom p { margin: 0 0 1rem; }
.bestelblok { background: var(--ijs); }
.knop--donker { color: var(--krijt); border-color: #F4F2EC59; }
.knop--donker:hover { background: var(--krijt); color: var(--natte-steen); }
.tweede { margin-top: 2.4rem; }

.bestelraster { display: grid; gap: 2.4rem; }

.formulier { max-width: 30rem; }
.formulier p { margin: 0 0 1rem; }
.formulier label {
  display: block; font-family: var(--kop); font-weight: 600;
  font-size: .88rem; margin-bottom: .3rem;
}
.formulier input, .formulier textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .6rem .7rem;
  border: 1px solid var(--lijn); background: #fff; color: var(--natte-steen);
  border-radius: 0;
}
.formulier input:focus, .formulier textarea:focus { border-color: var(--noordzee); }
.formulier textarea { resize: vertical; }
.formulier button { cursor: pointer; font: inherit; font-family: var(--kop); font-weight: 600; }
.formvoet { margin-top: 1.2rem; }

.feiten { margin: 0; display: grid; gap: .9rem; }
.feiten > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.feiten dt {
  font-family: var(--kop); font-weight: 600; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--zilver);
}
.feiten dd { margin: 0; }
.tijden--licht th, .tijden--licht td { border-bottom-color: var(--lijn); }

@media (min-width: 46rem) {
  .feiten > div { grid-template-columns: 7rem minmax(0, 1fr); gap: 0 1.2rem; align-items: baseline; }
  .bestelraster { grid-template-columns: 1.1fr 1fr; gap: 3.4rem; }
  .paginakop { padding: 4.2rem 0 3.4rem; }
}

/* ---------- tweede balk: het assortiment ---------- */

.balk2 { background: var(--natte-steen); border-bottom: 1px solid var(--lijn-donker); }
.balk2 .binnen {
  display: flex; align-items: center; gap: 0 1.1rem;
  overflow-x: auto; scrollbar-width: none; padding-block: .6rem;
}
.balk2 .binnen::-webkit-scrollbar { display: none; }
.balk2-label {
  font-family: var(--kop); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zilver);
  white-space: nowrap; flex: none; padding-right: .4rem;
  border-right: 1px solid var(--lijn-donker);
}
.balk2 a {
  font-family: var(--kop); font-weight: 500; font-size: .86rem;
  color: var(--ijs); text-decoration: none; white-space: nowrap;
  padding: .15rem 0; border-bottom: 2px solid transparent;
}
.balk2 a:hover { color: var(--krijt); border-bottom-color: var(--dagprijs); }
.balk2 a[aria-current="page"] { color: var(--dagprijs); border-bottom-color: var(--dagprijs); }

/* De eerste balk plakt bovenaan, de tweede scrollt gewoon mee. Twee plakkende
   balken eten op een telefoon het halve scherm op. */
.balk2 { position: static; }