/* ==================================================
   MUSLIM PATH ACADEMY
   PREMIUM TEACHERS DIRECTORY
================================================== */

.mpa-teachers-page{
    --teacher-deep:#08284c;
    --teacher-navy:#174a73;
    --teacher-blue:#01478d;
    --teacher-soft:#6b9dc6;
    --teacher-pale:#eef6fb;
    --teacher-gold:#fdb002;
    --teacher-line:#dbe7ef;
    --teacher-white:#ffffff;

    width:min(
        1240px,
        calc(100% - 48px)
    );

    margin:
        22px auto 105px;
}


/* ==================================================
   COVER
================================================== */

.mpa-teachers-profile{
    text-align:center;

    margin-bottom:34px;
}


.mpa-teachers-cover{
    position:relative;

    width:100%;

    aspect-ratio:16/4.1;

    overflow:hidden;

    border-radius:
        14px 14px 5px 5px;

    background:
        linear-gradient(
            125deg,
            #eef7fc 0%,
            #f8fbfd 44%,
            #edf5fa 100%
        );
}


.mpa-teachers-cover::before{
    content:"";

    position:absolute;

    left:-7%;
    bottom:-57%;

    width:51%;
    aspect-ratio:1;

    border:
        1px solid
        rgba(1,71,141,.13);

    border-radius:50%;
}


.mpa-teachers-cover::after{
    content:"";

    position:absolute;

    right:-11%;
    top:-72%;

    width:55%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        rgba(1,71,141,.045);
}


.mpa-teachers-cover__orb{
    position:absolute;

    border-radius:50%;
}


.mpa-teachers-cover__orb--1{
    width:165px;
    height:165px;

    top:50%;

    left:14%;

    transform:
        translateY(-50%);

    border:
        32px solid
        rgba(1,71,141,.06);
}


.mpa-teachers-cover__orb--2{
    width:56px;
    height:56px;

    right:20%;
    top:22%;

    background:
        rgba(253,176,2,.18);
}


.mpa-teachers-cover__line{
    position:absolute;

    width:33%;

    height:1px;

    right:12%;
    bottom:26%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(1,71,141,.17)
        );
}


.mpa-teachers-cover__word{
    position:absolute;

    left:50%;
    top:47%;

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

    color:
        rgba(8,40,76,.06);

    font-size:
        clamp(
            3rem,
            8vw,
            8rem
        );

    font-weight:800;

    letter-spacing:
        -.055em;

    white-space:nowrap;
}


.mpa-teachers-profile__mark{
    position:relative;

    z-index:3;

    display:flex;

    align-items:center;
    justify-content:center;

    width:112px;
    height:112px;

    margin:
        -55px auto 0;

    border-radius:50%;

    background:#fff;
}


.mpa-teachers-profile__mark img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


.mpa-teachers-profile__mark > span{
    color:var(--teacher-deep);

    font-size:24px;
    font-weight:800;
}


.mpa-teachers-profile__intro{
    max-width:880px;

    margin:18px auto 0;
}


.mpa-teachers-eyebrow{
    display:block;

    margin-bottom:10px;

    color:var(--teacher-soft);

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

    letter-spacing:.09em;

    text-transform:uppercase;
}


.mpa-teachers-profile__intro h1{
    margin:0;

    color:var(--teacher-deep);

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.8rem
        );

    font-weight:730;

    line-height:1.02;

    letter-spacing:-.055em;
}


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


.mpa-teachers-profile__intro > p{
    max-width:760px;

    margin:20px auto 0;

    color:var(--teacher-soft);

    font-size:14px;

    line-height:1.85;
}


.mpa-teachers-trust{
    display:flex;

    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:26px;
}


.mpa-teachers-trust span{
    display:inline-flex;

    align-items:center;

    min-height:32px;

    padding:
        0 13px;

    border:
        1px solid
        var(--teacher-line);

    border-radius:999px;

    color:var(--teacher-navy);

    background:#fff;

    font-size:9.5px;

    font-weight:700;
}


