/*
Theme Name: La Fonderia Ricambi – Carrozzeria
Theme URI: https://lafonderiaricambi.com
Author: La Fonderia Ricambi
Author URI: https://lafonderiaricambi.com
Description: Klassiek, maar niet ouderwets: geïnspireerd op Italiaanse autobrochures uit de jaren 60. Crèmekleurig papier, espresso-donkere vlakken, brede grotesk-koppen met een cursieve schreef als accent, en de geanimeerde toerenteller.
Requires at least: 6.6
Tested up to: 7.2
Requires PHP: 7.4
Version: 2.5.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la-forgia-carrozzeria
Tags: full-site-editing, block-patterns, custom-colors, one-column, wide-blocks
*/

/* ==========================================================================
   Basis: gedeeld door alle La Fonderia-thema's. Kleuren en lettertypes komen
   uit theme.json; per thema staat de eigen stijl in het tweede deel.
   ========================================================================== */
:root{
	--lf-bg:var(--wp--preset--color--achtergrond);
	--lf-vlak:var(--wp--preset--color--oppervlak);
	--lf-inkt:var(--wp--preset--color--inkt);
	--lf-gedempt:var(--wp--preset--color--gedempt);
	--lf-lijn:var(--wp--preset--color--lijn);
	--lf-accent:var(--wp--preset--color--accent);
	--lf-accent-tekst:var(--wp--preset--color--accent-tekst);
	--lf-goud:var(--wp--preset--color--goud);
	--lf-band:var(--wp--preset--color--band);
	--lf-band-tekst:var(--wp--preset--color--band-tekst);
	--lf-band-gedempt:var(--wp--preset--color--band-gedempt);
	--lf-groen:var(--wp--preset--color--groen);
	--lf-rood:var(--wp--preset--color--rood);
	--lf-display:var(--wp--preset--font-family--display);
	--lf-body:var(--wp--preset--font-family--body);
	--lf-mono:var(--wp--preset--font-family--mono);
	--lf-hand:var(--wp--preset--font-family--handtekening);
	--lf-kop-hoogte:76px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p,li{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid var(--lf-goud);outline-offset:2px}
img{max-width:100%;height:auto}

/* Geen witruimte tussen kop, inhoud en voet */
.wp-site-blocks > *{margin-block-start:0}
.lf-home > *, .lf-vol > *{margin-block-start:0}

/* ---------- Kop ---------- */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:0;z-index:50}
body.admin-bar .wp-site-blocks > header.wp-block-template-part{top:32px}
@media (max-width:782px){body.admin-bar .wp-site-blocks > header.wp-block-template-part{top:0}}
.lf-top{background:var(--lf-bg);border-bottom:1px solid var(--lf-lijn);padding-block:10px}
.lf-top-binnen{min-height:calc(var(--lf-kop-hoogte) - 20px);gap:12px 28px}
.lf-logo{display:block;line-height:0}
.lf-logo img{height:32px;width:auto;display:block}
.lf-top-rechts{gap:12px 28px}
.lf-top .wp-block-navigation__container{gap:8px 24px}
.lf-top .wp-block-navigation a:hover{color:var(--lf-accent-tekst)}
.lf-top .wp-block-button__link{white-space:nowrap}
[id]{scroll-margin-top:calc(var(--lf-kop-hoogte) + 12px)}
@media (max-width:600px){.lf-top .wp-block-buttons{display:none}.lf-logo img{height:26px}}

/* ---------- Gedeelde onderdelen ---------- */
.lf-eyebrow{display:flex;align-items:center;gap:12px;margin:0;color:var(--lf-gedempt)}
.lf-eyebrow::before{content:"";flex:none;width:36px;height:4px;background:linear-gradient(90deg,var(--lf-groen) 0 33.3%,currentColor 33.3% 66.6%,var(--lf-rood) 66.6%)}
.lf-intro,.lf-lead{color:var(--lf-gedempt)}
.lf-lead{font-size:var(--wp--preset--font-size--large);max-width:34em}
.lf-kop{max-width:46em;margin-bottom:clamp(28px,4vw,48px)}
.lf-kop > * + *{margin-block-start:14px}
.lf-meta{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--lf-accent-tekst);margin:0}
.lf-klein{font-size:var(--wp--preset--font-size--small)}
.lf-label{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin:0 0 6px;opacity:0.75}
.lf-motto{font-family:var(--lf-hand);font-size:38px;line-height:1;letter-spacing:0;text-transform:none;margin:6px 0 0}
.lf-onderschrift{font-size:14px;color:var(--lf-gedempt);text-align:center;max-width:26em;margin-inline:auto}

