/*
 * Ruijs Reset, foodblog: de pagina Recepten (slug recepten) en de pagina van één recept
 * (single.php met template-parts/recepten/recept.php; inc/enqueue.php laadt dit bestand
 * daar ook).
 *
 * Referenties (ux-onderzoek/foodblog-steal-sheet.md): het filter als rij tekstlinks tussen
 * twee lijnen met een cursief label ervoor (cookieandkate.com), de receptkaart met een
 * metaregel tussen lijnen, ingrediënten met een vak en een doorhaling, en een print met
 * alleen het recept (loveandlemons.com). Kleur, letter, radius en ruimte uit base.css; de
 * stappen lopen langs de route uit het logo (.rr-route in base.css).
 *
 * Een download gebruikt dit bestand niet: die heeft page-downloads.css en kaarten.php.
 *
 * Inhoud
 *   1. Rustige regel (soort en tijd)
 *   2. Overzicht: filter, uitgelicht recept, kaarten, bladeren
 *   3. Receptpagina: kop, ingrediënten, bereiding, meer recepten
 *   4. Print
 */

/* ---------- 1. Rustige regel ---------- */
.rr-receptmeta{display:flex;flex-wrap:wrap;align-items:center;font:600 14px/1.3 var(--rr-sans);letter-spacing:.01em;color:var(--rr-groen)}
.rr-receptmeta span+span::before{content:"";display:inline-block;width:1px;height:12px;margin:0 10px;vertical-align:-1px;background:var(--rr-lijn)}
.rr-receptmeta__concept{color:var(--rr-inkt);font-style:italic;font-weight:500}

/* ---------- 2. Overzicht ---------- */

/* filter: een rij tekstlinks tussen twee lijnen, de actieve met een groene streep op de onderlijn */
.rr-soorten{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rr-lijn);border-bottom:1px solid var(--rr-lijn);margin-bottom:clamp(28px,min(4vw,5vh),48px)}
.rr-soorten__label{padding-top:14px;font:300 italic 20px/1.2 var(--rr-serif);letter-spacing:-.01em}
.rr-soorten__lijst{display:flex;gap:0 24px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rr-soorten__lijst::-webkit-scrollbar{display:none}
.rr-soorten__lijst li{display:flex;flex:none}
.rr-soorten__link{position:relative;display:inline-flex;align-items:center;min-height:52px;font:600 16px/1.2 var(--rr-sans);color:rgba(14,42,27,.72);text-decoration:none;transition:color .15s linear}
.rr-soorten__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--rr-groen);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--rr-ease-koers),background-color .2s}
.rr-soorten__link[aria-current]{color:var(--rr-inkt)}
.rr-soorten__link[aria-current]::after{transform:none}
@media (min-width:640px){
  .rr-soorten{display:flex;align-items:stretch;gap:0 28px}
  .rr-soorten__label{display:flex;align-items:center;padding:0 28px 0 0;border-right:1px solid var(--rr-lijn);font-size:22px}
  .rr-soorten__lijst{flex-wrap:wrap;gap:0 28px;overflow:visible}
  .rr-soorten__link{min-height:60px}
}
@media (hover:hover) and (pointer:fine){
  .rr-soorten__link:hover{color:var(--rr-inkt)}
  .rr-soorten__link:not([aria-current]):hover::after{transform:none;background:var(--rr-muur)}
}

.rr-recepten__geen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-bottom:24px}

/* uitgelicht: het nieuwste recept groot, foto links, tekst rechts */
.rr-uitgelicht{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.rr-uitgelicht__beeld{aspect-ratio:3/2;max-height:62vh;max-height:62svh;border-radius:var(--rr-r-l);overflow:hidden;background:var(--rr-salie)}
.rr-uitgelicht__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--rr-ease-koers)}
.rr-uitgelicht__titel{margin:14px 0 18px;font:300 clamp(38px,4vw,60px)/.98 var(--rr-serif);letter-spacing:-.035em}
.rr-uitgelicht__link{text-decoration:none}
.rr-uitgelicht__link::after{content:"";position:absolute;inset:0;border-radius:var(--rr-r-l)}
.rr-uitgelicht__intro{max-width:30em;margin-bottom:16px}
.rr-uitgelicht__meer{color:var(--rr-groen)}
.rr-uitgelicht:focus-within{outline:2px solid var(--rr-groen);outline-offset:6px;border-radius:var(--rr-r-l)}
.rr-uitgelicht:focus-within :focus-visible{outline:none}
@media (min-width:900px){
  .rr-uitgelicht{grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,80px)}
}
@media (hover:hover) and (pointer:fine){
  .rr-uitgelicht:hover .rr-uitgelicht__beeld img{transform:scale(1.03)}
  .rr-uitgelicht:hover .rr-tekstlink__label{text-decoration-color:var(--rr-groen)}
  .rr-uitgelicht:hover .rr-tekstlink__pijl{transform:translateX(4px)}
}

