/*
 * OMT Connector — opmaak voor pagina's die de groeimotor schrijft.
 * Laadt alleen op pagina's met .omt-artikel. De kleuren komen uit het thema van de klant:
 * de plug-in zet ze als variabelen in de <head>, dit blad gebruikt alleen die variabelen.
 * Alles wat hier staat is bewust terughoudend: het thema blijft leidend, wij vullen de
 * blokken op die WordPress zelf niet kent (feitenkaart, FAQ, citaat, auteur, CTA).
 */

/*
 * 0.6.2 — de accentkleur komt uit het thema zelf. Avada zet --awb-color5 op :root, Elementor
 * --e-global-color-primary, blokthema's --wp--preset--color--primary. Een CSS-variabele valt
 * vanzelf terug op de volgende in de rij als hij niet bestaat, dus dit werkt zonder dat de
 * plug-in hoeft te weten hoe het thema zijn opties bewaart. De plug-in zet --omt-accent alleen
 * als hij de kleur serverkant wél zeker weet; dan wint die.
 */
div.omt-artikel {
    /* 0.6.5: Enfold erbij (--enfold-main-color-primary) */
    --omt-thema: var(--awb-color5, var(--e-global-color-primary, var(--enfold-main-color-primary, var(--wp--preset--color--primary, var(--wp--preset--color--accent, #2563eb)))));
    --omt-kleur: var(--omt-accent, var(--omt-thema));
    --omt-zacht: color-mix(in srgb, var(--omt-kleur) 6%, transparent);
    --omt-zachter: color-mix(in srgb, var(--omt-kleur) 12%, transparent);
    /* 0.6.5: lijnen in de tekstkleur, zodat ze ook op een donker thema te zien zijn */
    --omt-lijn: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 1.02rem;
    line-height: 1.75;
}

div.omt-artikel > * + * { margin-top: 1.1em; }
div.omt-artikel h2 { margin-top: 2.2em; margin-bottom: .6em; line-height: 1.25; }
div.omt-artikel h3 { margin-top: 1.6em; margin-bottom: .4em; line-height: 1.3; }
/* 0.6.4: alinea's horen een witregel tussen zich te hebben, ook als het thema p op margin 0 zet
   en ook als de motor ze in een sectie nest */
div.omt-artikel p { margin: 0; }
div.omt-artikel p + p,
div.omt-artikel ul + p, div.omt-artikel ol + p, div.omt-artikel table + p, div.omt-artikel figure + p, div.omt-artikel blockquote + p,
div.omt-artikel p + ul, div.omt-artikel p + ol, div.omt-artikel p + table, div.omt-artikel p + blockquote, div.omt-artikel p + figure { margin-top: 1.1em; }
div.omt-artikel h2 + p, div.omt-artikel h3 + p { margin-top: .5em; }
div.omt-artikel li p + p { margin-top: .5em; }
div.omt-artikel img { max-width: 100%; height: auto; border-radius: var(--omt-radius, 12px); }
div.omt-artikel a { color: var(--omt-kleur); }

/* de regel met auteur, datum en leestijd onder de kop */
div.omt-artikel .kb-meta,
div.omt-artikel .meta {
    font-size: .86rem;
    opacity: .7;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-bottom: 1.6em;
}

/* de samenvatting in één zin */
div.omt-artikel .tldr {
    font-size: 1.14rem;
    line-height: 1.6;
    padding: .2em 0 .2em 1.1em;
    border-left: 3px solid var(--omt-kleur);
}
div.omt-artikel .tldr strong { font-weight: 600; }
div.omt-artikel .intro { font-size: 1.06rem; }

/* de kerngetallen als kaart in plaats van een kale opsomming */
div.omt-artikel ul.facts {
    list-style: none;
    margin: 1.6em 0 0;
    /* 0.7.2: de kaart zat te strak om de tekst — meer lucht binnen de rand en tussen de regels */
    padding: 1.4rem 1.6rem;
    background: var(--omt-zacht);
    border: 1px solid var(--omt-zachter);
    border-radius: var(--omt-radius, 12px);
    display: grid;
    gap: .8rem;
}
/* 0.7.2: veel thema's (Salient) zetten 'ul li{list-style-type:disc}' rechtstreeks op de li;
   die wint van de list-style:none op de ul, en dan kreeg de kaart alsnog bolletjes */
div.omt-artikel ul.facts li { margin: 0; padding: 0; line-height: 1.65; list-style: none; }
div.omt-artikel ul.facts li::marker { content: none; }
/* 0.8.5: alleen een kleur die de plug-in zelf heeft vastgesteld. Zonder dat valt dit terug op de
   tekstkleur van de site, niet op een variabele van het thema: die kan een lichte achtergrondkleur
   zijn (Elementor noemt zoiets soms 'primary') en dan stond hier wit op wit. */
div.omt-artikel ul.facts li strong { color: var(--omt-accent-donker, var(--omt-accent, currentColor)); }

/* 0.8.6: staat het artikel als eerste in de inhoud, dan plakt het tegen de kop van de site. De meeste
   thema's zetten daar zelf geen ruimte boven omdat hun eigen pagina's met een eigen sectie beginnen.
   Alleen als eerste kind, zodat een pagina waar al iets boven staat niet dubbele lucht krijgt. */
div.omt-artikel:first-child { margin-top: var(--omt-ruimte-boven, 3rem); }

/* gewone opsommingen blijven gewoon, maar met wat lucht */
div.omt-artikel ul:not(.facts),
div.omt-artikel ol { padding-left: 1.3em; }
div.omt-artikel li + li { margin-top: .35em; }

/* tabellen: de motor gebruikt ze voor vergelijkingen, dus die moeten leesbaar zijn */
div.omt-artikel table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.6em;
    font-size: .96rem;
}
div.omt-artikel thead th,
div.omt-artikel tr:first-child th {
    text-align: left;
    background: var(--omt-zachter);
    font-weight: 600;
}
div.omt-artikel th,
div.omt-artikel td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--omt-lijn, rgba(0, 0, 0, .1));
    vertical-align: top;
}
/* 0.7.0: de laatste rij houdt zijn lijn — thema's met een tabelrand (Enfold) lieten de tabel anders open eindigen */

/* veelgestelde vragen */
div.omt-artikel .faq { margin-top: 2.4em; }
div.omt-artikel .faq h2 { margin-top: 0; }
div.omt-artikel .faq h3 {
    margin-top: 0;
    font-size: 1.02rem;
    font-weight: 600;
}
div.omt-artikel .faq h3 + p { margin-top: .35em; }
div.omt-artikel .faq h3:not(:first-of-type) { margin-top: 1.4em; }
div.omt-artikel .faq > h3 {
    padding-top: 1.1em;
    border-top: 1px solid var(--omt-lijn, rgba(0, 0, 0, .1));
}
div.omt-artikel .faq > h3:first-of-type { border-top: none; padding-top: 0; }

/* een echt klantcitaat */
div.omt-artikel .kb-citaat,
div.omt-artikel blockquote {
    margin-top: 2em;
    padding: 1.2rem 1.4rem;
    background: var(--omt-zacht);
    border-radius: var(--omt-radius, 12px);
    border-left: 3px solid var(--omt-kleur);
    font-style: normal;
}
div.omt-artikel .kb-citaat p:first-child { font-size: 1.06rem; }
div.omt-artikel .kb-citaat cite,
div.omt-artikel .kb-citaat .bron {
    display: block;
    margin-top: .6em;
    font-size: .88rem;
    opacity: .75;
    font-style: normal;
}

/* wie het geschreven heeft */
div.omt-artikel .kb-auteur {
    margin-top: 2.4em;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--omt-lijn, rgba(0, 0, 0, .12));
    border-radius: var(--omt-radius, 12px);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    font-size: .94rem;
}
div.omt-artikel .kb-auteur img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
div.omt-artikel .kb-auteur strong { display: block; }
/* 0.6.3: de onderdelen van de auteurbox stonden aan elkaar geplakt ("Over de auteurViktor…") */
div.omt-artikel .kb-auteur .eyebrow {
    display: block;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: .25em;
}
div.omt-artikel .kb-auteur b { display: block; font-size: 1.02rem; }
div.omt-artikel .kb-auteur b a { color: inherit; text-decoration: none; }
div.omt-artikel .kb-auteur .kb-rol { display: block; opacity: .75; font-size: .9rem; margin-top: .1em; }
div.omt-artikel .kb-auteur p { margin-top: .6em; }
div.omt-artikel .kb-auteur .kb-avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--omt-zachter);
    color: var(--omt-kleur);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    overflow: hidden;
}
div.omt-artikel .kb-auteur .kb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* 0.9.8 — de profiel-link van de auteur (meestal LinkedIn) hoort naast zijn naam, niet als losse
   regel eronder. Alleen als het blok ook echt een naamregel en een profiel-link heeft, zodat een
   auteurblok zonder link onveranderd blijft. */
