/* ==========================================================
   MERITZA CLASSES
   FAQ
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.mc-faq{

    position:relative;

    padding-top:0;

    padding-bottom:0;

    overflow:hidden;

}


/* ==========================================================
   HEADER
========================================================== */

.mc-faq-header{

    position:relative;

    max-width:820px;

    margin:0 auto 26px;

    text-align:center;

}


/* ==========================================================
   EDITORIAL EYEBROW
========================================================== */

.mc-faq-eyebrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:720px;

    margin:0 auto 10px;

    gap:18px;

}


/* ==========================================================
   EYEBROW TEXT
========================================================== */

.mc-faq-eyebrow-text{

    flex-shrink:0;

    color:#B98C14;

    font-size:.84rem;

    font-weight:800;

    letter-spacing:.17em;

    line-height:1;

    white-space:nowrap;

}


/* ==========================================================
   EYEBROW LINES
========================================================== */

.mc-faq-eyebrow-line{

    flex:1;

    height:2px;

}


/* ==========================================================
   LEFT GOLD LINE
========================================================== */

.mc-faq-eyebrow-line:first-child{

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212,175,55,.20) 15%,
            rgba(212,175,55,.55) 55%,
            rgba(212,175,55,.95) 100%
        );

}


/* ==========================================================
   RIGHT GOLD LINE
========================================================== */

.mc-faq-eyebrow-line:last-child{

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.95) 0%,
            rgba(212,175,55,.55) 45%,
            rgba(212,175,55,.20) 85%,
            transparent 100%
        );

}


/* ==========================================================
   TITLE
========================================================== */

.mc-faq-title{

    margin:0;

    color:#0A1946;

    font-size:2.2rem;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-.7px;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.mc-faq-description{

    max-width:640px;

    margin:6px auto 0;

    color:#52627A;

    font-size:.9rem;

    line-height:1.45;

}


/* ==========================================================
   FAQ LIST
========================================================== */

.mc-faq-list{

    width:100%;

    max-width:900px;

    margin:0 auto;

}


/* ==========================================================
   FAQ ITEM
========================================================== */

.mc-faq-item{

    position:relative;

    margin-bottom:10px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F8FAFD 100%
        );

    border:1px solid rgba(10,25,70,.09);

    border-radius:14px;

    box-shadow:
        0 5px 16px rgba(10,25,70,.035);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.mc-faq-item:last-child{

    margin-bottom:0;

}


/* ==========================================================
   OPEN STATE
========================================================== */

.mc-faq-item.is-open{

    border-color:rgba(212,175,55,.34);

    box-shadow:
        0 9px 22px rgba(10,25,70,.065);

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F6F8FC 100%
        );

}


/* ==========================================================
   QUESTION BUTTON
========================================================== */

.mc-faq-question{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    min-height:62px;

    padding:17px 20px;

    margin:0;

    color:#0A1946;

    background:transparent;

    border:0;

    outline:0;

    font-family:inherit;

    font-size:.9rem;

    font-weight:800;

    line-height:1.4;

    text-align:left;

    cursor:pointer;

}


/* ==========================================================
   QUESTION TEXT
========================================================== */

.mc-faq-question-text{

    display:block;

    padding-right:18px;

}


/* ==========================================================
   QUESTION HOVER
========================================================== */

.mc-faq-question:hover{

    color:#173B80;

}


/* ==========================================================
   FOCUS
========================================================== */

.mc-faq-question:focus-visible{

    outline:2px solid rgba(212,175,55,.65);

    outline-offset:-3px;

}


/* ==========================================================
   FAQ ICON
========================================================== */

