/* =============================================================================
   ShadowArt — design refresh
   =============================================================================
   Deze laag komt NA style.css, custom-styles.css en lp-styles.css. De SCSS-bron
   van style.css zit niet in de repo (alleen de gecompileerde + sourcemap), dus
   correcties horen hier. Volgorde: tokens -> fundament -> componenten.

   ponytail: overrides in plaats van de SCSS-bron herstellen. Plafond: bij de
   volgende grote themawijziging de SCSS uit css/style.css.map terughalen
   (sourcesContent bevat alle 19 partials) en dit bestand terugvouwen.
   ========================================================================== */

:root {
    /* Vlakken — cards krijgen een eigen vlak i.p.v. losse hairlines (common region) */
    --sa-bg: #181818;
    --sa-surface: #1f1f1f;
    --sa-surface-2: #262626;
    --sa-border: #3c3c3c;
    --sa-border-strong: #4d4d4d;

    /* Tekst — zuiver wit op bijna-zwart geeft halation; iets zachter leest rustiger */
    --sa-text: #f2f2f2;
    --sa-text-muted: #b9b9b9; /* 8.9:1 op --sa-bg */

    /* Merk */
    --sa-orange: #fea531;
    --sa-orange-hover: #ffb14a;
    --sa-orange-active: #d28725;
    /* Wit op oranje haalt 1.97:1 (WCAG faalt). Donker op oranje haalt 8.4:1. */
    --sa-on-orange: #181818;

    /* Ritme — 8px basis, zodat afstand betekenis krijgt i.p.v. overal 50px */
    --sa-space-1: 4px;
    --sa-space-2: 8px;
    --sa-space-3: 12px;
    --sa-space-4: 16px;
    --sa-space-5: 24px;
    --sa-space-6: 32px;
    --sa-space-7: 48px;
    --sa-space-8: 64px;
    --sa-space-9: 96px;

    /* Recht, zonder uitzondering: het merk leunt op het haarlijnenraster, strak
       gespannen doek en rechte masten. Afronding werkt daartegenin. Deze twee
       tokens zijn de enige plek waar dat ooit anders gezet zou moeten worden. */
    --sa-radius: 0;
    --sa-radius-lg: 0;
    --sa-focus: var(--sa-orange);
    --sa-ease: .2s ease;
}

/* =============================================================================
   1. Fundament
   ========================================================================== */

/* --- Zichtbare focus -------------------------------------------------------
   De basis-CSS zet outline:none op inputs en definieert nergens :focus-visible.
   Toetsenbordnavigatie was daardoor volledig onzichtbaar (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.accordion-head:focus-visible,
.header-burger:focus-visible {
    outline: 3px solid var(--sa-focus);
    outline-offset: 3px;
    border-radius: var(--sa-radius);
}

/* Muisklik mag geen ring achterlaten, toetsenbord wel. */
:focus:not(:focus-visible) {
    outline: none;
}

/* --- Screenreader-only ----------------------------------------------------- */
.sa-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Bewegingsvoorkeur ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Basisgrootte ----------------------------------------------------------
   body stond op 8-10px (op 1440px: 9,4px). Het thema geeft vrijwel elk element
   een eigen grootte, dus zichtbaar ging het meestal goed — maar alles wat die
   grootte vergeet, valt terug op 9,4px. Dat is een valkuil voor elke volgende
   toevoeging. De basis staat nu op 16px.

   De enige drie plekken die op de oude basis rekenden waren em-maten voor
   layout; die staan hieronder vast. Font-sizes in em bestaan nergens in het
   thema, dus tekstgroottes kunnen hier niet door verschuiven. */
body {
    font-size: 16px;
}

.home-screen-bottom,
.landing-zonnezeilen .landing-hero-scroll {
    width: 145px;  /* was 15.4em op de 9,4px basis */
    height: 145px;
}

.blog-search {
    width: 442px; /* was 47em op de 9,4px basis */
    max-width: 100%;
}

/* --- Typografie ------------------------------------------------------------
   Koppen stonden op Raleway 400: even zwaar als de broodtekst, waardoor de
   hiërarchie alleen op grootte leunde. Gewicht erbij maakt het onderscheid. */
.title-h1,
.title-h2,
.title-h3,
.title-h4,
h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -.01em;
}

.title-h5,
h5, h6 {
    font-weight: 600;
}

