/* pages.css — styles for the generated Arabic content tree.
 *
 * Kept in ONE file the whole tree shares, so a visitor who reads three pages downloads it once.
 * The type is inherited from the main site stylesheet (Dawod Sans / Dawod Serif Display, the
 * Thmanyah faces), which every generated page links before this one; only layout and colour live
 * here. The palette is the site's: near-black ground, mint accent, deep teal ink. */

:root{
  --ink:#04323A;
  --mint:#CFF7EE;
  --ground:#0A0A0A;
  --panel:#0F1A1C;
  --line:rgba(207,247,238,.16);
  --muted:#9DB6B8;
  --wrap:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:#EAF6F4;
  font-family:"Dawod Sans","Thmanyah Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.85;
}

/* ---------------------------------------------------------------- nav */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px clamp(16px,4vw,42px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;background:rgba(10,10,10,.86);backdrop-filter:blur(10px);
}
.brand{
  font-family:"Dawod Serif Display","TAN Headline",Georgia,serif;
  font-size:24px;font-weight:700;color:var(--mint);text-decoration:none;letter-spacing:.4px;
}
.brand span{color:var(--mint);opacity:.65}
.nav nav{display:flex;flex-wrap:wrap;gap:clamp(10px,2.2vw,24px)}
.nav nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;transition:color .2s}
.nav nav a:hover{color:var(--mint)}

/* ---------------------------------------------------------------- article */
main{padding:clamp(26px,6vw,64px) clamp(16px,4vw,42px)}
.wrap{max-width:var(--wrap);margin:0 auto}

.crumb{font-size:13px;color:var(--muted);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--mint);text-decoration:underline}
.crumb i{opacity:.4;font-style:normal}

.kicker{
  display:inline-block;margin:0 0 14px;padding:5px 14px;border-radius:999px;
  background:rgba(207,247,238,.1);border:1px solid var(--line);
  color:var(--mint);font-size:13px;font-weight:700;
}

h1{
  font-family:"Dawod Serif Display","TAN Headline",Georgia,serif;
  font-size:clamp(28px,5.2vw,46px);line-height:1.3;margin:0 0 18px;color:#fff;font-weight:700;
}
h2{
  font-family:"Dawod Serif Display","TAN Headline",Georgia,serif;
  font-size:clamp(21px,3.4vw,30px);line-height:1.4;margin:46px 0 14px;color:var(--mint);font-weight:700;
  scroll-margin-top:84px;
}
h3{font-size:17px;margin:0 0 8px;color:#fff;font-weight:700}
p{margin:0 0 16px;color:#D6E7E5}
.lede{font-size:clamp(18px,2.6vw,21px);color:var(--mint);font-weight:500;line-height:1.7;margin-bottom:22px}

a{color:var(--mint)}

/* ---------------------------------------------------------------- blocks */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:18px 0}
.grid.big{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;
}
.card p{margin:0;font-size:15px;color:var(--muted);line-height:1.75}
a.card.link{display:block;text-decoration:none;transition:border-color .2s,transform .2s}
a.card.link:hover{border-color:var(--mint);transform:translateY(-3px)}
.card .more{display:inline-block;margin-top:12px;color:var(--mint);font-size:14px;font-weight:700}
.card .tag{
  display:inline-block;margin-bottom:10px;padding:3px 11px;border-radius:999px;
  background:rgba(207,247,238,.1);color:var(--mint);font-size:12px;font-weight:700;
}

.ticks{list-style:none;padding:0;margin:16px 0;display:grid;gap:9px}
.ticks li{position:relative;padding-inline-start:26px;color:#D6E7E5}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.72em;width:9px;height:9px;
  border-radius:50%;background:var(--mint);
}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.tags span{
  padding:5px 13px;border-radius:999px;background:rgba(207,247,238,.08);
  border:1px solid var(--line);color:var(--mint);font-size:13px;font-weight:500;
}

.faq{margin:16px 0;display:grid;gap:10px}
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;
}
.faq summary{
  cursor:pointer;font-weight:700;color:#fff;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mint);font-size:22px;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:12px 0 0;color:var(--muted);font-size:15px}

.related{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.related h2{margin-top:0;font-size:19px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips a{
  padding:8px 15px;border-radius:999px;background:rgba(207,247,238,.07);
  border:1px solid var(--line);color:var(--mint);text-decoration:none;font-size:14px;
  transition:background .2s,border-color .2s;
}
.chips a:hover{background:rgba(207,247,238,.16);border-color:var(--mint)}
.chips.wide{margin:14px 0 8px}

.back{margin-top:32px}
.back a{font-weight:700;text-decoration:none}
.back a:hover{text-decoration:underline}
.visit{margin:26px 0}

.btn{
  display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 28px;border-radius:999px;
  font-weight:700;font-size:16px;text-decoration:none;transition:transform .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--mint);color:var(--ink);border:2px solid var(--ink)}
.btn.ghost{background:transparent;color:var(--mint);border:2px solid var(--line)}

/* ---------------------------------------------------------------- cta + footer */
.cta-band{
  margin:clamp(40px,7vw,80px) clamp(16px,4vw,42px) 0;padding:clamp(28px,5vw,52px);
  background:linear-gradient(140deg,#0d2a2f,#04323A);border:1px solid var(--line);
  border-radius:26px;text-align:center;
}
.cta-band h2{margin:0 0 10px;color:var(--mint)}
.cta-band p{color:#BFD8D6;max-width:520px;margin:0 auto 22px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.foot{
  margin-top:clamp(34px,6vw,64px);padding:30px clamp(16px,4vw,42px) 44px;
  border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:14px;
}
.foot p{color:var(--muted);margin:0 0 8px}
.foot .links a{color:var(--muted);text-decoration:none}
.foot .links a:hover{color:var(--mint)}

@media (max-width:640px){
  body{font-size:16px}
  .nav{flex-direction:column;align-items:flex-start;gap:10px}
  .nav nav{gap:14px}
}