/* ============================================================
   أمانة — Amanah Supervised Visitation
   Editorial identity: deep emerald / ivory / muted gold
   Display: Amiri · Body: IBM Plex Sans Arabic
   Built RTL-first with CSS logical properties.
   ============================================================ */

:root{
  --ink:        #15241c;
  --ink-soft:   #3d5248;
  --emerald:    #0e3b2e;
  --emerald-dk: #092a20;
  --ivory:      #f8f4ea;
  --ivory-2:    #efe8d8;
  --paper:      #fdfbf5;
  --gold:       #a8842e;
  --gold-soft:  #c9a85c;
  --sage:       #7e9488;
  --line:       rgba(14,59,46,.14);
  --line-gold:  rgba(168,132,46,.38);
  --serif:      "Amiri", "Times New Roman", serif;
  --sans:       "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --measure:    66ch;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.95;
  color:var(--ink);
  background:var(--paper);
  text-align:start;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--emerald); text-decoration:none; }
a:hover{ color:var(--gold); }

::selection{ background:var(--gold-soft); color:var(--emerald-dk); }

.wrap{
  max-width:1120px;
  margin-inline:auto;
  padding-inline:clamp(20px, 4.5vw, 48px);
}

/* ---------- top ribbon ---------- */
.ribbon{
  background:var(--emerald-dk);
  color:var(--ivory);
  font-size:.8rem;
  letter-spacing:.02em;
  padding-block:9px;
  border-block-end:2px solid var(--gold);
}
.ribbon .wrap{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.ribbon a{ color:var(--gold-soft); font-weight:500; }
.ribbon a:hover{ color:var(--ivory); }

/* ---------- header ---------- */
.site-head{
  background:var(--paper);
  border-block-end:1px solid var(--line);
  position:sticky;
  inset-block-start:0;
  z-index:60;
}
.site-head .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:14px;
}

.wordmark{ display:flex; align-items:baseline; gap:12px; line-height:1; }
.wordmark .ar{
  font-family:var(--serif);
  font-weight:700;
  font-size:2rem;
  color:var(--emerald);
}
.wordmark .latin{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  border-inline-start:1px solid var(--line-gold);
  padding-inline-start:12px;
  direction:ltr;
}
.wordmark:hover .ar{ color:var(--emerald); }

.main-nav{ display:flex; align-items:center; gap:clamp(14px, 2.2vw, 30px); }
.main-nav a{
  font-size:.92rem;
  font-weight:500;
  color:var(--ink-soft);
  padding-block:6px;
  border-block-end:2px solid transparent;
}
.main-nav a:hover{ color:var(--emerald); border-block-end-color:var(--gold); }

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  line-height:1;
  padding:14px 28px;
  border:1.5px solid var(--emerald);
  background:var(--emerald);
  color:var(--ivory);
  transition:background .18s, color .18s;
}
.btn:hover{ background:var(--emerald-dk); color:var(--ivory); }
.btn-outline{
  background:transparent;
  color:var(--emerald);
}
.btn-outline:hover{ background:var(--emerald); color:var(--ivory); }
.btn-gold{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}
.btn-gold:hover{ background:#8f6f24; border-color:#8f6f24; color:#fff; }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  padding:9px 12px;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--emerald);
}

