/* =========================================================
   WAIN NAKUL — CENTRAL PAGE SHELL
   الهيكل العام المركزي لجميع صفحات الموقع العامة
========================================================= */

:root{
    /* المقاس المرجعي للموقع */
    --wn-shell-max:1180px;

    /* الهوامش المنطقية */
    --wn-shell-gutter-desktop:24px;
    --wn-shell-gutter-tablet:20px;
    --wn-shell-gutter-mobile:14px;

    /* المسافات العامة */
    --wn-shell-top-gap:0px;
    --wn-shell-bottom-gap:32px;

    /* safe areas */
    --wn-shell-safe-top:env(safe-area-inset-top, 0px);
    --wn-shell-safe-right:env(safe-area-inset-right, 0px);
    --wn-shell-safe-bottom:env(safe-area-inset-bottom, 0px);
    --wn-shell-safe-left:env(safe-area-inset-left, 0px);
}


/* =========================================================
   DOCUMENT
========================================================= */

html{
    width:100%;
    min-width:0;
    overflow-x:hidden;
}

body.wn-global-page-shell{
    width:100%;
    min-width:0;
    min-height:100vh;
    min-height:100dvh;

    margin:0;

    overflow-x:hidden;

    text-align:start;

    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}


/* =========================================================
   ALL PAGE REGIONS
   لا يغيّر عرض الصفحة الحالي
========================================================= */

body.wn-global-page-shell main,
body.wn-global-page-shell section,
body.wn-global-page-shell article,
body.wn-global-page-shell aside,
body.wn-global-page-shell header,
body.wn-global-page-shell footer,
body.wn-global-page-shell nav{
    box-sizing:border-box;
    min-width:0;
}


/* الصور والفيديو لا تخرج من الشاشة */
body.wn-global-page-shell img,
body.wn-global-page-shell video,
body.wn-global-page-shell canvas,
body.wn-global-page-shell svg{
    max-width:100%;
}


/* عناصر النماذج */
body.wn-global-page-shell input,
body.wn-global-page-shell select,
body.wn-global-page-shell textarea,
body.wn-global-page-shell button{
    max-width:100%;
    box-sizing:border-box;
}


/* =========================================================
   CENTRAL CONTAINER UTILITIES
   جاهزة للاستخدام في الصفحات الجديدة والقادمة
========================================================= */

.wn-shell-container{
    width:min(
        calc(100% - (var(--wn-shell-gutter-desktop) * 2)),
        var(--wn-shell-max)
    );

    margin-inline:auto;
    min-width:0;
}

.wn-shell-wide{
    width:min(
        calc(100% - (var(--wn-shell-gutter-desktop) * 2)),
        1360px
    );

    margin-inline:auto;
    min-width:0;
}

.wn-shell-standard{
    width:min(
        calc(100% - (var(--wn-shell-gutter-desktop) * 2)),
        1180px
    );

    margin-inline:auto;
    min-width:0;
}

.wn-shell-narrow{
    width:min(
        calc(100% - (var(--wn-shell-gutter-desktop) * 2)),
        760px
    );

    margin-inline:auto;
    min-width:0;
}


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

html[dir="rtl"] body.wn-global-page-shell{
    direction:rtl;
}

html[dir="ltr"] body.wn-global-page-shell{
    direction:ltr;
}


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

@media (min-width:768px) and (max-width:1100px){

    .wn-shell-container,
    .wn-shell-wide,
    .wn-shell-standard,
    .wn-shell-narrow{
        width:
            calc(
                100%
                - (var(--wn-shell-gutter-tablet) * 2)
            );
    }

}


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

