/* =====================================================================
   Islamic Station — Main Stylesheet
   Built on top of Bootstrap 5 (see header.php for CDN links)
   ===================================================================== */

:root{
  --emerald-950:#052E1F;
  --emerald-900:#0A3D28;
  --emerald-800:#0E5236;
  --emerald-700:#0F8A5F;   /* Primary */
  --emerald-600:#17A374;
  --gold-500:#D4AF37;      /* Accent */
  --gold-400:#E3C560;
  --gold-100:#F6ECC9;
  --white:#FFFFFF;
  --bg:#F4F5F6;            /* Light Gray background */
  --surface:#FFFFFF;
  --ink:#182620;
  --ink-soft:#5B6A62;
  --line:rgba(10,61,40,.12);
  --radius:14px;
}

[data-theme="dark"]{
  --bg:#0B1712;
  --surface:#122019;
  --ink:#EAF2EC;
  --ink-soft:#9FB3A8;
  --line:rgba(255,255,255,.09);
  --white:#122019;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins', sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
.arabic, .font-arabic{ font-family:'Noto Naskh Arabic', serif; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; }
.container-xl{ max-width:1360px; }

::selection{ background:var(--gold-400); color:var(--emerald-950); }

/* subtle geometric islamic pattern (SVG data-uri, reusable) */
.pattern-dark{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><g fill='none' stroke='%23D9B84A' stroke-width='0.8' opacity='0.16'><path d='M42 4 L52 22 L72 22 L58 36 L64 56 L42 44 L20 56 L26 36 L12 22 L32 22 Z'/></g></svg>");
  background-repeat:repeat;
}
.pattern-light{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><g fill='none' stroke='%230F8A5F' stroke-width='0.7' opacity='0.06'><path d='M42 4 L52 22 L72 22 L58 36 L64 56 L42 44 L20 56 L26 36 L12 22 L32 22 Z'/></g></svg>");
  background-repeat:repeat;
}

/* ---------- Top utility bar ---------- */
.topbar{ background:var(--emerald-950); color:var(--gold-100); font-size:12.5px; }
.topbar a{ opacity:.85; } .topbar a:hover{ opacity:1; color:var(--gold-400); }

/* ---------- Sticky header ---------- */
header.site-header{
  position:sticky; top:0; z-index:1050; background:var(--surface);
  border-bottom:1px solid var(--line); box-shadow:0 2px 18px rgba(6,42,28,.06);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg,var(--emerald-700),var(--emerald-950));
  display:flex; align-items:center; justify-content:center; position:relative;
}
.brand .mark::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--gold-500); opacity:.55; }
.brand .word .en{ font-family:'Noto Naskh Arabic', serif; font-weight:700; font-size:23px; color:var(--emerald-900); }
[data-theme="dark"] .brand .word .en{ color:var(--gold-100); }
.brand .word .tag{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-500); font-weight:600; }

.searchbar{
  display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:9px 8px 9px 18px; position:relative;
}
.searchbar input{ border:none; background:transparent; outline:none; flex:1; font-size:14px; color:var(--ink); min-width:0; }
.searchbar .go{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg,var(--gold-400),var(--gold-500));
  display:flex; align-items:center; justify-content:center;
}
#liveSearchResults{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px rgba(6,42,28,.15);
  max-height:360px; overflow-y:auto; display:none; z-index:60;
}
#liveSearchResults a{ display:flex; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; }
#liveSearchResults a:hover{ background:var(--bg); }
#liveSearchResults .tag{ font-size:10px; color:var(--gold-500); text-transform:uppercase; letter-spacing:.05em; }

.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.btn-donate{
  background:var(--emerald-800); color:#fff !important; padding:10px 22px; border-radius:999px;
  font-size:13.5px; font-weight:500;
}