div.omt-artikel .kb-auteur > div:not(.kb-avatar):has(> .eyebrow):has(> a.kb-auteur-prof) {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .5rem;
    align-items: center;
}
div.omt-artikel .kb-auteur > div:not(.kb-avatar):has(> .eyebrow):has(> a.kb-auteur-prof) > * { grid-column: 1 / -1; }
div.omt-artikel .kb-auteur > div:not(.kb-avatar):has(> .eyebrow):has(> a.kb-auteur-prof) > .eyebrow { grid-area: 1 / 1 / 2 / -1; }
div.omt-artikel .kb-auteur > div:not(.kb-avatar):has(> .eyebrow):has(> a.kb-auteur-prof) > b { grid-area: 2 / 1 / 3 / 2; }
div.omt-artikel .kb-auteur > div:not(.kb-avatar):has(> .eyebrow):has(> a.kb-auteur-prof) > a.kb-auteur-prof { grid-area: 2 / 2 / 3 / 3; justify-self: start; }
div.omt-artikel .kb-auteur > div:not(.kb-avatar):has(> .eyebrow):has(> a.kb-auteur-prof) > .kb-rol { grid-area: 3 / 1 / 4 / -1; }
div.omt-artikel .kb-auteur a.kb-auteur-prof {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}
/* Heeft de site zelf een pictogramlettertype (Font Awesome), dan tonen we daaruit het teken van het
   netwerk in plaats van het woord. De plug-in tekent zelf geen logo na: hij gebruikt wat de site al
   in huis heeft. Vindt hij niets, dan blijft het woord gewoon staan. De class en de twee variabelen
   worden door het script in de voet gezet. */
