/* ============================================================================
 * header.css — sticky site header, primary nav, mobile drawer.
 * Markup is generated by assets/js/components/header.js.
 * ==========================================================================*/

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  transition: box-shadow .25s var(--ease), background-color .28s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- top strip */
.topbar {
  display: none;
  background: var(--navy);
  color: var(--text-on-dark-muted);
  font-size: .82rem;
}
:root[data-theme="dark"] .topbar { background: var(--bg-deep); }

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 38px;
}
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item .ico { width: 15px; height: 15px; color: var(--accent); }
.topbar__item strong { color: #fff; font-weight: 700; }
.topbar__sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .18);
}
.topbar__spacer { flex: 1; }
.topbar__link { color: var(--text-on-dark-muted); }
.topbar__link:hover { color: #fff; }
.topbar__link .is-pending { text-decoration-color: var(--accent); }

@media (min-width: 920px) { .topbar { display: block; } }

/* -------------------------------------------------------------- main strip */
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--header-h);
  padding-block: 10px;
}

/* ------------------------------------------------------------------- logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: var(--text);
}
.logo:hover { color: var(--text); }
/* The mark is a shield, not a square tile, so it carries no radius or box
   shadow of its own - either would draw a rectangle around transparency. */
.logo__mark {
  width: 42px; height: 42px;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(22, 35, 46, .18));
}
:root[data-theme="dark"] .logo__mark {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.logo__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo__name {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -.015em;
  white-space: nowrap;
}
:root.is-ar .logo__name { letter-spacing: 0; font-size: 1.08rem; }
.logo__sub {
  font-size: .72rem;
  color: var(--text-faint);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  /* The tagline in config.js is short enough to fit; the clip is a backstop
     for a longer one, not the normal case. */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}
:root.is-ar .logo__sub { font-size: .76rem; }

/* Under 430px the tagline crowds the action buttons out of the bar. The Latin
   brand name is noticeably wider than the Arabic, so the logo and the gutter
   both step down here - hiding the tagline alone left English 4px over. */
@media (max-width: 430px) {
  .logo__sub { display: none; }
  .logo__name { font-size: .9rem; }
  .logo__mark { width: 34px; height: 34px; }
  .logo { gap: 9px; }
  .header__inner { gap: 10px; }
}
@media (max-width: 380px) {
  .logo__name { font-size: .84rem; }
  .logo__mark { width: 31px; height: 31px; }
}

/* ------------------------------------------------------------------- nav */
.nav { display: none; margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }

.nav__link {
  position: relative;
  display: block;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface-3); }
.nav__link.is-active { color: var(--brand); font-weight: 700; }
.nav__link.is-active::after {
  content: '';
  position: absolute;
  inset-block-end: 1px;
  inset-inline-start: 13px;
  inset-inline-end: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* --------------------------------------------------------------- actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.nav + .header__actions { margin-inline-start: 0; }

.header__wa, .header__cta { display: none; }

/* -------------------------------------------------------------- breakpoints
 * The full nav needs ~700px of its own; below that everything collapses into
 * the drawer. The CTA and WhatsApp buttons appear as soon as there is room.
 * ------------------------------------------------------------------------ */
@media (min-width: 560px) {
  .header__cta { display: inline-flex; }
}
@media (min-width: 700px) {
  .header__wa { display: inline-flex; }
}
@media (min-width: 1080px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .header__inner { gap: var(--gap-md); }
}
@media (max-width: 1079px) {
  .nav { display: none; }
}
/* Seven nav items plus four action controls do not fit a 1200px container at
   full size. Below 1400px the WhatsApp button drops to an icon, and below
   1280px the nav tightens further, rather than overflowing the container. */
@media (max-width: 1400px) {
  .header__wa .ico + span { display: none; }
  .header__wa { padding-inline: 12px; }
}
@media (min-width: 1080px) and (max-width: 1280px) {
  .nav__link { padding-inline: 8px; font-size: .84rem; }
  .iconbtn { padding-inline: 10px; }
  .header__actions { gap: 6px; }
}
/* At 390px the full word ("English" / "العربية") pushes the action cluster
   past the container edge, so the toggle falls back to a two-character label. */
.iconbtn__label--short { display: none; }
@media (max-width: 460px) {
  .iconbtn__label { display: none; }
  .iconbtn__label--short { display: inline; }
  .header__actions { gap: 6px; }
}

/* Nothing in the bar may push past the container edge. */
.header__inner { max-width: 100%; }
.header__actions { flex: none; }
.nav { min-width: 0; }
.nav__list { flex-wrap: nowrap; }

/* ============================================================ mobile drawer
 * Fills everything below the header instead of stopping partway down the
 * page, so it reads as a deliberate panel rather than a dropdown that ran out
 * of room. --header-real is measured and published by header.js.
 * ========================================================================= */
.mobilenav {
  border-block-start: 1px solid var(--border);
  background: var(--bg);
  height: calc(100dvh - var(--header-real, 68px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* A soft brand wash at the top of the panel, fading out — enough to lift it
   off flat white without competing with the content. */
.mnav {
  min-height: 100%;
  background:
    radial-gradient(120% 40% at 50% 0%,
      color-mix(in srgb, var(--brand) 9%, transparent) 0%, transparent 70%);
}
.mnav__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 14px 18px;
}

/* --------------------------------------------------------------- nav rows */
.mnav__list { display: grid; gap: 2px; }

.mnav__link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: var(--r);
  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.mnav__link:hover,
.mnav__link:active { background: var(--surface-3); color: var(--text); }

.mnav__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-muted);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.mnav__icon .ico { width: 19px; height: 19px; }

.mnav__label { flex: 1; min-width: 0; }

.mnav__chev {
  width: 17px; height: 17px;
  flex: none;
  color: var(--text-faint);
  opacity: .8;
}

/* Current page: amber marker, tinted row, coloured icon tile. */
.mnav__link.is-active {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--brand);
}
.mnav__link.is-active .mnav__icon { background: var(--brand); color: #fff; }
.mnav__link.is-active .mnav__chev { color: var(--brand); opacity: 1; }

/* --------------------------------------------------------------- actions */
.mnav__actions {
  display: grid;
  gap: 9px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--border);
  margin-block-start: auto;   /* pins the CTA block to the lower half */
}
.mnav__actionRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mnav__actionRow .btn { padding-inline: 12px; }

/* ----------------------------------------------------------- credentials */
.mnav__creds {
  display: grid;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.mnav__cred {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.mnav__cred > .ico {
  width: 18px; height: 18px;
  flex: none;
  margin-block-start: 2px;
  color: var(--amber-deep);
}
:root[data-theme="dark"] .mnav__cred > .ico { color: var(--accent); }
.mnav__credLabel {
  display: block;
  font-size: .76rem;
  color: var(--text-faint);
  line-height: 1.4;
}
.mnav__credValue {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
}
.mnav__credValue--sm { font-size: .85rem; font-weight: 600; color: var(--text-muted); }

/* ------------------------------------------------------------- animation
 * Rows fade up in sequence as the panel opens. Honours reduced motion via the
 * global override in base.css, which collapses the durations to nothing.
 * ----------------------------------------------------------------------- */
.mnav__list li,
.mnav__actions,
.mnav__creds {
  opacity: 0;
  transform: translateY(10px);
  animation: mnavIn .38s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 35ms + 40ms);
}
@keyframes mnavIn {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav__list li,
  .mnav__actions,
  .mnav__creds { opacity: 1; transform: none; animation: none; }
}

@media (min-width: 1080px) { .mobilenav { display: none !important; } }