/* de andere recepten: open kaarten, foto, rustige regel en titel in de schreef */
.rr-receptkaarten{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 24px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.rr-receptkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rr-receptkaarten{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.rr-receptkaarten--drie{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rr-receptkaart{position:relative;display:flex;flex-direction:column;gap:10px;height:100%}
.rr-receptkaart__beeld{aspect-ratio:3/2;margin-bottom:6px;border-radius:var(--rr-r-m);overflow:hidden;background:var(--rr-salie)}
.rr-receptkaart__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--rr-ease-koers)}
.rr-receptkaart__beeld--illustratie img{object-fit:contain;padding:12%;filter:drop-shadow(0 10px 12px rgba(14,42,27,.14))}
.rr-receptkaart__titel{font:400 clamp(22px,1.9vw,28px)/1.1 var(--rr-serif);letter-spacing:-.025em}
.rr-receptkaart__link{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .15s linear}
.rr-receptkaart__link::after{content:"";position:absolute;inset:0;border-radius:var(--rr-r-m)}
.rr-receptkaart:focus-within{outline:2px solid var(--rr-groen);outline-offset:6px;border-radius:var(--rr-r-m)}
.rr-receptkaart:focus-within :focus-visible{outline:none}
@media (hover:hover) and (pointer:fine){
  .rr-receptkaart:hover .rr-receptkaart__beeld img{transform:scale(1.04)}
  .rr-receptkaart:hover .rr-receptkaart__link{text-decoration-color:var(--rr-groen)}
}

.rr-bladeren{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:clamp(32px,4vw,56px);padding-top:16px;border-top:1px solid var(--rr-lijn)}
.rr-bladeren__ouder{margin-left:auto}

/* ---------- 3. Receptpagina ---------- */

/* kop: de hero uit base.css, met de metaregel en de printknop in de tekstkolom */
.rr-recept__intro>*+*{margin-top:12px}
.rr-recept__meta{display:flex;flex-wrap:wrap;margin:28px 0 0;border-top:1px solid var(--rr-lijn);border-bottom:1px solid var(--rr-lijn)}
.rr-recept__meta>div{padding:12px 20px 12px 0;margin-right:20px;border-right:1px solid var(--rr-lijn)}
.rr-recept__meta>div:last-child{margin-right:0;border-right:0}
.rr-recept__meta dt{font:600 13px/1.3 var(--rr-sans);letter-spacing:.02em;color:var(--rr-groen)}
.rr-recept__meta dd{margin:2px 0 0;font:400 22px/1.2 var(--rr-serif);letter-spacing:-.015em}
.rr-recept__print{margin-top:24px;min-height:48px;padding:12px 22px}
.rr-recept__print[hidden]{display:none}
.rr-recept__print-icoon{flex:none}
@media (min-width:760px){
  .rr-recept__meta dd{font-size:26px}
  .rr-recept .rr-hero__tekst{margin-top:28px}
}

/* ingrediënten links (plakt mee), bereiding rechts langs de route */
.rr-recept__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
.rr-recept__kop2{margin-bottom:12px;font:300 clamp(34px,3.2vw,48px)/1 var(--rr-serif);letter-spacing:-.03em}
.rr-recept__uitleg{margin-bottom:16px;font-size:16px;line-height:1.45;opacity:.8}
.rr-recept__bron{display:none}
/* brug naar de coaching onder het recept, over de hele breedte */
.rr-recept__coaching{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:0;padding-top:24px;border-top:1px solid color-mix(in srgb,currentColor 15%,transparent);font-size:17px;line-height:1.5}
@media (min-width:900px){
  .rr-recept__raster{grid-template-columns:4fr 7fr;gap:clamp(40px,6vw,96px)}
}
@media (min-width:900px) and (min-height:700px){
  .rr-recept__ingredienten{position:sticky;top:112px}
}

/* aanvinken: een gewone checkbox met label, de hele regel is klikbaar, zonder JavaScript */
.rr-vinklijst{margin:0;padding:0;list-style:none;border-top:1px solid var(--rr-lijn)}
.rr-vinklijst li{position:relative;border-bottom:1px solid var(--rr-lijn)}
.rr-vinklijst__vak{-webkit-appearance:none;appearance:none;position:absolute;left:2px;top:15px;display:grid;place-items:center;width:22px;height:22px;margin:0;border:1.5px solid var(--rr-inkt);border-radius:6px;background:var(--rr-pagina);cursor:pointer;transition:background-color .2s var(--rr-ease-uit),border-color .2s var(--rr-ease-uit)}
.rr-vinklijst__vak::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid var(--rr-pagina);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--rr-ease-koers)}
.rr-vinklijst__vak:checked{background:var(--rr-groen);border-color:var(--rr-groen)}
.rr-vinklijst__vak:checked::after{transform:rotate(45deg) scale(1)}
.rr-vinklijst__vak:focus-visible{outline:2px solid var(--rr-groen);outline-offset:3px}
.rr-vinklijst__regel{display:block;min-height:52px;padding:14px 4px 14px 40px;font-size:17px;line-height:1.45;cursor:pointer;transition:color .2s linear}
.rr-vinklijst__hoeveelheid{margin-right:.35em;font-weight:600}
.rr-vinklijst__vak:checked+.rr-vinklijst__regel{color:rgba(14,42,27,.55)}
.rr-vinklijst__vak:checked+.rr-vinklijst__regel span{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--rr-groen)}
@media (hover:hover) and (pointer:fine){
  .rr-vinklijst__vak:not(:checked):hover,.rr-vinklijst__regel:hover~.rr-vinklijst__vak,.rr-vinklijst li:hover .rr-vinklijst__vak:not(:checked){border-color:var(--rr-groen);background:var(--rr-grond)}
}

