/*
Theme Name: Avada Child (StaffingNow)
Template: Avada
Version: 1.0
*/

/* ============================================================
   SELF-HOSTED FONTS — Heebo (replaces Avada fusion-gfonts)
   ============================================================ */

@font-face {
    font-family: 'Heebo';
    src: url('fonts/heebo/heebo-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: url('fonts/heebo/heebo-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: url('fonts/heebo/heebo-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: url('fonts/heebo/heebo-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: url('fonts/heebo/heebo-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: url('fonts/heebo/heebo-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   SELF-HOSTED FONTS — Open Sans, Oswald, Montserrat
   (replaces Avada fusion-gfonts; bugreport 06-10-2026)
   ============================================================
   Avada's "Local Google Fonts" caching regenerates these three under a
   Google-assigned hash filename (e.g. "NGSpv5_NC0k9P...woff2"). That hash
   pattern is exactly what generic ad-blocklists (EasyList e.d.) heuristically
   flag as a tracking/fingerprint asset, so some real visitors see a failed
   request in their console (usually invisible — browser falls back to a
   system font). Fixed the same way as Heebo already was: host the actual
   files ourselves under a normal name, so Avada's own hashed copies are
   never needed/requested.
   Montserrat and Oswald are variable fonts — Google serves one file per
   style that covers a weight range via font-variation-settings, so several
   @font-face weights below intentionally point at the same file; that
   matches what Google's own CSS does, not a mistake. */

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans/opensans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald/oswald-var.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald/oswald-var.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/montserrat-var.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/montserrat-var.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/montserrat-var.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/montserrat-600italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   NAV — AWB menu ignores nav_typography global option;
   override here so Heebo is used consistently.
   ============================================================ */

.awb-menu__main-ul,
.awb-menu__main-a {
    font-family: Heebo, Arial, Helvetica, sans-serif;
}

/* ============================================================
   CONTRAST — WCAG AA fixes
   ============================================================ */

/* 1c: Grey muted text (#a8abb4) on white/light backgrounds fails 4.5:1.
   Darken to #6b7280 (≈4.6:1 on white) in light-bg sections. */
.fusion-column-wrapper .fusion-checklist li,
.fusion-column-wrapper .fusion-checklist li a,
.fusion-body .fusion-checklist li {
    color: #6b7280;
}

/* 1c: White on brand blue #10ade5 = 2.58:1 (fails AA for normal text).
   Darken blue to #0089b8 for text-bearing elements only.
   Large display text (hero, counters) is exempt as decorative / large-text. */
.fusion-button.button-default,
.awb-button.awb-button_default,
.button-default {
    background-color: #0089b8 !important;
}

/* 1c: White on orange #ff7600 = 2.68:1 — darken to #c45c00. */
.button-accent,
.fusion-button.button-accent {
    background-color: #c45c00 !important;
}

/* ============================================================
   RESPONSIVENESS — mobile fixes (≤640px)
   ============================================================ */

@media (max-width: 640px) {
    /* 1b: Row-5 (hero text section) has 80px padding-top designed to clear
       the stats bar. With stats hidden on mobile, remove that gap. */
    .fusion-builder-row-5 {
        padding-top: 0 !important;
    }

    /* 1b: Stats bar (728/311/23) is a desktop hero overlay; hides on mobile.
       Scoped to .home to avoid killing row-4 content on other pages. */
    body.home .fusion-builder-row-4 {
        display: none !important;
    }

    /* 1b: Large display headings overflow on narrow screens.
       Allow long words to wrap rather than clip. */
    .fusion-title .title-heading-left,
    .fusion-title .title-heading-center,
    .fusion-title .title-heading-right {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    /* 1b: Cap responsive font sizes that Avada calculates too large.
       Avada's --fontSize:148 computes to ~72px at 375px; 8vw ≈ 30px
       is enough to keep 15-char uppercase words on one line in 270px cols. */
    .fusion-title h1.fusion-responsive-typography-calculated,
    .fusion-title h2.fusion-responsive-typography-calculated {
        font-size: clamp(22px, 8vw, 44px) !important;
        line-height: 1.15 !important;
    }
}

/* 1b: Several service pages had "Hide on small" accidentally checked in the
   builder on their main content sections. Override per page-id so only those
   specific pages are affected, not every use of fusion-no-small-visibility. */
@media (max-width: 640px) {
    body.page-id-2223 .fusion-no-small-visibility,
    body.page-id-2219 .fusion-no-small-visibility,
    body.page-id-2205 .fusion-no-small-visibility,
    body.page-id-2146 .fusion-no-small-visibility {
        display: block !important;
    }
}

/* Same builder mistake at the MEDIUM (tablet) breakpoint: the opdrachten
   section (.fusion-builder-row-3) also has "Hide on medium" checked, so the
   whole opdrachten carousel was invisible on tablet (641-1024px). Restore it —
   display:flex (not block) to preserve the fusion-flex-container layout. */
@media (min-width: 641px) and (max-width: 1024px) {
    body.page-id-2146 .fusion-no-medium-visibility.fusion-flex-container {
        display: flex !important;
    }
}

/* 1b: Footer AWB menus collapse to a hamburger toggle below their own
   data-breakpoint (900px — set per element in the Avada Builder). Force them to
   always show their link list in footer context across the whole collapse range
   (was 800px, which left a stray hamburger at tablet 801-900px). */
@media (max-width: 900px) {
    .fusion-footer .awb-menu__m-toggle {
        display: none !important;
    }
    .fusion-footer .awb-menu .awb-menu__main-ul {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .fusion-footer .awb-menu .awb-menu__main-li {
        display: block !important;
    }
}

/* Footer contact block: the email/phone paragraph inherits a loose 30px
   (2.0) line-height, leaving an oversized gap between the two <br>-separated
   lines on mobile. Tighten just that paragraph. */
@media (max-width: 640px) {
    .fusion-footer-widget-area .fusion-text p:has(> a[href^="mailto:"]) {
        line-height: 1.4;
    }
}

/* Client logo wall ("Welke klanten kiezen voor ons?"): logos are normalised at
   the FILE level — each source image is composited onto a uniform 400x200
   transparent canvas (contained, never cropped) on upload/import — so they
   display at equal size without any CSS sizing here. See the GD normalizer. */

/* ============================================================
   EVENEMENTEN — equal-height cards, responsive
   ============================================================ */

/* fusion-builder-column-26 has --awb-max-height:100px set in builder;
   override so the animated WebP can show at full 360px height. */
.fusion-builder-column-26 {
    --awb-max-height: none !important;
    max-height: none !important;
}

/* Equal-height event cards: fix all media to 360px, cover-crop to fill */
.fusion-builder-column-26 .fusion-column-wrapper,
.fusion-builder-column-27 .fusion-column-wrapper,
.fusion-builder-column-28 .fusion-column-wrapper {
    display: flex;
    flex-direction: column;
    height: auto !important;
}

.fusion-builder-column-26 .fusion-selfhosted-video,
.fusion-builder-column-27 .fusion-selfhosted-video,
.fusion-builder-column-28 .fusion-selfhosted-video,
.fusion-builder-column-26 .video-wrapper,
.fusion-builder-column-27 .video-wrapper,
.fusion-builder-column-28 .video-wrapper {
    height: 360px !important;
    overflow: hidden;
}

.fusion-builder-column-26 video,
.fusion-builder-column-27 video,
.fusion-builder-column-28 video,
.fusion-builder-column-26 img,
.fusion-builder-column-27 img,
.fusion-builder-column-28 img {
    width: 100%;
    height: 360px !important;
    object-fit: cover;
    display: block;
}

/* Center the row of 3 event cards */
.fusion-builder-row-7 .fusion-builder-row {
    justify-content: center;
}

/* Mobile: stack cards single-column, smaller height */
@media (max-width: 640px) {
    .fusion-builder-column-26,
    .fusion-builder-column-27,
    .fusion-builder-column-28 {
        width: 100% !important;
        margin-bottom: 24px;
    }

    .fusion-builder-column-26 img,
    .fusion-builder-column-27 img,
    .fusion-builder-column-28 img {
        height: 260px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Cols 24 and 25 are empty desktop layout spacers; hide on mobile */
    .fusion-builder-column-24,
    .fusion-builder-column-25 {
        display: none !important;
    }
}

/* ============================================================
   HOMEPAGE — audience columns (Professional / Leverancier / Opdrachtgever)
   ============================================================ */

/* Row is display:flex with align-items:flex-start, so each column only
   grows to its own content height. "Professional"'s paragraph wraps one
   line longer than the other two, so its border-left divider (and the
   column box itself) sticks out further than theirs — reads as a stray
   line that only that column has. Stretch all three to the row height. */
.fusion-builder-column-18,
.fusion-builder-column-19,
.fusion-builder-column-20 {
    align-self: stretch;
}

/* ============================================================
   VACANCY OVERVIEW — [sn_vacatures] card grid
   ============================================================ */

.sn-vac-overview-wrap {
    background-color: #f2f3f5;
    width: 100%;
    padding: 60px 40px;
    box-sizing: border-box;
}

/* Avada's frontend JS applies its global responsive H1 typography (huge size,
   theme heading color) to every <h1> via inline CSS variables — highest
   specificity, so needs !important to override here. */
.sn-vac-overview-title {
    max-width: 1100px;
    margin: 0 auto 32px;
    font-size: 32px !important;
    font-weight: 700;
    text-align: center;
    color: #1a1a2e !important;
}

.sn-vac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.sn-vac-card {
    background: #1a1a2e;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}

.sn-vac-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.sn-vac-card-header {
    background: #030303;
    padding: 24px;
}

.sn-vac-card-dept {
    color: #10ade5;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

/* Titels verschillen fors in lengte ("Opdracht bij Universiteit Leiden" vs.
   "Opdracht bij Ministerie van Buitenlandse Zaken"), wat kaarten in dezelfde
   rij ongelijk hoog maakte. Vaste hoogte voor 2 regels (ook bij een korte
   titel, via min-height) + ellipsis bij een 3e regel houdt alle kaarten
   gelijk, i.p.v. een dynamische font-size die per kaart een andere
   tekstgrootte zou geven. */
.sn-vac-card-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    min-height: calc(20px * 1.3 * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Opdrachtgever-logo op de opdrachten-kaart (#10/#50): logo's komen van de
   portal-API op een eigen witte achtergrond (meestal donkere kleuren op een
   transparante PNG) — een wit "kaartje" erachter houdt ze leesbaar op de
   donkere .sn-vac-card-header, ongeacht de kleur van het logo zelf. */
.sn-opd-card-logo {
    background: #ffffff;
    border-radius: 6px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    max-width: 160px;
}

.sn-opd-card-logo img {
    display: block;
    max-height: 40px;
    width: auto;
    height: auto;
}

.sn-opd-card-client {
    color: #c8d0d8;
    font-size: 13px;
    margin: 4px 0 0;
}

.sn-vac-card-body {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sn-vac-card-tagline {
    color: #c8d0d8;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.sn-vac-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sn-vac-card-pill {
    background: rgba(16,173,229,.15);
    color: #10ade5;
    border: 1px solid rgba(16,173,229,.3);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
}

.sn-vac-card-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sn-vac-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10ade5;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sn-vac-card-link:hover { color: #fff; }
.sn-vac-card-link::after { content: '→'; }

/* ============================================================
   OPDRACHTEN CARDS (aanvraag CPT) — styled to match sn-vac-card
   !important used only for: CSS variable overrides, Avada inline-style
   overrides (display/height/overflow), and Avada button CSS (!important).
   Color/typography rules use selector specificity instead.
   ============================================================ */

/* Section background: light grey like sn-vac-overview-wrap so dark cards pop.
   Avada sets section backgrounds as inline styles — needs !important. */
body.page-id-2146 .fusion-builder-row-3 {
    background-color: #f2f3f5 !important;
    background-image: none !important;
}

/* Page H1: "Opdrachten" defaults to white (built for a dark hero). On this
   page's light-grey section white is invisible, so make it dark — keeping the
   brand two-tone ("Onze" cyan + dark word). Avada sets the title colour as an
   inline style / CSS variable on the heading, so !important is required to
   override it (per the inline-style rule). */
body.page-id-2146 .fusion-title-2 .fusion-title-heading,
body.page-id-2146 .fusion-title-2 .fusion-title-heading * {
    color: #1a1a2e !important;
}

/* Card hover: on .post-card (overflow:visible), not .fusion-column-wrapper.
   --awb-color8 is an inline CSS variable — needs !important. */
.post-card {
    --awb-color8: #a8abb4 !important;
    transition: transform .2s, box-shadow .2s;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

/* Two-tone header: soft gradient (95→135px) covers the natural content-end
   variation between 1-line titles (~99px) and 2-line titles (~123px), avoiding
   the visible hard band that a single-stop gradient creates. */
.post-card .fusion-column-inner-bg-image {
    background: linear-gradient(to bottom, #030303 95px, #1a1a2e 135px) !important;
    background-color: transparent !important;
    border-radius: 6px !important;   /* match vacatures .sn-vac-card (Avada sets 10px via a variable) */
    overflow: hidden;
}

/* Title: display:block/height:auto/overflow:visible override Avada's inline
   style attrs (-webkit-box display, height:70px, overflow:hidden).
   min-height reserves two lines (2 × 24px × 1.2 + 4px margin ≈ 62px) so the
   meta-pill row below starts at the SAME vertical position on every card,
   whether the title is one or two lines — otherwise short-title cards pull
   their pills up and the row misaligns across the carousel. */
.post-card > .fusion-column-wrapper > div:first-child {
    display: block !important;
    height: auto !important;
    min-height: 62px;
    overflow: visible !important;
}

/* Title text — `.post-card > .fusion-column-wrapper > div:first-child > p`, i.e.
   the card's TOP-LEVEL wrapper only. Every nested meta column has its own
   `.fusion-column-wrapper > div:first-child > p` too, so without the leading
   `.post-card >` this display:block !important clobbered the pills' inline-flex.
   specificity (0,3,2) beats Avada's without !important. */
.post-card > .fusion-column-wrapper > div:first-child > p {
    color: #ffffff;
    text-transform: none;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Meta items (1/3-width columns — location / hours / date) as blue pills,
   matching .sn-vac-card-pill on vacatures. No text-transform: icon font glyphs
   (map pin, clock, calendar) break when uppercased. inline-block sizes each
   pill to its content within the 1/3 column. */
.post-card .fusion_builder_column_inner_1_3 p {
    display: inline-block;
    color: #10ade5;
    background: rgba(16,173,229,.15);
    border: 1px solid rgba(16,173,229,.3);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Pills as inline-flex so the icon and (nowrap) text stay on one line with a
   tight gap. */
.post-card .fusion_builder_column_inner_1_3 p {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* The three meta items are each in a rigid 1/3-width Avada column. Collapse the
   columns to content width and let the row wrap with an 8px gap, so the pills
   sit inline and wrap exactly like vacatures' .sn-vac-card-meta (flex/wrap/8px)
   instead of being stretched or stacked one-per-line. Applied at ALL widths
   (not just desktop) so the inline-wrap match holds on tablet/mobile too.
   !important overrides Avada's inline --awb-width / margin column variables. */
.post-card .fusion-builder-row-inner:has(> .fusion_builder_column_inner_1_3) {
    flex-wrap: wrap;
    gap: 8px;
    /* Avada gives this inner row a negative left/right margin (~-7px) as a gutter
       that its column padding normally cancels. Since we zero the column margins
       (below) and space pills with `gap` instead, that negative margin is left
       over and shifts the first pill ~7px LEFT of the card's content padding —
       misaligned with the title/description. Zero it so the pill row starts on
       the same left edge as the rest of the card content. */
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.post-card .fusion_builder_column_inner_1_3 {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
/* Collapsing the column to content width isn't enough: inside it Avada's
   .fusion-column-wrapper still carries ~6px side margins and the .fusion-text
   block has overflow:hidden. Together they size the wrapper to the RAW text
   width (~91px) while the padded pill is ~118px — so the pill's right/left
   rounded corner gets clipped (the "first pill cut off" report). Zero the inner
   margins and let both wrappers overflow visibly so the wrapper sizes to the
   full pill. Row `gap:8px` above still spaces the pills apart. */
.post-card .fusion_builder_column_inner_1_3 .fusion-column-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
}
.post-card .fusion_builder_column_inner_1_3 .fusion-text {
    overflow: visible !important;
}

/* Opdrachten carousel nav (#aanvragen-postcards): Avada positions the prev/next
   arrows vertically centred at the carousel's left/right edge, where they
   overlapped the edge cards (and side gutters can't be made clean because the
   container's overflow:hidden clips outside its padding, letting slides peek).
   Move them to a centred control bar BELOW the carousel — no overlap — and
   restyle as circular buttons. top/transform forced because Avada's JS sets a
   pixel `top` sized for the old square button. */
#aanvragen-postcards.awb-swiper {
    padding-bottom: 70px;
}
#aanvragen-postcards .awb-swiper-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--awb-color5, #10ade5);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.20);
    top: auto !important;
    bottom: 16px !important;
    transform: none !important;
    transition: background .2s ease, transform .2s ease;
}
#aanvragen-postcards .awb-swiper-button-prev { left: calc(50% - 52px) !important; right: auto !important; }
#aanvragen-postcards .awb-swiper-button-next { left: calc(50% + 8px) !important; right: auto !important; }
#aanvragen-postcards .awb-swiper-button:hover {
    background: #0b87b5;
    transform: scale(1.08) !important;
}

/* Client-logo carousels (page 2219 Opdrachtgevers, page 2754 Home): Avada's image
   carousel runs Swiper in autoHeight mode, so the track height snaps to each logo's
   natural aspect ratio as it cycles (logos range 53–196px tall) — that resize jerks
   everything below it, pushing the footer up and down. Contain every logo in a
   uniform 80px box so all slides are the same height: the logos stay fully visible
   AND autoHeight has nothing left to resize, so the track (and footer) stay put.
   !important beats Avada's inline per-image sizing. */
body.page-id-2219 .fusion-image-carousel .fusion-image-wrapper,
body.page-id-2754 .fusion-image-carousel .fusion-image-wrapper {
    width: 100% !important;
    overflow: visible !important;
}
body.page-id-2219 .fusion-image-carousel .fusion-image-wrapper img,
body.page-id-2754 .fusion-image-carousel .fusion-image-wrapper img {
    width: 100% !important;
    height: 80px !important;
    object-fit: contain !important;
    padding: 0 14px;
    box-sizing: border-box;
}
/* Belt-and-braces: pin the Swiper track + slides so even a mid-transition
   autoHeight recalculation can't change the carousel's height. 80px logo + a little
   breathing room = 96px. Overrides Swiper's inline height on .swiper-wrapper.
   NOTE: .swiper-wrapper is content-box with 8px top+bottom padding, so its border
   box is 96 + 16 = 112px — that 112 is the height the page below (footer) follows. */
body.page-id-2219 .fusion-image-carousel .swiper-wrapper,
body.page-id-2754 .fusion-image-carousel .swiper-wrapper {
    height: 96px !important;
}
body.page-id-2219 .fusion-image-carousel .swiper-slide,
body.page-id-2754 .fusion-image-carousel .swiper-slide {
    height: 96px !important;
    display: flex;
    align-items: center;
}
/* Reserve the carousel's height in plain CSS (112px = 96 track + 8+8 padding) so the
   space is claimed from first paint — before the logos (async images) load and before
   Swiper's autoHeight JS runs. Without this the footer reflows during the initial load
   as images arrive one by one; the wrapper/slide locks above only kick in once layout
   settles, leaving a visible load-time jump. Pinning the container closes that window. */
body.page-id-2219 .fusion-image-carousel .awb-swiper,
body.page-id-2754 .fusion-image-carousel .awb-swiper {
    height: 112px !important;
}

/* Body text — specificity (0,3,1) sufficient. text-transform !important
   as a safety belt against Avada's variable-driven transform. */
.post-card .fusion-builder-row-inner .fusion-layout-column:not(.fusion_builder_column_inner_1_3) p {
    color: #c8d0d8;
    text-transform: none !important;
    font-size: 14px;
    line-height: 1.5;
}

/* Button → text link matching sn-vac-card-link.
   Avada's button CSS uses !important throughout so we must match it. */
.post-card a.fusion-button,
.post-card .fusion-button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #10ade5 !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 0 !important;
}
.post-card a.fusion-button::after {
    content: '→';
}
.post-card a.fusion-button:hover {
    color: #ffffff !important;
    background: transparent !important;
}
/* Footer divider above the "Bekijk opdracht" link, matching .sn-vac-card-footer.
   display:block + width:100% so the line spans the card, not just the link. */
.post-card .fusion-button-wrapper {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* ============================================================
   VACANCY DETAIL — page-vacancy.php
   ============================================================ */

.sn-vacancy-wrap {
    width: 100%;
    font-family: inherit;
    background-color: #fff;
}

/* Hero */
.sn-vac-hero {
    background: #030303;
    color: #fff;
    padding: 60px 0 50px;
}

.sn-vac-hero-inner,
.sn-vac-info-inner,
.sn-vac-body,
.sn-vac-about-inner,
.sn-vac-cta-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.sn-vac-dept {
    color: #10ade5;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 12px;
}

.sn-vac-hero h1 {
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 16px;
    color: #fff;
    line-height: 1.15;
}

.sn-vac-subtitle {
    color: #10ade5;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
}

.sn-vac-intro-text {
    color: #c8d0d8;
    font-size: 15px;
    line-height: 1.7;
    max-width: 720px;
    margin: 0;
}

/* Info strip */
.sn-vac-info-strip {
    background: #f2f3f5;
    padding: 28px 0;
    border-bottom: 1px solid #e2e2e2;
}

.sn-vac-info-inner {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.sn-vac-info-block {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px 0 0;
    border-right: 1px solid #e2e2e2;
    margin-right: 24px;
}

.sn-vac-info-block:last-child {
    border-right: none;
    margin-right: 0;
}

.sn-vac-info-icon {
    font-size: 22px;
    color: #10ade5;
    margin-bottom: 6px;
}

.sn-vac-info-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a8abb4;
    margin-bottom: 2px;
}

.sn-vac-info-value {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.sn-vac-info-value em {
    font-style: normal;
    font-weight: 400;
    color: #666;
    font-size: 13px;
}

/* Body sections */
.sn-vac-body {
    padding: 50px 40px;
    max-width: 1100px;
}

.sn-vac-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.sn-vac-row:last-child { margin-bottom: 0; }

.sn-vac-col h2 {
    font-size: 20px;
    font-weight: 800;
    color: #030303;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #10ade5;
}

.sn-vac-col h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 20px 0 10px;
}

.sn-vac-col p {
    font-size: 15px;
    color: #444;
    line-height: 1.7;
    margin: 0 0 12px;
}

.sn-vac-col-salary {
    background: #f2f3f5;
    padding: 24px;
    border-radius: 6px;
    align-self: start;
}

.sn-vac-col-salary h2 {
    font-size: 18px;
    color: #10ade5;
    border-bottom-color: #e2e2e2;
}

/* Bullet lists */
.sn-vac-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sn-vac-bullets li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #444;
    line-height: 1.5;
}

.sn-vac-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    background: #10ade5;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

/* About StaffingNow */
.sn-vac-about {
    background: #f2f3f5;
    padding: 40px 0;
    border-top: 1px solid #e2e2e2;
}

.sn-vac-about h2 {
    font-size: 20px;
    font-weight: 800;
    color: #030303;
    margin: 0 0 12px;
}

.sn-vac-about p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    max-width: 720px;
    margin: 0;
}

/* CTA */
.sn-vac-cta {
    background: #030303;
    padding: 40px 0;
}

.sn-vac-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.sn-vac-cta p {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.sn-vac-cta strong { color: #10ade5; }

.sn-vac-btn {
    background: #10ade5;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s;
    white-space: nowrap;
}

.sn-vac-btn:hover { background: #0d94c5; color: #fff; }

/* Responsive */
@media (max-width: 767px) {
    .sn-vac-hero h1 { font-size: 28px; }
    .sn-vac-hero-inner,
    .sn-vac-info-inner,
    .sn-vac-body,
    .sn-vac-about-inner,
    .sn-vac-cta-inner { padding-left: 20px; padding-right: 20px; }
    .sn-vac-row { grid-template-columns: 1fr; gap: 32px; }
    .sn-vac-info-inner { flex-direction: column; gap: 16px; }
    .sn-vac-info-block { border-right: none; margin-right: 0; padding-right: 0; }
    .sn-vac-cta-inner { flex-direction: column; align-items: flex-start; }
    .sn-vac-grid { grid-template-columns: 1fr; }
    .sn-vac-overview-wrap { padding: 40px 20px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .sn-vac-hero h1 { font-size: 32px; }
    .sn-vac-row { gap: 28px; }
}

/* ============================================================
   OPDRACHTEN CARROUSEL — [sn_opdrachten]

   Alleen de carrousel eromheen. De kaart zelf gebruikt .sn-vac-card
   en erft dus letterlijk de vacature-styling hierboven; hier staat
   bewust niets dat die kaart opnieuw beschrijft.
   ============================================================ */

.sn-opd-carousel {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.sn-opd-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Ruimte voor de hover-lift (-4px) en de schaduw van .sn-vac-card,
       die anders tegen de rand van de scroll-container wordt afgeknipt. */
    padding: 8px 4px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sn-opd-track::-webkit-scrollbar { display: none; }

.sn-opd-slide {
    /* Drie kaarten breed, met de 24px gaps ertussen verrekend. */
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    display: flex;
}

.sn-opd-slide .sn-vac-card { width: 100%; }

@media (max-width: 1024px) {
    .sn-opd-slide { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 640px) {
    .sn-opd-slide { flex-basis: 100%; }
    .sn-opd-nav   { display: none; }
}

/* Navigatieknoppen — buiten de kaarten, zodat ze niets afdekken. */
.sn-opd-nav {
    position: absolute;
    top: calc(50% - 10px);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid rgba(16, 173, 229, .35);
    border-radius: 50%;
    background: #ffffff;
    color: #0b87b5;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}

.sn-opd-nav:hover,
.sn-opd-nav:focus-visible {
    background: #10ade5;
    border-color: #10ade5;
    color: #ffffff;
}

.sn-opd-nav:focus-visible { outline: 2px solid #0b87b5; outline-offset: 2px; }

.sn-opd-prev { left: -20px; }
.sn-opd-next { right: -20px; }

@media (max-width: 1180px) {
    /* Bij deze breedte staan de knoppen op de rand van de carrousel (left/right: 0) i.p.v.
       er -20px buiten. Zonder ruimte in de carrousel zelf landen ze bovenop de eerste/laatste
       kaart — geregistreerd tijdens de tablet-regressiecheck (15-09-2026), zie backlog §2. */
    .sn-opd-carousel { padding: 0 52px; }
    .sn-opd-prev { left: 0; }
    .sn-opd-next { right: 0; }
}

.sn-opd-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.sn-opd-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c8d0d8;
    cursor: pointer;
    transition: background .2s, width .2s;
}

.sn-opd-dot.is-actief {
    width: 22px;
    border-radius: 4px;
    background: #10ade5;
}

.sn-opd-dot:focus-visible { outline: 2px solid #0b87b5; outline-offset: 2px; }

/* #29: bel-buttons (pagina 2205) zijn op desktop een dode knop zonder nummer.
   Nummer alleen tonen voor bezoekers met een muis, niet via UA-sniffing. */
.sn-tel-desktop { display: none; }

@media (hover: hover) and (pointer: fine) {
    .sn-tel-desktop { display: inline; }
}

/* P3 (#13): koppen "vliegen lelijk in" — elke builder-element heeft zijn eigen
   animation_type/animation_direction (flipinx, rubberBand, slideleft, bounceIn, ...)
   als losse klasse naast .fusion-animated, elk met evenveel specificiteit
   (.do-animate .<type>) als Avada's eigen basisregel. In plaats van elk van die
   tientallen type-klassen los te overriden: forceer één rustige fade voor iedereen,
   ongeacht welk type-klasse er toevallig op staat. `fadeIn` is Avada's eigen
   keyframe (fusion-builder/assets/css/animations.css), geen nieuwe toegevoegd. */
.fusion-animated {
    animation-name: fadeIn !important;
    animation-duration: 0.6s !important;
    transform: none !important;
}

/* Reduced motion: geen animatie, meteen zichtbaar. */
@media (prefers-reduced-motion: reduce) {
    .fusion-animated {
        visibility: visible !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   COMPLIANZ — hide the decoy email-domain fragment
   ============================================================ */

/* class-document.php builds every obfuscated contact email as
   username@<span class="cmplz-fmail-domain">ex.com</span>realdomain.tld — a fake
   domain meant to confuse scrapers, sandwiched between the real @ and the real
   domain. It's meant to be hidden from real visitors, but no CSS or JS anywhere
   in this Complianz install actually hides it, so every obfuscated email on the
   Cookie Policy page reads literally as "info@ ex.com staffingnow.nl". Hiding it
   here restores the intended behaviour without touching plugin code. */
.cmplz-fmail-domain {
    display: none;
}

/* ============================================================
   EVENEMENT-LANDINGSPAGINA (mu-plugin sn-events) — /evenement/<slug>/
   ============================================================ */
#content.sn-ev { width: 100%; float: none; margin: 0; padding: 32px 0 64px; } /* Avada geeft #content een zijbalk-breedte */
/* Eigen witte kaart: de Avada-container achter #main is hier donker. */
.sn-ev__box { max-width: 720px; margin: 0 auto; padding: 32px 28px; background: #fff; color: #1a1a2e; border-radius: 8px; }
.sn-ev__box h2, .sn-ev__box legend, .sn-ev__box label, .sn-ev__box strong { color: #1a1a2e; }
.sn-ev__box h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.25; margin: 28px 0 14px; }
.sn-ev__title { margin: 0 0 16px; font-size: clamp(26px, 5vw, 36px); line-height: 1.2; }
.sn-ev__box h2.sn-ev__title { margin-top: 0; }
.sn-ev__meta { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
.sn-ev__meta strong { display: inline-block; min-width: 130px; }
.sn-ev__content { margin-bottom: 28px; }
.sn-ev__notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 6px; border-left: 4px solid; }
.sn-ev__notice--ok    { background: #e6f5ec; border-color: #1f8a4c; color: #14532d; }
.sn-ev__notice--info  { background: #eef0f3; border-color: #10ade5; color: #1a1a2e; }
.sn-ev__notice--error { background: #fbe9e8; border-color: #b3261e; color: #7a1a15; }
.sn-ev__form p { margin: 0 0 16px; }
.sn-ev__form label { display: block; font-weight: 600; margin-bottom: 4px; }
.sn-ev__form input[type="text"],
.sn-ev__form input[type="email"],
.sn-ev__form input[type="tel"],
.sn-ev__form textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; background: #fff; color: #1a1a2e; border: 1px solid #c9ced6; border-radius: 6px; }
.sn-ev__form input[disabled], .sn-ev__form input[readonly] { background: #eef0f3; color: #5b5f6b; }
.sn-ev__form fieldset { border: 1px solid #dde1e6; border-radius: 6px; padding: 14px 16px; margin: 0 0 16px; }
.sn-ev__form legend { font-weight: 700; padding: 0 6px; }
.sn-ev__form .sn-ev__check { display: block; font-weight: 400; margin: 0 0 8px; }
.sn-ev__form .sn-ev__check input { margin-right: 6px; }
.sn-ev__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.sn-ev__btn { min-height: 44px; padding: 10px 22px; background: #ff7600; color: #fff; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.sn-ev__btn:hover { background: #c45c00; }
.sn-ev__btn[disabled] { opacity: .5; cursor: not-allowed; }
.sn-ev__voortgang { margin: 0 0 20px; }
.sn-ev__voortgang-tekst { display: block; margin-bottom: 6px; font-weight: 700; color: #1a1a2e; }
.sn-ev__voortgang-balk { display: block; height: 6px; border-radius: 3px; background: #dde1e6; overflow: hidden; }
.sn-ev__voortgang-balk span { display: block; height: 100%; background: #10ade5; transition: width .25s; }
.sn-ev__stap h3 { margin: 0 0 16px; font-size: 20px; color: #1a1a2e; }
.sn-ev__stap[hidden], .sn-ev__open-details[hidden], .sn-ev__plus1-extra[hidden], .sn-ev__nav [hidden] { display: none !important; }
.sn-ev__btn--licht { background: #fff; color: #1a1a2e; border: 1px solid #c3c8d0; }
.sn-ev__btn--licht:hover { background: #eef0f3; }
.sn-cn--js .sn-ev__open { display: none; }
.sn-cn--js.sn-cn--aanmelden .sn-ev__open { display: block; }
.sn-cn--js.sn-cn--aanmelden .sn-cn__hero { display: none; }
.sn-ev__terugregel + h2 { margin-top: 8px; }
/* Casino Night: de pagina is donker gemaakt voor witte tekst; leg de achtergrond zelf vast, onafhankelijk van de themakleuren */
body.sn-evenement-pagina, body.sn-evenement-pagina #boxed-wrapper, body.sn-evenement-pagina #wrapper, body.sn-evenement-pagina #main { background: #030303; }
.sn-ev__fout { display: block; margin-top: 6px; color: #b3261e; font-weight: 600; font-size: 14px; }
.sn-ev__form [aria-invalid="true"] { border-color: #b3261e; outline: 2px solid #b3261e; }
.sn-ev__terugregel { display: none; margin: 0 0 4px; font-size: 14px; }
.sn-ev__small { margin-top: 28px; font-size: 14px; }
.sn-ev__link { color: #0b87b5; }
@media (max-width: 600px) {
    .sn-ev { padding-top: 16px; }
    .sn-ev__box { padding: 24px 18px; }
    .sn-ev__meta strong { display: block; min-width: 0; }
    .sn-ev__btn { width: 100%; }
}

/* Casino Night: info-deel boven het aanmeldformulier ([sn_aanmeldformulier]) */
.sn-cn { max-width: 1100px; margin: 0 auto; color: #fff; }
.sn-cn__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 24px; }
.sn-cn__logo { height: 44px; width: auto; background: #fff; padding: 6px 12px; border-radius: 6px; }
.sn-cn__motto { color: #10ade5; font-weight: 700; letter-spacing: .04em; text-align: right; }
.sn-cn__hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; margin-bottom: 40px; }
.sn-cn__posterimg { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.sn-cn .sn-cn__info .sn-cn__teaser { margin: 0 0 4px; color: #10ade5; font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sn-cn .sn-cn__titel { margin: 0 0 20px; color: #fff; font-size: clamp(40px, 7vw, 72px); line-height: 1.05; }
.sn-cn__feiten { margin: 0 0 20px; display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; }
.sn-cn__feiten dt { color: #10ade5; font-weight: 700; margin: 0; }
.sn-cn__feiten dd { margin: 0; }
.sn-cn__info p { color: #e6e8ee; line-height: 1.6; }
.sn-cn .sn-cn__op { padding: 12px 14px; border-left: 4px solid #ff7600; background: rgba(255, 255, 255, .07); color: #fff; }
.sn-cn__knop { display: inline-block; text-decoration: none; line-height: 24px; }
.sn-cn .sn-ev__open { margin-top: 8px; }
@media (max-width: 800px) {
    .sn-cn__hero { grid-template-columns: 1fr; gap: 24px; }
    .sn-cn__poster { max-width: 420px; margin: 0 auto; }
    .sn-cn__feiten { grid-template-columns: 1fr; gap: 2px; }
    .sn-cn__feiten dd { margin-bottom: 10px; }
    .sn-cn__knop { width: 100%; text-align: center; box-sizing: border-box; }
}

/* ============================================================
   COOKIEBANNER (Complianz) — huisstijl en leesbaarheid
   Kleuren/teksten staan in de Complianz-bannerinstellingen; dit regelt alleen
   opmaak die daar niet instelbaar is. Selectors beginnen met de container-ID
   zodat ze Complianz' eigen (later via JS ingeladen) stylesheet verslaan.
   ============================================================ */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    width: 440px;
    max-width: calc(100vw - 48px);
    padding: 22px 24px 18px;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(26, 26, 46, 0.28);
    font-family: inherit;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right { right: 24px; bottom: 24px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo { display: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
    display: block !important; /* Complianz verbergt de titel op mobiel; wij tonen hem altijd */
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: #1a1a2e;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
    width: 28px; height: 28px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    color: #5b5f6b;
}
/* Complianz zet bij openen automatisch focus op de sluitknop; dat gaf een zware rand. Sluiten kan ook met Esc. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus { outline: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover { background: #f4f5f7; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg { width: 14px; height: 14px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider { display: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
    font-size: 14.5px;
    line-height: 1.55;
    color: #333646;
    margin-bottom: 14px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category {
    margin-bottom: 8px;
    border-radius: 8px;
    background: #f4f5f7;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title { font-size: 14.5px; font-weight: 600; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active { color: #5b5f6b; font-size: 13px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description { font-size: 13.5px; line-height: 1.5; color: #4a4e5c; }

/* Knoppen: Accepteren en Weigeren even groot naast elkaar, de derde knop eronder over de volle breedte. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    min-height: 46px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    width: 100%;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences { grid-column: 1 / -1; font-weight: 500; }
/* De ge-hide knoppen (cmplz-hidden) mogen geen lege rij in het grid innemen. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-hidden { display: none; }

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents { margin-top: 12px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
    margin: 0; padding: 0; list-style: none;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents li { margin: 0; padding: 0; list-style: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents li::marker { content: ""; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents a { font-size: 13px; }
/* Link zonder bestemming (bv. impressum, niet in gebruik) niet als leeg bolletje tonen. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents li:has(> a[href="#"]) { display: none; }

@media (max-width: 480px) {
    #cmplz-cookiebanner-container .cmplz-cookiebanner,
    #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right {
        width: 100%; max-width: none; left: 0; right: 0; bottom: 0;
        padding: 18px 16px 14px; border-radius: 14px 14px 0 0;
    }
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE HERO — foto terug op mobiel/tablet (<1024px)
   ============================================================
   Avada verbergt fusion-builder-row-3 (de foto-sectie, incl. eigen
   rotatie-tekst "Ben jij professional?/leverancier?/opdrachtgever?") volledig
   onder de "large"-breakpoint via de eigen fusion-no-small-visibility/
   fusion-no-medium-visibility-klassen, zonder enige vervanging. Resultaat:
   een kale, egale achtergrondkleur vóór de koptekst-sectie (row-5, "WIJ DOEN
   'T VOOR JOU!"), op zowel telefoon als tablet.
   De negative-margin-overlap-truc met row-5 (desktop-only) blijft bewust
   ongemoeid — dat past niet compact genoeg op een smal scherm. In plaats
   daarvan: foto als rustige band bovenaan, gevolgd door de bestaande koptekst
   eronder (geen overlap, wel foto).
   Bijvangst: row-4 (de counters "728 Vervulde opdrachten" e.d.) heeft zelf
   geen visibility-klasse en bleek al los van deze fix tussen ~640–1023px
   kaal en ongestyled te tonen (geen donker kader, geen labels zichtbaar) —
   de corner-overlay-opmaak is puur een desktop-breedte-truc. Consistent
   verborgen houden onder 1024px voorkomt die kale cijferbrij. */
@media (max-width: 1023px) {
    .fusion-builder-row-3.fusion-no-small-visibility.fusion-no-medium-visibility {
        display: flex !important;
        min-height: 45vh !important;
    }
    .fusion-builder-row-4 {
        display: none !important;
    }
}

/* Footer: keurmerken (ISO 27001 gecertificeerd, ISO 9001 conform) naast elkaar.
   Vaste hoogte houdt de twee badges even groot; wrap op smalle schermen. */
.sn-footer-keurmerken {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
}
.sn-footer-keurmerken img {
    display: block;
    height: 130px;
    width: 92px; /* beide badges 688x975: identieke maat, ook als een bestand later vervangen wordt */
    object-fit: contain;
}

/* FAQ per servicepagina ([sn_faq], mu-plugins/sn-faq.php): native details/summary, geen JS. */
.sn-faq-item {
    border-bottom: 1px solid rgba(16, 173, 229, 0.3);
    padding: 14px 0;
}
.sn-faq-item summary {
    color: #1a1a2e;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    list-style: none;
    position: relative;
    padding-right: 32px;
}
.sn-faq-item summary::-webkit-details-marker {
    display: none;
}
.sn-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 0;
    color: #10ade5;
    font-size: 24px;
    line-height: 1;
}
.sn-faq-item[open] summary::after {
    content: "\2212";
}
.sn-faq-item p {
    color: #3a3f4b;
    margin: 10px 0 0;
}

/* Vacatures: lege staat (geen openstaande vacatures) leesbaar en gecentreerd. */
.sn-vac-empty {
    text-align: center;
    padding-bottom: 40px;
}
.sn-vac-empty p {
    color: #3a3f4b;
    font-size: 18px;
    margin: 0 0 12px;
}