/* ==========================================================
   ebmnt1-header.css
   الهيدر: sticky + مستقل عن الهيرو
   top bar (أصفر) + nav bar (أزرق) + قائمة منسدلة للخدمات
   في الشاشات الصغيرة: burger -> aside menu و parent شفاف بيقفل القائمة
   ========================================================== */

:root {
    /* ---------- top bar ---------- */
    --ebmnt1-header-top-bar-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-header-top-bar-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-header-top-bar-info-icon-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-header-top-bar-social-icon-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-header-top-bar-social-icon-hover-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-header-top-bar-info-gap: 1.5rem;
    --ebmnt1-header-top-bar-social-gap: 1.25rem;
    --ebmnt1-header-top-bar-info-icon-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
    --ebmnt1-header-top-bar-social-icon-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);

    /* ---------- nav bar ---------- */
    --ebmnt1-header-nav-bar-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-header-nav-bar-min-height: 4.5rem;
    --ebmnt1-header-nav-bar-shadow-color: var(--ebmnt1-color-helper-shadow);
    --ebmnt1-header-logo-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-header-logo-icon-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-header-logo-font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);

    /* ---------- links ---------- */
    --ebmnt1-header-link-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-header-link-hover-text-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-header-link-active-text-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-header-link-padding-inline: 1.5rem;
    --ebmnt1-header-submenu-icon-size: clamp(0.6rem, 0.55rem + 0.1vw, 0.7rem);

    /* ---------- dropdown (ديسكتوب) ---------- */
    --ebmnt1-header-dropdown-background-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-header-dropdown-link-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-header-dropdown-link-hover-text-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-header-dropdown-shadow-color: var(--ebmnt1-color-helper-shadow);
    --ebmnt1-header-dropdown-divider-color: var(--ebmnt1-color-helper-border-gray);
    --ebmnt1-header-dropdown-min-width: 14rem;

    /* ---------- aside (موبايل / تابلت) ---------- */
    --ebmnt1-header-overlay-background-color: var(--ebmnt1-color-helper-overlay-dark);
    --ebmnt1-header-aside-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-header-aside-width: min(85vw, 20rem);
    --ebmnt1-header-aside-shadow-color: var(--ebmnt1-color-helper-shadow);
    --ebmnt1-header-aside-divider-color: var(--ebmnt1-color-helper-light-blue);
    --ebmnt1-header-aside-submenu-background-color: var(--ebmnt1-color-helper-light-blue);
    --ebmnt1-header-aside-submenu-link-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-header-aside-submenu-link-hover-text-color: var(--ebmnt1-color-secondary-yellow);

    /* ---------- burger / close ---------- */
    --ebmnt1-header-burger-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-header-burger-icon-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-header-burger-border-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-header-burger-hover-background-color: var(--ebmnt1-color-helper-transparent);
    --ebmnt1-header-burger-hover-icon-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-header-burger-size: 2.9rem;
    --ebmnt1-header-burger-radius: 8px;
    --ebmnt1-header-burger-icon-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.6rem);
    --ebmnt1-header-close-icon-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-header-close-hover-icon-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-header-close-icon-size: clamp(1.3rem, 1.2rem + 0.4vw, 1.6rem);

    --ebmnt1-header-z-index: 1000;
    --ebmnt1-header-aside-transition: 0.35s ease;
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-header-nav-bar-min-height: 5.5rem;
    }
}

