/*
Theme Name: Sitefly
Theme URI: https://sitefly.be
Author: Sitefly
Description: Snel, licht blokthema (FSE) voor Sitefly. Donkere en zachtwitte secties, Lexend, alle inhoud in blokken.
Version: 1.9.1
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sitefly
*/
:root{color-scheme:dark;
 --s30:var(--wp--preset--spacing--30);--s40:var(--wp--preset--spacing--40);--s50:var(--wp--preset--spacing--50);
 --s60:var(--wp--preset--spacing--60);--s70:var(--wp--preset--spacing--70);--s80:var(--wp--preset--spacing--80);
 --c-base:var(--wp--preset--color--base);--c-text:var(--wp--preset--color--contrast);--c-line:var(--wp--preset--color--line);
 --c-navy:var(--wp--preset--color--navy);--c-coral:var(--wp--preset--color--coral);
 --dots-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.5' cy='1.5' r='1.2' fill='%23ffffff' fill-opacity='.11'/%3E%3C/svg%3E")}
html{scroll-padding-top:90px;-webkit-font-smoothing:antialiased}

/* ================= typografie (gemeten op generatepress.com) =================
   body 17px/1.6 w400 | h1 56px lh1.1 ls-.045em w500 | h2 39px lh1.1 ls-.04em w500
   menu 17px w400 | knoppen 17px w400, pil | footerlinks 17px w400 */
body{font-size:17px;line-height:1.6;font-weight:400}
.sf-display,.wp-block-heading{font-weight:500}
.sf-display{letter-spacing:-.04em;line-height:1.1}
h1,.has-xx-large-font-size{letter-spacing:-.045em;line-height:1.1}
h2,.has-x-large-font-size{letter-spacing:-.04em;line-height:1.1}
h3,h4{letter-spacing:-.03em;line-height:1.2}

/* ================= ritme: één plek voor alle spacing =================
   blok->blok 24px | kop->tekst/knop 36px | secties 120px (hero/pagina 80px) */
.wp-site-blocks>*{margin-block:0}
.sf-display+:is(p,.wp-block-buttons,.wp-block-group){margin-block-start:var(--s50)}
p+.wp-block-buttons{margin-block-start:var(--s50)}
.sf-hero>*,.sf-why>*{margin-block:0!important}
.sf-section,.sf-cta{padding-block:var(--s80)}
.sf-page{padding-block:var(--s70) var(--s80)}
.sf-page .wp-block-post-content>*+*{margin-block-start:var(--s40)}
.sf-page .wp-block-post-content :is(h2,h3){margin-block-start:var(--s60)}

/* ================= zachtwitte secties =================
   Binnen .sf-light draaien de tokens om: contrast = donkere tekst, base = zachtwit. */
.sf-light{--wp--preset--color--contrast:#0D1830;--wp--preset--color--mute:#4B5C78;--wp--preset--color--line:#D5DDE6;--wp--preset--color--base:#F6F8FA;
 --c-text:#0D1830;--c-line:#D5DDE6;color:#0D1830}
/* ================= knoppen ================= */
.wp-block-button__link,.wp-element-button{font-weight:400;border-radius:100px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.wp-element-button:hover{background:var(--c-coral)!important;color:var(--c-base)!important;border-color:var(--c-coral)!important}
.wp-element-button.has-coral-background-color:hover{background:var(--c-text)!important;color:var(--c-base)!important}
.sf-light .wp-element-button:hover{background:var(--c-coral)!important;color:#0D1830!important}
:where(a,button):focus-visible{outline:3px solid var(--c-coral);outline-offset:3px}

/* ================= header ================= */
.sf-header{position:sticky;top:0;z-index:50;background:var(--c-base);border-bottom:1px solid var(--c-line)}
.admin-bar .sf-header{top:32px}
.sf-bar{padding-block:var(--s30)}
.wp-block-site-title{line-height:1;margin:0}
.wp-block-site-title a{position:relative;padding-bottom:4px;text-decoration:none;display:inline-block}
.wp-block-site-title a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--c-coral);transform:skewX(-30deg)}
.sf-header .wp-block-navigation{font-weight:400}
.sf-header .wp-block-navigation__container{gap:var(--s50)}
.sf-header .wp-block-navigation,.sf-header .wp-block-navigation a,.sf-header .wp-block-button__link{font-size:var(--wp--preset--font-size--medium)}
.sf-header .wp-block-navigation a{color:var(--wp--preset--color--mute);text-decoration:none;border-bottom:2px solid transparent;padding:6px 0}
.sf-header .wp-block-navigation a:hover{color:var(--c-text);border-color:var(--c-text)}
.sf-header .wp-block-button__link{line-height:1.4}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container{background:var(--c-base)!important;color:var(--c-text)!important;border:1px solid var(--c-line)!important;padding:8px 16px!important}
.sf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container{width:max-content!important;min-width:max-content!important;white-space:nowrap}
.sf-header .wp-block-navigation-item.has-child:hover>.wp-block-navigation__submenu-container,.sf-header .wp-block-navigation-item.has-child:focus-within>.wp-block-navigation__submenu-container{visibility:visible;opacity:1;height:auto;overflow:visible}
.sf-header .wp-block-navigation__submenu-container a{display:block;padding:9px 0;color:var(--c-text);border:0}
.sf-header .wp-block-navigation__submenu-container a:hover{text-decoration:underline}
.wp-block-navigation__responsive-container.is-menu-open{background:var(--c-base);color:var(--c-text)}

/* ================= hero: vlak diep marine ================= */
.sf-herowrap{position:relative;isolation:isolate;overflow:hidden}
.sf-herowrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:radial-gradient(900px 440px at 88% 8%,rgba(26,46,84,.95),transparent 70%),radial-gradient(500px 300px at 4% 100%,rgba(238,111,87,.10),transparent 70%),var(--dots-light);
 -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.sf-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s60);align-items:end;padding-block:var(--s70)}
