/* =====================================================================
   header.css — REDESIGN v4 (Premium / Engineered)
   Namespaced under .site-header (site-header__*). Scope: ONLY the
   sticky top navigation (logo, menu, dropdowns, CTAs, icon actions,
   mobile drawer, search modal, map modal).

   Palette is UNCHANGED from the existing design system:
   #016fb9 brand blue · #01517f deep blue · #f59e0b amber/gold
   #1f2937 ink · #6b7280 / #9ca3af muted · #eef1f4 hairlines · #f3f7fb tint

   Signature idea: this is an HVAC / central-duct engineering company.
   Instead of generic glass panels, the header borrows two motifs from
   that world and uses them exactly once each: a slow rotating dashed
   ring behind the logo (a fan/damper reference) and a "duct-flange"
   divider (dash + rivet dots) used wherever the old design had a flat
   line. Everything else stays quiet on purpose.
   ===================================================================== */

/* FIX: these used to live on .site-header itself, which broke as soon as
   #mobile-menu / #mobile-menu-overlay were moved to be siblings of <nav>
   (see the fix note above #mobile-menu-overlay in header.php) — CSS custom
   properties only inherit to descendants of the element that defines them,
   so anything outside .site-header (like the mobile drawer now) saw these
   vars as unset, gradients resolved to nothing, and white text sat on a
   transparent/white background. Defining them on :root makes them available
   everywhere regardless of where an element sits in the markup. */
:root {
    --hdr-blue: #016fb9;
    --hdr-blue-deep: #01517f;
    --hdr-amber: #f59e0b;
    --hdr-amber-deep: #e08e00;
    --hdr-ink: #1f2937;
}

.site-header {
    top: 10px !important;
    margin: 0 10px;
    border-radius: 1.1rem;
    position: relative;
    background-color: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 14px 34px -18px rgba(1, 111, 185, 0.28),
        0 2px 10px -4px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.35s ease, background-color 0.35s ease, margin 0.35s ease, border-radius 0.35s ease;
}

/* Gradient hairline "circuit trace" along the top edge — replaces the
   old flat border-b-4 border-amber-500/50 utility classes. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: 1.1rem 1.1rem 0 0;
    background: linear-gradient(90deg, var(--hdr-blue) 0%, var(--hdr-amber) 50%, var(--hdr-blue) 100%);
    opacity: 0.9;
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 18px 40px -16px rgba(1, 111, 185, 0.32),
        0 4px 14px -6px rgba(15, 23, 42, 0.12);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    min-height: 72px;
    transition: padding 0.3s ease-in-out, min-height 0.3s ease-in-out;
}

.site-header.scrolled .site-header__inner {
    min-height: 58px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* --- Brand / Logo -------------------------------------------------- */
/* FIX: this block used to be flex-shrink:0 with no truncation on the
   title/subtitle text. On phones ~375-430px wide the Arabic company name +
   English subtitle are wider than the space left over after the logo and
   the action icons (search / download / hamburger) — but flex-shrink:0
   forbade this block from ever shrinking, so instead the WHOLE header row
   overflowed the screen and pushed the action icons (including the
   hamburger button) partly off the left edge, where they visually
   squashed together — this is almost certainly the "three dots" the
   report described. min-width:0 (here and on .site-header__brand-text
   below) lets the flex item shrink below its content size, and the
   ellipsis truncation keeps long names from forcing overflow again. */
.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
}

.site-header__logo-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    transition: width 0.3s ease, height 0.3s ease;
}

.site-header.scrolled .site-header__logo-frame {
    width: 42px;
    height: 42px;
}

/* Slow dashed ring — the "damper blade" motif. Two counter-rotating
   rings at different speeds read as a single quiet mechanical detail. */
.site-header__logo-frame::before,
.site-header__logo-frame::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    pointer-events: none;
}

.site-header__logo-frame::before {
    border: 1.5px dashed rgba(1, 111, 185, 0.32);
}

.site-header__logo-frame::after {
    border-top: 1.5px solid var(--hdr-amber);
    border-right: 1.5px solid transparent;
    opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
    .site-header__logo-frame::before { animation: site-header-ring-spin 16s linear infinite; }
    .site-header__logo-frame::after { animation: site-header-ring-spin 5.5s linear infinite reverse; }
}

