/**
 * Autonomous SEO Assistant — leesbare weergave van gegenereerde artikelen.
 *
 * Deze stijl laadt UITSLUITEND op een door de plugin geschreven artikel
 * (post-meta _asa_article) dat NIET met een paginabouwer is opgebouwd. De inhoud
 * zelf blijft ongewijzigd in de database; deze laag zorgt enkel voor leesbaarheid.
 *
 * Uitgangspunt (zoals gevraagd): de KOPPEN nemen de globale typografie van de site
 * over. Concreet:
 *   - LETTERTYPE + DIKTE: koppen erven het globale kop-lettertype. Op een
 *     Elementor-site staat dat als tag-regel/variabele op de <body>
 *     (.elementor-kit-*), en die wint hier bewust: de `:where()`-regel heeft
 *     specificiteit 0,0,1, dus een globale regel als
 *     `.elementor-kit-6 h2 { font-family:Montserrat }` (0,1,1) overschrijft haar.
 *     Zo blijft jouw h2 in Montserrat en de rest in de globale primaire kopletter.
 *     Is er geen globale instelling (site zonder Elementor), dan geldt de nette
 *     fallback-systeemstack — "zelf logisch gegenereerd".
 *   - GROOTTE: in de artikelcontext gebruiken we een RESPONSIEVE schaal (clamp)
 *     i.p.v. een vaste globale hero-maat (bv. 40px), want een vaste px-maat loopt
 *     op smalle schermen/kolommen over de rand. De dubbele klasse
 *     (`.asa-article.asa-article`) tilt de specificiteit boven een kit-regel, zodat
 *     dit betrouwbaar wint — ongeacht laadvolgorde.
 *
 * Witruimte, meetbreedte en kleur legt de globale typografie niet vast; die kiezen
 * we hier zelf, op leesbaarheid en contrast.
 */

