/* ---------------------------------------------------------------------------
   publiek.css: het kleine beetje opmaak dat alleen de publieke pagina's nodig
   hebben en dat niet in het gedeelde stylesheet thuishoort.

   Geladen NA assets/css/feest.css, per pagina, vlak onder de header-include.
   Alles wat hier staat is een aanvulling op de onderdelen uit de opzet
   Feestslinger; er wordt niets overgeschreven wat daar al goed staat.

   Waarom dit bestand bestaat: feest.css zet binnen .wrap de marges van h1, h2,
   h3 en p op nul, omdat elk onderdeel van het ontwerp zijn eigen ruimte
   bepaalt. Pagina's met lopende tekst (recept, privacy, voorwaarden) hebben
   die marges juist wel nodig. Dat staat hieronder onder .leesbaar.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   De kopband van een binnenpagina
   De h1 uit de opzet is gemaakt voor de vier woorden van de homepage. Op een
   binnenpagina met een lange titel is diezelfde maat te groot; hier geldt de
   maat van de ouderpagina uit de opzet.
   =========================================================================== */

.kop-band h1{font-size:clamp(2rem,4.6vw,3.2rem)}
.kop-band .label{margin-bottom:16px}
.kop-band .kop-lead{max-width:38rem;margin-top:18px;font-size:1.12rem}
.kop-band .breadcrumb{margin-bottom:18px}

/* Een kopband en de band eronder hebben samen twee keer de volle bandhoogte
   aan lucht, en dat is een gat. De band die direct op een kopband volgt begint
   daarom krapper. */
.kop-band + .band{padding-top:clamp(32px,4vw,48px)}

/* ===========================================================================
   Lopende tekst
   Maximaal 65 tekens per regel: langer leest zwaar op een scherm.
   =========================================================================== */

.leesbaar{max-width:65ch;font-size:1.05rem;line-height:1.7}
.leesbaar h2{font-size:1.5rem;margin:2.2rem 0 .8rem}
.leesbaar h3{font-size:1.2rem;margin:1.6rem 0 .5rem}
.leesbaar h4,.leesbaar h5,.leesbaar h6{font-size:1.05rem;margin:1.4rem 0 .4rem}
.leesbaar p{margin:0 0 1rem}
.leesbaar ul,.leesbaar ol{margin:0 0 1.2rem;padding-left:1.4rem}
.leesbaar li{margin-bottom:.45rem}
.leesbaar address{font-style:normal;margin:0 0 1rem}
.leesbaar .table{margin-bottom:1.5rem}
.leesbaar > :first-child{margin-top:0}
.leesbaar > :last-child{margin-bottom:0}

/* De juridische pagina's delen hun tekst op in <section>-blokken. Die bepalen
   de ruimte tussen de artikelen; de kop binnenin hoeft er dan niets bovenop te
   doen. */
.leesbaar section{margin-bottom:2.4rem}
.leesbaar section > h2:first-child{margin-top:0}
.leesbaar section:last-child{margin-bottom:0}

/* Een rij knoppen onder een stuk tekst. */
.knoprij{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}

/* ===========================================================================
   Homepage
   =========================================================================== */

/* In de opzet staat de kop iets onder het pilletje. */
.hero h1{margin-top:18px}

/* style.css zet nog een vaste donkere tekstkleur op alle koppen, en feest.css
   haalt die niet weg. Op de zeegroene slotband hoort de kop wit te zijn, zoals
   in de opzet. Deze regel hoort eigenlijk in feest.css thuis. */
.slot h2{color:inherit}

/* De donatiebanner brengt zijn eigen opmaak mee en heeft alleen ruimte nodig,
   niet de volle bandhoogte. */
.band-donatie{padding-block:clamp(22px,3vw,34px)}

/* ===========================================================================
   Blokken naast elkaar: /over en de functies op /help
   =========================================================================== */

