/* Small own additions on top of the migrated WordPress/Elementor theme CSS:
   the honeypot field, the consent banner, the language switch, the lightbox,
   the contact-form status messages and the consent-gated map placeholder. */

/* Honeypot: invisible for humans, present for bots. */
.prgv-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Cookie-consent banner (self-hosted; the old site used Cookiebot). */

/* ⛔ A block that carries `display` needs its own [hidden] rule: a class selector beats the
   browser's "[hidden] { display: none }", so without this the banner is visible before the
   choice is read AND stays on screen after Accept/Decline (consent.js sets .hidden = true).
   Same trap as the lightbox below. `ConsentBannerConventionTests`. */
.prgv-consent[hidden] {
    display: none;
}

.prgv-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: #14172c;
    color: #ffffff;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    font-family: Roboto, sans-serif;
    font-size: 15px;
}

.prgv-consent p {
    margin: 0;
}

.prgv-consent__buttons {
    display: flex;
    gap: 8px;
}

.prgv-consent__buttons button {
    border: 0;
    border-radius: 4px;
    padding: 10px 22px;
    font-size: 15px;
    cursor: pointer;
    background: #3bbfc1;
    color: #14172c;
}

.prgv-consent__buttons #prgv-consent-decline {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Contact-form status messages (Elementor's own classes, restyled minimally). */
.elementor-message {
    margin: 0 0 15px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
}

.elementor-message-success {
    background: #e7f6ec;
    color: #1d6f42;
}

.elementor-message-danger {
    background: #fdecea;
    color: #b3261e;
}

/* Lightbox for the gallery photos (behaviour of the old Elementor lightbox). */
.prgv-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prgv-lightbox[hidden] {
    display: none;
}

.prgv-lightbox figure {
    margin: 0;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.prgv-lightbox img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
}

.prgv-lightbox figcaption {
    color: #ffffff;
    padding-top: 10px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
}

.prgv-lightbox button {
    position: absolute;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
}

.prgv-lightbox__close {
    top: 12px;
    right: 16px;
}

