/* ───────────────────────────────────────────────────────────────────────────
   Inner-page shared styles
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --emerald:  #235C42;
  --ink:      #1A2520;
  --sage:     #7E9785;
  --bone:     #F2EEE4;
  --saffron:  #B8843D;

  --body:  #F2EEE4;
  --muted: rgba(242, 238, 228, 0.55);
  --faint: rgba(242, 238, 228, 0.30);
  --rule:  rgba(126, 151, 133, 0.30);

  --display-en: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --display-ar: 'Almarai', 'Noto Naskh Arabic', sans-serif;
  --body-en:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --body-ar:    'Tajawal', 'Noto Naskh Arabic', sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

  --gutter: 56px;
  --max-w:  1100px;
}
@media (max-width: 700px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ink); }
body {
  color: var(--body);
  font: 300 16px/1.6 var(--body-en);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.lang-ar { font-family: var(--body-ar); }
.lang-ar .en, .lang-en .ar { display: none; }
.ar, .en { display: inline; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Top strip */
.top-strip {
  border-bottom: 1px solid var(--rule);
  padding: 12px var(--gutter);
  display: flex; justify-content: flex-end; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.top-strip__id { font: 400 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
.lang-pick {
  display: inline-flex; gap: 4px; padding: 3px;
  background: rgba(126,151,133,0.07);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.lang-pick button {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  font: 500 12px/1 var(--body-en); letter-spacing: 0.03em;
  color: var(--muted); transition: all .2s ease;
}
.lang-pick button:nth-child(1) { font-family: var(--body-ar); font-size: 14px; }
.lang-pick button[aria-pressed="true"] { background: var(--emerald); color: var(--bone); }
.lang-pick button:hover:not([aria-pressed="true"]) { color: var(--body); }

/* Header */
.site-head {
  padding: 24px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 36px; height: 36px; }
.brand__name { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand__name .ar { font: 500 17px/1 var(--display-ar); color: var(--bone); }
.brand__name .en { font: 500 13px/1 var(--display-en); color: var(--sage); }
.nav { margin-inline-start: auto; display: flex; gap: 28px; }
.nav a {
  font: 400 13px/1 var(--body-en); color: var(--muted);
  padding: 8px 2px; position: relative; transition: color .2s;
  letter-spacing: 0.02em;
}
.lang-ar .nav a { font: 500 15px/1 var(--body-ar); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--body); }
.nav a[aria-current="page"]::after,
.nav a:hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--sage);
}
@media (max-width: 700px) {
  .site-head { flex-wrap: wrap; padding: 20px var(--gutter); }
  .nav { gap: 18px; width: 100%; margin: 0; }
}

/* Page body */
.page {
  flex: 1 1 auto;
  padding: 32px var(--gutter) 80px;
}
.page__inner { max-width: var(--max-w); margin: 0 auto; }
.lang-ar .page { text-align: right; }
.lang-en .page { text-align: left; }

.kicker {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage);
  display: inline-flex; align-items: center; gap: 12px;
}
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--sage); }
.lang-ar .kicker { font-family: var(--body-ar); font-size: 13px; letter-spacing: 0.04em; text-transform: none; }

.page-title {
  margin: 28px 0 16px;
  font: 300 italic 56px/1.05 var(--display-en);
  letter-spacing: -0.022em;
  color: var(--bone); text-wrap: balance;
  max-width: 22ch;
}
/* Responsive shrink for ultra-wide titles (full name in Arabic). */
@media (max-width: 900px) {
  .page-title[style*="nowrap"] { font-size: 30px !important; }
}
@media (max-width: 600px) {
  .page-title[style*="nowrap"] { font-size: 24px !important; }
}
.lang-ar .page-title {
  font: 500 48px/1.4 var(--display-ar);
  font-style: normal; letter-spacing: 0;
}
@media (max-width: 700px) {
  .page-title { font-size: 36px; }
  .lang-ar .page-title { font-size: 32px; }
}

.page-lede {
  margin: 12px 0 48px;
  font: 300 17px/1.6 var(--body-en);
  color: var(--muted); max-width: 56ch;
}
.lang-ar .page-lede { font: 300 19px/1.8 var(--body-ar); max-width: 60ch; }