/* ---------- Hero ---------- */
.lf-hero{padding-block:clamp(48px,7vw,96px)}
.lf-hero-kolommen{gap:clamp(32px,5vw,64px);align-items:center}
.lf-hero-titel em{font-style:inherit;display:block;color:var(--lf-accent-tekst)}
.lf-hero .lf-lead{margin-top:22px}
.lf-hero .wp-block-buttons{margin-top:30px}
.lf-hero-beeld{display:flex;flex-direction:column;align-items:center;gap:14px}

/* ---------- Secties ---------- */
.lf-sec{padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--lf-lijn)}
.lf-sec .wp-block-columns{gap:clamp(28px,4vw,56px)}
.lf-verhaal-tekst > p:not(.lf-eyebrow){font-size:18px;max-width:36em}
.lf-oprichters{display:flex;flex-direction:column;gap:16px}
.lf-oprichter{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start}
.lf-oprichter > *{margin:0}
.lf-mono{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin:0}
.lf-oprichter h3{margin:0}
.lf-rol{margin:6px 0 0;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--lf-accent-tekst)}
.lf-bio{margin:8px 0 0;font-size:15px;color:var(--lf-gedempt)}
.lf-diensten ul{margin:12px 0 0;padding-left:18px;color:var(--lf-gedempt);font-size:15.5px}
.lf-diensten li + li{margin-top:4px}

/* Band met revisieniveaus */
.lf-band{background:var(--lf-band);color:var(--lf-band-tekst);border-bottom:0}
.lf-band .lf-intro,.lf-band .lf-eyebrow{color:var(--lf-band-gedempt)}
.lf-band a{color:inherit}
.lf-band-top{margin-bottom:clamp(32px,5vw,56px)}
.lf-band-top .lf-kop{margin-bottom:0}
.lf-niveaus .wp-block-column{border-top:1px solid var(--lf-band-gedempt);padding-top:18px}
.lf-niveaus .wp-block-column > *{margin:0}
.lf-niveaus .wp-block-column > * + *{margin-top:10px}
.lf-niveaus p:not(.lf-n){font-size:15.5px;color:var(--lf-band-gedempt)}

/* Kaarten */
.lf-kaart{display:flex;flex-direction:column;height:100%}
.lf-ph{aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:18px;position:relative;overflow:hidden;margin:0}
.lf-ph::before{content:"";position:absolute;top:18px;right:18px;width:42px;height:4px;background:linear-gradient(90deg,var(--lf-groen) 0 33.3%,#fff 33.3% 66.6%,var(--lf-rood) 66.6%)}
.lf-ph > p{margin:0}
.lf-ph-label{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;opacity:0.7}
.lf-kaart-tekst{padding-top:16px}
.lf-kaart-tekst > *{margin:0}
.lf-kaart-tekst > * + *{margin-top:8px}
.lf-kaart-tekst p:not(.lf-meta){color:var(--lf-gedempt);font-size:15.5px}

/* Contact */
.lf-gegevens{margin:0}
.lf-gegevens table{border-collapse:collapse;width:100%}
.lf-gegevens td{border:0;border-bottom:1px solid var(--lf-lijn);padding:13px 0;vertical-align:top}
.lf-gegevens tr:first-child td{border-top:2px solid var(--lf-inkt)}
.lf-gegevens td:first-child{width:150px;padding-right:12px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--lf-gedempt);padding-top:16px}
.lf-gegevens a{text-decoration:none;border-bottom:1px solid var(--lf-lijn)}
.lf-gegevens a:hover{border-bottom-color:currentColor}
@media (max-width:600px){.lf-gegevens td:first-child{width:110px}}

/* Geboorteakte */
.lf-akte{box-sizing:border-box;margin:0;width:100%;max-width:460px;background:var(--lf-vlak);color:var(--lf-inkt);padding:22px 22px 18px;font-size:14px}
.lf-akte-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:12px}
.lf-akte-nr{font-family:var(--lf-mono);font-size:12.5px;color:var(--lf-gedempt);white-space:nowrap}
.lf-akte table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.lf-akte th{text-align:left;font-weight:600;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--lf-gedempt);padding:4px 0;border:0}
.lf-akte td{border:0;border-bottom:1px solid var(--lf-lijn);padding:6px 0;font-family:var(--lf-mono)}
.lf-akte td:first-child{font-family:var(--lf-body)}
.lf-akte-niv{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;font-size:13.5px}
.lf-akte-niv span{display:inline-flex;gap:5px;align-items:center}
.lf-akte-niv i{width:12px;height:12px;border:1.5px solid currentColor;display:inline-block}
.lf-akte figcaption{margin-top:12px;font-size:13.5px;color:var(--lf-gedempt)}

