/* =========================================================
   toolbar-variants.css
   تولبار 3 (عائم Pill داكن) + تولبار 4 (فاتح زجاجي) + تولبار 5 (شريط)
   + تنويع تولبار 2 (تدرّج) + إصلاح قائمة الجوال لكل التولبارات
   كل الألوان من متغيّرات الثيم (:root). يُضاف بعد style.css
   ========================================================= */

/* ============ تولبار 3 — عائم (Pill) داكن ============ */
.site-header--pill {
    background: transparent;
    border-bottom: none;
    padding-top: 14px;
    padding-bottom: 0;
}

    .site-header--pill::before {
        display: none;
    }

    .site-header--pill .navbar {
        padding: 0;
    }

        .site-header--pill .navbar > .container {
            background: var(--primary);
            border: 1.5px solid rgba(201,169,97,.45);
            border-radius: 50px;
            padding: 6px 20px;
            box-shadow: 0 14px 36px rgba(0,0,0,.30);
            transition: var(--transition);
        }

    .site-header--pill.scrolled {
        background: transparent;
        box-shadow: none;
        border-bottom: none;
    }

        .site-header--pill.scrolled .navbar > .container {
            background: var(--primary-dark);
            box-shadow: 0 10px 30px rgba(0,0,0,.38);
        }

    .site-header--pill .navbar-brand {
        background: transparent;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }

        .site-header--pill .navbar-brand img {
            height: 52px;
        }

    .site-header--pill.scrolled .navbar-brand img {
        height: 46px;
    }

    .site-header--pill .dropdown-menu {
        margin-top: 14px !important;
    }

@media(max-width:991.98px) {
    .site-header--pill .navbar > .container {
        border-radius: 22px;
        padding: 10px 16px;
    }

    .site-header--pill .dropdown-menu {
        margin-top: 6px !important;
    }
}

/* ============ تولبار 4 — فاتح زجاجي ============ */
.site-header--light {
    background: rgba(255,255,255,.90);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-200);
}

    .site-header--light.scrolled {
        background: rgba(255,255,255,.97);
        box-shadow: 0 6px 26px rgba(0,0,0,.10);
        border-bottom-color: rgba(201,169,97,.5);
    }

    .site-header--light .navbar-brand {
        background: #fff;
        box-shadow: 0 4px 16px rgba(0,0,0,.08);
        border: 1px solid var(--gray-100);
    }

    .site-header--light .navbar-nav .nav-link {
        color: var(--teal-dark);
        font-weight: 600;
    }

        .site-header--light .navbar-nav .nav-link i {
            color: var(--gold-dark);
        }

        .site-header--light .navbar-nav .nav-link:hover,
        .site-header--light .navbar-nav .nav-link.active {
            color: var(--teal);
        }

            .site-header--light .navbar-nav .nav-link:hover i,
            .site-header--light .navbar-nav .nav-link.active i {
                color: var(--gold);
            }

    .site-header--light .navbar-toggler {
        border-color: rgba(19,72,80,.30);
    }

    .site-header--light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23135A68' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

@media(max-width:991.98px) {
    .site-header--light .navbar-collapse {
        background: rgba(255,255,255,.98);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        margin-top: 10px;
        padding: 10px;
        box-shadow: var(--shadow-lg);
    }
}

/* ============ تولبار 5 — شريط بلون الخلفية فقط ============ */
.site-header--bar {
    height: 64px;
    background: var(--primary);
    border-bottom: 2px solid var(--gold);
    padding: 0;
}

    .site-header--bar::before {
        display: none;
    }

@media(max-width:991.98px) {
    .site-header--bar {
        height: 56px;
    }
}

/* ============ تنويع تولبار 2 — تدرّج تركوازي (يميّزه عن 1) ============ */
.site-header--gradient {
    background: linear-gradient(120deg, var(--teal-deep) 0%, var(--teal-dark) 55%, var(--teal) 100%) !important;
    border-bottom: 1px solid rgba(201,169,97,.35);
}

    .site-header--gradient.scrolled {
        background: linear-gradient(120deg, var(--teal-deep), var(--teal-dark)) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,.25);
    }

/* ============ إصلاح قائمة الجوال (كل التولبارات الداكنة 1/2/3) ============ */
/* المشكلة: روابط المستوى الأول (خصوصاً .active) تبقى فاتحة على خلفية القائمة البيضاء */
@media(max-width:991.98px) {
    .site-header .navbar-collapse .navbar-nav > .nav-item > .nav-link,
    .site-header .navbar-collapse .navbar-nav > .nav-item > .nav-link.active,
    .site-header .navbar-collapse .navbar-nav > .nav-item > .nav-link.dropdown-toggle {
        color: var(--teal-deep) !important;
        font-weight: 700;
    }

        .site-header .navbar-collapse .navbar-nav > .nav-item > .nav-link i {
            color: var(--gold-dark) !important;
        }

        .site-header .navbar-collapse .navbar-nav > .nav-item > .nav-link.active {
            background: rgba(27,123,140,.08);
            border-radius: 10px;
        }
    /* التولبار الفاتح (4) روابطه داكنة أصلاً — نتركه بلونه الخاص */
    .site-header--light .navbar-collapse .navbar-nav > .nav-item > .nav-link {
        color: var(--teal-dark) !important;
    }
}