/*
Theme Name: Groetjes van Sinterklaas voor Astra
Theme URI: https://groetjesvansinterklaas.nl
Description: Kindthema van Astra met een paarse feestlook (header met kleurverloop, gele en magenta knoppen, hero met foto en kleurverloop, tekst links). Alle kleuren en lettertypen staan in assets/css/look-paars.css (of look-poster.css voor de posterlook). Dit bestand bevat alleen de opmaak die die waarden gebruikt.
Author: Stichting Groetjes van Sinterklaas
Author URI: https://groetjesvansinterklaas.nl
Template: astra
Version: 3.0.0
Requires at least: 6.2
Tested up to: 6.6
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: groetjes-astra
*/

/* ==========================================================================
   LET OP: HIER HOEF JE GEEN KLEUREN OF LETTERTYPEN AAN TE PASSEN.
   Die staan in  assets/css/look-paars.css  (Weergave > Thema-bestandseditor).
   Dit bestand zet die waarden om in de opmaak van Astra, de blokken en de
   plug-in. Volgorde:
     1  Koppeling met het kleurenpalet van Astra
     2  Basis: tekst, koppen, links, focus
     3  Header, menu en logo
     4  Knoppen (Astra, blokken, formulieren)
     5  Hero met foto en kleurverloop (tekst links) en infobalk
     6  Footer
     7  Nieuws en overige Astra-onderdelen
     8  Koppeling met de plug-in
   De scope-regel  :where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"]))
   zorgt ervoor dat deze regels de onderdelen van de plug-in met rust laten.
   ========================================================================== */


/* ---------- 1. Kleurenpalet van Astra ---------- */
/* Astra gebruikt 9 vaste kleurvakken. Hier krijgen ze de kleuren van de look. */
:root,
body.gvs {
	--ast-global-color-0: var(--gvs-accent);
	--ast-global-color-1: var(--gvs-accent-donker);
	--ast-global-color-2: var(--gvs-kop);
	--ast-global-color-3: var(--gvs-tekst);
	--ast-global-color-4: var(--gvs-achtergrond);
	--ast-global-color-5: var(--gvs-achtergrond-alt);
	--ast-global-color-6: var(--gvs-geel);
	--ast-global-color-7: var(--gvs-donker);
	--ast-global-color-8: var(--gvs-rand);
}


/* ---------- 2. Basis ---------- */
html {
	-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body.gvs {
	font-family: var(--gvs-font-tekst);
	font-size: var(--gvs-tekst-grootte);
	line-height: var(--gvs-regelhoogte);
	color: var(--gvs-tekst);
	background-color: var(--gvs-achtergrond);
}
body.gvs :is(input, select, textarea) {
	font-family: var(--gvs-font-tekst);
}

/* Koppen */
body.gvs :is(h1, h2, h3, h4, h5, h6, .entry-title, .ast-archive-title, .widget-title):where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) {
	font-family: var(--gvs-font-kop);
	font-weight: var(--gvs-kop-gewicht);
	font-style: var(--gvs-kop-stijl);
	letter-spacing: var(--gvs-kop-spatie);
	line-height: 1.15;
	color: var(--gvs-kop);
	text-wrap: balance;
}
body.gvs h1:where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])),
body.gvs .entry-title:where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) { font-size: var(--gvs-h1); }
body.gvs h2:where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) { font-size: var(--gvs-h2); }
body.gvs h3:where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) { font-size: var(--gvs-h3); }
body.gvs h4:where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) { font-size: var(--gvs-h4); }
body.gvs h5:where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) { font-size: var(--gvs-h5); }
body.gvs h6:where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) { font-size: var(--gvs-h6); }

/* Links in lopende tekst */
body.gvs .entry-content a:not(.wp-block-button__link):where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) {
	color: var(--gvs-link);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}
body.gvs .entry-content a:not(.wp-block-button__link):where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])):hover {
	color: var(--gvs-link-hover);
}