/* Broodtekst iets zachter dan #fff en met ruimere regelafstand. */
.sentence,
.text p,
.product-item-desc,
.accordion-body .sentence {
    color: var(--sa-text);
    line-height: 1.6;
}

.text p + p {
    margin-top: var(--sa-space-4);
}

/* Anker-offset voor de vaste header (o.a. /materialen/#zonnezeil). */
[id] {
    scroll-margin-top: 140px;
}

/* --- Sectieritme -----------------------------------------------------------
   Elke sectie had exact 50px padding. Zonder verschil tussen "ruimte binnen"
   en "ruimte tussen" groepeert niets (wet van nabijheid). */
.section {
    padding: var(--sa-space-8) 0;
}

.section--bg,
.section--offer {
    padding: var(--sa-space-9) 0;
}

@media (max-width: 1249.98px) {
    .section {
        padding: var(--sa-space-7) 0;
    }

    .section--bg,
    .section--offer {
        padding: var(--sa-space-8) 0;
    }
}

@media (max-width: 759.98px) {
    .section {
        padding: var(--sa-space-6) 0;
    }

    .section--bg,
    .section--offer {
        padding: var(--sa-space-7) 0;
    }
}

/* Kruimelpad is een smalle band, geen sectie op zich; het ruimere sectieritme
   duwde de paginatitel er anders 200px onder vandaan. */
.section--breadcrumbs {
    padding: var(--sa-space-5) 0 0;
}

.section--breadcrumbs + .section {
    padding-top: var(--sa-space-6);
}

/* Titel en bijbehorende inhoud horen dichter bij elkaar dan bij de buursectie. */
.section > .container > .title + .col,
.section > .container > .title + .product-content,
.section > .container > .title + .blog-content {
    margin-top: var(--sa-space-6);
}

/* =============================================================================
   2. Knoppen
   ========================================================================== */

