/* ===== Jawabpedia – Global Theme (non-breaking, additive) ===== */
:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;
  --primary:#0ea5e9;      /* cyan-500 */
  --primary-600:#0284c7;  /* cyan-600 */
  --accent:#22c55e;       /* green */
}

html{scroll-behavior:smooth;}
body{
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  font-size:17px;
}

/* Headings */
h1,h2,h3,h4{ color:#0b1220; letter-spacing:-.01em; }
h1{ font-size:2rem; line-height:1.2; }
h2{ font-size:1.5rem; margin-top:1rem; }
h3{ font-size:1.25rem; margin-top:.75rem; }

/* Links */
a{ color:#0ea5e9; }
a:hover{ color:var(--primary-600); text-decoration:underline; }

/* Header + Nav spacing stays; only improve contrast */
header{ background:#fff; border-bottom:1px solid var(--border); }
header a{ color:#0b1220; text-decoration:none; }
header a:hover{ color:var(--primary-600); }

/* Generic containers */
.container-narrow{ max-width:920px; margin-inline:auto; }
.section{ padding: 1rem 0; }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 1px 1px rgba(15,23,42,.02);
}
.card:hover{ box-shadow: 0 6px 16px rgba(15,23,42,.06); }

/* Buttons */
button, .btn{
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.45rem .9rem;
  font-size:.95rem;
  cursor:pointer;
  transition: all .15s ease;
}
button:hover, .btn:hover{ background:#f1f5f9; }
.btn-primary{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); }

/* Inputs */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:.6rem .8rem;
  outline:none; width:100%;
}
input:focus, textarea:focus, select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,165,233,.15); }

/* Lists of questions */
#questions-list a, #trending-list a{
  display:block;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding: .95rem 1rem;
  line-height:1.75;
  text-decoration:none!important;
}
#questions-list a:hover, #trending-list a:hover{ background:#f8fafc; }
#questions-list h4, #trending-list h4{ font-size:1.05rem; }
#questions-list p, #trending-list p{ color:var(--muted); }

/* Filters / chips */
#filters button, #flows button, .chips button, #admin-tags-suggest button{
  border-radius:999px; padding:.4rem .75rem; border:1px solid var(--border);
  background:#fff; font-size:.9rem;
}
#filters button:hover, #flows button:hover, .chips button:hover, #admin-tags-suggest button:hover{
  background:#f1f5f9;
}
#filters .active, .chips .active{ background:#e0f2fe; border-color:#bae6fd; }

/* Question page readability */
#question-tldr{ font-size:1.1rem; color:#1d4ed8; }
#question-body{ max-width:820px; margin:0 auto; font-size:1.06rem; color:#1f2937; white-space:pre-line; }
#question-body p{ margin:.6rem 0; }
#question-body ol, #question-body ul{ padding-right:1.25rem; margin:.9rem 0; }
#question-body li{ margin:.32rem 0; }
#question-extra{ max-width:820px; margin:1rem auto; background:#eff6ff; border-left:4px solid #93c5fd; }

/* Admin list items */
#admin-questions .p-2{ background:#fff; }
#admin-questions .p-2:hover{ background:#f8fafc; }

/* Footer */
footer{ background:#fff; border-top:1px solid var(--border); }

@media (min-width:1024px){
  body{ font-size:18px; }
  h1{ font-size:2.2rem; }
}