/* ============================================================
   USMG-Black phpBB Theme — Brand Overrides
   Aligns colors and styling with the usmilitarygamers.com
   global palette (core-site.css).

   Load AFTER {T_STYLESHEET_LINK} so these rules win.
   ============================================================ */

/* ---- Palette tokens (mirrors core-site.css) --------------- */
:root {
  --bs-bg:           #f0f0f0;
  --bs-surface:      #ffffff;
  --bs-text:         #1a1d24;
  --bs-muted:        #6b7280;
  --bs-border:       rgba(0,0,0,.09);
  --bs-dark:         #111111;
  --bs-dark-surface: #1a1a1a;
  --bs-dark-border:  rgba(255,255,255,.10);
  --bs-accent:       #c0392b;
  --bs-accent-hover: #a93226;
  --bs-radius:       12px;
  --bs-shadow:       0 4px 20px rgba(0,0,0,.08);
}

/* ============================================================
   PAGE & BODY
   ============================================================ */
html, body {
  background-image: none !important;
  background-color: var(--bs-bg) !important;
  color: var(--bs-text);
}

/* ============================================================
   FONTS — Barlow / Barlow Condensed (matches global site)
   phpBB hardcodes font-family on many elements, so each needs
   an explicit override.
   ============================================================ */
body,
p,
li,
td,
th,
label,
input,
select,
textarea,
button,
.navbar,
.copyright,
.footer-row,
.panel,
.postbody,
.content,
.dropdown-extended,
.notification_list p {
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
li.header dt,
li.header dd,
table.table1 thead th,
.forumbg .header,
.forabg  .header {
  font-family: 'Inter', sans-serif !important;
}

/* phpBB wraps images globally via core-site.css — restore
   inline display for forum smilies / status icons             */
img {
  display: inline !important;
}
/* But keep block display for the site logo (set in core-site) */
.usmg-logo-img,
.usmg-logo-icon {
  display: block !important;
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1 { color: var(--bs-text); }
h2 { color: var(--bs-text); }
h3 { color: #2a2f3a; border-bottom-color: var(--bs-border); }

/* ============================================================
   LINKS
   ============================================================ */
a { color: var(--bs-text); }
a:hover { color: var(--bs-accent); text-decoration: none; }

/* Navbar links (on dark bg) */
.navbar a:link,
.navbar a:visited,
.navbar a:hover,
.navbar a:active { color: rgba(255,255,255,.85); }

/* Copyright / footer-row links */
.copyright a:link,
.copyright a:visited { color: var(--bs-muted); }
.copyright a:hover   { color: var(--bs-accent); }

/* Forum header links (on dark bg) */
.forumbg .header a,
.forabg  .header a,
th a { color: rgba(255,255,255,.92); }
.forumbg .header a:hover,
.forabg  .header a:hover,
th a:hover { color: rgba(255,255,255,.65); }

/* In-post body hyperlinks */
.postlink {
  color: var(--bs-accent) !important;
  border-bottom-color: var(--bs-accent);
}
.postlink:visited {
  color: var(--bs-accent-hover) !important;
  border-bottom-color: var(--bs-accent-hover);
}
.postlink:hover {
  background-color: rgba(192,57,43,.08);
  color: var(--bs-accent-hover) !important;
}

/* Arrow links */
.arrow-left:hover,
.arrow-right:hover { color: var(--bs-accent); }

/* ============================================================
   FORUM SECTION BARS  (.forumbg  /  .forabg  /  .navbar)
   ============================================================ */
.headerbar,
.forumbg,
.forabg {
  background-color: var(--bs-dark) !important;
  background-image: none !important;
}

.navbar {
  background-color: var(--bs-dark-surface) !important;
  background-image: none !important;
  color: rgba(255,255,255,.8);
}

/* ============================================================
   BORDER-RADIUS — all main blocks
   ============================================================ */
.forumbg { border-radius: var(--bs-radius); }
.forabg  { border-radius: var(--bs-radius); }

.panel {
  background-color: var(--bs-surface);
  border-color: var(--bs-border);
  border-radius: var(--bs-radius);
}

.bg1, .bg2, .bg3 {
  background-color: var(--bs-surface);
  border-color: var(--bs-border);
  border-radius: var(--bs-radius);
}

.post {
  background-color: var(--bs-surface);
  border-color: var(--bs-border);
  border-radius: var(--bs-radius);
}

/* ============================================================
   NAVBAR (quicklinks + breadcrumb bar) — constrain to 1200px
   The bar background stays full-width; padding pushes the
   content inward to align with .black_silver_wrap below it.
   ============================================================ */
.navbar {
  padding-left:  max(24px, calc((100% - 1200px) / 2 + 24px)) !important;
  padding-right: max(24px, calc((100% - 1200px) / 2 + 24px)) !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   INNER CONTENT AREA — match global max-width (1200px)
   ============================================================ */
.black_silver_wrap {
  background-color: var(--bs-bg);
  box-shadow: none;
  width: 100% !important;
  max-width: var(--max-w) !important; /* 1200px — mirrors --max-w in core-site.css */
  margin: 0 auto !important;
  padding: 16px 24px;
}

/* Override breakpoint-specific widths from blacksilver.css */
@media (min-width: 701px) and (max-width: 900px) {
  .black_silver_wrap { width: 100% !important; max-width: var(--max-w) !important; }
}
@media (min-width: 901px) and (max-width: 1400px) {
  .black_silver_wrap { width: 100% !important; max-width: var(--max-w) !important; }
}
@media (max-width: 700px) {
  .black_silver_wrap { width: auto !important; max-width: none !important; padding: 16px 12px; }
}

/* ============================================================
   VIEWFORUM — title font sizes (-15%)
   li.header: 1.3em → 1.1em  |  topiclist dt: 1.1em → 0.935em
   ============================================================ */
.section-viewforum li.header dt,
.section-viewforum li.header dd {
  font-size: 1.3em;
}

.section-viewforum ul.topiclist dt {
  font-size: 1.1em;
}

/* ============================================================
   POST CONTENT
   ============================================================ */
.postbody { color: var(--bs-text); }
.content  { color: var(--bs-text); }
.content h2, .panel h2 {
  color: var(--bs-text);
  border-bottom-color: var(--bs-border);
}

/* ============================================================
   TOPIC / FORUM ROWS
   ============================================================ */
ul.forums {
  background-color: var(--bs-surface);
  background-image: none !important;
  filter: none !important;
}

ul.topiclist li { color: var(--bs-text); }

li.row {
  border-top-color:    var(--bs-border);
  border-bottom-color: var(--bs-border);
}
li.row strong { color: var(--bs-text); }

/* Hover: keep row background solid white (prevents dark .forumbg
   parent showing through on viewforum), accent only the title link */
li.row:hover              { background-color: var(--bs-surface) !important; }
li.row.bg1:hover,
li.row.bg2:hover          { background-color: var(--bs-surface) !important; }
li.row:hover dd           { border-left-color: transparent; }
li.row:hover dt a,
li.row:hover dt strong    { color: var(--bs-accent) !important; }

/* Zebra rows */
table.zebra-list tr:nth-child(odd)  td,
ul.zebra-list li:nth-child(odd)  { background-color: #f5f5f5; }
table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(even) { background-color: #ebebeb; }

/* ============================================================
   TABLES
   ============================================================ */
table.table1 thead th { color: rgba(255,255,255,.9); }
table.table1 tbody tr { border-color: var(--bs-border); }
table.table1 tbody td { border-top-color: var(--bs-border); color: var(--bs-text); }
table.table1 tbody th {
  background-color: var(--bs-surface);
  color: var(--bs-text);
  border-bottom-color: var(--bs-border);
}
table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
  background-color: rgba(192,57,43,.04);
  color: var(--bs-text);
}

/* ============================================================
   BLOCKQUOTES & CODE
   ============================================================ */
blockquote {
  background-color: #f0f2f5;
  border-color: var(--bs-border);
  border-radius: 8px;
}
blockquote blockquote {
  background-color: #e6e8ec;
  border-radius: 6px;
}
blockquote blockquote blockquote {
  background-color: #f0f2f5;
}

.codebox {
  background-color: #f8f8f8;
  border-color: var(--bs-border);
  border-radius: 8px;
}

/* ============================================================
   PAGINATION  (replace blues with accent red)
   ============================================================ */
.pagination li a {
  border-radius: 6px;
  background: #f5f5f5;
  border-color: var(--bs-border);
  color: var(--bs-text);
}

.pagination li.active span {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
  border-radius: 6px;
}

.pagination li a:hover,
.pagination li a:hover .icon,
.pagination .dropdown-visible a.dropdown-trigger,
.nojs .pagination .dropdown-container:hover a.dropdown-trigger {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
  color: #fff;
  text-shadow: none;
  filter: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button:hover,
.button:focus { border-color: var(--bs-accent); }

.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon { color: var(--bs-accent); }

a.button1:hover, input.button1:hover,
a.button2:hover, input.button2:hover,
input.button3:hover {
  border-color: var(--bs-accent);
  color: var(--bs-accent);
}

input.button1:focus,
input.button2:focus,
input.button3:focus { border-color: var(--bs-accent); color: var(--bs-accent-hover); }

/* ============================================================
   TABS & UCP NAVIGATION
   ============================================================ */
.tabs .tab > a:hover { color: var(--bs-accent); }

.tabs .activetab > a,
.tabs .activetab > a:hover {
  background-color: var(--bs-dark);
  background-image: none !important;
  filter: none !important;
  border-color: var(--bs-dark);
  color: #fff;
}

.responsive-tab .responsive-tab-link:hover:before { border-color: var(--bs-accent); }

.navigation a { background: #e4e4e4; color: var(--bs-text); }
.navigation a:hover { color: var(--bs-accent); }
.navigation .active-subsection a { color: var(--bs-accent); background: #dcdcdc; }
.navigation .active-subsection a:hover { color: var(--bs-accent-hover); }

/* ============================================================
   SEPARATORS & MISC ACCENTS
   ============================================================ */
.sep { color: var(--bs-accent); }

/* Profile warnings stay red */
dd.profile-warnings { color: var(--bs-accent); }

/* Report / error / rules banners */
div.rules { background-color: var(--bs-accent); color: #fff; }

/* Notification badge */
.badge { background-color: var(--bs-accent); }

/* Input focus */
.inputbox:focus { border-color: var(--bs-accent); }

/* ============================================================
   DROPDOWN MENUS (phpBB native dropdowns)
   ============================================================ */

/* Navbar-area dropdowns (notifications, user menu, etc.) stay dark */
.navbar .dropdown .dropdown-contents {
  background: var(--bs-dark-surface);
  border-color: var(--bs-dark-border);
  border-radius: var(--bs-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  color: rgba(255,255,255,.85);
}
.navbar .dropdown .dropdown-contents a,
.navbar .dropdown .dropdown-contents li,
.navbar .dropdown .dropdown-contents span {
  color: rgba(255,255,255,.85) !important;
}
.navbar .dropdown .dropdown-contents li:hover,
.navbar .dropdown .dropdown-contents a:hover {
  background-color: rgba(255,255,255,.08);
  color: #fff !important;
}
.navbar .dropdown .pointer      { border-color: var(--bs-dark-border) transparent; }
.navbar .dropdown .pointer-inner{ border-color: var(--bs-dark-surface) transparent; }

/* In-content dropdowns (Topic Tools, Quick Mod Tools, etc.) — light */
.dropdown .dropdown-contents {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  color: var(--bs-text);
}

.dropdown .dropdown-contents a,
.dropdown .dropdown-contents li,
.dropdown .dropdown-contents span {
  color: var(--bs-text) !important;
}

.dropdown .dropdown-contents li:hover,
.dropdown .dropdown-contents a:hover {
  background-color: rgba(192,57,43,.08);
  color: var(--bs-accent) !important;
}

.dropdown .pointer      { border-color: var(--bs-border) transparent; }
.dropdown .pointer-inner{ border-color: var(--bs-surface) transparent; }

.dropdown-extended .header {
  background-color: var(--bs-dark) !important;
  background-image: none !important;
  filter: none !important;
  color: rgba(255,255,255,.9);
}

.dropdown-extended .header,
.dropdown-extended .footer { border-color: var(--bs-dark-border); }

.dropdown-extended ul li { border-top-color: rgba(0,0,0,.06); }
.dropdown-extended ul li:hover { background-color: rgba(192,57,43,.08); color: var(--bs-accent); }

/* ============================================================
   JUMPBOX
   ============================================================ */
.jumpbox-cat-link {
  background-color: #e8e8e8;
  border-top-color: #ccc;
  color: var(--bs-text);
}
.jumpbox-cat-link:hover { background-color: #ddd; color: var(--bs-accent); }
.jumpbox-forum-link     { background-color: #e8e8e8; }
.jumpbox-forum-link:hover { background-color: #d4d4d4; }

/* ============================================================
   SEARCH BOX
   ============================================================ */
.search-results li:hover,
.search-results li.active { background-color: rgba(192,57,43,.08); }

/* ============================================================
   ICON COLOR TWEAKS  (replace blue icons with accent)
   ============================================================ */
.icon.icon-blue,
a:hover .icon.icon-blue { color: var(--bs-accent); }

/* ============================================================
   GLOBAL FOOTER — rounded bottom corners to match theme
   ============================================================ */
.usmg-footer {
  border-radius: 0 0 var(--bs-radius) var(--bs-radius);
  overflow: hidden;
}