/* =========================================================
   NASHRAH SHIREEN — Global News, Journals & Publishing Portal
   ========================================================= */
:root{
  --ivory:#FBF6EC;
  --ivory-2:#F3ECDC;
  --emerald:#0E4B3A;
  --emerald-deep:#0A342A;
  --emerald-soft:#E4EFE9;
  --gold:#C9A227;
  --gold-light:#E8CE7B;
  --maroon:#7A1F2B;
  --text:#22201B;
  --muted:#665F52;
  --line:rgba(201,162,39,0.35);
  --radius-pill:999px;
  --radius-md:14px;
  --shadow-soft:0 8px 24px rgba(14,75,58,0.10);
  --topbar-h:76px;
  --navbar-h:58px;
  --border-frame:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--ivory);
  background-image:
    radial-gradient(circle at 12% -8%, rgba(201,162,39,0.22), transparent 42%),
    radial-gradient(circle at 100% 6%, rgba(14,75,58,0.16), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(122,31,43,0.08), transparent 45%),
    url('../assets/bg-pattern.svg');
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-size:cover, cover, cover, 170px;
  background-attachment:fixed, fixed, fixed, fixed;
  color:var(--text);
  font-family:'Noto Serif','Noto Sans',serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

:lang(ur){ font-family:'Noto Nastaliq Urdu', serif; direction:rtl; }
:lang(ar){ font-family:'Noto Naskh Arabic', serif; direction:rtl; }
:lang(fa){ font-family:'Noto Naskh Arabic', serif; direction:rtl; }
:lang(hi){ font-family:'Noto Sans Devanagari','Noto Serif', serif; }

h1,h2,h3,h4,.brand-title,.badge{ font-family:'Amiri', 'Noto Naskh Arabic', serif; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--gold-light); color:var(--emerald-deep); }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--maroon);
  outline-offset:2px;
  border-radius:6px;
}

/* ORNAMENTAL PAGE FRAME */
.page-frame{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
}
.page-frame::before,
.page-frame::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:var(--border-frame);
  background-image:url('../assets/border-strip.svg');
  background-repeat:repeat-x;
  background-size:40px 14px;
}
.page-frame::before{ top:0; }
.page-frame::after{ bottom:0; transform:scaleY(-1); }
.frame-side{
  position:absolute;
  top:0; bottom:0;
  width:2px;
}
.frame-side.left{ left:var(--border-frame); background:linear-gradient(var(--gold),var(--gold-light),var(--gold)); }
.frame-side.right{ right:var(--border-frame); background:linear-gradient(var(--gold),var(--gold-light),var(--gold)); }
.frame-corner{
  position:absolute;
  width:100px; height:100px;
  background-image:url('../assets/corner.svg');
  background-repeat:no-repeat;
  background-size:100px 100px;
  opacity:0.9;
}
.frame-corner.tl{ top:0; left:0; }
.frame-corner.tr{ top:0; right:0; transform:scaleX(-1); }
.frame-corner.bl{ bottom:0; left:0; transform:scaleY(-1); }
.frame-corner.br{ bottom:0; right:0; transform:scale(-1,-1); }

.site-shell{ padding: var(--border-frame); }

/* TOPBAR */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:var(--topbar-h);
  padding:0 22px;
  background:linear-gradient(180deg,var(--emerald) 0%, var(--emerald-deep) 100%);
  color:var(--ivory);
  border-bottom:2px solid var(--gold);
}
.topbar .brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:34px;height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, var(--maroon) 130%);
  display:flex;align-items:center;justify-content:center;
  color:var(--emerald-deep);
  font-weight:700;
  font-size:14px;
  flex-shrink:0;
}
.brand-title{ font-size:22px; letter-spacing:0.3px; line-height:1.1; }
.brand-sub{ font-size:11px; color:var(--gold-light); letter-spacing:0.5px; }
.topbar-meta{ display:flex; align-items:center; gap:22px; font-size:12.5px; color:var(--ivory-2); }
.topbar-meta .meta-item{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.35; }
.topbar-meta .meta-item span.label{ color:var(--gold-light); font-size:10px; letter-spacing:0.6px; text-transform:uppercase; }
.topbar-meta a{ color:var(--ivory); }
.topbar-meta a:hover{ color:var(--gold-light); }

/* =========================================================
   NAVBAR — simple horizontal row of buttons, directly under
   the topbar. Each button is its own page — no dropdowns.
   ========================================================= */
.navbar{
  position:sticky;
  top:0;
  z-index:28;
  background:var(--emerald-soft);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.navbar-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:10px 18px;
}
.nav-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  border-radius:var(--radius-pill);
  background:#fff;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  color:var(--emerald-deep);
  box-shadow:0 2px 8px rgba(14,75,58,0.06);
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-btn .ico{ font-size:14px; }
.nav-btn:hover{ transform:translateY(-2px); background:var(--emerald); color:var(--ivory); border-color:var(--emerald); }
.nav-btn.active{ background:var(--maroon); color:var(--ivory); border-color:var(--maroon); }

main{ padding:36px 34px 60px; max-width:1180px; margin:0 auto; width:100%; }

/* BADGES */
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; justify-content:center; }
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:var(--radius-pill); background:#fff; border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--emerald-deep); box-shadow:var(--shadow-soft);
}
.badge .dot{ width:8px;height:8px;border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,0.25); }
.badge.browser-badge{ background:linear-gradient(90deg, var(--emerald) 0%, var(--emerald-deep) 100%); color:var(--ivory); border-color:var(--emerald-deep); }
.badge.browser-badge .dot{ background:var(--gold-light); }