.btn {
    align-items: center;
    justify-content: center;
    min-height: 48px; /* was 40-42px: onder de 44px richtlijn voor raakvlakken */
    padding: 14px 28px;
    border-radius: var(--sa-radius);
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    /* Hover/active zaten achter een min-width:1250px poort: op laptops en
       tablets was er geen enkele terugkoppeling. */
    transition: background-color var(--sa-ease), color var(--sa-ease),
                border-color var(--sa-ease), transform .1s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-orange {
    background: var(--sa-orange);
    color: var(--sa-on-orange);
}

.btn-orange:hover,
.btn-orange:focus-visible {
    background: var(--sa-orange-hover);
    color: var(--sa-on-orange);
}

.btn-orange:active {
    background: var(--sa-orange-active);
    color: var(--sa-on-orange);
}

.btn-white {
    color: var(--sa-text);
    border: 1px solid var(--sa-border-strong);
}

.btn-white:hover,
.btn-white:focus-visible {
    color: var(--sa-bg);
    background: #fff;
    border-color: #fff;
}

.btn-white:active {
    background: #c6c6c6;
    border-color: #c6c6c6;
}

/* Tekstlink met pijl: raakvlak vergroten zonder de vorm te veranderen. */
.btn-more {
    min-height: 44px;
    align-items: center;
    align-self: flex-start;
    width: auto;
}

.btn-more:hover,
.btn-more:focus-visible {
    color: var(--sa-orange-hover);
}

.btn-more svg {
    transition: transform var(--sa-ease);
}

.btn-more:hover svg,
.btn-more:focus-visible svg {
    transform: translateX(5px);
}

@media (max-width: 759.98px) {
    .btn {
        min-height: 52px;
    }
}

/* =============================================================================
   3. Header en navigatie
   ========================================================================== */

.header-burger {
    /* Was een 28x22 div zonder rol; nu een knop met een fatsoenlijk raakvlak. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 11px 8px;
    background: none;
    border: 0;
    color: inherit;
}

.header-logo img {
    max-height: 64px;
    width: auto;
}

/* --- Desktop: navigatie uitklappen ----------------------------------------
   De hele navigatie zat op élke breedte achter een hamburger, ook op 1440px+.
   Verborgen navigatie kost vindbaarheid en een extra klik terwijl er ruimte
   zat voor vijf items. */
@media (min-width: 1250px) {
    .header-burger {
        display: none;
    }

    .header-content {
        gap: var(--sa-space-7);
        padding: 20px 0;
    }

    .header-menu {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        flex: 1;
        overflow: visible;
        transform: none;
        background: transparent;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        transition: none;
    }

    .header-menu::before,
    .header-menu::after {
        content: none;
    }

    .header-nav {
        flex-direction: row;
        align-items: center;
        width: auto;
        height: auto;
        padding: 0;
        gap: var(--sa-space-6);
        opacity: 1;
        transition: none;
    }

    .header-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 0;
        padding: 10px 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .header-nav a:hover {
        border-bottom-color: var(--sa-orange);
    }

    /* Waar ben ik? Zonder actieve staat mist de navigatie oriëntatie. */
    .header-nav a[aria-current='page'] {
        color: var(--sa-orange);
        border-bottom-color: var(--sa-orange);
    }

    .header-menu-btn {
        opacity: 1;
        width: auto;
        height: auto;
        min-height: 44px;
        margin-left: auto;
        padding: 13px 24px;
        font-size: 13px;
        line-height: 16px;
        font-weight: 600;
        letter-spacing: .04em;
        border-radius: var(--sa-radius);
        background: var(--sa-orange);
        color: var(--sa-on-orange);
        white-space: nowrap;
        transition: background-color var(--sa-ease);
    }

    .header-menu-btn:hover {
        background: var(--sa-orange-hover);
        color: var(--sa-on-orange);
    }

    /* Adres/mail stonden alleen in het overlay-menu; op desktop overbodig
       naast het telefoonnummer dat al in de balk staat. */
    .header-menu-contact {
        display: none;
    }

    .header-phone {
        order: 3;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        white-space: nowrap;
    }

    main {
        margin-top: 104px;
    }
}

/* Overlay-menu (mobiel/tablet): raakvlakken en leesbaarheid. */
@media (max-width: 1249.98px) {
    .header-nav a {
        padding: var(--sa-space-2) 0;
    }

    .header-menu-contact-item a {
        min-height: 44px;
        align-items: center;
    }
}

/* =============================================================================
   4. Productkaarten (producten, home, portfolio)
   ========================================================================== */

.product-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Gelijke rijhoogtes: de Soliday-banner is van nature hoger dan een kaart en
       rekte anders alleen de rij mee waar hij in staat. */
    grid-auto-rows: 1fr;
    gap: var(--sa-space-6);
    align-items: stretch;
}

.product-item {
    width: auto;
    margin: 0;
    align-items: stretch;
    gap: var(--sa-space-5);
    padding: var(--sa-space-5);
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    transition: border-color var(--sa-ease), background-color var(--sa-ease);
}

.product-item:hover {
    border-color: var(--sa-border-strong);
    background: var(--sa-surface-2);
}

/* De hairline liep 100vw door en werkte tegen de kaartvorm in. */
.product-item::after,
.product-item:last-child::after {
    content: none;
}

.product-item-pic {
    /* Zonder vaste verhouding bepaalde elke render zijn eigen hoogte; dat gaf
       de grillige gaten in het raster. De verhouding is de ondergrens: is de
       kaart hoger, dan rekt het vlak mee zodat er geen dode ruimte overblijft. */
    width: 45%;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    padding: 0;
    border-radius: var(--sa-radius);
    overflow: hidden;
}

.product-item-pic img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.product-item-pic .hover {
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}

.product-item-info {
    /* max-width:285px liet ~100px per kaart ongebruikt. Kolomrichting in plaats
       van een wrap-flex: space-between smeerde de inhoud uit over de hoogte van
       de langste kaart in de rij, met gaten tussen titel, prijs en link. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0;
    gap: var(--sa-space-3);
}

.product-item-info .tags {
    width: 100%;
}

/* De link zakt wel naar de onderrand, zodat die over alle kaarten op een lijn staat. */
.product-item .btn-more {
    margin-top: auto;
}

.product-item-title {
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0;
}

.product-item-title:hover {
    color: var(--sa-orange);
}

.product-item-price {
    width: 100%;
    color: var(--sa-text-muted);
}

.product-item-price span {
    color: var(--sa-text);
    font-weight: 600;
}

.product-item-info .tags {
    margin-bottom: 0;
}

.product-item-desc {
    color: var(--sa-text-muted);
}

/* Kaart in z'n geheel klikbaar: de titel-link spant zich over de kaart. Alleen
   waar de titel echt een link is — portfolio gebruikt dezelfde kaart met een
   <p> als titel en mag geen inerte laag over zich heen krijgen. */
.product-item {
    position: relative;
}

.product-item-pic {
    position: relative; /* houdt de hover-afbeelding binnen het beeldvlak */
}

.product-item a.product-item-title::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--sa-radius-lg);
}

