:root{--green:#0e4d3a;--green2:#0a3a2b;--ink:#17211d;--muted:#5b6862;--paper:#f4f6f5;--line:#dbe2de;--brass:#a8742a;--sos:#b3261e;--card:#fff}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper)!important;color:var(--ink)!important;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Noto Naskh Arabic","Noto Nastaliq Urdu",sans-serif!important;line-height:1.6;letter-spacing:.005em}
h1,h2,h3{font-family:Georgia,"Times New Roman","Noto Naskh Arabic",serif;color:var(--green2);letter-spacing:-.005em;line-height:1.25}
h1{font-size:clamp(26px,5vw,36px)!important}
header.site{display:block!important;padding:0!important;background:#fff!important;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.site .bar{max-width:980px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
header.site .brand{color:var(--green2)!important;font-weight:700;font-size:17px;text-decoration:none;display:flex;align-items:center;gap:10px;font-family:Georgia,serif}
header.site .mark{width:34px;height:34px;border-radius:9px;background:url(/icon.svg) center/cover no-repeat;display:inline-block;flex:none;box-shadow:0 1px 3px rgba(8,53,40,.35)}
header.site .langbox select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
header.site nav{max-width:980px;margin:auto;display:flex;gap:2px;overflow-x:auto;padding:0 10px;scrollbar-width:none}
header.site nav::-webkit-scrollbar{display:none}
header.site nav a{color:var(--muted)!important;text-decoration:none;padding:10px 12px;font-size:14.5px;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent}
header.site nav a:hover{color:var(--green)!important}
header.site nav a[aria-current=page]{color:var(--green)!important;border-bottom-color:var(--green)}
header.site nav a.sos{color:var(--sos)!important;margin-left:auto}
main{max-width:980px!important}
.card,section.card{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(23,33,29,.05)}
.btn{background:var(--green)!important;color:#fff!important;border-radius:10px!important;font-weight:600;border:0}
.btn:hover{background:var(--green2)!important}
.btn.alt{background:#fff!important;color:var(--green2)!important;border:1px solid var(--line)!important}
.btn.gold{background:var(--brass)!important;color:#fff!important}
.btn.red{background:var(--sos)!important}
li{background:#eef3f0!important}
input,select,textarea{border-color:var(--line)!important;border-radius:10px!important}
input:focus,select:focus,textarea:focus,a:focus-visible,button:focus-visible{outline:3px solid #7fb69e;outline-offset:2px}
.warn{background:#f6f1e4!important;border-left:4px solid var(--brass);border-radius:8px!important}
.warn.red{background:#fbeceb!important;border-left-color:var(--sos);border-color:#efc9c6!important}
.hero{background:linear-gradient(165deg,var(--green2),var(--green))!important;padding:56px 20px!important}
.hero h1{color:#fff!important;font-family:Georgia,serif}
.city.mk{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.85)),url(img/kaaba-clock-tower-makkah.webp) center 30%/cover,#121917!important;border:1px solid #121917!important}
.city.md{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.8)),url(img/masjid-nabawi-night-madinah.webp) center/cover,#0a3d2c!important;border:1px solid #0a3d2c!important}
.city{border-radius:14px!important}
.city h2{color:#fff!important}
footer.site{max-width:980px;margin:28px auto 0;padding:18px 16px 28px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
@media print{header.site,footer.site{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.chip{border-color:var(--line)!important;color:var(--ink)}
.chip.on{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.pilot,.box{background:#f6f1e4!important}

header.site nav{align-items:center}
header.site nav a.sos{margin-left:0}
.mbtn{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border:0;border-radius:10px;padding:8px 14px;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:40px}
.mbtn:hover{background:var(--green2)}
.mbtn:focus-visible,#msq:focus-visible,.mega a:focus-visible,header.site nav a:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.mi{width:16px;height:12px;background:linear-gradient(#fff,#fff) 0 0/100% 2px no-repeat,linear-gradient(#fff,#fff) 0 5px/100% 2px no-repeat,linear-gradient(#fff,#fff) 0 10px/100% 2px no-repeat}
.mbtn[aria-expanded=true] .mi{background:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(0,0,0,.14);max-height:calc(100vh - 110px);overflow:auto;padding:14px 16px 20px}
.mega[hidden]{display:none}
.msearch{max-width:980px;margin:0 auto 12px}
#msq{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:#fff}
.mgrid{max-width:980px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 24px}
.mcol[hidden]{display:none}
.mcol h2{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-family:inherit}
.mcol ul{list-style:none;margin:0;padding:0}
.mcol li{margin:0;padding:0!important;background:none!important}
.mcol li[hidden]{display:none!important}
.mega a{display:block;padding:9px 8px;border-radius:8px;color:var(--ink)!important;text-decoration:none;font-size:15.5px}
.mega a:hover{background:#eef3f0;color:var(--green)!important}
.mega a[aria-current=page]{background:#e3efe9;color:var(--green)!important;font-weight:600}
.mnone{max-width:980px;margin:12px auto 0;color:var(--muted)}
html.menu-open{overflow:hidden}
@media(max-width:760px){.mega{max-height:calc(100vh - 130px)}.mgrid{grid-template-columns:1fr 1fr;gap:14px 12px}.mcol a{font-size:15px;padding:10px 6px}}
@media(max-width:420px){.mgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.mega{animation:mgin .14s ease-out}@keyframes mgin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}
header.site .bar{gap:10px}
header.site .brand{min-width:0}
@media(max-width:480px){header.site nav{padding:0 6px}header.site nav a{padding:10px 8px;font-size:14px}.mbtn{padding:8px 11px;font-size:14px}header.site .brand{font-size:16px}}
@media(max-width:420px){header.site nav{padding:0 4px;gap:0}header.site nav a{padding:10px 6px;font-size:13.5px}.mbtn{padding:8px 10px;gap:6px;font-size:13.5px;margin-inline-start:auto}}
header:not(.site){display:block;height:137px;padding-top:34px;box-sizing:border-box;overflow:hidden;margin:0}
footer.site,footer.site p,footer.site span{color:#44514b!important;opacity:1!important}
footer.site a{display:inline-block;padding:6px 3px;min-height:24px;line-height:1.4}
@media(max-width:760px){.mega a{min-height:44px;display:flex;align-items:center}header.site nav a{min-height:44px;display:inline-flex;align-items:center}.mbtn{min-height:44px}}
/* v76 directory and home tiles */
.tb{display:grid;gap:10px;margin:12px 0 8px}
.sb{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 14px;min-height:52px;box-shadow:0 1px 2px rgba(23,33,29,.05)}
.sb:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(14,77,58,.15)}
.sb input{border:0!important;background:transparent!important;margin:0!important;padding:12px 0!important;font-size:16px;outline:none;width:100%}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:#e7ede9;border-radius:12px;padding:4px;gap:4px}
.seg button{border:0;background:transparent;border-radius:9px;padding:10px 6px;font:inherit;font-weight:600;font-size:14.5px;color:var(--muted);min-height:44px;cursor:pointer}
.seg button.on{background:#fff;color:var(--green2);box-shadow:0 1px 3px rgba(23,33,29,.15)}
#zone{height:48px;border-radius:12px;background:#fff;font-size:16px;margin:0}
.chip{border:1px solid var(--line)!important;background:#fff!important;color:var(--ink)!important;border-radius:999px!important;padding:0 14px!important;min-height:44px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.chip.on{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.pl{padding:14px 14px 12px}
.pl-h{display:flex;gap:12px;align-items:center}
.pl-i{flex:none;width:46px;height:46px;border-radius:14px;background:#eef3f0;display:flex;align-items:center;justify-content:center;font-size:23px}
.pl-t{min-width:0}.pl-t h3{font-size:17px;margin:0}
.pl-m{font-size:13.5px;color:var(--muted);margin:2px 0 0}
.pl-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pl-a .btn{margin:0!important;min-height:44px;display:inline-flex;align-items:center}
.empty{text-align:center;padding:28px 16px}
a.cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:108px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;line-height:1.25;border:1px solid var(--line);transition:transform .12s,box-shadow .12s}
a.cat i{width:52px;height:52px;border-radius:16px;background:#eef3f0;display:flex;align-items:center;justify-content:center;font-size:26px}
a.cat:hover{box-shadow:0 4px 14px rgba(23,33,29,.12)}
a.cat:active{transform:scale(.97)}
a.cat.sos{border-color:#f0c4c0;color:var(--sos)}a.cat.sos i{background:#fdecea}
.zones a{display:inline-flex;align-items:center;gap:6px;margin:4px 6px 4px 0;padding:0 16px;min-height:44px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--green2);text-decoration:none;font-weight:600;font-size:14.5px}
.zones a:hover{background:var(--green);color:#fff}
.zones a.ext::after{content:"\2197";font-size:12px;opacity:.7}

header.site .brand{gap:10px;font-size:18px;letter-spacing:-.01em}
header.site .brand{white-space:nowrap}
@media(max-width:480px){header.site .brand{font-size:15.5px;gap:8px}.mark{width:30px;height:30px;border-radius:8px}header.site .langbox select{max-width:116px}header.site .bar{padding:10px 12px}}

/* v80 premium design layer */
:root{--green:#0b5c46;--green2:#06382c;--green3:#0f7a5d;--ink:#18211d;--muted:#4d5b55;--paper:#faf7f0;--line:#e7e0d1;--brass:#8f6416;--gold:#c8a04a;--gold2:#e6c978;--sos:#b3261e;--card:#fff;--tint:#eef5f1;--sand:#f4eee0;--shadow:0 1px 2px rgba(24,33,29,.06),0 6px 20px rgba(24,33,29,.06)}
body{background:var(--paper)!important;font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Noto Naskh Arabic","Noto Nastaliq Urdu",sans-serif!important;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Naskh Arabic",serif;color:var(--green2);font-weight:700}
h1{font-size:clamp(28px,6vw,42px)!important;line-height:1.15!important;letter-spacing:-.01em}
main>h1{padding-bottom:14px;margin-bottom:14px!important;position:relative}
main>h1::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
main h2{font-size:clamp(22px,4vw,26px)!important;margin:34px 0 10px!important;padding-inline-start:14px;border-inline-start:4px solid var(--gold);line-height:1.25}
main h3{font-size:19px!important;color:var(--green)}
main p,main li{max-width:68ch}
main p{margin:10px 0}
main .lead,.lead{font-size:19px!important;line-height:1.65;color:#2f3d37!important}
main a{color:var(--green);text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(200,160,74,.8)}
main a:hover{color:var(--green2);text-decoration-color:var(--green)}
main img{border-radius:16px;box-shadow:var(--shadow)}
main ul,main ol{margin:10px 0 10px 24px!important}
main li::marker{color:var(--gold);font-weight:700}
.note,.warn,.pilot,.box{background:var(--sand)!important;border:1px solid #eadfc4!important;border-inline-start:4px solid var(--gold)!important;border-radius:12px!important;padding:14px 16px!important;color:#3b3322}
.warn.red{background:#fcefee!important;border-color:#f0cfcc!important;border-inline-start-color:var(--sos)!important;color:#4a1612}
.card,section.card,.cards a{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow)}
.cards a{transition:transform .15s,box-shadow .15s;text-decoration:none!important;color:var(--ink)}
.cards a:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(24,33,29,.08),0 12px 28px rgba(24,33,29,.1)}
p.rel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:15.5px;line-height:1.75;max-width:none;box-shadow:0 1px 2px rgba(24,33,29,.04)}
p.langs{display:flex;flex-wrap:wrap;gap:8px;max-width:none;margin:4px 0 14px;font-size:14px}
p.langs a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green2)!important;text-decoration:none!important;font-weight:600}
p.langs a:hover{border-color:var(--green);background:var(--tint)}
p.langs a[aria-current],p.langs a.on{background:var(--green);color:#fff!important;border-color:var(--green)}
/* header */
.hijri,.hstrip,header.site .strip{background:var(--green2)}
header.site{background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(200,160,74,.35),0 6px 18px rgba(24,33,29,.05)}
header.site .brand{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;color:var(--green2)!important;letter-spacing:-.005em}
header.site .mark{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--gold),0 2px 6px rgba(6,56,44,.3)}
header.site nav a{color:#42504a!important;font-weight:600;border-bottom-width:3px}
header.site nav a:hover{color:var(--green)!important;background:var(--tint)}
header.site nav a[aria-current=page]{color:var(--green)!important;border-bottom-color:var(--gold)}
header.site nav a.sos{color:var(--sos)!important}
.mbtn{background:linear-gradient(180deg,var(--green3),var(--green));box-shadow:0 2px 6px rgba(6,56,44,.3);border-radius:12px}
.mbtn:hover{background:var(--green2)}
.mega{border-top:3px solid var(--gold);background:#fffdf8}
.mcol h2{color:var(--brass);font-family:inherit;border:0!important;padding:0!important;margin:0 0 6px!important;font-size:12.5px!important}
.mega a{color:var(--ink)!important;text-decoration:none!important}
.mega a:hover{background:var(--tint)}
.btn{background:linear-gradient(180deg,var(--green3),var(--green))!important;box-shadow:0 2px 6px rgba(6,56,44,.25);border-radius:12px!important}
.btn.gold{background:linear-gradient(180deg,#d6ad55,var(--brass))!important;color:#fff!important}
.btn.alt{background:#fff!important;color:var(--green2)!important;box-shadow:none;border:1px solid var(--line)!important}
.hero{background:radial-gradient(900px 300px at 80% -20%,rgba(200,160,74,.28),transparent 60%),linear-gradient(165deg,var(--green2),var(--green))!important}
.chip.on,.seg button.on{background:var(--green)!important}
.seg button.on{background:#fff!important}
.sb:focus-within{box-shadow:0 0 0 3px rgba(200,160,74,.35);border-color:var(--gold)}
.pl-i{background:var(--sand)}
/* footer */
footer.site{max-width:none!important;margin:48px 0 0!important;padding:0!important;border:0!important;background:var(--green2);color:#d9e6e0!important;font-size:14.5px;line-height:1.6;position:relative}
footer.site::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold))}
footer.site .fw{max-width:980px;margin:auto;padding:36px 16px 10px;display:grid;gap:28px 24px;grid-template-columns:1.4fr repeat(4,1fr)}
footer.site .fb .fbrand{display:flex;align-items:center;gap:10px;color:#fff;font-family:"Iowan Old Style",Georgia,serif;font-size:19px;font-weight:700;text-decoration:none;padding:0;min-height:0}
footer.site .fb .mark{width:34px;height:34px;border-radius:9px;background:url(/icon.svg) center/cover;box-shadow:0 0 0 2px var(--gold)}
footer.site .fb p{margin:12px 0 0;color:#c4d6ce!important;font-size:14px}
footer.site h2{font-family:inherit;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold2)!important;margin:0 0 8px;border:0;padding:0}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{background:none!important;margin:0;padding:0}
footer.site a{color:#e8f1ed!important;text-decoration:none;display:inline-block;padding:5px 0;min-height:32px;font-size:15px}
footer.site a:hover{color:var(--gold2)!important;text-decoration:underline}
footer.site .fl{border-top:1px solid rgba(255,255,255,.14);max-width:980px;margin:18px auto 0;padding:16px 16px 28px;color:#b9cdc4!important;font-size:13px}
footer.site .fl span,footer.site .fl p{color:#b9cdc4!important}
footer.site .fl p{margin:0 0 6px}
@media(max-width:820px){footer.site .fw{grid-template-columns:1fr 1fr}footer.site .fb{grid-column:1/-1}}
@media(max-width:380px){footer.site .fw{grid-template-columns:1fr}}
[dir=rtl] main h2{padding-inline-start:14px}
html[lang=ur] body,html[lang=ar] body{line-height:1.95;font-size:18px}
html[lang=ur] main h1,html[lang=ur] main h2,html[lang=ur] main h3{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;line-height:1.9!important}
html[lang=ar] main h1,html[lang=ar] main h2,html[lang=ar] main h3{font-family:"Noto Naskh Arabic","Amiri",serif;line-height:1.7!important}
a.hdate{background:var(--green2)!important;color:var(--gold2)!important;font-weight:600;letter-spacing:.02em;border-bottom:1px solid rgba(200,160,74,.4)}
