@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap');

/* ── Reset & Base ─────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:        #f5f2eb;
  --ink:       #111111;
  --accent:    #d63a2a;
  --mid:       #888;
  --border:    #111111;
  --card-bg:   #ffffff;
  --tag-bg:    #111111;
  --tag-fg:    #f5f2eb;
  --font-mono: 'Space Mono', monospace;
  --font-disp: 'Bebas Neue', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Hero ─────────────────────────────────── */
.hero {
  border-bottom: 3px solid var(--border);
  padding: 4rem 2rem 2.5rem;
  background-color: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* text-align: center; */
}

.hero::before {
  content: 'ISLAMQA';
  position: absolute;
  top: -1rem;
  right: -1rem;
  font-family: var(--font-disp);
  font-size: clamp(6rem, 18vw, 14rem);
  color: rgba(255,255,255,0.04);
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.hero h1 {
  font-family: var(--font-disp);
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--bg);
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 0.8rem;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2rem;
}

/* ── Search Form ──────────────────────────── */
.search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: min(100%, 720px);
  border: 2px solid var(--bg);
}

.search-form input[type="text"] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.65rem 1rem;
  min-width: 0;
  letter-spacing: 0.04em;
}

.search-form input::placeholder {
  color: rgba(245,242,235,0.35);
}

.search-form button {
  background: var(--accent);
  border: none;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
}

.search-form button:hover {
  background: #b82e1f;
}

.filter-menu { position:relative; border-left:2px solid var(--bg); }
.filter-menu summary { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; width:46px; height:100%; padding:.6rem; color:var(--bg); cursor:pointer; list-style:none; }
.filter-menu summary::-webkit-details-marker { display:none; }
.filter-menu summary:hover { color:var(--accent); }
.filter-icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.filter-dot { position:absolute; top:7px; right:7px; width:7px; height:7px; border:1px solid var(--ink); border-radius:50%; background:var(--accent); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.filter-panel { position:absolute; z-index:20; top:calc(100% + 8px); right:0; width:min(340px, calc(100vw - 2rem)); padding:1.1rem; display:grid; gap:1rem; background:var(--bg); color:var(--ink); border:2px solid var(--border); box-shadow:5px 5px 0 var(--accent); }
.filter-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:.75rem; border-bottom:1px solid var(--soft-border); }
.filter-heading strong { font-family:var(--font-disp); font-size:1.35rem; letter-spacing:.05em; }
.filter-heading a { color:var(--accent); font-size:.65rem; font-weight:700; letter-spacing:.1em; }
.filter-panel fieldset { min-width:0; border:0; }
.filter-panel legend { margin-bottom:.55rem; color:var(--muted); font-size:.65rem; font-weight:700; letter-spacing:.12em; }
.choice-grid { display:grid; gap:.4rem; }
.choice-grid.two-columns { grid-template-columns:1fr 1fr; }
.tag-choices { grid-template-columns:repeat(2, minmax(0, 1fr)); max-height:180px; overflow-y:auto; padding-right:3px; }
.choice-chip { display:block; min-width:0; cursor:pointer; }
.choice-chip input { position:absolute; opacity:0; pointer-events:none; }
.choice-chip span { display:block; padding:.55rem .65rem; overflow:hidden; border:1px solid var(--soft-border); background:#fff; color:var(--muted); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.choice-chip input:checked + span { border-color:var(--ink); background:var(--ink); color:var(--bg); }
.choice-chip input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px; }
.filter-panel .apply-filter { width:100%; margin-top:.1rem; padding:.7rem; }

.clear-link {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--mid);
  border-left: 2px solid var(--bg);
  transition: color 0.15s;
}

.clear-link:hover {
  color: var(--accent);
}

/* ── Container ────────────────────────────── */
.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

/* ── Entry Count ──────────────────────────── */
.entry-count {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--mid);
  text-transform: uppercase;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--soft-border);
}

/* ── Question Cards ───────────────────────── */
.question-card {
  border: 2px solid var(--border);
  background: var(--card-bg);
  padding: 1.1rem 1.25rem;
  margin-bottom: -2px; /* collapse borders */
  position: relative;
  transition: background 0.12s, transform 0.12s;
  cursor: default;
}

