@charset "UTF-8";

/* ExireNexus design classes */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.mw-1400 {
    max-width: 1400px;
}

.mw-800 {
    max-width: 800px;
}

.mw-650 {
    max-width: 650px;
}

.ff-serif {
    font-family: "Times New Roman", Times, serif;
}

.ff-sans-serif {
    font-family: Arial, Helvetica, sans-serif;
}

.ff-monospace {
    font-family: "Courier New", Courier, monospace;
}
.ff-cursive {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.ff-fantasy {
    font-family: "Impact", fantasy;
}
.ff-system-ui {
    font-family: system-ui;
}

.fs-7 {
    font-size: 0.75rem;
}

.bottom-40 {
    bottom: 40%;
}

.bottom-30 {
    bottom: 30%;
}

.bottom-20 {
    bottom: 20%;
}

.bottom-10{
    bottom: 10%;
}

/* Animations and transformations */
@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slide-right, .anim-slide-left {
    opacity: 1; /* fallback: fully visible if unsupported */
}

@supports (animation-timeline: view()) {
    .anim-slide-right {
        animation: slide-in-right linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    .anim-slide-left {
        animation: slide-in-left linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.anim-fade, .anim-zoom {
    opacity: 1; /* fallback: fully visible if unsupported */
}

@supports (animation-timeline: view()) {
    .anim-fade {
        animation: fade-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    .anim-zoom {
        animation: zoom-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

.hover-rise {
    transition: 300ms ease-out;
}

.hover-rise:hover {
    transform: translateY(-4px);
    box-shadow: 0 11px 27px rgba(0, 0, 0, .27), 0 0 1px rgba(1, 0, 0, .17);
}

.hover-rotate {
    transition: .2s ease-out;
    overflow: hidden;
    transform-origin: 50% 0;
    transform: perspective(999px) rotateX(0deg) translateZ(0);
    backface-visibility: hidden;
    will-change: transform,box-shadow
}

    .hover-rotate:hover {
        transform: perspective(999px) rotateX(7deg) translate3d(0,-4px,5px)
    }

.hover-shadow {
    transition: 300ms ease-out;
}

    .hover-shadow:hover {
        box-shadow: 0 11px 27px rgba(0, 0, 0, .27), 0 0 1px rgba(1, 0, 0, .17);
    }

.hover-darker {
    transition: 300ms ease-out;
    }
    .hover-darker:hover {
        filter: brightness(0.9);
    }


/* Search panel */

.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #888;
}

.search-icon-input {
    padding-left: 35px;
}

.p-6 {
    padding: 4.5rem !important;
}

.m-6 {
    margin: 4.5rem !important;
}

.p-7 {
    padding: 6rem !important;
}

.m-7 {
    margin: 6rem !important;
}

/* LARGER PADDINGS AND MARGINS */

.pt-6 {
    padding-top: 4.5rem !important;
}

.pb-6 {
    padding-bottom: 4.5rem !important;
}

.ps-6 {
    padding-left: 4.5rem !important;
}

.pe-6 {
    padding-right: 4.5rem !important;
}

.px-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
}

.py-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}



.mt-6 {
    margin-top: 4.5rem !important;
}

.mb-6 {
    margin-bottom: 4.5rem !important;
}

.mx-6 {
    margin-left: 4.5rem !important;
    margin-right: 4.5rem !important;
}

.my-6 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
}

.ms-6 {
    margin-left: 4.5rem !important;
}

.me-6 {
    margin-right: 4.5rem !important;
}


.pt-7 {
    padding-top: 6rem !important;
}

.pb-7 {
    padding-bottom: 6rem !important;
}

.ps-7 {
    padding-left: 6rem !important;
}

.pe-7 {
    padding-right: 6rem !important;
}

.px-7 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

.py-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}



.mt-7 {
    margin-top: 6rem !important;
}

.mb-7 {
    margin-bottom: 6rem !important;
}

.mx-7 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
}

.my-7 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.ms-7 {
    margin-left: 6rem !important;
}

.me-7 {
    margin-right: 6rem !important;
}

/* Safe Area Utilities */
.m-safe {
    margin-top: env(safe-area-inset-top);
    margin-right: env(safe-area-inset-right);
    margin-bottom: env(safe-area-inset-bottom);
    margin-left: env(safe-area-inset-left);
}

.mx-safe {
    margin-right: env(safe-area-inset-right);
    margin-left: env(safe-area-inset-left);
}

.my-safe {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
}

.ms-safe {
    margin-inline-start: env(safe-area-inset-left);
}

.me-safe {
    margin-inline-end: env(safe-area-inset-right);
}

.mt-safe {
    margin-top: env(safe-area-inset-top);
}

.mr-safe {
    margin-right: env(safe-area-inset-right);
}

.mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
}

