/* Own additions on top of the migrated Avada theme CSS (lib/theme): what the old site did with
   Avada's own scripts or plugins, rebuilt without them, and the CMS components.
   ⛔ No photo from the media library is ever set as a CSS background here (rule 8 of the
   migration): Avada's column photos became real <img class="jt-cover-img"> elements that these
   rules merely position. MigrationGuardTests guards that. */

/* ---------------------------------------------------------------- skip link and helpers */
.skip-link.screen-reader-text:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    clip: auto;
    width: auto;
    height: auto;
    padding: 12px 16px;
    background: #fff;
    color: var(--awb-color5, #023c75);
    font-weight: 600;
}

/* ---------------------------------------------------------------- column photos (rule 8)
   Avada painted a column photo as background-image of the .fusion-column-wrapper (cover, the
   position of --awb-bg-position). The photo is now the first child of that wrapper: it covers the
   wrapper behind the content, and a gradient Avada laid over the photo (--jt-cover-overlay on the
   column) is painted between the photo and the content. */
.fusion-column-wrapper.jt-has-cover-img {
    position: relative;
    isolation: isolate;
}

.fusion-column-wrapper.jt-has-cover-img > .jt-cover-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* Avada's own position variables, with its default "left top" (avada-dynamic.css): the browser
       default 50% 50% cropped the five photos on Services differently from the live site, up to 20%
       of the pixels per window (go-live check A, 5 October 2026). An explicit position Avada wrote
       for a column (Home: center center) stands inline on the photo and still wins. */
    object-position: var(--awb-bg-position, left top);
    border-radius: inherit;
}

@media only screen and (max-width: 1024px) {
    .fusion-column-wrapper.jt-has-cover-img > .jt-cover-img {
        object-position: var(--awb-bg-position-medium, var(--awb-bg-position, left top));
    }
}

@media only screen and (max-width: 742px) {
    .fusion-column-wrapper.jt-has-cover-img > .jt-cover-img {
        object-position: var(--awb-bg-position-small, var(--awb-bg-position-medium, var(--awb-bg-position, left top)));
    }
}

.fusion-column-wrapper.jt-has-cover-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--jt-cover-overlay, none);
    border-radius: inherit;
    pointer-events: none;
}

/* ---------------------------------------------------------------- the language switch
   The one addition to the old menu: NL / EN at the end of the main menu and the mobile menu. */
