/* =========================================================
   Company Header & Footer - Header Styles
   ملف مستقل تمامًا عن الفوتر - أي تعديل هنا مايأثرش على الفوتر
   ========================================================= */

:root {
    --chf-main: #222168;
    --chf-second: #6bbdcd;
    --chf-white: #ffffff;
    --chf-text-dark: #1c1c2b;
    --chf-font: 'Plus Jakarta Sans', sans-serif;
}

.chf-header * {
    box-sizing: border-box;
}

.chf-header {
    /* --chf-logo-w-desktop / --chf-logo-w-mobile / --chf-menu-font-size بتتحط inline من الإعدادات */
    --chf-logo-w-desktop: 160px;
    --chf-logo-w-mobile: 120px;
    --chf-menu-font-size: 15px;

    direction: ltr;
    font-family: var(--chf-font);
    position: relative;
    width: 100%;
    background: var(--chf-white);
    box-shadow: 0 2px 14px rgba(34, 33, 104, 0.08);
    z-index: 999;
    animation: chf-header-fade-down 0.6s ease both;
}

@keyframes chf-header-fade-down {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chf-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 32px;
}

/* ---------- Logo (متحكم فيه بالبكسل من لوحة التحكم) ---------- */
.chf-header__logo img {
    width: var(--chf-logo-w-desktop);
    max-width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.chf-header__logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--chf-main);
    letter-spacing: 0.5px;
}

/* ---------- Desktop Nav ---------- */
.chf-header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.chf-header__menu {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chf-header__menu li a {
    text-decoration: none;
    color: var(--chf-text-dark);
    font-weight: 500;
    font-size: var(--chf-menu-font-size);
    position: relative;
    padding-bottom: 4px;
    transition: color 0.25s ease;
}

.chf-header__menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--chf-second);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.chf-header__menu li a:hover {
    color: var(--chf-main);
}

.chf-header__menu li a:hover::after,
.chf-header__menu li.current-menu-item a::after {
    width: 100%;
}

.chf-header__menu li.current-menu-item a {
    color: var(--chf-main);
}

/* ---------- Actions (CTA + Toggle) ---------- */
.chf-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.chf-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--chf-second);
    color: var(--chf-main);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 16px rgba(107, 189, 205, 0.35);
}

.chf-header__cta:hover {
    background: var(--chf-main);
    color: var(--chf-white);
    transform: translateY(-2px);
}

/* ---------- Mobile Toggle Button (Hamburger) ----------
   مخفي تمامًا في شاشات الكمبيوتر، وظاهر بشكل مميز بألوان الهوية بس في الموبايل.
   كل الخصائص هنا بـ !important عشان تكسر أي ستايل جاي من القالب نفسه (زي دايرة حمرا افتراضية من الثيم)
------------------------------------------------------- */
.chf-header .chf-header__toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background: var(--chf-main) !important;
    background-image: none !important;
    color: var(--chf-white) !important;
    border: 2px solid var(--chf-second) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(34, 33, 104, 0.25) !important;
    outline: none !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0;
    flex-shrink: 0;
    line-height: normal;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.chf-header .chf-header__toggle:hover {
    transform: scale(1.06);
    border-color: var(--chf-white);
}

.chf-header .chf-header__toggle span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--chf-second) !important;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.chf-header .chf-header__toggle[aria-expanded="true"] {
    background: var(--chf-second) !important;
    border-color: var(--chf-main) !important;
}

.chf-header .chf-header__toggle[aria-expanded="true"] span {
    background: var(--chf-main) !important;
}

.chf-header .chf-header__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.chf-header .chf-header__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.chf-header .chf-header__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile Full-Screen Popup Menu ----------
   z-index عالي جدًا عشان يغطي أي عنصر تاني في الصفحة (تحت اللودر بس اللي عنده 999999)
   وارتفاع كامل للشاشة الحقيقية (100dvh) عشان مشكلة شريط العنوان في متصفحات الموبايل
------------------------------------------------------- */
.chf-mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(34, 33, 104, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    z-index: 999990;
}

.chf-mobile-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* زرار قفل قائمة الموبايل - دايرة شفافة بحدود بيضا واضحة، بدون أي لون أحمر */
.chf-mobile-menu .chf-mobile-menu__close {
    position: absolute !important;
    top: 24px;
    right: 24px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    background-image: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    color: var(--chf-white) !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.chf-mobile-menu .chf-mobile-menu__close:hover {
    background: var(--chf-white) !important;
    border-color: var(--chf-white) !important;
    color: var(--chf-main) !important;
    transform: scale(1.06);
}

.chf-mobile-menu .chf-mobile-menu__close svg {
    width: 16px;
    height: 16px;
}

/* لوجو أعلى قائمة الموبايل */
.chf-mobile-menu__logo {
    margin-bottom: 8px;
}

.chf-mobile-menu__logo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.chf-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.chf-mobile-menu__list li {
    opacity: 0;
    transform: translateY(14px);
    animation: chf-mobile-link-in 0.45s ease forwards;
}

.chf-mobile-menu.is-active .chf-mobile-menu__list li:nth-child(1) { animation-delay: 0.05s; }
.chf-mobile-menu.is-active .chf-mobile-menu__list li:nth-child(2) { animation-delay: 0.1s; }
.chf-mobile-menu.is-active .chf-mobile-menu__list li:nth-child(3) { animation-delay: 0.15s; }
.chf-mobile-menu.is-active .chf-mobile-menu__list li:nth-child(4) { animation-delay: 0.2s; }
.chf-mobile-menu.is-active .chf-mobile-menu__list li:nth-child(5) { animation-delay: 0.25s; }
.chf-mobile-menu.is-active .chf-mobile-menu__list li:nth-child(6) { animation-delay: 0.3s; }

@keyframes chf-mobile-link-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chf-mobile-menu__list li a {
    color: var(--chf-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    transition: color 0.25s ease;
}

.chf-mobile-menu__list li a:hover {
    color: var(--chf-second);
}

.chf-mobile-menu__cta {
    display: inline-flex;
    background: var(--chf-second);
    color: var(--chf-main);
    font-weight: 700;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 999px;
    font-size: 15px;
    transition: transform 0.25s ease;
}

.chf-mobile-menu__cta:hover {
    transform: translateY(-2px);
}

/* body class added by JS while the mobile menu is open */
body.chf-menu-open {
    overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .chf-header__logo img {
        width: var(--chf-logo-w-mobile);
    }

    .chf-header__nav {
        display: none;
    }

    .chf-header .chf-header__toggle {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .chf-header__inner {
        padding: 14px 20px;
    }

    .chf-header__cta {
        display: none;
    }
}