/* =========================================================
   In-Page Navigation Widget — Component Stylesheet
   inpagenavigation_css.css
   ========================================================= */

:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1600px;

    /* Responsive header offset used when the nav is pinned via
       .stuck (JS-toggled on scroll). Single source of truth —
       do not duplicate/override this value in widgetsoverrides_css.css. */
    --inpage-nav-header-height: 64px;
}

@media (min-width: 1200px) {
    :root {
        --inpage-nav-header-height: 105px;
    }
}

@font-face {
    font-display: swap;
    font-family: zurich-icons;
    font-style: normal;
    font-weight: 400;
    src: url(/-/media-assets/project/zurich-headless/shared/cdn/fonts/zurich-icons/zurich-icons_woff2.woff2) format("woff2"),
         url(/-/media-assets/project/zurich-headless/shared/cdn/fonts/zurich-icons/zurich-icons_woff.woff) format("woff"),
         url(/-/media-assets/project/zurich-headless/shared/cdn/fonts/zurich-icons/zurich-icons_ttf.ttf) format("truetype");
}

#inpage-navigation {
    width: 100%;
    max-width: 1110px;   /* default / lg */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1199.98px) {
    #inpage-navigation {
        max-width: 930px;  /* md */
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #inpage-navigation {
        max-width: 690px;  /* sm */
    }
}

.widget-inpage-nav .has-scroller .slider-arrow {
    bottom: 0;
}

@media (max-width: 991px) {
    .widget-inpage-nav .has-scroller .slider-arrow {
        display: none;
    }
}

.widget-inpage-nav {
    height: 62px;
    position: relative;
    width: 100%;
    z-index: 60;
}

.widget-inpage-nav-wrapper {
    background-color: #fff;
    box-shadow: 0 2px 4px -4px rgba(0, 0, 0, .07), 0 4px 5px -1px rgba(0, 0, 0, .05), 0 1px 10px -6px rgba(0, 0, 0, .03);
    display: flex;
    overflow: hidden;
    position: relative;
}

@media (max-width: 767px) {
    .widget-inpage-nav-wrapper {
        flex-direction: column;
        overflow: visible;
    }
}

.widget-inpage-nav-dropdown-label {
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 16px 30px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: 100%;
}

@media (min-width: 768px) {
    .widget-inpage-nav-dropdown-label {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .widget-inpage-nav:not(.stuck) .widget-inpage-nav-dropdown-label {
        padding-left: calc(50% - 255px);
        padding-right: calc(50% - 255px);
    }
    .widget-inpage-nav:not(.stuck) .widget-inpage-nav-dropdown-label:after {
        right: calc(50% - 255px);
    }
}

@media (max-width: 575px) {
    .widget-inpage-nav:not(.stuck) .widget-inpage-nav-dropdown-label {
        padding-left: 15px;
        padding-right: 15px;
    }
    .widget-inpage-nav:not(.stuck) .widget-inpage-nav-dropdown-label:after {
        right: 15px;
    }
}

.stuck .widget-inpage-nav-dropdown-label:not(.expanded) {
    border-bottom: 2px solid #23366f;
}

.stuck #inpage-navigation {
    margin-left: 0;
}

.widget-inpage-nav-dropdown-label:after {
    speak: none;
    content: "";
    font-family: zurich-icons;
    font-size: inherit;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    height: auto;
    line-height: 1;
    position: absolute;
    right: 30px;
    top: 16px;
    transition: inherit;
    width: auto;
}

.widget-inpage-nav-dropdown-label.expanded:after {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .widget-inpage-nav-dropdown-label.expanded+ul {
        opacity: 1;
    }
    .widget-inpage-nav-dropdown-label.expanded:before {
        background-color: rgba(35, 54, 111, .4);
        content: "";
        display: block;
        height: 100vh;
        left: 0;
        position: absolute;
        top: calc(100% + 2px);
        width: 100vw;
        z-index: -1;
    }
}

.widget-inpage-nav-indicator {
    background-color: #23366f;
    bottom: 0;
    height: 2px;
    left: 0;
    position: absolute;
    transition: width .3s ease-in-out;
    width: 0;
    z-index: 9;
}

@media (max-width: 767px) {
    .widget-inpage-nav-indicator {
        display: none;
    }
}

.widget-inpage-nav li,
.widget-inpage-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.widget-inpage-nav ul {
    -ms-overflow-style: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: relative;
    scrollbar-width: none;
    white-space: nowrap;
}

.widget-inpage-nav ul::-webkit-scrollbar {
    display: none;
}

