/* Korff Dakwerken — wat WordPress nodig heeft bovenop het ontwerp (basis.css, ongewijzigd), plus de afwerking die
   in het ontwerp ontbrak. Regels hier staan buiten @layer en winnen dus van de preflight in basis.css. */

/* ---------------------------------------------------------------------------
   WordPress
--------------------------------------------------------------------------- */

/* Body krijgt de achtergrond van de site (het ontwerp zet hem op [data-korff-site]). */
body { margin: 0; background: #fff; }

/* Beheerbalk: de plakkende kopbalk schuift eronder; onder 601 px scrolt de WP-balk mee (zoals WordPress zelf). */
.admin-bar .korff-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (width < 601px) {
  .admin-bar .korff-header { top: 0; }
}
@media (width >= 1280px) {
  .admin-bar .korff-header--over-hero { top: var(--wp-admin--admin-bar--height, 32px); }
}
html.qz-adminbar-hidden .admin-bar .korff-header { top: 0; }

/* Bewerkankers van de basis (vóór elke laag) tellen niet mee in de opmaak. */
.qz-laag-anker { display: none !important; }

/* Honeypot van de formulieren. */
.korff-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Beelden in de tekst (overgenomen van de huidige site): de maat van het ontwerp staat in width/height;
   het origineel kan een andere verhouding hebben dan de bijsnede van toen → vullen in plaats van vervormen. */
.korff-tekstblok__inhoud img[width][height] { object-fit: cover; }

/* ---------------------------------------------------------------------------
   Paginawissel: de nieuwe pagina begint achter de zwarte banen (site.js schuift ze weg).
--------------------------------------------------------------------------- */
html.korff-wissel-in .korff-wissel__paneel { opacity: 1; }
html.korff-wissel-in .korff-site__schil { transform: translateY(20vh); }
@media (prefers-reduced-motion: reduce) {
  html.korff-wissel-in .korff-site__schil { transform: none; }
}

/* ---------------------------------------------------------------------------
   Kopbalk: bij wit worden (scrollen op de homepage, of een uitklapmenu openen) liep in het ontwerp alleen de
   achtergrond, de onderrand en het logo zacht over; de zwarte bovenbalk en de tekstkleur sprongen. Zelfde duur en
   kromme als het ontwerp (feedback 16-10: "niet helemaal smooth").
--------------------------------------------------------------------------- */
.korff-header .korff-topbalk { transition: background-color var(--korff-duration-normaal) var(--korff-easing-standaard); }
.korff-header .korff-nav__knop,
.korff-header .korff-nav__link { transition: color var(--korff-duration-normaal) var(--korff-easing-standaard), background-color var(--korff-duration-normaal) var(--korff-easing-standaard); }
/* Uitklappaneel: site.js laat het in- en uitvloeien (WAAPI); tijdens het sluiten blijft het staan tot de animatie klaar is. */
.korff-nav__paneelinhoud { will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) {
  .korff-header .korff-topbalk, .korff-header .korff-nav__knop, .korff-header .korff-nav__link { transition: none; }
}

/* ---------------------------------------------------------------------------
   Tussenmaten
--------------------------------------------------------------------------- */
/* Over ons, certificaatlogo's: de rasterkolommen (1fr) krompen niet onder de breedte van het logo → de pagina schoof
   horizontaal op 1024 (13 px) en 320 (18 px), ook in het ontwerp. Vakken mogen krimpen; het logo past zich aan (contain). */
.korff-overons-cert > *,
.korff-overons-cert__logos[role=list] > li { min-inline-size: 0; }

/* Ankers op lagen zonder de ankerklasse van het ontwerp (tegels "oplossingen" op Onze diensten): zelfde ruimte onder de kopbalk. */
.korff-laag[id] { scroll-margin-block-start: 160px; }

/* ---------------------------------------------------------------------------
   Hovers die het ontwerp miste (alles wat klikbaar is reageert), in de taal van het ontwerp: rood + dikkere onderstreping,
   zelfde duur/kromme. Gemeten met tests/hover.js.
--------------------------------------------------------------------------- */
.korff-teamkaart__mail,
.korff-cta__link { transition: color var(--korff-duration-snel) var(--korff-easing-standaard), text-decoration-thickness var(--korff-duration-snel) var(--korff-easing-standaard); }
.korff-teamkaart__mail:hover { color: var(--korff-color-rood-600); text-decoration-thickness: 2px; }
.korff-cta__link:hover { text-decoration-thickness: 2px; }
.korff-hero__pauze { transition: background-color var(--korff-duration-snel) var(--korff-easing-standaard); }
.korff-hero__pauze:hover { background: #000000d9; }
.korff-logo img { transition: opacity var(--korff-duration-snel) var(--korff-easing-standaard); }
.korff-logo:hover img { opacity: .8; }
.korff-logo--wissel:hover .korff-logo__licht { opacity: .8; }
@media (width >= 1280px) {
  .korff-header--transparant .korff-logo--wissel:hover .korff-logo__donker { opacity: 0; }
}
/* Tekstlinks in grijze lagen en vakken: het ontwerp zette daar de linkkleur vast, waardoor de hoverkleur wegviel. */
.korff-laag--grijs .korff-tekstblok__inhoud a:hover,
.korff-vak .korff-tekstblok__inhoud a:hover { color: var(--nl-link-hover-color); }
/* Contact: social-icoontjes (zwart vlak) en "Liever bellen?", zoals de belknop bij de contactpersoon. */
.korff-contactlaag__kaart--gegevens a[aria-label] { transition: background-color var(--korff-duration-snel) var(--korff-easing-standaard); }
.korff-contactlaag__kaart--gegevens a[aria-label]:hover { background: var(--korff-color-rood-500); }
.korff-contactlaag__bellen a { text-underline-offset: .2em; }
.korff-contactlaag__bellen a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Hoofdmenu: het hoofditem (Hellende daken …) is zelf een link, het pijltje ernaast opent het paneel (feedback 22-10).
   Zelfde maat als de oorspronkelijke knop: de padding wordt over link en pijl verdeeld (2px = de gap van de knop).
--------------------------------------------------------------------------- */
.korff-nav__link--hoofd { display: inline-flex; padding-inline-end: 0; }
.korff-nav__knop--pijl { display: inline-flex; padding-inline-start: 2px; }
.korff-nav__item:hover > .korff-nav__link--hoofd,
.korff-nav__item.is-open > .korff-nav__link--hoofd,
.korff-nav__item:hover > .korff-nav__knop--pijl { color: var(--korff-header-nav-hover-color); }

/* Downloads: logo van de uitgever in plaats van het documenticoon; documenten op aanvraag (zoals BOKO). */
.korff-download__logo { display: grid; place-items: center; inline-size: 72px; block-size: 48px; }
.korff-download__logo img { display: block; max-inline-size: 72px; max-block-size: 44px; inline-size: auto; block-size: auto; object-fit: contain; }
.korff-downloads__groep + .korff-downloads__groep { margin-block-start: var(--basis-space-block-3xl); }
.korff-downloads__groep > .korff-kop { margin-block-end: var(--basis-space-block-lg); }
.korff-downloads__aanvraag > .korff-kop { margin-block-end: 0; }
.korff-downloads__aanvraag > p { margin-block: var(--basis-space-block-sm) var(--basis-space-block-lg); }
.korff-downloads__aanvraag > p a { color: var(--nl-link-color); text-decoration: underline; text-underline-offset: var(--nl-link-text-underline-offset); }
.korff-downloads__aanvraag > p a:hover { color: var(--nl-link-hover-color); text-decoration-thickness: 2px; }
/* Footer "Aangesloten bij": met het IKO-logo erbij (10 logo's) past de rij op 1440 alleen met iets minder tussenruimte. */
.korff-footer .korff-footer__logos[role=list] { column-gap: clamp(20px, 2.2vw, 32px); }

/* ---------------------------------------------------------------------------
   Team als raster zoals werkenbij.korffdakwerken.nl/waarom-korff/ (feedback 23-10; daar: css/components/laag-team.css).
   Kaarten 390×492 met naam op matglas, rode kaart met twee knoppen; 1 / 2 / 4 kolommen, 20px ertussen.
--------------------------------------------------------------------------- */
.korff-teamraster__kop { display: flex; flex-direction: column; gap: 24px; margin-block-end: 24px; text-align: center; }
.korff-teamraster__titel { margin: 0; }
.korff-teamraster__tekst { margin: 0 auto; max-inline-size: 1090px; font-size: 16px; line-height: 1.5; }
.korff-teamraster { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }

.korff-teamlid { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 390 / 492; overflow: hidden; background: var(--korff-color-grijs-100); }
.korff-teamlid__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.korff-teamlid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0) 48.182%, rgb(0 0 0 / 0.5) 100%); pointer-events: none; }
.korff-teamlid__plaat { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin: 24px; padding: 16px; background: rgb(255 255 255 / 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.korff-teamlid__tekst { display: flex; flex-direction: column; }
.korff-teamlid__naam { margin: 0; font-family: var(--korff-font-family-kop); font-weight: var(--korff-font-weight-bold); font-size: 20px; line-height: 1.4; text-transform: uppercase; color: var(--korff-color-wit); }
.korff-teamlid__functie { margin: 0; font-size: 16px; line-height: 1; color: var(--korff-color-wit); }
.korff-teamlid__links { display: flex; gap: 8px; }
.korff-teamraster__link { display: flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; color: var(--korff-color-wit); transition: color var(--korff-duration-snel) var(--korff-easing-standaard); }
.korff-teamraster__link .korff-icoon { inline-size: 24px; block-size: 24px; }
.korff-teamraster__link:is(:hover, :focus-visible) { color: var(--korff-color-rood-500); }

.korff-teamraster__cta { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; aspect-ratio: 390 / 492; padding: 24px; overflow: hidden; background: var(--basis-color-verloop-rood); color: var(--korff-color-wit); }
.korff-teamraster__decor { position: absolute; inset: 0; background: url(../../img/korff/cta-vorm-mobiel-rood.svg) no-repeat left bottom / 100% 63.8%; pointer-events: none; }
.korff-teamraster__cta-inhoud { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.korff-teamraster__cta-titel { margin: 0; font-family: var(--korff-font-family-kop); font-weight: var(--korff-font-weight-bold); font-size: 24px; line-height: 1.2; text-transform: uppercase; }
.korff-teamraster__cta-tekst { margin: 0; font-size: 16px; line-height: 1.5; }
.korff-teamraster__knoppen { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.korff-teamraster__knoppen .korff-knop { justify-content: space-between; inline-size: 100%; }

@media (min-width: 600px) {
	.korff-teamraster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.korff-teamraster__kop { margin-block-end: 64px; }
	.korff-teamraster__tekst { font-size: clamp(17px, 1.04vw, 20px); }
	.korff-teamraster { grid-template-columns: repeat(4, 1fr); }
	.korff-teamlid__naam { font-size: 24px; }
	.korff-teamraster__cta-titel { font-size: clamp(24px, 1.7vw, 32px); }
}