/* ---------- hero (editorial split) ---------- */
.hero{
  background:var(--ivory);
  border-block-end:1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(32px, 5vw, 72px);
  padding-block:clamp(48px, 8vw, 96px);
  align-items:start;
}
.kicker{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--gold);
  margin-block-end:18px;
}
.kicker::after{
  content:"";
  display:inline-block;
  inline-size:44px;
  block-size:1px;
  background:var(--line-gold);
  vertical-align:middle;
  margin-inline-start:12px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  line-height:1.5;
  color:var(--emerald-dk);
  margin-block-end:22px;
}
.hero h1 em{
  font-style:normal;
  color:var(--gold);
}
.hero .lede{
  font-size:1.13rem;
  line-height:2.05;
  color:var(--ink-soft);
  max-inline-size:var(--measure);
  margin-block-end:30px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-actions .minor{
  font-size:.92rem;
  font-weight:500;
  border-block-end:1px solid var(--line-gold);
  padding-block-end:2px;
}

.hero-aside{
  border:1px solid var(--line);
  border-block-start:3px solid var(--gold);
  background:var(--paper);
  padding:clamp(22px, 3vw, 32px);
}
.hero-aside h2{
  font-family:var(--serif);
  font-size:1.45rem;
  color:var(--emerald);
  margin-block-end:12px;
}
.hero-aside p{
  font-size:.95rem;
  line-height:1.95;
  color:var(--ink-soft);
}
.hero-aside p + p{ margin-block-start:12px; }
.hero-aside .ayah{
  font-family:var(--serif);
  font-size:1.9rem;
  color:var(--gold);
  line-height:1;
  margin-block-end:10px;
}

/* ---------- section scaffolding ---------- */
.section{ padding-block:clamp(56px, 8vw, 104px); }
.section + .section{ border-block-start:1px solid var(--line); }
.section-tinted{ background:var(--ivory); }
.section-dark{
  background:var(--emerald-dk);
  color:var(--ivory);
}
.section-dark a{ color:var(--gold-soft); }
.section-dark a:hover{ color:var(--ivory); }

.sec-head{ max-inline-size:760px; margin-block-end:clamp(32px, 4vw, 56px); }
.sec-head h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.7rem, 3.2vw, 2.5rem);
  line-height:1.55;
  color:var(--emerald-dk);
  margin-block-end:14px;
}
.section-dark .sec-head h2{ color:var(--ivory); }
.sec-head p{
  color:var(--ink-soft);
  font-size:1.05rem;
}
.section-dark .sec-head p{ color:#cfd9cf; }

/* ---------- lexicon (service definitions) ---------- */
.lexicon{ display:grid; gap:0; }
.lex-entry{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(20px, 4vw, 56px);
  padding-block:clamp(28px, 4vw, 44px);
  border-block-start:1px solid var(--line);
}
.lex-entry:last-child{ border-block-end:1px solid var(--line); }
.lex-term .term-ar{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  color:var(--emerald);
  line-height:1.6;
}
.lex-term .term-en{
  display:block;
  direction:ltr;
  text-align:end;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-block-start:8px;
}
.lex-def p{ color:var(--ink-soft); max-inline-size:var(--measure); }
.lex-def p + p{ margin-block-start:14px; }
.lex-def strong{ color:var(--emerald-dk); font-weight:600; }

/* ---------- numbered editorial process ---------- */
.flow{ max-inline-size:820px; }
.flow-step{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:clamp(18px, 3vw, 36px);
  padding-block:26px;
}
.flow-step + .flow-step{ border-block-start:1px dashed var(--line); }
.flow-num{
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:700;
  color:var(--gold-soft);
  line-height:1;
  padding-block-start:4px;
}
.flow-body h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.12rem;
  color:var(--emerald-dk);
  margin-block-end:8px;
}
.flow-body p{ color:var(--ink-soft); font-size:1rem; }

/* ---------- pricing ledger ---------- */
.ledger{
  max-inline-size:780px;
  border:1px solid var(--line);
  background:var(--paper);
}
.ledger-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:26px clamp(20px, 3vw, 36px);
}
.ledger-row + .ledger-row{ border-block-start:1px solid var(--line); }
.ledger-row .label h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.08rem;
  color:var(--emerald-dk);
  margin-block-end:4px;
}
.ledger-row .label p{ font-size:.92rem; color:var(--ink-soft); max-inline-size:52ch; }
.ledger-row .amount{
  font-family:var(--serif);
  font-weight:700;
  font-size:2rem;
  color:var(--emerald);
  white-space:nowrap;
}
.ledger-row .amount small{
  display:block;
  font-family:var(--sans);
  font-weight:500;
  font-size:.75rem;
  color:var(--gold);
  text-align:start;
}
.ledger-note{
  padding:18px clamp(20px, 3vw, 36px);
  background:var(--ivory);
  border-block-start:1px solid var(--line);
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ---------- gazetteer (cities index) ---------- */
.gazetteer{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 clamp(32px, 5vw, 72px);
}
.gaz-item{
  display:block;
  padding-block:20px;
  border-block-start:1px solid var(--line);
}
.gaz-item:hover .gaz-city{ color:var(--gold); }
.gaz-city{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.3rem;
  color:var(--emerald);
  transition:color .15s;
}
.gaz-city .en{
  direction:ltr;
  unicode-bidi:isolate;
  font-family:var(--sans);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage);
  margin-inline-start:10px;
}
.gaz-note{
  display:block;
  font-size:.92rem;
  color:var(--ink-soft);
  margin-block-start:4px;
}