/* ---------- Navigation ---------- */
nav.mainnav{ background:var(--emerald-900); position:relative; }
.navlist{ display:flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.navlist .nav-item{ position:relative; }
.navlist .nav-link{
  display:flex; align-items:center; gap:6px; padding:15px 18px; font-size:13.5px; font-weight:500;
  color:#E7EFE9 !important; border-bottom:2.5px solid transparent; white-space:nowrap;
}
.navlist .nav-item.active .nav-link{ color:var(--gold-400) !important; border-bottom-color:var(--gold-500); }
.navlist .nav-link:hover{ color:var(--gold-400) !important; }
.navlist .caret{ width:9px; height:9px; opacity:.75; }

.mega-dropdown{
  display:none; position:absolute; top:100%; left:0; background:var(--surface); min-width:230px;
  border:1px solid var(--line); border-top:2px solid var(--gold-500); border-radius:0 0 10px 10px;
  box-shadow:0 20px 40px rgba(6,42,28,.18); padding:10px; z-index:70;
}
.nav-item:hover .mega-dropdown{ display:block; }
.mega-dropdown a{ display:block; padding:9px 14px; border-radius:8px; font-size:13.5px; color:var(--ink); }
.mega-dropdown a:hover{ background:var(--bg); color:var(--emerald-700); }

/* ---------- Hero slider ---------- */
.hero{ position:relative; height:560px; overflow:hidden; background:var(--emerald-950); }
.hero .slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
.hero .slide.active{ opacity:1; }
.hero .slide::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,20,14,.15) 0%, rgba(6,20,14,.35) 55%, rgba(6,20,14,.82) 100%); }
.hero-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 20px 64px; }
.hero-inner{ max-width:680px; margin:0 auto; }
.hero h1{ font-family:'Noto Naskh Arabic', serif; color:#fff; font-size:50px; line-height:1.15; margin:14px 0 18px; text-shadow:0 4px 24px rgba(0,0,0,.35); }
.hero p{ color:rgba(255,255,255,.85); font-size:16px; max-width:520px; margin-bottom:26px; }
.hero-ctas .btn-primary-gold{ background:linear-gradient(155deg,var(--gold-400),var(--gold-500)); color:var(--emerald-950); padding:13px 26px; border-radius:999px; font-weight:600; font-size:14px; border:none; }
.hero-ctas .btn-outline-light{ border:1.5px solid rgba(255,255,255,.55); color:#fff; padding:13px 26px; border-radius:999px; font-weight:500; font-size:14px; background:transparent; }
.hero-dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:9px; }
.hero-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; }
.hero-dots span.on{ background:var(--gold-400); width:26px; border-radius:5px; }
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; }
.hero-arrow.left{ left:24px; } .hero-arrow.right{ right:24px; }

/* ---------- Section shell ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:34px; flex-wrap:wrap; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-500); }
.section-head h2{ font-family:'Noto Naskh Arabic', serif; font-size:32px; color:var(--ink); margin-top:6px; }
.view-all{ font-size:13.5px; font-weight:600; color:var(--emerald-700); border-bottom:1.5px solid var(--gold-500); padding-bottom:3px; }

/* ---------- Content cards ---------- */
.content-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.2s; height:100%; }
.content-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(6,42,28,.12); }
.content-card .thumb{ position:relative; height:150px; background-size:cover; background-position:center; background-color:var(--emerald-800); }
.content-card .thumb .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,20,14,.05), rgba(6,20,14,.45)); display:flex; align-items:center; justify-content:center; }
.content-card .thumb .play-circle{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
.content-card .thumb .badge-cat{ position:absolute; top:10px; left:10px; background:var(--gold-500); color:var(--emerald-950); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.content-card .thumb .fav-btn{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(6,20,14,.5); display:flex; align-items:center; justify-content:center; }
.content-card .body{ padding:16px; }
.content-card h3{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; margin-bottom:8px; min-height:40px; }
.content-card .meta{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.content-card .avatar-sm{ width:19px; height:19px; border-radius:50%; background:var(--emerald-700); color:#fff; font-size:8.5px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.content-card .foot{ display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--line); font-size:11px; color:var(--ink-soft); }
.content-card .btn-view{ font-size:11.5px; font-weight:600; color:var(--emerald-700); }

/* ---------- Reciter circles ---------- */
.reciter-item{ text-align:center; width:140px; flex:0 0 auto; }
.reciter-item .photo{
  width:110px; height:110px; border-radius:50%; margin:0 auto 12px; position:relative;
  background:linear-gradient(155deg,var(--emerald-700),var(--emerald-950)); color:var(--gold-100);
  font-family:'Noto Naskh Arabic',serif; font-size:28px; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:3px solid var(--surface); box-shadow:0 8px 22px rgba(6,42,28,.16); background-size:cover; background-position:center;
}
.reciter-item .photo::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--gold-500); opacity:.6; }
.reciter-item h4{ font-size:13px; font-weight:600; margin-bottom:2px; }
.reciter-item span{ font-size:11px; color:var(--ink-soft); }

/* ---------- Category tiles ---------- */
.cat-tile{ border:1px solid var(--line); border-radius:16px; padding:28px 14px; text-align:center; transition:.2s; background:var(--surface); height:100%; }
.cat-tile:hover{ border-color:var(--gold-500); box-shadow:0 14px 28px rgba(6,42,28,.08); transform:translateY(-3px); }
.cat-tile .ico{ width:56px; height:56px; margin:0 auto 14px; border-radius:14px; background:linear-gradient(155deg,var(--emerald-800),var(--emerald-950)); display:flex; align-items:center; justify-content:center; }
.cat-tile h4{ font-size:13.5px; font-weight:600; margin-bottom:4px; }
.cat-tile span{ font-size:11px; color:var(--ink-soft); }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--emerald-950); color:rgba(255,255,255,.75); }
footer.site-footer h5{ color:#fff; font-size:13.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin-bottom:18px; }
footer.site-footer a{ color:rgba(255,255,255,.62); font-size:13.5px; }
footer.site-footer a:hover{ color:var(--gold-400); }
.foot-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; }
.foot-social a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--emerald-950); }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.5); padding:20px 0; }