.awb-menu .jt-lang-switch .menu-text {
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- the 404 title
   Avada hid its animated text until its text animation started; js/jt-site.js splits it into the
   letter blocks Avada's textillate left behind and fades those in. */
.fusion-title .fusion-animated-texts.jt-animated-shown {
    visibility: visible;
}

@keyframes jt-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------- the cookie policy
   The declaration CookieFirst used to write into the page, now static HTML. The values are the
   computed styles of the old page (measured 2 October 2026), which CookieFirst's own CSS produced. */
.jt-cookie-declaration h3,
.jt-cookie-declaration h4 {
    margin: 30px 0 10px;
    font-size: 30px;
    line-height: 36px;
}

.jt-cookie-declaration h3 {
    font-weight: 700;
}

.jt-cookie-declaration h4 {
    font-weight: 600;
}

.jt-cookie-declaration p {
    margin: 0 0 20px;
}

.jt-cookie-declaration table {
    width: 100%;
    min-width: 768px;
    margin: 0 0 16px;
    border-collapse: collapse;
}

.jt-cookie-table-scroll {
    overflow-x: auto;
}

.jt-cookie-declaration caption {
    font-size: 1.5em;
    font-weight: 700;
    text-align: left;
}

.jt-cookie-declaration th,
.jt-cookie-declaration td {
    padding: 4px;
    border: 0;
    text-align: left;
    vertical-align: top;
}

.jt-cookie-declaration th {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

/* The purpose column (the second one) never gets narrower than 400 px. */
.jt-cookie-declaration th:nth-child(2),
.jt-cookie-declaration td:nth-child(2) {
    min-width: 400px;
}

/* ---------------------------------------------------------------- the social icons of the footer
   Not on the old site (no profile was filled in); they appear when an address is set. */
.jt-footer-social .fusion-social-networks-wrapper {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.jt-footer-social .fusion-social-network-icon {
    min-width: 44px;
    min-height: 44px;
    color: var(--awb-color5, #023c75);
    font-size: 20px;
}

/* ---------------------------------------------------------------- cookie notice */
/* ⛔ A block that carries `display` needs its own [hidden] rule: a class selector beats the
   browser's [hidden] { display: none }. */
.jt-consent[hidden] {
    display: none;
}

.jt-consent {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 100000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 20px;
    background: #fff;
    color: #333;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    font-size: 16px;
}

.jt-consent p {
    margin: 0;
}

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

.jt-consent__buttons button {
    min-height: 44px;
    padding: 8px 20px;
    border: 1px solid var(--awb-color5, #023c75);
    background: var(--awb-color5, #023c75);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.jt-consent__buttons #jt-consent-decline {
    background: #fff;
    color: var(--awb-color5, #023c75);
}


/* ---------------------------------------------------------------- slideshows */
.jt-slideshow {
    position: relative;
    overflow: hidden;
}

/* Two classes on purpose: Elementor's ".elementor img { height: auto }" (0,1,1) beats a single
   class, and the photo then keeps its own height and shows its top instead of its centre. */
.jt-slideshow .jt-slideshow__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.jt-slideshow__img.is-active {
    opacity: 1;
}

.jt-slideshow--slide .jt-slideshow__img {
    opacity: 1;
    transform: translateX(100%);
}

.jt-slideshow--slide .jt-slideshow__img.is-active {
    transform: translateX(0);
}

.jt-slideshow--slide .jt-slideshow__img.is-leaving {
    transform: translateX(-100%);
}

/* A slideshow gallery placed in a page (not a header band) needs a height of its own. */
.jt-slideshow--content {
    aspect-ratio: 16 / 7;
}

@media (prefers-reduced-motion: reduce) {
    .jt-slideshow .jt-slideshow__img {
        transition: none;
    }
}


/* ---------------------------------------------------------------- photo galleries */
.jt-gallery {
    width: 100%;
}

.jt-gallery .e-gallery-item {
    display: block;
    overflow: hidden;
}

.jt-gallery .e-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* The Elementor grid: fixed columns and one aspect ratio (numbers from the old widget). */
.jt-gallery--grid .e-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--jt-gallery-columns, 4), minmax(0, 1fr));
    gap: var(--jt-gallery-gap, 10px);
}

.jt-gallery--grid .e-gallery-item {
    aspect-ratio: var(--jt-gallery-ratio, 3 / 2);
}

@media (max-width: 1024px) {
    .jt-gallery--grid .e-gallery-grid {
        grid-template-columns: repeat(var(--jt-gallery-columns-tablet, 2), minmax(0, 1fr));
        gap: var(--jt-gallery-gap-tablet, 10px);
    }
}

@media (max-width: 767px) {
    .jt-gallery--grid .e-gallery-grid {
        grid-template-columns: repeat(var(--jt-gallery-columns-mobile, 1), minmax(0, 1fr));
        gap: var(--jt-gallery-gap-mobile, 10px);
    }
}

@media (hover: hover) {
    .jt-gallery a.e-gallery-item img {
        transition: transform 0.4s ease;
    }

    .jt-gallery a.e-gallery-item:hover img {
        transform: scale(1.04);
    }
}

/* ---------------------------------------------------------------- lightbox */
.jt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

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

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

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

.jt-lightbox figcaption {
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
}

.jt-lightbox button {
    position: absolute;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

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

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

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

.jt-lightbox--single .jt-lightbox__prev,
.jt-lightbox--single .jt-lightbox__next {
    display: none;
}

body.jt-lightbox-open,
body.jt-search-open {
    overflow: hidden;
}


/* ---------------------------------------------------------------- CMS component blocks
   Photo strips ([[ImageSeparator-{id}]]) and tile blocks ([[TileGallery-{id}]]) an admin can add. */
.jt-separator {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--jt-separator-height, 0);
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.jt-separator .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 24px;
}

.jt-separator__text {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 600;
}

.jt-separator__sub {
    margin: 0;
    font-size: 18px;
}

.jt-tiles .container {
    max-width: 1140px;
    margin: 0 auto;
}

.jt-tiles .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.jt-tiles .row > [class*="col-"] {
    flex: 1 1 280px;
}

.jt-tiles .jt-card__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


/* ---------------------------------------------------------------- a photo that is gone */
.jt-media-missing__box {
    display: inline-block;
    padding: 12px;
    border: 1px dashed #c0392b;
    color: #c0392b;
    font-size: 14px;
}

/* The placeholder of a live component in the page preview of /beheer. */
.jt-marker-placeholder {
    margin: 12px 0;
    padding: 16px;
    border: 2px dashed var(--awb-color5, #023c75);
    color: var(--awb-color5, #023c75);
    font-family: monospace;
    text-align: center;
}


/* The photo of a photo strip: a real <img> covering the strip behind its texts. */
.jt-separator .jt-separator__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    z-index: 0;
}


/* ---------------------------------------------------------------- team ([[team:group]])
   The board members as the Elementor image boxes of the old page. */
.jt-team {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}


.jt-team__member {
    flex: 0 0 auto;
    width: 215px;
    max-width: 215px;
}

/* The member box the team renderer writes (switched off on this site, kept for when it is used):
   215px wide, text to the start, the photo over the full width, the name in weight 600. */
.jt-team .elementor-image-box-wrapper {
    text-align: start;
}

.jt-team .elementor-image-box-img {
    width: 100%;
    margin-bottom: 10px;
}

.jt-team .elementor-image-box-img img {
    max-width: 100%;
    height: auto;
}

.jt-team .elementor-image-box-title {
    font-weight: 600;
}

/* The search results (Avada search.php): Avada's isotope script laid the cards out in rows of three
   at equal tops; without that script the cards wrap the same way as flex items. */
.jt-search-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Go-live check B: a tap target is at least 44 x 44 px. The open and close icons of the mobile menu
   are 26 x 30 and 21 x 30 px on the old site. Padding makes the tap area larger and an equal negative
   margin gives the space back, so the icon stays exactly where it was (only shown below 1024 px). */
.fusion-body a.fb-icon-element[data-jt-oc-open],
.fusion-body a.fb-icon-element[data-jt-oc-close] {
    padding: 7px 12px;
    margin-top: -7px;
    margin-bottom: -7px;
    margin-left: -12px;
    margin-right: -12px;
    box-sizing: content-box;
}