/* ---------- reading list (resources) ---------- */
.reading-list{ max-inline-size:860px; }
.read-item{
  display:block;
  padding-block:26px;
  border-block-start:1px solid var(--line);
}
.read-item:last-child{ border-block-end:1px solid var(--line); }
.read-item .tag{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--gold);
}
.read-item h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.4rem;
  line-height:1.6;
  color:var(--emerald-dk);
  margin-block:6px 8px;
  transition:color .15s;
}
.read-item:hover h3{ color:var(--gold); }
.read-item p{ font-size:.97rem; color:var(--ink-soft); max-inline-size:var(--measure); }

/* ---------- Q&A (editorial, no accordion chrome) ---------- */
.qa{ max-inline-size:820px; }
.qa-item{ padding-block:24px; }
.qa-item + .qa-item{ border-block-start:1px solid var(--line); }
.qa-item h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.1rem;
  color:var(--emerald-dk);
  margin-block-end:10px;
  padding-inline-start:18px;
  border-inline-start:3px solid var(--gold);
}
.qa-item p{ color:var(--ink-soft); font-size:1rem; max-inline-size:var(--measure); }
.qa-item p + p{ margin-block-start:10px; }

/* ---------- closing invitation ---------- */
.invite{ text-align:center; }
.invite .wrap{ max-inline-size:780px; }
.invite h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  line-height:1.6;
  margin-block-end:16px;
}
.invite p{ color:#cfd9cf; margin-block-end:30px; font-size:1.08rem; }
.invite .rule{
  inline-size:56px;
  block-size:2px;
  background:var(--gold);
  margin-inline:auto;
  margin-block-end:28px;
}

/* ---------- footer ---------- */
.site-foot{
  background:var(--emerald-dk);
  color:#b9c7bd;
  border-block-start:3px solid var(--gold);
  padding-block:clamp(44px, 6vw, 72px) 28px;
  font-size:.92rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
  gap:clamp(28px, 4vw, 56px);
  margin-block-end:44px;
}
.site-foot .wordmark .ar{ color:var(--ivory); }
.site-foot .wordmark .latin{ color:var(--gold-soft); }
.foot-about{ margin-block-start:16px; line-height:1.9; max-inline-size:40ch; }
.foot-col h4{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--gold-soft);
  margin-block-end:14px;
}
.foot-col ul{ list-style:none; }
.foot-col li{ margin-block-end:9px; }
.foot-col a{ color:#b9c7bd; }
.foot-col a:hover{ color:var(--ivory); }
.foot-legal{
  border-block-start:1px solid rgba(248,244,234,.14);
  padding-block-start:22px;
  font-size:.8rem;
  color:#89998d;
  line-height:1.9;
}

/* ---------- inner pages: article & city ---------- */
.page-head{
  background:var(--ivory);
  border-block-end:1px solid var(--line);
  padding-block:clamp(40px, 6vw, 72px);
}
.page-head .crumb{
  font-size:.82rem;
  color:var(--sage);
  margin-block-end:16px;
}
.page-head .crumb a{ color:var(--sage); }
.page-head .crumb a:hover{ color:var(--gold); }
.page-head h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.55;
  color:var(--emerald-dk);
  max-inline-size:22ch;
}
.page-head .standfirst{
  margin-block-start:18px;
  font-size:1.12rem;
  color:var(--ink-soft);
  max-inline-size:var(--measure);
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,3.5fr);
  gap:clamp(36px, 5vw, 80px);
  padding-block:clamp(44px, 6vw, 80px);
  align-items:start;
}
.prose{ max-inline-size:var(--measure); }
.prose p{ margin-block-end:1.35em; color:var(--ink-soft); }
.prose p:last-child{ margin-block-end:0; }
.prose h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.65rem;
  line-height:1.6;
  color:var(--emerald-dk);
  margin-block:1.9em .7em;
  padding-block-start:.9em;
  border-block-start:1px solid var(--line-gold);
}
.prose h3{
  font-weight:600;
  font-size:1.14rem;
  color:var(--emerald-dk);
  margin-block:1.6em .55em;
}
.prose ul, .prose ol{
  margin-block-end:1.35em;
  padding-inline-start:1.4em;
  color:var(--ink-soft);
}
.prose li{ margin-block-end:.5em; }
.prose li::marker{ color:var(--gold); }
.prose strong{ color:var(--emerald-dk); font-weight:600; }
.prose blockquote{
  border-inline-start:3px solid var(--gold);
  padding-inline-start:22px;
  margin-block:1.6em;
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--emerald);
}