.mc-faq-icon{

    position:relative;

    flex:0 0 30px;

    width:30px;

    height:30px;

    border:1px solid rgba(10,25,70,.12);

    border-radius:50%;

    background:#FFFFFF;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


/* ==========================================================
   ICON LINES
========================================================== */

.mc-faq-icon span{

    position:absolute;

    top:50%;

    left:50%;

    width:10px;

    height:1.5px;

    background:#0A1946;

    transform:translate(-50%,-50%);

    transition:
        transform .2s ease,
        opacity .2s ease;

}


.mc-faq-icon span:last-child{

    transform:
        translate(-50%,-50%)
        rotate(90deg);

}


/* ==========================================================
   OPEN ICON
========================================================== */

.mc-faq-item.is-open
.mc-faq-icon{

    background:#0A1946;

    border-color:#0A1946;

}


.mc-faq-item.is-open
.mc-faq-icon span{

    background:#FFFFFF;

}


.mc-faq-item.is-open
.mc-faq-icon span:last-child{

    opacity:0;

    transform:
        translate(-50%,-50%)
        rotate(90deg);

}


/* ==========================================================
   ANSWER
========================================================== */

.mc-faq-answer{

    display:grid;

    grid-template-rows:0fr;

    opacity:0;

    transition:
        grid-template-rows .25s ease,
        opacity .2s ease;

}


.mc-faq-answer[hidden]{

    display:grid;

}


.mc-faq-item.is-open
.mc-faq-answer{

    grid-template-rows:1fr;

    opacity:1;

}


/* ==========================================================
   ANSWER INNER
========================================================== */

.mc-faq-answer-inner{

    min-height:0;

    overflow:hidden;

    padding:0 20px;

    color:#59677C;

    font-size:.82rem;

    line-height:1.65;

}


/* ==========================================================
   OPEN ANSWER SPACING
========================================================== */

.mc-faq-item.is-open
.mc-faq-answer-inner{

    padding-bottom:19px;

}


/* ==========================================================
   FOOTER
========================================================== */

.mc-faq-footer{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:22px;

    margin-bottom:28px;

}


/* ==========================================================
   FOOTER TEXT
========================================================== */

.mc-faq-footer-text{

    margin:0;

    color:#7A879A;

    font-size:.76rem;

    font-weight:600;

}


/* ==========================================================
   CONTACT LINK
========================================================== */

.mc-faq-contact{

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#245FC1;

    font-size:.78rem;

    font-weight:800;

    text-decoration:none;

    transition:
        color .2s ease,
        gap .2s ease;

}


.mc-faq-contact span{

    font-size:1.05rem;

    line-height:1;

}


.mc-faq-contact:hover{

    color:#0A1946;

    gap:8px;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991.98px){

    .mc-faq-list{

        max-width:820px;

    }


    .mc-faq-title{

        font-size:2rem;

    }


    .mc-faq-question{

        min-height:60px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767.98px){

    .mc-faq-header{

        margin-bottom:22px;

    }


    .mc-faq-eyebrow{

        gap:10px;

    }


    .mc-faq-eyebrow-text{

        font-size:.62rem;

        letter-spacing:.11em;

    }


    .mc-faq-eyebrow-line{

        height:1px;

    }


    .mc-faq-title{

        font-size:1.8rem;

        letter-spacing:-.4px;

    }


    .mc-faq-description{

        font-size:.84rem;

    }


    .mc-faq-item{

        margin-bottom:8px;

        border-radius:12px;

    }


    .mc-faq-question{

        min-height:58px;

        padding:15px 16px;

        font-size:.82rem;

    }


    .mc-faq-question-text{

        padding-right:12px;

    }


    .mc-faq-icon{

        flex-basis:28px;

        width:28px;

        height:28px;

    }


    .mc-faq-answer-inner{

        padding:0 16px;

        font-size:.78rem;

        line-height:1.6;

    }


    .mc-faq-item.is-open
    .mc-faq-answer-inner{

        padding-bottom:16px;

    }


    .mc-faq-footer{

        flex-direction:column;

        gap:4px;

        margin-top:20px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .mc-faq-item,
    .mc-faq-icon,
    .mc-faq-icon span,
    .mc-faq-answer,
    .mc-faq-contact{

        transition:none;

    }

}