/* ---------- Voet ---------- */
.lf-voet{padding-block:clamp(40px,6vw,72px) 32px;background:var(--lf-band);color:var(--lf-band-gedempt)}
.lf-voet a{color:var(--lf-band-tekst);text-decoration:none}
.lf-voet a:hover{text-decoration:underline}
.lf-voet .lf-label{color:var(--lf-band-tekst)}
.lf-voet .lf-motto{color:var(--lf-band-tekst)}
.lf-voet-logo{height:26px;width:auto;display:block}
.lf-voet-onder{margin-top:40px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--lf-band-gedempt) 35%,transparent);gap:8px 24px}
.lf-voet-onder p{margin:0}

/* ---------- Pagina's en berichten ---------- */
.lf-pagina{padding-block:clamp(40px,6vw,80px)}
.lf-pagina-titel{margin-bottom:24px}
.lf-bericht{padding-block:24px;border-bottom:1px solid var(--lf-lijn)}
.lf-bericht > *{margin-block:0}
.lf-bericht > * + *{margin-block-start:8px}
.lf-bericht-titel a{text-decoration:none}
.wp-block-query-pagination{margin-top:32px}

/* ---------- Binnenkort online ---------- */
.lf-binnenkort{min-height:calc(100vh - var(--lf-kop-hoogte));display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;padding-block:64px;background:var(--lf-band);color:var(--lf-band-tekst)}
.lf-binnenkort > *{margin:0}
.lf-binnenkort .lf-lead,.lf-binnenkort .lf-klein{color:var(--lf-band-gedempt)}
.lf-binnenkort a{color:var(--lf-band-tekst)}
.lf-binnenkort-logo{height:40px;width:auto;display:block}

/* ---------- WooCommerce: rustige basis ---------- */
.woocommerce .price,.wc-block-components-product-price{font-family:var(--lf-mono)}

