/*
 * Site-specific overrides on top of the freshdev parent theme.
 * Breakpoints match the parent: md 768px, lg 1024px, xl 1280px.
 */

/* ==========================================================================
   Header: larger logo on sm, md and lg
   ========================================================================== */

@media (max-width: 767.98px) {
    header {
        height: 96px;
        margin-bottom: -96px;
    }

    /* The logo file has a wide transparent border: negative margins let that
       border overflow the header so the visible logo can be larger */
    header .container .header-items .logo a img {
        height: 144px;
        max-width: none;
        margin: -16px 0 -32px -16px;
    }

    /* Page headers that offset themselves by the header height */
    .section.section-pageheader-variation-three {
        padding-top: 96px;
    }

    .section-pageheader.for-variation-four {
        margin-top: 96px;
    }
}

/* md and lg: same approach within the parent's 90px header */
@media (min-width: 768px) and (max-width: 1279.98px) {
    header .container .header-items .logo a img {
        height: 136px;
        max-width: none;
        margin: -15px 0 -31px -15px;
    }
}

/* ==========================================================================
   Testimonials variation: every slide is as tall as its own content
   (site.js enables Swiper's autoHeight so the button moves along)
   ========================================================================== */

.section.section-testimonials-variation .container .swiper.testimonials-slider-variation {
    height: auto;
}

.section.section-testimonials-variation .container .swiper.testimonials-slider-variation .swiper-wrapper {
    align-items: flex-start;
}

.section.section-testimonials-variation .container .swiper.testimonials-slider-variation .swiper-wrapper .swiper-slide.content-block {
    height: auto;
}

/* ==========================================================================
   Footer: titles share one column so the links of every list start aligned
   ========================================================================== */

@media (min-width: 768px) {
    .footer-variation .container .footer-top .footer-left-items {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 30px;
    }

    .footer-variation .container .footer-top .footer-left-items .logo-wrapper {
        grid-column: 1 / -1;
    }

    .footer-variation .container .footer-top .footer-left-items .footer-list {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }
}

/* ==========================================================================
   Footer: larger, centred logo on mobile (sm and below)
   "footer." outranks the object-position: left from the custom CSS in the
   options, which is printed after this file
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Negative bottom margin compensates for the transparent border in the logo file */
    footer.footer-variation .container .footer-top .footer-left-items .logo-wrapper .footer-logo {
        width: 160px;
        margin: 0 auto -30px;
    }

    footer.footer-variation .container .footer-top .footer-left-items .logo-wrapper .footer-logo:after {
        padding-bottom: 100%;
    }

    footer.footer-variation .container .footer-top .footer-left-items .logo-wrapper .footer-logo img {
        object-position: center;
    }
}

/* ==========================================================================
   Subscriptions: swiper on lg and below. md and below are initialised in
   site.js, lg by the parent; the parent CSS still stacks the blocks up to xl
   ========================================================================== */

@media (max-width: 1279.98px) {
    /* Padding keeps the box-shadows visible inside the overflow */
    .section.section-subscriptions .container .content-holder-wrapper .content-holder {
        display: block;
        overflow: hidden;
        gap: 0;
        max-width: none;
        padding: 20px;
        margin: -20px;
    }

    /* Each slide keeps the height of its own content instead of stretching to the tallest */
    .section.section-subscriptions .container .content-holder-wrapper .content-holder .swiper-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .section.section-subscriptions .container .content-holder-wrapper .content-holder .content-block,
    .section.section-subscriptions .container .content-holder-wrapper .content-holder .content-block:not(:last-child) {
        flex: 0 0 auto;
        max-width: none;
        height: auto;
        margin-bottom: 0;
    }

    .section.section-subscriptions.section-subscriptions-variation-three .content-block.is-popular {
        margin-top: 0;
    }
}

/* lg: hide the neighbouring slides in the padding, like the parent does on xl.
   Starts at 1025px: at exactly 1024px site.js runs the slider, without visibility classes */
@media (min-width: 1025px) and (max-width: 1279.98px) {
    .section.section-subscriptions .container .content-holder-wrapper .content-holder .content-block:not(.swiper-slide-visible) {
        opacity: 0;
    }
}

/* ==========================================================================
   Text that breaks out of its box
   ========================================================================== */

/* Fallback for long Dutch compounds (Voedingsbegeleiding, lidmaatschapstest):
   break only a word that does not fit at all. No hyphens: auto, which also
   hyphenates words that would fit on the next line */
body h1,
body h2,
body h3 {
    overflow-wrap: break-word;
}

/* The parent keeps h2 at 40px on mobile (larger than the 30px h1), wider than
   the screen for single long words such as "Voedingsbegeleiding".
   Words are never broken here, not even when they do not fit */
@media (max-width: 767.98px) {
    body h2 {
        font-size: 28px;
        overflow-wrap: normal;
    }
}

/* 320px and smaller: "Voedingsbegeleiding" (h1, h2) and "Gezinsabonnement"
   (h3 in the subscription cards) only fit at these sizes */
@media (max-width: 320px) {
    body h1 {
        font-size: 25px;
    }

    body h2 {
        font-size: 24px;
    }

    body h3,
    .section.section-subscriptions .container .content-holder-wrapper .content-holder .content-block .block-inner .wrapper .content-title h3 {
        font-size: 17px;
    }
}

/* Content-text USPs: the title holder may not grow past its column */
.section.section-content-text .container .content-text-holder .content-block .title-holder,
.section.section-content-text .container .content-text-holder .content-block .title-holder .content {
    min-width: 0;
}

/* md: icon above the text, like on mobile. Next to the icon the half-width
   column is too narrow for "Voedingsbegeleiding" */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .section.section-content-text .container .content-text-holder .content-block .title-holder {
        flex-direction: column;
        gap: 15px;
    }

    .section.section-content-text .container .content-text-holder .content-block .title-holder .icon {
        justify-content: flex-start;
    }
}

/* Content-text variation (over-ons intro): the block may not grow past the screen */
.section.section-content-text-variation .container .content-text-holder .content-block {
    min-width: 0;
}

/* Legal pages: long URLs in running text */
.section.section-large-content .container .content-holder {
    overflow-wrap: anywhere;
}

/* Sticky bar on mobile: button labels wrap instead of being cut off, and a
   single button takes the full width instead of half */
@media (max-width: 767.98px) {
    .sticky-bar .container .bar-holder .button-holder .button {
        white-space: normal;
        text-align: center;
    }

    .sticky-bar .container .bar-holder .button-holder .button:only-child {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* Subscriptions: the slider (and its negative margin above) no longer widens the page */
.section.section-subscriptions {
    overflow-x: clip;
}

/* ==========================================================================
   Footer bottom links (Disclaimer | Privacyverklaring | Cookiebeleid)
   ========================================================================== */

/* The parent sets 14px below 430px on every link but the last, which stays 16px */
@media (max-width: 430px) {
    .footer-variation .footer-bottom .footer-item .page-link ul li a {
        font-size: 14px;
    }
}

/* 320px and smaller: the row is too wide for the screen at 14px */
@media (max-width: 320px) {
    .footer-variation .footer-bottom .footer-item .page-link ul li a {
        font-size: 12px;
    }

    .footer-variation .footer-bottom .footer-item .page-link ul li:not(:last-of-type) {
        margin-right: 6px !important;
        padding-right: 6px !important;
    }
}