/* Duidelijke focusrand en feestelijke tekstselectie */
body.gvs :focus-visible {
	outline: 3px solid var(--gvs-geel);
	outline-offset: 3px;
}
body.gvs ::selection {
	background: var(--gvs-geel);
	color: var(--gvs-geel-tekst);
}


/* ---------- 3. Header, menu en logo ---------- */
body.gvs .ast-primary-header-bar,
body.gvs .main-header-bar {
	background-color: var(--gvs-header-van);
	background-image: linear-gradient(90deg, var(--gvs-header-van) 0%, var(--gvs-header-tot) 100%);
	border-bottom: var(--gvs-header-lijn-dikte) solid var(--gvs-header-lijn);
}
body.gvs .ast-primary-header-bar .site-primary-header-wrap {
	min-height: var(--gvs-header-hoogte);
}
@media (max-width: 921px) {
	body.gvs .ast-primary-header-bar .site-primary-header-wrap {
		min-height: var(--gvs-header-hoogte-mobiel);
	}
}

/* Logo: eigen logo, op vaste breedte; optioneel uitgeknipt tot een cirkel */
body.gvs .site-logo-img img,
body.gvs .custom-logo-link img,
body.gvs img.custom-logo {
	width: var(--gvs-logo-breedte);
	max-width: var(--gvs-logo-breedte);
	height: auto;
	clip-path: var(--gvs-logo-vorm);
}

/* Sitetitel als er geen logo is */
body.gvs .site-title a,
body.gvs .site-title a:hover {
	font-family: var(--gvs-font-kop);
	font-weight: var(--gvs-kop-gewicht);
	color: var(--gvs-licht);
	text-decoration: none;
}

/* Menu */
body.gvs .main-header-menu .menu-link,
body.gvs .ast-builder-menu .main-header-menu .menu-item > .menu-link {
	font-family: var(--gvs-font-menu);
	font-size: var(--gvs-menu-grootte);
	font-weight: var(--gvs-menu-gewicht);
	color: var(--gvs-licht);
	text-decoration: none;
}
body.gvs .main-header-menu .menu-item:hover > .menu-link,
body.gvs .main-header-menu .menu-item.focus > .menu-link,
body.gvs .main-header-menu .menu-item:focus-within > .menu-link,
body.gvs .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
body.gvs .main-header-menu .current-menu-item > .menu-link,
body.gvs .main-header-menu .current-menu-ancestor > .menu-link,
body.gvs .main-header-menu .current_page_item > .menu-link {
	color: var(--gvs-geel-licht);
}
body.gvs .main-header-menu .current-menu-item > .menu-link,
body.gvs .main-header-menu .current-menu-ancestor > .menu-link,
body.gvs .main-header-menu .current_page_item > .menu-link {
	box-shadow: inset 0 -3px 0 var(--gvs-menu-actief-lijn);
}

/* Uitklapmenu */
body.gvs .main-header-menu .sub-menu {
	background-color: var(--gvs-donker);
	border: 1px solid var(--gvs-header-lijn);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	overflow: hidden;
}
body.gvs .main-header-menu .sub-menu .menu-link {
	color: var(--gvs-licht);
	border-bottom: 0;
}
body.gvs .main-header-menu .sub-menu .menu-item:hover > .menu-link,
body.gvs .main-header-menu .sub-menu .menu-item:focus-within > .menu-link {
	color: var(--gvs-geel-licht);
	background: rgba(255, 255, 255, .07);
}

/* Mobiel menu (uitschuifpaneel) en hamburger */
body.gvs .ast-mobile-popup-drawer .ast-mobile-popup-inner,
body.gvs .ast-header-break-point .main-header-bar-navigation,
body.gvs .ast-header-break-point .ast-mobile-header-content {
	background-color: var(--gvs-donker);
}
body.gvs .ast-mobile-popup-drawer .menu-link,
body.gvs .ast-header-break-point .main-header-menu .menu-link {
	color: var(--gvs-licht);
}
body.gvs .menu-toggle .ast-mobile-svg,
body.gvs .ast-mobile-menu-trigger-minimal .ast-mobile-svg,
body.gvs .ast-mobile-svg {
	fill: var(--gvs-licht);
	color: var(--gvs-licht);
}
body.gvs .ast-mobile-menu-buttons .menu-toggle,
body.gvs .menu-toggle .menu-toggle-icon {
	color: var(--gvs-licht);
}