.mpa-teachers-selection-note{
    max-width:620px;

    margin:18px auto 0;

    color:#87a9c3;

    font-size:10.5px;

    line-height:1.6;
}


/* ==================================================
   DIRECTORY
================================================== */

.mpa-teachers-directory{
    display:grid;

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

    gap:18px;

    max-width:1080px;

    margin:0 auto;
}


.mpa-teacher-card{
    position:relative;

    overflow:hidden;

    min-width:0;

    padding:
        26px 26px 28px;

    border:
        1px solid
        var(--teacher-line);

    border-radius:12px;

    background:#fff;
}


.mpa-teacher-card__head{
    display:flex;

    align-items:center;

    gap:17px;

    margin-bottom:21px;
}


/* ==================================================
   GENDER AVATARS
================================================== */

.mpa-teacher-avatar{
    position:relative;

    flex:
        0 0 68px;

    display:flex;

    align-items:center;
    justify-content:center;

    width:68px;
    height:68px;

    border-radius:50%;
}


.mpa-teacher-avatar--male{
    background:#edf6fc;
}


.mpa-teacher-avatar--female{
    background:#fff7e7;
}


.mpa-teacher-avatar svg{
    width:42px;
    height:42px;

    fill:none;

    stroke-width:4.5;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.mpa-teacher-avatar--male svg{
    stroke:var(--teacher-blue);
}


.mpa-teacher-avatar--female svg{
    stroke:#bb8618;
}


.mpa-teacher-gender{
    position:absolute;

    right:-2px;
    bottom:-1px;

    display:flex;

    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;

    border:
        3px solid #fff;

    border-radius:50%;

    color:#fff;

    background:
        var(--teacher-blue);

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


.mpa-teacher-avatar--female
.mpa-teacher-gender{
    background:#c29127;
}


.mpa-teacher-card__identity{
    min-width:0;
}


.mpa-teacher-card__number{
    display:block;

    margin-bottom:4px;

    color:#a7bdcc;

    font-size:8px;

    font-weight:750;

    letter-spacing:.1em;
}


.mpa-teacher-card__identity h2{
    margin:0;

    color:var(--teacher-deep);

    font-size:21px;

    font-weight:730;

    line-height:1.15;
}


.mpa-teacher-card__gender-label{
    display:block;

    margin-top:5px;

    color:var(--teacher-soft);

    font-size:9.5px;

    font-weight:650;
}


/* ==================================================
   QUICK FACTS
================================================== */

.mpa-teacher-card__quick{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    padding:
        14px 0 17px;

    border-top:
        1px solid var(--teacher-line);

    border-bottom:
        1px solid var(--teacher-line);

    margin-bottom:20px;
}


.mpa-teacher-card__quick > span{
    display:flex;

    align-items:baseline;

    gap:5px;

    padding:
        6px 9px;

    border-radius:5px;

    background:
        var(--teacher-pale);
}


.mpa-teacher-card__quick small{
    color:#789db8;

    font-size:8px;
    font-weight:650;
}


.mpa-teacher-card__quick strong{
    color:var(--teacher-navy);

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


/* ==================================================
   CARD CONTENT
================================================== */

.mpa-teacher-card__section{
    margin-top:18px;
}


.mpa-teacher-card__section h3{
    margin:
        0 0 7px;

    color:#789db8;

    font-size:8.5px;

    font-weight:750;

    letter-spacing:.075em;

    text-transform:uppercase;
}


.mpa-teacher-card__section p{
    margin:0;

    color:var(--teacher-navy);

    font-size:12px;

    line-height:1.65;
}


.mpa-teacher-card__section ul{
    list-style:none;

    padding:0;
    margin:0;
}


.mpa-teacher-card__section li{
    position:relative;

    margin-top:7px;

    padding-inline-start:15px;

    color:var(--teacher-navy);

    font-size:11.5px;

    line-height:1.65;
}


.mpa-teacher-card__section li::before{
    content:"";

    position:absolute;

    inset-inline-start:0;

    top:.65em;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--teacher-gold);
}


.mpa-teacher-card__accent{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--teacher-blue),
            var(--teacher-gold)
        );

    opacity:.75;
}