.ml-safe {
    margin-left: env(safe-area-inset-left);
}

.p-safe {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

.px-safe {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}

.py-safe {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.ps-safe {
    padding-inline-start: env(safe-area-inset-left);
}

.pe-safe {
    padding-inline-end: env(safe-area-inset-right);
}

.pt-safe {
    padding-top: env(safe-area-inset-top);
}

.pr-safe {
    padding-right: env(safe-area-inset-right);
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

.pl-safe {
    padding-left: env(safe-area-inset-left);
}

.text-white a {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity));
}

.text-black a {
    --bs-text-opacity: 1;
    color: #000000;
}

/* Simple image gallery */

.image-columns {
    column-count: 3; /* Adjust number of columns */
    column-gap: 1rem;
}

    .image-columns figure {
        width: 100%; /* Ensures image fits column width */
        margin-bottom: 1rem;
        display: block;
    }

    .image-columns .card {
        overflow: hidden;
    }

    /*Hover effect for img */
    .image-columns img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }


    .image-columns img:hover {
        transform: scale(1.05); /* Slight zoom on hover */
    }


@media (max-width: 768px) {
    .image-columns {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .image-columns {
        column-count: 1;
    }
}

a {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-body-color-rgb),var(--bs-text-opacity));
}

/* A few classes cloned from the Soft UI Design System 3 - v1.1.0 */

.btn-close:focus {
    box-shadow: none
}

.alert-dismissible .btn-close {
    background-image: none
}

.oblique {
    transform: skewX(-10deg);
    overflow: hidden;
    width: 60%;
    right: -10rem;
    border-bottom-left-radius: .75rem
}

    .oblique .oblique-image {
        transform: skewX(10deg)
    }

.footer .nav-link {
    font-weight: 400;
    font-size: .875rem;
    padding-top: 0;
    padding-bottom: .25rem
}

.footer .nav-link:hover {
    opacity: 1 !important;
    transition: opacity .3 ease
}

.text-shadow-none {
    text-shadow: none;
}

.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.1)
}

.text-shadow-lg {
    text-shadow: 0 2px 4px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.15)
}


.glass {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    /*border-radius: 2rem;*/
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

    .glass::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        border-radius: inherit;
        backdrop-filter: blur(1px);
        box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1), inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
        opacity: 0.6;
        z-index: -1;
        filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
    }

.blur {
    /*box-shadow: inset 0 0 2px hsla(0,0%,100%,.8196078431);*/
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px);
/*    background-color: hsla(0,0%,100%,.8) !important*/
}

    .blur.blur-desaturate {
        -webkit-backdrop-filter: saturate(20%) blur(30px);
        backdrop-filter: saturate(20%) blur(30px)
    }

    .blur.blur-rounded {
        border-radius: 40px
    }

    .blur.blur-light {
        background-color: hsla(0,0%,100%,.8)
    }

    .blur.blur-dark {
        background-color: rgba(0,0,0,.3)
    }

.shadow-blur {
    box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05) !important
}

.shadow-card {
    box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important
}

.navbar-blur {
    background-color: hsla(0,0%,100%,.58) !important
}

.blur-section, .navbar-blur {
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px)
}

    .blur-section.blur-gradient-primary {
        background-image: linear-gradient(310deg,rgba(234,88,12,.95),rgba(250,204,21,.95))
    }



