/* ============================================================
   Hawaz LEAP26 booth — theme.css
   Tokens, base, typography, topbar, footer, buttons, motion.
   Layout components live in components.css.
   ============================================================ */

/* Palette + fonts follow the hawaz.sa blueprint (Elementor kit 5):
   pine #234C44, bright green #4BBC67 (hover #2EA34B), ink #181919,
   ground #FDFEFA; Rawasi (AR display) / Readex Pro (EN) / Majalla (AR body).
   Token NAMES are kept from v0 so component CSS is untouched:
   --orange now carries the bright-green accent; --amber is the warning hue. */
:root {
  --green:#234C44; --green-700:#182f2b; --orange:#4BBC67; --orange-600:#2EA34B;
  --innovation:#41E661; --amber:#E8A33D; --cream:#FDFEFA; --ink:#181919; --ink-soft:#3b4741;
  --line:#e2e8e4; --panel:#ffffff;
  --shadow:0 1px 2px rgba(24,25,25,.05), 0 8px 28px rgba(35,76,68,.08);
  --radius:16px;
  --radius-sm:12px;
  --font:"Readex Pro", system-ui, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --font-display-ar:"Rawasi", "Readex Pro", "Noto Sans Arabic", sans-serif;
  --font-body-ar:"Majalla", "Readex Pro", "Noto Sans Arabic", sans-serif;
  --wrap:1080px;
  --gap:1.25rem;
}

/* ---------- brand fonts (self-hosted, lifted from hawaz.sa) ---------- */
@font-face {
  font-family:"Rawasi";
  src:url("/assets/fonts/rawasi-medium.otf") format("opentype");
  font-weight:400 700;
  font-display:swap;
}
@font-face {
  font-family:"Majalla";
  src:url("/assets/fonts/majalla.ttf") format("truetype");
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Majalla";
  src:url("/assets/fonts/majalla-bold.ttf") format("truetype");
  font-weight:700;
  font-display:swap;
}

/* Arabic follows the hawaz.sa split: Rawasi display, Majalla running text
   (Majalla renders small, hence the size bump). English stays Readex Pro. */
html[lang="ar"] body { font-family:var(--font-body-ar); font-size:1.1875rem; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .btn, html[lang="ar"] button, html[lang="ar"] nav {
  font-family:var(--font-display-ar);
}
html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea {
  font-family:var(--font-body-ar);
}

/* ---------- reset-lite ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main { flex:1; }
img, svg { max-width:100%; display:block; }
h1,h2,h3,h4,p { margin:0; overflow-wrap:break-word; }
h1,h2,h3,h4 { line-height:1.35; font-weight:600; color:var(--green); }
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:.2em; }
button { font:inherit; color:inherit; }
input, select, textarea { font:inherit; color:inherit; }
::selection { background:var(--green); color:var(--cream); }

:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- a11y skip link ---------- */
.skip-link {
  position:absolute;
  inset-block-start:-3rem;
  inset-inline-start:1rem;
  background:var(--green);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  z-index:60;
  transition:inset-block-start .15s ease;
}
.skip-link:focus { inset-block-start:0; }

/* ---------- layout helpers ---------- */
.wrap {
  width:min(var(--wrap), 100% - 2.5rem);
  margin-inline:auto;
}
.section { padding-block:3.5rem; }
@media (min-width:760px) { .section { padding-block:5rem; } }

/* ---------- topbar ---------- */
.topbar {
  position:sticky;
  inset-block-start:0;
  z-index:50;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-block-end:1px solid var(--line);
}
.topbar-inner {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding-block:.65rem;
}
.brand {
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-shrink:0;
}
.brand:hover { text-decoration:none; }
.brand-logo { height:40px; width:auto; display:block; }
.sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.nav-toggle {
  display:none;
  flex-shrink:0;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--green);
  cursor:pointer;
  place-items:center;
}
.nav-toggle svg { width:20px; height:20px; }
.topnav {
  display:flex;
  align-items:center;
  gap:.15rem;
  margin-inline-start:auto;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.topnav::-webkit-scrollbar { display:none; }
.topnav a {
  white-space:nowrap;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink-soft);
  padding:.4rem .6rem;
  border-radius:999px;
}
.topnav a:hover { color:var(--green); text-decoration:none; background:rgba(0,81,67,.06); }
.topnav a[aria-current="page"] { color:var(--green); background:rgba(0,81,67,.08); }

/* Mobile: the pill row can't fit — collapse it behind a hamburger dropdown. */
@media (max-width:759px) {
  .nav-toggle { display:grid; margin-inline-start:auto; }
  .topnav {
    display:none;
    position:absolute;
    inset-inline:0;
    inset-block-start:100%;
    margin-inline-start:0;
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    overflow:visible;
    background:var(--panel);
    border-block-end:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:.6rem .9rem 1rem;
  }
  .topbar.nav-open .topnav { display:flex; }
  .topnav a { font-size:1rem; padding:.75rem .9rem; border-radius:10px; }
}
.lang-toggle {
  flex-shrink:0;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--green);
  font-weight:600;
  font-size:.8rem;
  padding:.35rem .8rem;
  border-radius:999px;
  cursor:pointer;
  min-width:3.4rem;
  box-shadow:var(--shadow);
}
.lang-toggle:hover { border-color:var(--green); }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:.7rem 1.4rem;
  font-weight:600;
  font-size:.95rem;
  line-height:1.3;
  cursor:pointer;
  text-align:center;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--green); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover { background:var(--green-700); }
.btn-accent { background:var(--orange); color:#fff; box-shadow:var(--shadow); }
.btn-accent:hover { background:var(--orange-600); }
.btn-ghost { background:transparent; color:var(--green); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--green); background:rgba(0,81,67,.05); }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }
.btn-block { inline-size:100%; }

/* ---------- kicker / section headings ---------- */
.kicker {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--orange-600);
  text-transform:uppercase;
}
.kicker::before {
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--innovation);
}
.section-head { max-width:38rem; margin-block-end:2rem; }
.section-head h2 { font-size:clamp(1.55rem, 3.8vw, 2.1rem); margin-block-start:.4rem; }
.section-head p { color:var(--ink-soft); margin-block-start:.5rem; font-size:1.05rem; }

/* ---------- footer ---------- */
.footer {
  border-block-start:1px solid var(--line);
  background:var(--panel);
  margin-block-start:3rem;
}
.footer-inner {
  padding-block:2rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.footer-brand { font-weight:700; color:var(--green); }
.footer p { font-size:.85rem; color:var(--ink-soft); }
.footer-meta { display:flex; flex-wrap:wrap; gap:.3rem 1rem; }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-in { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .btn, .btn:hover { transition:none; transform:none; }
  html { scroll-behavior:auto; }
}

/* ---------- misc utilities ---------- */
.hidden { display:none !important; }
.dot-live {
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--innovation);
  margin-inline-end:.4rem;
}
.muted { color:var(--ink-soft); }
.center { text-align:center; }