/* Page chrome: header, nav, footer, containers, sections.
   Logical properties throughout, so the Arabic RTL tree mirrors for free. */

.container {
  inline-size: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  /* Fallback first, then the nicer blend where supported. */
  background: var(--panel);
  border-block-end: 1px solid var(--line);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  min-block-size: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 800;
  color: var(--fg);
  text-decoration: none;
  flex-shrink: 0;
  font-size: 0.98rem;
}

.brand__mark {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--lime), var(--mint));
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
}

.brand__name { white-space: nowrap; }

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-inline-start: auto;
}

/* ---------- mobile tab bar (hidden on desktop) ---------- */

/* On phones this is the whole navigation: every section, one tap away, in an
   app-style bottom bar. Seven across is tight, which is what the sizing below
   is negotiating — and why `navShort` exists in the copy. */
.mobile-tabs {
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 48;
  border-block-start: 1px solid var(--line);
  background: var(--panel);
  padding-block-end: env(safe-area-inset-bottom, 0);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-tabs {
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.mobile-tabs a {
  flex: 1 1 0;
  /* flex items refuse to shrink below their content without this, which is
     what pushes a seven-item bar wider than the screen. */
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-block: var(--space-2) var(--space-3);
  padding-inline: 2px;
  min-block-size: 56px;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--faint);
  text-decoration: none;
}

/* One line per label, always. A wrapped label would make its tab taller than
   its neighbours and break the row. */
.mobile-tabs a span {
  inline-size: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* each tab is a node on the pipeline */
.mobile-tabs a::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-tabs a[aria-current='page'] {
  color: var(--lime);
}

.mobile-tabs a[aria-current='page']::before {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 8px color-mix(in srgb, var(--lime) 55%, transparent);
}

.site-nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav a:hover { color: var(--fg); background: var(--raised); }

.site-nav a[aria-current='page'] {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--lime), var(--mint));
}

.header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.theme-toggle,
.lang-switch {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-block-size: 38px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle { min-inline-size: 42px; justify-content: center; }

.theme-toggle:hover,
.lang-switch:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- sections ---------- */

.section {
  padding-block: var(--section-pad);
  position: relative;
}

.section + .section { border-block-start: 1px solid var(--line); }

.section__head { margin-block-end: var(--space-6); }

/* Section headings carry the site's motif in miniature: node — edge — node.
   The same picture the hero canvas animates, reduced to an underline. */
.section__head h2 {
  position: relative;
  padding-block-end: var(--space-4);
}

.section__head h2::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 76px;
  block-size: 8px;
  background:
    radial-gradient(circle at 4px 50%, var(--lime) 0 2.6px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 4px) 50%, var(--mint) 0 2.6px, transparent 3.6px),
    linear-gradient(90deg, var(--lime), var(--mint)) 50% 50% / calc(100% - 16px) 2px no-repeat;
}

.section__eyebrow,
.hero__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  margin-block-end: var(--space-3);
}

:lang(ar) .section__eyebrow,
:lang(ar) .hero__eyebrow { letter-spacing: 0; text-transform: none; }

.section__lead {
  color: var(--dim);
  max-inline-size: var(--measure);
  margin-block-start: var(--space-3);
  font-size: 1.05rem;
}

.prose {
  max-inline-size: var(--measure);
  display: grid;
  gap: var(--space-4);
  color: var(--dim);
}

.prose > p { font-size: 1.05rem; }

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(3rem, 2rem + 8vw, 7rem) var(--section-pad);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* token-driven so the glow adapts to light and dark alike */
  background:
    radial-gradient(62vw 44vh at 82% -12%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 62%),
    radial-gradient(48vw 38vh at 4% 112%, color-mix(in srgb, var(--mint) 11%, transparent), transparent 62%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero h1 {
  margin-block-end: var(--space-4);
  background: linear-gradient(120deg, var(--fg) 30%, var(--mint) 75%, var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* If background-clip:text is unsupported, keep readable text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { color: var(--fg); background: none; }
}

/* Arabic descends further than the line box allows: the ي in طفي drops a swash
   and two dots below it. Because the heading is painted with background-clip,
   the glyph *is* the gradient, and a gradient paints nothing outside the
   element's box — so those dots were being sliced flat. Padding is the fix, not
   margin: only padding grows the box the gradient is allowed to fill. */
:lang(ar) .hero h1 {
  padding-block-end: 0.22em;
}

.hero__headline {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: 600;
  color: var(--fg);
  max-inline-size: 44ch;
  margin-block-end: var(--space-4);
}

.hero__intro {
  color: var(--dim);
  max-inline-size: var(--measure);
  margin-block-end: var(--space-6);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- grids ---------- */

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  padding-block: var(--space-7);
  margin-block-start: var(--space-8);
  color: var(--faint);
  font-size: 0.9rem;
}

/* The footer's top edge is a fading pipeline rather than a flat border. */
.site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--mint) 35%, var(--lime) 65%, transparent);
  opacity: 0.35;
}

.site-footer__inner {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer a { color: var(--dim); }

.footer__links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

/* =====================================================================
   Responsive
   ===================================================================== */

/* Tablet — tighten the nav before it wraps. */
@media (max-width: 1040px) {
  .site-nav a { padding-inline: var(--space-2); font-size: 0.86rem; }
  .brand__name { display: none; }
}

/* Phone — the tab bar is the entire navigation.
   The boundary is 767px, not 860px, so tablet portrait (768–860) keeps the
   inline nav and never sees the bottom tab bar. Everything a tablet needs it
   inherits from the 1040px block above: tightened nav padding and a hidden
   brand name.

   There was a drawer here once, opened by a hamburger. It listed the same seven
   links the tab bar now carries, so it was deleted rather than repaired — with
   no overlay there is no dismiss-on-outside-tap to get wrong, no focus trap, no
   scroll lock, and nothing that can be left stuck open. It also means phone
   navigation is plain links again, working with scripts disabled. */
@media (max-width: 767px) {
  .brand__name { display: inline; }
  .mobile-tabs { display: flex; }

  /* The header nav would only repeat the tab bar. */
  .site-nav { display: none; }

  /* leave room for the tab bar */
  body { padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { margin-block-end: 0; }
}

@media (max-width: 520px) {
  .site-footer__inner { flex-direction: column; gap: var(--space-4); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Very small screens — Galaxy Fold and similar. */
@media (max-width: 360px) {
  .brand__name { display: none; }
  .lang-switch { padding-inline: var(--space-2); }

  /* seven tabs across ~45px each — the labels need the last notch down */
  .mobile-tabs a { font-size: 0.56rem; gap: 3px; }
  .mobile-tabs a::before { inline-size: 7px; block-size: 7px; }
}

/* Landscape phones — reclaim vertical space. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: var(--space-6); }
}

/* ---------- section heading links ---------- */

.section__titlebar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.section__titlelink {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.section__titlelink:hover { color: var(--lime); }

/* The "see all" affordance — the clickable way out of a summary block. */
.section__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--mint);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--mint) 40%, var(--line));
  border-radius: var(--radius-pill);
  background: var(--glass);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.section__more-arrow { transition: transform 0.2s ease; }

@media (hover: hover) {
  .section__more:hover {
    color: var(--lime);
    border-color: var(--lime);
    transform: translateY(-2px);
  }

  .section__more:hover .section__more-arrow { transform: translateX(3px); }
}

/* The whole heading row is a target on small screens, where the pill would
   otherwise be an easy thing to miss. */
@media (max-width: 560px) {
  .section__titlebar { align-items: flex-start; }
  .section__more { inline-size: 100%; justify-content: center; }
}