/* ---------- 4. Knoppen ---------- */

/* Gewone knoppen (Astra, blokken, formulieren): accentkleur met kleurverloop */
body.gvs :is(.ast-button, .button, .wp-block-button__link, .wp-element-button, input[type="submit"], button[type="submit"]):where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) {
	background-color: var(--gvs-accent);
	background-image: linear-gradient(180deg, var(--gvs-accent-van) 0%, var(--gvs-accent-tot) 100%);
	color: var(--gvs-accent-tekst);
	border: 0;
	border-radius: var(--gvs-radius-knop);
	font-family: var(--gvs-font-knop);
	font-weight: var(--gvs-knop-gewicht);
	font-size: var(--gvs-knop-grootte);
	line-height: 1.2;
	padding: .85em 1.8em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
body.gvs :is(.ast-button, .button, .wp-block-button__link, .wp-element-button, input[type="submit"], button[type="submit"]):where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])):is(:hover, :focus-visible) {
	color: var(--gvs-accent-tekst);
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* Knoppen in de header: knop 1 = geel, knop 2 = accent (magenta of rood) */
body.gvs .ast-header-button-1 .ast-custom-button,
body.gvs .ast-header-button-2 .ast-custom-button {
	border-radius: var(--gvs-radius-knop);
	font-family: var(--gvs-font-knop);
	font-weight: var(--gvs-knop-gewicht);
	font-size: calc(var(--gvs-knop-grootte) - 1px);
	line-height: 1.2;
	padding: .7em 1.4em;
	border: 0;
	text-decoration: none;
	transition: transform .15s ease, filter .15s ease;
}
body.gvs .ast-header-button-1 .ast-custom-button {
	background-color: var(--gvs-geel);
	background-image: linear-gradient(180deg, var(--gvs-geel-van) 0%, var(--gvs-geel-tot) 100%);
	color: var(--gvs-geel-tekst);
	box-shadow: 0 8px 22px var(--gvs-geel-gloed);
}
body.gvs .ast-header-button-2 .ast-custom-button {
	background-color: var(--gvs-accent);
	background-image: linear-gradient(180deg, var(--gvs-accent-van) 0%, var(--gvs-accent-tot) 100%);
	color: var(--gvs-accent-tekst);
}
body.gvs .ast-header-button-1 .ast-custom-button:hover,
body.gvs .ast-header-button-2 .ast-custom-button:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}
body.gvs .ast-header-button-1 .ast-custom-button:hover { color: var(--gvs-geel-tekst); }
body.gvs .ast-header-button-2 .ast-custom-button:hover { color: var(--gvs-accent-tekst); }

/* Blok-stijlen voor de knoppenblok (kies ze rechts bij "Stijlen") */
body.gvs .wp-block-button.is-style-gvs-geel .wp-block-button__link {
	background-color: var(--gvs-geel);
	background-image: linear-gradient(180deg, var(--gvs-geel-van) 0%, var(--gvs-geel-tot) 100%);
	color: var(--gvs-geel-tekst);
	box-shadow: 0 10px 28px var(--gvs-geel-gloed);
}
body.gvs .wp-block-button.is-style-gvs-geel .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--gvs-geel-tekst);
}
body.gvs .wp-block-button.is-style-gvs-accent .wp-block-button__link {
	background-color: var(--gvs-accent);
	background-image: linear-gradient(180deg, var(--gvs-accent-van) 0%, var(--gvs-accent-tot) 100%);
	color: var(--gvs-accent-tekst);
}
body.gvs .wp-block-button.is-style-gvs-omlijnd .wp-block-button__link {
	background-color: var(--gvs-omlijnd-bg);
	background-image: none;
	color: var(--gvs-licht);
	border: 2px solid var(--gvs-omlijnd-rand);
	box-shadow: none;
}
body.gvs .wp-block-button.is-style-gvs-omlijnd .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--gvs-licht);
	border-color: var(--gvs-geel);
}
/* Grote knop zoals in de hero */
body.gvs .wp-block-button.is-style-gvs-geel .wp-block-button__link,
body.gvs .wp-block-button.is-style-gvs-accent .wp-block-button__link,
body.gvs .wp-block-button.is-style-gvs-omlijnd .wp-block-button__link {
	font-size: calc(var(--gvs-knop-grootte) + 2px);
	padding: .9em 1.9em;
}


