/* ==========================================================================
   ASTRA-OVERRIDES — de standaardonderdelen van Astra naar de huisstijl.
   Alleen wat Astra zelf rendert: header, hoofdmenu, mobiel menu, footer,
   widgets, paginatitel, breadcrumbs. Geen nieuwe componenten (die staan in
   components.css). Selectors bewust laag in specificiteit gehouden.
   ========================================================================== */

/* --- Achtergrond en tekstkleur --------------------------------------------
   Astra zet zijn eigen achtergrond (een lichtblauwe tint) en kopkleur via
   dynamische CSS met hoge specificiteit. Zonder deze blokken wint Astra en
   zie je niet onze huisstijl. Daarom hier expliciet alle containers.
   -------------------------------------------------------------------------- */

body,
#page,
.site,
.site-content,
.ast-separate-container,
.ast-plain-container,
.ast-narrow-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .comments-area .comment-respond,
.ast-separate-container #primary,
.ast-page-builder-template .site-content {
	background-color: var(--wvs-bg);
}

body,
.entry-content,
.entry-content p,
.site-content,
.ast-article-single,
.widget {
	color: var(--wvs-body-kleur);
}

/* Koppen — donkerblauw, in Inter. Astra zet hier standaard bijna-zwart en
   doet dat op meerdere plekken; daarom expliciet, inclusief de blokeditor. */
.site h1, .site h2, .site h3, .site h4, .site h5, .site h6,
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a,
.ast-archive-title,
.widget-title,
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: var(--wvs-kop-kleur);
	font-family: var(--wvs-font-kop);
}

.entry-title a:hover {
	color: var(--wvs-accent);
}

/* Bodytekst in Inter, ook waar Astra zijn eigen stack zet. */
body,
button,
input,
select,
textarea,
.entry-content {
	font-family: var(--wvs-font-tekst);
}

/* --- Header ------------------------------------------------------------- */

.site-header,
.ast-primary-header-bar,
.ast-above-header,
.ast-below-header {
	background-color: var(--wvs-bg);
	border-bottom: 1px solid var(--wvs-rand);
}

.site-header .site-title,
.site-header .site-title a,
.ast-site-identity .site-title a {
	color: var(--wvs-kop-kleur);
}

.ast-sticky-active .site-header {
	box-shadow: var(--wvs-schaduw);
}

.site-title,
.site-title a {
	font-family: var(--wvs-font-kop);
	font-weight: var(--wvs-gewicht-sterk);
	color: var(--wvs-kop-kleur);
}

.site-description {
	font-family: var(--wvs-font-tekst);
	color: var(--wvs-tekst-zacht);
}

.custom-logo-link img {
	max-height: 56px;
	width: auto;
}

/* --- Hoofdmenu ---------------------------------------------------------- */

.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
	font-family: var(--wvs-font-kop);
	font-size: var(--wvs-fs-body);
	font-weight: var(--wvs-gewicht-medium);
	color: var(--wvs-menu);
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
	color: var(--wvs-accent);
}

/* Subtiele accentlijn onder het actieve menu-item (desktop) */
@media (min-width: 922px) {
	.main-header-menu > .menu-item > .menu-link {
		position: relative;
	}
	.main-header-menu > .menu-item > .menu-link::after {
		content: "";
		position: absolute;
		left: 0.9em;
		right: 0.9em;
		bottom: 0.55em;
		height: 2px;
		background: var(--wvs-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--wvs-overgang);
	}
	.main-header-menu > .menu-item > .menu-link:hover::after,
	.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
	.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after {
		transform: scaleX(1);
	}
}

/* Submenu's */
.main-header-menu .sub-menu {
	background: var(--wvs-kaart-bg);
	border: 1px solid var(--wvs-kaart-rand);
	border-radius: var(--wvs-radius-vlak);
	box-shadow: var(--wvs-schaduw);
	padding: var(--wvs-ruimte-2) 0;
	overflow: hidden;
}

.main-header-menu .sub-menu .menu-link {
	font-family: var(--wvs-font-tekst);
	color: var(--wvs-body-kleur);
	padding-block: 0.65em;
}

.main-header-menu .sub-menu .menu-link:hover {
	background: var(--wvs-accent-zacht);
	color: var(--wvs-accent);
}

/* --- Mobiel menu -------------------------------------------------------- */

.ast-header-break-point .main-navigation .menu-link {
	min-height: 48px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--wvs-rand);
}

.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-buttons-minimal .menu-toggle {
	color: var(--wvs-kop-kleur);
	background: transparent;
	min-width: 48px;
	min-height: 48px;
	border-radius: var(--wvs-radius-klein);
}