@media (max-width:767px){

    :root{
        --wn-shell-bottom-gap:
            calc(
                88px
                + var(--wn-shell-safe-bottom)
            );
    }

    body.wn-global-page-shell{
        min-height:100svh;
    }

    .wn-shell-container,
    .wn-shell-wide,
    .wn-shell-standard,
    .wn-shell-narrow{
        width:
            calc(
                100%
                - (var(--wn-shell-gutter-mobile) * 2)
            );
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:390px){

    :root{
        --wn-shell-gutter-mobile:12px;
    }

}


/* =========================================================
   WAIN NAKUL — CURRENT VISUAL IDENTITY
========================================================= */

:root{
    --wn-current-identity-image:
        url('/images/wain-nakul/identity/wain-nakul-current-identity.svg');
}

/*
   أي منطقة تستخدم الهوية الحالية:
   بدون تكرار وبدون تشويه
*/
.wn-current-identity{
    background-color:var(--wn-color-site-bg) !important;
    background-image:var(--wn-current-identity-image) !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;
}


/* =========================================================
   WAIN NAKUL — MAP FINAL IDENTITY
   إزالة أي هوية/خريطة قديمة من البانر
========================================================= */

body.wn-map-page{
    background-image:none !important;
}


/* البانر الرئيسي للخريطة */
body.wn-map-page .hero{
    background-color:var(--wn-color-site-bg) !important;

    background-image:
        url('/images/wain-nakul/identity/wain-nakul-current-identity.svg') !important;

    background-repeat:no-repeat !important;

    background-position:center center !important;

    background-size:760px auto !important;
}


/* منع أي طبقة قديمة من إعادة صورة الخريطة */
body.wn-map-page .hero::before{
    background-image:none !important;
}


/* النص يبقى واضح فوق الهوية */
body.wn-map-page .hero h1,
body.wn-map-page .hero p{
    position:relative;
    z-index:2;
}


/* iPad / Tablet */
@media (min-width:768px) and (max-width:1100px){

    body.wn-map-page .hero{
        background-size:620px auto !important;
    }

}


/* Mobile */
@media (max-width:767px){

    body.wn-map-page .hero{
        background-size:
            calc(100% - 28px) auto !important;

        background-position:center center !important;
    }

}


/* =========================================================
   WAIN NAKUL — MAP HERO FINAL LAYOUT
   الشعار ثم العنوان ثم الوصف بدون تداخل
========================================================= */

body.wn-map-page .hero{
    min-height:360px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;

    padding:
        245px
        28px
        32px !important;

    text-align:center !important;

    background-color:var(--wn-color-site-bg) !important;

    background-image:
        url('/images/wain-nakul/identity/wain-nakul-current-identity.svg') !important;

    background-repeat:no-repeat !important;

    background-position:
        center
        18px !important;

    background-size:
        680px auto !important;
}


/* إزالة أي طبقة قديمة */
body.wn-map-page .hero::before,
body.wn-map-page .hero::after{
    background-image:none !important;
}


/* العنوان */
body.wn-map-page .hero h1{
    position:relative !important;
    z-index:2 !important;

    margin:
        0
        0
        10px !important;

    text-align:center !important;

    width:100% !important;
}


/* الوصف */
body.wn-map-page .hero p{
    position:relative !important;
    z-index:2 !important;

    margin:0 auto !important;

    max-width:760px !important;

    text-align:center !important;

    line-height:1.8 !important;
}


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

@media (min-width:768px) and (max-width:1100px){

    body.wn-map-page .hero{
        min-height:330px !important;

        padding:
            220px
            22px
            28px !important;

        background-size:
            610px auto !important;

        background-position:
            center
            16px !important;
    }

}


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

@media (max-width:767px){

    body.wn-map-page .hero{
        min-height:300px !important;

        padding:
            195px
            16px
            24px !important;

        background-size:
            520px auto !important;

        background-position:
            center
            12px !important;
    }

    body.wn-map-page .hero h1{
        margin-bottom:8px !important;
    }

    body.wn-map-page .hero p{
        max-width:100% !important;
        line-height:1.7 !important;
    }

}


/* =========================================================
   WAIN NAKUL — MAP HERO FINAL REAL IMAGE
========================================================= */

body.wn-map-page .hero{
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;

    padding:36px 24px 32px !important;

    text-align:center !important;

    background:var(--wn-color-site-bg) !important;
    background-image:none !important;
}


/* إلغاء أي طبقات تصميم قديمة */
body.wn-map-page .hero::before,
body.wn-map-page .hero::after{
    content:none !important;
    display:none !important;
}


/* شعار الهوية الحقيقي */
body.wn-map-page .wn-map-hero-identity{
    display:block !important;

    width:190px !important;
    max-width:42vw !important;
    height:auto !important;

    margin:0 auto 18px !important;

    object-fit:contain !important;

    position:static !important;
    inset:auto !important;

    transform:none !important;
}


/* عنوان الخريطة */
body.wn-map-page .hero h1{
    position:static !important;
    inset:auto !important;

    transform:none !important;
    float:none !important;

    width:auto !important;
    max-width:100% !important;

    margin:0 0 10px !important;

    align-self:center !important;
    text-align:center !important;
}


/* الوصف */
body.wn-map-page .hero p{
    position:static !important;
    inset:auto !important;

    transform:none !important;
    float:none !important;

    width:100% !important;
    max-width:720px !important;

    margin:0 auto !important;

    align-self:center !important;
    text-align:center !important;

    line-height:1.8 !important;
}


/* =========================
   iPad / Tablet
========================= */

@media (min-width:768px) and (max-width:1100px){

    body.wn-map-page .hero{
        padding:32px 22px 28px !important;
    }

    body.wn-map-page .wn-map-hero-identity{
        width:170px !important;
    }

}


/* =========================
   Mobile
========================= */

@media (max-width:767px){

    body.wn-map-page .hero{
        padding:26px 16px 24px !important;
    }

    body.wn-map-page .wn-map-hero-identity{
        width:145px !important;
        max-width:56vw !important;

        margin-bottom:14px !important;
    }

    body.wn-map-page .hero h1{
        margin-bottom:8px !important;
    }

    body.wn-map-page .hero p{
        max-width:100% !important;
        line-height:1.7 !important;
    }

}