/*
Theme Name: Alimentar
Theme URI: https://alimentarfood.nl
Author: Come e Cala-te BV
Description: Blokthema voor Alimentar in Kapelle: buurtwinkel met Portugal als rode draad en pakketpunt. Zwart-wit met azulejoblauw als accent.
Version: 3.3.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: alimentar
*/

:root{--af-tegel:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22%23fbf8f1%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232c5ca8%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M0%2010A10%2010%200%200%200%2010%200M30%200a10%2010%200%200%200%2010%2010M40%2030a10%2010%200%200%200-10%2010M10%2040A10%2010%200%200%200%200%2030%22/%3E%3Cpath%20d%3D%22M20%209c3%204%203%207%200%2011c-3-4-3-7%200-11zM31%2020c-4%203-7%203-11%200c4-3%207-3%2011%200zM20%2031c-3-4-3-7%200-11c3%204%203%207%200%2011zM9%2020c4-3%207-3%2011%200c-4%203-7%203-11%200z%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%222.2%22%20fill%3D%22%232c5ca8%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%223%22%20fill%3D%22%232c5ca8%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%220%22%20r%3D%223%22%20fill%3D%22%232c5ca8%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2240%22%20r%3D%223%22%20fill%3D%22%232c5ca8%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%223%22%20fill%3D%22%232c5ca8%22/%3E%3C/svg%3E");--af-ruis:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.35%20%200%200%200%200%200.3%20%200%200%200%200%200.22%20%200%200%200%20.07%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E")}

/* Zwarte balk */
.af-topbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 2.2rem}
.af-topbar li{display:flex;align-items:center;gap:.55em}
.af-topbar li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--blauw-licht);flex:none}
@media (max-width:781px){.af-topbar li:nth-child(n+3){display:none}}

/* Header en logo */
.af-header{position:relative}
.af-logo{margin:0;line-height:0}
.af-logo img{height:64px;width:auto;display:block}
@media (max-width:600px){.af-logo img{height:48px}}
.af-tegelband{height:14px;background:var(--af-tegel) repeat-x left center/14px 14px;border-block:1px solid var(--wp--preset--color--blauw)}

/* Kaarten */
.af-card{background:var(--wp--preset--color--wit);border:1.5px solid var(--wp--preset--color--zwart);border-radius:18px;padding:clamp(1.25rem,3vw,2rem);height:100%;color:var(--wp--preset--color--tekst)}
.af-card > *:first-child{margin-top:0}
.af-card p:last-child,.af-card ul:last-child,.af-card figure:last-child{margin-bottom:0}
.af-card h3{margin-top:.5rem}
.af-card ul{padding-left:1.15em}
.af-card li + li{margin-top:.35rem}
.af-card-blauw{border-color:var(--wp--preset--color--blauw);box-shadow:6px 6px 0 var(--wp--preset--color--blauw)}

.af-icon{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--wp--preset--color--zwart);color:var(--wp--preset--color--blauw);background:var(--wp--preset--color--blauw-licht)}
.af-icon svg{width:26px;height:26px}

/* Vervoerders (tekstlabels, geen logo's) */
.af-pills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0;padding:0;list-style:none}
.af-pills li{padding:.35em 1em;border-radius:999px;border:1.5px solid var(--wp--preset--color--zwart);background:var(--wp--preset--color--wit);font-weight:600;font-size:.95rem}

/* Nog in te vullen */
mark.af-todo{background:#fff1a8;color:#5a4a00;padding:0 .25em;border-radius:4px}

/* Openingstijden */
.wp-block-table.af-hours table{border:0;font-variant-numeric:tabular-nums}
.wp-block-table.af-hours td{border:0;border-bottom:1px dashed var(--wp--preset--color--lijn);padding:.45rem 0}
.wp-block-table.af-hours td:last-child{text-align:right;font-weight:600}
.wp-block-table.af-hours tr:last-child td{border-bottom:0}

/* Secties */
.af-section{padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)}
.af-center{text-align:center}
.af-bg-wit{background:var(--wp--preset--color--wit)}
.af-bg-blauw-licht{background:var(--wp--preset--color--blauw-licht)}
.af-hero{padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)}
.af-hero-cols{align-items:center}
.af-kicker{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--blauw);margin-bottom:.4rem}
.af-lead{font-size:1.2rem;line-height:1.6}
h1,h2,h3{text-wrap:balance}

/* Tio Zé */
.af-tio{align-items:center}
.af-tio .wp-block-image img{max-width:240px;margin-inline:auto;display:block}
.af-quote{font-family:var(--wp--preset--font-family--display);font-size:1.45rem;line-height:1.35;color:var(--wp--preset--color--blauw-donker);border-left:3px solid var(--wp--preset--color--blauw);padding-left:1rem;margin-left:0}

