/* ==================================================
   MUSLIM PATH - LEARNING METHOD
   Built on the About Us visual system
================================================== */

.mpa-learning-process{
    padding:52px 0;
}


.mpa-learning-process__head{
    max-width:760px;
    margin:0 auto 30px;
    text-align:center;
}


.mpa-learning-process__head > span,
.mpa-learning-faq header > span{
    display:block;

    margin-bottom:10px;

    color:#6b9dc6;

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

    letter-spacing:.09em;

    text-transform:uppercase;
}


.mpa-learning-process__head h2,
.mpa-learning-faq h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            1.9rem,
            2.8vw,
            2.85rem
        );

    font-weight:710;

    line-height:1.13;
}


.mpa-learning-process__head p{
    max-width:650px;

    margin:14px auto 0;

    color:#9fc0db;

    font-size:13px;

    line-height:1.8;
}


.mpa-learning-process__grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:12px;
}


.mpa-learning-step{
    min-height:190px;

    padding:25px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    border:
        1px solid
        rgba(
            107,
            157,
            198,
            .18
        );

    border-radius:9px;
}


.mpa-learning-step__number{
    display:block;

    margin-bottom:18px;

    color:#fdb002;

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

    letter-spacing:.08em;
}


.mpa-learning-step h3{
    margin:0;

    color:#fff;

    font-size:1.05rem;
    font-weight:700;

    line-height:1.35;
}


.mpa-learning-step p{
    margin:11px 0 0;

    color:#9fc0db;

    font-size:11.5px;

    line-height:1.75;
}


/* FAQ */

.mpa-learning-faq{
    max-width:850px;

    margin:0 auto;

    padding:54px 0;
}


.mpa-learning-faq header{
    max-width:700px;

    margin:0 auto 26px;

    text-align:center;
}


.mpa-learning-faq__items{
    display:grid;

    gap:8px;
}


.mpa-learning-faq__item{
    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    border:
        1px solid
        rgba(
            107,
            157,
            198,
            .16
        );

    border-radius:7px;
}


.mpa-learning-faq__item summary{
    position:relative;

    padding:
        18px 45px
        18px 18px;

    color:#fff;

    font-size:12px;
    font-weight:700;

    line-height:1.5;

    cursor:pointer;

    list-style:none;
}


html[dir="rtl"]
.mpa-learning-faq__item summary{
    padding:
        18px 18px
        18px 45px;
}


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


.mpa-learning-faq__item summary::after{
    content:"+";

    position:absolute;

    right:18px;
    top:50%;

    color:#fdb002;

    font-size:20px;
    font-weight:400;

    transform:
        translateY(-50%);
}


html[dir="rtl"]
.mpa-learning-faq__item summary::after{
    right:auto;
    left:18px;
}


.mpa-learning-faq__item[open]
summary::after{
    content:"−";
}


.mpa-learning-faq__item p{
    margin:0;

    padding:
        0 18px 18px;

    color:#9fc0db;

    font-size:11.5px;

    line-height:1.8;
}


/* No white divider lines */

.mpa-learning-method
.mpa-about-row,
.mpa-learning-method
.mpa-about-video,
.mpa-learning-method
.mpa-about-final,
.mpa-learning-method
.mpa-about-stats{
    border:0 !important;
}


.mpa-learning-method
.mpa-about-stat
+ .mpa-about-stat::before{
    display:none !important;
}



/* MOBILE */

@media (max-width:800px){

    .mpa-learning-process{
        padding:34px 0;
    }


    .mpa-learning-process__grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .mpa-learning-step{
        min-height:170px;

        padding:20px;
    }

}


@media (max-width:560px){

    .mpa-learning-process__grid{
        grid-template-columns:1fr;

        gap:8px;
    }


    .mpa-learning-step{
        min-height:0;

        padding:18px;
    }


    .mpa-learning-process__head h2,
    .mpa-learning-faq h2{
        font-size:1.7rem;
    }


    .mpa-learning-faq{
        padding:34px 0;
    }

}

/* ==================================================
   MPA LEARNING METHOD READABILITY HOTFIX START
================================================== */

/* ---------- Step cards section ---------- */
.mpa-learning-steps-grid,
.mpa-method-steps-grid,
.mpa-learning-method-steps-grid,
.mpa-steps-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
    align-items:stretch;
}

.mpa-learning-step,
.mpa-learning-step-card,
.mpa-method-step,
.mpa-method-step-card,
.mpa-step-card{
    background:#ffffff;
    border:1px solid #d9e4f0;
    border-radius:16px;
    padding:18px 16px;
    box-shadow:0 10px 28px rgba(1, 71, 141, 0.06);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mpa-learning-step:hover,
.mpa-learning-step-card:hover,
.mpa-method-step:hover,
.mpa-method-step-card:hover,
.mpa-step-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(1, 71, 141, 0.10);
    border-color:#bfd3ea;
}

