/* ==========================================================================
   MUKOUN NAVIGATION TYPOGRAPHY — TAJAWAL
   Source: Mukoun_Tajawal_Typography_Guide_AR.md
   Scope: Header navigation only

   IMPORTANT:
   - Typography only.
   - No changes to layout, logo, colors, spacing, widths, heights, borders,
     shadows, dropdown positions, hover effects, RTL/LTR order or JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tajawal font files
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Black.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Base navigation font
   -------------------------------------------------------------------------- */

header.header-one,
header.header-one .mukoun-nav-area,
header.header-one .mukoun-header-actions,
header.header-one .mukoun-join-dropdown {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-synthesis: none !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header.header-one .mukoun-nav-area a,
header.header-one .mukoun-nav-area span,
header.header-one .mukoun-nav-area li,
header.header-one .mukoun-header-actions a,
header.header-one .mukoun-header-actions span,
header.header-one .mukoun-header-actions li,
header.header-one .nav-login-link,
header.header-one .nav-login-text {
    font-family: inherit !important;
}

/*
 * Font Awesome icons must keep their own icon font.
 * Do not apply Tajawal to elements such as .fa-user.
 */

/* Arabic text must not inherit Latin letter spacing. */
header.header-one.header-one--rtl .mukoun-nav-area a,
header.header-one.header-one--rtl .mukoun-nav-area span,
header.header-one.header-one--rtl .mukoun-header-actions a,
header.header-one.header-one--rtl .mukoun-header-actions span {
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Desktop main navigation
   Guide mapping: small heading / button = 15px, weight 700.
   -------------------------------------------------------------------------- */

header.header-one .mukoun-nav-area
> ul.parent-nav
> li.main-nav
> a.nav-main-link {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* Arabic receives a slightly more generous line-height. */
header.header-one.header-one--rtl .mukoun-nav-area
> ul.parent-nav
> li.main-nav
> a.nav-main-link {
    line-height: 1.55 !important;
}

/* --------------------------------------------------------------------------
   Dropdown navigation links
   Compact navigation hierarchy derived from the guide's role/card typography.
   -------------------------------------------------------------------------- */

/* English */
header.header-one.header-one--ltr .mukoun-nav-area
> ul.parent-nav
> li.main-nav
> ul.submenu
> li
> a,
header.header-one.header-one--ltr .mukoun-join-dropdown
ul.submenu
> li
> a {
    font-size: 1.56rem !important;
    line-height: 1.50 !important;
    font-weight: 500 !important;
}

/* Arabic */
header.header-one.header-one--rtl .mukoun-nav-area
> ul.parent-nav
> li.main-nav
> ul.submenu
> li
> a,
header.header-one.header-one--rtl .mukoun-join-dropdown
ul.submenu
> li
> a {
    font-size: 1.66rem !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Join Us button, language button and login button
   Guide mapping: buttons = 15px, weight 700.
   -------------------------------------------------------------------------- */

header.header-one .mukoun-header-actions .quote-btn,
header.header-one .mukoun-language-single-link,
header.header-one .nav-login-link,
header.header-one .nav-login-text {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

header.header-one .mukoun-header-actions .quote-btn,
header.header-one .mukoun-language-single-link,
header.header-one .nav-login-link {
    line-height: 1.35 !important;
}

header.header-one.header-one--rtl .mukoun-header-actions .quote-btn,
header.header-one.header-one--rtl .mukoun-language-single-link,
header.header-one.header-one--rtl .nav-login-link {
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Optional language switch inside nav.blade.php
   It is currently commented out, but remains ready if enabled later.
   -------------------------------------------------------------------------- */

header.header-one .mukoun-lang-link {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   Tablet / compact desktop
   Preserve the current responsive header dimensions.
   -------------------------------------------------------------------------- */

@media (max-width: 1399.98px) {
    header.header-one .mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        font-size: 14px !important;
    }
}

@media (max-width: 1199.98px) {
    header.header-one .mukoun-language-single-link,
    header.header-one .mukoun-header-actions .quote-btn,
    header.header-one .nav-login-link,
    header.header-one .nav-login-text {
        font-size: 13px !important;
        font-weight: 700 !important;
    }
}

/* --------------------------------------------------------------------------
   Small mobile
   Guide small-mobile utility size = 12px.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    header.header-one .mukoun-language-single-link,
    header.header-one .mukoun-header-actions .quote-btn,
    header.header-one .nav-login-link,
    header.header-one .nav-login-text {
        font-size: 12px !important;
    }
}

/* =========================================================
   تكبير خط جميع عناصر الهيدر — عربي وإنجليزي
   يوضع هذا القسم في نهاية الملف حتى تكون له الأولوية
========================================================= */

/* عناصر القائمة الرئيسية */
header.header-one
.nav-area.mukoun-nav-area
> ul.parent-nav
> li.main-nav
> a.nav-main-link {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

/* العربية: أكبر قليلًا وتباعد سطور أوضح */
header.header-one.header-one--rtl
.nav-area.mukoun-nav-area
> ul.parent-nav
> li.main-nav
> a.nav-main-link {
    font-size: 23px !important;
    line-height: 1.60 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* عناصر القوائم المنسدلة */
header.header-one.header-one--ltr
.nav-area.mukoun-nav-area
ul.submenu
li
a {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

header.header-one.header-one--rtl
.nav-area.mukoun-nav-area
ul.submenu
li
a {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 1.75 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* زر اللغة + انضم إلينا + تسجيل الدخول */
header.header-one .mukoun-language-single-link,
header.header-one .mukoun-header-actions .quote-btn,
header.header-one .nav-login-link,
header.header-one .nav-login-text {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

/* العربية للأزرار */
header.header-one.header-one--rtl .mukoun-language-single-link,
header.header-one.header-one--rtl .mukoun-header-actions .quote-btn,
header.header-one.header-one--rtl .nav-login-link,
header.header-one.header-one--rtl .nav-login-text {
    font-size: 21px !important;
    line-height: 1.60 !important;
    letter-spacing: 0 !important;
}

/* لون عبارة انضم إلينا أبيض في جميع الحالات */
header.header-one .mukoun-header-actions .quote-btn,
header.header-one .mukoun-header-actions .quote-btn:link,
header.header-one .mukoun-header-actions .quote-btn:visited,
header.header-one .mukoun-header-actions .quote-btn:hover,
header.header-one .mukoun-header-actions .quote-btn:focus,
header.header-one .mukoun-header-actions .quote-btn:active,
header.header-one .mukoun-header-actions .quote-btn span {
    color: #ffffff !important;
}

/* لابتوب وشاشات متوسطة */
@media (max-width: 1399.98px) {
    header.header-one
    .nav-area.mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        font-size: 19px !important;
    }

    header.header-one.header-one--rtl
    .nav-area.mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        font-size: 20px !important;
    }

    header.header-one .mukoun-language-single-link,
    header.header-one .mukoun-header-actions .quote-btn,
    header.header-one .nav-login-link,
    header.header-one .nav-login-text {
        font-size: 17px !important;
    }

    header.header-one.header-one--rtl .mukoun-language-single-link,
    header.header-one.header-one--rtl .mukoun-header-actions .quote-btn,
    header.header-one.header-one--rtl .nav-login-link,
    header.header-one.header-one--rtl .nav-login-text {
        font-size: 18px !important;
    }
}

/* تابلت */
@media (max-width: 1199.98px) {
    header.header-one
    .nav-area.mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        font-size: 18px !important;
    }

    header.header-one.header-one--rtl
    .nav-area.mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        font-size: 19px !important;
    }

    header.header-one .mukoun-language-single-link,
    header.header-one .mukoun-header-actions .quote-btn,
    header.header-one .nav-login-link,
    header.header-one .nav-login-text {
        font-size: 16px !important;
    }
}

/* جوال */
@media (max-width: 767.98px) {
    header.header-one
    .nav-area.mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        font-size: 17px !important;
    }

    header.header-one.header-one--rtl
    .nav-area.mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        font-size: 18px !important;
    }

    header.header-one .mukoun-language-single-link,
    header.header-one .mukoun-header-actions .quote-btn,
    header.header-one .nav-login-link,
    header.header-one .nav-login-text {
        font-size: 15px !important;
    }
}

/* =========================================================
   FIX MUKOUN LOGO ALIGNMENT
   توحيد مكان اللوجو في العربية والإنجليزية
========================================================= */

/* الحاوية الرئيسية للهيدر */
header.header-one .header-main-one-wrapper {
    display: flex !important;
    align-items: center !important;
}

/* حاوية اللوجو */
header.header-one .header-main-one-wrapper > .thumbnail {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}

/* رابط اللوجو */
header.header-one .header-main-one-wrapper > .thumbnail > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
}

/* صورة اللوجو */
header.header-one .header-main-one-wrapper > .thumbnail img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    object-fit: contain !important;
    object-position: center !important;

    vertical-align: middle !important;
}


/* =========================================================
   RTL — العربية
   منع أي كود قديم من رفع اللوجو
========================================================= */

header.header-one.header-one--rtl
.header-main-one-wrapper > .thumbnail,

header.header-one[dir="rtl"]
.header-main-one-wrapper > .thumbnail {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    align-self: center !important;
}

header.header-one.header-one--rtl
.header-main-one-wrapper > .thumbnail img,

header.header-one[dir="rtl"]
.header-main-one-wrapper > .thumbnail img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


/* =========================================================
   LTR — English
========================================================= */

header.header-one.header-one--ltr
.header-main-one-wrapper > .thumbnail,

header.header-one[dir="ltr"]
.header-main-one-wrapper > .thumbnail {
    align-self: center !important;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1399.98px) {

    header.header-one
    .header-main-one-wrapper > .thumbnail img {
        max-height: 62px !important;
    }
}


@media (max-width: 991.98px) {

    header.header-one
    .header-main-one-wrapper > .thumbnail img {
        max-height: 56px !important;
    }
}


@media (max-width: 767.98px) {

    header.header-one
    .header-main-one-wrapper > .thumbnail img {
        max-height: 50px !important;
    }
}


@media (max-width: 575.98px) {

    header.header-one
    .header-main-one-wrapper > .thumbnail img {
        max-height: 46px !important;
    }
}

/* ==========================================================================
   MUKOUN HEADER — DROPDOWN GAP + RESPONSIVE DESKTOP FIX
   --------------------------------------------------------------------------
   الهدف:
   1) إزالة المسافة بين أسفل الهيدر وأعلى جميع القوائم المنسدلة.
   2) الحفاظ على نفس التصميم والألوان والخطوط والمحتوى.
   3) إبقاء قائمة الدسكتوب عند >= 1200px وقائمة الجوال الحالية عند أقل من ذلك.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop / Laptop / 27" / 32"
   الهيدر الحالي ارتفاعه 68px، لذلك نجعل عنصر main-nav بنفس الارتفاع بدل
   padding القديم 40px أعلى وأسفل الذي كان يجعل الـ submenu يبدأ أسفل الهيدر.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

    /* عناصر القائمة الرئيسية */
    header.header-one.header--sticky
    .mukoun-nav-area
    > ul.parent-nav
    > li.main-nav {
        height: 68px !important;
        min-height: 68px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* رابط القائمة يبقى في منتصف الهيدر رأسيًا */
    header.header-one.header--sticky
    .mukoun-nav-area
    > ul.parent-nav
    > li.main-nav
    > a.nav-main-link {
        height: 68px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* القوائم العادية: About / What we do / Sustainability */
    header.header-one.header--sticky
    .mukoun-nav-area
    > ul.parent-nav
    > li.has-dropdown
    > ul.submenu {
        top: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    header.header-one.header--sticky
    .mukoun-nav-area
    > ul.parent-nav
    > li.has-dropdown:hover
    > ul.submenu {
        top: 100% !important;
        margin-top: 0 !important;
    }

    /* Project mega menu — نفس نقطة البداية مباشرة أسفل الهيدر */
    header.header-one.header--sticky
    .mukoun-nav-area
    > ul.parent-nav
    > li.mega-menu
    > .rts-mega-menu {
        top: 100% !important;
        margin-top: 0 !important;
    }

    header.header-one.header--sticky
    .mukoun-nav-area
    > ul.parent-nav
    > li.mega-menu:hover
    > .rts-mega-menu {
        top: 100% !important;
        margin-top: 0 !important;
    }

    /* Join Us: اجعل عنصر القائمة بنفس ارتفاع الهيدر حتى تبدأ قائمته عند الحافة */
    header.header-one.header--sticky
    .mukoun-join-dropdown
    > ul.parent-nav
    > li.main-nav {
        height: 68px !important;
        min-height: 68px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    header.header-one.header--sticky
    .mukoun-join-dropdown
    > ul.parent-nav
    > li.has-dropdown
    > ul.submenu,
    header.header-one.header--sticky
    .mukoun-join-dropdown
    > ul.parent-nav
    > li.has-dropdown:hover
    > ul.submenu {
        top: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* يمنع خروج Join Us dropdown خارج الشاشة — لا يغير شكله */
    header.header-one.header-one--ltr
    .mukoun-join-dropdown
    > ul.parent-nav
    > li.has-dropdown
    > ul.submenu {
        left: auto !important;
        right: 0 !important;
    }

    header.header-one.header-one--rtl
    .mukoun-join-dropdown
    > ul.parent-nav
    > li.has-dropdown
    > ul.submenu {
        right: auto !important;
        left: 0 !important;
    }

    /* ترتيب مرن بدون تغيير شكل الهيدر */
    header.header-one .header-main-one-wrapper,
    header.header-one .main-header,
    header.header-one .button-area,
    header.header-one .mukoun-header-actions {
        min-width: 0 !important;
    }

    header.header-one .main-header {
        flex: 1 1 auto !important;
    }

    header.header-one .mukoun-nav-area {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    header.header-one .button-area {
        flex: 0 0 auto !important;
    }

    /* المسافات تتقلص تدريجيًا حسب عرض الشاشة فقط */
    header.header-one .mukoun-nav-area > ul.parent-nav {
        gap: clamp(12px, 1.15vw, 22px) !important;
    }
}

/* --------------------------------------------------------------------------
   Compact desktop / Laptop 1200–1399
   لا نغير التصميم؛ فقط نضمن عدم تزاحم العناصر.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    header.header-one .mukoun-nav-area > ul.parent-nav {
        gap: clamp(10px, 1vw, 16px) !important;
    }

    header.header-one .header-main-one-wrapper {
        column-gap: 10px !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile / Tablet
   القالب الأصلي يخفي nav-area تحت 1200px ويستخدم زر القائمة #menu-btn.
   نثبت هذا السلوك حتى يبقى الهيدر متجاوبًا دون تغيير التصميم الحالي.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    header.header-one .mukoun-nav-area {
        display: none !important;
    }

    header.header-one.header--sticky #menu-btn {
        display: flex !important;
        flex: 0 0 auto !important;
    }

    header.header-one .main-header,
    header.header-one .button-area,
    header.header-one .mukoun-header-actions {
        min-width: 0 !important;
    }

    header.header-one .button-area {
        margin-inline-start: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Small mobile
   منع أي عنصر من التسبب في overflow أفقي.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    header.header-one .header-main-one-wrapper {
        width: 100% !important;
        column-gap: 8px !important;
    }

    header.header-one .thumbnail {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    header.header-one .main-header {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    header.header-one .button-area {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
}