@keyframes site-header-ring-spin {
    to { transform: rotate(360deg); }
}

.site-header__logo {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 3px 12px rgba(1, 111, 185, 0.25);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.site-header__brand:hover .site-header__logo {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 6px 18px rgba(1, 111, 185, 0.35);
}

.site-header__brand:hover .site-header__logo-frame::before {
    border-color: rgba(1, 111, 185, 0.5);
}

.site-header__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

/* FIX: font-size ثابت (1.1rem) + white-space:nowrap + ellipsis كان معناه
   إن اسم الشركة على أي شاشة أضيق من المساحة المتاحة للنص كان بيتقص فورًا
   لأول كلمة بس ("شركة") من غير أي تدرّج. بدّلناه بـ clamp() عشان الخط
   يصغر تدريجيًا مع عرض الشاشة قبل ما يوصل لمرحلة القص، بدل ما يقفز من
   الحجم الكامل لحرف واحد يتقص. */
.site-header__brand-title {
    font-size: clamp(0.8rem, 3.6vw, 1.1rem);
    font-weight: 800;
    color: var(--hdr-blue);
    transition: color 0.2s ease, font-size 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__brand-subtitle {
    font-size: clamp(0.62rem, 2.2vw, 0.72rem);
    font-weight: 700;
    color: var(--hdr-amber);
    margin-top: 2px;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1280px) {
    .site-header__brand-title { font-size: 1.25rem; }
}

/* FIX: تحت 400px الاسم الفرعي الإنجليزي كان بيتخفى بالكامل، والاسم
   الرئيسي برضه كان لسه بيتقص على سطر واحد فقط فيفضل ظاهر منه كلمة
   وحدة بس. هنا بنسمح للاسم الرئيسي إنه يلف على سطرين (بدل القص) طالما
   مفيش مساحة كافية على سطر واحد، فالاسم الكامل "شركة أبعاد المشاريع"
   بيبان دايمًا حتى على أضيق شاشة. */
@media (max-width: 400px) {
    /* FIX: كان النص الإنجليزي بيتخفى بالكامل (display:none) تحت 400px
       عشان نوفر مساحة لاسم الشركة العربي بعد ما بقى يلف سطرين. لكن ده
       معناه إن "Projects Dimensions Company" مش بيبان خالص على أغلب
       الموبايلات (375-393px شائعة جدًا). رجّعناه ظاهر بخط أصغر جدًا
       بدل الإخفاء الكامل، وسايبين overflow/ellipsis (من القاعدة
       الأساسية فوق) يتكفل بأي جزء أطول من المساحة المتاحة. */
    .site-header__brand-subtitle {
        font-size: clamp(0.52rem, 2vw, 0.62rem);
        letter-spacing: 0;
    }
    .site-header__brand-title {
        white-space: normal;
        line-height: 1.15;
        font-size: clamp(0.72rem, 4vw, 0.85rem);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* --- Desktop navigation links ---------------------------------------- */
.site-header__nav {
    align-items: center;
    gap: 1.6rem;
    font-size: 0.925rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 1536px) {
    .site-header__nav { gap: 2rem; }
}

.site-header__link {
    position: relative;
    color: #374151;
    padding: 0.4rem 0.05rem;
    cursor: pointer;
    transition: color 0.25s ease;
}

.site-header__link:hover,
.site-header__link:focus-visible {
    color: var(--hdr-blue);
}

.site-header__link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hdr-amber), var(--hdr-blue));
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__link:hover::after,
.site-header__link:focus-visible::after,
.site-header__link--active::after {
    width: 100%;
}

.site-header__link--active {
    color: var(--hdr-amber);
    font-weight: 800;
}

.site-header__dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
}

.site-header__dropdown-toggle::-webkit-details-marker {
    display: none;
}

/* "Duct-flange" divider: dash + two rivet dots, instead of a flat
   grey rule. Reused (smaller) as the column separators in the footer. */
.site-header__divider {
    position: relative;
    width: 22px;
    height: 2px;
    margin: 0 0.15rem;
    background-color: #d7dde5;
    border-radius: 2px;
    flex-shrink: 0;
}

.site-header__divider::before,
.site-header__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 9999px;
    background-color: #b7c1cf;
    transform: translateY(-50%);
}