/* De categorie-links moeten boven die laag blijven werken. */
.product-item .tags {
    position: relative;
    z-index: 1;
}

/* --- Soliday-banner --------------------------------------------------------
   -desc stond op 50% van een al smalle kolom; met h3-tekst (36-42px) brak dat
   naar één woord per regel en liep de knoptekst buiten zijn rand. */
/* Dezelfde indeling als de kaarten ernaast: beeld links, tekst rechts. Als
   staande tegel met het beeld onderin bepaalde de banner de hoogte van de rij,
   en in de restruimte die overbleef paste de render alleen nog aangesneden. */
.product-item--banner {
    width: auto;
    margin: 0;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: var(--sa-space-5);
    padding: var(--sa-space-5);
    border-radius: var(--sa-radius-lg);
}

.product-item--banner-desc {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.product-item--banner p {
    /* Gelijk aan .product-item-title, zodat de tegel meeloopt in de rij. */
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.25;
    font-weight: 600;
    margin-bottom: var(--sa-space-5);
}

.product-item--banner .btn {
    width: auto;
    max-width: 100%;
}

.product-item--banner .product-item-pic {
    width: 45%;
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: auto;
    align-self: stretch;
}

/* Een render op een egale ondergrond hoort heel te blijven; contain in plaats
   van cover, net als bij de productkaarten. */
.product-item--banner .product-item-pic img {
    object-fit: contain;
}

/* --- Portfolio -------------------------------------------------------------
   Portfolio deelt .product-item met de productkaart, maar toont foto's van
   opgeleverde projecten in plaats van renders op een egale ondergrond. Die
   vragen een staande kaart met een vullende uitsnede; een render wil juist
   volledig in beeld blijven. Dit onderscheid stond eerder met !important in
   lp-styles.css en gold toen voor beide. */
.product-content--portfolio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Geen gelijke rijhoogtes over veertien rijen: een enkele lange omschrijving
       zou dan elke rij meetrekken. Binnen een rij lijnen ze wel uit. */
    grid-auto-rows: auto;
    gap: var(--sa-space-7) var(--sa-space-5);
}

/* Precies vier items vullen drie kolommen niet: er blijft er dan een alleen op
   de laatste rij achter. Dat treft de landingspagina's, die vier projecten
   tonen; twee kolommen geven daar een gesloten blok van 2x2. De portfoliopagina
   zelf (41 items) houdt drie kolommen.

   Alleen boven 1250px: daaronder staat het raster al op twee of een kolom, en
   :has() weegt zwaarder dan die regels. */
@media (min-width: 1250px) {
    .product-content--portfolio:has(> .product-item--portfolio:nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.product-item--portfolio {
    flex-direction: column;
    gap: var(--sa-space-4);
    /* Veertig omkaderde vlakken naast elkaar is onrustig; bij een galerij doen
       de foto's zelf het groeperen. */
    padding: 0;
    background: none;
    border: 0;
}

.product-item--portfolio:hover {
    background: none;
}

.product-item--portfolio .product-item-pic {
    width: 100%;
    aspect-ratio: 16 / 10;
}

.product-item--portfolio .product-item-pic img,
.product-item--portfolio .product-item-pic .swiper-slide img {
    object-fit: cover;
}

.product-item--portfolio .product-item-info {
    width: 100%;
    align-content: flex-start;
    row-gap: var(--sa-space-2);
}

.product-item--portfolio .product-item-title {
    font-size: clamp(17px, 1.2vw, 20px);
}

@media (max-width: 1249.98px) {
    .product-content--portfolio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 759.98px) {
    .product-content {
        grid-template-columns: minmax(0, 1fr);
        /* In een enkele kolom staat niets naast elkaar; gelijke hoogtes leveren
           daar alleen loze ruimte onder de kortere kaarten op. */
        grid-auto-rows: auto;
        gap: var(--sa-space-4);
    }

    .product-content--portfolio {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sa-space-6);
    }

    .product-item {
        flex-direction: column;
        padding: var(--sa-space-4);
    }

    .product-item-pic,
    .product-item--banner .product-item-pic {
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .product-item--banner {
        flex-direction: column;
        padding: var(--sa-space-4);
    }

    .product-item-info {
        margin-top: 0;
    }
}

/* =============================================================================
   5. Tags
   ========================================================================== */

.tags {
    gap: var(--sa-space-2);
}

.tag {
    margin-right: 0;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sa-text-muted);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--sa-border);
    opacity: 1;
}