/* ==================================================
   CLOSING
================================================== */

.mpa-teachers-closing{
    max-width:850px;

    margin:34px auto 0;

    padding:34px 30px;

    border-top:
        1px solid
        var(--teacher-line);

    border-bottom:
        1px solid
        var(--teacher-line);

    text-align:center;
}


.mpa-teachers-closing h2{
    max-width:700px;

    margin:
        0 auto;

    color:var(--teacher-deep);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.2rem
        );

    line-height:1.08;
}


.mpa-teachers-closing p{
    max-width:650px;

    margin:
        16px auto 0;

    color:var(--teacher-soft);

    font-size:13px;

    line-height:1.8;
}


.mpa-teachers-closing__actions{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:24px;
}


.mpa-teachers-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:39px;

    padding:
        0 16px;

    border-radius:7px;

    font-size:10px;

    font-weight:750;

    text-decoration:none !important;
}


.mpa-teachers-btn--primary{
    color:#fff !important;

    border:
        1px solid
        var(--teacher-deep);

    background:
        var(--teacher-deep);
}


.mpa-teachers-btn--secondary{
    color:
        var(--teacher-navy) !important;

    border:
        1px solid
        var(--teacher-line);

    background:#fff;
}



/* ==================================================
   DARK MODE
   Page-scoped: only the Teachers page is affected.
================================================== */

html.mpa-dark
.mpa-teachers-page{
    --teacher-deep:#f3f8fc;
    --teacher-navy:#d4e3ef;
    --teacher-soft:#9ab7cc;
    --teacher-pale:#102b43;
    --teacher-line:#28465d;
    --teacher-white:#0b2237;

    color:#d9e7f2;
}


/* Cover */

html.mpa-dark
.mpa-teachers-cover{
    background:
        linear-gradient(
            125deg,
            #081d30 0%,
            #0b2941 46%,
            #0d314d 100%
        );
}


html.mpa-dark
.mpa-teachers-cover::before{
    border-color:
        rgba(111,170,217,.16);
}


html.mpa-dark
.mpa-teachers-cover::after{
    background:
        rgba(84,145,194,.08);
}


html.mpa-dark
.mpa-teachers-cover__orb--1{
    border-color:
        rgba(111,170,217,.09);
}


html.mpa-dark
.mpa-teachers-cover__orb--2{
    background:
        rgba(253,176,2,.22);
}


html.mpa-dark
.mpa-teachers-cover__line{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(136,186,224,.25)
        );
}


html.mpa-dark
.mpa-teachers-cover__word{
    color:
        rgba(255,255,255,.045);
}


/*
 * Keep the academy mark on a clean white disc so the
 * original logo colours remain accurate in Dark Mode.
 */
html.mpa-dark
.mpa-teachers-profile__mark{
    background:#fff;

    box-shadow:
        0 8px 26px
        rgba(0,0,0,.24);
}


/* Intro */

html.mpa-dark
.mpa-teachers-profile__intro h1{
    color:#f4f8fb;
}


html.mpa-dark
.mpa-teachers-profile__intro > p{
    color:#a8c0d2;
}


html.mpa-dark
.mpa-teachers-eyebrow{
    color:#83add0;
}


html.mpa-dark
.mpa-teachers-trust span{
    color:#c9dbe8;

    border-color:#29475e;

    background:#0b253a;
}


html.mpa-dark
.mpa-teachers-selection-note{
    color:#8eacc2;
}


/* Teacher cards */

html.mpa-dark
.mpa-teacher-card{
    border-color:#29465d;

    background:#0a2236;

    box-shadow:
        0 12px 34px
        rgba(0,0,0,.08);
}


