/* fade-in animations */
/* Hide the content initially */
.faq-search-bar {
    opacity: 0;            /* Start fully transparent */
    transform: translateY(20px); /* Start slightly below */
    animation: fadeIn 1s ease-out forwards; /* Animate to full opacity */
}



.faq-search-bar {
    left: 210px;
    right: 210px;
    position: fixed;             
    display: flex;
    justify-content: center;
    z-index: 5;
    transition: 
        top 0.5s ease,
        left 0.5s ease,
        right 0.5s ease,
        transform 0.3s ease, 
        opacity 0.3s ease;
}

#main-header.shrink ~ 
.faq-search-bar {
    top: 120px;
}

#main-header:not(.shrink) ~ 
.faq-search-bar {
    top: 170px;
}

.faq-search-bar input {
    width: 100%;
    /*max-width: 600px;*/
    padding: 12px 150px 12px 20px;
    font-size: 23px;
    border-radius: 25px;
    border: 2px solid var(--dark-plum);
    outline: none;
    box-sizing: border-box;
    /*background-color: rgba(255, 255, 255, 0.05);*/
    background-color: rgba(97, 47, 59, 1);
    color: var(--text-color);
    font-family: 'Bellefair';
}

.faq-search-bar input::placeholder {
    color: rgba(255,255,255,0.6);
}

.faq-search-controls {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 20px;
}

.icon-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn img {
    width: 10px;
    height: 10px;
    display: block;
    box-shadow: none;
}

.hidden {
    display: none;
}

.faq-highlight {
    background-color: rgba(255, 200, 0, 0.4); /* default highlight */
    padding: 0 2px;
    border-radius: 3px;
}

.faq-highlight.active {
    background-color: rgba(255, 80, 80, 0.6); /* focused match */
}





/* Main Section Styling */
.questions {
    width: 100%;
    padding-top: 150px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 
        padding-top 0.5s ease;
}

.main-content h2 {
    width: fit-content;
    font-size: 27px;
    font-weight: bold;
}

.questions-grid {
    margin-right: 40px;
    margin-left: 40px;
    display: grid; 
    grid-template-rows: repeat(1);
    gap: 10px;
    transition: 
        margin-left 0.5s ease,
        margin-right 0.5s ease;
}

.qa {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.question { 
    width: 100%;
    height: fit-content;
    padding-left: 30px;
    padding-right: 65px;
    background-color: transparent;
    border: 2px solid var(--dark-plum);
    font-size: 25px; 
    text-align: center;
    box-sizing: border-box; 
    background-color: rgba(255, 255, 255, 0.02);
    transition: 
        background-color 0.5s ease, 
        transform 0.5s ease, 
        z-index 0.5s ease,

        font-size 0.5s ease; 
    z-index: 3;
    cursor: pointer;

    position: relative;
}
.question:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.answer {
    width: 100%;
    max-height: 0px;
    overflow: auto;
    scrollbar-width: none;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 22px; 
    line-height: 1.2;
    text-align: justify;
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--dark-plum);
    border-top: none;
    box-sizing: border-box; 
    opacity: 0;
    transition:
        max-height 0.5s ease,
        padding 0.4s ease,
        opacity 0.3s ease;
}

/* Open state */
/*.qa.active .question {
    border-bottom: none;
}*/

.qa.active .answer {
    max-height: 550px;
    opacity: 1;
}

/* Arrow */
.question::after {
    content: "▾";
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 30px;
    color: var(--darker-plum);
    pointer-events: none;
    text-shadow: none;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}
.qa.active .question::after {
    transform: translateY(-50%) rotate(180deg);
}







/* SCREEN SIZE VARIANTS */
/* where right side is gone */
@media (max-width: 1200px) 
{
    .faq-search-bar {
        right: 50px;
    }
}



/* 768 */
/* where both sides are gone */
@media (max-width: 865px) {
    .faq-search-bar {
        left: 50px;
    }

    #main-header.shrink ~ 
    .faq-search-bar {
        top: 120px;
    }

    #main-header:not(.shrink) ~ 
    .faq-search-bar {
        top: 220px;
    }

    .questions {
        padding-top: 200px;
    }
}



/* when the ToC shrinks */
@media (max-width: 685px) 
{
    .faq-search-bar {
        left: 30px;
        right: 30px;
    }

    #main-header.shrink ~ 
    .faq-search-bar {
        top: 170px;
    }

    .questions-grid {
        margin-right: 20px;
        margin-left: 20px;
    }
}



@media (max-width: 580px) {
    /*#main-header, #beam {
        padding: 0px 15px;
    }
    #main-header.shrink, #beam.shrink {
        padding: 0px 27px;
    }*/
}
@media (max-width: 542px) {
    /*#main-header:not(.shrink) .nav-links .nav:nth-of-type(1) {
        opacity: 0.0;
    }

    #main-header.shrink .logo {
        left: 20px;
        top: 10px;
    }*/
}



/* for mobile */
/* 360px for my android */
/*@media (pointer: coarse)*/
@media (max-width: 450px)
{
    /*#main-header, #beam {
        height: 150px;
        justify-content: center;
        padding: 0px 20px;
    }
    #main-header.shrink, #beam.shrink {
        height: 120px;
        padding: 0px 20px;
    }

    .logo {
        font-size: 60px;
        padding-right: 20px;
    }
    #main-header.shrink .logo {
        font-size: 45px;
    }

    #main-header.shrink .nav-lang {
        width: 100%;
        gap: 65px;
    }

    #main-header.shrink .nav-links .nav {
        font-size: 16px;
    }

    #main-header:not(.shrink) .nav-links .nav:nth-of-type(1) {
        opacity: 1.0;
    }

    #main-header.shrink .nav p {
        font-size: 0px;
    }*/
}