/* HERO */
.hero{ position:relative; text-align:center; padding:46px 20px 40px; margin-bottom:20px; }
.hero-arch{ width:210px; margin:0 auto 6px; opacity:0.95; }
.hero h1{ font-size:44px; margin:0 0 6px; color:var(--emerald-deep); }
.hero .tagline-block{ display:flex; flex-direction:column; gap:2px; margin-bottom:18px; }
.hero .tagline-block span{ font-size:15px; color:var(--muted); }
.hero p.lede{ max-width:640px; margin:0 auto 22px; color:var(--muted); font-size:15px; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  border-radius:var(--radius-pill); font-size:14px; font-weight:600; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--maroon); color:var(--ivory); box-shadow:0 6px 18px rgba(122,31,43,0.30); }
.btn-outline{ background:transparent; border-color:var(--emerald); color:var(--emerald-deep); }
.btn-outline:hover{ background:var(--emerald-soft); }

/* PAGE HEADER (used on inner pages instead of the big hero) */
.page-head{ text-align:center; padding:34px 20px 24px; margin-bottom:10px; }
.page-head .page-ico{ font-size:30px; display:block; margin-bottom:8px; }
.page-head h1{ font-size:32px; margin:0 0 8px; color:var(--emerald-deep); }
.page-head p{ max-width:600px; margin:0 auto; color:var(--muted); font-size:14.5px; }

/* SECTIONS */
.section{ margin-bottom:46px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:16px; border-bottom:1px dashed var(--line); padding-bottom:10px;
}
.section-head h2{ font-size:22px; color:var(--emerald-deep); margin:0; }
.section-head .section-note{ font-size:12.5px; color:var(--muted); }

.pill-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px;
  border-radius:var(--radius-pill); background:#fff; border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--text); box-shadow:var(--shadow-soft);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.pill:hover{ transform:translateY(-2px); background:var(--emerald); color:var(--ivory); border-color:var(--emerald); }
.pill .ico{ font-size:14px; }
.pill.pill-gold{ border-color:var(--gold); }
.pill.pill-gold:hover{ background:var(--gold); color:var(--emerald-deep); }

.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.cat-card{
  display:flex; flex-direction:column; gap:10px; padding:18px;
  border-radius:var(--radius-md); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft);
}
.cat-card .cat-head{ display:flex; align-items:center; gap:10px; }
.cat-card .cat-ico{
  width:30px;height:30px; border-radius:50%; background:var(--emerald-soft);
  display:flex;align-items:center;justify-content:center; font-size:14px; color:var(--emerald-deep); flex-shrink:0;
}
.cat-card h3{ font-size:16px; margin:0; color:var(--emerald-deep); }
.cat-card p{ font-size:12.5px; color:var(--muted); margin:0; }
.cat-card .cat-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.cat-card .cat-links a{ font-size:12px; padding:6px 11px; border-radius:var(--radius-pill); background:var(--ivory-2); color:var(--emerald-deep); font-weight:600; }
.cat-card .cat-links a:hover{ background:var(--gold-light); }

.lang-select{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.lang-select button{
  border:1px solid var(--line); background:#fff; padding:6px 12px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:600; color:var(--emerald-deep);
}
.lang-select button.active, .lang-select button:hover{ background:var(--emerald); color:var(--ivory); border-color:var(--emerald); }

.divider{ display:flex; align-items:center; gap:12px; margin:40px 0; color:var(--gold); }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider span{ font-size:16px; }

/* Home category launcher grid (buttons to each page) */
.launcher-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:10px; }
.launcher-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:22px 14px; border-radius:var(--radius-md); background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-soft); transition:transform .15s ease, background .15s ease, color .15s ease;
}
.launcher-card .ico{ font-size:22px; }
.launcher-card .name{ font-weight:700; font-size:14px; }
.launcher-card .count{ font-size:11.5px; color:var(--muted); }
.launcher-card:hover{ transform:translateY(-3px); background:var(--emerald); color:var(--ivory); }
.launcher-card:hover .count{ color:var(--gold-light); }

/* FOOTER */
footer{
  background:linear-gradient(180deg,var(--emerald-deep) 0%, var(--emerald) 100%);
  color:var(--ivory-2); padding:36px 30px 26px; border-top:2px solid var(--gold);
}
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:26px; max-width:1180px; margin:0 auto; }
.footer-grid h4{ color:var(--gold-light); font-size:13px; text-transform:uppercase; letter-spacing:0.6px; margin:0 0 12px; }
.footer-grid p, .footer-grid a{ font-size:13px; color:var(--ivory-2); line-height:1.9; }
.footer-grid a:hover{ color:var(--gold-light); }
.footer-bottom{
  max-width:1180px; margin:24px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,0.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11.5px; color:rgba(255,255,255,0.65);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .topbar-meta{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  main{ padding:28px 18px 50px; }
  .hero h1{ font-size:32px; }
  .navbar-inner{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .nav-btn{ flex:0 0 auto; }
}
@media (max-width: 560px){
  :root{ --topbar-h:64px; --border-frame:8px; }
  .brand-title{ font-size:17px; }
  .brand-sub{ display:none; }
  .frame-corner{ width:60px;height:60px;background-size:60px 60px; }
  .hero-arch{ width:150px; }
  .hero h1{ font-size:26px; }
  .page-head h1{ font-size:26px; }
  .pill{ font-size:12.5px; padding:9px 13px; }
  .badge{ font-size:11.5px; padding:7px 12px; }
  .nav-btn{ font-size:12px; padding:8px 14px; }
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}