/* ============================================================
   Group Study Timer — Blog light/dark theming
   Loaded after each page's inline <style>, so these override.
   Dark is the default; [data-theme="light"] flips to light.
   ============================================================ */

/* ── Light theme variable overrides ── */
html[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f8fafc;
  --card: #f1f5f9;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --border: rgba(15, 23, 42, 0.10);
}

/* ── Light theme: hardcoded-colour fixes ── */
html[data-theme="light"] body { background: #ffffff; color: #0f172a; }
html[data-theme="light"] nav { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .logo { color: #0f172a; }
html[data-theme="light"] article p,
html[data-theme="light"] article li,
html[data-theme="light"] article ul,
html[data-theme="light"] article ol { color: #334155; }
html[data-theme="light"] article strong { color: #0f172a; }
html[data-theme="light"] .callout { background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.05)); }
html[data-theme="light"] .callout p { color: #1e293b; }
html[data-theme="light"] .winner { background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(34, 211, 238, 0.06)); }
html[data-theme="light"] tbody td { color: #334155; }
html[data-theme="light"] .faq details p { color: #475569; }
html[data-theme="light"] .card:hover { box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10); }
/* Footer intentionally stays dark in both themes for contrast. */

/* ── Theme toggle button (injected into .nav-c by blog-theme.js) ── */
.nav-right { display: flex; align-items: center; gap: 0.6rem; }
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
.theme-toggle:hover { color: var(--text-1); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle svg { display: inline-block; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: inline-block; }

/* ── Brand Logo in Nav ── */
.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  text-decoration: none !important;
}
.nav-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.25);
  display: inline-block;
  flex-shrink: 0;
}
html[data-theme="light"] .nav-brand-logo {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
}
@media (max-width: 640px) {
  .nav-brand-logo {
    width: 28px;
    height: 28px;
  }
}

/* ── Blog post images ── */
.post-hero { margin: 0 0 2rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0f172a; }
.post-hero img { display: block; width: 100%; height: auto; }
.post-figure { margin: 1.75rem auto; max-width: 460px; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }
.post-figure.post-figure-wide { max-width: 100%; }
.post-figure figcaption { margin-top: 0.6rem; font-size: 0.8rem; line-height: 1.55; color: var(--text-3); text-align: center; }
.post-figure figcaption a { color: inherit; text-decoration: underline; }
html[data-theme="light"] .post-hero { background: #f1f5f9; }