/*
Theme Name: Van Orden
Theme URI: https://vanorden.nl
Author: Van Orden Consultancy & Interim
Description: Blokthema voor Van Orden Consultancy & Interim. Huisstijl volgens de Huisstijlgids editie 1 (2026): Poppins, marineblauw en helder blauw. Tweetalig (NL/EN) met Polylang.
Version: 1.10.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vanorden
*/

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(section[id]) { scroll-margin-top: 96px; }
.vo-accent { color: var(--wp--preset--color--blauw); }

.vo-eyebrow {
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--leigrijs);
	margin: 0;
}
.vo-dark .vo-eyebrow { color: var(--wp--preset--color--ijsblauw); }
.vo-lead { font-size: 18px; color: var(--wp--preset--color--leigrijs); }
.vo-dark { color: var(--wp--preset--color--wit); }
.vo-dark p, .vo-dark li { color: var(--wp--preset--color--ijsblauw); }
.vo-dark :where(h1, h2, h3) { color: var(--wp--preset--color--wit); }
.vo-muted { color: var(--wp--preset--color--leigrijs); }
.vo-small { font-size: 13px !important; }
.vo-section > * + * { margin-block-start: 3rem; }
.vo-intro > * + * { margin-block-start: 1rem; }

/* ---------- Header ---------- */
.vo-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--wp--preset--color--wit);
	border-bottom: 1px solid var(--wp--preset--color--ijsblauw);
}
.admin-bar .vo-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vo-header { top: 46px; } }
.vo-bar {
	max-width: 1200px; margin: 0 auto; padding: 18px 32px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.vo-bar__logo img { height: 46px; width: auto; display: block; }
.vo-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 15px; font-weight: 500; }
.vo-nav a { color: var(--wp--preset--color--marineblauw); text-decoration: none; }
.vo-nav a:hover { color: var(--wp--preset--color--blauw); }
.vo-lang { color: var(--wp--preset--color--leigrijs); font-weight: 400; }
.vo-lang a.is-current { font-weight: 600; }
.vo-lang a:not(.is-current) { color: var(--wp--preset--color--leigrijs); }
.vo-nav .vo-nav__cta {
	background: var(--wp--preset--color--marineblauw); color: var(--wp--preset--color--wit);
	padding: 12px 22px; font-weight: 600; min-height: 44px; box-sizing: border-box;
	display: inline-flex; align-items: center;
}
.vo-nav .vo-nav__cta:hover { background: #0F2A44; color: var(--wp--preset--color--wit); }
@media (max-width: 640px) {
	.vo-bar { padding: 14px 16px; }
	.vo-bar__logo img { height: 38px; }
	.vo-nav { gap: 6px 18px; font-size: 14px; }
}

/* ---------- Hero ---------- */
.vo-hero { position: relative; overflow: hidden; }
.vo-hero::before, .vo-hero::after { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
.vo-hero::before { right: -140px; bottom: -220px; width: 720px; height: 720px; opacity: .08; background-image: var(--vo-ring); }
.vo-hero::after { right: 4%; bottom: -70px; width: 380px; height: 380px; background-image: var(--vo-pijl); }
.vo-hero > * { position: relative; z-index: 1; }
.vo-hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.08; letter-spacing: -0.01em; max-width: 720px; }
.vo-hero .vo-lead { font-size: 19px; color: var(--wp--preset--color--ijsblauw); max-width: 620px; }
@media (max-width: 782px) { .vo-hero::after { width: 200px; height: 200px; right: -20px; bottom: -40px; } }

.vo-contact { position: relative; overflow: hidden; }
.vo-contact::before { content: ""; position: absolute; left: -180px; top: -200px; width: 560px; height: 560px; opacity: .08; background: var(--vo-ring) no-repeat center / contain; pointer-events: none; }
.vo-contact > * { position: relative; z-index: 1; }
.vo-contact a:not(.wp-element-button) { color: var(--wp--preset--color--wit); font-weight: 500; }

/* ---------- Knoppen ---------- */
.wp-block-button.is-style-licht .wp-block-button__link { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--marineblauw); }
.wp-block-button.is-style-licht .wp-block-button__link:hover { background: var(--wp--preset--color--ijsblauw); }
.wp-block-button.is-style-onderstreept .wp-block-button__link {
	background: transparent; color: inherit; padding: 15px 4px; border-bottom: 2px solid var(--wp--preset--color--blauw); font-weight: 500;
}
.vo-link { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--blauw); padding: 8px 0; }

