/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #1b0205 #201c1a #faf8f6 #c20f26 #e0122c #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #faf8f6;
  --surface: #fdfcfb;
  --surface-2: #efecea;
  --border: #dbd6d4;
  --border-strong: #b7aeae;
  --ink: #201c1a;
  --muted: #6d6b69;
  --accent: #c20f26;
  --accent-hover: #a50d20;
  --accent-ink: #ffffff;
  --accent-text: #e0122c;
  --accent-strong: #c20f26;
  --accent-soft: #f2d7d9;
  --accent-border: #e18f98;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfeae0;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e4da;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dedc;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — Bhadko. Bold breaking-news energy: a dark masthead, a red
 * live ticker, high-contrast headlines over a warm reading surface.
 * ==================================================================== */

:root {
  --radius-sm: 4px;
  --radius: 7px;
  --radius-lg: 12px;
  --content-max: 1280px;
}

/* ---- Dark masthead + sticky wrapper --------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--ink);
}
.site-head .topbar {
  position: static;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid color-mix(in srgb, var(--canvas) 14%, transparent);
  color: var(--canvas);
}
.site-head .brand-name,
.site-head .topbar-title {
  color: var(--canvas);
}
.site-head .brand-mark { background: var(--accent); color: var(--accent-ink); }
.admin-tag { font-size: var(--t-xs); font-weight: var(--fw-medium); opacity: 0.65; margin-left: var(--s-1); }

.site-head .nav-item { color: color-mix(in srgb, var(--canvas) 68%, transparent); }
.site-head .nav-item:hover { background: color-mix(in srgb, var(--canvas) 12%, transparent); color: var(--canvas); }
.site-head .nav-item[aria-current] { background: var(--accent); color: var(--accent-ink); }
.site-head .navbtn { color: var(--canvas); }
.site-head .navbtn:hover { background: color-mix(in srgb, var(--canvas) 14%, transparent); }

.topbar-search { display: flex; align-items: center; gap: var(--s-1); }
.topbar-search .input {
  background: color-mix(in srgb, var(--canvas) 10%, transparent);
  border-color: color-mix(in srgb, var(--canvas) 22%, transparent);
  color: var(--canvas);
  min-width: 180px;
}
.topbar-search .input::placeholder { color: color-mix(in srgb, var(--canvas) 55%, transparent); }
.topbar-search .btn { color: var(--canvas); }

/* ---- Breaking news ticker -------------------------------------------- */
.ticker {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--s-2) var(--s-6);
  overflow: hidden;
}
.ticker-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  background: color-mix(in srgb, var(--accent-ink) 18%, transparent);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
}
.ticker-tag .livedot { background: var(--accent-ink); }
.ticker-track { flex: 1; min-width: 0; overflow: hidden; }
.ticker-items { display: inline-flex; gap: var(--s-8); white-space: nowrap; animation: ticker-scroll 34s linear infinite; }
.ticker-item { color: inherit; font-weight: var(--fw-medium); font-size: var(--t-sm); }
.ticker-item:hover { text-decoration: underline; }
.ticker-dot { margin-left: var(--s-8); opacity: 0.6; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-items { animation: none; }
}
@media (max-width: 640px) {
  .ticker-tag span:last-child { display: none; }
}

/* ---- Category strip ---------------------------------------------------*/
.cat-strip {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-3) var(--s-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cat-strip-item .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.cat-strip-item:hover { background: var(--surface-2); color: var(--ink); }
.cat-strip-item.is-active { background: var(--surface-2); color: var(--ink); font-weight: var(--fw-semi); }
.cat-strip-item.is-active .dot { opacity: 1; }

/* ---- Tone text + dot colours (token-driven category colour) --------- */
.tone-accent { color: var(--accent-text); }
.tone-success { color: var(--success-text); }
.tone-warning { color: var(--warning-text); }
.tone-danger { color: var(--danger-text); }
.tone-muted { color: var(--muted); }

/* ---- Live indicator dot ------------------------------------------------*/
.livedot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .livedot { animation: none; }
}

.live-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  background: var(--danger-soft);
  border: 1px solid var(--border);
  color: var(--danger-strong);
  transition: background var(--dur-1) var(--ease);
}
.live-banner:hover { background: color-mix(in srgb, var(--danger-soft) 75%, var(--danger) 8%); }
.live-banner-label { font-weight: var(--fw-semi); text-transform: uppercase; font-size: var(--t-xs); letter-spacing: var(--track-caps); flex: 0 0 auto; }
.live-banner-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: var(--fw-medium); }

.live-feed { border-left: 3px solid var(--danger); }
.live-update { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.live-update:last-child { border-bottom: none; }
.live-update-time { display: block; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-1); }
.live-update-latest { background: var(--danger-soft); border-radius: var(--radius); }

/* ---- Cover art — token gradients + a glyph, never a photograph ------- */
.cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.cover-sm { aspect-ratio: 1 / 1; border-radius: var(--radius); }
.cover-lg { aspect-ratio: 21 / 9; }
.cover-glyph { width: 32%; height: 32%; opacity: 0.9; }
.cover-flag { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; }
.cover-flag-live { left: auto; right: var(--s-3); }