html.mpa-dark
.mpa-teacher-card__identity h2{
    color:#f2f7fb;
}


html.mpa-dark
.mpa-teacher-card__number{
    color:#6f93ad;
}


html.mpa-dark
.mpa-teacher-card__gender-label{
    color:#8eafc8;
}


/* Avatars */

html.mpa-dark
.mpa-teacher-avatar--male{
    background:#102e47;
}


html.mpa-dark
.mpa-teacher-avatar--female{
    background:#302b1d;
}


html.mpa-dark
.mpa-teacher-avatar--male svg{
    stroke:#69a9db;
}


html.mpa-dark
.mpa-teacher-avatar--female svg{
    stroke:#e0b34e;
}


html.mpa-dark
.mpa-teacher-gender{
    border-color:#0a2236;
}


html.mpa-dark
.mpa-teacher-avatar--male
.mpa-teacher-gender{
    background:#1769a8;
}


html.mpa-dark
.mpa-teacher-avatar--female
.mpa-teacher-gender{
    background:#a97717;
}


/* Quick facts */

html.mpa-dark
.mpa-teacher-card__quick{
    border-color:#28445b;
}


html.mpa-dark
.mpa-teacher-card__quick > span{
    background:#102b43;
}


html.mpa-dark
.mpa-teacher-card__quick small{
    color:#7ea5c1;
}


html.mpa-dark
.mpa-teacher-card__quick strong{
    color:#dbe8f2;
}


/* Card sections */

html.mpa-dark
.mpa-teacher-card__section h3{
    color:#7fa9c8;
}


html.mpa-dark
.mpa-teacher-card__section p,
html.mpa-dark
.mpa-teacher-card__section li{
    color:#c3d5e2;
}


/* Closing section */

html.mpa-dark
.mpa-teachers-closing{
    border-color:#28455c;
}


html.mpa-dark
.mpa-teachers-closing h2{
    color:#f3f8fb;
}


html.mpa-dark
.mpa-teachers-closing p{
    color:#a5bfd2;
}


html.mpa-dark
.mpa-teachers-btn--primary{
    color:#fff !important;

    border-color:#1767a5;

    background:#0f5f9f;
}


html.mpa-dark
.mpa-teachers-btn--secondary{
    color:#d8e7f2 !important;

    border-color:#315068;

    background:#0b253a;
}


html.mpa-dark
.mpa-teachers-btn--secondary:hover,
html.mpa-dark
.mpa-teachers-btn--secondary:focus{
    border-color:#4b708c;

    background:#102e47;
}


/* ==================================================
   RTL
================================================== */

html[dir="rtl"]
.mpa-teachers-page{
    direction:rtl;
}


html[dir="rtl"]
.mpa-teacher-card{
    text-align:right;
}


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