.side-rail{ position:sticky; inset-block-start:96px; display:grid; gap:24px; }
.rail-card{
  border:1px solid var(--line);
  border-block-start:3px solid var(--gold);
  padding:24px;
  background:var(--paper);
}
.rail-card h3{
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--emerald);
  margin-block-end:10px;
}
.rail-card p{ font-size:.92rem; color:var(--ink-soft); margin-block-end:16px; }
.rail-card .btn{ inline-size:100%; text-align:center; }
.rail-links{ border:1px solid var(--line); padding:24px; background:var(--ivory); }
.rail-links h3{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--gold);
  margin-block-end:12px;
}
.rail-links ul{ list-style:none; }
.rail-links li{
  padding-block:8px;
  border-block-start:1px solid var(--line);
  font-size:.92rem;
}
.rail-links li:first-of-type{ border-block-start:none; }

.cta-band{
  margin-block:2.2em;
  border:1px solid var(--line-gold);
  background:var(--ivory);
  padding:26px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.cta-band p{
  margin:0 !important;
  font-weight:500;
  color:var(--emerald-dk) !important;
}

/* ---------- language toggle ---------- */
.main-nav .lang-switch{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--gold);
  border:1px solid var(--line-gold);
  padding:6px 14px;
  white-space:nowrap;
}
.main-nav .lang-switch:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}

/* ---------- LTR (English mirror) adjustments ---------- */
[dir="ltr"] .lex-term .term-en{ text-align:start; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .hero .wrap{ grid-template-columns:1fr; }
  .article-layout{ grid-template-columns:1fr; }
  .side-rail{ position:static; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
  body{ font-size:1rem; }
  .main-nav{
    display:none;
    position:absolute;
    inset-inline:0;
    inset-block-start:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-block-end:1px solid var(--line);
    padding:10px clamp(20px,4.5vw,48px) 18px;
    box-shadow:0 14px 24px rgba(9,42,32,.08);
  }
  .main-nav.open{ display:flex; }
  .main-nav a{
    padding-block:13px;
    border-block-end:1px solid var(--line);
    font-size:1rem;
  }
  .nav-toggle{ display:block; }
  .head-cta{ display:none; }
  .main-nav .lang-switch{ margin-block-start:12px; text-align:center; }
  .lex-entry{ grid-template-columns:1fr; gap:10px; }
  .lex-term .term-en{ text-align:start; }
  .gazetteer{ grid-template-columns:1fr; }
  .flow-step{ grid-template-columns:48px minmax(0,1fr); }
  .flow-num{ font-size:1.9rem; }
  .ledger-row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .foot-grid{ grid-template-columns:1fr; }
}