/* ==========================================================================
   Al Masa -- site header
   Three tiers, top to bottom:
     1. .am-topbar   utility menu: email, WhatsApp, location, language, light/dark
     2. .am-brandbar logo with room to breathe, call card and the quote button
     3. .am-mainnav  the main menu (sticky). Carries the "flare" line that
                     separates the header from the page hero.
   Plain CSS (no Tailwind build needed). Logical properties throughout, so the
   Arabic (RTL) layout mirrors itself. Colours come from the tokens in
   almasa-ui.css; dark mode is `html.dark`.
   ========================================================================== */

:root {
    --hd-bg: #fffdf8;
    --hd-nav-bg: rgba(255, 255, 255, 0.94);
    --hd-text: #0B1556;
    --hd-muted: #475569;
    --hd-line: rgba(183, 142, 59, 0.45);
    --hd-panel: #ffffff;
    --hd-hover: rgba(183, 142, 59, 0.1);
    --hd-accent: #7A5A1A;                  /* gold that stays readable (>= 4.5:1) on the white bar */
    --hd-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}
html.dark {
    --hd-bg: #F8F2E6;                      /* the logo bar stays cream so the logo reads clearly */
    --hd-nav-bg: rgba(8, 13, 48, 0.94);
    --hd-text: #F8F2E6;
    --hd-muted: rgba(248, 242, 230, 0.78);
    --hd-line: rgba(217, 178, 90, 0.4);
    --hd-panel: #0F1857;
    --hd-hover: rgba(217, 178, 90, 0.14);
    --hd-accent: #D9B25A;
}

/* `overflow-x: hidden` on html/body turns body into a scroll container and breaks position: sticky.
   `clip` stops sideways scrolling the same way without creating one. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }

.am-hd a { text-decoration: none; }
.am-hd ul { list-style: none; margin: 0; padding: 0; }

/* ---------- 1. top bar ---------- */
.am-topbar {
    position: relative;
    z-index: 52;
    background: linear-gradient(90deg, #050b33, #0B1556 55%, #050b33);
    color: rgba(248, 242, 230, 0.92);
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(217, 178, 90, 0.35);
    animation: am-hd-fade 0.6s var(--hd-ease) both;
}
.am-topbar__inner {
    max-width: 90rem; margin-inline: auto; min-height: 2.75rem;
    padding: 0.35rem clamp(1rem, 3.5vw, 3rem);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.am-topbar__group { display: flex; align-items: center; gap: 0.35rem 1.5rem; flex-wrap: wrap; }
.am-topbar__link {
    display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; font-weight: 500;
    padding: 0.25rem 0; position: relative; transition: color 0.25s ease;
}
.am-topbar__link i { color: var(--am-gold-light); transition: transform 0.3s var(--hd-ease); }
.am-topbar__link:hover { color: var(--am-gold-light); }
.am-topbar__link:hover i { transform: scale(1.2) rotate(-6deg); }
.am-topbar__link::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--am-gold-light);
    transform: scaleX(0); transform-origin: var(--hd-origin, left); transition: transform 0.3s var(--hd-ease);
}
html[dir="rtl"] .am-topbar__link::after { --hd-origin: right; }
.am-topbar__link:hover::after { transform: scaleX(1); }
.am-topbar__sep { width: 1px; height: 1.1rem; background: rgba(248, 242, 230, 0.25); }
.am-topbar__place { display: inline-flex; align-items: center; gap: 0.5rem; }
.am-topbar__place i { color: var(--am-gold-light); }

