:root{
  --green-900:#012F2D;--green-800:#023B34;--green-700:#0B4A3F;--green-600:#096250;--green-100:#E3EFEA;
  --gold-700:#A5732C;--gold-500:#C9963E;--gold-300:#F4D07A;--gold-100:#FBF1D9;
  --cream:#FBF8EF;--paper:#FFFFFF;--ink:#1D2B28;--muted:#5C6B67;--line:#E6E0CF;
  --radius:14px;--shadow:0 1px 2px rgba(2,59,52,.06),0 6px 24px rgba(2,59,52,.07);
  --font:"Tajawal",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.85 var(--font)}
/* Latin and Cyrillic pages use system fonts: no web font to download. */
[dir=ltr] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.7}
[dir=ltr] .c-n,[dir=ltr] .c-l{font-family:system-ui,Arial,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--green-600);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold-700)}
h1,h2,h3{font-weight:800;line-height:1.35;color:var(--green-800);margin:1.6em 0 .6em}
h1{font-size:clamp(1.6rem,4vw,2.3rem);margin-top:.2em}
h2{font-size:clamp(1.25rem,2.6vw,1.55rem)}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;right:-999px;top:0;background:var(--gold-300);padding:8px 14px;z-index:20}
.skip:focus{right:8px}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}

/* Header */
.site-header{background:linear-gradient(135deg,var(--green-900),var(--green-700));color:#fff;border-bottom:3px solid var(--gold-500);position:relative;z-index:10}
.hdr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;margin-inline-end:auto}
.brand picture{display:flex;flex:0 0 auto}
.brand img{width:48px;height:48px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.brand strong{display:block;font-size:1.25rem;color:var(--gold-300);line-height:1.2}
.brand small{display:block;font-size:.78rem;opacity:.85;line-height:1.3}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.1);color:var(--gold-300)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.langs{position:relative;font-size:.9rem}
.langs summary{list-style:none;cursor:pointer;color:#fff;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.3);white-space:nowrap}
.langs summary::-webkit-details-marker{display:none}
.langs summary:hover,.langs[open] summary{background:rgba(255,255,255,.1);color:var(--gold-300)}
.langs ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;list-style:none;margin:0;padding:6px;background:#fff;border-radius:12px;box-shadow:var(--shadow);min-width:150px}
.langs li a,.langs li span{display:block;padding:6px 12px;border-radius:8px;color:var(--ink);text-decoration:none}
.langs li a:hover{background:var(--gold-100)}
.langs li span{color:var(--muted);font-weight:700}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--gold-300);margin:5px 0}
.search{position:relative;flex:1 1 260px;max-width:340px}
.search input{width:100%;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:.95rem}
.search input::placeholder{color:rgba(255,255,255,.75)}
.search input:focus{background:#fff;color:var(--ink);outline:none;border-color:var(--gold-500)}
.q-results{position:absolute;inset-inline:0;top:calc(100% + 6px);background:#fff;color:var(--ink);list-style:none;margin:0;padding:6px;border-radius:12px;box-shadow:var(--shadow);max-height:420px;overflow:auto}
.q-results a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--ink);line-height:1.4}
.q-results a small{display:block;color:var(--muted);font-size:.8rem}
.q-results a:hover,.q-results a[aria-selected=true]{background:var(--gold-100)}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;order:4}
  .nav.open{display:flex}
  .search{max-width:none;order:5;flex-basis:100%}
}

/* Breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:12px 0 0;margin:0;font-size:.88rem;color:var(--muted)}
.crumbs li+li::before{content:"‹";margin-inline-end:4px;color:var(--gold-500)}
[dir=ltr] .crumbs li+li::before{content:"›"}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--green-600)}

/* Page */
.page{padding-top:8px;padding-bottom:40px}
.page-head{margin:12px 0 18px}
.eyebrow{color:var(--gold-700);font-weight:700;font-size:.9rem;margin:0 0 .3em}
.lead{font-size:1.08rem;color:#2c3b37}
.prose{max-width:860px}
.prose li{margin-bottom:.4em}
section{margin-top:8px}

/* Cards / widget */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:18px 0}
.today{background:linear-gradient(160deg,var(--green-800),var(--green-600));color:#fff;border:0;position:relative;overflow:hidden}
.today::after{content:"";position:absolute;inset:auto -60px -60px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(244,208,122,.28),transparent 70%);pointer-events:none}
.today h2{color:var(--gold-300);margin:0 0 4px;font-size:1.3rem}
.today-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.dates{margin:0;font-size:.92rem;opacity:.92;display:flex;flex-direction:column;align-items:flex-end;line-height:1.5}
.next{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0 14px;min-height:2.2em}
.next strong{font-size:1.5rem;color:var(--gold-300)}
.next .count{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:700;direction:ltr}
.times{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.times li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 6px;text-align:center;min-height:78px}
.times li span{display:block;font-size:.92rem;opacity:.9}
.times time{display:block;font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr}
.times li.is-next{background:var(--gold-300);color:var(--green-900);border-color:var(--gold-300)}
.times li.is-past{opacity:.6}
@media (max-width:700px){.times{grid-template-columns:repeat(3,1fr)}}
.settings{margin-top:12px;font-size:.92rem}
.settings summary{cursor:pointer;color:var(--gold-300);font-weight:700}
.set-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.set-row label{display:flex;flex-direction:column;gap:4px;flex:1 1 180px}
.set-row select{font:inherit;padding:6px 8px;border-radius:8px;border:0}
.src{font-size:.82rem;opacity:.8;margin:10px 0 0}
.after-widget{color:#2c3b37}

/* Month table */
.month-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.month-bar button{font:inherit;border:1px solid var(--line);background:var(--gold-100);color:var(--green-800);border-radius:8px;padding:2px 12px;cursor:pointer;font-weight:700}
.month-bar strong{min-width:150px;text-align:center}
.month-bar .print{margin-inline-start:auto}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 16px;border-radius:12px;border:1px solid var(--line);background:var(--paper)}
.pt-table{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.pt-table caption{padding:8px;color:var(--muted);font-size:.88rem;text-align:start}
.pt-table th,.pt-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.pt-table thead th{background:var(--green-800);color:#fff;font-weight:700}
.pt-table tbody th{text-align:start;font-weight:700;color:var(--green-800)}
.pt-table tbody th small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.pt-table tbody tr:nth-child(even){background:#FCFAF4}
.pt-table tr.is-today{background:var(--gold-100)!important;font-weight:700}
.month-table td,.month-table th{padding:6px 8px;font-size:.9rem}
.loading{color:var(--muted)}

/* Qibla */
.qibla-row{display:flex;gap:18px;align-items:center}
.compass{flex:0 0 120px}
.c-ring{fill:var(--gold-100);stroke:var(--gold-500);stroke-width:3}
.c-n,.c-l{font:700 12px var(--font);text-anchor:middle;fill:var(--muted)}
.c-n{fill:var(--green-800)}
.c-needle{fill:var(--green-600)}
.c-kaaba{fill:var(--green-900);stroke:var(--gold-500);stroke-width:1.5}
.c-hub{fill:var(--gold-700)}
@media (max-width:560px){.qibla-row{flex-direction:column;align-items:flex-start}}

/* Facts */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:12px 0}
.facts div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.facts dt{font-size:.82rem;color:var(--muted)}
.facts dd{margin:0;font-weight:700;color:var(--green-800);overflow-wrap:anywhere}

/* Link lists */
.link-grid{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.link-grid.dense{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));font-size:.94rem}
.link-grid li{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 10px;line-height:1.5;display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.link-grid a{text-decoration:none;font-weight:500;overflow-wrap:anywhere}
.link-grid small{color:var(--muted);font-size:.78rem;white-space:nowrap}
.more{margin-top:6px;font-weight:700}
.region-grid,.country-grid,.post-grid{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.region-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.country-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.region-grid a,.country-grid a,.post-grid a{display:block;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.region-grid a:hover,.country-grid a:hover,.post-grid a:hover{border-color:var(--gold-500);transform:translateY(-2px)}
.region-grid strong,.country-grid strong,.post-grid strong{display:block;color:var(--green-800);line-height:1.4}
.region-grid small,.country-grid small{color:var(--muted);font-size:.82rem}
.country-grid .cc{float:left;font:800 .75rem var(--font);color:var(--gold-700);background:var(--gold-100);border-radius:6px;padding:0 6px;direction:ltr}
.post-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.post-grid span{display:block;color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:4px}

/* FAQ */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--green-800)}
.faq details p{margin:8px 0 0}

/* Hero */
.hero{background:radial-gradient(1200px 400px at 20% -10%,rgba(244,208,122,.35),transparent),linear-gradient(180deg,#fff,var(--cream));border-bottom:1px solid var(--line)}
.hero-in{display:flex;align-items:center;gap:24px;padding-top:24px;padding-bottom:24px}
.hero-text{flex:1}
.hero-in picture{flex:0 0 auto;display:block}
.hero-logo{width:min(300px,34vw);height:auto}
@media (max-width:760px){.hero-in{flex-direction:column-reverse;text-align:center}.hero-logo{width:180px}}
.btn{display:inline-block;font:inherit;font-weight:700;background:var(--green-700);color:#fff;border:2px solid var(--green-700);padding:9px 18px;border-radius:999px;cursor:pointer;text-decoration:none;margin:4px 0}
.btn:hover{background:var(--green-900);color:var(--gold-300)}
.btn.ghost{background:transparent;color:var(--green-700)}
.geo-msg{min-height:1.5em;font-weight:500}

/* Blog */
.post-meta{color:var(--muted);font-size:.9rem}
.post article{max-width:820px}
.post blockquote{border-inline-start:4px solid var(--gold-500);margin:1em 0;padding:.4em 1em;background:var(--gold-100);border-radius:8px}
.cta{background:var(--green-100);border:1px solid #cfe2da;border-radius:var(--radius);padding:14px 18px;margin:24px 0}

/* Footer */
.site-footer{background:var(--green-900);color:#dfe9e5;margin-top:40px;border-top:3px solid var(--gold-500);font-size:.94rem}
.foot{display:grid;grid-template-columns:2fr 2fr 1fr;gap:24px;padding-top:28px;padding-bottom:10px}
.site-footer h2{color:var(--gold-300);font-size:1.05rem;margin:0 0 10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:3px 0}
.site-footer a{color:#dfe9e5;text-decoration:none}
.site-footer a:hover{color:var(--gold-300)}
.f-countries{columns:2}
.credits{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;padding-bottom:18px;font-size:.84rem;opacity:.85}
.credits a{text-decoration:underline}
@media (max-width:860px){.foot{grid-template-columns:1fr}}

/* Cookie banner */
.consent{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:720px;margin:0 auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--gold-500);border-radius:var(--radius);box-shadow:0 8px 32px rgba(2,59,52,.25);padding:12px 16px;font-size:.95rem}
.consent p{margin:0 0 8px}
.consent .consent-btns{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.consent .btn{margin:0;padding:6px 16px}

@media print{
  .consent{display:none!important}
  .site-header,.site-footer,.crumbs,.settings,.month-bar button,.search,section:not(.month),.page-head .lead,.after-widget,.today{display:none!important}
  body{background:#fff;font-size:12px}
  .card{box-shadow:none;border:0;padding:0}
  .pt-table thead th{background:#eee;color:#000}
}