.ast-mobile-menu-trigger-fill,
.ast-button-wrap .menu-toggle {
	background: var(--wvs-accent);
	color: var(--wvs-accent-contrast);
	border-radius: var(--wvs-radius-klein);
}

/* Menuknop in de header (bijv. "Offerte aanvragen") */
.ast-header-button-1 .ast-custom-button {
	border-radius: var(--wvs-radius-knop);
}

/* --- Paginatitel / hero-balk ------------------------------------------- */

.ast-page-title-style-layout-1 .entry-header,
.ast-archive-title {
	background: var(--wvs-bg-zacht);
	border-bottom: 1px solid var(--wvs-rand);
}

/* --- Breadcrumbs -------------------------------------------------------- */

.ast-breadcrumbs-wrapper,
.breadcrumbs,
.trail-items {
	font-size: var(--wvs-fs-klein);
	color: var(--wvs-tekst-zacht);
}

.ast-breadcrumbs-wrapper a,
.trail-items a { color: var(--wvs-tekst-zacht); }

.ast-breadcrumbs-wrapper a:hover,
.trail-items a:hover { color: var(--wvs-accent); }

/* --- Widgets / sidebar van Astra ---------------------------------------- */

#secondary .widget {
	background: var(--wvs-kaart-bg);
	border: 1px solid var(--wvs-kaart-rand);
	border-radius: var(--wvs-radius-vlak);
	padding: var(--wvs-ruimte-5);
	margin-bottom: var(--wvs-ruimte-5);
}

#secondary .widget-title {
	font-family: var(--wvs-font-kop);
	font-size: var(--wvs-fs-h4);
	color: var(--wvs-kop-kleur);
	margin-bottom: var(--wvs-ruimte-3);
	padding-bottom: var(--wvs-ruimte-3);
	border-bottom: 1px solid var(--wvs-rand);
}

/* --- Footer ------------------------------------------------------------- */
/* Live site: bordeaux footer met witte tekst. Astra 4 bouwt de footer met
   eigen wrappers (footer builder); zonder deze selectors valt hij terug op
   zijn eigen lichtgrijs. */

.site-footer,
.site-primary-footer-wrap,
.site-above-footer-wrap,
.site-below-footer-wrap,
.ast-footer-overlay,
.footer-widget-area,
.site-footer .ast-builder-grid-row-container {
	background-color: var(--wvs-accent);
	color: #ffffff;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer .widget-title,
.site-primary-footer-wrap .widget-title {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

.site-footer a,
.site-primary-footer-wrap a,
.site-below-footer-wrap a,
.ast-footer-copyright a {
	color: #ffffff;
	text-decoration: none;
}

.site-footer a:hover,
.site-primary-footer-wrap a:hover,
.site-below-footer-wrap a:hover,
.ast-footer-copyright a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.site-footer p,
.site-footer li,
.ast-footer-copyright,
.ast-footer-copyright p {
	color: #ffffff;
}

.site-footer .widget {
	background: transparent;
	border: 0;
	padding: 0;
}

.site-below-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-size: var(--wvs-fs-klein);
}

/* Knop in de footer: donkere tint op het bordeaux vlak (live site) */
.site-footer .wvs-knop,
.site-footer .wp-block-button__link,
.site-footer .ast-custom-button,
.site-footer input[type="submit"],
.site-footer button[type="submit"] {
	background-color: var(--wvs-accent-donker);
	border-color: var(--wvs-accent-donker);
	color: #ffffff;
}

.site-footer .wvs-knop:hover,
.site-footer .wp-block-button__link:hover,
.site-footer .ast-custom-button:hover,
.site-footer input[type="submit"]:hover,
.site-footer button[type="submit"]:hover {
	background-color: var(--wvs-accent-diep);
	border-color: var(--wvs-accent-diep);
	color: #ffffff;
}

/* Social-iconen in de footer: verdiept bordeaux rondje */
.site-footer .ast-builder-social-element,
.site-footer .ahfb-svg-iconset {
	background-color: var(--wvs-accent-diep);
	color: #ffffff;
	border-radius: 50%;
}

/* --- Berichten / projecten in overzichten ------------------------------- */

.ast-article-post,
.ast-separate-container .ast-article-post {
	border-radius: var(--wvs-radius-vlak);
	border: 1px solid var(--wvs-kaart-rand);
	background: var(--wvs-kaart-bg);
}

.ast-separate-container .ast-article-single {
	background: var(--wvs-kaart-bg);
	border-radius: var(--wvs-radius-vlak);
}

/* --- Terug-naar-boven --------------------------------------------------- */

#ast-scroll-top {
	background: var(--wvs-accent);
	color: var(--wvs-accent-contrast);
	border-radius: 50%;
}