.am-pill {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0.25rem 0.9rem;
    border-radius: 999px; border: 1px solid rgba(217, 178, 90, 0.55); color: #fff; font-weight: 700;
    background: rgba(255, 255, 255, 0.06); cursor: pointer; transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.am-pill:hover { background: var(--am-gold); color: #fff; transform: translateY(-1px); }
.am-pill:focus-visible { outline: 3px solid var(--am-gold-light); outline-offset: 2px; }
.am-pill--icon { width: 2rem; padding: 0; justify-content: center; }

/* ---------- 2. brand bar ---------- */
.am-brandbar {
    --hd-text: #0B1556; --hd-muted: #475569;
    position: relative; z-index: 51;
    background: linear-gradient(180deg, var(--hd-bg), var(--hd-bg));
    border-bottom: 1px solid rgba(183, 142, 59, 0.2);
    animation: am-hd-drop 0.7s var(--hd-ease) 0.05s both;
}
.am-brandbar__inner {
    max-width: 90rem; margin-inline: auto; padding: 0.9rem clamp(1rem, 3.5vw, 3rem);
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.am-logo { display: inline-flex; align-items: center; border-radius: 0.75rem; transition: transform 0.4s var(--hd-ease), filter 0.4s ease; }
.am-logo img { height: 5rem; width: auto; display: block; }
.am-logo:hover { transform: scale(1.03); filter: drop-shadow(0 8px 14px rgba(11, 21, 86, 0.2)); }
.am-logo:focus-visible { outline: 3px solid var(--am-gold); outline-offset: 4px; }

.am-brandbar__actions { display: flex; align-items: center; gap: 1.25rem; }
.am-callcard { display: flex; align-items: center; gap: 0.8rem; color: var(--hd-text); }
.am-callcard__icon {
    width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--am-gold), var(--am-gold-deep)); position: relative; flex: none;
}
.am-callcard__icon::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--am-gold);
    opacity: 0; animation: am-hd-ring 2.8s ease-out infinite;
}
.am-callcard small { display: block; font-size: 0.8125rem; color: var(--hd-muted); line-height: 1.2; }
.am-callcard strong { display: block; font-size: 1.1rem; line-height: 1.3; direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .am-callcard strong { text-align: right; }
.am-callcard:hover .am-callcard__icon { transform: rotate(-10deg) scale(1.06); }
.am-callcard__icon { transition: transform 0.3s var(--hd-ease); }

.am-quote {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem;
    padding: 0.7rem 1.6rem; border-radius: 0.7rem; background: var(--am-navy); color: #fff; font-weight: 700;
    font-size: 0.95rem; border: 1px solid var(--am-gold); transition: transform 0.25s var(--hd-ease), background-color 0.25s;
}
.am-quote::before {
    content: ''; position: absolute; inset-block: 0; width: 40%; inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg);
}
.am-quote:hover { background: var(--am-gold); transform: translateY(-2px); }
.am-quote:hover::before { animation: am-hd-shine 0.8s ease; }
.am-quote:focus-visible { outline: 3px solid var(--am-gold-light); outline-offset: 3px; }
/* on the dark main bar the quote button is gold with navy text */
html.dark .am-mainnav .am-quote { background: var(--am-gold-light); color: var(--am-navy); border-color: var(--am-gold-light); }
html.dark .am-mainnav .am-quote:hover { background: #F6DE9A; }

/* the blue M and wordmark need a cream backdrop on the dark bar and in the dark drawer */
html.dark .am-mainnav__mark img, html.dark .am-mainnav__brand img, html.dark .am-drawer__head img {
    background: #F8F2E6; border-radius: 0.55rem; padding: 0.22rem 0.4rem; box-sizing: content-box;
}

/* ---------- 3. main menu ---------- */
.am-mainnav {
    position: sticky; top: 0; z-index: 50;
    background: var(--hd-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hd-line);
    transition: box-shadow 0.35s ease, background-color 0.35s ease;
    animation: am-hd-drop 0.7s var(--hd-ease) 0.12s both;
}
.am-mainnav.is-stuck { box-shadow: 0 14px 30px -18px rgba(3, 17, 105, 0.55); }
.am-mainnav__inner {
    max-width: 90rem; margin-inline: auto; padding-inline: clamp(1rem, 3.5vw, 3rem);
    min-height: 3.75rem; display: flex; align-items: center; justify-content: center; gap: 1rem;
    transition: min-height 0.3s var(--hd-ease);
}
.am-mainnav.is-stuck .am-mainnav__inner { min-height: 3.5rem; }

.am-mainnav__mark {
    display: inline-flex; align-items: center; overflow: hidden; max-width: 0; opacity: 0;
    transition: max-width 0.45s var(--hd-ease), opacity 0.35s ease, margin 0.35s ease;
}
.am-mainnav__mark img { height: 2.6rem; width: auto; display: block; flex: none; }
.am-mainnav.is-stuck .am-mainnav__mark { max-width: 4rem; opacity: 1; margin-inline-end: 0.75rem; }

.am-menu { display: none; align-items: stretch; gap: clamp(0.1rem, 0.8vw, 0.6rem); }
.am-menu__item { position: static; display: flex; }
.am-menu__item--dd { position: relative; }
.am-menu__item--mega { position: static; }
.am-menu__link {
    position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 1.15rem 0.85rem;
    color: var(--hd-text); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    background: none; border: 0; cursor: pointer; transition: color 0.25s ease;
}
html[lang="ar"] .am-menu__link { letter-spacing: 0; text-transform: none; font-size: 0.975rem; }
.am-menu__link::after {
    content: ''; position: absolute; inset-inline: 0.85rem; bottom: 0.65rem; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--am-gold), var(--am-gold-light)); transform: scaleX(0); transform-origin: center;
    transition: transform 0.35s var(--hd-ease);
}
.am-menu__link:hover, .am-menu__item.is-open > .am-menu__link, .am-menu__link[aria-current="page"] { color: var(--hd-accent); }
.am-menu__link:hover::after, .am-menu__item.is-open > .am-menu__link::after, .am-menu__link[aria-current="page"]::after { transform: scaleX(1); }
.am-menu__link:focus-visible { outline: 3px solid var(--am-gold); outline-offset: -3px; border-radius: 0.5rem; }
.am-menu__chev { font-size: 0.7rem; color: var(--am-gold); transition: transform 0.35s var(--hd-ease); }
.am-menu__item.is-open > .am-menu__link .am-menu__chev { transform: rotate(180deg); }