@media (max-width:760px){

    .mpa-teachers-page{
        width:
            calc(100% - 24px);

        margin:12px auto 50px;
    }


    .mpa-teachers-profile{
        margin-bottom:34px;
    }


    .mpa-teachers-cover{
        aspect-ratio:16/6;

        border-radius:
            8px 8px 3px 3px;
    }


    .mpa-teachers-cover__word{
        font-size:2.8rem;
    }


    .mpa-teachers-cover__orb--1{
        width:95px;
        height:95px;

        border-width:18px;
    }


    .mpa-teachers-profile__mark{
        width:82px;
        height:82px;

        margin-top:-40px;
    }


    .mpa-teachers-profile__intro{
        margin-top:13px;
    }


    .mpa-teachers-profile__intro h1{
        max-width:360px;

        margin-left:auto;
        margin-right:auto;

        font-size:2.15rem;

        line-height:1.08;
    }


    .mpa-teachers-profile__intro > p{
        max-width:350px;

        margin-top:14px;

        font-size:11px;

        line-height:1.7;
    }


    .mpa-teachers-trust{
        max-width:360px;

        margin-left:auto;
        margin-right:auto;

        gap:5px;
    }


    .mpa-teachers-trust span{
        min-height:28px;

        padding:
            0 9px;

        font-size:8px;
    }


    .mpa-teachers-selection-note{
        max-width:340px;

        font-size:9.5px;
    }


    .mpa-teachers-directory{
        grid-template-columns:1fr;

        gap:11px;
    }


    .mpa-teacher-card{
        padding:
            19px 17px 22px;

        border-radius:9px;
    }


    .mpa-teacher-card__head{
        gap:12px;

        margin-bottom:15px;
    }


    .mpa-teacher-avatar{
        flex-basis:56px;

        width:56px;
        height:56px;
    }


    .mpa-teacher-avatar svg{
        width:34px;
        height:34px;
    }


    .mpa-teacher-card__identity h2{
        font-size:17px;
    }


    .mpa-teacher-card__quick{
        padding:
            11px 0 13px;

        margin-bottom:15px;
    }


    .mpa-teacher-card__section{
        margin-top:14px;
    }


    .mpa-teacher-card__section p,
    .mpa-teacher-card__section li{
        font-size:10.5px;

        line-height:1.65;
    }


    .mpa-teachers-closing{
        margin-top:34px;

        padding:34px 14px;
    }


    .mpa-teachers-closing h2{
        font-size:1.9rem;
    }


    .mpa-teachers-closing p{
        font-size:11px;
    }

}


/* MPA_TEACHERS_LOGO_NO_FRAME_START */

.mpa-teachers-profile__mark,
html.mpa-dark .mpa-teachers-profile__mark{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
}

.mpa-teachers-profile__mark img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}

/* MPA_TEACHERS_LOGO_NO_FRAME_END */


/* MPA_TEACHER_REFERENCE_LINKS_START */


/* ==================================================
   CONTEXTUAL REFERENCE LINKS
   Subtle by design: useful, not link-heavy.
================================================== */

.mpa-teacher-ref-link{
    color:inherit !important;

    text-decoration:none !important;

    border-bottom:
        1px dotted
        rgba(1,71,141,.38);

    transition:
        color .18s ease,
        border-color .18s ease;
}


.mpa-teacher-ref-link::after{
    content:"↗";

    display:inline-block;

    margin-inline-start:4px;

    color:#6b9dc6;

    font-size:.72em;

    font-weight:700;

    line-height:1;

    vertical-align:.15em;
}


.mpa-teacher-ref-link:hover{
    color:#01478d !important;

    border-bottom-color:
        #01478d;
}


.mpa-teacher-ref-link:focus-visible{
    outline:
        2px solid
        #fdb002;

    outline-offset:3px;

    border-radius:2px;
}


/* DARK MODE */

html.mpa-dark
.mpa-teacher-ref-link{
    color:#c7dae8 !important;

    border-bottom-color:
        rgba(121,174,214,.48);
}


html.mpa-dark
.mpa-teacher-ref-link::after{
    color:#7fb2d8;
}


html.mpa-dark
.mpa-teacher-ref-link:hover{
    color:#ffffff !important;

    border-bottom-color:
        #7fb2d8;
}


/* MPA_TEACHER_REFERENCE_LINKS_END */


/* MPA_REAL_TEACHERS_COVER_START */


/* ==================================================
   REAL TEACHERS PAGE COVER
================================================== */

.mpa-teachers-cover,
html.mpa-dark .mpa-teachers-cover{

    background-image:
        url("https://muslimpathacademy.com/wp-content/uploads/2026/09/muslim-path-teachers-cover.webp") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;
}


/*
 * Remove the old generated decorative artwork.
 * The uploaded image is now the complete cover.
 */

.mpa-teachers-cover::before,
.mpa-teachers-cover::after{
    content:none !important;
    display:none !important;
}


.mpa-teachers-cover__orb,
.mpa-teachers-cover__line,
.mpa-teachers-cover__word{
    display:none !important;
}


/* MPA_REAL_TEACHERS_COVER_END */