.asa-article {
	/* Kop- en tekst-lettertype uit de globale instellingen, met een logische
	   fallback-stack. var(--globaal, "Eerste fallback") + de rest van de stack
	   levert altijd een geldige font-family op, mét of zonder Elementor. */
	--asa-font-text: var( --e-global-typography-text-font-family, "Segoe UI" ), system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--asa-font-head: var( --e-global-typography-primary-font-family, "Segoe UI" ), system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--asa-weight-head: var( --e-global-typography-primary-font-weight, 700 );

	--asa-ink: #26313b;
	--asa-ink-head: #17212b;
	/* Kopkleuren, -groottes en -diktes uit de plugininstellingen komen als losse
	   inline-regels bovenop deze stylesheet (ArticlePresenter::inline_css) en
	   ALLEEN wanneer er iets is ingevuld. Een leeg veld laat hier bewust geen
	   enkele regel achter, zodat de site/kit écht zelf bepaalt. */
	/* Accentkleur voor citaatranden, FAQ-hover en de inhoudstabel. BEWUST een
	   eigen, gegarandeerd leesbare inkt en NIET de globale accentkleur van de
	   paginabouwer: die is in veel kits wit (bedoeld voor tekst op een gekleurde
	   sectie), wat hier onzichtbare randen, hover-teksten en focusringen oplevert.
	   Stelt de beheerder een linkkleur in, dan wordt dát de accentkleur. */
	--asa-link: #1c6cc0;
	--asa-rule: #e3e8ee;
	--asa-measure: 46rem;

	max-width: var( --asa-measure );
	margin-inline: auto;
	padding-inline: clamp( 1rem, 4vw, 1.25rem );
	box-sizing: border-box;

	color: var( --asa-ink );
	font-family: var( --asa-font-text );
	font-size: clamp( 1.0625rem, 1.01rem + 0.28vw, 1.1875rem );
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

/* Template-route: de [asa_article]-shortcode zet de artikeltekst in
   .asa-article-content BINNEN een Elementor-template. Daar bepaalt de template de
   breedte, het lettertype en de kleur; wij voegen hier alleen het ontbrekende
   leesritme toe (witruimte + regelhoogte), zodat de globale opmaak van de template
   intact blijft. De witruimte-regels hieronder gelden voor beide routes. */
.asa-article-content {
	--asa-link: #1c6cc0;
	line-height: 1.75;
	overflow-wrap: break-word;
}

/* Alles blijft binnen de leeskolom. */
.asa-article :where( img, table, iframe, video, pre ) {
	max-width: 100%;
	height: auto;
}

/* Ritme (beide routes): eerste element sluit strak onder de paginatitel aan,
   laatste laat geen dode ruimte na. */
.asa-article > :first-child,
.asa-article-content > :first-child {
	margin-top: 0;
}

.asa-article > :last-child,
.asa-article-content > :last-child {
	margin-bottom: 0;
}

.asa-article p,
.asa-article-content p {
	margin: 0 0 1.25em;
}

/* Witruimte rond de koppen — de kern van "meer witruimte / leesbaarder": ruim
   VÓÓR een titel, strak op de tekst eronder. (Marges klappen samen, dus de kop-
   bovenmarge bepaalt de tussenruimte na een alinea.) */
.asa-article h2,
.asa-article-content h2 {
	margin: 2.9rem 0 0.7rem;
	/* Extra ademruimte bóven elke H2 (op verzoek): 30px padding bovenaan, naast de
	   bestaande bovenmarge. Padding verhindert bewust het samenvallen van marges,
	   zodat de 30px altijd zichtbaar is. */
	padding-top: 30px;
}

.asa-article h3,
.asa-article-content h3 {
	margin: 2.3rem 0 0.5rem;
}

.asa-article h4,
.asa-article-content h4 {
	margin: 1.85rem 0 0.4rem;
}

/* Kop-LETTERTYPE/-DIKTE/-regelhoogte als fallback (0,0,1): een globale kit-regel
   (0,1,1) wint hiervan en blijft dus leidend. Ontbreekt ze, dan geldt de globale
   primaire kopletter, en anders de systeemstack. */
:where( .asa-article ) h2,
:where( .asa-article ) h3,
:where( .asa-article ) h4 {
	font-family: var( --asa-font-head );
	font-weight: var( --asa-weight-head );
	line-height: 1.25;
	color: var( --asa-ink-head );
}

/* Kop-GROOTTE: responsief en leesbaar in de artikelcontext. De dubbele klasse
   (0,2,1) overschrijft ook een vaste globale grootte (bv. kit h2 = 40px), zodat
   koppen op mobiel niet over de rand lopen. Het lettertype blijft dat van de
   globale instelling (hierboven bewust niet overschreven). */
.asa-article.asa-article h2,
.asa-article.asa-article h3,
.asa-article.asa-article h4 {
	overflow-wrap: break-word;
}

/* Kop-KLEUR: hier staat bewust GEEN regel. Een altijd-aanwezige regel met een
   `inherit`-terugval zou op 0,2,1 alsnog winnen van een kit-/themaregel die de
   kop zelf target (0,1,1) — en dan bepaalt de site het dus níet meer, ook met
   een lege instelling. Ingestelde kleuren komen als directe inline-regels uit
   ArticlePresenter::inline_css(), uitsluitend wanneer er iets is ingevuld. */

.asa-article.asa-article h2 {
	font-size: clamp( 1.55rem, 1.25rem + 1.35vw, 2.05rem );
}

.asa-article.asa-article h3 {
	font-size: clamp( 1.2rem, 1.1rem + 0.5vw, 1.4rem );
}

.asa-article.asa-article h4 {
	font-size: 1.1rem;
}

/* Lijsten (beide routes). */
.asa-article ul,
.asa-article ol,
.asa-article-content ul,
.asa-article-content ol {
	margin: 0 0 1.35em;
	padding-left: 1.45em;
}

.asa-article li,
.asa-article-content li {
	margin: 0 0 0.5em;
}

.asa-article li > ul,
.asa-article li > ol,
.asa-article-content li > ul,
.asa-article-content li > ol {
	margin: 0.5em 0 0;
}

/* Citaten (beide routes). De muted tekstkleur zetten we alleen op de kale route,
   zodat we de kleurstelling van een template niet overschrijven. */
.asa-article blockquote,
.asa-article-content blockquote {
	margin: 1.7em 0;
	padding: 0.3em 0 0.3em 1.1em;
	border-left: 3px solid var( --asa-link );
	font-style: italic;
}

.asa-article blockquote {
	color: #47535f;
}

.asa-article blockquote p:last-child,
.asa-article-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Nadruk. */
.asa-article strong,
.asa-article b {
	font-weight: 600;
	color: var( --asa-ink-head );
}

/* De KLEUR van een link staat hier bewust NIET: die bepaalt de site, tenzij de
   beheerder er een instelt (dan komt er een inline-regel bovenop). Een vaste
   kleur hier zou de linkkleur van elk thema overschrijven — en toen die aan de
   accentkleur van de kit hing, leverde dat op sites met een witte accentkleur
   letterlijk onzichtbare links op.

   ONDERSTREPING op beide routes. Een interne link hoort als link herkenbaar te
   zijn, ook binnen een Elementor-template die links doorgaans kaal laat. De
   dubbele klasse (0,2,1) wint daarom bewust van de opmaak van de template; wie
   dat niet wil, zet de onderstreping uit in de instellingen (dan komt er een
   inline-regel bovenop). De inhoudstabel is uitgezonderd: die heeft zijn eigen,
   rustiger linkstijl. Alleen de DECORATIE staat hier — de kleur blijft van de
   site, tenzij ze in de instellingen is gezet. */
.asa-article.asa-article a:not( .asa-toc__link ),
.asa-article-content.asa-article-content a:not( .asa-toc__link ) {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Hover en toetsenbordfocus MOETEN zichtbaar zijn, ook wanneer de onderstreping
   is uitgezet (die inline-regel is 0,3,1; deze is 0,4,1 en wint dus) en ook
   wanneer er een vaste linkkleur is ingesteld die de kleurwissel van het thema
   overschrijft. Daarom wordt de lijn hier onvoorwaardelijk teruggezet. */
.asa-article.asa-article a:not( .asa-toc__link ):hover,
.asa-article.asa-article a:not( .asa-toc__link ):focus-visible,
.asa-article-content.asa-article-content a:not( .asa-toc__link ):hover,
.asa-article-content.asa-article-content a:not( .asa-toc__link ):focus-visible {
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Inhoudstabel — [asa_toc]
   ==========================================================================

   De lijst wordt bij het renderen uit de koppen van het artikel opgebouwd; de
   ankers (`id`) komen uit dezelfde HeadingAnchors-klasse, dus een link komt
   altijd op een bestaande kop uit.

   Twee dingen die je hier wilt kunnen bijstellen op een concrete site:
     --asa-anchor-offset  hoeveel ruimte er boven een aangesprongen kop blijft.
                          Heeft de site een VASTE (sticky) header, dan moet dit
                          minstens de hoogte daarvan zijn, anders verdwijnt de kop
                          eronder zodra je op een link in de lijst klikt.
                          De standaardwaarde is bewust royaal (104–128px, mee-
                          schalend met de vensterbreedte) omdat een vaste header
                          op Elementor-sites eerder regel dan uitzondering is en
                          hij breder meestal hoger wordt. Te ruim kost alleen wat
                          witruimte; te krap verbergt de kop. Heeft de site géén
                          vaste header, zet hem dan lager met één regel:
                            .asa-article-content { --asa-anchor-offset: 2rem; }
     --asa-toc-*          kleuren van de kaart.
*/

.asa-toc {
	/* Volgt de accentkleur van het artikel (en dus de ingestelde linkkleur). */
	--asa-toc-accent: var( --asa-link, #1c6cc0 );
	--asa-toc-surface: #f6f8fa;
	--asa-toc-border: #e3e8ee;
	--asa-toc-ink: #26313b;

	box-sizing: border-box;
	margin: 0 0 2rem;
	padding: 1.15rem 1.4rem 1.25rem;
	border: 1px solid var( --asa-toc-border );
	border-left: 3px solid var( --asa-toc-accent );
	border-radius: 6px;
	background: var( --asa-toc-surface );
	color: var( --asa-toc-ink );
	font-family: var( --asa-font-text, inherit );
	line-height: 1.55;
}

/* Het kopje staat standaard in een <p> (zie de shortcode): een inhoudstabel hoort
   niet in de koppenstructuur van het artikel, anders telt hij mee als hoofdstuk.
   Hij ziet er wél uit als een kopje. */
.asa-toc__title {
	margin: 0 0 0.6rem;
	font-family: var( --asa-font-head, inherit );
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5b6875;
}

.asa-toc__list {
	margin: 0;
	padding-left: 1.35em;
}

.asa-toc__list li {
	margin: 0 0 0.35em;
}

.asa-toc__list li:last-child {
	margin-bottom: 0;
}

.asa-toc__list li::marker {
	color: #8a97a4;
	font-variant-numeric: tabular-nums;
}

/* Diepere koppen (levels="2,3") springen in. Depth 0 is het hoogste getoonde
   niveau, dus dit werkt ook als de lijst met h3's begint. */
.asa-toc__item--depth-1 {
	margin-left: 1.1em;
}

.asa-toc__item--depth-2 {
	margin-left: 2.2em;
}

.asa-toc__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.asa-toc__link:hover,
.asa-toc__link:focus-visible {
	color: var( --asa-toc-accent );
	border-bottom-color: currentColor;
}

.asa-toc__link:focus-visible {
	outline: 2px solid var( --asa-toc-accent );
	outline-offset: 3px;
	border-radius: 2px;
}

/* Aangesproken koppen niet tegen (of onder) de bovenrand laten plakken. Geldt
   voor beide weergaveroutes. De FAQ-items horen erbij: FaqAccordion verhuist het
   anker-id van de vraag-H3 naar het <details>-element, en zonder offset zou een
   TOC-klik naar een FAQ-vraag onder een vaste header verdwijnen. */
.asa-article :where( h2, h3, h4, h5, h6 )[id],
.asa-article-content :where( h2, h3, h4, h5, h6 )[id],
.asa-article .asa-faq__item[id],
.asa-article-content .asa-faq__item[id] {
	scroll-margin-top: var( --asa-anchor-offset, clamp( 6.5rem, 5.5rem + 2vw, 8rem ) );
}

/* Zacht scrollen, maar alleen op een pagina die daadwerkelijk een inhoudstabel
   heeft — een artikelstylesheet hoort het scrollgedrag van de hele site niet
   ongevraagd te veranderen. */
@media ( prefers-reduced-motion: no-preference ) {
	html:has( .asa-toc ) {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   Veelgestelde vragen — uitklap-items (FaqAccordion)
   ==========================================================================

   De FAQ-sectie wordt bij het renderen omgezet naar een reeks native
   `<details>`-elementen: elke vraag is een eigen dropdown die open/dicht klikt,
   werkt zónder JavaScript en is toetsenbord- en schermlezer-toegankelijk. Geldt
   voor beide weergaveroutes (`.asa-article` en `.asa-article-content`). */
.asa-faq {
	margin: 1.4rem 0 0;
	border-top: 1px solid var( --asa-rule, #e3e8ee );
}

.asa-faq__item {
	border-bottom: 1px solid var( --asa-rule, #e3e8ee );
}

/* De vraag: klikbare regel met eigen +/- marker i.p.v. het standaard-driehoekje. */
.asa-faq__q {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 1rem 2.25rem 1rem 0;
	margin: 0;
	font-family: var( --asa-font-head, inherit );
	font-weight: 600;
	line-height: 1.35;
	/* Neutraal: de site bepaalt. De vraag is een bron-H3, dus de ingestelde
	   H3-kleur/-grootte/-dikte komt er via de inline-regels van
	   ArticlePresenter::inline_css() bovenop (die targeten .asa-faq__q mee). */
	color: inherit;
	transition: color 0.15s ease;
}

/* Standaard-marker weg (Safari/oud Chrome + de moderne list-style). */
.asa-faq__q::-webkit-details-marker {
	display: none;
}

/* Chevron rechts; draait van omlaag (dicht) naar omhoog (open). */
.asa-faq__q::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: -0.42rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
}

.asa-faq__item[open] .asa-faq__q::after {
	transform: rotate( -135deg );
	margin-top: -0.18rem;
}

/* Hoge specificiteit (0,4,0): de hover/focus-kleur moet ook winnen van de
   inline-kleurregel uit de instellingen (0,3,0), anders verliest de FAQ zijn
   zichtbare hover-feedback zodra er een H3-kleur is ingesteld. */
.asa-article .asa-faq__item > .asa-faq__q:hover,
.asa-article .asa-faq__item > .asa-faq__q:focus-visible,
.asa-article-content .asa-faq__item > .asa-faq__q:hover,
.asa-article-content .asa-faq__item > .asa-faq__q:focus-visible {
	color: var( --asa-link );
}

.asa-faq__q:focus-visible {
	outline: 2px solid var( --asa-link );
	outline-offset: 3px;
	border-radius: 2px;
}

/* Het antwoord: strak onder de vraag, geen dode ruimte aan de randen. */
.asa-faq__a {
	padding: 0 0 1.1rem;
}

.asa-faq__a > :first-child {
	margin-top: 0;
}

.asa-faq__a > :last-child {
	margin-bottom: 0;
}