/* ==================================================
   MUSLIM PATH ACADEMY
   QUESTIONS HUB V1
================================================== */

.mpa-qhub{
    max-width:1100px;
    margin:64px auto 0;
}

.mpa-qhub__intro{
    max-width:760px;
    margin:0 auto 28px;
    text-align:center;
}

.mpa-qhub__eyebrow{
    display:inline-block;
    margin-bottom:10px;

    color:#01478d;

    font-size:12px;
    line-height:1.4;
    font-weight:800;

    letter-spacing:.08em;
    text-transform:uppercase;
}

html[dir="rtl"]
.mpa-qhub__eyebrow{
    letter-spacing:0;
}

.mpa-qhub__intro h2{
    margin:0;

    color:#08284c;

    font-size:
        clamp(
            2.1rem,
            4vw,
            3.5rem
        );

    line-height:1.08;
    letter-spacing:-.035em;
}

html[dir="rtl"]
.mpa-qhub__intro h2{
    letter-spacing:0;
}

.mpa-qhub__intro p{
    max-width:700px;

    margin:
        15px auto 0;

    color:#607b95;

    font-size:16px;
    line-height:1.8;
}


/* SEARCH */

.mpa-qhub__search{
    position:relative;

    display:flex;
    align-items:center;

    max-width:780px;

    margin:
        0 auto 22px;

    padding:0;

    background:#fff;

    border:
        1px solid
        #dce7f1;

    border-radius:18px;

    box-shadow:
        0 14px 38px
        rgba(8,40,76,.08);
}

.mpa-qhub__search svg{
    position:absolute;
    left:19px;

    width:21px;
    height:21px;

    fill:none;
    stroke:#6b9dc6;
    stroke-width:1.8;
    stroke-linecap:round;

    pointer-events:none;
}

html[dir="rtl"]
.mpa-qhub__search svg{
    left:auto;
    right:19px;
}

.mpa-qhub__search input{
    width:100%;
    min-height:62px;

    padding:
        0 20px
        0 53px;

    border:0;
    outline:0;

    border-radius:18px;

    background:transparent;

    color:#08284c;

    font:inherit;
    font-size:16px;
}

html[dir="rtl"]
.mpa-qhub__search input{
    padding:
        0 53px
        0 20px;
}

.mpa-qhub__search input::placeholder{
    color:#899cad;
}


/* TOPICS */

.mpa-qhub__topics{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    gap:8px;

    margin:
        0 auto 30px;
}

.mpa-qhub__topic{
    min-height:38px;

    padding:
        8px 14px;

    border:
        1px solid
        #dfe8f1;

    border-radius:999px;

    background:#fff;
    color:#496985;

    font:inherit;
    font-size:13px;
    font-weight:750;

    cursor:pointer;

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

.mpa-qhub__topic:hover{
    border-color:#6b9dc6;
}

.mpa-qhub__topic.is-active{
    background:#08284c;
    border-color:#08284c;
    color:#fff;
}


/* RESULT BAR */

.mpa-qhub__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:
        0 2px 12px;
}

.mpa-qhub__count{
    color:#6b8095;

    font-size:13px;
    line-height:1.5;
    font-weight:750;
}


/* QUESTIONS */

.mpa-qhub__results{
    display:grid;
    gap:10px;
}

.mpa-qhub__item{
    overflow:hidden;

    background:#fff;

    border:
        1px solid
        #e2eaf2;

    border-radius:17px;

    box-shadow:
        0 7px 22px
        rgba(8,40,76,.035);
}

.mpa-qhub__item summary{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:22px;

    min-height:66px;

    padding:
        17px 20px;

    list-style:none;
    cursor:pointer;

    color:#08284c;

    font-size:15px;
    line-height:1.55;
    font-weight:800;
}

.mpa-qhub__item summary::-webkit-details-marker{
    display:none;
}

.mpa-qhub__item summary i{
    position:relative;

    flex:0 0 28px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:#f5f8fb;

    border:
        1px solid
        #dde7f0;
}