.site-header__divider::before { right: -1px; }
.site-header__divider::after { left: -1px; }

/* --- Dropdown panels (خدماتنا / المزيد) ------------------------------- */
.site-header__dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    min-width: 250px;
    background-color: #ffffff;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        repeating-linear-gradient(0deg, rgba(1, 111, 185, 0.035) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(1, 111, 185, 0.035) 0 1px, transparent 1px 22px);
    background-blend-mode: normal;
    border: 1px solid #eef1f4;
    border-radius: 18px;
    box-shadow: 0 24px 50px -14px rgba(1, 111, 185, 0.26), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    padding: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s ease;
    z-index: 60;
}

.site-header__dropdown[open] > .site-header__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.site-header__dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-header__dropdown-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background-color: #f3f7fb;
    color: var(--hdr-blue);
    font-size: 0.8rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link:focus-visible {
    background-color: #fff7ec;
    color: var(--hdr-amber-deep);
    transform: translateX(-2px);
}

.site-header__dropdown-link:hover .site-header__dropdown-link-icon,
.site-header__dropdown-link:focus-visible .site-header__dropdown-link-icon {
    background-color: var(--hdr-amber);
    color: #ffffff;
    transform: rotate(-8deg);
}

/* --- CTA buttons (desktop) -------------------------------------------- */
.site-header__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.35rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__cta:active { transform: scale(0.97); }

.site-header__cta--secondary {
    background: linear-gradient(135deg, var(--hdr-blue) 0%, var(--hdr-blue-deep) 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px -7px rgba(1, 111, 185, 0.6);
}

.site-header__cta--secondary:hover,
.site-header__cta--secondary:focus-visible {
    box-shadow: 0 10px 22px -6px rgba(1, 111, 185, 0.65);
    transform: translateY(-2px);
}

.site-header__cta--whatsapp {
    background-color: var(--hdr-amber);
    color: #ffffff;
    box-shadow: 0 8px 18px -7px rgba(245, 158, 11, 0.55);
}

.site-header__cta--whatsapp:hover,
.site-header__cta--whatsapp:focus-visible {
    background-color: var(--hdr-amber-deep);
    box-shadow: 0 10px 22px -6px rgba(245, 158, 11, 0.6);
    transform: translateY(-2px);
}

.site-header__cta--whatsapp i {
    position: relative;
    z-index: 1;
}

.site-header__cta--whatsapp::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 1.5px solid rgba(245, 158, 11, 0.6);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .site-header__cta--whatsapp::after {
        animation: site-header-cta-pulse 2.6s ease-out infinite;
    }
}