html.omt-prof-logo div.omt-artikel a.kb-auteur-prof { font-size: 0; }
html.omt-prof-logo div.omt-artikel a.kb-auteur-prof::before {
    font-family: var(--omt-prof-font);
    content: var(--omt-prof-teken);
    font-size: 1.05rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}

/* de call-to-action: het hele punt van de pagina */
div.omt-artikel .kb-cta {
    margin-top: 2.6em;
    padding: 1.6rem 1.7rem;
    background: var(--omt-zacht);
    border: 1px solid var(--omt-zachter);
    border-radius: var(--omt-radius, 12px);
    text-align: left;
}
div.omt-artikel .kb-cta h2 {
    margin-top: 0;
    margin-bottom: .4em;
    font-size: 1.35rem;
}
div.omt-artikel .kb-cta p { margin-bottom: 0; }

div.omt-artikel .kb-knop,
div.omt-artikel a.kb-knop {
    display: inline-block;
    margin-top: 1.1em;
    padding: .85rem 1.6rem;
    /* 0.8.5: om dezelfde reden als hierboven geen themavariabele als knopvlak. Weet de plug-in de
       accentkleur, dan die; weet hij hem niet, dan een neutrale donkere knop die het altijd doet. */
    background: var(--omt-accent, #1f2937);
    color: var(--omt-accent-tekst, #fff);
    border-radius: var(--omt-knop-radius, 999px);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: filter .15s ease, transform .15s ease;
}
div.omt-artikel .kb-knop:hover,
div.omt-artikel a.kb-knop:hover {
    filter: brightness(.92);
    transform: translateY(-1px);
    color: var(--omt-accent-tekst, #fff);
}

/* de reviewbadge onder de knop */
div.omt-artikel .kb-badge {
    margin-top: 1em;
    font-size: .88rem;
    opacity: .8;
}

@media (max-width: 640px) {
    div.omt-artikel .kb-cta { padding: 1.3rem; }
    div.omt-artikel .kb-auteur { flex-direction: column; }
    div.omt-artikel table { display: block; overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
 * De hero: de kop van de pagina. Thema's tonen de paginatitel lang niet altijd,
 * dus de <h1> staat hier. Met een beeld wordt het twee kolommen, zonder beeld
 * één kolom met een rustig accentvlak erachter.
 * ------------------------------------------------------------------------- */

div.omt-artikel .omt-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    align-items: center;
    margin: 0 0 2.2em;
    padding: 2rem 2.1rem;
    background: var(--omt-zacht);
    border: 1px solid var(--omt-zachter);
    border-radius: var(--omt-radius, 12px);
}
div.omt-artikel .omt-hero:has(.omt-hero-beeld) { grid-template-columns: 1.15fr .85fr; }

div.omt-artikel .omt-hero h1 {
    margin: 0 0 .45em;
    font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.5rem);
    line-height: 1.15;
}
div.omt-artikel .omt-hero-lead {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.6;
    opacity: .9;
}
div.omt-artikel .omt-hero .kb-knop { margin-top: 1.3em; }
div.omt-artikel .omt-hero-beeld { margin: 0; }
div.omt-artikel .omt-hero-beeld img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--omt-radius, 12px);
}

/*
 * 0.9.1 — staat de titel al in de hero van het artikel, dan tonen we die van het thema niet meer.
 *
 * Tot nu toe maakten we onze eigen kop in dat geval alleen kleiner. Daardoor stond dezelfde zin twee
 * keer op de pagina: een keer als paginatitel van het thema en een keer als kop van het artikel. Dat
 * leest niet, en voor Google zijn het twee <h1>'en op een pagina. Op een site met een kopbalk die
 * over de inhoud heen ligt kwam de titel van het thema bovendien dwars door het logo te staan.
 *
 * We verbergen alleen de titel zelf, en de omlijsting eromheen uitsluitend als die verder leeg is —
 * zo blijft een titelbalk met een achtergrondbeeld of een kruimelpad gewoon staan.
 * Terugdraaien voor één site: zet in assets/sites/<domein>.css de regel
 *   h1.entry-title { display: revert !important; }
 */
body:has(div.omt-artikel .omt-hero h1) .fusion-page-title-bar h1,
body:has(div.omt-artikel .omt-hero h1) h1.entry-title,
body:has(div.omt-artikel .omt-hero h1) .page-title h1,
body:has(div.omt-artikel .omt-hero h1) h1.page-title,
body:has(div.omt-artikel .omt-hero h1) h1.wp-block-post-title {
    display: none;
}
body:has(div.omt-artikel .omt-hero h1) .page-header:has(> h1.entry-title:only-child),
body:has(div.omt-artikel .omt-hero h1) .entry-header:has(> h1.entry-title:only-child) {
    display: none;
}

/*
 * 0.9.1 — ligt de kopbalk van de site over de pagina heen, dan meet de plug-in hoe ver die naar
 * beneden komt en houdt hij dat stuk vrij boven het artikel. De lucht die het stijlblad zelf boven
 * het artikel zet mag er dan niet nog eens bovenop komen; die was immers bedoeld om diezelfde balk
 * te ontwijken.
 *
 * 0.9.2 — de gemeten onderkant van die balk staat ook als --omt-kop-onder op <html>, zodat een
 * stijlblad per site er iets mee kan doen. Bij een doorzichtige kop met witte letters bijvoorbeeld
 * een band in precies die hoogte, anders valt het menu weg op een lichte pagina.
 */
html.omt-kop-gemeten div.omt-artikel {
    --omt-ruimte-boven: 1.5rem;
}

@media (max-width: 720px) {
    div.omt-artikel .omt-hero,
    div.omt-artikel .omt-hero:has(.omt-hero-beeld) {
        grid-template-columns: 1fr;
        padding: 1.5rem 1.4rem;
    }
    div.omt-artikel .omt-hero-beeld { order: -1; }
    div.omt-artikel .omt-hero-beeld img { max-height: 200px; }
}

/* ---------------------------------------------------------------------------
 * 0.6.6 — kolommen met een beeld uit de beeldbank van de site (instelling 'beeldbank' in de hub:
 * één url per regel). De motor zet dan per tussenkop de tekst naast een foto, om en om links en
 * rechts. Zonder beeldbank verandert er niets. De vorm van het beeld bepaalt het stijlblad van de
 * site (--omt-boog-radius); standaard zachte hoeken.
 * ------------------------------------------------------------------------- */
div.omt-artikel .omt-kolommen {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 2.4rem;
    align-items: center;
    margin: 2.2em 0;
}
div.omt-artikel .omt-kolommen-links { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
div.omt-artikel .omt-kolommen-links .omt-boog { order: -1; }
div.omt-artikel .omt-kolommen > .omt-kolommen-tekst > :first-child { margin-top: 0; }
div.omt-artikel .omt-kolommen h2 { margin-top: 0; }
div.omt-artikel .omt-boog { margin: 0; }
div.omt-artikel .omt-boog img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--omt-boog-radius, 16px);
}
@media (max-width: 720px) {
    div.omt-artikel .omt-kolommen, div.omt-artikel .omt-kolommen-links { grid-template-columns: 1fr; gap: 1.2rem; }
    div.omt-artikel .omt-kolommen-links .omt-boog { order: 0; }
    div.omt-artikel .omt-boog { max-width: 260px; margin: 0 auto; }
}