.blokken{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.blokken-drie{grid-template-columns:repeat(3,1fr)}
.blokken .breed{grid-column:1/-1}
.blokken .sectie-body{font-size:1rem;line-height:1.6}
.blokken .sectie-body p{margin:0 0 1rem}
.blokken .sectie-body > :last-child{margin-bottom:0}
.blokken .sectie-body ul,.blokken .sectie-body ol{margin:0;padding-left:1.3rem}
.blokken .sectie-body li{margin-bottom:.5rem}
.blokken .sectie-body li:last-child{margin-bottom:0}

/* Een functiekaart is de kaart uit de opzet met wat lucht eromheen; hij heeft
   geen gekleurde kop nodig, want hij staat in een rij van zes. */
.functie{padding:24px 24px 22px}
.functie h3{margin-bottom:8px}
.functie p{color:var(--ink-2)}

/* ===========================================================================
   Receptenoverzicht
   =========================================================================== */

.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}

/* In een receptkaart op het overzicht is de titel een h2, want de kop van de
   pagina is al de h1. Hij krijgt de maat van de h3 uit de opzet, zodat de kaart
   er hetzelfde uitziet als die op de homepage. */
.recept-body h2{font-size:1.25rem;font-weight:700}

/* De oproep onderaan een receptpagina: een kaart met een gele kop, zoals de
   sectiekaarten van de ouderpagina. */
.oproep{margin-top:44px}
.oproep .sectie-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.oproep .sectie-body p{max-width:52ch;line-height:1.6}

.leeg{padding:28px 26px;max-width:52ch}
.leeg h2{font-size:1.4rem;margin-bottom:.6rem}
.leeg p{margin-bottom:.8rem}
.leeg > :last-child{margin-bottom:0}

/* ===========================================================================
   Eén recept
   =========================================================================== */

/* Zes feitjes onder elkaar maakt een lange kolom; vanaf 760px passen er twee
   paren naast elkaar. */
.recept-feitjes{margin:26px 0 0;max-width:46rem}
@media (min-width:760px){
  .recept-feitjes{grid-template-columns:auto 1fr auto 1fr;gap:10px 18px}
}

.recept-lees{max-width:65ch}
.recept-beeld{margin:0 0 32px;overflow:hidden}
.recept-beeld img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.recept-delen{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:32px;font-size:.95rem;font-weight:600}
.recept-delen a{font-weight:700}

/* ===========================================================================
   Helppagina
   De accordeon blijft die van Bootstrap, want het open- en dichtklappen werkt.
   Alleen het uiterlijk wordt dat van de kaarten uit het ontwerp.
   =========================================================================== */

.help-snel{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.faq-groep{margin-bottom:40px}
.faq-groep h3{font-size:1.5rem;margin-bottom:16px}
.faq-groep h3::after{content:"";display:block;width:52px;height:6px;border-radius:4px;background:var(--koraal);margin-top:9px}
.faq-lijst .accordion-item{background:var(--wit);border:2px solid var(--ink);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-lijst .accordion-button{font:800 1.02rem var(--fd);color:var(--ink);background:var(--wit);padding:15px 18px;box-shadow:none;border-radius:0}
.faq-lijst .accordion-button:not(.collapsed){background:var(--geel);color:var(--ink);border-bottom:2px solid var(--ink)}
.faq-lijst .accordion-button:focus{box-shadow:none}
.faq-lijst .accordion-button::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2314213D'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
.faq-lijst .accordion-body{padding:16px 18px;color:var(--ink-2);line-height:1.65;background:var(--wit)}
.faq-lijst .accordion-body a{font-weight:700}

/* ===========================================================================
   Contact, 404 en bedankt
   =========================================================================== */

.smal{max-width:640px}
/* Een tweede kaart onder een formulier of een stuk tekst. */
.blok-onder{margin-top:36px}
.formulier{padding:24px 26px 26px;display:flex;flex-direction:column;gap:18px}
.formulier .knop{align-self:flex-start}

.fout-code{font:900 clamp(4rem,12vw,7rem)/1 var(--fd);color:var(--koraal);margin:0}

.dank{max-width:560px;padding:30px 30px 28px}
.dank h2{font-size:1.4rem;margin-bottom:16px}
.dank .voortgang{margin-block:22px 10px}
.dank-delen{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

@media (max-width:860px){
  .blokken,.blokken-drie{grid-template-columns:1fr}
}