/* ═══════════════════════════════════════════════════════════════════════════
   SVEI — Reset + base typography + layout primitives
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sv-header-h) + 1rem);
}

body {
  font-family: var(--sv-font);
  font-size: var(--sv-fs-base);
  line-height: var(--sv-lh-base);
  color: var(--sv-text);
  background: var(--sv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, not `hidden`: hidden turns <body> into a scroll container, which
     silently disables `position: sticky` on the header (it scrolled away with
     the page). clip trims sideways overflow without that side effect. */
  overflow-x: clip;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--sv-fw-bold);
  line-height: var(--sv-lh-tight);
  letter-spacing: -0.02em;
  color: var(--sv-text);
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 { letter-spacing: 0; }

h1 { font-size: clamp(2rem, 5vw, var(--sv-fs-5xl)); font-weight: var(--sv-fw-black); }
h2 { font-size: clamp(1.65rem, 3.6vw, var(--sv-fs-3xl)); }
h3 { font-size: clamp(1.25rem, 2.4vw, var(--sv-fs-2xl)); }
h4 { font-size: var(--sv-fs-xl); }
h5 { font-size: var(--sv-fs-lg); }
h6 { font-size: var(--sv-fs-base); }

a { color: var(--sv-red); text-decoration: none; transition: color var(--sv-t-fast) var(--sv-ease); }
a:hover { color: var(--sv-red-dark); }

strong, b { font-weight: var(--sv-fw-semibold); }
small { font-size: var(--sv-fs-sm); }

hr {
  border: 0;
  height: 1px;
  background: var(--sv-line);
  margin: var(--sv-6) 0;
}

::selection { background: var(--sv-red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--sv-cyan);
  outline-offset: 3px;
  border-radius: var(--sv-r-xs);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.sv-container {
  width: 100%;
  max-width: var(--sv-container);
  margin-inline: auto;
  padding-inline: var(--sv-gutter);
}
.sv-container--narrow { max-width: var(--sv-container-narrow); }

.sv-section { padding-block: var(--sv-section-y); position: relative; }
.sv-section--tight { padding-block: calc(var(--sv-section-y) * .6); }
.sv-section--alt { background: var(--sv-bg-alt); }
.sv-section--ink { background: var(--sv-grad-ink); color: #fff; }

.sv-grid { display: grid; gap: var(--sv-5); }
.sv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sv-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Card grids are laid out as a centred flex-wrap with a fixed column count,
   so an incomplete last row (e.g. 2 cards under a row of 3) sits in the
   middle instead of hugging one side. Form field grids keep the plain grid. */
.sv-grid--2:not(.sv-form .sv-grid),
.sv-grid--3:not(.sv-form .sv-grid),
.sv-grid--4:not(.sv-form .sv-grid) {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.sv-grid--2 { --sv-cols: 2; }
.sv-grid--3 { --sv-cols: 3; }
.sv-grid--4 { --sv-cols: 4; }
@media (max-width: 1100px) { .sv-grid--4 { --sv-cols: 3; } }
@media (max-width: 900px)  { .sv-grid--2, .sv-grid--3, .sv-grid--4 { --sv-cols: 1; } }
.sv-grid--2:not(.sv-form .sv-grid) > *,
.sv-grid--3:not(.sv-form .sv-grid) > *,
.sv-grid--4:not(.sv-form .sv-grid) > * {
  flex: 0 0 calc((100% - (var(--sv-cols) - 1) * var(--sv-5)) / var(--sv-cols));
  min-width: 0;
}

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

/* ── Utilities ────────────────────────────────────────────────────────────── */
.sv-text-center { text-align: center; }
.sv-text-start  { text-align: start; }
.sv-muted { color: var(--sv-text-muted); }
.sv-lead  { font-size: var(--sv-fs-lg); color: var(--sv-text-muted); line-height: var(--sv-lh-base); }
.sv-mono  { font-family: var(--sv-font-mono); }

.sv-mt-0 { margin-top: 0; }  .sv-mb-0 { margin-bottom: 0; }
.sv-mt-2 { margin-top: var(--sv-2); } .sv-mb-2 { margin-bottom: var(--sv-2); }
.sv-mt-4 { margin-top: var(--sv-4); } .sv-mb-4 { margin-bottom: var(--sv-4); }
.sv-mt-6 { margin-top: var(--sv-6); } .sv-mb-6 { margin-bottom: var(--sv-6); }
.sv-mt-8 { margin-top: var(--sv-8); } .sv-mb-8 { margin-bottom: var(--sv-8); }

.sv-hidden { display: none !important; }

.sv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sv-skip-link {
  position: absolute;
  inset-inline-start: var(--sv-4);
  top: -60px;
  z-index: var(--sv-z-toast);
  background: var(--sv-red);
  color: #fff;
  padding: var(--sv-3) var(--sv-5);
  border-radius: var(--sv-r-sm);
  font-weight: var(--sv-fw-semibold);
  transition: top var(--sv-t) var(--sv-ease);
}
.sv-skip-link:focus { top: var(--sv-4); color: #fff; }

/* ── Rich text (admin-authored HTML) ──────────────────────────────────────── */
.sv-rte { line-height: var(--sv-lh-base); }
.sv-rte > * + * { margin-top: var(--sv-4); }
.sv-rte h2 { font-size: var(--sv-fs-2xl); margin-top: var(--sv-7); }
.sv-rte h3 { font-size: var(--sv-fs-xl); margin-top: var(--sv-6); }
.sv-rte p  { color: var(--sv-text-muted); }
.sv-rte a  { text-decoration: underline; text-underline-offset: 3px; }
.sv-rte img { border-radius: var(--sv-r-md); margin-block: var(--sv-5); }
.sv-rte ul, .sv-rte ol { padding-inline-start: var(--sv-5); color: var(--sv-text-muted); }
.sv-rte ul { list-style: none; }
.sv-rte ul li { position: relative; padding-inline-start: var(--sv-5); margin-bottom: var(--sv-3); }
.sv-rte ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .65em;
  width: 8px; height: 8px;
  background: var(--sv-red);
  border-radius: var(--sv-r-xs);
  transform: rotate(45deg);
}
.sv-rte ol { list-style: decimal; }
.sv-rte ol li { margin-bottom: var(--sv-3); padding-inline-start: var(--sv-2); }
.sv-rte blockquote {
  border-inline-start: 3px solid var(--sv-red);
  padding-inline-start: var(--sv-5);
  font-size: var(--sv-fs-lg);
  color: var(--sv-text);
}
.sv-rte table { width: 100%; border-collapse: collapse; }
.sv-rte th, .sv-rte td { border: 1px solid var(--sv-line); padding: var(--sv-3); text-align: start; }
.sv-rte th { background: var(--sv-bg-alt); font-weight: var(--sv-fw-semibold); }

/* ── Scroll reveal (IntersectionObserver adds .is-visible) ────────────────── */
.sv-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--sv-t-slow) var(--sv-ease-out),
              transform var(--sv-t-slow) var(--sv-ease-out);
}
.sv-reveal.is-visible { opacity: 1; transform: none; }
.sv-reveal[data-delay="1"] { transition-delay: .08s; }
.sv-reveal[data-delay="2"] { transition-delay: .16s; }
.sv-reveal[data-delay="3"] { transition-delay: .24s; }
.sv-reveal[data-delay="4"] { transition-delay: .32s; }
.sv-reveal[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .sv-reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .sv-header, .sv-footer, .sv-no-print { display: none !important; }
  body { color: #000; background: #fff; }
}