.tag:hover,
.tag:focus-visible {
    color: var(--sa-text);
    border-color: var(--sa-border-strong);
    background: rgba(255, 255, 255, .09);
}

/* =============================================================================
   6. Blogkaarten
   ========================================================================== */

.blog-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sa-space-7) var(--sa-space-5);
    align-items: stretch;
}

.blog-item {
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.blog-item::after,
.blog-item:last-child::after {
    content: none;
}

.blog-item-pic {
    /* height:32.3em rekende op een 9.4px body-basis; een vaste verhouding is
       voorspelbaar en houdt de rijen gelijk. */
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--sa-space-4);
    padding: 0;
    border-radius: var(--sa-radius);
    overflow: hidden;
}

.blog-item-pic img {
    transition: transform .4s ease;
}

.blog-item:hover .blog-item-pic img {
    transform: scale(1.04);
}

.blog-item-info {
    /* space-between over de regels duwt de metaregel naar de onderkant, zodat
       "meer lezen" en de datum over alle kaarten op één lijn staan. */
    flex: 1;
    align-content: space-between;
    row-gap: var(--sa-space-3);
    padding: 0;
}

/* De tekst stond 10px ingesprongen terwijl de foto op 1px stond: titels staken
   daardoor rechts buiten de kaart. */
.blog-item-title {
    width: 100%;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 0;
}

.blog-item-title:hover {
    color: var(--sa-orange);
}

.blog-item-excerpt {
    width: 100%;
    color: var(--sa-text-muted);
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.blog-item-info .tags {
    width: 100%;
    margin-bottom: 0;
}

.blog-item-date {
    color: var(--sa-text-muted);
}

@media (max-width: 1249.98px) {
    .blog-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 759.98px) {
    .blog-content {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sa-space-6);
    }

    .blog-item-pic {
        height: auto;
        max-height: none;
        aspect-ratio: 16 / 10;
    }
}

/* --- Blogfilters ----------------------------------------------------------- */
.blog-tag {
    gap: var(--sa-space-2);
    padding-left: 0;
    margin-bottom: var(--sa-space-6);
}

.blog-tag-one {
    font-size: 14px;
    line-height: 1.2;
    padding: 9px 16px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sa-border);
    color: var(--sa-text-muted);
}

.blog-tag-one::after {
    content: none; /* de "/" tussen filters las als tekst, niet als knoppen */
}

.blog-tag-one:hover {
    color: var(--sa-text);
    border-color: var(--sa-border-strong);
}

.blog-tag-one.active {
    background: var(--sa-orange);
    border-color: var(--sa-orange);
    color: var(--sa-on-orange);
    font-weight: 600;
}

.blog-search-form {
    border-bottom-color: var(--sa-border-strong);
}

/* =============================================================================
   7. Accordeon / veelgestelde vragen
   ========================================================================== */

.accordion {
    padding-left: 0;
    margin-top: 0;
    border-bottom: 1px solid var(--sa-border);
}

.accordion:first-of-type {
    margin-top: var(--sa-space-6);
    border-top: 1px solid var(--sa-border);
}

.accordion-head {
    /* Was een div met een klik-handler: niet bereikbaar met het toetsenbord. */
    width: 100%;
    padding: var(--sa-space-5) 48px var(--sa-space-5) 0;
    background: none;
    border: 0;
    border-bottom: 0;
    color: inherit;
    font-family: inherit;
    font-weight: 600;
    text-align: left;
    min-height: 64px;
}

.accordion-head:hover {
    color: var(--sa-orange);
}

.accordion-head::before,
.accordion-head::after {
    right: 8px;
    background: var(--sa-orange);
}

.accordion-body {
    padding: 0 48px var(--sa-space-5) 0;
    max-width: 68ch;
}

