/* Mawaddah Counseling — mixed design system
   Structure: Mockup B (modern professional) · Warmth: Mockup A (calligraphy, verse, serif)
   Palette: Stormy Morning navy #384959 / #6A89A7 / #88BDF2 / #BDDDFC  +  Wildflowers green #519755 / #A8DCAB / rose #DBAAA7 / #BE91BE */
:root{
  --navy:#384959; --navy-deep:#2A3846; --slate:#6A89A7; --sky:#88BDF2; --sky-soft:#E7F1FD; --sky-wash:#BDDDFC;
  --green:#519755; --green-dark:#3A6B3E; --green-soft:#A8DCAB; --rose:#DBAAA7; --purple:#BE91BE;
  --ink:#243039; --muted:#5C6B7A; --line:#D9E5F0; --cream:#FAFCF9;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif; color:var(--ink); background:#fff;}
.serif{font-family:Georgia,'Times New Roman',serif;}
a{color:var(--green-dark);}

/* nav */
nav{display:flex; align-items:center; justify-content:space-between; padding:10px 3vw; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:50;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; margin-right:26px; white-space:nowrap;}
.logo .ar-mark{font-size:26px; color:var(--green); line-height:1; font-family:Georgia,serif;}
.logo b{font-size:17px; color:var(--navy);}
.logo span{display:block; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase;}
nav .links{display:flex; gap:15px; row-gap:6px; font-size:12.8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; flex:1 1 auto; min-width:0;}
nav .links a{color:var(--ink); text-decoration:none; font-weight:500;}
.cta{background:var(--green); color:#fff !important; padding:8px 15px; border-radius:8px;}
.lang-toggle{border:1px solid var(--line); border-radius:8px; padding:7px 12px; background:#fff; cursor:pointer; font-size:13px; color:var(--navy);}

/* safe exit */
.safe-exit{position:fixed; bottom:18px; right:18px; z-index:99; background:var(--navy); color:#fff; border:none; border-radius:24px; padding:11px 18px; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 6px 20px rgba(42,56,70,.35);}
.safe-exit small{display:block; font-weight:400; font-size:10px; opacity:.8;}

/* hero */
.hero{background:linear-gradient(180deg,var(--sky-soft),#fff); padding:64px 5vw 52px; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
.pill{display:inline-block; background:#fff; border:1px solid var(--line); color:var(--navy); font-size:12.5px; font-weight:600; border-radius:20px; padding:6px 14px; margin-bottom:16px;}
.pill b{color:var(--green);}
h1{font-family:Georgia,serif; font-size:40px; line-height:1.15; color:var(--navy); font-weight:normal; margin-bottom:16px;}
h1 em{font-style:italic; color:var(--green);}
.hero p.lead{font-size:16px; line-height:1.65; color:var(--muted); max-width:540px; margin-bottom:24px;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap;}
.btn{padding:13px 24px; border-radius:9px; font-size:14.5px; font-weight:600; text-decoration:none; display:inline-block; cursor:pointer; border:none;}
.btn.primary{background:var(--green); color:#fff;}
.btn.navy{background:var(--navy); color:#fff;}
.btn.line{border:1.5px solid var(--navy); color:var(--navy); background:#fff;}
.trust{display:flex; gap:20px; margin-top:22px; font-size:12px; color:var(--muted); flex-wrap:wrap;}
.trust b{color:var(--navy);}

/* verse card (from A) */
.verse-card{background:#fff; border:1px solid var(--green-soft); border-radius:16px; padding:30px 28px; text-align:center; box-shadow:0 14px 44px rgba(56,73,89,.12);}
.verse-card .ar{font-family:Georgia,serif; font-size:30px; color:var(--green-dark); line-height:1.9; margin-bottom:12px; direction:rtl;}
.verse-card p{font-size:14px; color:var(--muted); line-height:1.7; font-style:italic;}
.verse-card .ref{margin-top:8px; font-size:11px; color:var(--purple); letter-spacing:.15em;}

/* sections */
section{padding:56px 5vw;}
h2{font-family:Georgia,serif; font-size:27px; color:var(--navy); font-weight:normal; text-align:center; margin-bottom:8px;}
.sub{text-align:center; color:var(--muted); font-size:14.5px; margin-bottom:34px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.box{border:1px solid var(--line); border-radius:12px; padding:26px 22px; background:#fff;}
.box.accent{border-top:4px solid var(--rose);}
.box h3{font-size:16px; color:var(--navy); margin-bottom:9px;}
.box p{font-size:13px; color:var(--muted); line-height:1.65;}
.box .tag{font-size:10.5px; letter-spacing:.16em; color:var(--green); text-transform:uppercase; font-weight:700; display:block; margin-bottom:8px;}

.band{background:var(--navy-deep); color:#fff; text-align:center; padding:46px 5vw;}
.band h2{color:#fff;}
.band h2 em{color:var(--green-soft); font-style:italic;}
.band p{max-width:740px; margin:0 auto; line-height:1.75; color:#C4D3DF; font-size:14.5px;}

.wash{background:var(--cream);}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat{background:#fff; padding:22px 16px; text-align:center;}
.stat b{display:block; font-size:23px; color:var(--navy); font-family:Georgia,serif;}
.stat span{font-size:12px; color:var(--muted);}

/* forms */
form.card{max-width:560px; margin:0 auto; border:1px solid var(--line); border-radius:12px; padding:26px; background:#fff;}
form.card label{display:block; font-size:12.5px; font-weight:600; color:var(--navy); margin:12px 0 5px;}
form.card input, form.card select, form.card textarea{width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit;}
.notice{font-size:11.5px; color:var(--muted); line-height:1.55; margin-top:12px;}

/* quiz */
.quiz{max-width:640px; margin:0 auto;}
.q{border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:14px; background:#fff;}
.q b{display:block; font-size:14.5px; color:var(--navy); margin-bottom:10px;}
.q .opts{display:flex; gap:8px; flex-wrap:wrap;}
.q .opts button{border:1px solid var(--line); background:#fff; border-radius:20px; padding:8px 16px; font-size:13px; cursor:pointer;}
.q .opts button.sel{background:var(--green); color:#fff; border-color:var(--green);}
#quiz-result{display:none; text-align:center; border:1px solid var(--green-soft); border-radius:14px; padding:30px; background:var(--cream);}
#quiz-result .score{font-size:44px; font-family:Georgia,serif; color:var(--green-dark);}

/* footer */
footer{padding:30px 5vw; font-size:11.5px; color:var(--muted); line-height:1.75; border-top:1px solid var(--line); background:var(--cream);}
footer b{color:var(--navy);}
.ftrow{margin-bottom:6px;}
.ftrow a{margin-right:6px;}
.ftrow .sep{margin-right:6px; color:var(--line);}
#cookie{display:none; position:fixed; bottom:0; left:0; right:0; background:var(--navy-deep); color:#fff; padding:14px 5vw; z-index:98; align-items:center; gap:16px; font-size:12.5px; line-height:1.5;}
#cookie .btns{display:flex; gap:8px;}
#cookie button{border:none; border-radius:7px; padding:8px 16px; cursor:pointer; font-size:12.5px;}
#ck-accept{background:var(--green); color:#fff;} #ck-decline{background:#fff; color:var(--navy);}

/* RTL */
html[dir="rtl"] body{font-family:'Segoe UI',Tahoma,system-ui,sans-serif;}
html[dir="rtl"] .hero, html[dir="rtl"] .trust, html[dir="rtl"] .btn-row{direction:rtl;}
html[dir="rtl"] nav .links{direction:rtl;}

/* ---------- Mobile: hamburger nav + phone layout ---------- */
.nav-burger{display:none;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:19px;line-height:1;color:var(--navy);cursor:pointer;flex:0 0 auto;}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .grid3,.grid4,.grid2,.stats{grid-template-columns:1fr 1fr;}
  .nav-burger{display:block;}
  nav{flex-wrap:wrap;}
  nav .links{display:none;}
  nav .links.open{display:flex;flex-direction:column;align-items:stretch;width:100%;flex-basis:100%;padding:8px 0 6px;gap:0;}
  nav .links.open a{padding:12px 8px;border-top:1px solid var(--line);font-size:14.5px;}
  nav .links.open .btn, nav .links.open .cta{margin:8px 8px 2px;text-align:center;border-top:none;}
  nav .links.open select{margin:10px 8px 4px;padding:10px;font-size:15px;}
}
@media (max-width:600px){
  .grid3,.grid4,.grid2{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  section{padding:36px 5vw;}
  h1{font-size:29px;}
  h2{font-size:22px;}
  .logo img{height:44px !important;width:44px !important;}
  .logo div{font-size:16px !important;}
  .logo div span{font-size:16px !important;}
  .btn{padding:12px 18px;font-size:14px;}
  /* iOS zooms any focused input under 16px — keep typing zoom-free */
  input, select, textarea{font-size:16px !important;}
}
@font-face{font-family:'Amiri';src:url('/assets/amiri-bold.ttf') format('truetype');font-weight:700 800;font-display:swap;}