/* Aanvullingen op theme.json. Houd dit bestand klein. */

/* Links: donkere tekst met een teal onderstreping (teal als tekstkleur is te slecht leesbaar). */
:where(.wp-site-blocks) a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--teal);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Kop: blijft bovenaan staan, zoals op de huidige site. */
.ew-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e6e6e3; }
.admin-bar .ew-header { top: 32px; }
.ew-header .wp-block-navigation a { text-decoration: none; }
.ew-header .wp-block-navigation a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--teal); text-decoration-thickness: 3px; }

/* Knop op een donkere of teal ondergrond: lichte variant. */
.is-style-licht .wp-element-button,
.wp-block-button.is-style-licht .wp-block-button__link { background: #fff; border-color: #fff; color: var(--wp--preset--color--donker); }
.wp-block-button.is-style-licht .wp-block-button__link:hover { background: var(--wp--preset--color--donker); border-color: var(--wp--preset--color--donker); color: #fff; }

/* Voorpagina: openingsblok in twee helften. */
.ew-hero { min-height: min(80vh, 640px); }
.ew-hero > .wp-block-column { display: flex; flex-direction: column; justify-content: center; }
.ew-hero .wp-block-cover { min-height: 100% !important; height: 100%; }

/* Fotomozaïek */
.ew-mozaiek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ew-mozaiek .wp-block-image { margin: 0; height: 100%; }
.ew-mozaiek .ew-hoog { height: 420px; }
.ew-mozaiek .ew-laag { height: 205px; }

/* Drie routes */
.ew-routes .wp-block-column { background: #fff; border-top: 4px solid var(--wp--preset--color--teal); padding: 1.5rem; box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }

/* Voet */
.ew-footer ul { list-style: none; padding: 0; margin: 0; }
.ew-footer li { margin: 0 0 .4rem; }
.ew-footer a { color: var(--wp--preset--color--donker); text-decoration: none; }
.ew-footer a:hover { text-decoration: underline; }
.ew-onderbalk, .ew-onderbalk a { color: #fff; }

@media (max-width: 781px) {
	.ew-hero .wp-block-cover { min-height: 320px !important; }
	.ew-mozaiek .ew-hoog { height: 300px; }
	.admin-bar .ew-header { top: 0; }
}
.ew-footer h2 { margin-bottom: .75rem; }

/* Inschrijfformulier Laposta: alleen het formulier, in de stijl van de site.
   Afbeelding, titel en tekst uit Laposta verbergen: die staan al in het blok zelf.
   Laposta zet eigen stijlen met #eprov-4goyanolrd en !important; daarom hier hetzelfde gewicht. */
.ew-laposta #eprov-4goyanolrd .wrap { display: none !important; }
.ew-laposta #eprov-4goyanolrd, .ew-laposta #eprov-4goyanolrd .form { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; text-align: left !important; }
.ew-laposta #eprov-4goyanolrd * { font-family: var(--wp--preset--font-family--montserrat) !important; }
.ew-laposta #eprov-4goyanolrd .form label { display: block !important; font-weight: 600 !important; font-size: .95rem !important; color: var(--wp--preset--color--donker) !important; margin: .75rem 0 .3rem !important; padding: 0 !important; text-align: left !important; }
.ew-laposta #eprov-4goyanolrd .form .field input { width: 100% !important; padding: .7rem .8rem !important; border: 2px solid var(--wp--preset--color--donker) !important; border-radius: 3px !important; background: #fff !important; color: var(--wp--preset--color--donker) !important; font-size: 1rem !important; }
.ew-laposta #eprov-4goyanolrd .form .button { text-align: left !important; }
.ew-laposta #eprov-4goyanolrd .form button { width: auto !important; margin-top: 1.25rem !important; padding: .7em 1.4em !important; border: 3px solid var(--wp--preset--color--donker) !important; border-radius: 3px !important; background: transparent !important; background-color: transparent !important; color: var(--wp--preset--color--donker) !important; font-weight: 600 !important; font-size: .875rem !important; letter-spacing: 2px !important; text-transform: uppercase !important; cursor: pointer; }
.ew-laposta #eprov-4goyanolrd .form button:hover, .ew-laposta #eprov-4goyanolrd .form button:focus { background-color: var(--wp--preset--color--donker) !important; color: #fff !important; }
.ew-laposta #eprov-4goyanolrd .thanks { color: var(--wp--preset--color--donker) !important; font-weight: 600; }

/* Staande foto naast de nieuwsbrief, bovenkant gelijk met de kop */
.ew-staand { margin: 0; }
.ew-staand img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ew-staand + * , .is-vertically-aligned-top > .wp-block-heading:first-child { margin-top: 0; }

/* Submenu's: wit vlak met teal bovenrand, zoals op de huidige site */
.ew-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border: 0 !important; border-top: 3px solid var(--wp--preset--color--teal) !important;
	box-shadow: 0 6px 18px rgb(0 0 0 / 10%); padding: .5rem 0; min-width: 220px !important;
}
.ew-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem 1.25rem; }
/* Zoeken: vergrootglas dat uitklapt tot zoekveld */
.ew-zoeken .wp-block-search__button { background: transparent; border: 0; color: var(--wp--preset--color--donker); padding: .4rem; }
.ew-zoeken .wp-block-search__button:hover { background: transparent; color: var(--wp--preset--color--donker); }
.ew-zoeken .wp-block-search__input { border: 2px solid var(--wp--preset--color--donker); border-radius: 3px; font: inherit; }

/* Mobiel menu: links uitgelijnd, submenu ingesprongen */
.ew-header .is-menu-open .wp-block-navigation__responsive-container-content,
.ew-header .is-menu-open .wp-block-navigation__container,
.ew-header .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.ew-header .is-menu-open .wp-block-navigation__container { gap: 1rem !important; font-size: 1.15rem; }
.ew-header .is-menu-open .wp-block-navigation__submenu-container { padding: .25rem 0 0 1rem !important; gap: .5rem !important; font-weight: 500; font-size: 1rem; }

/* Paginakop op subpagina's: teal vlak met titel links, foto rechts */
.ew-paginakop { min-height: 420px; }
.ew-paginakop > .wp-block-column:last-child .wp-block-cover { height: 100%; min-height: 420px !important; }
.ew-paginakop h1 { margin: 0 0 .75rem; }
.ew-paginakop p { color: var(--wp--preset--color--donker); font-size: var(--wp--preset--font-size--groot); }
.wp-block-post-content > .alignfull:first-child { margin-top: 0; }
.wp-block-post-content > .wp-block-group.alignfull + .wp-block-group.alignfull { margin-top: 0; }
/* Teamfoto's en kleine beelden in kolommen: netjes even groot */
.wp-block-image img { height: auto; }
@media (max-width: 781px) {
	.ew-paginakop > .wp-block-column:last-child .wp-block-cover { min-height: 260px !important; }
}
.ew-paginakop > .wp-block-column:first-child { display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
/* Portretten in rijen van vier of meer kolommen: gelijke verhouding */
.ew-portretten .wp-block-image img { aspect-ratio: 2 / 3; object-fit: cover; }

/* Formulieren (Contact Form 7) in de stijl van de site */
.wpcf7-form label { display: block; font-weight: 600; color: var(--wp--preset--color--donker); margin-bottom: 1rem; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea {
	display: block; width: 100%; box-sizing: border-box; margin-top: .3rem; padding: .7rem .8rem;
	border: 2px solid var(--wp--preset--color--donker); border-radius: 3px; background: #fff; font: inherit; font-weight: 400; color: var(--wp--preset--color--donker);
}
.wpcf7-form textarea { height: 9rem; min-height: 6rem; resize: vertical; }
.wpcf7-form input[type="submit"] {
	padding: .7em 1.4em; border: 3px solid var(--wp--preset--color--donker); border-radius: 3px; background: transparent;
	color: var(--wp--preset--color--donker); font: 600 .875rem/1.4 var(--wp--preset--font-family--montserrat); letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: var(--wp--preset--color--donker); color: #fff; }
.wpcf7-not-valid-tip { color: #a4161a; font-weight: 600; font-size: .875rem; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .75rem 1rem; border-width: 2px; }
/* Pictogrammen sociale media in de voet */
.ew-footer .wp-block-social-links a { text-decoration: none; }

/* Webwinkel: productkaarten zoals in de huidige winkel */
.ew-producten .wc-block-product { background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 12%); padding-bottom: .25rem; }
.ew-producten .wc-block-components-product-image { position: relative; margin-bottom: .75rem; }
.ew-producten .wp-block-post-title { font-weight: 700; }
.ew-producten .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--donker); }
.ew-producten .wc-block-components-product-price { color: var(--wp--preset--color--donker); }
.woocommerce-price-suffix { display: block; font-size: .8rem; color: var(--wp--preset--color--tekst); }
.ew-label { display: inline-block; padding: .2rem .6rem; font-size: .8rem; font-weight: 600; border-radius: 2px; }
.wp-block-woocommerce-product-image, .wc-block-components-product-image { position: relative; }
.wp-block-woocommerce-product-image .ew-label, .wc-block-components-product-image .ew-label { position: absolute; top: .6rem; left: .6rem; z-index: 2; }
.ew-label--direct { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--donker); }
.ew-label--overleg { background: #fff; color: var(--wp--preset--color--donker); border: 2px solid var(--wp--preset--color--teal); }
.wp-block-woocommerce-product-price + * , .single-product .ew-label { margin-bottom: .5rem; }
/* Productoverzicht in de zijbalk */
.ew-winkelmenu ul { list-style: none; padding: 0; margin: 0; }
.ew-winkelmenu li { margin: .35rem 0; }
.ew-winkelmenu a { text-decoration: none; color: var(--wp--preset--color--donker); }
.ew-winkelmenu a:hover { text-decoration: underline; }
@media (max-width: 781px) { .ew-winkelmenu { order: 2; } }

/* Knoppen op productkaarten (webwinkel en gerelateerde producten) */
.wc-block-product .wc-block-components-product-button__button,
.wc-block-product .wp-block-button__link {
	display: inline-block; width: auto; margin: 0 1rem; padding: .6em 1.1em; border: 3px solid var(--wp--preset--color--donker) !important;
	border-radius: 3px; background: transparent; color: var(--wp--preset--color--donker); font-size: .78rem; font-weight: 600;
	letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; line-height: 1.35;
}
.wc-block-product .wc-block-components-product-button__button:hover,
.wc-block-product .wp-block-button__link:hover { background: var(--wp--preset--color--donker); color: #fff; }
/* Gerelateerde producten: zelfde kaarten, kleinere titels */
.single-product .wp-block-woocommerce-product-collection .wc-block-product { background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 12%); padding-bottom: 1rem; }
.single-product .wp-block-woocommerce-product-collection .wp-block-post-title { font-size: 1rem !important; padding: 0 1rem; }
.single-product .wp-block-woocommerce-product-collection .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--donker); }

/* Productkaarten: knop altijd onderaan, ook als de titel of prijs korter is */
.ew-producten .wc-block-product,
.single-product .wp-block-woocommerce-product-collection .wc-block-product { display: flex; flex-direction: column; }
.ew-producten .wc-block-product > .wp-block-woocommerce-product-button,
.single-product .wp-block-woocommerce-product-collection .wc-block-product > .wp-block-woocommerce-product-button { margin-top: auto !important; padding-top: 1rem; }
.wpcf7-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.wpcf7-form legend { font-weight: 600; color: var(--wp--preset--color--donker); margin-bottom: .3rem; }
.wpcf7-form .wpcf7-list-item { display: block; margin: .25rem 0; font-weight: 400; }
.wpcf7-form .wpcf7-list-item label { font-weight: 400; margin: 0; }
.wpcf7-form input[type="number"] { display: block; width: 10rem; margin-top: .3rem; padding: .7rem .8rem; border: 2px solid var(--wp--preset--color--donker); border-radius: 3px; font: inherit; }
.wpcf7-form .wpcf7-acceptance { display: block; margin: 1rem 0; }
.wpcf7-form .wpcf7-acceptance label { font-weight: 400; }
.wpcf7-form input[type="radio"], .wpcf7-form input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--donker); vertical-align: -2px; margin-right: .4rem; }