/* ---------- 5. Hero met foto en kleurverloop, tekst links ---------- */
/* Gebruik: nieuwe pagina > + > Patronen > "Groetjes van Sinterklaas" > "Hero met foto en kleurverloop". */
body.gvs .gvs-hero {
	position: relative;
	padding: 0;
	margin-block: 0;
	color: var(--gvs-licht);
}
body.gvs .gvs-hero .wp-block-cover__background {
	background: var(--gvs-overlay) !important;
	opacity: 1 !important;
}
/* Breedte en marge met !important: de cover-blok van WordPress zet die op 'auto' en 0 zodra iemand
   de plek van de tekst verschuift (de regel daarvoor is anders te sterk). */
body.gvs .gvs-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--gvs-container);
	margin-inline: auto !important;
	padding: clamp(56px, 9vw, 120px) 20px;  /* 20px = dezelfde zijrand als de header van Astra */
	box-sizing: border-box;
	color: var(--gvs-licht);
}
body.gvs .gvs-hero__tekst {
	max-width: 44rem;
	margin: 0;
}
body.gvs .gvs-hero .gvs-kicker {
	margin: 0 0 .1em;
	font-family: var(--gvs-font-kop);
	font-weight: var(--gvs-kop-gewicht);
	font-size: var(--gvs-hero-kicker);
	line-height: 1.1;
	color: var(--gvs-licht);
	text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
body.gvs .gvs-hero h1.gvs-hero__titel {
	margin: 0 0 .4em;
	font-family: var(--gvs-font-kop);
	font-weight: 900;
	font-style: var(--gvs-kop-stijl);
	font-size: var(--gvs-hero-titel);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--gvs-geel);
	text-shadow: 0 .045em 0 var(--gvs-geel-donker), 0 .12em .3em rgba(0, 0, 0, .35);
	text-wrap: balance;
}
body.gvs .gvs-hero .gvs-hero__intro {
	max-width: 38rem;
	margin: 0 0 1.4em;
	font-size: 1.12em;
	line-height: 1.6;
	color: var(--gvs-licht);
}
body.gvs .gvs-hero .gvs-hero__intro strong {
	font-weight: 800;
	color: var(--gvs-geel);
}
body.gvs .gvs-hero .gvs-hero__intro a {
	color: var(--gvs-link-op-donker);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: .18em;
}
body.gvs .gvs-hero .gvs-knoppen {
	gap: 14px 16px;
	margin: 0 0 1.4em;
}

/* Infobalk: lichte, doorzichtige balk met afgeronde hoeken */
body.gvs .gvs-infobalk,
body.gvs .is-style-gvs-infobalk {
	max-width: 52rem;
	padding: 18px 24px;
	background: var(--gvs-infobalk-bg);
	border: 1px solid var(--gvs-infobalk-rand);
	border-radius: var(--gvs-radius-bar);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--gvs-licht);
}
body.gvs .gvs-infobalk p,
body.gvs .is-style-gvs-infobalk p {
	margin: 0;
	color: inherit;
}
body.gvs .gvs-infobalk strong,
body.gvs .is-style-gvs-infobalk strong { font-weight: 800; }

