/* Native full-screen section navigation (CSS Scroll Snap). */
html,
body {
    height: 100%;
    overflow: hidden;
}

#fullpage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#fullpage::-webkit-scrollbar {
    display: none;
}

#fullpage > .section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Keep the off-canvas navigation completely out of the paint and tab order. */
.navigation {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.navigation.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 180ms ease;
}

/* Reach-out modal sits above the scene; keep only the page header visible. */
.modal.active {
    position: fixed;
    z-index: 2;
}

body.modal-open .hero-text-container,
body.modal-open .logo-svg-overlay,
body.modal-open .hero-brand-mark,
body.modal-open .hero-content-overlay .footer,
body.modal-open .hero-section .toggleLook,
body.modal-open .hero-section .status-box,
body.modal-open .hero-section .loading {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.modal-open #fullpage .header a.mobilNav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.modal-open #fullpage .header,
body.modal-open #fullpage .header a {
    pointer-events: none;
}

body.modal-open .modal .closeModal {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

body.rtl.modal-open .modal .closeModal {
    right: auto;
    left: 30px;
}

body.rtl .navigation > a.mobilNav {
    right: auto;
    left: 30px;
}

/* Shared geometry: hamburger and both close controls use the same centre. */
.header a.mobilNav {
    width: 30px;
    height: 30px;
    margin: 0 10px !important;
    display: grid;
    place-items: center;
    line-height: 1;
}

.header .col-12.justify-content-between > .d-flex:last-child {
    transform: translateY(10px);
}

.modal .closeModal,
.navigation > a.mobilNav {
    width: 30px;
    height: 30px;
    top: 52.5px;
    right: 25px;
    display: grid;
    place-items: center;
    line-height: 1;
    transform: translateY(-50%);
}

body.rtl .navigation > a.mobilNav,
body.rtl.modal-open .modal .closeModal {
    right: auto;
    left: 25px;
}

@media (max-width: 575.98px) {
    .modal .closeModal,
    .navigation > a.mobilNav {
        top: 35px;
    }
}

/* Keep the three overlay links on one balanced row at desktop/tablet widths. */
@media (min-width: 768px) {
    .navigation .links {
        flex-wrap: nowrap;
        gap: clamp(1rem, 3vw, 3rem);
    }

    .navigation .links > [class*="col-"] {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        padding-inline: 0;
    }

    .navigation .links a {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        align-items: baseline;
        column-gap: clamp(0.5rem, 1vw, 1rem);
    }

    .navigation .links a::before {
        position: static;
        grid-column: 1;
    }

    .navigation .links a span,
    .navigation .links a:hover span {
        grid-column: 2;
        margin-left: 0;
        font-size: clamp(19px, 2.05vw, 30px);
        white-space: nowrap;
    }
}

#fullpage > .section:not(.fp-completely) .rotate-in,
#fullpage > .section:not(.fp-completely) .fade-in {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #fullpage { scroll-behavior: auto; }
    .rotate-in,
    .fade-in { transition: none !important; }
}