/*
Theme Name: Lucas Theme
Description: Lichtgewicht custom theme voor Voegersbedrijf Lucas. Gebouwd op Gutenberg / block templates, geen verplichte pagebuilder-afhankelijkheid.
Author: Voegersbedrijf Lucas
Version: 0.1.0
Text Domain: lucas-theme
Requires PHP: 8.0
Requires at least: 6.4
*/

/* Vrijwel alle styling loopt via theme.json (design tokens). Dit bestand bevat alleen
   kleine, niet-vermijdbare utility-CSS die niet via theme.json/blocks te regelen is. */

.sticky-mobile-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: none;
}

@media (max-width: 782px) {
	.sticky-mobile-cta {
		display: flex;
	}

	/* Ruimte reserveren zodat de vaste balk de onderste footer-inhoud
	   niet overlapt wanneer bezoekers helemaal naar beneden scrollen. */
	body {
		padding-bottom: 72px;
	}
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--ink, #262626);
	color: #fff;
	padding: 12px 20px;
	z-index: 1000;
}

.skip-link:focus {
	left: 0;
}

/* Navigatiemenu: hover/focus-kleur. theme.json regelt de algemene link-hover-
   kleur, maar het navigatieblok gebruikt eigen opmaak die dat niet altijd
   overneemt — daarom hier expliciet met de accentkleur uit het design system. */
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--accent-hover, #7f420b ) !important;
}

.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.15s ease-in-out;
}

/* De "Offerte aanvragen"-knop in het menu: eigen opmaak (geen afhankelijkheid
   van een ingebouwde blokstijl die mogelijk niet bestaat/werkt). */
.wp-block-navigation .wp-block-navigation-item.lucas-nav-button > .wp-block-navigation-item__content {
	background: var( --wp--preset--color--accent, #9c520f );
	color: #ffffff !important;
	padding: 10px 20px;
	border-radius: 4px;
}

.wp-block-navigation .wp-block-navigation-item.lucas-nav-button > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.lucas-nav-button > .wp-block-navigation-item__content:focus {
	background: var( --wp--preset--color--accent-hover, #7f420b );
	color: #ffffff !important;
}

/* Toegankelijk contrast: het oorspronkelijke accentoranje (#D97B29) haalt met
   witte tekst maar 3,1:1 (norm 4,5:1). De paginablokken gebruiken die kleur
   inline; hier wordt hij centraal vervangen door het donkerdere accent
   (#9C520F, 4,96:1 of hoger). */
[style*="background:#D97B29"] {
	background: #9C520F !important;
}
[style*="color:#D97B29"] {
	color: #9C520F !important;
}
[style*="solid #D97B29"] {
	border-color: #9C520F !important;
}
[style*="background:#D97B29"]:hover {
	background: #7F420B !important;
}

/* Sticky mobiele balk: drie knoppen passen naast elkaar. */
.sticky-mobile-cta {
	padding: 8px 10px;
}
.sticky-mobile-cta .wp-block-buttons {
	flex-wrap: nowrap;
	gap: 8px;
	width: 100%;
}
.sticky-mobile-cta .wp-block-button {
	flex: 1;
}
.sticky-mobile-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
	padding: 10px 6px;
	font-size: 13px;
	white-space: nowrap;
}