/* Riyadh Key — cinematic night theme. RTL/LTR safe via logical properties. */

:root{
  --bg1:#070716; --bg2:#161038;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.09);
  --gold:#ffd55c; --gold-dim:rgba(255,213,92,.14);
  --text:#ece9ff; --muted:#9b97c9;
  --radius:16px; --radius-sm:10px;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(124,92,255,.22), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 60%, #0a0820);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html[data-lang="en"] body{font-family:Inter,system-ui,sans-serif}
html[data-lang="ar"] body{font-family:Cairo,system-ui,sans-serif}

a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}

/* film grain + vignette */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.55);
}

/* ---------------- top bar ---------------- */
.topbar{position:relative; z-index:2; padding-block:18px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand .key{color:var(--gold); font-size:22px; line-height:1}
html[data-lang="en"] .brand .name{font-family:"Space Grotesk",sans-serif; font-size:20px}
html[data-lang="ar"] .brand .name{font-family:"Noto Kufi Arabic",sans-serif; font-size:20px}
.langswitch{font-size:14px; color:var(--muted); border:1px solid var(--border);
  padding:7px 14px; border-radius:999px; transition:.2s}
.langswitch:hover{color:var(--text); border-color:var(--gold)}

/* ---------------- hero ---------------- */
.hero{position:relative; z-index:2; padding-block:34px 18px}
.hero h1{margin:0 0 10px; font-weight:700; line-height:1.1;
  font-size:clamp(30px,5vw,52px)}
html[data-lang="en"] .hero h1{font-family:"Space Grotesk",sans-serif}
html[data-lang="ar"] .hero h1{font-family:"Noto Kufi Arabic",sans-serif}
.hero h1 .accent{color:var(--gold)}
.hero p.tag{margin:0; color:var(--muted); font-size:clamp(15px,2vw,18px); max-width:60ch}

/* live strip: prayer / clock / weather */
.nowstrip{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.chip{display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px;
  backdrop-filter:blur(8px); min-width:0}
.chip .ico{font-size:20px; line-height:1}
.chip .k{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.chip .v{font-size:17px; font-weight:600}
.chip .sub{font-size:12px; color:var(--muted)}
.chip.prayer .ico{color:var(--gold)}
/* TEMP: prayer time not resolving — hide the chip until fixed. Delete this line to restore. */
.chip.prayer{display:none}

/* ---------------- sections ---------------- */
section.block{position:relative; z-index:2; padding-block:30px}
.block-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px}
.block-head .eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted)}
.block-head h2{margin:0; font-size:clamp(20px,3vw,26px); font-weight:600}
.cat-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}

/* card grid */
.grid{display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.card{position:relative; display:block; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  border-inline-start:3px solid var(--gold);
  padding:16px 18px; transition:transform .18s ease, border-color .18s ease, background .18s ease;
  backdrop-filter:blur(6px); overflow:hidden}
.card:hover{transform:translateY(-3px); background:var(--surface-2)}
.card .ttl{font-size:17px; font-weight:600; display:flex; align-items:center; gap:8px}
.card .ttl .ext{color:var(--muted); font-size:13px; opacity:.7}
.card .dsc{margin-top:5px; font-size:13px; color:var(--muted); line-height:1.5}
.card .star{color:var(--gold); font-size:13px}

/* sponsored + featured tags */
.tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; margin-bottom:9px}
.tag.sponsored{background:var(--gold-dim); color:var(--gold); border:1px solid rgba(255,213,92,.3)}

/* discover strip slightly bolder cards */
.discover .card{border-inline-start-width:3px}

/* featured/discover: 3-column layout (phones collapse to 2 — see mobile block) */
#discoverGrid{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){#discoverGrid{grid-template-columns:repeat(3,1fr)}}

/* homepage column order (desktop/tablet): featured → popular → news → browse-by-category */
.content-main{display:flex; flex-direction:column}
#searchSection {order:0}
#featuredSection{order:1}
#popularSection{order:2}
#latestNews    {order:3}
#tilesSection  {order:4}

