/* Our own additions to the theme CSS (css/nxtday.css, built from the old theme by Scripts/build-site-css.py).
   Only what the old site did not have: the banner photos as a real <img> (the theme used a CSS background),
   the slider of js/site.js, the 404 layout (inline styles in 404.php), the blocks that are new to the site,
   and the forms of Vsi.Cms in the look of the old Contact Form 7 form. The colours are the variables of
   /beheer/colors. */

/* ---- banner and slider photos: a real <img> under the label ---- */
.bannersection .bimg {
    position: relative;
    overflow: hidden;
}

.nxt-banner-photo,
.bannersection .bimg > img.nxt-banner-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.bannersection .bimg .label,
.bannersection .bimg .banner_content {
    z-index: 1;
}

/* ---- the slider of js/site.js (FlexSlider "slide" with the same classes) ---- */
.flexslider .flex-viewport {
    overflow: hidden;
    position: relative;
}

.flexslider .slides.nxt-slides-ready {
    display: flex;
    transition: transform 600ms ease;
    will-change: transform;
}

.flexslider .slides.nxt-slides-ready > li {
    display: block;
    flex: 0 0 100%;
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .flexslider .slides.nxt-slides-ready {
        transition: none;
    }
}

.flex-direction-nav a.flex-prev,
.flex-direction-nav a.flex-next {
    font-size: 0;
    color: transparent;
}

/* ---- the 404 page (the inline styles of 404.php) ---- */
.nxt-not-found {
    text-align: center;
    padding: 50px 20px;
}

.nxt-not-found .h1-style {
    text-align: center;
}

/* ---- photos of the blog and footer lists: the theme showed crops of these sizes ---- */
footer .rnews-wrap .news-blk .news-image img,
.blog-wrap .blog-image img {
    object-fit: cover;
}

.client-blk .clogos .cimage img {
    height: auto;
}

.client-blk.inner .clogos .cimage {
    cursor: pointer;
}

/* ---- the blocks that are new to NXT Day (Blok toevoegen in /beheer) ---- */
.nxt-text-block,
.nxt-heading-block,
.nxt-image-block,
.nxt-image-text,
.nxt-gallery-block,
.nxt-form-block {
    padding: 50px 0;
    clear: both;
}

.nxt-text-block .page-left.nxt-full {
    float: none;
    width: auto;
    max-width: 855px;
}

.nxt-heading-block h1,
.nxt-heading-block h2,
.nxt-heading-block h3 {
    margin: 0;
}

.nxt-image-block img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.nxt-image-text .container {
    display: flex;
    gap: 50px;
    align-items: center;
}

.nxt-image-text--right .container {
    flex-direction: row-reverse;
}

.nxt-image-text__image,
.nxt-image-text__body {
    flex: 1 1 50%;
    min-width: 0;
}

.nxt-image-text__image img {
    display: block;
    width: 100%;
    height: auto;
}

.nxt-image-text__body .button,
.nxt-wide .button {
    display: inline-block;
    margin-top: 20px;
}

.nxt-wide {
    clear: both;
    padding: 70px 0;
}

.nxt-wide--blue {
    background-color: var(--nxt-blue, #233367);
    color: #ffffff;
}

.nxt-wide--blue h2 {
    color: #ffffff;
}

.nxt-html {
    clear: both;
}

@media (max-width: 767px) {
    .nxt-image-text .container,
    .nxt-image-text--right .container {
        flex-direction: column;
        gap: 25px;
    }
}

/* ---- the form of Vsi.Cms in the look of the old Contact Form 7 form (.field-wrap/.field-blk of the theme) ---- */
.contact-left .nxt-form {
    clear: both;
    max-width: 814px;
}

.contact-left .nxt-form .vsi-form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.contact-left .nxt-form .vsi-form__field {
    flex: 0 0 100%;
    margin-bottom: 18px;
}

.contact-left .nxt-form .vsi-form__field--w50 {
    flex: 0 0 calc(50% - 9px);
}

.contact-left .nxt-form .vsi-form__input {
    width: 100%;
    box-sizing: border-box;
}

.contact-left .nxt-form .vsi-form__field--submit {
    text-align: left;
}

@media (max-width: 600px) {
    .contact-left .nxt-form .vsi-form__field--w50 {
        flex: 0 0 100%;
    }
}

.vsi-form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.vsi-screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vsi-screen-reader-only:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    white-space: normal;
}