.gradient-animation {
    background: linear-gradient(-45deg,#0ea5e9,#ef4444,#eab308,#ea580c,#27272a);
    background-size: 400% 400% !important;
    animation: gradient 10s ease infinite
}

hr {
    border-top: none !important;
    height: 1px
}

    hr.vertical {
        position: absolute;
        background-color: transparent;
        height: 100%;
        right: 0;
        top: 0;
        width: 1px
    }

        hr.vertical.light {
            background-image: linear-gradient(180deg,hsla(0,0%,100%,0),#fff,hsla(0,0%,100%,0))
        }

        hr.vertical.dark {
            background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.4),transparent)
        }

        hr.vertical.gray-light {
            background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)
        }

    hr.horizontal {
        background-color: transparent
    }

        hr.horizontal.light {
            background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#fff,hsla(0,0%,100%,0))
        }

        hr.horizontal.dark {
            background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent)
        }

        hr.horizontal.gray-light {
            background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)
        }

.lock-size {
    width: 1.7rem;
    height: 1.7rem
}

.border-radius-xs {
    border-radius: .125rem
}

.border-radius-sm {
    border-radius: .25rem
}

.border-radius-md {
    border-radius: .5rem
}

.border-radius-lg {
    border-radius: .75rem
}

.border-radius-xl {
    border-radius: 1rem
}

.border-radius-2xl {
    border-radius: 1.5rem
}

.border-radius-section {
    border-radius: 10rem
}

.border-bottom-end-radius-0 {
    border-bottom-right-radius: 0
}

.border-top-end-radius-0 {
    border-top-right-radius: 0
}

.border-bottom-start-radius-0 {
    border-bottom-left-radius: 0
}

.border-top-start-radius-0 {
    border-top-left-radius: 0
}

.border-dashed {
    border-style: dashed
}

.z-index-sticky {
    z-index: 1020
}

.waves {
    position: relative;
    width: 100%;
    height: 16vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px
}

    .waves.waves-sm {
        height: 50px;
        min-height: 50px
    }

    .waves.no-animation .moving-waves > use {
        animation: none
    }

.wave-rotate {
    transform: rotate(180deg)
}

.moving-waves > use {
    animation: f 40s cubic-bezier(.55,.5,.45,.5) infinite
}

    .moving-waves > use:first-child {
        animation-delay: -2s;
        animation-duration: 11s
    }

    .moving-waves > use:nth-child(2) {
        animation-delay: -4s;
        animation-duration: 13s
    }

    .moving-waves > use:nth-child(3) {
        animation-delay: -3s;
        animation-duration: 15s
    }

    .moving-waves > use:nth-child(4) {
        animation-delay: -4s;
        animation-duration: 20s
    }

    .moving-waves > use:nth-child(5) {
        animation-delay: -4s;
        animation-duration: 25s
    }

    .moving-waves > use:nth-child(6) {
        animation-delay: -3s;
        animation-duration: 30s
    }

@keyframes f {
    0% {
        transform: translate3d(-90px,0,0)
    }

    to {
        transform: translate3d(85px,0,0)
    }
}

@media (max-width:767.98px) {
    .waves {
        height: 40px;
        min-height: 40px
    }
}

.overflow-visible {
    overflow: visible !important
}

