/*
 * Art and Soul: paginacompositie per template
 * Combineert de componenten uit components.css tot de ontworpen pagina's.
 * Alleen compositie (afstanden, kolommen, achtergronden); componentstijlen
 * horen in components.css.
 */

/* =====================================================================
   Home: hero-slider (Figma 69:691)
   Slider-plugin "WP Responsive Recent Post Slider", design-4 (aangepaste
   template in de plugin). Markup per slide: .as-slide > .as-slide__media +
   .as-slide__body. Slick plaatst .slick-prev/.slick-next als <span>.
   ===================================================================== */

/* =====================================================================
   Algemeen voor herbouwde templates (main.as-main)
   Nieuwe secties hebben hun eigen gutter (.as-container); de legacy padding
   op #site-content (1.5em) is daar niet nodig.
   ===================================================================== */

.page-template-template-home #site-content,
#site-content.as-main {
	padding: 0;
}

/* Paginakop start 22px onder de nav (Figma: 148 - 126) */
.as-main > .as-page-head:first-child {
	margin-top: 22px;
}

/* =====================================================================
   Listingpagina's (Nu bij 69:2170, Online bij 69:920): rijen onder de
   paginakop, --as-footer-gap (100px) tot de footer; meerdere secties onder elkaar.
   ===================================================================== */

.as-listing {
	margin-bottom: var(--as-footer-gap);
}

.as-listing + .as-listing {
	margin-top: calc(var(--as-section-y) - var(--as-footer-gap));
}

.as-listing .as-section-head {
	margin-bottom: var(--as-space-7);
}

/* Gridpagina's (Voorbij 69:2350, Agenda 69:1168): grid direct onder de
   paginakop of onder de uitgelichte afbeelding (64px, Figma 62) */
.as-hero--listing {
	margin-bottom: var(--as-space-8);
}

.as-hero--listing .as-hero__media img {
	width: 100%;
	height: 100%;
}

/* =====================================================================
   Prose: Gutenberg-inhoud uit de editor (Figma 69:1379 body, 69:1666
   Word vriend): kop 56 roze + 24 naar tekst (components.css), alinea's 16
   uit elkaar, blokken/figuren 64 uit elkaar.
   Entry: prose binnen de container met kolommen (gap 40).
   ===================================================================== */

.as-entry {
	margin: var(--as-space-5) auto var(--as-footer-gap); /* kop eindigt 372, inhoud 396 (Figma 395) */
}

/* .as-main-prefix: wint van Twenty Twenty's .wp-block-*:not(.alignwide):not(.alignfull) (3rem) */
.as-main .as-entry > :first-child {
	margin-top: 0;
}

.as-main .as-entry > :last-child {
	margin-bottom: 0;
}

/* Twenty Twenty beperkt .entry-content > * tot 58rem (580px) en centreert het;
   hier bepaalt de kolom (1061 in het ontwerp) de breedte. Zelfde selector-
   keten als TT zodat de specificiteit wint; align-varianten vullen de kolom. */
.as-prose.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
.as-prose.entry-content [class*="inner-container"] > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
.as-prose.entry-content > .alignwide,
.as-prose.entry-content > .alignfull {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

.as-prose p {
	margin: 0 0 var(--as-space-4);
}

.as-prose p:empty {
	display: none;
}

.as-prose h2:not(:first-child),
.as-prose h3:not(:first-child) {
	margin-top: var(--as-space-8);
}

.as-main .as-entry .wp-block-columns {
	gap: var(--as-space-7);
	margin: 0;
}

.as-main .as-entry .wp-block-columns + .wp-block-columns {
	margin-top: var(--as-space-8);
}

/* Lege kolommenblokken uit de editor (alleen lege alinea's) niet tonen */
.as-entry .wp-block-columns:not(:has(p:not(:empty), h1, h2, h3, h4, ul, ol, figure, form, iframe, img, .wp-block-group)) {
	display: none;
}

.as-entry .wp-block-column {
	min-width: 0;
}

.as-main .as-entry .wp-block-column > :last-child {
	margin-bottom: 0;
}

.as-main .as-entry .wp-block-column > :first-child {
	margin-top: 0;
}

.as-main .as-prose .wp-block-image,
.as-main .as-prose figure {
	margin: var(--as-space-8) 0;
}

.as-main .as-prose > :last-child {
	margin-bottom: 0;
}

/* Donatiepagina's: ontwerp is 672/672 (gap 40); editor-breedtes (66/33)
   worden hier genegeerd zodat het formulier de volle kolom krijgt. */
@media (min-width: 782px) {
	.as-entry--donate .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

/* Formulier na tekst in dezelfde kolom: zelfde ritme als tussen velden */
.as-entry :is(p, h2, h3) + .pt-checkout-form,
.as-entry :is(p, h2, h3) + .wpcf7 {
	margin-top: var(--as-space-7);
}

/* Externe webform (xapti) in een iframe: inhoud is niet te stylen vanuit het thema */
.as-entry #webformframe {
	display: block;
	width: 100%;
	height: 1200px;
	border: 0;
}

.as-home-hero {
	padding-top: 86px; /* Figma: slider op 212, nav 126 hoog */
	margin-bottom: 53px; /* + 40px padding van de kaartenrij = 93px */
}

/* Gutter op de wrapper: de plugin zet padding:0 !important op slides. */
.as-home-hero .wppsac-wrap,
.as-home-hero .wppsac-slick-slider-wrp {
	position: relative;
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: 0 var(--as-gutter);
}

/* Slick zet .slick-slide direct op .as-slide (display:block, float:left);
   flex op de track geeft gelijke hoogte, flex op de slide de twee kolommen. */
.as-home-hero .wppsac-post-slider.design-4 .slick-track {
	display: flex;
}

.as-home-hero .wppsac-post-slider.design-4 .slick-slide.as-slide {
	display: flex;
	float: none;
	height: auto;
}

.as-slide {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--as-gutter);
	min-height: var(--as-hero-image-h);
}