/* ---------- الهيدر نفسه (sticky) ---------- */
.ebmnt1-header {
    position: sticky;
    top: calc(var(--ebmnt1-header-top-bar-height) * -1);
    z-index: var(--ebmnt1-header-z-index);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------- top bar ---------- */
.ebmnt1-header__top-bar {
    width: 100%;
    height: var(--ebmnt1-header-top-bar-height);
    display: flex;
    align-items: center;
    background-color: var(--ebmnt1-header-top-bar-background-color);
    color: var(--ebmnt1-header-top-bar-text-color);
}

.ebmnt1-header__top-bar-inner {
    width: calc(100% - var(--ebmnt1-container-side-space));
    max-width: var(--ebmnt1-container-max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
}

.ebmnt1-header__info,
.ebmnt1-header__socials {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ebmnt1-header__info {
    flex-wrap: wrap;
    gap: 0.25em var(--ebmnt1-header-top-bar-info-gap);
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-medium);
    line-height: 1.4;
}

.ebmnt1-header__info-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--ebmnt1-header-top-bar-text-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-header__info-link:hover {
    color: var(--ebmnt1-header-top-bar-social-icon-hover-color);
}

.ebmnt1-header__info-icon {
    font-size: var(--ebmnt1-header-top-bar-info-icon-size);
    color: var(--ebmnt1-header-top-bar-info-icon-color);
}

.ebmnt1-header__socials {
    gap: var(--ebmnt1-header-top-bar-social-gap);
}

.ebmnt1-header__social-link {
    display: inline-flex;
    font-size: var(--ebmnt1-header-top-bar-social-icon-size);
    color: var(--ebmnt1-header-top-bar-social-icon-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-header__social-link:hover {
    color: var(--ebmnt1-header-top-bar-social-icon-hover-color);
}

/* ---------- nav bar ---------- */
.ebmnt1-header__nav-bar {
    width: 100%;
    min-height: var(--ebmnt1-header-nav-bar-min-height);
    display: flex;
    align-items: center;
    background-color: var(--ebmnt1-header-nav-bar-background-color);
    box-shadow: 0 4px 14px var(--ebmnt1-header-nav-bar-shadow-color);
}

.ebmnt1-header__nav-bar-inner {
    width: calc(100% - var(--ebmnt1-container-side-space));
    max-width: var(--ebmnt1-container-max-width);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.ebmnt1-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--ebmnt1-header-logo-font-size);
    font-weight: var(--ebmnt1-font-weight-bold);
    line-height: 1;
    color: var(--ebmnt1-header-logo-text-color);
}

.ebmnt1-header__logo-icon {
    color: var(--ebmnt1-header-logo-icon-color);
}

/* ---------- burger ---------- */
.ebmnt1-header__burger {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ebmnt1-header-burger-size);
    height: var(--ebmnt1-header-burger-size);
    border: 1px solid var(--ebmnt1-header-burger-border-color);
    border-radius: var(--ebmnt1-header-burger-radius);
    background-color: var(--ebmnt1-header-burger-background-color);
    font-size: var(--ebmnt1-header-burger-icon-size);
    color: var(--ebmnt1-header-burger-icon-color);
    transition: background-color var(--ebmnt1-transition-base), color var(--ebmnt1-transition-base);
}

.ebmnt1-header__burger:hover,
.ebmnt1-header__burger.ebmnt1-is-open {
    background-color: var(--ebmnt1-header-burger-hover-background-color);
    color: var(--ebmnt1-header-burger-hover-icon-color);
}

.ebmnt1-header__burger-icon--close {
    display: none;
}

.ebmnt1-header__burger.ebmnt1-is-open .ebmnt1-header__burger-icon--open {
    display: none;
}

.ebmnt1-header__burger.ebmnt1-is-open .ebmnt1-header__burger-icon--close {
    display: inline-block;
}

/* ==========================================================
   الـ nav (parent) و الـ nav-inner (inner) — موبايل/تابلت
   parent: طبقة شفافة بعرض كامل وبتقفل القائمة
   inner : الـ aside menu
   ========================================================== */
.ebmnt1-header__nav {
    position: fixed;
    inset: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    background-color: var(--ebmnt1-header-overlay-background-color);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--ebmnt1-header-aside-transition), visibility var(--ebmnt1-header-aside-transition);
}

.ebmnt1-header__nav.ebmnt1-is-open {
    visibility: visible;
    opacity: 1;
}

.ebmnt1-header__nav-inner {
    width: var(--ebmnt1-header-aside-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    overflow-y: auto;
    background-color: var(--ebmnt1-header-aside-background-color);
    box-shadow: 0 0 24px var(--ebmnt1-header-aside-shadow-color);
    transform: translateX(100%);
    transition: transform var(--ebmnt1-header-aside-transition);
}

.ebmnt1-header__nav.ebmnt1-is-open .ebmnt1-header__nav-inner {
    transform: none;
}

.ebmnt1-header__nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    min-height: var(--ebmnt1-header-nav-bar-min-height);
    border-bottom: 1px solid var(--ebmnt1-header-aside-divider-color);
}

.ebmnt1-header__nav-title {
    padding-inline: 1.25rem;
    font-size: var(--ebmnt1-font-size-small-title);
    font-weight: var(--ebmnt1-font-weight-bold);
    color: var(--ebmnt1-header-logo-text-color);
}

.ebmnt1-header__nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ebmnt1-header-burger-size);
    height: var(--ebmnt1-header-burger-size);
    font-size: var(--ebmnt1-header-close-icon-size);
    color: var(--ebmnt1-header-close-icon-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-header__nav-close:hover {
    color: var(--ebmnt1-header-close-hover-icon-color);
}

.ebmnt1-header__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.ebmnt1-header__menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--ebmnt1-header-aside-divider-color);
}