.accordion-body .sentence {
    color: var(--sa-text-muted);
}

.accordion-body .sentence + .sentence {
    margin-top: var(--sa-space-3);
}

/* De vragen stonden in .container--half: 43% van het scherm gevuld, de rest
   leeg. Een leesbare maat plus een zijkolom vult de ruimte zinvol. */
.sa-faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-space-7);
    align-items: start;
}

@media (min-width: 1000px) {
    .sa-faq-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--sa-space-9);
    }
}

.sa-faq-aside {
    padding: var(--sa-space-6);
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
}

@media (min-width: 1000px) {
    .sa-faq-aside {
        position: sticky;
        top: 140px;
    }
}

.sa-faq-aside .sa-faq-aside-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--sa-space-3);
}

.sa-faq-aside p {
    font-size: 15px;
    color: var(--sa-text-muted);
    line-height: 1.6;
    margin-bottom: var(--sa-space-5);
}

.sa-faq-aside .btn {
    width: 100%;
    margin: 0 0 var(--sa-space-3);
}

.sa-faq-aside-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 17px;
    font-weight: 600;
    color: var(--sa-orange);
}

.sa-faq-aside-phone:hover {
    color: var(--sa-orange-hover);
}

/* =============================================================================
   8. Team
   ========================================================================== */

.section .col:has(> .person-item) {
    display: grid;
    /* 4 kolommen bij 5 personen liet er één alleen op rij twee achter. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sa-space-6) var(--sa-space-5);
    align-items: start;
}

.person-item {
    width: auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

.person-item-pic {
    /* Vaste verhouding + gelijke uitsnede: koppen stonden nu op wisselende
       hoogtes doordat elke foto zijn eigen hoogte bepaalde. */
    height: auto;
    aspect-ratio: 3 / 4;
    padding: 0;
    border-radius: var(--sa-radius);
    overflow: hidden;
    background: var(--sa-surface);
}

.person-item-pic img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center top;
}

.person-item .title {
    padding-left: 0;
    margin: var(--sa-space-4) 0 var(--sa-space-2);
    font-size: clamp(18px, 1.3vw, 22px);
    line-height: 1.25;
}

.person-item .sentence {
    padding-left: 0;
    color: var(--sa-text-muted);
}

/* =============================================================================
   9. Processtappen ("Zo pakken we het aan")
   ========================================================================== */

.section .col:has(> .process-item) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sa-space-6) var(--sa-space-5);
    counter-reset: sa-step;
}

@media (max-width: 1249.98px) {
    .section .col:has(> .process-item) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 759.98px) {
    .section .col:has(> .process-item) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.process-item {
    /* padding-right:25% sneed een kwart van elke kolom weg. */
    width: auto;
    padding: var(--sa-space-5) 0 0;
    counter-increment: sa-step;
    position: relative;
    border-top: 2px solid var(--sa-border);
}

/* Vier gelijke blokjes lieten niet zien dat het een volgorde is. */
.process-item::before {
    content: counter(sa-step);
    position: absolute;
    top: -1px;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--sa-orange);
    color: var(--sa-on-orange);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.process-item img {
    margin-top: var(--sa-space-4);
    margin-left: 0;
}

.process-item .title {
    margin: var(--sa-space-3) 0 var(--sa-space-2);
}

.process-item .sentence {
    color: var(--sa-text-muted);
}

@media (max-width: 759.98px) {
    .process-item {
        display: block;
        padding-top: var(--sa-space-6);
    }
}

/* =============================================================================
   10. Materiaalkaarten op home
   ========================================================================== */

.home-material {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sa-space-5);
    align-items: stretch;
}