.mpa-learning-step h3,
.mpa-learning-step-card h3,
.mpa-method-step h3,
.mpa-method-step-card h3,
.mpa-step-card h3{
    margin:0 0 10px;
    color:#083b73;
    font-size:18px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:-0.01em;
}

.mpa-learning-step p,
.mpa-learning-step-card p,
.mpa-method-step p,
.mpa-method-step-card p,
.mpa-step-card p{
    margin:0;
    color:#4f657d;
    font-size:14px;
    font-weight:500;
    line-height:1.85;
}

.mpa-learning-step .step-number,
.mpa-learning-step-card .step-number,
.mpa-method-step .step-number,
.mpa-method-step-card .step-number,
.mpa-step-card .step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-bottom:12px;
    border-radius:999px;
    background:#fdf3cf;
    color:#b88200;
    font-size:14px;
    font-weight:800;
}

/* ---------- FAQ section ---------- */
.mpa-learning-faq-list,
.mpa-method-faq-list,
.mpa-learning-method-faq-list,
.mpa-faq-list{
    display:grid;
    gap:12px;
}

.mpa-learning-faq-item,
.mpa-method-faq-item,
.mpa-learning-method-faq-item,
.mpa-faq-item,
details.mpa-faq-item{
    background:#ffffff;
    border:1px solid #d9e4f0;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(1, 71, 141, 0.05);
    overflow:hidden;
}

.mpa-learning-faq-item summary,
.mpa-method-faq-item summary,
.mpa-learning-method-faq-item summary,
.mpa-faq-item summary,
.mpa-learning-faq-question,
.mpa-method-faq-question,
.mpa-learning-method-faq-question,
.mpa-faq-question{
    list-style:none;
    cursor:pointer;
    padding:16px 18px;
    color:#083b73;
    font-size:15px;
    font-weight:750;
    line-height:1.6;
    background:#ffffff;
}

.mpa-learning-faq-item summary::-webkit-details-marker,
.mpa-method-faq-item summary::-webkit-details-marker,
.mpa-learning-method-faq-item summary::-webkit-details-marker,
.mpa-faq-item summary::-webkit-details-marker{
    display:none;
}

.mpa-learning-faq-item .faq-answer,
.mpa-method-faq-item .faq-answer,
.mpa-learning-method-faq-item .faq-answer,
.mpa-faq-item .faq-answer,
.mpa-learning-faq-item p,
.mpa-method-faq-item p,
.mpa-learning-method-faq-item p,
.mpa-faq-item p{
    color:#536b84;
    font-size:14px;
    font-weight:500;
    line-height:1.9;
}

.mpa-learning-faq-item .faq-answer,
.mpa-method-faq-item .faq-answer,
.mpa-learning-method-faq-item .faq-answer,
.mpa-faq-item .faq-answer{
    padding:0 18px 18px;
}

.mpa-learning-faq-item[open] summary,
.mpa-method-faq-item[open] summary,
.mpa-learning-method-faq-item[open] summary,
.mpa-faq-item[open] summary{
    background:#f8fbff;
    border-bottom:1px solid #e6eef7;
}

/* ---------- Small helper text ---------- */
.mpa-learning-method-page .section-kicker,
.mpa-learning-method-page .eyebrow,
.mpa-learning-method-page .section-label,
.mpa-learning-page .section-kicker,
.mpa-learning-page .eyebrow{
    color:#6b87a6;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
}

/* ---------- Mobile fixes ---------- */
@media (max-width: 991px){
    .mpa-learning-steps-grid,
    .mpa-method-steps-grid,
    .mpa-learning-method-steps-grid,
    .mpa-steps-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:14px;
    }
}

@media (max-width: 768px){
    .mpa-learning-steps-grid,
    .mpa-method-steps-grid,
    .mpa-learning-method-steps-grid,
    .mpa-steps-grid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .mpa-learning-step,
    .mpa-learning-step-card,
    .mpa-method-step,
    .mpa-method-step-card,
    .mpa-step-card{
        padding:16px 14px !important;
        border-radius:14px !important;
    }

    .mpa-learning-step h3,
    .mpa-learning-step-card h3,
    .mpa-method-step h3,
    .mpa-method-step-card h3,
    .mpa-step-card h3{
        font-size:17px !important;
        line-height:1.4 !important;
    }

    .mpa-learning-step p,
    .mpa-learning-step-card p,
    .mpa-method-step p,
    .mpa-method-step-card p,
    .mpa-step-card p{
        font-size:14px !important;
        line-height:1.85 !important;
    }

    .mpa-learning-faq-item summary,
    .mpa-method-faq-item summary,
    .mpa-learning-method-faq-item summary,
    .mpa-faq-item summary,
    .mpa-learning-faq-question,
    .mpa-method-faq-question,
    .mpa-learning-method-faq-question,
    .mpa-faq-question{
        font-size:15px !important;
        line-height:1.7 !important;
        padding:15px 14px !important;
    }

    .mpa-learning-faq-item .faq-answer,
    .mpa-method-faq-item .faq-answer,
    .mpa-learning-method-faq-item .faq-answer,
    .mpa-faq-item .faq-answer{
        padding:0 14px 16px !important;
    }

    .mpa-learning-faq-item .faq-answer,
    .mpa-method-faq-item .faq-answer,
    .mpa-learning-method-faq-item .faq-answer,
    .mpa-faq-item .faq-answer,
    .mpa-learning-faq-item p,
    .mpa-method-faq-item p,
    .mpa-learning-method-faq-item p,
    .mpa-faq-item p{
        font-size:14px !important;
        line-height:1.9 !important;
    }
}

