@charset "UTF-8";

/* DENTAL BEAUTY FAQ (Task 13) — Figma 5202:2074 */

section.faq {
    background-color: rgba( 135, 183, 213, 0.5 ); /* --accent @ 50% (matches Special Offers band) */
    padding: clamp( 72px, 7.29vw, 140px ) 0;
}

section.faq .heading h2 {
    font-family: var( --heading-font ); /* Zalando Sans Expanded */
    font-weight: 600;
    font-size: clamp( 32px, 2.5vw, 48px );
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var( --black );
    text-align: center;
    margin: 0 0 clamp( 32px, 2.9vw, 56px );
}

section.faq .faq-holder {
    /* max-width: 1124px; */
}

/* rows separated by thin white dividers (no cards) */
section.faq .faq-item {
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    border-bottom: 2px solid rgba( 255, 255, 255, 0.5 );
    transition: none;
}
section.faq .faq-item:last-child {
    border-bottom: 0;
}

.faq-item .accordion {
    position: relative;
    width: 100%;
    height: auto;          /* override parent .accordion{height:50px} so wrapped questions aren't clipped */
    min-height: 0;
    background-color: transparent;
    color: var( --black );
    border: 0;
    border-radius: 0;
    padding: clamp( 16px, 1.5vw, 24px ) 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
}

.faq-item h4,
.faq-item .h4 {
    font-family: var( --body-font ); /* Zalando Sans Regular, per Figma body */
    font-weight: 600;                /* DB QA #103527602 (Ali): questions semibold */
    text-transform: none;
    font-size: clamp( 18px, 1.6vw, 22px ); /* DB QA: 22px (was 16–18) */
    line-height: 1.5;
    letter-spacing: 0;               /* DB QA: no extra tracking */
    color: var( --black );
    margin: 0;
}

/* + / − toggle (navy, right-aligned) */
.faq-item .accordion::after {
    position: absolute;
    content: '\f067';
    font-family: 'Font Awesome 5 Free', fantasy;
    font-weight: 900;
    right: clamp( 8px, 1vw, 16px );
    top: 50%;
    transform: translateY( -50% );
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    color: var( --black );
}
.faq-item .accordion.active::after {
    content: '\f068';
}

/* sitewide accordion toggles display:none -> .show{display:block!important}; just add padding when open */
.faq-item .panel.show {
    padding: 0 56px clamp( 16px, 1.5vw, 24px );
}
.faq-item .answer {
    color: var( --black );
    text-align: center;
}
.faq-item .answer p {
    font-family: var( --body-font );
    font-size: clamp( 16px, 1vw, 18px );
    line-height: 1.5;
    margin: 0 0 12px;
}
.faq-item .answer p:last-child { margin-bottom: 0; }
.faq-item .answer li { margin-bottom: 10px; }

@media ( max-width: 768px ) {
    .faq-item .accordion {
        padding: 16px 44px 16px 16px;
        justify-content: flex-start;
        text-align: left;
    }
    .faq-item .panel.show {
        padding: 0 16px 16px;
    }
    .faq-item .answer { text-align: left; }
}