/* ── Header architecture override ──────────────────────────────────────
   Loads after landing.css in the async chain.
   Owns: two-row header layout, topbar, header overrides.
   landing.css is NOT modified — this file overrides via cascade order
   and specificity.
─────────────────────────────────────────────────────────────────────── */

/* Make site-header transparent so the topbar blue is never absorbed by
   the parent's frosted-glass background.
   Same specificity as landing.css — loads later → wins. */
.site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}

/* Nav bar row gets the frosted-glass effect.
   Specificity (0,2,0) > landing.css .site-header__bar (0,1,0) → always wins. */
.site-header .site-header__bar {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid rgba(30, 58, 95, .07);
    transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}

.site-header.scrolled .site-header__bar {
    background: rgba(255, 255, 255, .98);
    border-bottom-color: rgba(7, 30, 61, .12);
    box-shadow: 0 8px 32px rgba(7, 30, 61, .08);
}

/* Spacer accounts for topbar height on desktop */
.site-header-spacer { height: calc(var(--nav-h, 64px) + 76px); }
@media (max-width: 991.98px) {
    .site-header-spacer { height: var(--nav-h, 64px); }
}

/* ── Top info bar ────────────────────────────────────────────────────── */
.site-header__topbar {
    display: none;
    background: #36A3E6;
    height: 76px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

@media (min-width: 992px) {
    .site-header__topbar { display: flex; align-items: center; }
}

.site-header__topbar-inner {
    height: 100%;
    width: 100%;
    padding-inline: 2.5rem;
}

.site-header__topbar-divider {
    width: 1px;
    height: 1.5rem;
    background: rgba(255, 255, 255, .4);
    flex-shrink: 0;
    margin-inline: .25rem;
}

/* Vision 2030 image in topbar */
.site-header__topbar-vision {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Social icon circles */
.site-header__topbar-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.15rem;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.site-header__topbar-social:hover {
    background: #fff;
    color: #36A3E6;
    border-color: #fff;
}

/* Contact chips (email / phone) */
.site-header__contact-chip {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: .875rem;
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    font-family: "Noto Kufi Arabic", sans-serif;
    transition: color .2s;
}
.site-header__contact-chip i { color: #fff; font-size: .9rem; }
.site-header__contact-chip:hover { color: #fff; text-decoration: underline; }

/* Hide nav CTA on desktop — topbar CTA takes over */
@media (min-width: 992px) {
    .site-header__navbar .site-header__cta-item { display: none; }
}

/* ── Topbar CTA button ───────────────────────────────────────────────── */
@keyframes topbar-cta-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 0 0 0 rgba(255,255,255,0) }
    50%       { transform: scale(1.05); box-shadow: 0 4px 16px rgba(0,0,0,.2),  0 0 0 5px rgba(255,255,255,.22) }
}
@keyframes topbar-cta-shine {
    0%   { transform: translateX(-140%) skewX(-16deg) }
    100% { transform: translateX(220%)  skewX(-16deg) }
}

.site-header__topbar-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .38rem 1rem;
    background: #fff;
    color: #36A3E6;
    font-size: .82rem;
    font-weight: 700;
    font-family: "Noto Kufi Arabic", sans-serif;
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    animation: topbar-cta-pulse 2.2s ease-in-out infinite;
}
.site-header__topbar-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(54,163,230,.25) 50%, transparent 65%);
    animation: topbar-cta-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}
.site-header__topbar-cta i,
.site-header__topbar-cta span { position: relative; z-index: 1; }
.site-header__topbar-cta i { font-size: .82rem; }

.site-header__topbar-cta:hover,
.site-header__topbar-cta:focus-visible {
    background: #1F8ED1;
    color: #fff;
    animation: none !important;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    text-decoration: none;
}
.site-header__topbar-cta:hover::before { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .site-header__topbar-cta { animation: none !important; }
    .site-header__topbar-cta::before { animation: none !important; }
}