@keyframes site-header-cta-pulse {
    0% { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

/* --- Icon actions (search / download) ---------------------------------- */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

@media (min-width: 1280px) {
    .site-header__actions { gap: 0.6rem; }
}

.site-header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    color: #374151;
    background-color: #f7f9fb;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

@media (min-width: 1280px) {
    .site-header__icon-btn { width: 40px; height: 40px; }
}

.site-header__icon-btn:hover,
.site-header__icon-btn:focus-visible {
    background-color: #eef6fd;
    border-color: rgba(1, 111, 185, 0.18);
    color: var(--hdr-blue);
    transform: translateY(-1px);
}

/* --- Mobile hamburger / burger animation ------------------------------- */
.site-header__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #f3f4f6;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.site-header__mobile-toggle:hover,
.site-header__mobile-toggle:focus-visible {
    background-color: #e5edf5;
}

.site-header__mobile-toggle:active {
    transform: scale(0.94);
}

.site-header__burger {
    position: relative;
    width: 20px;
    height: 14px;
    display: block;
}

.site-header__burger span {
    position: absolute;
    right: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--hdr-blue);
    transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.22s ease, top 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-header__burger span:nth-child(1) { top: 0; }
.site-header__burger span:nth-child(2) { top: 6px; }
.site-header__burger span:nth-child(3) { top: 12px; }

.site-header__mobile-toggle[aria-expanded="true"] .site-header__burger span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}
.site-header__mobile-toggle[aria-expanded="true"] .site-header__burger span:nth-child(2) {
    opacity: 0;
    transform: translateX(6px);
}
.site-header__mobile-toggle[aria-expanded="true"] .site-header__burger span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

/* --- Mobile overlay + drawer -------------------------------------------- */
.site-header__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(8, 15, 28, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1055;
}

/* FIX: .hidden (Tailwind, display:none) and .site-header__mobile-panel
   (this file, display:flex) have EQUAL CSS specificity (one class each).
   header.css loads after the Tailwind stylesheet in <head>, so on a tie
   the later file wins — meaning .site-header__mobile-panel's display:flex
   silently overrode .hidden, and the mobile drawer rendered permanently
   open (flex) on every page load on mobile, on top of all page content,
   regardless of the "hidden" class or any JS. This 2-class selector has
   higher specificity than either single-class rule, so it wins no matter
   which stylesheet loads first or last. */
.site-header__mobile-panel.hidden {
    display: none;
}

.site-header__mobile-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 340px);
    max-width: 340px;
    background-color: #ffffff;
    background-image: repeating-linear-gradient(0deg, rgba(1, 111, 185, 0.03) 0 1px, transparent 1px 24px),
                       repeating-linear-gradient(90deg, rgba(1, 111, 185, 0.03) 0 1px, transparent 1px 24px);
    z-index: 1056;
    box-shadow: 16px 0 45px -14px rgba(15, 23, 42, 0.4);
    border-radius: 0 24px 24px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 100vh;
    max-height: 100dvh;
}

.site-header__mobile-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.1rem 0.9rem;
    background: linear-gradient(135deg, var(--hdr-blue) 0%, var(--hdr-blue-deep) 100%);
    overflow: hidden;
}

.site-header__mobile-head::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.35), transparent 60%);
    pointer-events: none;
}

.site-header__mobile-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    min-width: 0;
}

.site-header__mobile-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.site-header__mobile-brand-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__mobile-close {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 9999px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.site-header__mobile-close:hover,
.site-header__mobile-close:focus-visible {
    background-color: rgba(255, 255, 255, 0.28);
}

.site-header__mobile-close:active {
    transform: scale(0.92);
}

.site-header__mobile-panel-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.9rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
}

.site-header__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.site-header__mobile-link {
    display: block;
    padding: 0.95rem 1rem;
    border-radius: 13px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    color: #1f2937;
    min-height: 44px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.site-header__mobile-link:hover,
.site-header__mobile-link:focus-visible {
    background-color: #f3f7fb;
    color: var(--hdr-blue);
}

.site-header__mobile-link:active { transform: scale(0.985); }

.site-header__mobile-link--icon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.site-header__mobile-link--sub {
    font-weight: 600;
    font-size: 0.87rem;
    color: #4b5563;
    padding-right: 1.65rem;
    position: relative;
}

.site-header__mobile-link--sub::before {
    content: '';
    position: absolute;
    right: 0.55rem;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background-color: #cbd5e1;
    transform: translateY(-50%);
}

.site-header__mobile-accordion {
    border-radius: 13px;
    overflow: hidden;
}

.site-header__mobile-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1rem;
    min-height: 44px;
    border-radius: 13px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2937;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-header__mobile-accordion-toggle::-webkit-details-marker {
    display: none;
}

.site-header__mobile-accordion-toggle:hover,
.site-header__mobile-accordion-toggle:focus-visible {
    background-color: #f3f7fb;
    color: var(--hdr-blue);
}

.site-header__mobile-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    color: #9ca3af;
}

.site-header__mobile-accordion[open] > .site-header__mobile-accordion-toggle .site-header__mobile-chevron {
    transform: rotate(180deg);
    color: var(--hdr-amber);
}

.site-header__mobile-accordion[open] > .site-header__mobile-accordion-toggle {
    color: var(--hdr-blue);
    background-color: #f3f7fb;
}

.site-header__mobile-accordion-panel {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.2rem 0.15rem 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    .site-header__mobile-accordion-panel {
        animation: site-header-accordion-in 0.22s ease both;
    }
}