/* Lists */
.tile-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 800px) { .tile-grid { grid-template-columns: 1fr; } }
.tile {
  background: var(--ink); padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .2s;
}
.tile:hover { background: rgba(126,151,133,0.06); }
@media (max-width: 700px) { .tile { padding: 22px 20px; } }
.tile__n {
  font: 400 11px/1 var(--mono); color: var(--saffron); letter-spacing: 0.12em;
  display: inline-flex; align-items: center;
}
.tile__n svg { width: 14px; height: 14px; }
.tile__title {
  font: 500 18px/1.3 var(--display-en); color: var(--bone);
  letter-spacing: -0.005em; margin-top: 8px;
}
.lang-ar .tile__title { font: 500 22px/1.4 var(--display-ar); }
.tile__desc {
  font: 300 13.5px/1.6 var(--body-en); color: var(--muted);
}
.lang-ar .tile__desc { font: 300 15px/1.7 var(--body-ar); }

/* Numbered method steps */
.method-list { list-style: none; padding: 0; margin: 0; }
.method-list > li {
  display: grid; grid-template-columns: 60px 1fr;
  gap: 24px; padding: 24px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.lang-ar .method-list > li { grid-template-columns: 1fr 60px; text-align: right; }
.lang-ar .method-list > li > .method-n { order: 2; text-align: left; }
.method-n {
  font: 400 12px/1 var(--mono); color: var(--sage);
  letter-spacing: 0.1em;
}
.method-title { font: 500 19px/1.3 var(--display-en); color: var(--bone); }
.lang-ar .method-title { font: 500 22px/1.4 var(--display-ar); }
.method-desc { font: 300 14px/1.7 var(--body-en); color: var(--muted); margin-top: 8px; max-width: 60ch; }
.lang-ar .method-desc { font: 300 16px/1.8 var(--body-ar); }

/* Section heading */
.section-head {
  margin-top: 64px; margin-bottom: 24px;
  display: flex; align-items: baseline; gap: 12px;
}
.section-head h2 {
  font: 500 22px/1.3 var(--display-en); color: var(--bone);
  margin: 0; letter-spacing: -0.005em;
}
.lang-ar .section-head h2 { font: 500 26px/1.4 var(--display-ar); }

/* Form */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font: 500 11px/1 var(--mono); color: var(--sage);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.lang-ar .field label { font: 500 13px/1 var(--body-ar); letter-spacing: 0.04em; text-transform: none; }
.field input, .field textarea, .field select {
  background: rgba(126,151,133,0.04);
  border: 1px solid var(--rule);
  color: var(--bone);
  padding: 12px 14px;
  font: 400 14px/1.4 var(--body-en);
  border-radius: 2px;
  width: 100%;
  transition: border-color .2s, background .2s;
}
.lang-ar .field input, .lang-ar .field textarea, .lang-ar .field select {
  font: 400 16px/1.5 var(--body-ar);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--sage);
  background: rgba(126,151,133,0.08);
}
.field textarea { min-height: 110px; resize: vertical; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-row label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(126,151,133,0.04);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  font: 400 13px/1 var(--body-en);
  color: var(--muted);
  text-transform: none; letter-spacing: 0;
  transition: all .2s;
}
.lang-ar .radio-row label { font: 400 15px/1 var(--body-ar); }
.radio-row label:hover { color: var(--bone); border-color: var(--sage); }
.radio-row input { display: none; }
.radio-row label:has(input:checked) {
  background: rgba(35,92,66,0.20);
  border-color: var(--emerald);
  color: var(--bone);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--emerald); color: var(--bone);
  font: 500 13px/1 var(--body-en); letter-spacing: 0.04em;
  border-radius: 2px; cursor: pointer; border: 0;
  transition: background .2s, gap .2s;
}
.lang-ar .btn { font-family: var(--body-ar); font-size: 14px; }
.btn:hover { background: #2b6f50; gap: 14px; }
.btn--ghost { background: transparent; border: 1px solid var(--rule); }
.btn--ghost:hover { background: rgba(126,151,133,0.08); border-color: var(--sage); }

/* Foot */
.foot {
  padding: 22px var(--gutter); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.foot__meta, .foot__contact {
  font: 400 11px/1 var(--mono); letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
}
.foot__contact a { color: var(--body); }
.foot__contact a:hover { color: var(--saffron); }

/* Reveals */
.reveal { opacity: 1; transform: none; }
.js-ready .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.js-ready .reveal.is-in { opacity: 1; transform: none; }
.js-ready .reveal[data-stagger="2"] { transition-delay: 0.1s; }
.js-ready .reveal[data-stagger="3"] { transition-delay: 0.2s; }
.js-ready .reveal[data-stagger="4"] { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }


/* ── Light theme override ─────────────────────────────────── */
.theme-light {
  --ink:   #F2EEE4;   /* page background → bone */
  --bone:  #1A2520;   /* primary text → ink */
  --body:  #1A2520;
  --muted: rgba(26, 37, 32, 0.62);
  --faint: rgba(26, 37, 32, 0.40);
  --rule:  rgba(35, 92, 66, 0.18);
  --sage:  #4F6A57;   /* deeper for contrast */
}
.theme-light body { background: #F2EEE4; color: #1A2520; }
.theme-light .brand__name .en { color: #4F6A57; }
.theme-light .brand__name .ar { color: #1A2520; }
.theme-light .tile { background: #F2EEE4; }
.theme-light .tile:hover { background: rgba(35,92,66,0.05); }
.theme-light .vmg__cell { background: #F2EEE4; }
.theme-light .vmg__cell:hover { background: rgba(35,92,66,0.05); }
.theme-light .field input,
.theme-light .field textarea,
.theme-light .field select {
  background: rgba(35,92,66,0.04);
  color: #1A2520;
  border-color: rgba(35,92,66,0.20);
}
.theme-light .radio-row label {
  background: rgba(35,92,66,0.04);
  border-color: rgba(35,92,66,0.18);
}
.theme-light .radio-row label:has(input:checked) {
  background: rgba(35,92,66,0.14);
  border-color: var(--emerald);
}
.theme-light .channels { background: rgba(35,92,66,0.04); }
.theme-light .success-msg { background: rgba(35,92,66,0.10); }
.theme-light .lang-pick { background: rgba(35,92,66,0.04); }
.theme-light .lang-pick button { color: rgba(26,37,32,0.55); }
.theme-light .lang-pick button[aria-pressed="true"] { background: var(--emerald); color: #F2EEE4; }
.theme-light .btn--ghost { color: #1A2520; }
.theme-light .btn--ghost:hover { background: rgba(35,92,66,0.06); }

/* ── Theme picker (sits next to language picker) ─────────── */
.theme-pick {
  display: inline-flex; gap: 0;
  padding: 3px;
  background: rgba(126,151,133,0.07);
  border: 1px solid var(--rule);
  border-radius: 999px;
  align-items: center;
}
.theme-light .theme-pick { background: rgba(35,92,66,0.04); }
.theme-pick button {
  background: transparent; border: 0;
  width: 32px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  border-radius: 999px;
  transition: all .2s ease;
}
.theme-pick button:hover { color: var(--body); }
.theme-pick button[aria-pressed="true"] {
  background: var(--emerald);
  color: #F2EEE4;
}
.theme-pick svg { width: 14px; height: 14px; }
.top-strip { gap: 12px; }

/* Prevent the saffron-on-Bone from being unreadable. The Saffron itself is fine
   on light at body sizes, but for the VMG__k (huge brand label) we deepen it. */
.theme-light .vmg__k { color: #8C5C20; }
.theme-light .vmg__rule { background: #8C5C20; }
.theme-light .value-card__k { color: #8C5C20; }
.theme-light .home-hero__status { color: #8C5C20; }
.theme-light .foot__contact a:hover { color: #8C5C20; }
.theme-light .vmg-section__n { color: #8C5C20; }

/* Values list (about page) */
.values-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 36px 48px; margin-top: 32px;
}
@media (max-width: 700px) { .values-grid { grid-template-columns: 1fr; gap: 22px; } }
.value-card { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid var(--rule); }
.value-card__k {
  font: 600 22px/1.15 var(--display-en);
  letter-spacing: -0.005em; text-transform: none;
  color: var(--saffron);
}
.lang-ar .value-card__k { font: 700 26px/1.35 var(--display-ar); letter-spacing: 0; }
.value-card__title { font: 500 17px/1.3 var(--display-en); color: var(--bone); margin-top: 8px; }
.lang-ar .value-card__title { font: 500 20px/1.4 var(--display-ar); }
.value-card__desc { font: 300 14px/1.7 var(--body-en); color: var(--muted); margin-top: 4px; }
.lang-ar .value-card__desc { font: 300 16px/1.8 var(--body-ar); }