/* Forum-specific styles, layered on top of /assets/site.css (variables,
   nav, footer, .category-card). */

.nav-auth { margin-left: auto; }

/* ── Sub-nav tabs (Categories / Recent / Popular / Bookmarks) ───────
   Sits directly under the breadcrumb <nav>, present on every forum page.
   A real link per tab (not JS-routed) so each is its own shareable URL --
   deep-linking over hash state, per forum UX convention. */
.forum-tabs {
  display: flex; gap: 1.5rem; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
  padding: 0 2rem; border-bottom: 1px solid var(--border);
}
.forum-tabs::-webkit-scrollbar { display: none; }
.forum-tabs a {
  flex-shrink: 0;
  font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; padding: 0.85rem 0 0.7rem; border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.forum-tabs a:hover { color: var(--heading); }
.forum-tabs a[aria-current="page"] { color: var(--heading); border-bottom-color: var(--gold); }
.forum-tabs a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 480px) { .forum-tabs { padding: 0 1rem; gap: 1.1rem; } }

/* ── Category tag (cross-category feeds: Recent/Popular/Bookmarks) ── */
.thread-category {
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.thread-meta-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.thread-category + .thread-meta::before { content: "\2022"; margin-right: 0.5rem; color: var(--border); }

/* ── Filter pills (Popular's day/week/month/all-time window) ───────── */
.filter-pills { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.pill-btn {
  font-family: 'Lato', sans-serif; font-size: 0.78rem; letter-spacing: 0.03em;
  padding: 0.4rem 0.9rem; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  text-decoration: none; display: inline-block; min-height: 32px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pill-btn:hover { border-color: var(--muted); color: var(--heading); }
.pill-btn[aria-current="true"] {
  border-color: rgba(153,27,27,0.5); background: rgba(153,27,27,0.14); color: #fca5a5;
}
.pill-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Bookmark toggle (topic view header) ────────────────────────────── */
.topic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bookmark-toggle {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.bookmark-toggle:hover { border-color: var(--gold); color: var(--gold); }
.bookmark-toggle[aria-pressed="true"] {
  border-color: rgba(181,149,64,0.5); background: rgba(181,149,64,0.12); color: var(--gold);
}
.bookmark-toggle[aria-pressed="true"] svg { fill: currentColor; }
.bookmark-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.auth-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Lato', sans-serif; font-size: 0.82rem;
  padding: 0.3rem 0.85rem; border-radius: 100px;
  text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.auth-chip.auth-in {
  color: var(--muted); border: 1px solid var(--border);
}
.auth-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6); flex-shrink: 0;
}
.auth-chip.auth-out {
  color: #a8aff5; border: 1px solid rgba(88,101,242,0.35); background: rgba(88,101,242,0.07);
}
.auth-chip.auth-out:hover { border-color: rgba(88,101,242,0.65); background: rgba(88,101,242,0.14); color: #c5caff; }

/* ── Loading / empty / error states ─────────────────────────────── */
.forum-loading, .forum-empty {
  padding: 2.5rem 1.5rem; text-align: center; color: var(--muted);
  font-size: 0.9rem; border: 1px dashed var(--border); border-radius: 8px;
}
.forum-error { color: #fca5a5; border-color: rgba(153,27,27,0.4); }

/* ── Toolbar / buttons ───────────────────────────────────────────── */
.forum-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }

.btn-primary, .btn-ghost {
  font-family: 'Lato', sans-serif; font-size: 0.85rem; letter-spacing: 0.02em;
  padding: 0.6rem 1.25rem; border-radius: 100px; cursor: pointer;
  min-height: 44px; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.btn-primary {
  border: 1px solid rgba(153,27,27,0.5); background: rgba(153,27,27,0.14); color: #fca5a5;
}
.btn-primary:hover:not(:disabled) { border-color: var(--accent); background: rgba(153,27,27,0.24); color: #fecaca; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { border: 1px solid var(--border); background: transparent; color: var(--muted); }
.btn-ghost:hover { border-color: var(--muted); color: var(--heading); }
.btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Composer (new topic / reply) ───────────────────────────────── */
.composer-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.25rem; margin-bottom: 1.5rem;
}
.composer-panel input[type="text"],
.composer-panel input:not([type]),
.composer-panel textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: 'Lato', sans-serif; font-size: 0.95rem;
  padding: 0.75rem 0.9rem; margin-bottom: 0.75rem; resize: vertical;
}
.composer-panel input:focus, .composer-panel textarea:focus {
  outline: none; border-color: var(--accent);
}
.composer-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.form-error {
  margin-top: 0.75rem; font-size: 0.82rem; color: #fca5a5;
}

.forum-login-hint {
  padding: 1.25rem; text-align: center; color: var(--muted); font-size: 0.88rem;
  border: 1px dashed var(--border); border-radius: 8px; margin-bottom: 1.5rem;
}
.forum-login-hint a { color: #a8aff5; }

/* ── Thread list ─────────────────────────────────────────────────── */
.thread-list { display: flex; flex-direction: column; gap: 0.65rem; }

.thread-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.1rem 1.25rem; text-decoration: none; color: var(--text);
  transition: border-color 0.2s, background 0.2s; cursor: pointer;
}
.thread-card:hover { border-color: var(--accent); background: rgba(153,27,27,0.08); }
.thread-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.thread-main { min-width: 0; }
.thread-title {
  font-family: 'EB Garamond', serif; font-size: 1.05rem; font-weight: 600;
  color: var(--heading); margin-bottom: 0.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-meta { font-size: 0.78rem; color: var(--muted); }

.thread-count {
  flex-shrink: 0; min-width: 2.4rem; text-align: center;
  font-family: 'EB Garamond', serif; font-size: 1.1rem; color: var(--gold);
}

/* ── Post list (thread view) ────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }

.post-card {
  display: flex; gap: 0.9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.1rem 1.25rem;
}
.post-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(153,27,27,0.18); border: 1px solid rgba(153,27,27,0.35);
  color: var(--red); font-family: 'EB Garamond', serif; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.post-body { min-width: 0; flex: 1; }
.post-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.post-author { font-family: 'EB Garamond', serif; font-weight: 600; color: var(--heading); }
.post-time { font-size: 0.75rem; color: var(--muted); }

.post-content {
  font-size: 0.94rem; line-height: 1.65; color: var(--text); overflow-wrap: break-word;
}
.post-content p { margin-bottom: 0.85em; }
.post-content p:last-child { margin-bottom: 0; }
.post-content a { color: #f87171; }
.post-content ul, .post-content ol { margin: 0 0 0.85em 1.3em; }
.post-content blockquote {
  border-left: 3px solid var(--accent); padding-left: 0.9em; margin: 0.85em 0;
  color: var(--muted); font-style: italic;
}
.post-content code {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.1em 0.4em; font-size: 0.88em;
}
.post-content pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.85em; overflow-x: auto; margin: 0.85em 0;
}
.post-content pre code { border: none; padding: 0; background: none; }
.post-content img { max-width: 100%; border-radius: 6px; }

@media (max-width: 480px) {
  .thread-count { display: none; }
  .forum-toolbar { justify-content: stretch; }
  .forum-toolbar .btn-primary { width: 100%; }
}