.site-header__mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding: 0.9rem 0 calc(env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef1f4;
    position: sticky;
    bottom: -1px;
    background-color: #ffffff;
}

.site-header__mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    min-height: 48px;
    border-radius: 14px;
    font-weight: 800;
    color: #ffffff;
    transition: transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.site-header__mobile-cta--secondary {
    background: linear-gradient(135deg, var(--hdr-blue) 0%, var(--hdr-blue-deep) 100%);
    box-shadow: 0 8px 16px -8px rgba(1, 111, 185, 0.55);
}
.site-header__mobile-cta--whatsapp {
    background-color: var(--hdr-amber);
    box-shadow: 0 8px 16px -8px rgba(245, 158, 11, 0.5);
}
.site-header__mobile-cta:active { transform: scale(0.98); }

@keyframes site-header-accordion-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Compact widths ------------------------------------------------------ */
@media (max-width: 1279px) {
    .site-header__inner {
        min-height: 60px;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        gap: 0.75rem;
    }
    .site-header.scrolled .site-header__inner {
        min-height: 52px;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
    .site-header__logo-frame,
    .site-header.scrolled .site-header__logo-frame {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 400px) {
    .site-header__mobile-panel { width: min(88vw, 320px); }
}

/* --- Entrance animations -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .site-header__overlay:not(.hidden) {
        animation: site-header-fade 0.25s ease both;
    }
    .site-header__mobile-panel:not(.hidden) {
        animation: site-header-slide-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@keyframes site-header-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes site-header-slide-in {
    from { transform: translateX(-100%); opacity: 0.4; }
    to { transform: translateX(0); opacity: 1; }
}

html.site-header-scroll-lock,
html.site-header-scroll-lock body {
    overflow: hidden;
}

/* --- Search modal & map modal premium chrome ------------------------------
   These layer on top of the Tailwind utility classes already present in
   the markup (which own the hidden/scale-95/scale-100 state toggling done
   by global.js) — nothing here touches those state classes. --- */
.site-header__modal-card {
    border: 1px solid #eef1f4;
    box-shadow: 0 30px 70px -20px rgba(1, 111, 185, 0.35), 0 10px 24px -10px rgba(15, 23, 42, 0.18);
}

.site-header__modal-header {
    position: relative;
    overflow: hidden;
    /* Fallback values are required here: #map-modal is NOT a descendant of
       .site-header in the markup, so --hdr-blue/--hdr-blue-deep (defined
       only on .site-header) are unset for this element. Without the
       fallbacks the gradient resolves to nothing, the card stays white,
       and the white heading text ("موقعنا على الخريطة") disappears. */
    background: linear-gradient(120deg, var(--hdr-blue, #016fb9) 0%, var(--hdr-blue-deep, #01517f) 100%);
}

.site-header__modal-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 5px, transparent 5px 10px);
    pointer-events: none;
}

.site-header__modal-header::after {
    content: '';
    position: absolute;
    top: -50px;
    left: -30px;
    width: 180px;
    height: 180px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.28), transparent 70%);
    pointer-events: none;
}

.site-header__modal-info-card {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.site-header__modal-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(1, 111, 185, 0.3);
}

/* --- Floating WhatsApp / back-to-top premium touch ------------------------
   #whatsapp-btn is already position:fixed (global.css), which is itself a
   positioned element, so it already anchors the ::before pulse ring below —
   no extra position rule needed (and one here would wrongly override the
   fixed placement inherited from global.css). --- */
#whatsapp-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 2px solid rgba(37, 211, 102, 0.45);
    pointer-events: none;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    #whatsapp-btn::before {
        animation: site-header-cta-pulse 2.4s ease-out 1s infinite;
    }
}

/* --- Focus states ---------------------------------------------------------- */
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--hdr-blue);
    outline-offset: 2px;
    border-radius: 8px;
}

/* --- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header *,
    .site-header__dropdown-menu,
    .site-header__mobile-panel,
    .site-header__overlay,
    #whatsapp-btn::before,
    .site-header__cta--whatsapp::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}