/* Overzichten van nieuws, nieuwsbrieven en jaarverslagen: foto met witte titelbalk eroverheen, zoals nu */
.ew-nieuwslijst { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2.5rem; }
.ew-nieuwskaart { position: relative; }
.ew-nieuwskaart .wp-block-post-featured-image { margin: 0; background: var(--wp--preset--color--zacht); }
.ew-nieuwskaart .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.ew-nieuwskaart__titel {
	position: relative; margin: -2.25rem 0 0 1.5rem !important; width: calc(100% - 1.5rem);
	background: #fff; padding: .7rem 1rem; box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
}
.ew-nieuwskaart__titel .wp-block-post-title { margin: 0; font-weight: 600; }
.ew-nieuwskaart__titel .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--donker); }
.ew-nieuwskaart__titel .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--teal); }
.ew-nieuwskaart__titel .wp-block-post-date { margin: .15rem 0 0; color: var(--wp--preset--color--tekst); }
.wp-block-query:has(> .ew-nieuwslijst) { padding-top: var(--wp--preset--spacing--60) !important; }
.ew-nieuwskaart:not(:has(.wp-block-post-featured-image)) .ew-nieuwskaart__titel { margin: 0 !important; width: 100%; }

/* Nieuwsoverzicht zoals nu: foto grotendeels grijs, in kleur bij aanwijzen of toetsenbordfocus;
   titelbalk gecentreerd over de onderkant van de foto. */