@media (max-width: 781px) {
	/* Op een smal scherm staat de tekst over de hele foto: sterkere overlay */
	body.gvs .gvs-hero .wp-block-cover__background {
		background: var(--gvs-overlay-mobiel) !important;
	}
	body.gvs .gvs-hero .wp-block-cover__inner-container {
		padding-block: 56px;
	}
	body.gvs .gvs-hero .gvs-knoppen .wp-block-button,
	body.gvs .gvs-hero .gvs-knoppen .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}


/* ---------- 6. Footer ---------- */
body.gvs .site-footer,
body.gvs .site-primary-footer-wrap,
body.gvs .site-above-footer-wrap,
body.gvs .site-below-footer-wrap {
	background-color: var(--gvs-voet);
	color: var(--gvs-licht-gedempt);
}
body.gvs .site-below-footer-wrap {
	border-top: 1px solid var(--gvs-header-lijn);
}
body.gvs .site-footer :is(p, li, span, .ast-footer-copyright) {
	color: var(--gvs-licht-gedempt);
}
body.gvs .site-footer a {
	color: var(--gvs-licht);
	text-decoration: none;
}
body.gvs .site-footer a:is(:hover, :focus-visible) {
	color: var(--gvs-geel-licht);
}
body.gvs .site-footer :is(h1, h2, h3, h4, h5, h6, .widget-title) {
	font-family: var(--gvs-font-kop);
	font-weight: var(--gvs-kop-gewicht);
	font-size: 1.15rem;
	color: var(--gvs-geel);
}
/* Sociale pictogrammen in de footer: rond en geel */
body.gvs .site-footer .ast-builder-social-element,
body.gvs .site-footer .ast-social-color-type-custom .ast-builder-social-element {
	background-color: var(--gvs-geel);
	border-radius: 50%;
}
body.gvs .site-footer .ast-builder-social-element svg {
	fill: var(--gvs-geel-tekst);
}


/* ---------- 7. Nieuws en overige Astra-onderdelen ---------- */
body.gvs .ast-blog-featured-section img,
body.gvs .post-thumb-img-content img,
body.gvs .ast-article-single .post-thumb img {
	border-radius: var(--gvs-radius-kaart);
}
body.gvs .entry-title a {
	color: var(--gvs-kop);
}
body.gvs .entry-title a:hover {
	color: var(--gvs-accent);
}
body.gvs .entry-meta,
body.gvs .entry-meta a {
	color: var(--gvs-gedempt);
}
body.gvs .ast-pagination .page-numbers {
	border-radius: var(--gvs-radius-knop);
}
body.gvs .ast-pagination .page-numbers.current {
	background: var(--gvs-accent);
	color: var(--gvs-accent-tekst);
	border-color: var(--gvs-accent);
}
body.gvs :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select):where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])) {
	border: 2px solid var(--gvs-rand);
	border-radius: 14px;
	background-color: #fff;
	color: var(--gvs-kop);
}
body.gvs :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select):where(:not(.gvsf *, [class*="gvsf-"] *, [class*="gvsf-"])):focus {
	border-color: var(--gvs-accent);
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gvs-accent) 25%, transparent);
}


/* ---------- 8. Koppeling met de plug-in ---------- */
/* Het opvallende woord in de plug-in-koppen (hero, lint) */
.gvsf-accent,
.gvsf-ribbon__script {
	font-family: var(--gvs-accentwoord-font);
	font-style: var(--gvs-accentwoord-stijl);
	font-weight: var(--gvs-accentwoord-gewicht);
}
/* Geen ongewenste ruimte tussen de pagina-onderdelen van de plug-in en het hero-patroon */
.entry-content > .gvsf-section,
.entry-content > .gvsf-page-hero,
.entry-content > .gvsf-hero,
.entry-content > .gvsf-cta,
.entry-content > .gvsf-poster,
.entry-content > .gvs-hero {
	margin-block: 0;
}