/*
 * YPR forum layer (v1.2.0) — Discourse-style community on top of bbPress.
 * Brand: navy #1E2A45, slate #5A6B7A, gold #C58B2A; Sora headings, IBM Plex Sans body.
 * Bump YPR_THEME_VERSION in functions.php + style.css whenever this file changes.
 */

:root {
  --f-bg: #ffffff;
  --f-bg-2: #f6f8fb;
  --f-surface: #ffffff;
  --f-text: #1b2333;
  --f-muted: #5a6b7a;
  --f-line: #e3e8ef;
  --f-line-2: #eef1f6;
  --f-link: #1e2a45;
  --f-link-hover: #a9721e;
  --f-gold: #c58b2a;
  --f-gold-soft: #fbf3e4;
  --f-head-bg: #ffffff;
  --f-shadow: 0 1px 2px rgba(15, 21, 35, 0.05);
  --f-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --f-bg: #11151f;
    --f-bg-2: #171c29;
    --f-surface: #171c29;
    --f-text: #e6eaf2;
    --f-muted: #9aa6b8;
    --f-line: #29313f;
    --f-line-2: #212837;
    --f-link: #c9d4ea;
    --f-link-hover: #e2b567;
    --f-gold: #d8a24a;
    --f-gold-soft: #2a2415;
    --f-head-bg: #151a26;
    --f-shadow: none;
  }
}

/* ---------- site header (white, Discourse-like) ---------- */
.ypr-header {
  background: var(--f-head-bg) !important;
  border-bottom: 1px solid var(--f-line) !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  color: var(--f-text);
}
.ypr-header-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.7rem 20px;
}
.ypr-header .wp-block-site-title { margin: 0; font-family: "Sora", "Segoe UI", sans-serif; font-weight: 700; font-size: 1.15rem; }
.ypr-header .wp-block-site-title a { color: var(--f-link) !important; text-decoration: none; }
.ypr-header p { display: block; margin: 0; }
.ypr-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; flex: 1 1 auto; }
.ypr-nav a {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: var(--f-muted) !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.ypr-nav a:hover { background: var(--f-bg-2); color: var(--f-link) !important; }
.ypr-nav a[aria-current="page"] { color: var(--f-link) !important; background: var(--f-gold-soft); }
.ypr-header-cta a {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  background: var(--f-link);
  color: var(--f-bg) !important;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.ypr-header-cta a:hover { background: var(--f-gold); color: #fff !important; }
.ypr-header .wp-block-shortcode { flex: 1 1 auto; }

/* ---------- page canvas for forum contexts ---------- */
body.ypr-forum-ctx { background: var(--f-bg); color: var(--f-text); }
body.ypr-forum-ctx .ypr-main-wrap,
body.ypr-forum-ctx main { padding: 0 !important; }
body.ypr-forum-ctx main > .wp-block-group.alignwide,
body.ypr-forum-ctx main > .wp-block-group > .entry-content { max-width: none; }

.ypr-forum {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.25rem 20px 3rem;
  color: var(--f-text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
body.ypr-forum-ctx .entry-content.wp-block-post-content { max-width: 1140px; margin-inline: auto; }
.ypr-forum a { color: var(--f-link); }
.ypr-forum a:hover { color: var(--f-link-hover); }
.ypr-forum h1, .ypr-forum h2 { font-family: "Sora", "Segoe UI", sans-serif; letter-spacing: 0; color: var(--f-text); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- banner ---------- */
.ypr-banner {
  background: linear-gradient(135deg, #1e2a45 0%, #2a3a5f 100%);
  color: #fff;
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  margin: 0 0 1.4rem;
}
.ypr-banner h1 { color: #fff !important; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 0.4rem; }
.ypr-banner p { margin: 0.2rem 0 0.7rem; max-width: 760px; color: rgba(255, 255, 255, 0.86); }
.ypr-banner-links { margin-bottom: 0 !important; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ypr-btn {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 700; font-size: 0.92rem;
  background: var(--f-gold); color: #1a1405 !important; text-decoration: none;
}
.ypr-btn:hover { filter: brightness(1.08); color: #1a1405 !important; }
.ypr-btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff !important; }
.ypr-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff !important; }

/* ---------- layout ---------- */
.ypr-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
.ypr-side h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--f-muted); margin: 0 0 0.5rem; font-family: "IBM Plex Sans", sans-serif; }
.ypr-side .ypr-side-h { margin-top: 1.4rem; }
.ypr-catlist, .ypr-guidelist { list-style: none; margin: 0; padding: 0; }
.ypr-catlist a, .ypr-guidelist a {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem; border-radius: 6px;
  text-decoration: none; color: var(--f-text) !important; font-size: 0.93rem;
}
.ypr-catlist a:hover, .ypr-guidelist a:hover { background: var(--f-bg-2); }
.ypr-count { margin-left: auto; color: var(--f-muted); font-size: 0.82rem; }
.ypr-guidelist a { color: var(--f-muted) !important; }
.ypr-stats { margin-top: 1.4rem; color: var(--f-muted); font-size: 0.88rem; line-height: 1.7; }
.ypr-stats strong { color: var(--f-text); }

.ypr-sq { display: inline-block; width: 11px; height: 11px; border-radius: 2px; flex: none; }
.ypr-sq-lg { width: 16px; height: 16px; margin-right: 0.55rem; vertical-align: -1px; border-radius: 3px; }

.ypr-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--f-line); margin-bottom: 0.2rem; }
.ypr-tabs span, .ypr-tabs a {
  padding: 0.55rem 0.9rem; font-weight: 600; font-size: 0.93rem; text-decoration: none; color: var(--f-muted) !important;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ypr-tabs .is-active { color: var(--f-link) !important; border-bottom-color: var(--f-gold); }

/* ---------- topic table ---------- */
table.ypr-topics, table.ypr-cats { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.95rem; }
.ypr-topics th, .ypr-cats th {
  text-align: left; font-weight: 600; font-size: 0.8rem; color: var(--f-muted); padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--f-line); background: transparent;
}
.ypr-topics td, .ypr-cats td { padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--f-line-2); vertical-align: middle; background: transparent; }
.ypr-topics tr:hover td, .ypr-cats tr:hover td { background: var(--f-bg-2); }
.ypr-c-num, .ypr-c-act { text-align: center !important; white-space: nowrap; width: 76px; }
.ypr-c-act { width: 88px; color: var(--f-muted); font-size: 0.88rem; }
.ypr-c-posters { width: 150px; }
.ypr-title { font-weight: 600; font-size: 1.02rem; text-decoration: none; color: var(--f-link); line-height: 1.35; }
.ypr-title:hover { text-decoration: underline; }
.ypr-sub { margin-top: 0.3rem; }
.ypr-cat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--f-muted) !important; text-decoration: none; }
.ypr-cat:hover .ypr-cat-name { text-decoration: underline; }
.ypr-pin { color: var(--f-gold); vertical-align: -1px; }
.ypr-row.is-pinned td { background: var(--f-gold-soft); }
.ypr-hot { color: var(--f-gold); font-weight: 700; }

.ypr-stack { display: inline-flex; }
.ypr-av { border-radius: 50%; object-fit: cover; background: var(--f-bg-2); }
.ypr-stack .ypr-av { width: 25px; height: 25px; border: 2px solid var(--f-bg); margin-left: -7px; }
.ypr-stack .ypr-av:first-child { margin-left: 0; }

/* ---------- categories page ---------- */
.ypr-page-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.2rem 0 0.3rem; }
.ypr-lede { color: var(--f-muted); margin: 0 0 1.1rem; max-width: 760px; }
.ypr-cat-cell { border-left: 5px solid var(--cat, var(--f-line)); }
.ypr-cat-cell h2 { font-size: 1.1rem; margin: 0 0 0.15rem; }
.ypr-cat-cell h2 a { text-decoration: none; }
.ypr-cat-cell p { margin: 0; color: var(--f-muted); font-size: 0.9rem; }
.ypr-c-latest { width: 280px; font-size: 0.9rem; }
.ypr-c-latest a { display: block; font-weight: 600; text-decoration: none; }
.ypr-c-latest time { color: var(--f-muted); font-size: 0.82rem; }
.ypr-cats .ypr-c-num { width: 80px; }