.ebmnt1-header__menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    width: 100%;
    padding: 1rem var(--ebmnt1-header-link-padding-inline);
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-medium);
    line-height: 1.2;
    text-align: start;
    color: var(--ebmnt1-header-link-text-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-header__menu-link:hover,
.ebmnt1-header__menu-link.ebmnt1-is-active,
.ebmnt1-header__menu-item.ebmnt1-is-open > .ebmnt1-header__menu-link {
    color: var(--ebmnt1-header-link-hover-text-color);
}

.ebmnt1-header__submenu-icon {
    font-size: var(--ebmnt1-header-submenu-icon-size);
    transition: transform var(--ebmnt1-transition-base);
}

.ebmnt1-header__menu-item.ebmnt1-is-open > .ebmnt1-header__menu-link .ebmnt1-header__submenu-icon {
    transform: rotate(180deg);
}

/* القائمة المنسدلة (accordion جوه الـ aside) */
.ebmnt1-header__submenu {
    display: none;
    flex-direction: column;
    background-color: var(--ebmnt1-header-aside-submenu-background-color);
}

.ebmnt1-header__menu-item.ebmnt1-is-open > .ebmnt1-header__submenu {
    display: flex;
}

.ebmnt1-header__submenu-link {
    display: block;
    padding: 0.9rem 2.5rem;
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-medium);
    line-height: 1.2;
    color: var(--ebmnt1-header-aside-submenu-link-text-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-header__submenu-link:hover {
    color: var(--ebmnt1-header-aside-submenu-link-hover-text-color);
}

/* ==========================================================
   تابلت
   ========================================================== */
@media (min-width: 768px) {
    .ebmnt1-header__top-bar-inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .ebmnt1-header__info {
        justify-content: flex-start;
    }
}

/* ==========================================================
   ديسكتوب (لابتوب فما فوق): القائمة بتبقى أفقية
   ========================================================== */
@media (min-width: 1024px) {
    .ebmnt1-header__burger,
    .ebmnt1-header__nav-top {
        display: none;
    }

    .ebmnt1-header__nav {
        position: static;
        inset: auto;
        z-index: auto;
        width: auto;
        background-color: var(--ebmnt1-color-helper-transparent);
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    .ebmnt1-header__nav-inner {
        width: auto;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 0;
        overflow: visible;
        background-color: var(--ebmnt1-color-helper-transparent);
        box-shadow: none;
        transform: none;
        transition: none;
    }

    .ebmnt1-header__menu {
        flex-direction: row;
        align-items: center;
    }

    .ebmnt1-header__menu-item {
        flex-direction: row;
        border-bottom: 0;
    }

    .ebmnt1-header__menu-link {
        width: auto;
        justify-content: center;
        gap: 0.9em;
        padding-block: 2.2em;
    }

    /* dropdown */
    .ebmnt1-header__submenu {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        z-index: 5;
        display: flex;
        min-width: var(--ebmnt1-header-dropdown-min-width);
        overflow: hidden;
        border-radius: calc(var(--ebmnt1-radius-card) + 1%);
        background-color: var(--ebmnt1-header-dropdown-background-color);
        box-shadow: 0 12px 28px var(--ebmnt1-header-dropdown-shadow-color);
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity var(--ebmnt1-transition-base), transform var(--ebmnt1-transition-base), visibility var(--ebmnt1-transition-base);
    }

    .ebmnt1-header__menu-item:hover > .ebmnt1-header__submenu,
    .ebmnt1-header__menu-item:focus-within > .ebmnt1-header__submenu,
    .ebmnt1-header__menu-item.ebmnt1-is-open > .ebmnt1-header__submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .ebmnt1-header__menu-item:hover > .ebmnt1-header__menu-link {
        color: var(--ebmnt1-header-link-hover-text-color);
    }

    .ebmnt1-header__menu-item:hover > .ebmnt1-header__menu-link .ebmnt1-header__submenu-icon {
        transform: rotate(180deg);
    }

    .ebmnt1-header__submenu-link {
        padding: 0.95rem 1.9rem;
        border-bottom: 1px solid var(--ebmnt1-header-dropdown-divider-color);
        color: var(--ebmnt1-header-dropdown-link-text-color);
    }

    .ebmnt1-header__submenu li:last-child .ebmnt1-header__submenu-link {
        border-bottom: 0;
    }

    .ebmnt1-header__submenu-link:hover {
        color: var(--ebmnt1-header-dropdown-link-hover-text-color);
    }
}