@media (max-width: 767px) {
    .widget-inpage-nav ul {
        background-color: #fff;
        box-shadow: 0 2px 4px -4px rgba(0, 0, 0, .07), 0 4px 5px -1px rgba(0, 0, 0, .05), 0 1px 10px -6px rgba(0, 0, 0, .03);
        flex-wrap: wrap;
        left: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 100%;
        transition: all .3s ease-in-out;
    }
}

.widget-inpage-nav ul:after,
.widget-inpage-nav ul:before {
    content: "";
    flex-shrink: 0;
    transition: all .4s ease-in-out;
    width: 32px;
}

@media (max-width: 575px) {
    .widget-inpage-nav ul:after,
    .widget-inpage-nav ul:before {
        display: none;
    }
}

.widget-inpage-nav li:not(.widget-inpage-nav-indicator) {
    position: relative;
    transition: all .3s ease-in-out;
}

.widget-inpage-nav li:not(.widget-inpage-nav-indicator)+li:not(.widget-inpage-nav-indicator) {
    padding-left: 32px;
}

@media (max-width: 767px) {
    .widget-inpage-nav li:not(.widget-inpage-nav-indicator)+li:not(.widget-inpage-nav-indicator) {
        padding-left: 30px;
    }
    .widget-inpage-nav li:not(.widget-inpage-nav-indicator) {
        border-bottom: 2px solid transparent;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
    }
    .widget-inpage-nav li:not(.widget-inpage-nav-indicator).reached:after {
        background-color: #23366f;
        bottom: 0;
        content: "";
        height: 2px;
        left: calc(-50vw + 50%);
        position: absolute;
        width: 100vw;
    }
}

.widget-inpage-nav li:not(.widget-inpage-nav-indicator) a {
    display: inline-block;
    padding-bottom: 16px;
    padding-top: 16px;
    text-decoration: none !important;
}

@media (max-width: 575px) {
    .widget-inpage-nav li:not(.widget-inpage-nav-indicator) a {
        width: 100%;
    }
}

/* === .stuck state ===
   JS-driven (scroll listener toggles .stuck on .widget-inpage-nav).
   Reverted from position: sticky — the nav's wrapper divs in the
   DOM (.widget-inpage-nav, .full-width, and two intermediate divs)
   are all exactly 62px tall, i.e. no taller than the nav itself.
   position: sticky requires "room" within its containing block to
   visually offset as the page scrolls; with zero spare height in
   every ancestor up to .flow-root.w-full, sticky had nothing to
   work with and never engaged. position: fixed has no such
   requirement — it positions relative to the viewport regardless
   of any ancestor's height — so it's the correct fit for this DOM
   structure. Known trade-off: on some touch devices, the .stuck
   class can lag slightly behind a slow finger-drag scroll, since
   it depends on a JS scroll event rather than the compositor. */
.widget-inpage-nav.stuck .widget-inpage-nav-wrapper {
    left: 0;
    position: fixed;
    top: var(--inpage-nav-header-height);
    width: 100%;
}

.widget-inpage-nav:not(.stuck) ul:after,
.widget-inpage-nav:not(.stuck) ul:before {
    width: 15px;
}

@media (min-width: 576px) {
    .widget-inpage-nav:not(.stuck) ul:after,
    .widget-inpage-nav:not(.stuck) ul:before {
        width: calc(50vw - var(--scrollbar-width)/2 - 255px);
    }
}

@media (min-width: 768px) {
    .widget-inpage-nav:not(.stuck) ul:after,
    .widget-inpage-nav:not(.stuck) ul:before {
        width: calc(50vw - var(--scrollbar-width)/2 - 345px);
    }
}

@media (min-width: 992px) {
    .widget-inpage-nav:not(.stuck) ul:after,
    .widget-inpage-nav:not(.stuck) ul:before {
        width: calc(50vw - var(--scrollbar-width)/2 - 465px);
    }
}

@media (min-width: 1200px) {
    .widget-inpage-nav:not(.stuck) ul:after,
    .widget-inpage-nav:not(.stuck) ul:before {
        width: calc(50vw - var(--scrollbar-width)/2 - 555px);
    }
}

@media (min-width: 768px) {
    .widget-inpage-nav:not(.stuck) li:first-of-type {
        padding-left: 0;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .widget-inpage-nav:not(.stuck) li,
    .widget-inpage-nav:not(.stuck) li+li:not(.widget-inpage-nav-indicator) {
        padding-left: calc(50% - 255px);
        padding-right: calc(50% - 255px);
    }
}

@media (max-width: 575px) {
    .widget-inpage-nav:not(.stuck) li,
    .widget-inpage-nav:not(.stuck) li+li:not(.widget-inpage-nav-indicator) {
        padding-left: 15px;
        padding-right: 15px;
    }
}