@media (max-width: 1249.98px) {
    .home-material {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 759.98px) {
    .home-material {
        grid-template-columns: minmax(0, 1fr);
    }
}

.home-material-item {
    width: auto;
    display: flex;
    flex-direction: column;
}

.home-material-pic {
    aspect-ratio: 4 / 3;
    border-radius: var(--sa-radius);
    overflow: hidden;
}

.home-material-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-material-title span {
    /* De onderstreping las als standaard linkopmaak, niet als kaarttitel. */
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    transition: border-color var(--sa-ease);
}

.home-material-item:hover .home-material-title span {
    border-bottom-color: var(--sa-orange);
}

.home-material-desc {
    color: var(--sa-text-muted);
}

.home-material-item--more {
    justify-content: center;
    padding: var(--sa-space-6);
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
}

.home-material-item--more .btn {
    margin-top: var(--sa-space-5);
    width: 100%;
}

/* =============================================================================
   11. Landen ("Waar zijn we actief?")
   ========================================================================== */

.country-item-pic img {
    max-height: 220px;
    width: auto;
    opacity: .55;
    transition: opacity var(--sa-ease);
}

.country-item:hover .country-item-pic img {
    opacity: .8;
}

.country-item-title {
    font-size: clamp(18px, 1.4vw, 24px);
    padding: var(--sa-space-5) 0 0;
    text-align: center;
}

/* =============================================================================
   12. Footer
   ========================================================================== */

.footer-menu {
    /* width:50% zonder tussenruimte liet "Veelgestelde vragen" en "Materialen"
       tegen elkaar aan plakken. Kolommen lezen nu ook van boven naar beneden. */
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--sa-space-3) var(--sa-space-6);
}

.footer-menu-link {
    width: auto;
    margin-top: 0;
}

.footer-menu a,
.footer-contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-bottom: 1px solid transparent;
}

.footer-menu a:hover,
.footer-contact-link:hover {
    border-bottom-color: #fff;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sa-radius);
    color: var(--sa-orange);
    transition: background-color var(--sa-ease), color var(--sa-ease);
}

.footer-social a:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--sa-orange-hover);
}

.footer-contact-address {
    color: var(--sa-text-muted);
    line-height: 1.6;
}

.footer .sentence {
    color: var(--sa-text-muted);
}

.footer .sentence a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-bottom: 1px solid transparent;
}

.footer .sentence a:hover {
    border-bottom-color: currentColor;
}

@media (max-width: 759.98px) {
    .footer-menu {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =============================================================================
   13. Contact
   ========================================================================== */

/* Telefoon en e-mail wáren links, maar zagen er exact uit als de tekst
   ernaast: wit, geen onderstreping, rand transparant. */
a.contact-desc {
    color: var(--sa-orange);
    border-bottom-color: currentColor;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

a.contact-desc:hover {
    color: var(--sa-orange-hover);
    border-bottom-color: currentColor;
}

.contact-block .contact-desc:first-child {
    color: var(--sa-text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--sa-space-1);
}

.contact-map {
    border-radius: var(--sa-radius-lg);
    overflow: hidden;
}

.sa-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-3);
    margin-top: var(--sa-space-5);
}

/* =============================================================================
   14. Formulieren
   ========================================================================== */

.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 textarea {
    border-bottom-color: var(--sa-border-strong);
    transition: border-color var(--sa-ease);
}

.wpcf7 input[type='text']:focus,
.wpcf7 input[type='email']:focus,
.wpcf7 input[type='tel']:focus,
.wpcf7 textarea:focus {
    border-bottom-color: var(--sa-orange);
}

/* De verzendknop was de zwakste knop op de belangrijkste pagina en de tekst
   liep buiten de rand. Contact Form 7 zet geen type-attribuut op de knop, dus
   de klasse .wpcf7-submit is hier het aanknopingspunt. */
.wpcf7-submit,
.btn.wpcf7-submit {
    width: auto;
    min-height: 52px;
    padding: 16px 40px;
    background: var(--sa-orange);
    color: var(--sa-on-orange);
    border: 0;
    border-radius: var(--sa-radius);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--sa-ease);
}

.wpcf7-submit:hover,
.btn.wpcf7-submit:hover {
    background: var(--sa-orange-hover);
    color: var(--sa-on-orange);
    border: 0;
}

.wpcf7 .wpcf7-not-valid-tip {
    color: #ff8a7a;
    font-size: 13px;
    margin-top: var(--sa-space-1);
}

/* =============================================================================
   15. Paginering
   ========================================================================== */

.pagination a,
.pagination span,
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--sa-radius);
}

.page-numbers.current {
    background: var(--sa-orange);
    border-color: var(--sa-orange);
    color: var(--sa-on-orange);
    font-weight: 600;
}

/* =============================================================================
   16. Breadcrumbs
   ========================================================================== */

.section--breadcrumbs .rank-math-breadcrumb {
    padding-left: 0;
}

.section--breadcrumbs span {
    color: var(--sa-text-muted);
}