.sf-lead{font-size:clamp(1.05rem,1.4vw,1.2rem)!important;line-height:1.6;max-width:46ch}
.sf-meter{position:relative;border-radius:4px;padding:var(--s50);box-shadow:inset 0 0 0 1px var(--c-line)}
.sf-meter::after{content:"";position:absolute;right:0;top:0;width:44px;height:8px;background:var(--c-coral)}
.sf-meter .sf-num{font-size:clamp(48px,6vw,80px);line-height:.9;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:0;color:var(--c-coral)}
.sf-meter p+p{margin-block-start:var(--s30)!important;max-width:26ch}

/* ================= expertises: rustig raster, één accentkaart ================= */
.sf-index-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s40);padding-bottom:var(--s60)}
.sf-index-head p{max-width:36ch;margin:0}
.sf-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s40)}
.sf-card{display:flex;flex-direction:column;gap:var(--s40);padding:var(--s50);border-radius:16px;border:0;background:#fff;box-shadow:0 18px 34px -28px rgba(13,24,48,.35)}
.sf-card{color:#0D1830;--wp--preset--color--contrast:#0D1830;--wp--preset--color--mute:#4B5C78;--c-text:#0D1830}
.sf-card>*{margin:0!important}
.sf-card>.wp-block-buttons{margin-top:auto!important;padding-top:var(--s30)}
.sf-card h3{font-size:clamp(1.35rem,2vw,1.6rem)}
.sf-card p{font-size:1rem}
/* merkdetail: de scheve koraalstreep uit het logo, onder elke kaarttitel */
.sf-card h3::after{content:"";display:block;width:36px;height:3px;margin-top:16px;background:var(--c-coral);transform:skewX(-30deg);transform-origin:left;transition:width .25s}
.sf-card:hover h3::after{width:72px}
.sf-card .wp-block-button__link{padding:.5em 1.2em;font-size:1rem;border-width:1.5px}
.sf-cardtop{display:flex;justify-content:space-between;align-items:flex-start}
.sf-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--c-navy);color:var(--c-coral)}
.sf-ico .dashicons{font-size:26px;width:26px;height:26px;line-height:1}
.sf-dark{background:var(--c-navy);box-shadow:none;color:#EBF1F2;--wp--preset--color--contrast:#EBF1F2;--wp--preset--color--mute:#A9B8CF;--wp--preset--color--line:#2F4570;--wp--preset--color--base:#0D1830;--c-text:#EBF1F2;--c-line:#2F4570}
.sf-dark .sf-ico{background:rgba(255,255,255,.08)}
.sf-dark .wp-block-button__link{border-color:#EBF1F2}

/* ================= snelheid (vlakke marine band) ================= */
.sf-band{padding-block:var(--s80)}
.sf-why{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s60);align-items:start}
.sf-why p,.sf-end p{font-size:clamp(1.05rem,1.5vw,1.3rem)!important;line-height:1.6;max-width:40ch}
.sf-end h2{max-width:16ch}

/* ================= footer ================= */
.sf-footer{border-top:0;padding-block:var(--s60) var(--s50)}
.sf-footer .wp-block-columns{gap:var(--s50)}
.sf-footer .wp-block-column>*+*{margin-block-start:var(--s30)}
.sf-footer p{line-height:1.8}
.sf-foot-title{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.sf-footer .wp-block-column p{font-size:1.0625rem}
.sf-footer .wp-block-column p a{color:var(--wp--preset--color--mute);text-decoration:none}
.sf-footer .wp-block-column p a:hover{color:var(--c-text);text-decoration:underline}
.sf-legal{margin-block-start:var(--s60)!important;padding-top:var(--s40);border-top:1px solid var(--c-line)}

@media(max-width:1100px) and (min-width:901px){.sf-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 .sf-hero,.sf-why{grid-template-columns:1fr;gap:var(--s50)}
 .sf-bento{grid-template-columns:1fr}
 .sf-card{padding:var(--s40)}
 .sf-index-head{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================= mobiel menu (overlay) ================= */
.sf-header .sf-nav-contact{display:none}
.wp-block-navigation__responsive-container-open{color:var(--c-text);padding:8px}
.wp-block-navigation__responsive-container.is-menu-open{background:var(--c-base)!important;color:var(--c-text)!important;padding:var(--s50)!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding-top:var(--s60)}
.wp-block-navigation__responsive-container-close{color:var(--c-text);top:var(--s40);right:var(--s40)}
.sf-header .is-menu-open .wp-block-navigation__container{gap:0;align-items:stretch;width:100%}
.sf-header .is-menu-open .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--c-line)}
.sf-header .is-menu-open a.wp-block-navigation-item__content{display:block;padding:var(--s30) 0;font-size:1.5rem;font-weight:500;letter-spacing:-.03em;color:var(--c-text);border:0}
.sf-header .is-menu-open .wp-block-navigation__submenu-container{position:static!important;background:transparent!important;border:0!important;padding:0 0 var(--s30) var(--s40)!important;width:auto!important;min-width:0!important;height:auto;opacity:1;visibility:visible;overflow:visible;white-space:normal}
.sf-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{border-bottom:0}
.sf-header .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content{font-size:1.0625rem;font-weight:400;letter-spacing:0;color:var(--wp--preset--color--mute);padding:.4rem 0}
.sf-header .is-menu-open .wp-block-navigation__submenu-icon{display:none}
.sf-header .is-menu-open .sf-nav-contact{display:block;border:0;margin-top:var(--s40)}
.sf-header .is-menu-open .sf-nav-contact a.wp-block-navigation-item__content{display:inline-block;background:var(--c-coral);color:var(--c-base);border-radius:100px;padding:.6em 1.4em;font-size:1.0625rem;font-weight:500;letter-spacing:0}
@media(max-width:599px){.sf-header .wp-block-buttons{display:none}}

/* ================= paginacomponenten v2 (subpagina's) =================
   Redactioneel: grote kop links, tekst rechts, vlakke kleurvelden (marine / donkerder / zachtwit / koraal).
   Geen patronen, geen verlopen. */
.sf-pagehero{padding-block:var(--s70) var(--s80)}
.sf-pagehero h1.has-xx-large-font-size{font-size:clamp(2.6rem,6.4vw,5.25rem);letter-spacing:-.05em;line-height:1.02;max-width:14ch}
.sf-pagehero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--s60);margin-top:var(--s60);padding-top:var(--s50);border-top:1px solid var(--c-line);align-items:start}
.sf-pagehero-grid>*{margin-block:0!important}
.sf-tag{font-size:clamp(1.3rem,2.1vw,1.75rem)!important;color:var(--c-coral);letter-spacing:-.03em;line-height:1.2;font-weight:500}
.sf-pagehero-body>*+*{margin-top:var(--s40)}
.sf-pagehero-body>p{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65;max-width:62ch}
.sf-pagehero-body .sf-fig img{border-radius:6px}
.sf-pagehero-body .sf-fig.is-portrait{max-width:340px}
.sf-sec{padding-block:var(--s80)}
.sf-sec,.sf-ctaband,.sf-herowrap{margin-block:0!important}
.wp-block-post-content>*,.wp-site-blocks main>*{margin-block-start:0!important}
.sf-dk{border-top:1px solid var(--c-line)}
.sf-nv{--c-line:#2F4570}
.sf-sec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--s60);align-items:start}
.sf-sec-grid>*{margin-block:0!important}
.sf-sec-grid>.wp-block-heading,.sf-sec-grid>.sf-sec-left{position:sticky;top:110px}
.sf-sec-left>*+*{margin-top:var(--s40)}
.sf-sec-left p.sf-lede{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.4;letter-spacing:-.02em;font-weight:500}
.sf-sec-body>*+*{margin-top:var(--s40)}
.sf-sec-body>p,.sf-sec-body>ul{max-width:62ch}
.sf-sec-body ul{padding-left:1.2em}
.sf-sec-body li+li{margin-top:.5em}
.sf-sec-body a:not(.wp-block-button__link),.sf-pagehero-body a:not(.wp-block-button__link),.sf-card a:not(.wp-block-button__link){color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sf-fig{margin-inline:0;margin-bottom:0}
.sf-fig img{display:block;width:100%;height:auto;border-radius:6px}
.sf-fig figcaption{margin-top:var(--s30);font-size:.9rem;color:var(--wp--preset--color--mute)}
.sf-sechead{padding-bottom:var(--s60);max-width:60ch}
.sf-sechead p{margin-top:var(--s30)}
.sf-steps{counter-reset:step;margin:0}
.sf-step{display:grid;grid-template-columns:3.6rem minmax(0,1fr);column-gap:var(--s40);padding:var(--s40) 0;border-top:1px solid var(--c-line)}
.sf-step:last-child{border-bottom:1px solid var(--c-line)}
.sf-step::before{counter-increment:step;content:counter(step);grid-row:1/3;font-size:2.6rem;font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--c-coral)}
.sf-light .sf-step::before{color:var(--wp--preset--color--teal)}
.sf-step>*{grid-column:2;margin:0!important}
.sf-step h3{font-size:1.35rem}
.sf-step p{margin-top:var(--s30)!important;font-size:1rem;max-width:56ch}
.sf-rows>.sf-row{padding:var(--s40) 0;border-top:1px solid var(--c-line)}
.sf-rows>.sf-row:first-child{padding-top:0;border-top:0}
.sf-row>*{margin:0!important}
.sf-row>*+*{margin-top:var(--s30)!important}
.sf-row h3{font-size:1.35rem}
.sf-row p,.sf-row li{font-size:1rem}
.sf-row ul{padding-left:1.2em}
.sf-row li+li{margin-top:.4em}
.sf-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s60) var(--s60)}
.sf-fact{border-top:1px solid var(--c-line);padding-top:var(--s40)}
.sf-fact>*{margin:0!important}
.sf-fact>*+*{margin-top:var(--s30)!important}
.sf-fact h3{font-size:1.35rem}
.sf-fact p{font-size:1rem;max-width:48ch}
.sf-fact a,.sf-row a{text-decoration:underline;text-underline-offset:3px}
.sf-card ul{margin:0;padding-left:1.2em;font-size:1rem}
.sf-card li+li{margin-top:.4em}
.sf-card a:not(.wp-block-button__link){text-decoration:underline;text-underline-offset:3px}
.sf-bento+p,.sf-bento+.sf-fig{margin-top:var(--s50)}
.sf-faq details{border-top:1px solid var(--c-line);padding:var(--s40) 0}
.sf-faq details:last-child{border-bottom:1px solid var(--c-line)}
.sf-faq summary{cursor:pointer;font-weight:500;font-size:1.125rem;list-style:none;display:flex;justify-content:space-between;gap:var(--s40)}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary::after{content:"+";color:var(--c-coral);font-size:1.5rem;line-height:1}
.sf-light .sf-faq summary::after{color:var(--wp--preset--color--teal)}
.sf-faq details[open] summary::after{content:"\2013"}
.sf-faq details>*+*{margin-top:var(--s30)}
.sf-faq details p{font-size:1rem;max-width:70ch}
.sf-quotes{column-count:3;column-gap:var(--s40)}
.sf-quote{color:#EBF1F2;--wp--preset--color--mute:#A9B8CF;break-inside:avoid;background:var(--c-base);border-radius:6px;padding:var(--s50);margin:0 0 var(--s40)!important}
.sf-quote>*{margin:0!important}
.sf-quote>*+*{margin-top:var(--s30)!important}
.sf-quote::before{content:"\201C";display:block;font-size:3.5rem;line-height:.7;height:1.4rem;color:var(--c-coral);font-weight:500}
.sf-quote p{font-size:1rem}
.sf-folio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s60) var(--s40)}
.sf-folio-card>*{margin:0!important}
.sf-folio-card>*+*{margin-top:var(--s30)!important}
.sf-folio-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;transition:opacity .2s}
.sf-folio-card a:hover img{opacity:.85}
.sf-folio-card a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sf-folio-card h3{font-size:1.25rem}
.sf-folio-card p{font-size:1rem}
.sf-profile{display:flex;align-items:center;gap:var(--s40)}
.sf-profile img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.sf-profile>*{margin:0!important}
.sf-ctaband{padding-block:var(--s80)}
.sf-ctain{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s60);align-items:center}
.sf-ctain>*{margin-block:0!important}
.sf-ctain h2.has-xx-large-font-size{font-size:clamp(2.2rem,4.6vw,3.75rem);line-height:1.04;letter-spacing:-.05em;color:var(--c-base)}
.sf-ctain-body>*+*{margin-top:var(--s40)}
.sf-ctain p{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;max-width:40ch;color:var(--c-base)}
.sf-ctaband .wp-block-button__link{background:var(--c-base);color:#fff;border-color:var(--c-base)}
.sf-ctaband .wp-block-button__link{transition:background .2s,color .2s,border-color .2s}
.sf-ctaband .wp-block-button__link:hover,.sf-ctaband .wp-block-button__link:focus-visible{background:#fff;border-color:#fff;color:var(--c-coral)}
.sf-formcard{background:#fff;color:#0D1830;border-radius:6px;padding:var(--s50)}
@media(max-width:1100px){.sf-folio{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-quotes{column-count:2}}
@media(max-width:900px){.sf-pagehero-grid,.sf-sec-grid,.sf-ctain,.sf-facts{grid-template-columns:1fr;gap:var(--s50)}.sf-sec-grid>.wp-block-heading,.sf-sec-grid>.sf-sec-left{position:static}.sf-pagehero{padding-block:var(--s60)}}
@media(max-width:700px){.sf-folio{grid-template-columns:1fr}.sf-quotes{column-count:1}.sf-step{grid-template-columns:2.6rem minmax(0,1fr)}.sf-step::before{font-size:2rem}}