/* ==================================================
   SQUEAK – GLOBAL VARIABLES
================================================== */

:root {
    --sq-red: #ed1c24;
    --sq-dark: #0b0d0e;
    --sq-off: #f3f0e9;

    --sq-header-height: 124px;
    --sq-hero-top: 198px;
    --sq-hero-bottom: 64px;
    --sq-hero-min-height: 720px;
}


/* ==================================================
   DIVI / PAGE RESET
================================================== */

html,
body {
    margin-top: 0 !important;
}

#page-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ==================================================
   HEADER
================================================== */

.squeak-site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: 10000;

    width: 100%;

    background: transparent;
    color: #fff;

    border: 0;
}

.squeak-header-inner {
    width: min(92%, 1500px);
    min-height: var(--sq-header-height);

    margin: 0 auto;
    padding: 14px 0 10px;

    display: flex;
    align-items: center;

    gap: 42px;

    box-sizing: border-box;
}


/* ==================================================
   HEADER – LOGO
================================================== */

.squeak-header-logo {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
    margin-right: auto;

    color: #fff;
    font-weight: 800;
}

.squeak-header-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 245px;
    max-height: 180px;
}


/* ==================================================
   HEADER – DESKTOP NAVIGATION
================================================== */

.squeak-desktop-nav {
    display: block;
}