/* ==================================================
   MPA LEARNING METHOD READABILITY HOTFIX END
================================================== */


/* MPA_FAQ_QUESTION_VISIBILITY_START */


/*
 * Force actual FAQ question text to remain visible.
 * Some global theme rule is affecting native <summary>.
 */

.mpa-learning-method
.mpa-learning-faq__item
> summary{

    display:block !important;

    position:relative !important;

    width:100% !important;

    min-height:58px !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:
        17px 58px
        17px 20px !important;


    /* TEXT VISIBILITY */
    color:#08284c !important;

    -webkit-text-fill-color:
        #08284c !important;

    opacity:1 !important;

    visibility:visible !important;

    font-size:16px !important;

    font-weight:800 !important;

    line-height:1.65 !important;

    letter-spacing:normal !important;

    text-indent:0 !important;

    text-transform:none !important;

    text-decoration:none !important;

    text-shadow:none !important;

    white-space:normal !important;

    word-break:normal !important;

    overflow-wrap:break-word !important;


    /* REMOVE POSSIBLE HIDE EFFECTS */
    filter:none !important;

    clip:auto !important;

    clip-path:none !important;

    mask:none !important;

    -webkit-mask:none !important;

    transform:none !important;

    mix-blend-mode:normal !important;


    background:#ffffff !important;

    cursor:pointer !important;

    list-style:none !important;

}


html[dir="rtl"]
.mpa-learning-method
.mpa-learning-faq__item
> summary{

    padding:
        17px 20px
        17px 58px !important;

    text-align:right !important;

    direction:rtl !important;

}


/*
 * Keep the + icon separate from the question.
 */

.mpa-learning-method
.mpa-learning-faq__item
> summary::after{

    content:"+" !important;

    position:absolute !important;

    top:50% !important;

    right:18px !important;

    left:auto !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:30px !important;

    height:30px !important;

    margin:0 !important;

    padding:0 !important;

    background:
        rgba(
            253,
            176,
            2,
            .12
        ) !important;

    border-radius:8px !important;

    color:#d08d00 !important;

    -webkit-text-fill-color:
        #d08d00 !important;

    opacity:1 !important;

    visibility:visible !important;

    font-size:21px !important;

    font-weight:500 !important;

    line-height:1 !important;

    text-indent:0 !important;

    transform:
        translateY(-50%) !important;

}


html[dir="rtl"]
.mpa-learning-method
.mpa-learning-faq__item
> summary::after{

    right:auto !important;

    left:18px !important;

}


.mpa-learning-method
.mpa-learning-faq__item[open]
> summary{

    color:#01478d !important;

    -webkit-text-fill-color:
        #01478d !important;

    background:#f7fbff !important;

}


.mpa-learning-method
.mpa-learning-faq__item[open]
> summary::after{

    content:"−" !important;

}


/* Answer text */

.mpa-learning-method
.mpa-learning-faq__item
> p{

    display:block !important;

    color:#506b85 !important;

    -webkit-text-fill-color:
        #506b85 !important;

    opacity:1 !important;

    visibility:visible !important;

    font-size:14px !important;

    font-weight:500 !important;

    line-height:1.95 !important;

}


@media (max-width:620px){

    .mpa-learning-method
    .mpa-learning-faq__item
    > summary{

        min-height:54px !important;

        padding:
            15px 54px
            15px 16px !important;

        font-size:15px !important;

    }


    html[dir="rtl"]
    .mpa-learning-method
    .mpa-learning-faq__item
    > summary{

        padding:
            15px 16px
            15px 54px !important;

    }


    .mpa-learning-method
    .mpa-learning-faq__item
    > summary::after{

        right:14px !important;

        width:28px !important;

        height:28px !important;

    }


    html[dir="rtl"]
    .mpa-learning-method
    .mpa-learning-faq__item
    > summary::after{

        right:auto !important;

        left:14px !important;

    }

}


/* MPA_FAQ_QUESTION_VISIBILITY_END */