/* ================================================
   OVERLAY ACCORDION
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* -----------------------------------------------
   Container
   ----------------------------------------------- */
.overlay-accordion-container {
    width: 100%;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

.overlay-accordion {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* -----------------------------------------------
   Item
   
   Overlap: each item (except first) pulls itself
   up so its header covers the bottom ~1/3 of the
   header above. margin-top scales with viewport
   via clamp (20px @ 320px → 34px @ 2500px).
   
   Z-index stacking: LATER items sit ON TOP of
   earlier ones (tittel 2 over tittel 1, etc.)
     item 1 → z-index 1
     item 2 → z-index 2  …
   Active item jumps to 100.
   ----------------------------------------------- */
.overlay-accordion-item {
    position: relative;
    margin-top: calc(-1 * clamp(20px, 0.6422vw + 17.95px, 34px));
    z-index: 1;
}

.overlay-accordion-item:first-child {
    margin-top: 0;
}

/* Base z-index — increases downward */
.overlay-accordion-item:nth-child(1) { z-index: 1; }
.overlay-accordion-item:nth-child(2) { z-index: 2; }
.overlay-accordion-item:nth-child(3) { z-index: 3; }
.overlay-accordion-item:nth-child(4) { z-index: 4; }
.overlay-accordion-item:nth-child(5) { z-index: 5; }
.overlay-accordion-item:nth-child(6) { z-index: 6; }

/* Active item rises above everything */
.overlay-accordion-item.active {
    z-index: 100 !important;
}

/* -----------------------------------------------
   Header
   Height is natural (padding + title line-height).
   No fixed min-height — scales with the clamp font.
   ----------------------------------------------- */
.overlay-accordion-header {
    background: #001B29;
    padding: 18px 40px 18px 80px;
    cursor: pointer;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
}

/* -----------------------------------------------
   Number
   Normal  : #004970
   Active  : #ffffff
   Font size scales proportionally with title
   via clamp (12px @ 320px → 18px @ 2500px).
   ----------------------------------------------- */
.overlay-accordion-number {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(12px, 0.5vw + 10.4px, 18px);
    font-weight: 400;
    color: #004970;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    transition: color 0.2s ease;
}

.overlay-accordion-item.active .overlay-accordion-number {
    color: #ffffff;
}

/* -----------------------------------------------
   Title
   clamp: 22px @ 320px  →  58px @ 2500px
     preferred = 1.651vw + 16.72px
   Normal  : #004970
   Active  : #2CC4FF
   ----------------------------------------------- */
.overlay-accordion-title {
    font-size: clamp(22px, 1.651vw + 16.72px, 58px);
    font-weight: 300;
    color: #004970;
    margin: 0;
    line-height: 1.15;
    transition: color 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.overlay-accordion-item.active .overlay-accordion-title {
    color: #2CC4FF;
}

/* -----------------------------------------------
   Content
   bg = #001B29 — paints over collapsed titles
   below the active item (seamless with header).
   
   Width of the text block: 80% of container.
   Left padding keeps alignment with title gutter;
   max-width: 80% caps the text width.
   
   max-height in active state: 2000px (generous
   ceiling; JS sets the exact scrollHeight anyway,
   this value only affects transition-duration calc).
   ----------------------------------------------- */
.overlay-accordion-content {
    background: #001B29;
    padding: 0 0 0 80px;
    max-width: 80%;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(14px, 1vw + 4px, 17px);
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-family: 'Poppins', sans-serif;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.25s cubic-bezier(0.4, 0, 0.2, 1),
                padding   0.3s  cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay-accordion-item.active .overlay-accordion-content {
    max-height: 2000px;
    opacity: 1;
    padding-top: 16px;
    padding-bottom: 30px;
}

.overlay-accordion-content p {
    margin: 0 0 14px 0;
}
.overlay-accordion-content p:last-child {
    margin-bottom: 0;
}

/* -----------------------------------------------
   Responsive — small tweaks for number gutter
   on narrow screens (title font + overlap margin
   already scale via clamp, no overrides needed).
   ----------------------------------------------- */
@media (max-width: 600px) {
    .overlay-accordion-header {
        padding-left: 56px;
    }
    .overlay-accordion-number {
        left: 18px;
    }
    .overlay-accordion-content {
        padding-left: 56px;
        max-width: 90%;
    }
}

@media (max-width: 380px) {
    .overlay-accordion-header {
        padding-left: 46px;
    }
    .overlay-accordion-number {
        left: 14px;
    }
    .overlay-accordion-content {
        padding-left: 46px;
        max-width: 95%;
    }
}