.squeak-menu {
    display: flex;
    align-items: center;

    gap: 34px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.squeak-menu li {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

.squeak-menu a {
    position: relative;

    display: block;

    padding: 14px 0 !important;

    color: #f5f3ee !important;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}

.squeak-menu a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: var(--sq-red);

    transition: width .22s ease;
}

.squeak-menu a:hover::after,
.squeak-menu .current-menu-item > a::after,
.squeak-menu .current_page_item > a::after {
    width: 100%;
}


/* ==================================================
   HEADER – REMOTE SUPPORT
================================================== */

.squeak-remote-button {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 10px;

    padding: 17px 23px;

    background: var(--sq-red);
    color: #fff !important;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none !important;

    transition: background-color .22s ease;
}

.squeak-remote-button:hover {
    background: #f3262e;
}

.squeak-headset {
    font-size: 21px;
}


/* ==================================================
   HEADER – AUTOMATISCHE COMPACTE NAVIGATIE
   Wordt via JS geactiveerd zodra het desktopmenu niet meer past.
================================================== */

.squeak-site-header.squeak-nav-compact .squeak-desktop-nav,
.squeak-site-header.squeak-nav-compact .squeak-remote-button {
    display: none;
}

.squeak-site-header.squeak-nav-compact .squeak-menu-toggle {
    display: block;
    margin-left: auto;
}

.squeak-site-header.squeak-nav-compact .squeak-header-inner {
    gap: 24px;
}

/* ==================================================
   HEADER – MOBILE TOGGLE
================================================== */

.squeak-menu-toggle {
    position: relative;
    z-index: 10003;

    display: none;

    width: 48px;
    height: 48px;

    padding: 10px;

    border: 0;
    background: transparent;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.squeak-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 7px 0;

    background: #fff;

    transform-origin: center;
    transition:
        transform .25s ease,
        opacity .2s ease,
        background-color .2s ease;
}

.squeak-menu-toggle.is-open {
    position: fixed;

    top: 20px;
    right: 4vw;

    z-index: 10005;
}

.squeak-menu-toggle.is-open span {
    background: #fff !important;
}

.squeak-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.squeak-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.squeak-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* ==================================================
   MOBILE FULLSCREEN MENU
================================================== */

.squeak-mobile-overlay {
    position: fixed;
    inset: 0;

    z-index: 10002;

    display: none;

    overflow-y: auto;
    overscroll-behavior: contain;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(237, 28, 36, .13),
            transparent 30%
        ),
        rgba(8, 10, 11, .985);

    color: #fff;
}

.squeak-mobile-overlay.is-open {
    display: block;
}

.squeak-mobile-menu-inner {
    width: min(92%, 1100px);
    min-height: 100vh;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 120px 0 55px;
}

.squeak-mobile-links {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.squeak-mobile-links li {
    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.squeak-mobile-links a {
    display: flex;
    align-items: center;

    padding: 26px 0 !important;

    color: #fff !important;

    max-width: 100%;

    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(28px, 8vw, 60px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    text-decoration: none !important;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Alle mobiele menulabels gebruiken bewust exact dezelfde schaal. */
.squeak-mobile-links a.squeak-menu-label-long {
    font-size: inherit;
    letter-spacing: inherit;
}

.squeak-mobile-links .current-menu-item > a,
.squeak-mobile-links .current_page_item > a {
    color: var(--sq-red) !important;
}

.squeak-mobile-remote {
    align-self: flex-start;

    margin-top: 36px;
    padding: 17px 24px;

    border: 1px solid var(--sq-red);

    color: #fff !important;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none !important;
}

.squeak-menu-open {
    overflow: hidden;
}



/* ==================================================
   FOOTER
================================================== */

.squeak-site-footer {
    background: var(--sq-dark);
    color: #b9b9b9;

    border-top: 1px solid rgba(255, 255, 255, .10);

    font-size: 15px;
}

.squeak-footer-main {
    width: min(90%, 1450px);

    margin: 0 auto;
    padding: 70px 0 55px;

    display: grid;
    grid-template-columns: 1.25fr 1fr .8fr 1.25fr;

    gap: 70px;
}

.squeak-site-footer h3 {
    margin: 0 0 22px;

    color: var(--sq-red);

    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.squeak-site-footer p {
    line-height: 1.65;
}

.squeak-site-footer a {
    color: #d7d7d7;
    text-decoration: none;
}


/* ==================================================
   FOOTER – BRAND
================================================== */

.squeak-footer-brand img {
    display: block;

    width: auto;
    height: auto;

    max-width: 225px;
    max-height: 150px;

    margin-bottom: 18px;
}


/* ==================================================
   FOOTER – MENU
================================================== */

.squeak-footer-menu {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.squeak-footer-menu li {
    padding: 0 0 7px !important;
}


/* ==================================================
   FOOTER – SOCIALS
================================================== */

.squeak-socials {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}

.squeak-socials a {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    border: 1px solid #777;
    border-radius: 50%;
}


/* ==================================================
   FOOTER – CERTIFICATES
================================================== */

.squeak-certificates {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 24px;
}

.squeak-cert {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.squeak-cert img {
    width: auto;
    height: auto;

    max-width: 120px;
    max-height: 72px;

    object-fit: contain;
}

.squeak-cert small {
    color: #999;
}


/* ==================================================
   FOOTER – BOTTOM BAR
================================================== */

.squeak-footer-bottom {
    width: min(90%, 1450px);

    margin: 0 auto;
    padding: 22px 0 30px;

    display: flex;
    justify-content: space-between;

    gap: 30px;

    border-top: 1px solid rgba(255, 255, 255, .10);

    font-size: 12px;
}

.squeak-footer-bottom > div {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;
}

.squeak-footer-bottom a + a::before {
    content: "•";

    margin-right: 18px;

    color: #777;
}


/* ==================================================
   RESPONSIVE – TABLET / MOBILE NAV
================================================== */

@media (max-width: 1100px) {

    :root {
        --sq-header-height: 120px;
        --sq-hero-top: 180px;
        --sq-hero-bottom: 52px;
    }

    .squeak-desktop-nav,
    .squeak-remote-button {
        display: none;
    }

    .squeak-menu-toggle {
        display: block;
    }

    .squeak-header-inner {
        min-height: var(--sq-header-height);
    }

    .squeak-header-logo img {
        max-width: 200px;
        max-height: 150px;
    }

    .squeak-menu-toggle.is-open {
        top: 20px;
    }



    .squeak-footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }
}


/* ==================================================
   RESPONSIVE – PHONE
================================================== */

@media (max-width: 600px) {

    :root {
        --sq-header-height: 110px;
        --sq-hero-top: 165px;
        --sq-hero-bottom: 42px;
    }

    .squeak-header-inner {
        width: 90%;
        min-height: var(--sq-header-height);
    }

    .squeak-header-logo img {
        max-width: 170px;
        max-height: 135px;
    }

    .squeak-menu-toggle.is-open {
        top: 14px;
        right: 5vw;
    }

    .squeak-mobile-menu-inner {
        width: 92%;
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .squeak-mobile-links a,
    .squeak-mobile-links a.squeak-menu-label-long {
        padding: 24px 0 !important;
        font-size: clamp(28px, 8vw, 60px);
        line-height: .95;
        letter-spacing: -.02em;
    }

    .squeak-mobile-remote {
        width: 100%;
        max-width: 330px;

        display: flex;
        justify-content: space-between;
    }


    .squeak-footer-main {
        grid-template-columns: 1fr;

        padding: 50px 0 35px;
    }

    .squeak-footer-bottom {
        flex-direction: column;
    }

    .squeak-certificates {
        gap: 18px;
    }
}

/* ==================================================
   SQUEAK - BACK TO TOP
================================================== */
.squeak-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e51d24;
    background: rgba(11, 13, 14, .92);
    color: #f2efe8;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
}

.squeak-back-to-top::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateY(3px) rotate(45deg);
}

.squeak-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.squeak-back-to-top:hover,
.squeak-back-to-top:focus-visible {
    background: #e51d24;
    color: #fff;
}

.squeak-back-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Divi's eigen knop niet daarnaast laten verschijnen. */
.et_pb_scroll_top.et-pb-icon {
    display: none !important;
}

@media (max-width: 767px) {
    .squeak-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .squeak-back-to-top {
        transition: none;
    }
}

/* ==================================================
   SQUEAK - Complianz page cookies custom css
================================================== */

.page-template-page-squeak-standard .cmplz-document .cmplz-description, .page-template-page-squeak-standard .cmplz-document .cmplz-service-desc, .page-template-page-squeak-standard .cmplz-document .cmplz-category, .page-template-page-squeak-standard .cmplz-document details > div {
    background: #171a1c !important;
    color: black!important;
}

#cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4 {
    color: black!important;
}

#cmplz-cookies-overview .cmplz-dropdown h5, #cmplz-document .cmplz-dropdown h5, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h5 {
      color: black !important;
}