/*
Theme Name: INFASU 2026
Theme URI: https://infasu.nl
Author: INFASU (huisstijl: Tieme Dekker Grafische vormgeving)
Description: Blokthema in de huisstijl van INFASU. Alle pagina's, kop, voet en sjablonen zijn aan te passen in de site-editor.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: infasu-2026
*/

/* ===== Kader: blauw links, oranje rechts, blauwe balk onder ===== */
:root { --inf-blauw: #11799f; --inf-oranje: #ed652f; --inf-grijs: #58595b; --inf-rand: 12px; }
@media (min-width: 1050px) { :root { --inf-rand: 15px; } }

body { background: #fff; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

.inf-top { background: #fff; border-right: var(--inf-rand) solid var(--inf-oranje); }
.inf-main { background: #fff; border-left: var(--inf-rand) solid var(--inf-blauw); border-right: var(--inf-rand) solid var(--inf-oranje); padding: 2em 0; margin: 0 !important; }
.inf-footer { background: #fff; border-left: var(--inf-rand) solid var(--inf-blauw); border-bottom: var(--inf-rand) solid var(--inf-blauw); margin: 0 !important; }

/* Breedte, zoals het oude raster (1050 / 1200) */
.inf-wrap { box-sizing: border-box; width: 100%; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; padding-left: 1em; padding-right: 1em; }
@media (min-width: 1050px) and (max-width: 1199px) { .inf-wrap { max-width: 1050px; } }

/* Gewone pagina's: tekst op 3/4 breedte, net als vroeger */
.inf-smal { max-width: 900px; }
@media (max-width: 1049px) { .inf-smal { max-width: 765px; } }

/* ===== Typografie ===== */
body { font-weight: 400; }
p { margin: 0 0 1.5em; }
/* Witruimte tussen blokken: 1.5em, maar direct onder een kop iets krapper */
:root :where(.is-layout-flow) > :is(h2,h3,h4,h5,h6) + * { margin-block-start: .5em; }
:root :where(.is-layout-flow) > h4 + * { margin-block-start: 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .25em; }
h2 { padding: 0 0 .25em; }
h3 { margin-bottom: .5em; }
h4 { margin-bottom: 1.5em; }
h5 { margin-bottom: 1em; }
.light, span.light { font-weight: 300; }
em { font-style: italic; }
ul, ol { margin: 0 0 1.5em; padding-left: 1.25em; }
img { max-width: 100%; height: auto; }
a { transition: color .2s ease; }
::selection { background: var(--inf-blauw); color: #fff; }

/* ===== Kop ===== */
.inf-kop { padding-top: 2.1em; padding-bottom: 1.85em; gap: 3.5em; }
.inf-logo { margin: 0 !important; flex: 0 0 auto; line-height: 0; }
.inf-logo img { display: block; }
.inf-menu { font-weight: 300; text-transform: uppercase; font-size: 1.3em; padding-bottom: .4em; gap: .25em .9em; flex: 1 1 auto; }
.inf-menu a { color: #000; }
.inf-menu .wp-block-navigation-item__content:hover,
.inf-menu .wp-block-navigation-item__content:focus { color: #ee7f00; }
.inf-menu .current-menu-item > a,
.inf-menu .current-menu-ancestor > a,
.inf-menu .current-menu-item > .wp-block-navigation-item__content,
.inf-menu .current-menu-ancestor > .wp-block-navigation-item__content { color: #ee7f00; }
.inf-menu .wp-block-navigation-submenu__toggle { color: #000; }
.inf-menu .wp-block-navigation-submenu__toggle svg { width: 12px; height: 12px; stroke-width: 2.5px; }
/* Submenu: grijze balkjes, oranje bij hover */
.inf-menu .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; padding: 0 !important; min-width: 200px !important; font-size: .85em; }
.inf-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; background: #87888a; color: #fff !important; padding: .25em 1em !important; margin-bottom: 1px; }
.inf-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.inf-menu .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { background: var(--inf-oranje); }

/* Mobiel menu */
.inf-menu .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; fill: #888; }
.inf-menu .wp-block-navigation__responsive-container.is-menu-open { padding: 2em 1.5em; }
.inf-menu .is-menu-open .wp-block-navigation__responsive-container-content { gap: .25em; font-size: 1.1em; }
.inf-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { background: transparent; color: #666 !important; padding: .25em 1em !important; }
@media (max-width: 599px) {
	.inf-kop { align-items: center !important; }
	.inf-logo img { width: 170px !important; }
	.inf-menu { padding-bottom: 0; flex: 0 0 auto; }
}

/* ===== Homepage: drie tegels ===== */
.inf-home { padding-top: .5em; }
.inf-tegels { gap: 2em !important; margin-bottom: 1em !important; }
.inf-tegels .wp-block-image { margin: 0 0 1em; line-height: 0; }
.inf-tegels .wp-block-image img { width: 100%; height: auto; }
.inf-tegeltekst { font-size: 1.25em; line-height: 1.25; font-weight: 300; color: #888; margin: 0 0 1em; }
.inf-tegeltekst a { font-weight: 400; }

/* ===== Homepage: onze onderdelen ===== */
.inf-onderdelen { padding-top: 1.5em; }
.inf-lijn { border: 0; border-top: 1px solid #ebebeb !important; height: 0; margin: 0 0 2em !important; background: none !important; opacity: 1; }
.inf-onderdelen h2 { margin-bottom: .35em; }
.inf-intro { font-size: 1.25em; line-height: 1.35; font-weight: 300; color: #888; max-width: 760px; margin-bottom: 1.75em; }
.inf-od-kolommen { gap: 2em !important; }
.inf-od { gap: 1.75em !important; align-items: flex-start !important; }
.inf-od .inf-odlogo { flex: 0 0 120px; width: 120px; margin: .3em 0 0 !important; line-height: 0; }
.inf-od .inf-odlogo img { width: 120px; height: auto; }
.inf-od h3 { color: var(--inf-blauw); text-transform: uppercase; font-weight: 600; font-size: 1.25em; margin: 0 0 .35em; }
.inf-od p { font-size: 1.15em; line-height: 1.45; color: #777; font-weight: 300; margin: 0 0 .75em; }
.inf-od .inf-odtekst { flex: 1 1 auto; }
@media (max-width: 599px) {
	.inf-od { flex-wrap: wrap !important; }
}

/* Pijl-links ("meer") */
a.meer, .inf-meer a, .wp-block-post-excerpt__more-link, .inf-terug a { color: var(--inf-oranje); }
.inf-meer a::after, a.meer::after, .wp-block-post-excerpt__more-link::after { content: " \2192"; display: inline-block; margin-left: .25em; transition: transform .2s ease; }
.inf-meer a:hover::after, a.meer:hover::after, .wp-block-post-excerpt__more-link:hover::after { transform: translateX(4px); }
.inf-meer a:hover, a.meer:hover, .wp-block-post-excerpt__more-link:hover, .inf-terug a:hover { color: var(--inf-blauw); }
.inf-meer { font-size: 1.1em; }

/* ===== Gekleurde blokken (Werkwijze): informeren / faciliteren / support ===== */
.widget.informatie, .widget.faciliteren, .widget.support,
.inf-blok { position: relative; color: #fff; padding: 1em 1.5em 1.5em !important; margin: 0; }
.widget.informatie, .inf-blok.is-blauw { background: var(--inf-blauw); }
.widget.faciliteren, .inf-blok.is-oranje { background: var(--inf-oranje); }
.widget.support, .inf-blok.is-grijs { background: var(--inf-grijs); }
.widget.informatie::before, .widget.faciliteren::before, .widget.support::before, .inf-blok::before {
	content: ""; position: absolute; left: 0; top: 0; width: 43px; height: 43px;
	background: url(assets/img/hoek-lb.gif) no-repeat 0 0; z-index: 2;
}
.widget.informatie::after, .widget.faciliteren::after, .widget.support::after, .inf-blok::after {
	content: ""; position: absolute; right: 0; bottom: 0; width: 50%; height: 6px; background: #fff; z-index: 2;
}
.inf-blok h2, .inf-blok p, .inf-blok li, .widget h2, .widget p { color: #fff; }
.inf-blok h2 { font-size: 1.75em; }
.inf-blok a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.inf-blok a:hover { color: #fff; opacity: .8; }
.inf-blok ul { padding-left: 1.1em; }
.inf-blokken { gap: 1.5em !important; }
.grid-4 { box-sizing: border-box; }
@media (min-width: 720px) { .grid-4 { float: left; width: 33.333%; padding: .5em 1em; } }

/* ===== Artikelen (Zin en onzin) ===== */
.inf-kolommen { gap: 2.5em !important; }
.inf-artikel { border-bottom: 1px solid #ebebeb; padding: 1.25em 0 1em; }
.inf-artikelen .wp-block-post-template > li:first-child .inf-artikel { padding-top: 0; }
.inf-artikel .wp-block-post-title { font-size: 1.75em; font-weight: 600; text-transform: uppercase; margin: 0 0 .25em; }
.inf-artikel .wp-block-post-title a { color: var(--inf-oranje); }
.inf-artikel .wp-block-post-title a:hover { color: var(--inf-blauw); }
.inf-meta { gap: .3em !important; color: #888; font-size: .9em; margin: 0 0 .75em !important; }
.inf-meta p { margin: 0; }
.inf-datum { color: var(--inf-blauw); font-weight: 600; }
.inf-artikel-body { gap: 1.25em !important; align-items: flex-start !important; }
.inf-duim { flex: 0 0 150px; margin: 0 !important; }
.inf-uittreksel p { margin: 0 0 .75em; }
.inf-uittreksel .wp-block-post-excerpt__more-text { margin: 0; }
.inf-paginering { margin-top: 1.5em; font-size: .9em; }
.inf-paginering .page-numbers { background: #cfcfcf; color: #444; padding: 2px 8px; }
.inf-paginering .page-numbers.current { background: var(--inf-blauw); color: #fff; }
@media (max-width: 599px) { .inf-artikel-body { flex-wrap: wrap !important; } }

.inf-titel { font-size: 1.75em !important; color: #666; text-transform: uppercase; font-weight: 600; margin-bottom: .25em; }
.inf-bericht h3 { color: var(--inf-oranje); }
.inf-bericht h4 { font-weight: 300; }
.inf-terug { margin-top: 2em; }

/* Zijbalk */
.inf-widget { background: #f4f4f4; padding: 1em 1em 1.5em; margin: 0 0 1.5em !important; }
.inf-widget h3 { text-transform: uppercase; color: var(--inf-blauw); font-size: 1.5em; margin: 0 0 .5em; }
.inf-widget ul { list-style: none; margin: 0; padding: 0; }
.inf-widget li { margin: 0; }
.inf-widget p { margin: 0; }
.inf-secundair .wp-block-template-part { margin: 0; }

/* ===== Voet ===== */
.inf-voet { padding-top: 2em; padding-bottom: 3em; font-size: 1em; }
.inf-linkedin { gap: .6em !important; margin-bottom: 1.5em; }
.inf-linkedin .wp-block-social-links { margin: 0; gap: 0; }
.inf-linkedin .wp-social-link { font-size: 15px; }
.inf-linkedin .wp-social-link a { padding: .45em; }
.inf-linkedin .wp-social-link:hover { background-color: var(--inf-oranje) !important; transform: none; }
.inf-linkedin-tekst { margin: 0; }
.inf-linkedin-tekst a { color: var(--inf-blauw); }
.inf-linkedin-tekst a:hover { color: var(--inf-oranje); }
.inf-copy { margin: 0 0 .25em; }
.inf-copy .inf-sep { color: #ccc; margin: 0 .35em; }
.inf-credit, .inf-credit a { color: #ccc; font-size: .8em; margin: 0; }
.inf-credit a:hover { color: #999; }

/* ===== Formulieren (Contact Form 7) ===== */
.wpcf7 input:not([type=submit]), .wpcf7 textarea, .wpcf7 select { box-sizing: border-box; width: 100%; max-width: 640px; border: 1px solid #ccc; padding: 6px 8px; font: inherit; }
.wpcf7 textarea { height: 8em; }
.wpcf7 input[type=submit] { background: var(--inf-blauw); color: #fff; border: 0; border-radius: 4px; padding: 6px 12px; font: inherit; cursor: pointer; transition: background .2s; }
.wpcf7 input[type=submit]:hover { background: var(--inf-oranje); }
.wpcf7 p { margin: 0 0 1em; }
small { font-size: .85em; color: #888; }

/* Afbeeldingen rechts uitgelijnd in tekst */
.alignright { float: right; margin: 0 0 1em 1.5em; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
@media (max-width: 599px) { .alignright, .alignleft { float: none; margin: 0 0 1em; } }

@media print {
	.inf-top, .inf-footer, .inf-secundair { display: none; }
	.inf-main { border: 0; }
}
.inf-artikelen-intro { margin-bottom: 1em !important; }