.as-slide__media {
	flex: 694 1 0;
	max-width: var(--as-hero-image-w);
	height: var(--as-hero-image-h);
}

.as-slide__media img {
	border-radius: 0;
	box-shadow: none;
}

.as-slide__body {
	display: flex;
	flex: 662 1 0;
	flex-direction: column;
	gap: var(--as-space-5);
	min-width: 0;
}

.as-slide__heading {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-2);
}

.as-slide__kicker {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-home-hero .wppsac-post-slider.design-4 h2.as-slide__title {
	margin: 0 !important; /* plugin: margin 5px 0 !important */
	color: var(--as-fg);
	font-family: var(--as-font);
	font-size: var(--as-text-display-xl-size);
	line-height: var(--as-text-display-xl-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-display-xl-tracking);
	text-transform: none;
	overflow-wrap: anywhere;
}

.as-home-hero .wppsac-post-slider.design-4 .as-slide__title a {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}

.as-home-hero .wppsac-post-slider.design-4 .as-slide__title a:hover,
.as-home-hero .wppsac-post-slider.design-4 .as-slide__title a:focus {
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 6px;
}

.as-slide__meta {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-bold-line);
	font-weight: var(--as-weight-bold);
}

/* Pijlen (Figma 69:699/69:701): roze cirkel 40px op x 28 / 1412, verticaal
   gecentreerd op de afbeelding. Plugin-CSS gebruikt !important op left/right. */
.as-home-hero .wppsac-post-slider.design-4 .slick-arrow {
	top: calc(var(--as-hero-image-h) / 2) !important;
	bottom: auto !important;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--as-slider-arrow);
	height: var(--as-slider-arrow);
	margin: 0;
	padding: 0;
	background: var(--as-accent);
	color: var(--as-fg);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--as-transition), color var(--as-transition), box-shadow var(--as-transition);
}

.as-home-hero .wppsac-post-slider.design-4 .slick-prev {
	left: 0 !important;
	right: auto !important;
}

.as-home-hero .wppsac-post-slider.design-4 .slick-next {
	right: 0 !important;
	left: auto !important;
}

.as-home-hero .wppsac-post-slider.design-4 .slick-arrow svg {
	display: none;
}

.as-home-hero .wppsac-post-slider.design-4 .slick-arrow::before {
	content: "";
	display: block;
	width: var(--as-slider-arrow);
	height: var(--as-slider-arrow);
	background: currentColor;
	-webkit-mask: url("../img/icon-chevron.svg") center / contain no-repeat;
	mask: url("../img/icon-chevron.svg") center / contain no-repeat;
}

.as-home-hero .wppsac-post-slider.design-4 .slick-next::before {
	transform: rotate(180deg);
}

.as-home-hero .wppsac-post-slider.design-4 .slick-arrow:hover,
.as-home-hero .wppsac-post-slider.design-4 .slick-arrow:focus {
	background: var(--as-fg);
	color: var(--as-on-dark-accent);
}

/* Plugin zet outline:none !important; focus zichtbaar maken via box-shadow */
.as-home-hero .wppsac-post-slider.design-4 .slick-arrow:focus-visible {
	box-shadow: 0 0 0 3px var(--as-bg), 0 0 0 5px var(--as-fg);
}

/* =====================================================================
   Home: kaartenrij + zijkolom (Figma 69:710)
   3 kaarten van 338.3px en een zijkolom van 273px, gap 32, padding 40/28
   ===================================================================== */