.ew-nieuwskaart .wp-block-post-featured-image img { height: 240px; aspect-ratio: auto !important; filter: grayscale(75%); transition: filter .3s; }
.ew-nieuwskaart:hover .wp-block-post-featured-image img,
.ew-nieuwskaart:focus-within .wp-block-post-featured-image img { filter: grayscale(0); }
.ew-nieuwskaart__titel { margin: -40px auto 0 !important; width: 90%; box-shadow: 4px 4px 4px rgb(0 0 0 / 40%); }
.ew-nieuwskaart__titel .wp-block-post-title { font-size: 1.0625rem; }
@media (prefers-reduced-motion: reduce) { .ew-nieuwskaart .wp-block-post-featured-image img { transition: none; } }

/* Menu-items met een submenu: geen onderstreping bij aanwijzen; de teal rand van het uitgevouwen submenu doet dat werk al */
.ew-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover,
.ew-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:focus { text-decoration: none; }

/* ---------- Voorpagina (nieuwe opbouw) ---------- */
.ew-sectie { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); }
.ew-sectie--zonder-boven { padding-top: 0; }
.ew-bovenkop { margin: 0 0 .25rem; font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--donker); }
.ew-bovenkop::before { content: ""; display: inline-block; width: 1.75rem; height: 3px; margin-right: .6rem; vertical-align: middle; background: var(--wp--preset--color--teal); }
.ew-meer { margin: 0 0 .4rem; font-weight: 600; }
.ew-meer a::after { content: " →"; }
.ew-foto-breed { margin: 0; }
.ew-foto-breed img { width: 100%; height: 380px; object-fit: cover; display: block; }
/* Wat we maken */
.ew-materialen { margin-top: 1.5rem; }
.ew-materialen .wp-block-image { margin: 0 0 1rem; overflow: hidden; }
.ew-materialen .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .4s ease; }
.ew-materialen .wp-block-column:hover .wp-block-image img,
.ew-materialen .wp-block-column:focus-within .wp-block-image img { transform: scale(1.04); }
.ew-materialen h3 { margin: 0 0 .35rem; }
.ew-materialen h3 a { text-decoration: none; color: var(--wp--preset--color--donker); }
.ew-materialen h3 a::after { content: " →"; color: var(--wp--preset--color--teal); }
.ew-materialen p { margin: 0; }
/* Doe mee */
.ew-doemee { margin-top: .75rem; }
.ew-doemee > .wp-block-column { border-top: 3px solid var(--wp--preset--color--teal); padding-top: 1.25rem; }
.ew-doemee h2 { font-size: var(--wp--preset--font-size--groot); margin-top: 0; }
/* Nieuws op de voorpagina: zelfde fotostijl als het nieuwsoverzicht */
.ew-nieuwsrij .wp-block-post-featured-image { margin: 0 0 .75rem; }
.ew-nieuwsrij .wp-block-post-featured-image img { filter: grayscale(75%); transition: filter .3s; }
.ew-nieuwsrij li:hover .wp-block-post-featured-image img,
.ew-nieuwsrij li:focus-within .wp-block-post-featured-image img { filter: grayscale(0); }
.ew-nieuwsrij .wp-block-post-title { margin: 0 0 .25rem; }
.ew-nieuwsrij .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--donker); }
.ew-nieuwsrij .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--teal); }
@media (prefers-reduced-motion: reduce) { .ew-materialen .wp-block-image img, .ew-nieuwsrij img { transition: none; } }
@media (max-width: 781px) { .ew-foto-breed img { height: 240px; } }
/* Geen witte strook tussen de laatste band van een pagina en de voet */
.wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0; }
/* Doe mee: knoppen op dezelfde hoogte, onderaan de kolom */
.ew-doemee > .wp-block-column { display: flex; flex-direction: column; }
.ew-doemee > .wp-block-column > .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
/* Pagina's met een kop: laatste band sluit direct aan op de voet */
.wp-block-post-content > .alignfull:last-child { margin-bottom: 0; }