.prgv-lightbox__prev {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.prgv-lightbox__next {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

body.prgv-lightbox-open {
    overflow: hidden;
}

/* Consent-gated Google Maps embed: the click-to-load note before consent. */
.elementor-custom-embed {
    position: relative;
}

.prgv-embed-note {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 1px dashed #9aa0a6;
    background: #f4f5f7;
    color: #14172c;
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    padding: 12px;
}

/* The added language switch in the menu: slightly separated from the page links. */
.prgv-lang-switch {
    margin-left: 12px;
}

.prgv-lang-switch > a {
    opacity: 0.75;
}

/* While the consent banner is open, the WhatsApp button moves above it. */
body.prgv-consent-open .joinchat {
    bottom: 110px;
}

/* The consent note sits inside the video embed's own aspect box. */
.wp-block-embed__wrapper {
    position: relative;
}

/* ---------- CMS component blocks (photo strips and tile blocks) ----------
   The public site loads neither Bootstrap nor the admin stylesheet, so the two block components an
   admin can insert from /beheer ([[ImageSeparator-{id}]] and [[TileGallery-{id}]]) get their own
   self-contained rules here. They only apply when such a block is actually inserted; the imported
   WordPress pages contain none, so nothing on the migrated design changes. */
.prgv-separator {
    background:
        linear-gradient(rgba(20, 14, 18, 0.30), rgba(0, 0, 0, 0.24)),
        var(--prgv-separator-image) center / cover no-repeat;
    color: #fff;
    text-align: center;
    padding: 64px 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
    min-height: var(--prgv-separator-height, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prgv-separator .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.prgv-separator__text {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
}

.prgv-separator__sub {
    font-weight: 500;
    font-size: 18px;
    opacity: 0.95;
    margin: 0;
}

.prgv-tiles {
    padding: 48px 0;
}

.prgv-tiles .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.prgv-tiles.prgv-section--tinted {
    background: #f5f4f5;
}

.prgv-tiles .prgv-section__title {
    text-align: center;
    margin: 0 0 32px;
}

.prgv-tiles .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

/* The renderer emits Bootstrap column classes; without Bootstrap the widths live here, scoped to
   the tile row so the migrated theme is never touched. */
.prgv-tiles .row > [class*="col-"] {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .prgv-tiles .row > .col-md-6 {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (min-width: 992px) {
    .prgv-tiles .row > .col-lg-4,
    .prgv-tiles .row > .col-md-6.col-lg-4 {
        flex: 0 0 calc(33.333% - 16px);
        max-width: calc(33.333% - 16px);
    }

    .prgv-tiles .row > .col-lg-3 {
        flex: 0 0 calc(25% - 18px);
        max-width: calc(25% - 18px);
    }
}

.prgv-tiles .prgv-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.prgv-tiles .prgv-card__photo-link {
    display: block;
    margin: -24px -24px 16px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.prgv-tiles .prgv-card__photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.45s ease;
}

@media (hover: hover) {
    .prgv-tiles .prgv-card:hover .prgv-card__photo {
        transform: scale(1.06);
    }
}

.prgv-tiles .prgv-card__title {
    font-size: 22px;
    margin: 0 0 8px;
}

.prgv-tiles .prgv-card__text {
    margin: 0 0 12px;
}

.prgv-tiles .prgv-card__link {
    margin-top: auto;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Team block ([[team]], ShortcodeHelper.RenderTeam).
   These are the Elementor rules the about page carried per widget id before the
   team became content in /beheer/team: a 210px card, 20px title, 20px role
   (18px on a phone) in the global black, laid out in a centred wrapping row.
   The widget markup itself is styled by the harvested widget-image-box CSS.
   --------------------------------------------------------------------------- */
.prgv-team {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 70px 60px;
    padding-top: 50px;
}

.prgv-team__member {
    width: 210px;
    max-width: 210px;
    flex: 0 0 auto;
}

.prgv-team .elementor-image-box-wrapper .elementor-image-box-img {
    width: 100%;
}

/* Five classes, exactly like the per-widget rule Elementor generated: frontend.min.css zeroes
   every figure inside a widget with ".elementor .elementor-widget:not(...):not(...) figure"
   (specificity 0,4,1), which eats a lighter selector and with it the 10px between the photo and
   the name. Measured: the second row of the team then sat 10px too high. */
.prgv-team .prgv-team__member.elementor-widget-image-box.elementor-position-top .elementor-image-box-img {
    margin-bottom: 10px;
}

.prgv-team .elementor-image-box-img img {
    transition-duration: 0.3s;
}

.prgv-team .elementor-image-box-title {
    margin-bottom: 5px;
    font-size: 20px;
    color: var(--e-global-color-368477d);
}

.prgv-team .elementor-image-box-description {
    font-size: 20px;
    line-height: 1.2em;
    color: var(--e-global-color-368477d);
}

@media (max-width: 767px) {
    .prgv-team {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .prgv-team .prgv-team__member.elementor-widget-image-box.elementor-position-top .elementor-image-box-img {
        margin-bottom: 10px;
    }

    .prgv-team .elementor-image-box-description {
        font-size: 18px;
    }
}

/* ---------------------------------------------------------------------------
   Client logo wall (a gallery with layout "logos", Helpers/GalleryLayout).
   These are the Elementor rules the our-work archive carried per widget id
   before the wall became a gallery in /beheer/galleries: a wrapping row with
   space between the logos, each logo boxed at 200x110 and scaled to fit.
   --------------------------------------------------------------------------- */
.prgv-logo-wall {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 60px 40px;
}

.prgv-logo-wall__item {
    flex: 0 0 auto;
}

/* ⛔ The element selector has to be in here: frontend.min.css sizes every photo inside an
   Elementor document with ".elementor img { height: auto }" (0,1,1), which beats a plain class
   and left every logo at its own height (measured: the wall was 1677px instead of 960px). The
   Elementor rule this replaces was ".elementor-514 .elementor-element-7eb115d img", so this
   selector carries the same weight. */
.prgv-logo-wall .prgv-logo-wall__item img.prgv-logo-wall__img {
    display: block;
    width: 200px;
    height: 110px;
    object-fit: contain;
    object-position: center center;
}

@media (max-width: 767px) {
    .prgv-logo-wall {
        gap: 30px;
    }

    .prgv-logo-wall__item {
        width: 45%;
        max-width: 45%;
    }

    .prgv-logo-wall .prgv-logo-wall__item img.prgv-logo-wall__img {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Justified photo gallery (layout "justified"). The rows themselves are laid
   out by js/prgv.js (it positions every item absolutely and sets the container
   height), exactly as it already did for the migrated case pages; only the
   hover overlay of E-Gallery needs a rule here because the widget markup now
   comes from the shortcode instead of from the stored Elementor HTML.
   --------------------------------------------------------------------------- */
.prgv-gallery .elementor-gallery__container {
    position: relative;
    min-height: 1px;
}

.prgv-gallery .e-gallery-item {
    overflow: hidden;
}

.prgv-gallery .elementor-gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    .prgv-gallery .e-gallery-item:hover .elementor-gallery-item__overlay {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
   Vacancy list ([[vacancies]], /beheer/vacatures). The <article class="post">
   markup is the one the old careers archive printed, so the theme styles it
   completely: measured against the old site, two vacancies sit 8px apart and a
   margin of our own here made that 40px. The wrapper therefore only exists as a
   hook, it may not carry spacing.
   --------------------------------------------------------------------------- */
.prgv-vacancies__empty {
    margin: 0;
}