/* ---------- breadcrumb ---------- */
.ypr-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 0 0 0.9rem; padding: 0; font-size: 0.85rem; color: var(--f-muted); }
.ypr-crumbs li + li::before { content: "\203A"; margin-right: 0.35rem; color: var(--f-muted); }
.ypr-crumbs a { text-decoration: none; color: var(--f-muted) !important; }
.ypr-crumbs a:hover { text-decoration: underline; color: var(--f-link-hover) !important; }
.ypr-crumbs [aria-current] { color: var(--f-text); }

/* ---------- topic page ---------- */
.ypr-topic-head { border-bottom: 1px solid var(--f-line); padding-bottom: 0.9rem; margin-bottom: 1rem; }
.ypr-topic-title { font-size: clamp(1.35rem, 2.8vw, 1.85rem); line-height: 1.25; margin: 0 0 0.5rem; }
.ypr-topic-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; color: var(--f-muted); font-size: 0.85rem; }
.ypr-topic-meta .ypr-cat { padding: 0.15rem 0.55rem; border: 1px solid var(--f-line); border-radius: 999px; }
.ypr-stream { max-width: 860px; }
.ypr-post { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0.9rem; padding: 1.1rem 0; border-top: 1px solid var(--f-line-2); }
.ypr-post:first-child { border-top: 0; padding-top: 0.3rem; }
.ypr-post-av .ypr-av { width: 44px; height: 44px; }
.ypr-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font-size: 0.88rem; margin-bottom: 0.35rem; }
.ypr-user { font-weight: 700; color: var(--f-text); font-size: 0.95rem; }
.ypr-role { background: var(--f-gold-soft); color: var(--f-gold); border-radius: 4px; padding: 0 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ypr-when { color: var(--f-muted) !important; text-decoration: none; margin-left: auto; }
.ypr-when:hover { text-decoration: underline; }
.ypr-num { color: var(--f-muted); font-size: 0.8rem; }
.ypr-post-body { font-size: 1rem; overflow-wrap: anywhere; }
.ypr-post-body p { margin: 0 0 0.85rem; }
.ypr-post-body p:last-child { margin-bottom: 0; }
.ypr-post-body blockquote {
  margin: 0 0 0.9rem; padding: 0.6rem 0.9rem; background: var(--f-bg-2); border-left: 4px solid var(--f-line);
  border-radius: 0 6px 6px 0; color: var(--f-muted); font-size: 0.93rem;
}
.ypr-post-body blockquote p { margin: 0; }
.ypr-post-foot { margin-top: 0.6rem; display: flex; gap: 1rem; color: var(--f-muted); font-size: 0.85rem; }
.ypr-like { display: inline-flex; align-items: center; gap: 0.3rem; }
.ypr-like.is-zero svg { opacity: 0.45; }
.ypr-post:target { background: var(--f-gold-soft); margin-inline: -0.6rem; padding-inline: 0.6rem; border-radius: 8px; }

/* ---------- pager, join note, misc ---------- */
.ypr-pager { margin: 1.2rem 0; }
.ypr-pager .page-numbers {
  display: inline-block; min-width: 2.1rem; text-align: center; padding: 0.3rem 0.6rem; margin-right: 0.2rem;
  border: 1px solid var(--f-line); border-radius: 6px; text-decoration: none; color: var(--f-link); font-size: 0.9rem;
}
.ypr-pager .current { background: var(--f-link); color: var(--f-bg); border-color: var(--f-link); }
.ypr-join { margin: 1.8rem 0 0; padding: 1rem 1.2rem; border: 1px dashed var(--f-gold); border-radius: var(--f-radius); background: var(--f-gold-soft); max-width: 860px; }
.ypr-join h2 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.ypr-join p { margin: 0; color: var(--f-muted); font-size: 0.93rem; }
.ypr-empty { color: var(--f-muted); padding: 1.2rem 0; }

/* ---------- footer on forum pages stays dark; legal text readable ---------- */
body.ypr-forum-ctx .ypr-footer { margin-top: 2rem; }

/* ---------- guides / about pages inherit the white header; keep their canvas ---------- */

/* ---------- tablet / mobile ---------- */
@media (max-width: 900px) {
  .ypr-layout { grid-template-columns: 1fr; gap: 1rem; }
  .ypr-side { order: 2; }
  .ypr-main { order: 1; }
  .ypr-catlist { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .ypr-catlist a { border: 1px solid var(--f-line); border-radius: 999px; padding: 0.3rem 0.7rem; }
  .ypr-c-posters { display: none; }
}
@media (max-width: 640px) {
  .ypr-header-in { gap: 0.6rem; padding: 0.55rem 16px; }
  .ypr-header .ypr-header-cta { display: none; }
  .ypr-forum { padding-inline: 16px; }
  .ypr-banner { padding: 1.1rem 1.1rem; }
  table.ypr-topics, table.ypr-topics tbody, .ypr-topics tr, .ypr-topics td { display: block; width: auto; }
  .ypr-topics thead { display: none; }
  .ypr-topics tr { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.8rem; padding: 0.8rem 0; border-bottom: 1px solid var(--f-line-2); }
  .ypr-topics td { border: 0; padding: 0; background: transparent !important; }
  .ypr-topics .ypr-c-topic { grid-column: 1 / -1; }
  .ypr-topics .ypr-c-num, .ypr-topics .ypr-c-act { width: auto; display: inline-block; text-align: left !important; font-size: 0.82rem; color: var(--f-muted); }
  .ypr-topics .ypr-c-num::after { content: " " attr(data-label); }
  .ypr-topics tr { grid-template-columns: auto auto auto 1fr; justify-content: start; }
  .ypr-topics .ypr-c-act { text-align: right !important; }
  table.ypr-cats, .ypr-cats tbody, .ypr-cats tr, .ypr-cats td { display: block; width: auto; }
  .ypr-cats thead { display: none; }
  .ypr-cats tr { padding: 0.7rem 0; border-bottom: 1px solid var(--f-line-2); }
  .ypr-cats td { border: 0; padding: 0.1rem 0.6rem; }
  .ypr-cats .ypr-c-num { display: inline-block; width: auto; text-align: left !important; font-size: 0.82rem; color: var(--f-muted); }
  .ypr-cats .ypr-c-num::after { content: " " attr(data-label); }
  .ypr-c-latest { width: auto; }
  .ypr-post { grid-template-columns: 38px minmax(0, 1fr); gap: 0.65rem; }
  .ypr-post-av .ypr-av { width: 34px; height: 34px; }
  .ypr-when { margin-left: 0; }
}