/* ---------- Italiaanse lopende band ---------- */
.lf-nastro{background:var(--lf-accent);color:#fff;overflow:hidden;padding-block:14px;white-space:nowrap}
.lf-nastro-tekst{display:inline-block;max-width:none!important;white-space:nowrap;text-wrap:nowrap;margin:0;padding-left:0;animation:lf-nastro 60s linear infinite;font-family:var(--lf-display);font-size:14px;letter-spacing:0.16em;text-transform:uppercase}
.lf-nastro-tekst span[aria-hidden]{margin-inline:18px;opacity:0.8}
@keyframes lf-nastro{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Italiaans citaat ---------- */
.lf-citazione{text-align:center;padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--lf-lijn)}
.lf-citazione > *{margin-inline:auto}
.lf-ornament{color:var(--lf-accent-tekst);font-size:18px;margin:0}
.lf-citaat{font-family:var(--wp--preset--font-family--accent,var(--lf-display));font-style:italic;font-size:clamp(30px,4.6vw,56px);line-height:1.12;max-width:20em;margin-top:14px}
.lf-citaat-nl{color:var(--lf-gedempt);max-width:34em;margin-top:16px}

/* ---------- Taalkeuze NL / EN ---------- */
.lf-taal{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:0.14em;white-space:nowrap}
.lf-taal a{text-decoration:none;opacity:0.6;padding:6px 2px}
.lf-taal a:hover{opacity:1}
.lf-taal a.is-actief{opacity:1;font-weight:700;border-bottom:2px solid var(--lf-accent)}
.lf-taal span{opacity:0.4}
@media (max-width:600px){.lf-top-rechts{gap:10px 14px}}

/* ---------- Blok: toerenteller ---------- */
.lf-tt{width:100%;max-width:440px;margin-inline:auto;aspect-ratio:1/1}
.lf-tt-svg{width:100%;height:auto;display:block;overflow:visible}
.lf-tt-naald path{fill:#F4F2EC}
.lf-tt-naald{will-change:transform}
.lf-tt-editor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:50%;background:#000;border:10px solid #9C9C98;color:#EEE8DA;text-align:center;padding:20px}
.lf-tt-editor-label{font-family:var(--lf-display);font-size:18px;letter-spacing:0.1em;text-transform:uppercase}
.lf-tt-editor-hint{font-size:13px;color:#A8A295}

/* ==========================================================================
   Carrozzeria: een Italiaanse autobrochure uit de jaren 60. Crèmekleurig
   papier, espresso-donkere vlakken, brede grotesk-koppen en een cursieve
   schreef als accent. Klassiek, maar niet ouderwets.
   ========================================================================== */
:root{--lf-serif:var(--wp--preset--font-family--accent);--lf-messing-licht:var(--wp--preset--color--messing-licht)}
h1,h2,h3,h4,.wp-block-heading,.wp-block-post-title{font-stretch:125%}
.wp-element-button,.wp-block-button__link,.wp-block-navigation{font-stretch:112%}

/* Kop: espresso, loopt naadloos over in de hero */
.lf-top{background:var(--lf-band);color:var(--lf-band-tekst);border-bottom:1px solid #3A332B}
.lf-top .wp-block-navigation{color:var(--lf-band-gedempt)}
.lf-top .wp-block-navigation a:hover{color:var(--lf-band-tekst)}
.lf-top .wp-block-navigation__responsive-container.is-menu-open{background:var(--lf-band);color:var(--lf-band-tekst)}

/* Eyebrow: dunne rode lijn en ruim gespatieerde kapitalen */
.lf-eyebrow{font-family:var(--lf-display);font-stretch:112%;font-size:11.5px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--lf-accent-tekst)}
.lf-eyebrow::before{width:28px;height:2px;background:currentColor}
.lf-band .lf-eyebrow,.lf-hero .lf-eyebrow{color:var(--lf-messing-licht)}

/* Cursieve schreef als accent in koppen */
.lf-hero-titel em,.lf-kop h2 em{font-family:var(--lf-serif);font-style:italic;font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:0;font-size:1.14em;line-height:0.95}

/* Hero */
.lf-hero{background:var(--lf-band);color:var(--lf-band-tekst);border-bottom:0}
.lf-hero-titel em{color:var(--lf-messing-licht)}
.lf-hero .lf-lead,.lf-hero .lf-onderschrift{color:var(--lf-band-gedempt)}
.lf-hero .is-style-outline .wp-block-button__link{border-color:var(--lf-band-gedempt);color:var(--lf-band-tekst)}
.lf-hero .is-style-outline .wp-block-button__link:hover{background:var(--lf-band-tekst);color:var(--lf-band)}
/* Verhaal: eerste alinea in de schreef */
.lf-verhaal-tekst > p:nth-of-type(2){font-family:var(--lf-serif);font-size:27px!important;line-height:1.3;color:var(--lf-inkt)}
.lf-oprichter{padding:20px;background:var(--lf-vlak);border:1px solid var(--lf-lijn);border-radius:4px}
.lf-mono{border-radius:50%;border:1px solid var(--lf-goud);color:var(--lf-goud);font-family:var(--lf-serif);font-style:italic;font-size:26px}
.lf-oprichter h3{font-size:17px}
.lf-rol{font-weight:600;font-size:12px}

/* Diensten met een dubbele lijn erboven */
.lf-diensten{border-top:3px double var(--lf-inkt);padding-top:26px}
.lf-diensten h3{font-size:16px;line-height:1.3}
.lf-diensten ul{list-style:none;padding-left:0}
.lf-diensten li{padding-left:16px;position:relative}
.lf-diensten li::before{content:"";position:absolute;left:0;top:0.72em;width:8px;height:1px;background:var(--lf-accent)}

/* Band */
.lf-n{font-family:var(--lf-serif);font-style:italic;font-size:52px;line-height:0.9;color:var(--lf-messing-licht)}
.lf-niveaus .wp-block-column{border-top-color:#4A4238}
.lf-niveaus h3{font-size:16px;line-height:1.3}

/* Geboorteakte: als een brochurekaart met dubbele rand */
.lf-akte{border:3px double var(--lf-inkt);border-radius:2px}
.lf-band .lf-akte{border-color:var(--lf-goud)}
.lf-akte-kop{border-bottom:1px solid var(--lf-inkt)}
.lf-akte-kop b{font-family:var(--lf-serif);font-style:italic;font-weight:400;font-size:28px;line-height:1}

/* Kaarten */
.lf-kaart{background:var(--lf-vlak);border:1px solid var(--lf-lijn);border-radius:4px;overflow:hidden}
.lf-ph{background:var(--lf-band);color:var(--lf-band-gedempt)}
.lf-ph::before{left:18px;right:auto;width:36px;height:3px}
.lf-kaart-tekst{padding:18px 20px 22px}
.lf-kaart-tekst h3{font-size:17px}
.lf-kaart .lf-meta{color:var(--lf-goud);font-weight:600}

/* Contact */
.lf-gegevens tr:first-child td{border-top:3px double var(--lf-inkt)}
.lf-gegevens td:first-child{font-family:var(--lf-display);font-stretch:112%;font-weight:600;font-size:11px}
.lf-gegevens td:last-child{font-size:18px}

/* Voet */
.lf-voet{border-top:0}
.lf-voet .lf-motto{color:var(--lf-messing-licht)}
.lf-voet .lf-label{font-family:var(--lf-display);font-stretch:112%;font-weight:600}
.lf-pagina-titel{font-stretch:125%}

/* Foto's in de projectkaarten */
.lf-kaart .lf-foto{margin:0;overflow:hidden}
.lf-kaart .lf-foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
.lf-kaart:hover .lf-foto img{transform:scale(1.03)}
.lf-kaart .lf-ph{aspect-ratio:4/5}
.lf-foto-bertone img{object-position:center 62%}
.lf-foto-motor img{object-position:center 38%}
.lf-kaart .lf-video{margin:0;background:#000}
.lf-kaart .lf-video video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 40%}

/* Revisie en tuning: video links, tekst rechts */
.lf-revisie{background:var(--lf-vlak)}
.lf-kaart-liggend{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);align-items:stretch;background:var(--lf-bg)}
.lf-kaart-liggend .lf-video video{aspect-ratio:9/16;height:100%;object-position:center}
.lf-kaart-liggend .lf-kaart-tekst{padding:26px 24px;display:flex;flex-direction:column;justify-content:flex-end}
@media (max-width:600px){.lf-kaart-liggend{grid-template-columns:minmax(0,1fr)}.lf-kaart-liggend .lf-video video{aspect-ratio:4/5;height:auto}}

/* Fotoreeks van de Spider-bouw */
.lf-galerij-kop{margin-top:clamp(48px,6vw,80px)}
.lf-galerij-kop h3{font-size:20px;margin:0}
.lf-galerij-kop .lf-intro{margin-top:8px}
.lf-galerij{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:22px}
.lf-galerij .lf-foto{margin:0}
.lf-galerij .lf-foto img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.lf-galerij figcaption{font-size:13.5px;color:var(--lf-gedempt);margin-top:8px;text-align:left}
@media (max-width:900px){.lf-galerij{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Big brake kit */
.lf-remmen-sec{background:var(--lf-vlak)}
.lf-remmen{align-items:center}
.lf-remmen .lf-foto{margin:0}
.lf-remmen .lf-foto img{display:block;width:100%;border-radius:4px}
.lf-remmen-groot img{aspect-ratio:4/3;object-fit:cover}
.lf-remmen-klein{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.lf-remmen-klein img{aspect-ratio:16/10;object-fit:cover}
.lf-remmen h2 + .lf-lead{margin-top:18px}
.lf-remmen-lijst{list-style:none;padding-left:0;margin-top:18px}
.lf-remmen-lijst li{padding:10px 0 10px 22px;border-top:1px solid var(--lf-lijn);position:relative}
.lf-remmen-lijst li::before{content:"";position:absolute;left:0;top:1.15em;width:10px;height:2px;background:var(--lf-accent)}
.lf-remmen-lijst strong{font-weight:600}