.as-home-cards {
	display: flex;
	align-items: flex-start;
	gap: var(--as-space-6);
	padding-top: var(--as-space-7);
	padding-bottom: var(--as-space-7);
}

.as-home-cards > .as-card {
	flex: 338.3 1 0;
	min-width: 0;
}

.as-home-aside {
	display: flex;
	flex: 273.1 1 0;
	flex-direction: column;
	gap: var(--as-space-6);
	min-width: 0;
}

.as-aside-block--home .as-aside-block__label {
	font-weight: var(--as-weight-bold);
}

.as-aside-block--home .as-link {
	color: var(--as-fg);
	font-weight: var(--as-weight-regular);
	line-height: var(--as-text-body-line);
}

.as-aside-block--home .as-link:hover,
.as-aside-block--home .as-link:focus {
	color: var(--as-fg);
}

/* =====================================================================
   Home: introband (Figma 69:703): lime, padding 80/28, titel 56 paars,
   tekst 18 max 990px, link
   ===================================================================== */

.as-home-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-top: var(--as-section-y);
	padding-bottom: var(--as-section-y);
	color: var(--as-fg);
}

.as-home-intro__title {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-h2-size);
	line-height: var(--as-text-h2-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

.as-home-intro__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 17px;
}

.as-home-intro__text {
	max-width: 990px;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-home-intro__text p {
	margin: 0 0 var(--as-space-4);
	font-size: inherit;
	line-height: inherit;
	font-weight: var(--as-weight-regular);
	text-align: left;
	text-transform: none;
}

.as-home-intro__text p:last-child {
	margin-bottom: 0;
}

.as-home-intro__text a {
	color: var(--as-fg);
}

.as-home-intro__text a:hover,
.as-home-intro__text a:focus {
	color: var(--as-accent);
}

/* =====================================================================
   Responsive home (structuur; maten schalen via tokens.css):
   1099 = zijkolom als rij onder drie kaarten, 849 = hero gestapeld en twee
   kaarten per rij, 599 = alles onder elkaar.
   ===================================================================== */

@media (max-width: 1099px) and (min-width: 850px) {
	/* Twee kolommen blijven, maar de tekstkolom is smal: titel op 5.5vw
	   (≈56px op 1024) en ruimte rechts voor de pijl. */
	.as-home-hero .wppsac-post-slider.design-4 h2.as-slide__title {
		font-size: min(var(--as-text-display-xl-size), 5.5vw);
		line-height: 1;
		letter-spacing: -1.5px;
	}

	.as-slide__body {
		padding-right: calc(var(--as-slider-arrow) + var(--as-space-2));
	}
}

@media (max-width: 1099px) {
	/* Drie kaarten naast elkaar, zijkolom als rij eronder */
	.as-home-cards {
		flex-wrap: wrap;
	}

	.as-home-cards > .as-card {
		flex: 1 1 0;
	}

	.as-home-aside {
		flex: 1 1 100%;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--as-space-6) var(--as-space-8);
		padding-top: var(--as-space-4);
	}
}

@media (max-width: 849px) {
	.as-home-hero {
		padding-top: var(--as-space-7);
		margin-bottom: 0;
	}

	.as-slide {
		flex-direction: column;
		gap: var(--as-space-5);
		min-height: 0;
	}

	.as-slide__media {
		flex: none;
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 694 / 500;
	}

	.as-slide__body {
		flex: none;
		width: 100%;
		padding-right: 0;
	}

	.as-home-hero .wppsac-post-slider.design-4 .slick-arrow {
		/* midden op de afbeelding (hoogte = breedte-56px × 500/694) */
		top: calc((100vw - 2 * var(--as-gutter)) * 500 / 694 / 2) !important;
	}

	/* Twee kaarten per rij; de derde houdt dezelfde breedte */
	.as-home-cards > .as-card {
		flex: 0 1 calc(50% - var(--as-space-6) / 2);
	}
}

@media (max-width: 599px) {
	.as-home-cards {
		flex-direction: column;
		gap: var(--as-space-7);
	}

	.as-home-cards > .as-card,
	.as-home-aside {
		flex: none;
		width: 100%;
	}

	.as-home-aside {
		flex-direction: column;
		gap: var(--as-space-6);
	}

	.as-home-intro__inner {
		gap: var(--as-space-5);
	}
}

/* =====================================================================
   Enkel bericht (Figma 69:1376): sectielabel + kruimelpad (padding 40,
   8 onder de nav), hero, titelblok, body, locatie (+80), partners; 100 tot
   de footer.
   ===================================================================== */

.as-single {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.as-single > :last-child {
	margin-bottom: var(--as-footer-gap);
}

.as-single-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--as-space-2);
	margin-top: 8px; /* Figma 134 - 126 */
	padding-top: var(--as-space-7);
	padding-bottom: var(--as-space-7);
}

