/*
Theme Name: Lumenlight
Theme URI: https://www.lumenlight.nl
Author: Lumenlight B.V.
Description: Thema in de huisstijl van Lumenlight Ledverlichting (2026). Alle pagina's zijn opgebouwd uit blokken en zelf aan te passen in de editor.
Version: 1.0.3
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: lumenlight
*/

/* Kleine label boven koppen (hoofdletters) */
.ll-label {
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Kaarten: witte achtergrond, dunne lijn, 8px hoeken */
.ll-kaart {
	background: #FFFFFF;
	border: 1px solid #E4E7DC;
	border-radius: 8px;
	overflow: hidden;
}

/* Groene icoontegel met wit lijnicoon */
.ll-icoon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: #97BF0D;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}
.ll-icoon img {
	width: 26px !important;
	height: 26px !important;
	border-radius: 0 !important;
	display: block;
}
.ll-icoon.is-groot { width: 52px; height: 52px; }
.ll-icoon.is-groot img { width: 28px !important; height: 28px !important; }

/* Lijst met groene vinkjes */
.ll-vinklijst {
	list-style: none;
	padding-left: 0 !important;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 600;
}
.ll-vinklijst li {
	position: relative;
	padding-left: 38px;
	min-height: 26px;
}
.ll-vinklijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #97BF0D url("assets/icons/vink.svg") center / 18px no-repeat;
}

/* Chips (onderdelen bij projecten) */
.ll-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ll-chips p {
	font-size: 13px !important;
	font-weight: 600;
	background: #F8FAF2;
	border: 1px solid #E4E7DC;
	border-radius: 8px;
	padding: 4px 10px;
	line-height: 1.4;
}

/* Tweede knop: wit met zwarte rand */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: #FFFFFF;
	color: #000000;
	border: 1.5px solid #000000;
	padding: 14.5px 22.5px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #EEF4DD;
	color: #000000;
}
/* Knop op groen vlak: wit met zwarte tekst */
.wp-block-button.is-style-wit > .wp-block-button__link { background: #FFFFFF; color: #000000; }
.wp-block-button.is-style-wit > .wp-block-button__link:hover { background: #EEF4DD; color: #000000; }

/* Onderstreping in groen onder het kernwoord van de hoofdkop */
.ll-onderstreept {
	text-decoration: underline;
	text-decoration-color: #97BF0D;
	text-decoration-thickness: 8px;
	text-underline-offset: 8px;
}

/* Grote cijfers */
.ll-cijfer {
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* Afbeeldingen met vaste verhouding vullen hun vlak */
.wp-block-image.ll-foto img {
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* Kopregel */
.ll-kopregel .wp-block-navigation a { text-decoration: none; font-weight: 600; }
.ll-kopregel .wp-block-navigation .current-menu-item > a,
.ll-kopregel .wp-block-navigation a[aria-current="page"] {
	box-shadow: inset 0 -3px 0 #97BF0D;
}
.ll-kopregel .wp-block-navigation-item__content { padding: 10px 0 6px; }

/* Voettekst-links zonder onderstreping */
.ll-voet a { text-decoration: none; }
.ll-voet a:hover { text-decoration: underline; }

/* Veelgestelde vragen */
.wp-block-details summary {
	cursor: pointer;
	padding: 20px 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}
.wp-block-details > p { padding-bottom: 22px; }

/* Formulier (Contact Form 7) in huisstijl */
.wpcf7 label { display: block; font-size: 15px; font-weight: 600; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	min-height: 48px;
	margin-top: 6px;
	padding: 10px 14px;
	border: 1px solid #C9CEBD;
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
	background: #FFFFFF;
	box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background: #97BF0D;
	color: #FFFFFF;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Zichtbare focus voor toetsenbordgebruikers */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

mark.ll-onderstreept { background: transparent !important; color: inherit; }
.ll-kaart > .wp-block-image,
.ll-kaart > figure { width: 100%; align-self: stretch; margin: 0; }
.ll-kaart > .wp-block-image img { border-radius: 0; }
.ll-link-wit a { color: #FFFFFF; }
.ll-stapnummer { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1 !important; width: 52px; min-width: 52px; flex: 0 0 52px !important; height: 52px; padding: 0 !important; border-radius: 8px; flex-shrink: 0; font-weight: 800; }
/* Rasters: geen container-query nodig, voorkomt te hoge kaarten in Chrome */
.is-layout-grid { container-type: normal !important; }
.ll-twee { align-items: center; }

.ll-tegels > * { flex: 1 1 120px; }
.ll-twee { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 781px) { .ll-twee { grid-template-columns: 1fr !important; } }
@media (min-width: 782px) { .ll-omgedraaid > :first-child { order: 2; } }

/* Verticale stapels nooit laten doorlopen in een tweede kolom */
.wp-block-group.is-vertical { flex-wrap: nowrap; }

/* Mobiel: logo, menu en knop op één regel */
@media (max-width: 600px) {
	.ll-kopregel .ll-logo img { width: 128px !important; }
	.ll-kopregel > .wp-block-group { flex-wrap: nowrap; gap: 12px; }
	.ll-kopregel > .wp-block-group > .wp-block-group { flex-wrap: nowrap; gap: 16px; }
	.ll-kopregel .wp-block-button__link { padding: 10px 14px; font-size: 15px; white-space: nowrap; }
}

/* Mobiel menu: ruimte en links uitgelijnd */
.wp-block-navigation__responsive-container.is-menu-open { padding: 24px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px !important; align-items: flex-start !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; justify-content: flex-start !important; gap: 22px !important; font-size: 22px; font-weight: 700; }

/* Logo: geen afgeronde hoeken (anders valt de L van LEDVERLICHTING weg) */
.ll-logo img, .ll-logo, footer .wp-block-image img { border-radius: 0 !important; }

/* Contact-link alleen in het opengeklapte mobiele menu */
.wp-block-navigation .ll-alleen-mobiel { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .ll-alleen-mobiel { display: flex; }

/* Contactformulier: ruimte tussen velden, rechterkolom bovenaan */
.ll-formulier > p { margin: 0 0 18px; }
.ll-formulier > p:last-child { margin: 8px 0 0; }
.wpcf7 form .wpcf7-form-control:not([type="submit"]) { font-weight: 400; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: 2px solid #97BF0D; outline-offset: 1px; border-color: #97BF0D; }
.wpcf7 input[type="submit"]:hover { background: #86AA0B; }
.wpcf7-not-valid-tip { font-size: 14px; font-weight: 600; color: #B42318; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; font-size: 15px; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #97BF0D; background: #EEF4DD; }
.ll-twee:has(.wpcf7) { align-items: start; }
@media (max-width: 600px) { .ll-kaart:has(.wpcf7) { padding: 24px 20px !important; } }