/* stappen: de route van base.css, met gewone tekst in plaats van de korte stapkop */
.rr-recept__route .rr-route__stappen{padding-top:72px}
.rr-recept__stap{font:400 var(--rr-tekst)/1.55 var(--rr-sans);letter-spacing:0}
@media (min-width:760px){
  .rr-recept__route .rr-route__stappen li{padding:28px 0}
  .rr-recept__route .rr-route__stappen li::before{top:46px}
}

/* meer recepten */
.rr-recept__meer-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(28px,min(4vw,5vh),48px)}

/* ---------- 4. Print: alleen het recept ---------- */
@media print{
  @page{margin:14mm 16mm}
  html{margin-top:0!important}
  body:has(.rr-recept){background:#fff;color:#000;font-size:11pt}
  body:has(.rr-recept) :is(.rr-kop,.rr-voet,.rr-belbalk,.rr-mobielmenu,.rr-waas,.rr-skiplink,.rr-afsluiter,#wpadminbar,.nx-ed-bar,.nx-ed-overlay,.nx-ed-popover){display:none!important}
  body:has(.rr-recept) .rr-main{padding-top:0!important}
  .rr-recept :is(.rr-recept__meer,.rr-recept__print,.rr-recept__uitleg,.rr-recept__coaching,.rr-route__lijn){display:none!important}
  .rr-recept .rr-onthul{opacity:1!important;transform:none!important}
  .rr-recept .rr-wrap{max-width:none;padding:0}

  .rr-recept .rr-hero{padding:0}
  .rr-recept .rr-hero__vlak{padding:0;background:none;border-radius:0}
  .rr-recept .rr-hero__raster{display:grid;grid-template-columns:minmax(0,1fr) 42mm;column-gap:8mm;align-items:start}
  .rr-recept .rr-hero__titel{grid-column:1;grid-row:1;align-self:start;padding:0;font-size:26pt;line-height:1.05;color:#000}
  .rr-recept .rr-hero__tekst{grid-column:1;grid-row:2;margin-top:4mm;max-width:none}
  .rr-recept .rr-hero__tekst p{margin-bottom:2mm;font-size:11pt;line-height:1.45}
  .rr-recept.rr-recept .rr-hero--zonder-beeld .rr-hero__raster{grid-template-columns:minmax(0,1fr)}
  .rr-recept .rr-hero__foto{grid-column:2;grid-row:1/3;margin:0}
  .rr-recept .rr-hero__foto img{width:42mm;height:42mm;max-height:none;aspect-ratio:1;border-radius:3mm}
  .rr-recept .rr-recept__meta{margin-top:4mm;border-color:#999}
  .rr-recept .rr-recept__meta>div{padding:2mm 6mm 2mm 0;margin-right:6mm;border-color:#999}
  .rr-recept .rr-recept__meta dt{color:#000}
  .rr-recept .rr-recept__meta dd{font-size:13pt}

  .rr-recept .rr-recept__inhoud{padding:8mm 0 0}
  .rr-recept .rr-recept__raster{display:grid;grid-template-columns:2fr 3fr;gap:8mm}
  .rr-recept .rr-recept__ingredienten{position:static}
  .rr-recept .rr-recept__kop2{margin-bottom:3mm;font-size:16pt}
  .rr-recept .rr-vinklijst,.rr-recept .rr-vinklijst li{border-color:#ccc}
  .rr-recept .rr-vinklijst li{break-inside:avoid}
  .rr-recept .rr-vinklijst__regel{min-height:0;padding:2mm 0 2mm 7mm;font-size:11pt;color:#000}
  .rr-recept .rr-vinklijst__vak{top:2.6mm;width:3.6mm;height:3.6mm;border:1px solid #000;border-radius:1mm;background:#fff}
  .rr-recept .rr-vinklijst__vak::after{display:none}
  .rr-recept .rr-vinklijst__regel span{text-decoration:none!important}

  .rr-recept .rr-route{padding-left:0}
  .rr-recept .rr-route__stappen{padding-top:0}
  .rr-recept .rr-route__stappen li{grid-template-columns:10mm minmax(0,1fr);gap:2mm;padding:2.5mm 0;border-color:#ccc;break-inside:avoid}
  .rr-recept .rr-route__stappen li::before{display:none}
  .rr-recept .rr-route__nr{font-size:15pt;color:#000}
  .rr-recept .rr-recept__stap{font-size:11pt;line-height:1.45}

  .rr-recept .rr-recept__bron{display:block;grid-column:1/-1;margin-top:6mm;padding-top:3mm;border-top:1px solid #999;font-size:9pt;color:#333}
}