/* dropdown + mega panels */
.am-panel {
    position: absolute; top: 100%; inset-inline-start: 0; min-width: 16rem; z-index: 60;
    background: var(--hd-panel); border: 1px solid var(--hd-line); border-top: 3px solid var(--am-gold);
    border-radius: 0 0 0.9rem 0.9rem; box-shadow: 0 28px 50px -20px rgba(3, 17, 105, 0.45);
    padding: 0.6rem; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transform-origin: top;
    transition: opacity 0.28s ease, transform 0.35s var(--hd-ease), visibility 0s linear 0.28s;
}
.am-menu__item.is-open > .am-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) {
    .am-menu__item:hover > .am-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .am-menu__item:hover > .am-menu__link { color: var(--hd-accent); }
    .am-menu__item:hover > .am-menu__link::after { transform: scaleX(1); }
    .am-menu__item:hover > .am-menu__link .am-menu__chev { transform: rotate(180deg); }
}
.am-panel__link {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border-radius: 0.6rem;
    color: var(--hd-text); font-size: 0.95rem; font-weight: 600; opacity: 0; transform: translateY(8px);
    transition: background-color 0.2s, color 0.2s, padding 0.25s var(--hd-ease), opacity 0.3s ease, transform 0.35s var(--hd-ease);
    transition-delay: 0s, 0s, 0s, calc(var(--i, 0) * 28ms + 60ms), calc(var(--i, 0) * 28ms + 60ms);
}
.am-panel__link i { width: 1.1rem; text-align: center; color: var(--am-gold); font-size: 0.85rem; }
.am-menu__item.is-open .am-panel__link, .am-menu__item:hover .am-panel__link { opacity: 1; transform: none; }
.am-panel__link:hover { background: var(--hd-hover); color: var(--hd-accent); padding-inline-start: 1.2rem; transition-delay: 0s; }
.am-panel__link:focus-visible { outline: 3px solid var(--am-gold); outline-offset: -3px; }

.am-panel--mega {
    inset-inline: 0; width: min(88rem, calc(100vw - 2rem)); margin-inline: auto; padding: 1.8rem 2rem 2rem;
    inset-inline-start: 50%; inset-inline-end: auto; translate: -50% 0; border-radius: 0 0 1.1rem 1.1rem;
}
html[dir="rtl"] .am-panel--mega { translate: 50% 0; }
.am-mega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2rem; }
@media (min-width: 1280px) { .am-mega { grid-template-columns: repeat(6, 1fr); } }
.am-mega__title {
    display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--hd-line);
    font-size: 0.9rem; font-weight: 800; color: var(--am-gold); text-transform: uppercase; letter-spacing: 0.05em;
}
html[lang="ar"] .am-mega__title { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.am-mega .am-panel__link { padding: 0.45rem 0.5rem; font-size: 0.9rem; font-weight: 500; }

/* ---------- the flare on the line between header and hero ---------- */
.am-flare { position: absolute; inset-inline: 0; bottom: -2px; height: 3px; pointer-events: none; clip-path: inset(-26px 0 -26px 0); direction: ltr; }
.am-flare::before {
    content: ''; position: absolute; inset-block: 0; width: 22%; left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 205, 0.95) 45%, rgba(217, 178, 90, 1) 60%, transparent);
    box-shadow: 0 0 18px 5px rgba(217, 178, 90, 0.55), 0 8px 26px 6px rgba(217, 178, 90, 0.18);
    transform: translateX(-110%); animation: am-flare 7.5s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite;
}
.am-flare::after {
    content: ''; position: absolute; inset-block: -7px; left: 0; width: 22%;
    background: radial-gradient(circle at 58% 50%, #fff8dc 0, rgba(255, 236, 170, 0.95) 2px, rgba(217, 178, 90, 0.4) 8px, transparent 18px);
    transform: translateX(-110%); animation: am-flare 7.5s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite;
}

/* ---------- mobile bar + drawer ---------- */
.am-mainnav__mobile { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.75rem; }
.am-mainnav__mobile .am-mainnav__brand img { height: 2.9rem; width: auto; display: block; }
.am-burger {
    width: 2.9rem; height: 2.9rem; border-radius: 0.7rem; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--hd-line); background: transparent; color: var(--hd-text); font-size: 1.1rem; transition: background-color 0.25s;
}
.am-burger:hover { background: var(--hd-hover); }
.am-burger:focus-visible { outline: 3px solid var(--am-gold); outline-offset: 2px; }
.am-mainnav__mobile .am-quote { min-height: 2.9rem; padding: 0.5rem 1rem; font-size: 0.875rem; }