/* FAQ */
.wp-block-details{background:var(--wp--preset--color--wit);border:1.5px solid var(--wp--preset--color--zwart);border-radius:14px;padding:.9rem 1.2rem}
.wp-block-details + .wp-block-details{margin-top:.7rem}
.wp-block-details summary{font-weight:600;cursor:pointer}
.wp-block-details[open] summary{margin-bottom:.5rem}

/* Knoppen */
.wp-block-button.is-style-outline .wp-block-button__link{border:1.5px solid var(--wp--preset--color--zwart);color:var(--wp--preset--color--zwart);background:transparent}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--wp--preset--color--zwart);color:var(--wp--preset--color--wit)}

/* Footer */
.af-footer a{color:var(--wp--preset--color--wit);text-decoration:none}
.af-footer a:hover{text-decoration:underline}
.af-footer h3{color:var(--wp--preset--color--wit);font-size:1.2rem}
.af-online{color:#cfcac0;font-size:.95rem}

:focus-visible{outline:3px solid var(--wp--preset--color--blauw);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* ===== Versie 3: look-and-feel volgens de mockups van Linda ===== */
body{background-image:var(--af-ruis)}
.af-header{background:var(--wp--preset--color--wit)}
.af-logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.af-logo img.af-schild{height:62px;width:auto}
.af-logo .af-woord{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.af-logo .af-woord img{height:34px;width:auto}
.af-logo .af-woord span{font-family:var(--wp--preset--font-family--display);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wp--preset--color--zwart);padding-left:.15rem}
@media (max-width:600px){.af-logo img.af-schild{height:46px}.af-logo .af-woord img{height:24px}.af-logo .af-woord span{font-size:.62rem}}
.af-header .wp-block-navigation a{font-size:.98rem}
.af-header .wp-block-navigation .current-menu-item a,.af-header .wp-block-navigation a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* Handschrift-notities */
.af-hand{font-family:var(--wp--preset--font-family--hand);font-weight:600;color:var(--wp--preset--color--tegel);font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.05;transform:rotate(-4deg);margin:0}
.af-hand .hart{display:inline-block;transform:rotate(8deg)}

/* Krijtbord */
.af-bord{background:var(--wp--preset--color--bord);background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.07),transparent 60%),var(--af-ruis);border:10px solid #3b2f25;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.25);color:#f4f1ea;font-family:var(--wp--preset--font-family--hand);font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.05;text-align:center;padding:1rem 1.4rem;font-size:clamp(1.5rem,3vw,2.2rem);display:inline-block}

/* Foto-plaatshouders */
.af-foto{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:6px;overflow:hidden;background:var(--wp--preset--color--blauw-licht);background-image:linear-gradient(rgba(230,236,245,.86),rgba(230,236,245,.86)),var(--af-tegel);background-size:auto,56px 56px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;box-shadow:0 4px 16px rgba(23,23,23,.12)}
.af-foto span{font-family:var(--wp--preset--font-family--hand);font-size:1.5rem;color:var(--wp--preset--color--blauw);line-height:1.1;max-width:16ch}
.af-foto.hoog{aspect-ratio:4/5}
.af-foto.breed{aspect-ratio:16/10}

/* Hero */
.af-hero3{position:relative;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--60);overflow:hidden}
.af-hero3::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;background:var(--af-tegel) repeat-y center top/34px 34px;border-right:1px solid var(--wp--preset--color--tegel)}
@media (max-width:1100px){.af-hero3::before{display:none}}
.af-hero3 .wp-block-columns{align-items:center}
@media (min-width:782px){.af-hero3 .wp-block-column:first-child{flex-basis:44%!important}.af-hero3 .wp-block-column:last-child{flex-basis:56%!important}}
.af-hero-beeld{position:relative}
.af-hero-beeld .af-bord{position:absolute;left:-1.2rem;bottom:-1.4rem;transform:rotate(-2deg)}
.af-hero-beeld .af-hand{position:absolute;right:.5rem;top:-1.8rem;text-align:right;background:rgba(246,241,231,.92);padding:.3rem .6rem;border-radius:6px}
@media (max-width:781px){.af-hero-beeld .af-bord{left:.5rem;bottom:-1rem;font-size:1.3rem}.af-hero-beeld .af-hand{position:static;transform:rotate(-3deg);margin-top:1.6rem;background:none;text-align:left}}