/* de vaste voet van de site (instelling 'voet_html': eigen blokken of shortcodes van het thema) staat
   buiten de wrapper, zodat het thema hem zelf opmaakt; alleen wat lucht erboven */
.omt-voet { margin-top: 3em; }
/* 0.7.0: het vaste blok hoog in de tekst (instelling 'tussen_html') staat vóór de tweede tussenkop, binnen de
   wrapper — op de breedte van de tekst, met lucht eromheen */
div.omt-artikel .omt-tussen { margin: 1.6em 0 2.4em; }
div.omt-artikel .omt-tussen h2 { margin-top: 0; }

/*
 * 0.8.1 — het blok dat ONDER een bestaande pagina hangt (meta omt_blok). Zulke pagina's zijn
 * meestal met een paginabouwer gemaakt: de tekst staat daar in eigen containers en de
 * .entry-content eromheen is zo breed als het scherm. Zonder deze regels zou het blok van
 * schermrand tot schermrand lopen. Dus: een eigen leesbreedte, gecentreerd, lucht erboven en
 * een dunne scheidingslijn tussen de bestaande pagina en het blok.
 * Lettertype: een paginabouwer zet fonts per onderdeel, dus er is niets om van te erven. Een
 * site-stijlblad (assets/sites/<domein>.css) kan --omt-font en --omt-font-kop zetten; staat dat
 * er niet, dan blijft het thema leidend.
 *
 * 0.8.3 — twee klassen in de kiezer en !important op breedte, marge en ruimte. Dat is hier geen
 * luiheid: het blok komt in de container van de paginabouwer te staan, en die zet marges en
 * padding op alles wat erin zit met een sterkere kiezer dan de onze. Zonder dit plakt het blok
 * tegen de linkerrand. De maten zelf staan in variabelen, zodat een site-stijlblad en de
 * telefoonmaat ze gewoon kunnen overschrijven zonder ook !important nodig te hebben.
 */
