/* JiiiMu home page. The hero is a live sky for the visitor's city: its colours follow the time of day, the sun or
   moon sits on the arc of the five prayers, and the next prayer counts down. Everything below it stays quiet. */

/* ---------- hero: the sky ---------- */
.sky{position:relative;padding:118px 0 0;overflow:hidden;isolation:isolate;
  --top:#0a1838;--low:#203a6e;--glow:rgba(240,220,159,0);
  background:linear-gradient(180deg,var(--top) 0%,var(--low) 78%);transition:background 1.2s}
.sky::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 18% 30%,rgba(6,12,34,.42),transparent 70%)}
.sky .stars{position:absolute;inset:0;z-index:-1;opacity:var(--stars,1);transition:opacity 1.2s;pointer-events:none}
.sky .haze{position:absolute;inset:auto 0 0 0;height:60%;z-index:-1;pointer-events:none;background:radial-gradient(120% 70% at var(--sunx,50%) 100%,var(--glow),transparent 70%)}
.sky .wrap{position:relative;height:100%}
.skytext{position:relative;z-index:3;max-width:640px}
.skytext h1{color:var(--gold-soft);text-shadow:0 2px 30px rgba(5,10,30,.5)}
.skytext .lead{font-size:1.14rem;color:#d9dcea;max-width:34em;margin-bottom:26px;text-shadow:0 1px 16px rgba(5,10,30,.5)}
.skytext .cta{display:flex;flex-wrap:wrap;gap:12px}

/* the next prayer, read like a clock in the sky */
.nextp{position:absolute;z-index:3;right:max(20px,env(safe-area-inset-right));top:118px;text-align:right;max-width:340px}
.nextp .lbl{font-size:.95rem;color:#d9dcea}
.nextp .nm{font:600 clamp(2rem,4vw,3rem)/1.05 var(--serif);color:#fff;display:flex;align-items:baseline;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.nextp .nm .ar{font-size:.72em;color:var(--gold-soft)}
.nextp .nm .ta{display:none;font-size:.45em;color:var(--gold-soft)}
.tamil .nextp .nm .ta{display:inline}
.nextp .cd{font:500 clamp(2.4rem,5vw,3.6rem)/1 var(--sans);color:var(--gold-soft);font-variant-numeric:tabular-nums;letter-spacing:.01em;margin-top:6px}
.nextp .at{color:#d9dcea;margin-top:8px}
.nextp .place{margin-top:12px;font-size:.92rem;color:#c3c9de;display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.nextp .place b{color:#fff;font-weight:600}
.nextp .chg{background:none;border:1px solid rgba(240,220,159,.35);color:var(--gold-soft);border-radius:999px;padding:3px 12px;font:500 .85rem var(--sans);cursor:pointer}
.nextp .chg:hover{border-color:var(--gold-soft)}
.citybox{position:absolute;z-index:6;right:0;top:calc(100% + 10px);width:min(360px,86vw);display:none;text-align:left}
.citybox.on{display:block}

/* the arc of the day */
.dayarc{position:relative;height:clamp(250px,34vh,330px);margin-top:18px;z-index:4;pointer-events:none}
.dayarc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dayarc .path{fill:none;stroke:rgba(240,220,159,.32);stroke-width:1.5;stroke-dasharray:3 7}
.dayarc .done{fill:none;stroke:var(--gold-soft);stroke-width:2.2;stroke-linecap:round}
.mk{position:absolute;transform:translate(-50%,-100%);text-align:center;color:#e4e7f2;pointer-events:auto;padding-bottom:14px;white-space:nowrap}
.mk::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--ink);border:2px solid var(--gold-soft)}
.mk.past{color:#d3d8e8}
.mk.past .t{font-weight:500}
.mk.below{transform:translate(-50%,0);padding:14px 0 0}
.mk.below::after{bottom:auto;top:0}
.mk.compact .a,.mk.compact .tt{display:none!important}
.mk.past::after{background:var(--gold-soft)}
.mk.next::after{background:var(--tile);border-color:#bff3eb;box-shadow:0 0 0 6px rgba(71,184,168,.25)}
.mk .t{display:block;font:600 1.02rem var(--sans);font-variant-numeric:tabular-nums}
.mk .n{display:block;font-size:.86rem}
.mk .a{display:block;font-family:var(--arabic);font-size:.95rem;color:var(--gold-soft);line-height:1.2}
.mk .tt{display:none;font-size:.76rem;color:#c8cde0}
.tamil .mk .tt{display:block}
.mk.next .t{color:#fff}
.orb{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:2}
.orb.sun{background:radial-gradient(circle,#fff8e2 0 34%,#ffd98a 36% 52%,rgba(255,206,120,0) 72%);box-shadow:0 0 60px 22px rgba(255,214,140,.35)}
.orb.moon{background:radial-gradient(circle at 62% 40%,transparent 0 40%,#eef1ff 41% 58%,transparent 60%);filter:drop-shadow(0 0 16px rgba(220,230,255,.55));transform:rotate(-24deg)}
.horizon{position:absolute;left:0;right:0;bottom:0;height:70px;z-index:3;pointer-events:none}
.horizon svg{width:100%;height:100%;display:block}
.sky .scrollhint{position:absolute;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);color:#c3c9de;font-size:.85rem}

@media (max-width:1080px){
  .nextp{position:relative;right:auto;top:auto;text-align:left;margin-top:30px;max-width:none}
  .nextp .nm,.nextp .place{justify-content:flex-start}
  .citybox{right:auto;left:0}
}
@media (max-width:860px){
  .dayarc{height:280px;margin-top:8px}
  .mk .n{font-size:.78rem}.mk .t{font-size:.9rem}.mk .a{font-size:.82rem}
}

/* ---------- index of tools ---------- */
.tools{padding:84px 0 40px}
.tools .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.tools .head p{color:var(--muted);margin:0}
.toollist{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.toollist li{border-bottom:1px solid var(--rule-soft)}
.toollist a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 2px;text-decoration:none;color:var(--text)}
.toollist .w{min-width:0}
.toollist b{display:block;font:600 1.28rem/1.25 var(--serif);color:var(--gold-soft)}
.toollist .w span{display:block;color:var(--muted);font-size:.97rem;margin-top:4px}
.toollist .w .tl{font-size:.88rem}
.toollist .ar{font-size:2.1rem;color:var(--gold);line-height:1;transition:color .2s,transform .3s;text-align:right;min-width:4ch}
.toollist a:hover b,.toollist a:focus-visible b{color:#fff}
.toollist a:hover .ar,.toollist a:focus-visible .ar{color:var(--gold-soft);transform:translateX(-4px)}
@media (max-width:820px){.toollist{grid-template-columns:1fr}.toollist .ar{font-size:1.8rem}}

/* ---------- today in the visitor's city ---------- */
.today{padding:30px 0 70px}
.todaygrid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:0;border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;background:rgba(17,36,79,.45)}
.todaygrid>div{padding:26px 28px;border-left:1px solid var(--rule-soft);min-width:0}
.todaygrid>div:first-child{border-left:0}
.todaygrid h3{font:500 .98rem var(--sans);color:var(--muted);margin:0 0 10px}
.todaygrid .big{font:600 2rem/1.15 var(--serif);color:var(--gold-soft)}
.todaygrid .big.ar{font-family:var(--arabic);font-weight:400;font-size:1.7rem;line-height:1.5;margin-top:8px}
.todaygrid .sub{color:var(--muted);font-size:.95rem;margin-top:6px}
.todaygrid a.more{display:inline-block;margin-top:12px;font-size:.93rem}
.compass{width:84px;height:84px;float:right;margin:-4px 0 0 12px}
@media (max-width:900px){.todaygrid{grid-template-columns:1fr}.todaygrid>div{border-left:0;border-top:1px solid var(--rule-soft)}.todaygrid>div:first-child{border-top:0}}

/* ---------- Masjid TV band ---------- */
.mtv{position:relative;padding:90px 0;background:radial-gradient(900px 500px at 78% 50%,rgba(18,121,90,.35),transparent 70%),linear-gradient(180deg,#062a20,#03201a);border-block:1px solid rgba(226,191,102,.18);overflow:hidden}
.mtv .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);gap:56px;align-items:center}
.mtv h2{color:#f5e6b8}
.mtv p{color:#b5cfc2}
.mtv ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.mtv li{display:flex;gap:12px;align-items:flex-start;color:#dfe9e3}
.mtv li svg{flex:none;width:20px;height:20px;margin-top:3px;color:#e2bf66}
.mtv .cta{display:flex;flex-wrap:wrap;gap:12px}
.mtv .btn.line{color:#eef2ea;border-color:rgba(226,191,102,.3)}
.tvframe{border-radius:16px;padding:10px;background:linear-gradient(160deg,#1a211f,#070a09 60%);box-shadow:0 0 0 1px rgba(226,191,102,.16),0 40px 80px -20px rgba(0,0,0,.8)}
.tvframe img{border-radius:7px;aspect-ratio:16/9;object-fit:cover;width:100%}
.tvframe+.stand{width:26%;height:12px;margin:0 auto;background:linear-gradient(#171d1b,#060908);border-radius:0 0 12px 12px}
@media (max-width:900px){.mtv .grid{grid-template-columns:1fr}.mtv .shot{order:-1}}

/* ---------- hadith of the day ---------- */
.hod{padding:90px 0 60px;text-align:center}
.hod blockquote{margin:0 auto;max-width:820px}
.hod .ar{display:block;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--gold);margin-bottom:18px}
.hod .en{font:500 clamp(1.3rem,2.4vw,1.75rem)/1.45 var(--serif);color:var(--text);margin:0 auto 14px;max-width:none}
.hod .tah{display:none;font-size:1.08rem;color:#d4d8e8;margin:0 auto 14px;line-height:1.7}
.tamil .hod .tah{display:block}
.hod cite{font-style:normal;color:var(--muted);font-size:.95rem}
.hod .orn{width:120px;height:20px;margin:0 auto 26px;color:var(--gold);display:block}