.vsi-form__message {
    display: block;
    margin-top: 10px;
    font-size: 16px;
}

.vsi-form__message--error {
    color: #e6004a;
}

.vsi-form__message--success {
    color: var(--nxt-blue, #233367);
    font-weight: 600;
}

/* ---- the galleries of Vsi.Cms ([[galerij-3]], the block "Galerij"): the package writes the markup and the
   column, gap and ratio variables, the site draws them ---- */
.vsi-gallery .vsib-gallery__container {
    display: grid;
    grid-template-columns: repeat(var(--vsi-gallery-columns, 4), minmax(0, 1fr));
    gap: var(--vsi-gallery-gap, 10px);
}

.vsi-gallery .vsib-gallery-item {
    margin: 0;
}

.vsi-gallery .vsib-gallery-item a {
    display: block;
}

.vsi-gallery .vsib-gallery-item__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--vsi-gallery-ratio, 3 / 2);
    object-fit: cover;
}

.vsi-gallery--logos .vsib-gallery-item__image {
    object-fit: contain;
}

.vsi-gallery--justified .vsib-gallery__container {
    display: flex;
    flex-wrap: wrap;
}

.vsi-gallery--justified .vsib-gallery-item {
    flex: 1 1 auto;
    height: 220px;
}

.vsi-gallery--justified .vsib-gallery-item__image {
    height: 100%;
    aspect-ratio: auto;
}

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

@media (max-width: 600px) {
    .vsi-gallery .vsib-gallery__container {
        grid-template-columns: repeat(var(--vsi-gallery-columns-mobile, 1), minmax(0, 1fr));
        gap: var(--vsi-gallery-gap-mobile, 10px);
    }
}

/* 13A.6: on a touch screen a tap target is at least 44 x 44 px. Only an invisible hit area grows (a transparent
   ::after on the link), so the page looks exactly like the old site. Checked by tapping the corners of each
   44 x 44 box headless. Every a.button is positioned, or its ::after would cover an ancestor (the slider button
   keeps its own, more specific position:absolute). The phone and e-mail link stand right on top of each other: the upper one grows
   upwards, the lower one downwards, so their areas never overlap. */
@media (pointer: coarse) {
    .mobile-site-languages ul li a,
    .menu-navigate > a,
    .service-blk > a,
    .service-blk .contnet > a,
    a.button,
    .news-info > a,
    .blog-content > a,
    .vsi-form__button,
    .gobacklink > a,
    .cnt-blk > a {
        position: relative;
    }

    .mobile-site-languages ul li a::after,
    .menu-navigate > a::after,
    .service-blk > a::after,
    .service-blk .contnet > a::after,
    a.button::after,
    .flex-direction-nav a::after,
    .clogos a.more::after,
    .news-info > a::after,
    .blog-content > a::after,
    .vsi-form__button::after,
    .gobacklink > a::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }

    /* A button sits above the next block (the footer under "back to top" would otherwise take the tap). */
    a.button::after {
        z-index: 1;
    }

    .cnt-blk > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        min-width: 44px;
        height: 44px;
    }

    .cnt-blk > a:first-of-type::after {
        bottom: 0;
    }

    .cnt-blk > a:last-of-type::after {
        top: 0;
    }

    /* The two languages of the open list stand 27 px apart: the active one (first) grows upwards, the other one
       downwards, so a tap on either word never lands on the other language. The list clips both to its box. */
    .mobile-site-languages ul li:first-child a::after {
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }

    .mobile-site-languages ul li:last-child a::after {
        top: 0;
        transform: translateX(-50%);
    }
}

/* The theme showed WordPress's hard-cropped thumbnails (functions.php add_image_size thumb-post 178 x 140 and
   thumb-small 132 x 111, crop true: from the centre). The site keeps only the original photo, so the browser
   makes the same crop. */
.blog-image img {
    width: 178px;
    height: 140px;
    object-fit: cover;
}

footer .news-image img {
    width: 132px;
    height: 111px;
    object-fit: cover;
}