div.omt-blok.omt-artikel {
    box-sizing: border-box;
    max-width: var(--omt-blok-breedte, 1140px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--omt-blok-boven, 2.6em) var(--omt-blok-marge, 24px) var(--omt-blok-onder, 3em) !important;
    border-top: 1px solid var(--omt-lijn, rgba(127, 127, 127, .25));
    font-family: var(--omt-font, inherit);
}
div.omt-blok h2, div.omt-blok h3, div.omt-blok h4 { font-family: var(--omt-font-kop, var(--omt-font, inherit)); }
div.omt-blok > :first-child { margin-top: 0; }
@media (max-width: 782px) {
    div.omt-blok.omt-artikel { --omt-blok-marge: 16px; --omt-blok-boven: 2em; --omt-blok-onder: 2.4em; }
}

/*
 * 0.8.4 — meer lucht in het blok. Een blok is een rij vraag-en-antwoord achter elkaar; met de
 * krappe regelafstand van een paginabouwer wordt dat een muur tekst. Dus: ruimere regelafstand
 * binnen een alinea, een witregel tussen alinea's en echte lucht boven een tussenkop.
 * Weer !important, om dezelfde reden als hierboven: de paginabouwer zet marges op nul op alles
 * wat in zijn container staat. De maten zelf zijn variabelen, dus per site bij te stellen.
 */
div.omt-blok p, div.omt-blok li { line-height: var(--omt-blok-regel, 1.85); }
div.omt-blok.omt-artikel p + p,
div.omt-blok.omt-artikel ul + p, div.omt-blok.omt-artikel ol + p,
div.omt-blok.omt-artikel p + ul, div.omt-blok.omt-artikel p + ol { margin-top: var(--omt-blok-alinea, 1.55em) !important; }
div.omt-blok.omt-artikel h2 { margin-top: var(--omt-blok-kop, 2.5em) !important; }
div.omt-blok.omt-artikel h3 { margin-top: var(--omt-blok-subkop, 2.2em) !important; }
div.omt-blok.omt-artikel h2 + p, div.omt-blok.omt-artikel h3 + p { margin-top: .8em !important; }
div.omt-blok.omt-artikel li + li { margin-top: .6em !important; }
div.omt-blok.omt-artikel > :first-child { margin-top: 0 !important; }