/* clickable "Latest news" heading links to the full archive */
.block-head h2 a{color:inherit; cursor:pointer; transition:color .15s}
.block-head h2 a:hover{color:var(--gold)}

/* ---------------- footer ---------------- */
footer{position:relative; z-index:2; padding-block:40px 50px; color:var(--muted); font-size:13px}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center}
footer a.gold{color:var(--gold)}

/* loading + empty */
.note{color:var(--muted); padding:30px 0; font-size:15px}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(10px); animation:rise .5s ease forwards}
  @keyframes rise{to{opacity:1; transform:none}}
}

/* ---------------- category tiles (home) ---------------- */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  border-top:3px solid var(--accent,var(--gold));padding:18px 18px 16px;backdrop-filter:blur(6px)}
.tile-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.tile-head h3{margin:0;font-size:18px;font-weight:600;flex:1;min-width:0}
.tile-count{font-size:12px;color:var(--muted);background:var(--surface-2);
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.tile-links{list-style:none;margin:0 0 13px;padding:0;display:flex;flex-direction:column;gap:8px}
.tile-links a{font-size:14px;color:var(--text);opacity:.85;transition:.15s;
  display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-links a:hover{opacity:1;color:var(--gold)}
.see-all{font-size:13px;font-weight:600;color:var(--gold)}
.see-all:hover{text-decoration:underline}

/* ---------------- category page header ---------------- */
.cat-hero{position:relative;z-index:2;padding-block:26px 6px}
.cat-hero h1{margin:8px 0 6px;font-weight:700;line-height:1.1;
  font-size:clamp(26px,4vw,40px);display:flex;align-items:center;gap:12px}
html[data-lang="en"] .cat-hero h1{font-family:"Space Grotesk",sans-serif}
html[data-lang="ar"] .cat-hero h1{font-family:"Noto Kufi Arabic",sans-serif}
.cat-hero .count{font-size:14px;color:var(--muted)}
.backhome{display:inline-block;font-size:14px;color:var(--muted);transition:.15s}
.backhome:hover{color:var(--gold)}

/* ---------------- search ---------------- */
.searchbar{position:relative;margin-top:20px;max-width:560px}
.searchbar .search-ico{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);
  font-size:15px;opacity:.6;pointer-events:none}
.searchbar input{width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;color:var(--text);font:inherit;font-size:15px;
  padding:13px 18px;padding-inline-start:44px;backdrop-filter:blur(8px);outline:none;transition:.2s}
.searchbar input:focus{border-color:var(--gold);background:var(--surface-2)}
.searchbar input::placeholder{color:var(--muted)}

/* ---------------- submit form ---------------- */
.submitform{display:flex;flex-direction:column;gap:16px}
.submitform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.submitform input,.submitform select{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:15px;padding:11px 14px;outline:none;transition:.2s}
.submitform input:focus,.submitform select:focus{border-color:var(--gold);background:var(--surface-2)}
.submitform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.submitform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn{align-self:flex-start;background:var(--gold);color:#1a1606;border:none;border-radius:999px;
  font:inherit;font-weight:700;font-size:15px;padding:12px 28px;cursor:pointer;transition:.15s}
.btn:hover{filter:brightness(1.08)}
.hint{font-size:12px;color:var(--muted);margin:0}
.okmsg{background:var(--gold-dim);border:1px solid rgba(255,213,92,.3);color:var(--gold);
  border-radius:var(--radius);padding:18px 20px;font-size:16px;font-weight:600}
@media (max-width:560px){.submitform .row2{grid-template-columns:1fr}}

/* ---------------- content layout + sidebar ---------------- */
.content-grid{display:block}
.content-grid.has-aside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.content-main{min-width:0}
.sidebar{display:flex;flex-direction:column;gap:18px;padding-block:30px}
.sidebar .widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;backdrop-filter:blur(6px)}
.sidebar .widget h4{margin:0 0 12px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sidebar iframe{width:100%;border:0;display:block;border-radius:var(--radius-sm)}
@media (min-width:901px){.sidebar{position:sticky;top:14px}}
@media (max-width:900px){.content-grid.has-aside{grid-template-columns:1fr}}

/* ---------------- category intro + cross-links ---------------- */
.cat-intro{max-width:760px;margin-top:12px;color:var(--text-dim);font-size:16px;line-height:1.7}
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cat-nav a{font-size:13px;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:6px 14px;text-decoration:none;transition:.15s}
.cat-nav a:hover{border-color:var(--gold);color:var(--text)}
.cat-nav a.current{background:var(--gold-dim);border-color:rgba(255,213,92,.35);color:var(--gold)}

/* ---------------- like button + click cards ---------------- */
.card-wrap{position:relative;display:flex}
.card-wrap .card{flex:1;width:100%}
.like{position:absolute;top:12px;inset-inline-end:12px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(8,6,24,.45);border:1px solid var(--border);border-radius:999px;color:var(--muted);
  font:inherit;font-size:12px;line-height:1;padding:5px 10px;cursor:pointer;z-index:2;
  backdrop-filter:blur(4px);transition:.15s}
.like:hover{border-color:var(--gold);color:var(--text)}
.like.liked{color:#ff6b81;border-color:rgba(255,107,129,.45)}
.like .hrt{font-size:13px}
.like .lc{font-variant-numeric:tabular-nums;min-width:6px}

/* ---------------- popular (most clicked / liked) ---------------- */
.popular-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pop-col h3{margin:0 0 12px;font-size:14px;color:var(--text-dim);font-weight:600}
.pop-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text);border:1px solid transparent;transition:.15s}
.pop-item:hover{background:var(--surface);border-color:var(--border)}
.pop-rank{flex:none;width:22px;height:22px;border-radius:6px;background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;font-size:12px;font-weight:700}
.pop-item:nth-child(1) .pop-rank{background:var(--gold-dim);color:var(--gold)}
.pop-t{flex:0 1 auto;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-c{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* each popular list = tight 2-column grid (max 4 items per list, set in app.js) */
#mostClicked,#mostLiked{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px}
#mostClicked .pop-item,#mostLiked .pop-item{padding:8px 10px;gap:8px}
@media (max-width:640px){.popular-grid{grid-template-columns:1fr}}

/* ============================================================
   MOBILE HOME DECLUTTER  (added v1.1 — phones only, ≤700px)
   Reorders the homepage column so the stack reads:
     featured (compact)  ->  news grid  ->  the rest (tiles, popular)
   and shrinks the featured cards' font. Desktop is unaffected.
   To widen/narrow the effect, change the 700px below.
   ============================================================ */
@media (max-width:700px){
  /* turn the main column into a flex stack so we can reorder it */
  .content-main{display:flex; flex-direction:column}

  #searchSection {order:0}  /* search results stay on top when active */
  #featuredSection{order:1} /* featured links: top */
  #latestNews    {order:2}  /* news grid: middle */
  #tilesSection  {order:3}  /* browse-by-category: moved below the news */
  #popularSection{order:4}  /* most clicked/liked: last */

  /* shorter section spacing on phones */
  section.block{padding-block:20px}

  /* compact the FEATURED cards: smaller font + tighter boxes */
  #featuredSection .block-head{margin-bottom:10px}
  #featuredSection .block-head h2{font-size:18px}
  #featuredSection .grid{grid-template-columns:repeat(2,1fr); gap:10px}
  #featuredSection .card{padding:11px 13px; border-radius:var(--radius-sm)}
  #featuredSection .card .ttl{font-size:14px; gap:6px}
  #featuredSection .card .ttl .ext{font-size:11px}
  #featuredSection .card .dsc{
    font-size:12px; margin-top:3px; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
}