.cover-accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface))); color: var(--accent); }
.cover-success { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 22%, var(--surface)), color-mix(in srgb, var(--success) 4%, var(--surface))); color: var(--success); }
.cover-warning { background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 22%, var(--surface)), color-mix(in srgb, var(--warning) 4%, var(--surface))); color: var(--warning); }
.cover-danger { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 22%, var(--surface)), color-mix(in srgb, var(--danger) 4%, var(--surface))); color: var(--danger); }
.cover-muted { background: linear-gradient(135deg, var(--surface-2), var(--surface)); color: var(--muted); }

/* ---- Story cards, rows and the hero ---------------------------------- */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.news-card-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; flex: 1; }
.news-card-body > * + * { margin-top: var(--s-2); }
.news-card-title { font-size: var(--t-lg); font-weight: var(--fw-semi); line-height: var(--lh-tight, 1.25); }
.news-card-title a { color: var(--ink); }
.news-card-title a:hover { color: var(--accent-text); }

.news-row { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
.news-row:last-child { border-bottom: none; }
.news-row-rank { flex: 0 0 auto; width: 22px; font-family: var(--font-mono); font-weight: var(--fw-semi); color: var(--muted); }
.news-row-body { min-width: 0; display: flex; flex-direction: column; }
.news-row-body > * + * { margin-top: 2px; }
.news-row-title { display: block; font-weight: var(--fw-medium); color: var(--ink); line-height: 1.35; }
.news-row:hover .news-row-title { color: var(--accent-text); }

.hero-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-side-item {
  display: flex;
  flex-direction: column;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: background var(--dur-1) var(--ease);
}
.hero-side-item > * + * { margin-top: var(--s-1); }
.hero-side-item:hover { background: var(--surface-2); }
.hero-side-cat { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: var(--fw-semi); }
.hero-side-title { font-weight: var(--fw-medium); color: var(--ink); line-height: 1.35; }

.news-hero-body { padding-top: var(--s-5); }
.news-hero-title { font-size: var(--t-4xl, 2rem); font-weight: var(--fw-semi); line-height: 1.1; letter-spacing: var(--track-tight); margin-top: var(--s-2); }
.news-hero-title a { color: var(--ink); }
.news-hero-title a:hover { color: var(--accent-text); }

.section-title { font-size: var(--t-xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); }

.load-more-cell { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: var(--s-2); }
.load-more-cell .btn { min-width: 220px; }

/* ---- Byline ------------------------------------------------------------*/
.byline { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---- Article page -------------------------------------------------------*/
.article-title { font-size: var(--t-4xl, 2rem); font-weight: var(--fw-semi); line-height: 1.15; letter-spacing: var(--track-tight); margin-top: var(--s-3); }
.article-dek { font-size: var(--t-lg); color: var(--muted); margin-top: var(--s-2); }
.article-byline { margin-top: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: var(--s-3); }
.article-cover { margin-top: var(--s-6); }
.article-body p { font-size: var(--t-lg); line-height: 1.75; }
.article-source { padding-top: var(--s-2); }

.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 640px) { .prev-next { grid-template-columns: 1fr; } }
.prev-next-card { display: flex; flex-direction: column; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); transition: background var(--dur-1) var(--ease); }
.prev-next-card > * + * { margin-top: var(--s-1); }
.prev-next-card:hover { background: var(--surface-2); }
.prev-next-right { text-align: right; align-items: flex-end; }

.reaction-bar { display: flex; gap: var(--s-3); padding: var(--s-4) 0; }
.reaction-count { font-family: var(--font-mono); }

/* ---- Comments ------------------------------------------------------------*/
.comment-form { display: flex; flex-direction: column; padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); }
.comment-form > * + * { margin-top: var(--s-3); }
.comment { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; }
.comment-body { flex: 1; min-width: 0; }

/* ---- Cards used on public/admin pages ------------------------------- */
.newsletter-card { border-top: 3px solid var(--accent); }
.author-card { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-6); }
.stat-tile { }
.stat-tile-icon { color: var(--accent); }

/* ---- Footer --------------------------------------------------------- */
.site-footer { margin-top: var(--s-11, 72px); background: var(--surface); border-top: 1px solid var(--border); padding: var(--s-9) var(--s-6) var(--s-7); }
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-8); max-width: var(--content-max); margin-inline: auto; }
@media (max-width: 900px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; } }
.footer-heading { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); font-weight: var(--fw-semi); margin-bottom: var(--s-3); }
.footer-list { display: flex; flex-direction: column; }
.footer-list > * + * { margin-top: var(--s-2); }
.footer-list a { color: var(--muted); }
.footer-list a:hover { color: var(--ink); }
.footer-newsletter { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.footer-newsletter .input { flex: 1; min-width: 160px; }
.site-footer-bottom {
  max-width: var(--content-max);
  margin-inline: auto;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  color: var(--muted);
  font-size: var(--t-sm);
}

/* ---- Mobile: keep everything usable at 390px ------------------------- */
@media (max-width: 640px) {
  .article-title, .news-hero-title { font-size: var(--t-3xl, 1.6rem); }
  .article-byline { flex-direction: column; align-items: flex-start; }
}