/* Iconenrij */
.af-iconrij{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem;text-align:center;list-style:none;margin:0;padding:0}
.af-iconrij li{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.af-iconrij svg{width:46px;height:46px;color:var(--wp--preset--color--blauw)}
.af-iconrij strong{font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:1.12rem;color:var(--wp--preset--color--zwart);line-height:1.2}
.af-iconrij small{font-size:.85rem;color:var(--wp--preset--color--muted);line-height:1.35}
@media (max-width:900px){.af-iconrij{grid-template-columns:repeat(2,minmax(0,1fr))}.af-iconrij li:last-child{grid-column:1/-1}}
.af-rij-band{background:var(--wp--preset--color--wit);border-block:1px solid var(--wp--preset--color--lijn);padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)}

/* Marineblauwe band */
.af-band{padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)}
.af-band .wp-block-columns{align-items:stretch;gap:0!important;background:var(--wp--preset--color--blauw);border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(21,42,74,.18)}
.af-band .wp-block-column{min-width:0}
.af-band .af-foto{border-radius:0;height:100%;aspect-ratio:auto;min-height:260px;box-shadow:none}
.af-band-tekst{color:#fff;padding:clamp(1.5rem,4vw,2.75rem)!important}
.af-band-tekst h2{color:#fff}
.af-band-tekst a.wp-block-button__link{background:var(--wp--preset--color--wit);color:var(--wp--preset--color--blauw)}
.af-band-tekst a.wp-block-button__link:hover{background:var(--wp--preset--color--blauw-licht)}
.af-vandaag{background:var(--wp--preset--color--wit);padding:clamp(1.25rem,3vw,1.75rem)!important;color:var(--wp--preset--color--tekst)}
.af-vandaag h3{margin-top:0}
.af-vandaag .af-foto{min-height:0;aspect-ratio:4/3;height:auto;border-radius:6px}
.af-vandaag ul{list-style:none;padding:0;margin:.8rem 0 0}
.af-vandaag li{border-bottom:1px solid var(--wp--preset--color--lijn);padding:.4rem 0}
@media (min-width:782px){.af-band .wp-block-column:nth-child(1){flex-basis:36%!important}.af-band .wp-block-column:nth-child(2){flex-basis:36%!important}.af-band .wp-block-column:nth-child(3){flex-basis:28%!important}}

/* Assortiment */
.af-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1.25rem;list-style:none;padding:0;margin:0}
.af-cats li{display:flex;flex-direction:column;gap:.35rem}
.af-cats .af-foto{aspect-ratio:4/3}
.af-cats strong{font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:1.2rem;color:var(--wp--preset--color--zwart);margin-top:.4rem}
.af-cats small{color:var(--wp--preset--color--muted);font-size:.9rem}
.af-kop-met-noot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}

/* Olijftak en kaartspeld */
.af-tak{width:150px;height:auto;color:#5b6b3a}
.af-pin{width:48px;height:auto;color:var(--wp--preset--color--blauw)}
.af-hart-kaart{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}

/* Knoppen met pijl */
.wp-block-button__link{border-radius:999px}
.af-logo{line-height:1}
.af-logo img.af-schild{height:72px}
.af-logo .af-woord img{height:38px}
.af-logo .af-woord span{line-height:1;display:block}
.af-rij-band > *,.af-band > *{max-width:1200px!important}
.af-band-tekst h2{font-size:clamp(1.5rem,2.4vw,2rem);hyphens:manual;overflow-wrap:normal}
@media (max-width:600px){.af-logo img.af-schild{height:52px}.af-logo .af-woord img{height:26px}}
.wp-block-table.af-hours td{white-space:nowrap}
.af-card h3,.af-card h2{hyphens:manual}
.wp-block-post-content > .af-cats{max-width:1200px!important}
.af-kop-met-noot{margin-bottom:var(--wp--preset--spacing--40)}
.af-foto.hoog{aspect-ratio:4/3}

.af-header .wp-block-navigation{gap:1.1rem}
@media (max-width:1180px) and (min-width:600px){.af-header .wp-block-navigation a{font-size:.9rem}}
/* Logo's van de vervoerders */
.af-logos{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:1.25rem 0 .5rem;padding:0;justify-content:flex-start}
.af-logos li{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.82rem;color:var(--wp--preset--color--muted)}
.af-logos span.vak{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:122px;height:62px;background:#fff;border:1px solid var(--wp--preset--color--lijn);border-radius:10px;padding:.5rem .8rem}
.af-logos img{max-width:100%;max-height:40px;width:auto;height:auto}
.af-logos .vinted span.vak{background:#007782;border-color:#007782}
/* Taalwissel */
.af-header .wp-block-navigation .af-taal a{border:1.5px solid var(--wp--preset--color--blauw);border-radius:999px;padding:.15rem .6rem;font-weight:600;color:var(--wp--preset--color--blauw)}