.bg-cover {
    background-size: cover
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-y-hidden {
    overflow-y: hidden
}

.overflow-x-scroll {
    overflow-x: scroll
}

.overflow-y-scroll {
    overflow-y: scroll
}

.mask {
    position: absolute;
    background-size: cover;
    background-position: 50%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8
}

.cursor-pointer {
    cursor: pointer
}

.transform-translate-50 {
    transform: translateY(-50%)
}


.tilt {
    transform-style: preserve-3d
}

    .tilt .up {
        transform: translateZ(50px) scale(.7) !important;
        transition: all .5s
    }

.text-sm {
    line-height: 1.5
}

.text-xs {
    line-height: 1.25
}

.lead {
    font-size: 1.25rem
}

.text-lg {
    font-size: 1.125rem !important
}

.text-sm {
    font-size: .875rem !important
}

.text-xs {
    font-size: .75rem !important
}

.text-xxs {
    font-size: .65rem !important
}

.text-sans-serif {
    font-family: Inter !important
}

.text-monospace {
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace !important
}

.text-justify {
    text-align: justify !important
}

.text-wrap {
    white-space: normal !important
}

.text-nowrap {
    white-space: nowrap !important
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.font-weight-light {
    font-weight: 300 !important
}

.font-weight-lighter {
    font-weight: lighter !important
}

.font-weight-normal {
    font-weight: 400 !important
}

.font-weight-bold {
    font-weight: 600 !important
}

.font-weight-bolder {
    font-weight: 700 !important
}

.font-italic {
    font-style: italic !important
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1
}

.blockquote {
    border-left: 3px solid #52525b
}

    .blockquote > span {
        font-style: italic
    }


.text-black-50 {
    color: rgba(0,0,0,.5) !important
}

.text-white-50 {
    color: hsla(0,0%,100%,.5) !important
}

.text-decoration-none {
    text-decoration: none !important
}

.text-break {
    word-wrap: break-word !important
}

.text-reset {
    color: inherit !important
}

.letter-wider {
    letter-spacing: .05rem
}

.letter-normal {
    letter-spacing: 0
}

.letter-tighter {
    letter-spacing: -.05rem
}

.text-lighter {
    font-weight: lighter
}

.text-light {
    font-weight: 300
}

.text-normal {
    font-weight: 400
}

.text-bold {
    font-weight: 600
}

.text-bolder {
    font-weight: 700
}

.text-2xl {
    font-size: 1.5rem
}

.text-3xl {
    font-size: 1.875rem
}

.text-4xl {
    font-size: 2rem
}

.text-5xl {
    font-size: 2.25rem
}

.text-6xl {
    font-size: 3rem
}

.text-7xl {
    font-size: 3.75rem
}

.text-8xl {
    font-size: 4rem
}

.text-9xl {
    font-size: 5rem
}

/* Background image position modes */

/* Fixed: background stays in place while content scrolls over it */
.bg-image-fixed {
    background-attachment: fixed;
}

/* Disable fixed attachment on touch devices where it causes rendering issues */
@media (hover: none) {
    .bg-image-fixed {
        background-attachment: scroll;
    }
}

/* Parallax: background scrolls slower than content using scroll-driven animation.
   Uses ::after so it doesn't conflict with the overlay ::before pseudo-element.
   The parent defines a named view-timeline, and the ::after references it for
   reliable tracking even though it is absolutely positioned.
   Falls back to a static background in browsers without scroll-driven animation support (Safari). */
.bg-image-parallax {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* Ensures ::after with negative z-index stays within this element */
}

@supports (animation-timeline: view()) {
    /* Hide the inline background-image; the animated ::after takes over */
    .bg-image-parallax {
        background-image: none !important;
        view-timeline-name: --parallax;
        view-timeline-axis: block;
    }

    .bg-image-parallax::after {
        content: '';
        position: absolute;
        top: -15%;
        left: 0;
        width: 100%;
        height: 130%;
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        z-index: -2; /* Behind overlay ::before (-1) and content */
        pointer-events: none;
        animation-name: parallax-scroll;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-duration: auto; /* Let the scroll timeline control duration (shorthand defaults to 0s) */
        animation-timeline: --parallax;
    }
}

/* ==========================================================================
   Swipeable (Splide) block: image position + content alignment
   ==========================================================================
   Each slide is a `.swipable-layout-*` container whose layout depends on the
   "Image position" setting (Swipeable.ImagePosition): background (default,
   image absolutely positioned full-bleed behind the text), above (stacked
   column), left/right (side-by-side flex row, image full-bleed to its own
   edge of the slide). The "Content position" setting (Swipeable.SlideContentPosition)
   controls vertical alignment of the text block and works consistently across
   all four layouts via the shared .swipable-align-* classes below.
   ========================================================================== */

/* Background mode (default): image is absolutely positioned behind the text overlay */
.swipable-layout-background {
    position: relative;
}

    .swipable-layout-background .swipable-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swipable-layout-background .swipable-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

/* Above mode: image stacked on top of the text, both in normal document flow */
.swipable-layout-above {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .swipable-layout-above .swipable-bg {
        width: 100%;
        height: 50%;
        object-fit: cover;
        flex: 0 0 auto;
    }

    .swipable-layout-above .swipable-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

/* Left/right modes: image and text side by side, image full-bleed to its own edge */
.swipable-layout-left,
.swipable-layout-right {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.swipable-layout-right {
    flex-direction: row-reverse;
}

.swipable-layout-left .swipable-bg,
.swipable-layout-right .swipable-bg {
    width: 40%;
    height: 100%;
    object-fit: cover;
    flex: 0 0 40%;
}

.swipable-layout-left .swipable-content,
.swipable-layout-right .swipable-content {
    display: flex;
    flex: 1 1 60%;
    flex-direction: column;
    min-height: 0;
}

/* Content position: vertical alignment of the text block, works in every layout mode */
.swipable-align-top {
    justify-content: flex-start;
}

.swipable-align-center {
    justify-content: center;
}

.swipable-align-bottom {
    justify-content: flex-end;
}

/* Keep every slide the same fixed size regardless of content length: the
   outer link/card fills the slide's width (set by Splide's PerPage), and long
   titles/teasers are clamped with an ellipsis instead of growing the card. */
.splide__slide > a {
    display: block;
    height: 100%;
}

.swipable-layout-background,
.swipable-layout-above,
.swipable-layout-left,
.swipable-layout-right {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swipable-content h1,
.swipable-content h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.swipable-content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

@keyframes parallax-scroll {
    from { transform: translateY(-10%); }
    to { transform: translateY(10%); }
}

/* Background video: fills the section behind content */
.has-background-video {
    position: relative;
    overflow: hidden;
}

.has-background-video > .background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.has-background-video > .container,
.has-background-video > .container-fluid {
    position: relative;
    z-index: 1;
}

/* ===== Image Accordion (Apple-style) ===== */

/* Two-column layout on desktop */
.image-accordion {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 992px) {
    .image-accordion {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }

    .image-accordion-items {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .image-accordion-display {
        flex: 1 1 55%;
        position: sticky;
        top: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }
}

/* Accordion item styling */
.image-accordion-item {
    cursor: pointer;
}

.image-accordion-item + .image-accordion-item {
    border-top: 1px solid rgba(128, 128, 128, .25);
}

.image-accordion-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
}

.image-accordion-item-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    transition: color .3s ease;
}

.image-accordion-item.active .image-accordion-item-title {
    color: var(--bs-primary, #0d6efd);
}

/* Chevron indicator */
.image-accordion-chevron {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.image-accordion-item.active .image-accordion-chevron {
    transform: rotate(-135deg);
}

/* Collapsible body with smooth animation */
.image-accordion-item-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
    padding: 0 0;
}

.image-accordion-item-body.expanded {
    max-height: 800px;
    opacity: 1;
    padding-bottom: 1.5rem;
}

.image-accordion-item-teaser {
    margin: 0 0 .75rem;
    line-height: 1.6;
}

.image-accordion-item-text {
    margin-bottom: .75rem;
    line-height: 1.6;
}

.image-accordion-pretitle {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
    opacity: .7;
}

/* Link button inside item */
.image-accordion-link {
    display: inline-block;
    margin-top: .5rem;
    font-weight: 600;
    text-decoration: none;
}

.image-accordion-link:hover {
    text-decoration: underline;
}

/* Mobile inline image */
.image-accordion-inline-image {
    margin: 1rem 0 0;
}

.image-accordion-inline-image img {
    border-radius: .75rem;
    width: 100%;
    height: auto;
}

/* Desktop image display panel — crossfade between images */
.image-accordion-display {
    position: relative;
    overflow: hidden;
    /*border-radius: 1rem;*/
}

.image-accordion-display-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /*border-radius: 1rem;*/
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.image-accordion-display-img.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   Transparent/overlay header for hero-style first blocks
   ==========================================================================
   A page can opt in (Item.TransparentHeaderKey / "TransparentHeader") to having its first
   content block's background stretch behind the site header. Two classes cooperate:

   - .stretch-behind-header (on the block's outer section, see PageBase.SectionStyles): pulls
     the background up under the header with a negative top margin, then pushes the actual
     content (title/teaser/text/buttons) back down by the same amount using padding-top, so
     only the BACKGROUND reaches full-bleed behind the header — the content itself still starts
     below it.
   - .overlay-header (on the header wrapper, see SiteHeader.BuildHeaderCssClass): renders the
     header without its usual solid background so the hero background shows through.

   --header-height is a rough estimate of the header's rendered height. Blazor has no cheap way
   to measure the real DOM height without JS interop, so this is a sensible fixed default that
   can be overridden per-theme/site via a CSS custom property if needed.
   ========================================================================== */
:root {
    --header-height: 90px;
}

.stretch-behind-header {
    position: relative;
    z-index: 0;
}

.main-header.overlay-header {
    /* Overlay mode always removes the header from normal document flow so the hero block below
       it can start at y = 0 (position: sticky would still reserve its normal-flow placeholder
       space and push the hero down). By default (no "Sticky Header" site setting) we use
       position: absolute, which is anchored to the page and scrolls away naturally with the
       rest of the content — matching non-sticky behavior. When "Sticky Header" IS enabled
       (.sticky-top also present), the more specific rule below switches to position: fixed so
       the header stays pinned to the viewport while scrolling. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    /* No !important here: the scroll-driven animation below animates background-color, and CSS
       animations cannot override !important declarations, which previously kept the header
       transparent forever even once "solidified". */
    background-color: transparent;
    transition: background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}

.main-header.overlay-header.sticky-top {
    /* "Sticky Header" is enabled together with the stretch/overlay option: pin the header to the
       viewport on scroll using fixed (sticky would reserve flow space and push the hero down). */
    position: fixed;
}

/* Chromium supports scroll-driven CSS animations, so we can go fully transparent-until-scrolled
   with a smooth transition to the normal solid background as soon as the page starts scrolling —
   no JS scroll listener required. */
@supports (animation-timeline: scroll()) {
    @keyframes overlay-header-solidify {
        from {
            background-color: transparent;
            backdrop-filter: none;
            box-shadow: none;
        }

        to {
            background-color: #00000099;
            /*background-color: var(--bs-body-bg, #fff);*/
            backdrop-filter: blur(6px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        }
    }

    /* Only sticky overlay headers need the scroll-driven solidify transition: a non-sticky
       overlay header scrolls away with the rest of the page, so it should stay fully
       transparent throughout instead of gaining a background as the user scrolls. */
    .main-header.overlay-header.sticky-top {
        animation: overlay-header-solidify linear both;
        animation-timeline: scroll(root);
        animation-range: 0 220px;
    }
}

/* Fallback for browsers without scroll-driven animation support (e.g. Firefox, Safari at time of
   writing): we cannot track scroll position with CSS alone there, so instead of a hard transparent
   header we use a subtly translucent, blurred background from the start. This keeps text/menu
   items readable over any hero background while still feeling "light" over the image. */
@supports not (animation-timeline: scroll()) {
    /* Same reasoning as above: only sticky overlay headers need a readable background as the
       page scrolls beneath them, since non-sticky ones scroll away with the hero content. */
    .main-header.overlay-header.sticky-top {
        background-color: rgba(255, 255, 255, .55);
        backdrop-filter: blur(8px);
    }
}

.admin-icon {
    opacity: .5;
    transition: opacity 0.3s ease;
    float: left;
    padding: 1.1rem 0 0 1.1rem;
    cursor: pointer;
}

    .admin-icon:hover {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

/* Mobile: there is no top-left corner to spare, so the admin icon becomes a small tab on the right
   edge, vertically centered. The component positions itself inline (absolute, top-left), hence the overrides. */
@media (max-width: 768px) {
    .admin-icon {
        position: fixed !important;
        top: 50% !important;
        left: auto !important;
        right: 0;
        transform: translateY(-50%);
        float: none;
        padding: .55rem .5rem .55rem .65rem;
        line-height: 0;
        opacity: .85;
        background: rgb(255 255 255 / 85%);
        border: 1px solid rgb(0 0 0 / 8%);
        border-right: 0;
        border-radius: 12px 0 0 12px;
        box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
        backdrop-filter: blur(6px);
    }
}

/* Fix dialog positioning to prevent bouncing when content changes size */
/*fluent-dialog::part(control) {
    position: absolute;
    top: 15%;
}*/