/* ---------- Misc components ---------- */
.back-to-top{
  position:fixed; bottom:26px; right:26px; width:46px; height:46px; border-radius:50%;
  background:var(--emerald-800); color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(6,42,28,.3); z-index:900; border:none;
}
.back-to-top.show{ display:flex; }

.theme-toggle{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg); display:flex; align-items:center; justify-content:center; }

.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1200; background:var(--emerald-950); color:#fff;
  padding:16px 20px; display:none; box-shadow:0 -8px 24px rgba(0,0,0,.2);
}
.cookie-banner.show{ display:flex; }
.cookie-banner a{ color:var(--gold-400); text-decoration:underline; }

.ad-slot{ border:1.5px dashed var(--line); border-radius:14px; min-height:100px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; background:var(--surface); }

.breadcrumb-bar{ background:var(--surface); border-bottom:1px solid var(--line); padding:14px 0; font-size:12.5px; }
.breadcrumb-bar a{ color:var(--ink-soft); } .breadcrumb-bar a:hover{ color:var(--emerald-700); }

.page-loader{ position:fixed; inset:0; background:var(--bg); z-index:2000; display:flex; align-items:center; justify-content:center; transition:opacity .4s ease; }
.page-loader .spinner{ width:44px; height:44px; border:3px solid var(--line); border-top-color:var(--gold-500); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.page-loader.hide{ opacity:0; pointer-events:none; }

.pagination .page-link{ border-radius:8px !important; margin:0 3px; color:var(--emerald-800); border-color:var(--line); }
.pagination .page-item.active .page-link{ background:var(--emerald-700); border-color:var(--emerald-700); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .navlist .nav-link{ padding:14px 14px; }
  .hero{ height:480px; }
  .hero h1{ font-size:38px; }
}
@media (max-width:768px){
  .searchbar{ display:none; }
  .searchbar.mobile-open{ display:flex; width:100%; margin-top:12px; }
  nav.mainnav .navlist{ display:none; flex-direction:column; align-items:stretch; padding:8px 0 16px; }
  nav.mainnav .navlist.open{ display:flex; }
  .navlist .nav-item{ width:100%; }
  .navlist .nav-link{ border-bottom:1px solid rgba(255,255,255,.08); justify-content:space-between; }
  .mega-dropdown{ display:none !important; position:static; box-shadow:none; border:none; background:rgba(255,255,255,.04); }
  .nav-item.open .mega-dropdown{ display:block !important; }
  .hero{ height:420px; }
  .hero h1{ font-size:28px; }
  .hero p{ font-size:13.5px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .section-head h2{ font-size:24px; }
}