/* ─────────────────────────────────────────────────────────────────────
 * public/shared/forum.css
 *
 * Chrome-and-void reskin for the forums.silverhawks.tv Discourse CONTENT
 * area (topic lists, sidebar, welcome banner, posts, buttons). Ported from
 * heman.org/shared/forum.css, which is the reference build; the structure
 * is verbatim and only the palette, the faces and the absolute host are
 * swapped, per the sso-forums note that says to port heman's and change
 * the top token block.
 *
 * Loaded by the tenant theme head_tag AFTER the theme CSS, and by the
 * master login page when silverhawks.tv is in the SSO chip's BRANDS map.
 *
 * OVERRIDES DECLARE AT :root:root ON PURPOSE. head_tag CSS loads before
 * the theme's compiled stylesheet, so a plain :root loses the cascade.
 *
 * The site itself never loads this file. It is forum-only, so editing it
 * cannot break silverhawks.tv. Bump the ?v= token in the theme head_tag
 * to flush the immutable CDN cache after any edit.
 * ───────────────────────────────────────────────────────────────────── */

/* Self-hosted faces. Absolute silverhawks.tv URLs, and /fonts ships CORS
   via the /*.woff2 rule in public/_headers. */
@font-face{font-family:'Michroma';src:url('https://silverhawks.tv/fonts/michroma-caps.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Saira';src:url('https://silverhawks.tv/fonts/saira-latin-wght.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('https://silverhawks.tv/fonts/ibm-plex-sans-latin-wght.woff2') format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('https://silverhawks.tv/fonts/jetbrains-mono-latin-wght.woff2') format('woff2');font-weight:100 800;font-display:swap}

/* ── Theme accent + ink vars. Recolors everything the theme paints
 *    through var(--tc-*): links, headers, welcome banner, buttons. ── */
:root:root{
  --tc-ink:        #04060f;
  --tc-ink-2:      #0d1322;
  --tc-ink-3:      #18223a;
  --tc-ink-4:      #212d4a;
  --tc-bone:       #eaf3fc;
  --tc-fg-2:       #b9cadd;
  --tc-fg-3:       #869bb4;
  --tc-gold:       #57c9ff;
  --tc-gold-hi:    #c9edff;
  --tc-gold-lo:    #1d5f85;
  --tc-line-gold:    rgba(87,201,255,0.26);
  --tc-line-gold-hi: rgba(87,201,255,0.55);
  --tc-red:        #e8342b;
  --tc-red-hi:     #ff5b4a;
  --tc-steel:      #5d719a;
  --tc-card-bg:    rgba(13,19,34,0.62);

  --tc-display:  'Michroma','Eurostile','Bank Gothic',sans-serif;
  --tc-wordmark: 'Michroma','Eurostile',sans-serif;
  --tc-ui:       'Saira','Inter Tight',system-ui,-apple-system,sans-serif;
  --tc-body:     'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --tc-mono:     'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ── Discourse color-scheme vars. Overriding the custom properties
 *    recolors most native elements without touching the admin palette.
 *    Ice blue takes the tertiary slot that ships orange. ── */
:root:root{
  --secondary:            #04060f;
  --secondary-rgb:        4,6,15;
  --secondary-very-high:  #2b3a5a;
  --secondary-high:       #212d4a;
  --secondary-medium:     #18223a;
  --secondary-low:        #0d1322;
  --secondary-very-low:   #080d18;

  --primary:              #eaf3fc;
  --primary-rgb:          234,243,252;
  --primary-very-low:     #101828;
  --primary-low:          #1b2740;
  --primary-low-mid:      #4d5f76;
  --primary-medium:       #869bb4;
  --primary-high:         #b9cadd;

  --tertiary:             #57c9ff;
  --tertiary-rgb:         87,201,255;
  --tertiary-low:         #14304a;
  --tertiary-medium:      #2f8fc4;
  --tertiary-high:        #c9edff;
  --tertiary-hover:       #9adcff;

  --quaternary:           #b04ce8;
  --quaternary-rgb:       176,76,232;
  --highlight:            #57c9ff;
  --highlight-low:        rgba(87,201,255,0.12);
  --highlight-medium:     rgba(87,201,255,0.25);
  --highlight-high:       #c9edff;

  --header_background:    #02040a;
  --header_primary:       #eaf3fc;
  --love:                 #e8342b;
  --danger:               #e8342b;
  --success:              #1f8a6d;
}

/* ── Structural chrome in steel. Ice blue is reserved for links, primary
 *    CTAs and featured; steel carries section labels and rules, which is
 *    the same division the site uses. ── */
.sidebar-section-header-text{ color: var(--tc-steel) !important; font-family: var(--tc-ui) !important; letter-spacing: .12em; }
.sidebar-section-link.active,
.sidebar-section-link:hover{ color: var(--tc-gold); }

/* Welcome banner title in the display face */
.welcome-banner__title{ font-family: var(--tc-wordmark) !important; color: var(--tc-bone) !important; text-transform: uppercase; }

/* Active topic-list tab underline and nav pills follow the site nav */
.nav-pills > li > a.active{ color: var(--tc-gold); }

/* Category and topic surfaces sit on the void rather than their own panel */
.topic-list, .category-list, .latest-topic-list,
.topic-list-item, .category-list-item{ background: transparent; }

/* Primary buttons take the chrome sweep the site uses on its CTAs */
.btn-primary{ background: linear-gradient(180deg,#9adcff,#57c9ff) !important; border-color:#57c9ff !important; color:#04060f !important; }
.btn-primary:hover{ background: linear-gradient(180deg,#c9edff,#9adcff) !important; }

/* Body and heading faces on the content area */
body, .cooked, .topic-body{ font-family: var(--tc-body); }
h1,h2,h3,.title,.topic-title{ font-family: var(--tc-display); }

/* ============================================================================
   NATIVE DISCOURSE ELEMENT STYLING. Added 2026-09-08.

   Ported from the heman.org Discourse THEME's scss, which is where every
   sibling forum keeps these rules. They live here instead, in the site repo,
   for two reasons. One, this file is already the skin for the Discourse area
   and is loaded by the theme's head_tag, so the rules sit with the palette
   they consume rather than in a database field nothing version-controls. Two,
   installing them as theme scss means a Rails write on the shared droplet, and
   on 2026-09-08 doing exactly that took all six forums down for several
   minutes: the box normally sits around 7.1GB of 7.9GB used, and each
   `rails runner` boots a full Rails process on top of that.

   The heman original opened with a :root palette block. It is deliberately NOT
   copied: this file already declares every --tc-* token above, at :root:root,
   in silverhawks' ice-blue values. Everything below consumes those tokens.
   The only hardcoded colours are the silver and bronze medals, which are metal
   colours rather than brand colours.

   The load-order note that matters: this file is fetched by the theme head_tag
   and therefore lands BEFORE Discourse's own compiled stylesheet, which is why
   the structural overrides below keep their !important. Do not strip them.
   ============================================================================ */

/* ── FIX ROUND: d-header de-dock, timeline removal, heading weights ────── */

/* The Discourse d-header is fully redundant here: the locked
   global nav carries navigation + search + the user menu (which already has
   Messages, Notifications, Bookmarks, Preferences), and the left sidebar
   carries chat/messages. Hide it entirely and reclaim its offset. */
.d-header-wrap,
.d-header { display: none !important; }
:root { --header-offset: 0px !important; }
#main-outlet-wrapper, .wrap > .ember-application { padding-top: 0 !important; }

/* Remove the thread right-rail timeline from existence + reclaim its gutter. */
.timeline-container,
.topic-timeline,
#topic-progress-wrapper,
.topic-navigation .timeline-container {
  display: none !important;
}
.topic-navigation { display: none !important; }
/* Let the post stream use the full content width once the timeline gutter is gone */
#topic .posts-wrapper,
#topic .topic-area,
.topic-area {
  width: 100% !important;
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-right: 0 !important;
}
#topic .container.posts { grid-template-columns: 1fr !important; }

/* Make sure JetBrains Mono actually activates for meta text */
.topic-list .num, .post-date, .post-info,
.sidebar-section-link-content-badge, .badge-card .badge-summary ~ * {
  font-family: var(--tc-mono);
}

/* ── Global typography ────────────────────────────────────────────────── */
body {
  font-family: var(--tc-body);
  background: var(--tc-ink);
}
h1, h2, h3, h4, h5,
.title, .topic-title, .category-title {
  font-family: var(--tc-display);
  font-weight: 800;
  letter-spacing: -0.015em;
}
/* Big display titles get the heaviest weight (locked: 800-900) */
.fancy-title, #topic-title .fancy-title,
.welcome-banner__title, .category-title-header .category-title {
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}
a { color: var(--tc-gold); }
a:hover { color: var(--tc-gold-hi); }

/* Reusable eyebrow style used in several native surfaces */
.tc-eyebrow,
.sidebar-section-header-text {
  font-family: var(--tc-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tc-gold);
}

/* ── Discourse internal header (the strip below the locked shared nav) ── */
.d-header {
  background: var(--tc-ink-2);
  border-bottom: 1px solid var(--tc-line-gold);
}
.d-header .title .logo-big,
.d-header .title .logo-small { display: none; }
.d-header .badge-notification {
  background: var(--tc-red);
  color: var(--tc-bone);
}

/* ── Welcome banner (CORE feature) ────────────────────────────────────── */
.welcome-banner {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,140,26,0.10), transparent 55%),
    var(--tc-ink);
  border-bottom: 1px solid var(--tc-line-gold);
  z-index: 3;
}
.welcome-banner__title {
  font-family: var(--tc-wordmark);
  font-weight: 900;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tc-bone);
}
.welcome-banner__subheader {
  font-family: var(--tc-body);
  font-style: italic;
  font-size: 16px;
  color: var(--tc-fg-2);
}
/* Big search field inside the welcome banner */
.welcome-banner .search-menu .search-input,
.welcome-banner input[type="search"],
.search-banner .search-input {
  background: var(--tc-ink-2);
  border: 1px solid var(--tc-line-gold);
  border-radius: 4px;
  color: var(--tc-bone);
  font-family: var(--tc-ui);
}
.welcome-banner .search-menu .search-input:focus {
  border-color: var(--tc-gold);
}

/* ── Topic list (native) ──────────────────────────────────────────────── */
.topic-list .topic-list-item {
  border-bottom: 1px solid var(--tc-line-gold);
}
.topic-list .topic-list-item:hover {
  background: rgba(255,140,26,0.045);
}
.topic-list .main-link .title,
.topic-list-item .link-top-line .title {
  font-family: var(--tc-ui);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--tc-bone);
}
/* Bulletproof: every topic-list title variant is bone, never the default
   gold link colour. Visited/read topics dim to translucent bone, not gold. */
.topic-list-item a.title,
.topic-list .link-top-line a.title,
.latest-topic-list-item a.title,
a.title.raw-topic-link {
  color: var(--tc-bone) !important;
  font-family: var(--tc-ui) !important;
}
.topic-list-item.visited a.title:not(.badge-notification),
.latest-topic-list-item.visited a.title {
  color: rgba(243,238,216,0.55) !important;
}
.topic-list .main-link .title:hover { color: var(--tc-gold-hi); }
.topic-list .topic-list-data.num,
.topic-list .num,
.topic-list .views,
.topic-list .posts,
.topic-list .age,
.topic-list .activity {
  font-family: var(--tc-mono);
  font-size: 13px;
}
.topic-list th.sortable,
.topic-list-header .topic-list-data {
  font-family: var(--tc-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tc-fg-3);
}
.topic-list .topic-list-item > td { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
.topic-list .posters { display: flex; justify-content: flex-end; }
.topic-list .posters a, .topic-list .posters .trigger-user-card {
  margin-left: -7px; border: 1.5px solid var(--tc-ink); border-radius: 50%;
}
.topic-list .posters a:first-child { margin-left: 0; }
.topic-list .posters a.latest img, .topic-list .posters .latest { box-shadow: 0 0 0 1.5px var(--tc-gold); }
.topic-list .num, .topic-list .views .number, .topic-list .posts .number {
  font-family: var(--tc-mono); color: var(--tc-fg-2);
}
.topic-list .num.heat { color: var(--tc-red-hi) !important; }
.topic-list .topic-excerpt {
  font-family: var(--tc-body); font-size: 13.5px; line-height: 1.5; color: var(--tc-fg-2);
}
/* Category chip + tag chips */
.badge-category__wrapper .badge-category {
  font-family: var(--tc-ui);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}
.discourse-tag {
  font-family: var(--tc-mono);
  font-size: 11px;
}

/* ── Categories page (native) ─────────────────────────────────────────── */
.category-list .category-name,
.category-list h3 a {
  font-family: var(--tc-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--tc-bone);
}
.category-list .category-description {
  font-family: var(--tc-body);
  font-style: italic;
  color: var(--tc-fg-2);
}
.category-list .stat {
  font-family: var(--tc-mono);
  font-size: 11px;
  color: var(--tc-fg-3);
}

/* ── Category page header (native, styled -- no banner component) ─────── */
.category-heading,
.category-title-header {
  border-bottom: 1px solid var(--tc-line-gold);
  padding-bottom: 18px;
}
.category-title-header .category-title,
.category-heading h1 {
  font-family: var(--tc-display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tc-bone);
}
.category-title-description,
.category-heading .category-description {
  font-family: var(--tc-body);
  font-style: italic;
  font-size: 15px;
  color: var(--tc-fg-2);
}

/* ── Post stream (native) ─────────────────────────────────────────────── */
.topic-post .cooked,
.topic-body .cooked {
  font-family: var(--tc-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tc-bone);
}
.topic-meta-data .first .username,
.names .username {
  font-family: var(--tc-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--tc-bone);
}
.names .user-title,
.topic-post .user-title {
  font-family: var(--tc-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tc-gold);
}
.post-info, .post-date {
  font-family: var(--tc-mono);
  font-size: 11px;
  color: var(--tc-fg-3);
}
/* Topic map (native, on long threads) -- keep it quiet, posts are the focus */
.topic-map {
  border: 1px solid var(--tc-line-gold);
  border-radius: 4px;
  background: var(--tc-card-bg);
}
.topic-map__stat .number,
.topic-map .number {
  font-family: var(--tc-display);
  font-weight: 800;
  color: var(--tc-bone);
}
.topic-map h4,
.topic-map .topic-map__stat-label {
  font-family: var(--tc-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tc-fg-3);
}
/* accepted-answer (discourse-solved) */
.topic-post.accepted-answer,
.topic-post .accepted {
  border-left: 2px solid var(--tc-gold);
}

/* ── Sidebar (native, navigation_menu=sidebar) ────────────────────────── */
.sidebar-section-header-text {
  font-family: var(--tc-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tc-gold);
}
.sidebar-section-link-content-text {
  font-family: var(--tc-ui);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--tc-bone);
}
.sidebar-section-link.active .sidebar-section-link-content-text,
.sidebar-section-link:hover .sidebar-section-link-content-text {
  color: var(--tc-gold-hi);
}
.sidebar-section-link.active,
.sidebar-section-link:hover {
  background: rgba(255,140,26,0.08);
}
.sidebar-section-link-content-badge {
  font-family: var(--tc-mono);
  font-size: 10px;
  color: var(--tc-fg-3);
}
/* Remove the Tags section from the sidebar -- too much visual noise.
   Tags still function in search and on topics. */
.sidebar-section[data-section-name="tags"],
.sidebar-section-wrapper[data-section-name="tags"] { display: none !important; }
/* Partners section (created in admin) -- affiliate-card styling.
   We tag it by its section slug 'partners'. */
.sidebar-section[data-section-name="partners"] .sidebar-section-link {
  border: 1px solid var(--tc-line-gold);
  border-radius: 3px;
  margin-bottom: 6px;
  background: var(--tc-card-bg);
}
.sidebar-section[data-section-name="partners"] .sidebar-section-link:hover {
  border-color: var(--tc-line-gold-hi);
  background: rgba(255,140,26,0.06);
}

/* ── Buttons + forms (native) ─────────────────────────────────────────── */
.btn-primary {
  background: var(--tc-gold);
  color: var(--tc-ink);
  border: 1px solid var(--tc-gold);
  font-family: var(--tc-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.btn-primary:hover { background: var(--tc-gold-hi); border-color: var(--tc-gold-hi); }
.btn-danger { background: var(--tc-red); border-color: var(--tc-red); }
input[type="text"], input[type="email"], input[type="password"], textarea {
  background: var(--tc-ink-2);
  border: 1px solid var(--tc-line-gold);
  color: var(--tc-bone);
  font-family: var(--tc-ui);
}
input:focus, textarea:focus { border-color: var(--tc-gold); }

/* ── Badges page (native /badges) -- proven this session ──────────────── */
body.badges-page .badge-card .badge-contents {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}
body.badges-page .badge-card {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-line-gold);
  border-radius: 3px;
  transition: border-color 120ms ease, transform 120ms ease;
}
body.badges-page .badge-card:hover {
  border-color: var(--tc-gold);
  transform: translateY(-1px);
}
body.badges-page .badge-card .badge-icon {
  width: 52px; height: 52px;
  border-radius: 3px;
  border: 1px solid var(--tc-line-gold);
  background: var(--tc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tc-fg-3);
}
body.badges-page .badge-card a.badge-link,
body.badges-page .badge-card h3 a {
  font-family: var(--tc-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tc-bone);
  text-decoration: none;
}
body.badges-page .badge-card .badge-summary,
body.badges-page .badge-card .badge-summary a {
  font-family: var(--tc-body);
  font-size: 13px;
  color: rgba(243,234,216,0.78);
  text-decoration: none;
}
body.badges-page .badge-icon.badge-type-gold { color: var(--tc-gold); }
body.badges-page .badge-icon.badge-type-silver { color: #b8b1a0; }
body.badges-page .badge-icon.badge-type-bronze { color: #c47a3a; }
body.badges-page .badge-grouping > .title h2 {
  font-family: var(--tc-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--tc-bone);
  border-bottom: 1px solid var(--tc-line-gold);
  padding-bottom: 8px;
}

/* ── Leaderboard (discourse-gamification) -- proven this session ──────── */
.gamification-leaderboard h1,
body[class*="leaderboard"] h1 {
  font-family: var(--tc-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--tc-bone);
}
.gamification-leaderboard .leaderboard-top-three,
.gamification-leaderboard .top-three {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255,140,26,0.20), transparent 60%),
    var(--tc-card-bg);
  border: 1px solid var(--tc-line-gold);
  border-radius: 4px;
}
.gamification-leaderboard .leaderboard-top-three .position-1 img.avatar {
  border: 3px solid var(--tc-gold);
  box-shadow: 0 0 30px rgba(255,140,26,0.32);
}
.gamification-leaderboard .leaderboard-top-three .position-2 img.avatar { border: 3px solid #b8b1a0; }
.gamification-leaderboard .leaderboard-top-three .position-3 img.avatar { border: 3px solid #c47a3a; }
.gamification-leaderboard .username {
  font-family: var(--tc-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tc-bone);
}
.gamification-leaderboard .score {
  font-family: var(--tc-display);
  font-weight: 900;
  color: var(--tc-bone);
}

/* ── Login / signup (native full-page) -- proven this session ─────────── */
body.login-page .login-body,
body.signup-page .signup-body {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-line-gold);
  border-radius: 4px;
}
body.login-page .login-welcome-header h1.login-title,
body.signup-page .signup-welcome-header h1 {
  font-family: var(--tc-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--tc-bone);
}
.btn-social {
  border: 1px solid var(--tc-line-gold);
  font-family: var(--tc-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.btn-social:hover { border-color: var(--tc-gold); background: rgba(255,140,26,0.06); }

/* ── Modals (native) ──────────────────────────────────────────────────── */
.modal .modal-inner-container,
.d-modal__container {
  background: var(--tc-ink-2);
  border: 1px solid var(--tc-line-gold);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .welcome-banner__title { font-size: 30px; }
}


/* hide Powered by Discourse footer */
.powered-by-discourse, .below-footer-list .powered-by-discourse, #footer .powered-by-discourse { display:none !important; }