/* ============================================================
   GeoSync Phase 1 reskin — custom.css (cyan edition)
   Dark-mode-first · mobile-first · Bootstrap 3.3.5 underneath
   Brand: cyan #01FFFF dominant, metallic orange CTA accent
   ============================================================ */

/* ---- 1. Design tokens ---- */
:root {
  --gs-bg:        #0e1013;
  --gs-surface:   #16191f;
  --gs-surface-2: #1d212b;
  --gs-border:    #262c3a;
  --gs-text:      #e9ebf2;
  --gs-muted:     #9aa1b5;
  --gs-cyan:      #01FFFF;
  --gs-cyan-dim:  #00c8d4;
  --gs-orange:    #ff8c1a;
  --gs-orange-hi: #e67a00;
  --gs-radius:    12px;
  --gs-font: "Inter", "Segoe UI", system-ui, -apple-system,
             "Helvetica Neue", Arial, sans-serif;
}

html, body { background: var(--gs-bg); }
body {
  font-family: var(--gs-font);
  color: var(--gs-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--gs-cyan); }
a:hover, a:focus { color: var(--gs-cyan-dim); }

/* ---- 2. Kill dated chrome ---- */
/* "Visits Today: N" hit counter — no class on the element,
   target its inline style (confirmed via Inspector 2026-11-03). */
li[style*="white-space:nowrap"] {
  display: none !important;
}

/* Sidebar sysop-stats + recent-visitors widgets: dated, and Recent
   Visitors leaks locations/protocols to logged-out guests.
   Hidden outright in Phase 1 (revisit a slim Who's Online later). */
#sidebar-system-info, #sidebar-recent-visitors,
.sidebar .system-info, .sidebar .recent-visitors,
[id*="system-info"], [id*="recent-visitors"] {
  display: none !important;
}

/* ---- 3. Thread rows -> cards (as far as pure CSS goes) ---- */
.thread-row, tr.thread-row, .forum-thread,
.thread-listing .row, table.threads > tbody > tr {
  background: var(--gs-surface) !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius);
  margin-bottom: 12px;
  display: block;
  padding: 14px 16px;
}
table.threads { border-collapse: separate; border-spacing: 0 12px; }

/* Timestamps: quiet, compact */
time, .timestamp, .msg-date, .thread-date {
  color: var(--gs-muted) !important;
  font-size: 0.85em;
  font-weight: 400;
}

/* ---- 4. Buttons & CTAs ---- */
.btn-primary, a.btn-primary {
  background: var(--gs-orange);
  border-color: var(--gs-orange);
  border-radius: 999px;
  padding: 10px 28px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1a1a1a !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--gs-orange-hi);
  border-color: var(--gs-orange-hi);
  color: #1a1a1a !important;
}

/* Force solid orange — Bootstrap's gradient was winning */
a.btn.btn-primary.btn-lg {
  background-color: var(--gs-orange) !important;
  background-image: none !important;
}

/* Landing hero */
.gs-hero { text-align: center; padding: 72px 20px 56px; }
.gs-hero .gs-eyebrow {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.78em; color: var(--gs-cyan); margin-bottom: 16px;
}
.gs-hero h1 {
  font-size: 2.4em; font-weight: 700; line-height: 1.15;
  margin: 0 0 16px; color: var(--gs-text);
}
.gs-hero .gs-sub {
  font-size: 1.12em; color: var(--gs-muted);
  max-width: 640px; margin: 0 auto 28px; line-height: 1.55;
}
.gs-value-cards { display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap; margin: 40px auto; max-width: 960px; }
.gs-value-card {
  background: var(--gs-surface); border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius); padding: 22px; flex: 1 1 240px;
  max-width: 300px; text-align: left;
}
.gs-value-card h3 {
  font-size: 1.05em; margin: 0 0 8px;
  color: var(--gs-cyan);
}
.gs-value-card p { font-size: 0.92em; color: var(--gs-muted); margin: 0; line-height: 1.5; }
.gs-cta-row { margin: 8px 0 12px; }
.gs-fineprint { font-size: 0.85em; color: var(--gs-muted); }
.gs-secondary { margin-top: 12px; }
.gs-secondary a { color: var(--gs-muted); font-size: 0.95em; }

/* ---- 5. Mobile-first ---- */
@media (max-width: 767px) {
  .gs-hero { padding: 48px 16px 36px; }
  .gs-hero h1 { font-size: 1.7em; }
  .sidebar { margin-top: 24px; }
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
  iframe, embed, object { max-width: 100%; }
}