/* Kop: account, winkelwagen en zoeken als drie gelijke pictogrammen op één lijn met het menu */
.ew-header .wp-block-woocommerce-customer-account,
.ew-header .wp-block-woocommerce-mini-cart,
.ew-header .ew-zoeken { margin: 0 !important; display: flex; align-items: center; }
.ew-header .wp-block-woocommerce-customer-account a,
.ew-header .wc-block-mini-cart__button,
.ew-header .ew-zoeken .wp-block-search__button {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0;
	padding: 0 !important; margin: 0; border: 0 !important; border-radius: 3px; background: transparent !important;
	color: var(--wp--preset--color--donker) !important; box-shadow: none;
}
.ew-header .wc-block-mini-cart__button:hover,
.ew-header .wp-block-woocommerce-customer-account a:hover,
.ew-header .ew-zoeken .wp-block-search__button:hover { background: var(--wp--preset--color--zacht) !important; }
.ew-header .wc-block-mini-cart__button:focus-visible,
.ew-header .wp-block-woocommerce-customer-account a:focus-visible,
.ew-header .ew-zoeken .wp-block-search__button:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 2px; }
.ew-header .wc-block-mini-cart__icon, .ew-header .wp-block-woocommerce-customer-account svg, .ew-header .ew-zoeken svg { width: 22px; height: 22px; }
.ew-header .ew-zoeken .wp-block-search__inside-wrapper { align-items: center; }
.ew-header .ew-zoeken form { margin: 0; }