@media (max-width: 699px) {
	.as-single-top {
		padding-top: var(--as-space-5);
		padding-bottom: var(--as-space-5);
	}
}

.as-single-top__eyebrow {
	margin: 0;
	color: var(--as-highlight);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-single-top .as-breadcrumb {
	padding: 0;
}

/* Berichttitels lopen vaak over meerdere regels: 88/88 i.p.v. 88/64 */
.as-single .as-page-head__title {
	line-height: 1;
}

.as-single .as-location {
	margin-top: var(--as-section-y);
}

.as-single .as-listing {
	margin-top: var(--as-section-y);
}

.as-single .as-listing + .as-listing {
	margin-top: calc(var(--as-section-y) - var(--as-footer-gap));
}

.as-aside-block__meta {
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-2);
	margin-top: var(--as-space-6);
}

.as-partners__team {
	margin-top: var(--as-space-5);
}

/* =====================================================================
   Contact: locatieblok + social + verwijslinks
   ===================================================================== */

.as-main .as-entry:has(+ .as-contact) {
	margin-bottom: var(--as-section-y);
}

/* Contactadres heeft eigen <strong>-kopjes: regular tekst i.p.v. het bold locatieblok */
.as-contact .as-location__text {
	font-weight: var(--as-weight-regular);
}

.as-social {
	margin-top: var(--as-space-5);
}

.as-social p {
	margin: 0 0 var(--as-space-3);
}

.as-contact-links {
	margin: var(--as-section-y) 0 var(--as-footer-gap);
}

.as-contact-links__title {
	margin: 0;
	font-size: var(--as-text-h3-size);
	line-height: var(--as-text-h3-line);
	font-weight: var(--as-weight-bold);
}

/* Knoppen (zoals onder agenda-items) in plaats van pijllinks; feedback 16-10 */
.as-contact-links .as-page-links {
	gap: var(--as-space-3);
	margin-top: var(--as-space-5);
}

/* =====================================================================
   Locaties: partnerblok zonder eigen kop; de H2 uit partners_tekst neemt
   de plek van de titel in (88/64 paars, links uitgelijnd)
   ===================================================================== */

/* Grid heeft al de footer-ruimte onder; het partnerblok brengt zijn eigen 80px padding mee */
.as-listing + .as-partners {
	margin-top: calc(-1 * var(--as-footer-gap));
}

.as-partners__intro h2 {
	margin: 0 0 var(--as-space-7);
	color: var(--as-fg);
	font-size: var(--as-text-display-size);
	line-height: var(--as-text-display-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-display-tracking);
	text-align: left !important;
}

.as-partners__intro p {
	text-align: left !important;
}

/* =====================================================================
   Zoeken / 404: formulier (invoer + knop op één rij), teller, resultaten,
   paginering
   ===================================================================== */

.as-search {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-7);
	margin-bottom: var(--as-footer-gap);
}

.as-search__form {
	max-width: 672px;
}

.as-search__row {
	display: flex;
	gap: var(--as-space-3);
}

.as-search__row input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

.as-form .as-search__row button[type="submit"] {
	width: auto;
	flex: none;
	align-self: stretch;
	padding-top: 0;
	padding-bottom: 0;
}

.as-search__count {
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-results {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-8);
	max-width: 1061px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-result {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--as-space-2);
	margin: 0;
}

.as-result__kicker {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-regular);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-result__title {
	margin: 0;
	font-size: var(--as-text-h3-size);
	line-height: var(--as-text-h3-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

.as-result__title a {
	color: var(--as-fg);
	font-weight: inherit;
	text-decoration: none;
}

.as-result__title a:hover,
.as-result__title a:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.as-result__excerpt {
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-result__excerpt p {
	margin: 0;
}

.as-search .as-page-links {
	margin-top: 0;
}

.as-pagination {
	margin: 0;
}

.as-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.as-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--as-space-2);
}

.as-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--as-field-h);
	height: var(--as-field-h);
	padding: 0 var(--as-space-4);
	background: var(--as-highlight);
	color: var(--as-fg);
	border-radius: var(--as-radius-field);
	font-size: var(--as-text-body-size);
	line-height: 1;
	font-weight: var(--as-weight-regular);
	text-decoration: none;
	transition: background var(--as-transition), color var(--as-transition);
}

.as-pagination a.page-numbers:hover,
.as-pagination a.page-numbers:focus {
	background: var(--as-accent);
}

.as-pagination .page-numbers.current {
	background: var(--as-fg);
	color: var(--as-on-dark);
}

.as-pagination .page-numbers.dots {
	background: transparent;
	padding: 0;
	min-width: 0;
}

.as-pagination .page-numbers.prev .as-arrow {
	transform: scaleX(-1);
}