.question-card:first-of-type {
  border-top: 2px solid var(--border);
}

.question-card:hover {
  background: var(--hover-bg);
  z-index: 1;
  transform: translateX(3px);
}

/* ── Card Top Row ─────────────────────────── */
.card-top {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.q-number {
  font-family: var(--font-disp);
  font-size: 1.1rem;
  color: var(--accent);
  flex-shrink: 0;
  letter-spacing: 0.05em;
  min-width: 3rem;
}

.q-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  transition: color 0.12s;
}

.q-text:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Meta Row ─────────────────────────────── */
.meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.answered-by {
  font-size: 0.7rem;
  color: var(--mid);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 0.25rem;
}

.answered-by span {
  color: var(--ink);
  font-weight: 700;
}
.answer-language { padding:.12rem .4rem; border:1px solid var(--soft-border); color:var(--muted); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }

/* ── Tags ─────────────────────────────────── */
.tag {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--tag-fg);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--tag-bg);
  transition: background 0.12s, color 0.12s;
}

.tag:hover {
  background: var(--accent);
  border-color: var(--accent);
  cursor: pointer;
}

/* ── Empty State ──────────────────────────── */
.empty {
  color: var(--mid);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 4rem 0;
}

/* ── Scrollbar ────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--soft-border); border-radius: 3px; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 600px) {
  .hero { padding: 2.5rem 1.25rem 2rem; }
  .container { padding: 1.5rem 1.25rem 4rem; }
  .search-form { width: 100%; }
  .card-top { flex-direction: column; gap: 0.25rem; }
  .q-number { font-size: 0.9rem; }
}
/* Shared navigation and detail-page elements from the original design. */
.site-nav { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 28px; border-bottom:1px solid var(--ink); font-family:'Courier New',monospace; }
.logo { font-size:20px; font-weight:700; color:var(--ink); }
.logo span { color:#b82e1f; }
.nav-actions { display:flex; align-items:center; gap:18px; }
.questions-link { font-size:11px; letter-spacing:1.5px; color:var(--muted); }
.questions-link:hover { color:var(--accent); }
.language-toggle { display:flex; border:1px solid var(--border); }
.language-toggle a { padding:5px 8px; font-size:10px; letter-spacing:.08em; color:var(--muted); }
.language-toggle a + a { border-left:1px solid var(--border); }
.language-toggle a.active { background:var(--ink); color:var(--bg); }
footer { margin-top:60px; padding:24px 28px; border-top:1px solid var(--soft-border); font-size:11px; color:var(--muted); text-align:center; font-family:'Courier New',monospace; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid #d63a2a; outline-offset:4px; }
.hero p { text-align:center; }
.q-text { overflow-wrap:anywhere; }
.detail-container { max-width:860px; padding-top:40px; }
.back-link, .section-label { font-size:11px; color:var(--muted); font-family:'Courier New',monospace; letter-spacing:1px; }
.question-heading { margin-top:28px; padding-bottom:28px; border-bottom:1px solid var(--ink); }
.detail-number { font-size:15px; color:var(--muted); font-family:'Courier New',monospace; margin-bottom:10px; }
.question-heading h1 { font-size:22px; color:var(--ink); font-family:'Manjari',sans-serif; font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.answer-section { padding:28px 0; border-bottom:1px solid var(--ink); }
.answer-text { white-space:pre-wrap; overflow-wrap:anywhere; font-family:'Manjari',sans-serif; font-size:18px; font-weight:400; line-height:1.85; color:var(--ink); }
.section-label { margin-bottom:12px; }
.answer-link { display:flex; align-items:baseline; gap:10px; }
.arrow { color:#f5a623; }
.answer-link a { font-family:'Courier New',monospace; font-size:18px; color:#0066cc; overflow-wrap:anywhere; min-width:0; }
.detail-meta { display:flex; flex-direction:column; gap:10px; padding:28px 0; font-size:13px; font-family:'Courier New',monospace; color:var(--muted); }
.detail-author { color:var(--accent); font-size:13px; font-family:'Courier New',monospace; }
.detail-author span { color:var(--muted); }
.detail-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.error-message { margin-bottom:24px; }
@media (max-width:600px) { .site-nav { padding:14px 16px; gap:10px; } .nav-actions { gap:8px; } .questions-link { display:none; } .language-toggle a { padding:5px 6px; font-size:9px; } .search-form { flex-wrap:wrap; } .search-form input[type="text"] { flex:1 1 55%; } .search-form button { padding:0.65rem 0.75rem; } .filter-menu { border-top:2px solid var(--bg); min-height:42px; } .filter-menu summary { min-height:40px; } .filter-panel { position:fixed; top:50%; left:1rem; right:1rem; width:auto; max-height:calc(100vh - 2rem); overflow-y:auto; transform:translateY(-50%); } .clear-link { min-height:42px; border-top:2px solid var(--bg); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .question-card, .q-text, .tag, .clear-link, .search-form button { transition:none; } .question-card:hover { transform:none; } }

/* Private workbook review */
.import-shell { width:min(900px,100%); margin:0 auto; padding:3rem 2rem 5rem; }
.import-header { margin-bottom:1.5rem; }
.import-kicker { color:var(--accent); font-size:.7rem; letter-spacing:.16em; font-weight:700; }
.import-header h1 { font-family:var(--font-disp); font-size:clamp(2.3rem,7vw,4rem); letter-spacing:.04em; }
.import-header>p:last-child { color:var(--muted); font-size:.85rem; }
.import-notice,.import-error { margin:1rem 0; padding:.9rem 1rem; border:1px solid var(--ink); background:#fff; font-size:.8rem; white-space:pre-line; }
.import-error { border-color:var(--accent); color:#8f2018; }
.upload-card { display:grid; gap:.6rem; padding:1.25rem; border:2px solid var(--ink); background:#fff; }
.upload-card>label { font-family:var(--font-disp); font-size:1.4rem; letter-spacing:.05em; }
.upload-card>p { color:var(--muted); font-size:.75rem; }
.upload-controls { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.upload-controls input { flex:1; min-width:220px; font:inherit; font-size:.75rem; }
.upload-controls button,.approve-button { padding:.75rem 1rem; border:0; background:var(--accent); color:#fff; font:700 .72rem var(--font-mono); letter-spacing:.06em; cursor:pointer; }
.review-heading { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:2rem 0 .8rem; padding-bottom:.6rem; border-bottom:1px solid var(--soft-border); }
.review-heading h2 { font:1.6rem var(--font-disp); letter-spacing:.04em; }
.review-heading span,.review-source { color:var(--muted); font-size:.68rem; letter-spacing:.06em; }
.review-list { display:grid; gap:.85rem; }
.review-card { padding:1.1rem 1.2rem; border:2px solid var(--ink); background:#fff; }
.review-source { margin-bottom:.7rem; text-transform:uppercase; }
.review-card h3 { margin:.35rem 0; font:600 1.1rem/1.6 'Baloo Chettan 2',Arial,sans-serif; overflow-wrap:anywhere; }
.review-answer { max-height:260px; overflow:auto; margin-top:.75rem; padding:.8rem; border-left:3px solid var(--accent); background:#f8f6f1; font:1rem/1.7 'Baloo Chettan 2',Arial,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.review-link { margin-top:.6rem; font-size:.75rem; }
.review-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; color:var(--muted); font-size:.68rem; }
.review-tag { padding:.15rem .4rem; background:#eee; color:#333; }
.review-actions { display:flex; gap:.6rem; margin-top:1rem; }
.review-actions form { margin:0; }
.reject-button { padding:.75rem 1rem; border:1px solid #888; background:#fff; color:var(--muted); font:700 .72rem var(--font-mono); cursor:pointer; }
.recent-imports { margin-top:2rem; padding-top:.7rem; border-top:1px solid var(--soft-border); }
.recent-imports summary { cursor:pointer; color:var(--muted); font-size:.75rem; }
.recent-imports ul { padding:0; list-style:none; }
.recent-imports li { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid #ddd; font-size:.7rem; }
.recent-imports li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-published { color:#18783d; }.status-rejected { color:#8f2018; }
.manual-entry-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0; padding:1rem 1.2rem; border:2px solid var(--ink); background:#fff; }
.manual-entry-bar>div { display:grid; gap:.15rem; }
.manual-entry-bar strong { font:1.25rem var(--font-disp); letter-spacing:.04em; }
.manual-entry-bar span { color:var(--muted); font-size:.72rem; }
.manual-entry-open { padding:.75rem 1rem; border:0; background:var(--ink); color:#fff; font:700 .72rem var(--font-mono); letter-spacing:.06em; cursor:pointer; }
.question-dialog { width:min(680px,calc(100% - 2rem)); max-height:calc(100% - 2rem); margin:auto; padding:0; border:2px solid var(--ink); background:var(--bg); color:var(--ink); }
.question-dialog::backdrop { background:rgba(17,17,17,.68); }
.manual-entry-form { display:grid; gap:.8rem; max-height:calc(100vh - 4rem); overflow-y:auto; padding:1.25rem; }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--soft-border); }
.dialog-heading h2 { font:2rem var(--font-disp); letter-spacing:.04em; }
.dialog-heading .import-kicker { margin:0; }
.dialog-close { width:2rem; height:2rem; border:1px solid var(--ink); background:#fff; font:1.5rem/1 var(--font-mono); cursor:pointer; }
.form-required-note { color:var(--muted); font-size:.68rem; }
.form-required-note span,.manual-field label>span { color:var(--accent); font-weight:700; }
.manual-field { display:grid; gap:.3rem; }
.manual-field label { display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem; font-size:.72rem; font-weight:700; }
.manual-field label small { color:var(--muted); font-size:.62rem; font-weight:400; }
.manual-field textarea,.manual-field input,.manual-field select { width:100%; border:1px solid #888; border-radius:0; padding:.6rem .7rem; background:#fff; color:var(--ink); font: .78rem/1.6 var(--font-mono); }
.manual-field textarea { resize:vertical; }
.manual-field input[hidden] { display:none; }
.tag-checkboxes { display:flex; flex-wrap:wrap; gap:.4rem; max-height:150px; overflow:auto; padding:.15rem; }
.tag-checkbox { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .5rem; border:1px solid var(--soft-border); background:#fff; font-size:.68rem; cursor:pointer; }
.tag-checkbox input { width:auto; margin:0; }
.no-tags-yet { color:var(--muted); font-size:.68rem; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; padding-top:.3rem; }
.dialog-actions .approve-button,.dialog-actions .reject-button { min-width:125px; }
@media (max-width:600px) { .import-shell { padding:2rem 1rem 4rem; }.review-actions { flex-wrap:wrap; }.review-actions form,.review-actions button { flex:1; }.review-actions button { width:100%; }.recent-imports li { align-items:flex-start; } }
@media (max-width:600px) { .manual-entry-bar { align-items:flex-start; flex-direction:column; }.manual-entry-open { width:100%; }.manual-entry-form { padding:1rem; }.dialog-actions { flex-direction:column-reverse; }.dialog-actions button { width:100%; } }


/* Video answers echo the site's bold borders and red offset accents. */
.answer-video {
  margin: 16px 6px 6px 0;
  border: 2px solid var(--border);
  background: var(--card-bg);
  box-shadow: 6px 6px 0 var(--accent);
  overflow: hidden;
}
.video-heading {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: .12em;
}
.video-heading span:last-child { color: var(--accent); }
.answer-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--ink);
}
.video-source {
  display: block;
  padding: 12px 14px;
  border-top: 2px solid var(--border);
  font-size: 12px;
  font-weight: 700;
}
.video-source:hover { color: var(--accent); }
.video-source:focus-visible { outline-offset: -4px; }
.answer-link {
  padding: 16px;
  margin-right: 6px;
  border: 2px solid var(--border);
  background: var(--card-bg);
  box-shadow: 6px 6px 0 var(--accent);
}
.answer-link .arrow, .answer-link a { color: var(--accent); }
.answer-link a { font-size: 14px; }


:root {
  color-scheme: light;
  --muted: #555;
  --soft-border: #aaa;
  --hover-bg: #fdf8f0;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171614;
  --ink: #f5f2eb;
  --accent: #f06a56;
  --mid: #aaa69e;
  --border: #c5c0b6;
  --card-bg: #22211e;
  --tag-bg: #d9d3c7;
  --tag-fg: #171614;
  --muted: #b8b2a8;
  --soft-border: #59554e;
  --hover-bg: #302a24;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  background: var(--card-bg);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--accent);
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-sun { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
[data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .hero { background: #10100f; color: var(--ink); }
[data-theme="dark"] .hero h1,
[data-theme="dark"] .search-form input,
[data-theme="dark"] .filter-menu summary { color: var(--ink); }
[data-theme="dark"] .search-form,
[data-theme="dark"] .filter-menu,
[data-theme="dark"] .clear-link { border-color: var(--soft-border); }
[data-theme="dark"] .search-form input::placeholder { color: var(--mid); }
[data-theme="dark"] .choice-chip span,
[data-theme="dark"] .dialog-close,
[data-theme="dark"] .manual-field textarea,
[data-theme="dark"] .manual-field input,
[data-theme="dark"] .manual-field select,
[data-theme="dark"] .tag-checkbox { background: var(--card-bg); color: var(--ink); }
[data-theme="dark"] .choice-chip input:checked + span { background: var(--ink); color: var(--bg); }
[data-theme="dark"] .manual-entry-open { color: var(--bg); }
[data-theme="dark"] .answer-video iframe { background: #10100f; }
@media (max-width: 600px) {
  .site-nav { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .nav-actions { margin-left: auto; gap: 12px; }
}
@media (max-width: 380px) {
  .nav-actions { gap: 8px; }
  .questions-link { font-size: 10px; letter-spacing: .5px; }
  .language-toggle a { padding: 5px 6px; }
}


.detail-navigation {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.detail-navigation .back-link { min-width: 0; }
.detail-navigation .next-question {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.next-question { padding:.7rem .85rem; background:transparent; color:var(--accent); font:700 11px var(--font-mono); letter-spacing:1px; text-decoration:none; text-align:center; }
.next-question:hover { background:transparent; color:var(--ink); }
.next-question[aria-disabled="true"] { background:transparent; color:var(--muted); cursor:default; }

.ustadh-link { text-decoration:underline; text-underline-offset:3px; }
.ustadh-link:hover { color:var(--accent); }
.ustadh-heading h1 { font-size:clamp(30px, 6vw, 48px); }
.ustadh-social-links { display:flex; flex-direction:column; gap:1rem; list-style:none; padding:0; }
.ustadh-social-links a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

.social-platform { display:inline-flex; align-items:center; gap:.75rem; font-family:var(--font-mono); }
.social-platform[aria-disabled="true"] { color:var(--muted); }
.social-icon { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.ustadh-answers-link { display:inline-block; margin-top:1rem; color:var(--accent); font:700 12px var(--font-mono); letter-spacing:1px; }
.ustadh-answers-link:hover { color:var(--ink); }
.ustadh-filter-label { margin-bottom:1rem; font-family:var(--font-mono); color:var(--accent); }
/* Footer background on all screen sizes */
footer {
  background-color: var(--ink);
  color: var(--bg);
}

/* Mobile typography */
@media (max-width: 600px) {
  /* English question text in the list */
  html[lang="en"] .q-text {
    font-size: 1.1rem;
  }

  /* Language switch */
  .language-toggle a {
    font-size: 12px;
    padding: 9px 10px;
  }

  /* Back and next links on the answer page */
  .detail-navigation .back-link,
  .detail-navigation .next-question {
    font-size: 14px;
  }

  .detail-navigation .next-question {
    padding-right: 0;
  }

  /* Answer-page text, keeping the question heading unchanged */
  .detail-number {
    font-size: 17px;
  }

  .detail-author,
  .detail-meta {
    font-size: 15px;
  }

  .detail-container .section-label {
    font-size: 13px;
  }

  .answer-text {
    font-size: 20px;
  }

  .answer-link a {
    font-size: 16px;
  }

  .video-heading,
  .video-source {
    font-size: 14px;
  }

  .detail-tags .tag {
    font-size: 13px;
  }
}