/* ---------- Logobalk ---------- */
.vo-logos { background-color: var(--wp--preset--color--ijsblauw); }
.vo-logo-slot {
	min-height: 72px; display: flex; align-items: center; justify-content: center; text-align: center;
	color: var(--wp--preset--color--leigrijs); font-size: 14px; font-weight: 600; margin: 0 !important;
}
.vo-logos .wp-block-image { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 72px; }
.vo-logos .wp-block-image img { max-height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: .2s; }
.vo-logos .wp-block-image img:hover { filter: none; opacity: 1; }

/* ---------- Kaarten ---------- */
.vo-rule { border-top: 3px solid var(--wp--preset--color--marineblauw); padding-top: 24px; }
.vo-rule h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.vo-rule > * + * { margin-block-start: 10px; }
.vo-dark .vo-rule-light { border-top: 1px solid #3A5C80; padding-top: 20px; }
.vo-rule-light h3 { font-size: 19px; font-weight: 600; }
.vo-rule-light > * + * { margin-block-start: 8px; }

.vo-card { padding: 40px 36px; }
.vo-card > * + * { margin-block-start: 14px; }
.vo-card h3 { font-size: 26px; line-height: 1.25; }
.vo-card .wp-block-list { padding-left: 20px; }
.vo-card .wp-block-list li + li { margin-top: 6px; }
.vo-card--accent { border-top: 4px solid var(--wp--preset--color--blauw); }
.vo-meta { font-size: 13px !important; font-weight: 600; color: var(--wp--preset--color--leigrijs); margin: 0; }
.vo-dark .vo-meta, .vo-card.has-marineblauw-background-color .vo-meta { color: var(--wp--preset--color--ijsblauw); }
.vo-card.has-marineblauw-background-color :where(h3) { color: var(--wp--preset--color--wit); }
.vo-card.has-marineblauw-background-color :where(p, li) { color: var(--wp--preset--color--ijsblauw); }
.vo-strip { padding: 32px 36px; }
.vo-strip p.vo-strip__text { font-size: 18px; font-weight: 500; margin: 6px 0 0; }

/* ---------- Lijsten met lijnen ---------- */
.vo-lines { list-style: none; padding: 0; margin: 0; }
.vo-lines li { padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--ijsblauw); font-weight: 500; }
.vo-lines.vo-lines--klein li { padding: 12px 0; font-size: 15px; }

/* ---------- Cijfers ---------- */
.vo-stat { padding: 36px 32px; }
.vo-stat::before { content: ""; display: block; width: 32px; height: 4px; background: var(--wp--preset--color--blauw); margin-bottom: 16px; }
.vo-stat__num { font-size: 52px !important; font-weight: 700; line-height: 1.1; margin: 0 0 8px; color: var(--wp--preset--color--marineblauw); }
.vo-stat__label { font-weight: 500; margin: 0 0 8px; }
.vo-stat__src { font-size: 13px !important; color: var(--wp--preset--color--leigrijs); margin: 0; }

/* ---------- Over ---------- */
.vo-portret { position: relative; padding: 0 20px 20px 0; margin: 0; max-width: 460px; }
.vo-portret::before { content: ""; position: absolute; right: 0; bottom: 0; width: 70%; height: 70%; background: var(--wp--preset--color--ijsblauw); }
.vo-portret img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vo-creds { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 13px; color: var(--wp--preset--color--leigrijs); }

/* ---------- Inzichten ---------- */
.vo-posts .wp-block-post { background: var(--wp--preset--color--ijsblauw); padding: 32px; }
.vo-posts .wp-block-post-date { font-size: 13px; color: var(--wp--preset--color--leigrijs); }
.vo-posts .wp-block-post-title { font-size: 20px; font-weight: 600; line-height: 1.35; margin-top: 12px; }
.vo-posts .wp-block-post-title a { text-decoration: none; }

/* ---------- Footer ---------- */
.vo-footer { background: var(--wp--preset--color--marineblauw); color: var(--wp--preset--color--ijsblauw); border-top: 1px solid #2A4D70; }
.vo-footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.vo-footer__inner img { height: 52px; width: auto; display: block; }
.vo-footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; }
.vo-footer__links a { color: var(--wp--preset--color--ijsblauw); text-decoration: none; }
.vo-footer__links a:hover { color: var(--wp--preset--color--wit); }

/* ---------- Artikelen ---------- */
.vo-article .wp-block-post-title { font-size: clamp(30px, 3.4vw, 44px); }