.am-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(3, 17, 105, 0.45); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.am-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.am-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 80; width: min(23rem, 90vw); overflow-y: auto;
    background: var(--hd-panel); color: var(--hd-text); padding: 1.1rem 1.25rem 2rem; box-shadow: -20px 0 50px -20px rgba(3, 17, 105, 0.5);
    transform: translateX(105%); visibility: hidden; transition: transform 0.45s var(--hd-ease), visibility 0s linear 0.45s;
}
html[dir="rtl"] .am-drawer { transform: translateX(-105%); box-shadow: 20px 0 50px -20px rgba(3, 17, 105, 0.5); }
.am-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.am-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--hd-line); margin-bottom: 0.5rem; }
.am-drawer__head img { height: 3.4rem; width: auto; background: #fff; border-radius: 0.5rem; padding: 0.2rem 0.5rem; }
.am-drawer a, .am-drawer button.am-drawer__row { color: var(--hd-text); }
.am-drawer__row {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0.25rem;
    background: none; border: 0; border-bottom: 1px solid rgba(183, 142, 59, 0.2); font-size: 1rem; font-weight: 700; cursor: pointer; text-align: start;
}
.am-drawer__row:hover { color: var(--am-gold); }
.am-drawer__sub { display: none; padding: 0.4rem 0 0.8rem; }
.am-drawer__sub.is-open { display: block; animation: am-hd-fade 0.35s var(--hd-ease) both; }
.am-drawer__sub a { display: block; padding: 0.55rem 0.9rem; font-size: 0.975rem; font-weight: 500; border-radius: 0.5rem; }
.am-drawer__sub a:hover { background: var(--hd-hover); color: var(--am-gold); }
.am-drawer__sub b { display: block; margin: 0.6rem 0.9rem 0.2rem; font-size: 0.8125rem; color: var(--am-gold); text-transform: uppercase; letter-spacing: 0.06em; }
.am-drawer__contact { margin-top: 1.4rem; display: grid; gap: 0.9rem; font-weight: 600; }
.am-drawer__contact a { display: flex; align-items: center; gap: 0.7rem; }
.am-drawer__contact i { color: var(--am-gold); }

/* ---------- breakpoints ---------- */
@media (min-width: 1024px) {
    .am-menu { display: flex; }
    .am-mainnav__mobile { display: none; }
}
.am-topbar__mobile-only { display: none; }
@media (max-width: 1023.98px) {
    .am-topbar__mobile-only { display: inline-flex; }
    .am-mainnav__mark { display: none; }
    .am-brandbar { display: none; }
    .am-topbar__place, .am-topbar__sep--place { display: none; }
    .am-topbar__inner { padding-block: 0.25rem; }
    .am-topbar__hide-sm { display: none; }
}
@media (max-width: 640px) {
    .am-topbar { font-size: 0.8125rem; }
    .am-topbar__group { gap: 0.25rem 0.9rem; flex-wrap: nowrap; }
    .am-topbar__inner { gap: 0.5rem; padding-inline: 0.75rem; }
    .am-topbar__label-sm { display: none; }
    .am-pill { padding-inline: 0.7rem; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .am-menu__link { padding-inline: 0.55rem; font-size: 0.8125rem; }
    .am-callcard small { display: none; }
}

/* ---------- motion ---------- */
@keyframes am-hd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-hd-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes am-hd-ring { 0% { opacity: 0.6; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes am-hd-shine { to { inset-inline-start: 130%; } }
@keyframes am-flare { 0% { transform: translateX(-110%); } 70%, 100% { transform: translateX(560%); } }

@media (prefers-reduced-motion: reduce) {
    .am-topbar, .am-brandbar, .am-mainnav, .am-drawer__sub.is-open { animation: none; }
    .am-flare::before, .am-flare::after, .am-callcard__icon::after { animation: none; }
    .am-flare::before { transform: translateX(150%); }
    .am-flare::after { transform: translateX(150%); }
    .am-panel, .am-panel__link, .am-drawer, .am-overlay, .am-menu__link::after, .am-mainnav__mark { transition-duration: 0.01ms; transition-delay: 0s; }
    .am-panel__link { opacity: 1; transform: none; }
}