/* Overal: kolommen die eindigen met een knop zetten die knop onderaan, zodat knoppen naast elkaar op één lijn staan
   (niet in de koppen met foto, daar staat de inhoud in het midden). */
.wp-block-columns:not(.ew-paginakop):not(.ew-hero) > .wp-block-column:has(> .wp-block-buttons:last-child) { display: flex; flex-direction: column; }
.wp-block-columns:not(.ew-paginakop):not(.ew-hero) > .wp-block-column > .wp-block-buttons:last-child { margin-top: auto; padding-top: 1rem; }

/* Kleine productlijst in een zijkolom (Verzenden en retourneren) */
.ew-producten--klein { margin-top: 1rem; }
.ew-producten--klein .wc-block-product { margin-bottom: 1rem; }
.ew-producten--klein .wp-block-post-title { font-size: 1rem !important; }

/* Nieuwsbrief-aanmelding in de footer (niet op de homepage, daar staat al een aanmeldblok) */
.ew-voet-nieuwsbrief { padding-bottom: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--50) !important; border-bottom: 1px solid rgb(53 55 64 / 25%); }
.ew-voet-nieuwsbrief h2 { margin: 0 0 .5rem; line-height: 1.2; }
.ew-voet-nieuwsbrief, .ew-voet-nieuwsbrief > .wp-block-column { align-items: flex-start !important; align-self: flex-start !important; }
.ew-voet-nieuwsbrief p { margin: 0; }
.ew-footer .ew-nb a { text-decoration: underline; }
.home .ew-voet-nieuwsbrief { display: none; }
.ew-nb-blok h2 { margin-top: 0; }