/* ---------- Secties en ritme ---------- */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-block-post-content > .alignfull { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.vo-section { padding-top: clamp(4.5rem, 8vw, 7rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); }
.vo-section.vo-section--compact { padding-top: 3rem; padding-bottom: 3rem; }
.vo-hero.vo-section { padding-top: clamp(5rem, 9vw, 7rem); padding-bottom: clamp(6rem, 10vw, 8.5rem); }
.vo-wrap > * + * { margin-block-start: 3.5rem !important; }
.vo-section--compact .vo-wrap > * + * { margin-block-start: 1.5rem !important; }
.vo-hero .vo-wrap > * + * { margin-block-start: 1.75rem !important; }
.vo-intro { max-width: 780px; }
.vo-intro > * + * { margin-block-start: 1rem !important; }
.vo-intro > .vo-lines, .vo-intro > .vo-small { margin-block-start: 1.5rem !important; }
.vo-grid { gap: 24px; }
.vo-grid--ruim > * { padding-right: 2rem; }
.vo-grid--ruim > .vo-intro { max-width: none; }
.vo-logo-grid { gap: 16px; }
.vo-logo-slot { border: 1px dashed #B9D3E8; }
.vo-over { gap: 64px; align-items: flex-start; }
.vo-lines--twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: 32px; }
.vo-contact__grid { align-items: center; }
.vo-contact__details > * + * { margin-block-start: 14px !important; }
.vo-strip__text .vo-link { margin-left: 8px; white-space: nowrap; }
.vo-posts .wp-block-post-template { gap: 24px; }

/* ---------- Gewone pagina's ---------- */
.vo-page-main { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.vo-page-main > * + * { margin-block-start: 1.5rem; }

/* ---------- Mobiel: compacte header ---------- */
@media (max-width: 640px) {
	.vo-nav > a:not(.vo-nav__cta) { display: none; }
	.vo-nav .vo-nav__cta { padding: 10px 16px; }
}

@media (max-width: 640px) { .vo-eyebrow { font-size: 13px !important; letter-spacing: 0.16em; } }

/* ---------- Logo's uit de themamap ---------- */
.vo-logo-item { min-height: 72px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.vo-logo-item img { max-height: 48px; max-width: 150px; width: auto; height: auto; object-fit: contain; }

.vo-logo-item.is-hoog img { max-height: 76px; }

/* ---------- Naast elkaar staande blokken horizontaal uitlijnen ---------- */
#rollen .vo-grid > .vo-card,
#resultaten .vo-grid > .vo-stat { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 14px; align-content: start; }
#resultaten .vo-grid > .vo-stat { row-gap: 8px; }
#uitdaging .vo-grid > .vo-rule,
#voor-wie .vo-grid > .vo-rule-light { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 10px; }
#oplossing .vo-grid > .vo-intro { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 16px; }
#rollen .vo-grid > .vo-card > *,
#resultaten .vo-grid > .vo-stat > *,
#uitdaging .vo-grid > .vo-rule > *,
#voor-wie .vo-grid > .vo-rule-light > *,
#oplossing .vo-grid > .vo-intro > * { margin: 0 !important; }
#rollen .vo-card { padding: 36px 32px; }
#rollen .vo-card h3 { font-size: 24px; }

/* ---------- Bewijsregel in de hero ---------- */
.vo-hero-proof { font-size: 15px !important; color: var(--wp--preset--color--ijsblauw); opacity: .85; max-width: 620px; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); }

/* ---------- Tijdlijn ---------- */
.vo-timeline li { font-weight: 500; }

/* ---------- Veelgestelde vragen ---------- */
.vo-faq__lijst { max-width: 860px; }
.vo-faq__lijst > * + * { margin-block-start: 0 !important; }
.vo-faq .wp-block-details { border-bottom: 1px solid #C9DDEC; padding: 0; }
.vo-faq .wp-block-details:first-child { border-top: 1px solid #C9DDEC; }
.vo-faq .wp-block-details summary {
	list-style: none; cursor: pointer; padding: 20px 48px 20px 0; position: relative;
	font-size: 18px; font-weight: 600; color: var(--wp--preset--color--marineblauw);
}
.vo-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.vo-faq .wp-block-details summary::after {
	content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	font-size: 26px; font-weight: 400; color: var(--wp--preset--color--blauw);
}
.vo-faq .wp-block-details[open] summary::after { content: "−"; }
.vo-faq .wp-block-details > p { padding: 0 48px 22px 0; margin: 0; color: var(--wp--preset--color--leigrijs); }
.vo-contact .vo-small { color: var(--wp--preset--color--ijsblauw); opacity: .8; }