.mpa-qhub__item summary i::before,
.mpa-qhub__item summary i::after{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:11px;
    height:1.5px;

    border-radius:2px;

    background:#01478d;

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

.mpa-qhub__item summary i::after{
    transform:
        translate(-50%,-50%)
        rotate(90deg);

    transition:
        transform .2s ease;
}

.mpa-qhub__item[open]
summary i::after{
    transform:
        translate(-50%,-50%)
        rotate(0deg);
}

.mpa-qhub__answer{
    padding:
        0 20px 20px;

    color:#526f89;

    font-size:15px;
    line-height:1.85;
}

.mpa-qhub__answer p{
    margin:
        0 0 12px;

    color:inherit;
}

.mpa-qhub__answer p:last-of-type{
    margin-bottom:0;
}

.mpa-qhub__read{
    display:inline-flex;

    margin-top:14px;

    color:#01478d;

    font-size:13px;
    line-height:1.4;
    font-weight:800;

    text-decoration:none;
}

.mpa-qhub__read:hover{
    text-decoration:underline;
    text-underline-offset:3px;
}

.mpa-qhub__empty{
    margin:0;

    padding:28px;

    background:#f8fafc;

    border:
        1px solid
        #e3eaf1;

    border-radius:17px;

    color:#607b95;

    text-align:center;
}


/* LOAD MORE */

.mpa-qhub__more{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:48px;

    margin:
        20px auto 0;

    padding:
        0 20px;

    border:0;
    border-radius:14px;

    background:#01478d;
    color:#fff;

    font:inherit;
    font-size:14px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 10px 24px
        rgba(1,71,141,.15);
}

.mpa-qhub__more[hidden]{
    display:none;
}

.mpa-qhub__more:disabled{
    opacity:.55;
    cursor:wait;
}


/* ==================================================
   QUESTION SINGLE
================================================== */

.mpa-question-single{
    width:
        min(
            900px,
            calc(100% - 40px)
        );

    margin:
        70px auto 100px;
}

.mpa-question-single__inner{
    margin:0;
}

.mpa-question-single__back{
    display:inline-flex;

    margin-bottom:36px;

    color:#54728d;

    font-size:14px;
    font-weight:750;

    text-decoration:none;
}

.mpa-question-single__header{
    max-width:820px;
}

.mpa-question-single__header > span{
    display:block;

    margin-bottom:12px;

    color:#6b9dc6;

    font-size:11px;
    font-weight:800;

    letter-spacing:.1em;
    text-transform:uppercase;
}

.mpa-question-single__header h1{
    margin:0;

    color:#08284c;

    font-size:
        clamp(
            2.2rem,
            5vw,
            4.4rem
        );

    line-height:1.08;
    letter-spacing:-.045em;
}

.mpa-question-single__answer{
    max-width:780px;

    margin-top:38px;

    color:#486a85;

    font-size:17px;
    line-height:1.9;
}

.mpa-question-single__answer p{
    color:inherit;
}

.mpa-question-single__contact{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    max-width:780px;

    margin-top:44px;

    padding:20px 22px;

    border:
        1px solid
        #dde7f0;

    border-radius:18px;

    background:#f7f9fc;
}

.mpa-question-single__contact strong{
    color:#08284c;
}

.mpa-question-single__contact a{
    color:#01478d;

    font-weight:800;
    text-decoration:none;
}


/* ==================================================
   DARK MODE
================================================== */

html.mpa-dark
.mpa-qhub__intro h2,
html.mpa-dark
.mpa-qhub__item summary,
html.mpa-dark
.mpa-question-single__header h1,
html.mpa-dark
.mpa-question-single__contact strong{
    color:#f2f7fb;
}

html.mpa-dark
.mpa-qhub__intro p,
html.mpa-dark
.mpa-qhub__answer,
html.mpa-dark
.mpa-qhub__count,
html.mpa-dark
.mpa-question-single__answer{
    color:#aec3d4;
}

html.mpa-dark
.mpa-qhub__eyebrow,
html.mpa-dark
.mpa-qhub__read,
html.mpa-dark
.mpa-question-single__contact a{
    color:#fdb002;
}

html.mpa-dark
.mpa-qhub__search,
html.mpa-dark
.mpa-qhub__item{
    background:#10263c;

    border-color:#29445d;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.14);
}

html.mpa-dark
.mpa-qhub__search input{
    color:#eef5fa !important;
}

html.mpa-dark
.mpa-qhub__topic{
    background:#10263c;
    border-color:#29445d;
    color:#bfd0dd;
}

html.mpa-dark
.mpa-qhub__topic.is-active{
    background:#fdb002;
    border-color:#fdb002;
    color:#08284c;
}

html.mpa-dark
.mpa-qhub__item summary i{
    background:#0b2034;
    border-color:#29445d;
}

html.mpa-dark
.mpa-qhub__item summary i::before,
html.mpa-dark
.mpa-qhub__item summary i::after{
    background:#fdb002;
}

html.mpa-dark
.mpa-qhub__empty,
html.mpa-dark
.mpa-question-single__contact{
    background:#0d2237;
    border-color:#29445d;
    color:#aec3d4;
}

html.mpa-dark
.mpa-question-single__back{
    color:#9eb7ca;
}


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

@media(max-width:700px){

    .mpa-qhub{
        margin-top:46px;
    }

    .mpa-qhub__intro{
        margin-bottom:20px;
        padding:0 7px;
    }

    .mpa-qhub__intro h2{
        font-size:2rem;
    }

    .mpa-qhub__intro p{
        font-size:14px;
    }

    .mpa-qhub__search{
        margin-bottom:17px;
        border-radius:16px;
    }

    .mpa-qhub__search input{
        min-height:56px;
        font-size:15px;
    }

    .mpa-qhub__topics{
        justify-content:flex-start;

        flex-wrap:nowrap;

        overflow-x:auto;

        margin-left:-2px;
        margin-right:-2px;

        padding:
            1px 2px 8px;

        scrollbar-width:none;
    }

    .mpa-qhub__topics::-webkit-scrollbar{
        display:none;
    }

    .mpa-qhub__topic{
        flex:0 0 auto;
    }

    .mpa-qhub__item summary{
        min-height:62px;

        padding:
            15px 16px;

        font-size:14px;
    }

    .mpa-qhub__answer{
        padding:
            0 16px 17px;

        font-size:14px;
        line-height:1.8;
    }

    .mpa-question-single{
        width:
            calc(100% - 24px);

        margin:
            38px auto 70px;
    }

    .mpa-question-single__back{
        margin-bottom:26px;
    }

    .mpa-question-single__header h1{
        font-size:2.25rem;
    }

    .mpa-question-single__answer{
        margin-top:28px;

        font-size:15px;
        line-height:1.85;
    }

    .mpa-question-single__contact{
        align-items:stretch;
        flex-direction:column;

        margin-top:34px;

        padding:18px;
    }
}

/* MPA_QUESTIONS_HUB_CSS_V1_END */