/*****************************************************************
* FLATBOOTS @SiteSplat.com - Custom CSS STYLESHEET
*****************************************************************
* Topline Community Forum — Custom CSS
*****************************************************************/

/* ===[ GOOGLE FONTS ]=== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Cormorant+Garamond:wght@400;500;600&display=swap');

/* ===[ CSS VARIABLES ]=== */
:root {
  --tl-parchment:  #f7f3ec;
  --tl-cream:      #fdfaf5;
  --tl-charcoal:   #1e2420;
  --tl-ink:        #1e2420;   /* dark bars and buttons (stays dark in dark mode) */
  --tl-on-dark:    #fdfaf5;   /* light text that sits on dark bars */
  --tl-charcoal2:  #2c3329;
  --tl-sage:       #6b7c5e;
  --tl-sage-lt:    #a3b898;
  --tl-sage-pale:  #dde5d8;
  --tl-sage-dk:    #48703D;
  --tl-terra:      #b85c38;
  --tl-terra-lt:   #d4845f;
  --tl-terra-pale: #f0ddd5;
  --tl-muted:      #7a8570;
  --tl-white:      #ffffff;
  --tl-border:     rgba(30,36,32,0.12);
  --tl-shadow:     0 2px 12px rgba(30,36,32,0.08);
  --tl-radius:     2px;
}

/* ===[ GLOBAL ]=== */
body {
  font-family: 'Open Sans', Arial, sans-serif !important;
  background-color: var(--tl-parchment) !important;
  color: var(--tl-charcoal) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#page-body {
  margin: 24px 0 !important;
}
 
.alert-info {
background: var(--tl-terra);
border-color: var(--tl-terra);
}

.alert-info a {
color: var(--tl-on-dark) !important;
}

p {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ===[ GENERAL LINKS ]=== */
/* No !important — lets scoped rules below override */
#page-body a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm) {
  color: var(--tl-sage-dk);
  transition: color 0.2s ease;
}

#page-body a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):hover {
  color: var(--tl-terra);
  text-decoration: none;
}

/* Category/stats panel heading links — must come after general rule, same specificity + !important wins */
#page-body .panel-forum > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm),
#page-body .panel-forum > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):link,
#page-body .panel-forum > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):visited,
#page-body .panel-stats > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm),
#page-body .panel-stats > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):link,
#page-body .panel-stats > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):visited {
  color: var(--tl-on-dark) !important;
}

#page-body .panel-forum > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):hover,
#page-body .panel-forum > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):focus,
#page-body .panel-stats > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):hover,
#page-body .panel-stats > .panel-heading a:not(.btn):not(.navbar-brand):not(.username-coloured):not(.forumtitle):not(.topictitle):not(.pagination-sm):focus {
  color: var(--tl-sage-lt) !important;
}

.panel-login {
background: var(--tl-parchment) !important;
}

/* ===[ POST BYLINE — username, date, clock ]=== */
/* text-muted base */
.text-muted {
  color: var(--tl-muted) !important;
}

/* Clock icon */
.text-muted i.fa,
i.fa-clock-o {
  color: var(--tl-muted) !important;
  display: inline-block !important;
}

/* Date/time */
.text-muted time {
  color: var(--tl-muted) !important;
}

/* Username with group colour — let inline style win by not setting color here */
.text-muted a.username-coloured,
a.username-coloured {
  /* intentionally no color — inline style="color: #AA0000" wins naturally */
  font-weight: 600 !important;
}

/* Username without group colour fallback */
a.username-coloured:not([style]),
a.username:not([style]) {
  color: var(--tl-sage-dk) !important;
  font-weight: normal !important;
}

/* Plain username class */
.username, a.username {
  color: var(--tl-charcoal) !important;
  font-weight: normal !important;
}

/* ===[ TOP NAVBAR ]=== */
.navbar-inverse {
  background-color: var(--tl-charcoal2) !important;
  border-color: rgba(163,184,152,0.15) !important;
  box-shadow: 0 0px 0px rgba(30,36,32,0.2) !important;
}

.navbar-inverse .navbar-brand,
.navbar-brand {
  color: var(--tl-on-dark) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
}

.navbar-brand:focus,
.navbar-brand:active {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:link,
.navbar-inverse .navbar-nav > li > a:visited {
 font-family: 'Open Sans', sans-serif !important;
  color: var(--tl-on-dark) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: var(--tl-white) !important;
  background-color: transparent !important;
}

/* Navbar icons */
.navbar-inverse i,
.navbar-inverse .fa,
.navbar-inverse .glyphicon,
.navbar-inverse [class*="icon-"],
.navbar-inverse .navbar-nav > li > a i,
.navbar-inverse .navbar-nav > li > a .fa,
.navbar-inverse .navbar-nav > li > a .glyphicon,
.navbar-inverse .navbar-nav > li > a [class*="icon-"] {
  color: var(--tl-on-dark) !important;
  opacity: 1 !important;
  filter: none !important;
}

.navbar-inverse .navbar-nav > li > a:hover i,
.navbar-inverse .navbar-nav > li > a:focus i,
.navbar-inverse .navbar-nav > .active > a i,
.navbar-inverse .navbar-nav > .open > a i {
  color: var(--tl-terra-lt) !important;
}

/* Hamburger */
.navbar-inverse .navbar-toggle {
  background-color: var(--tl-ink) !important;
  border-color: var(--tl-ink) !important;
}
.navbar-inverse .navbar-toggle .icon-bar { background-color: var(--tl-white) !important; }
.navbar-inverse .navbar-toggle:hover { background-color: var(--tl-sage) !important; }
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form { border-color: rgba(163,184,152,0.15) !important; }

/* ===[ DESKTOP DROPDOWNS ]=== */
.dropdown-menu,
.navbar-inverse .dropdown-menu {
  background-color: var(--tl-cream) !important;
  border-color: var(--tl-border) !important;
  box-shadow: 0 4px 16px rgba(30,36,32,0.1) !important;
  border-radius: var(--tl-radius) !important;
  font-size: 13px !important;
}

.dropdown-menu > li > a,
.dropdown-menu > li > a:link,
.dropdown-menu > li > a:visited,
.navbar-inverse .dropdown-menu > li > a,
.navbar-inverse .dropdown-menu > li > a:link,
.navbar-inverse .dropdown-menu > li > a:visited {
  color: var(--tl-charcoal) !important;
  background-color: var(--tl-cream) !important;
  font-size: 13px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
  background-color: var(--tl-parchment) !important;
  color: var(--tl-terra) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: var(--tl-sage) !important;
  color: var(--tl-white) !important;
}

.navbar-nav .dropdown-menu>li>a i {
color: var(--tl-charcoal) !important;
}

/* ===[ MASTHEAD / HERO ]=== */
.masthead { animation-name: sideupscroll-off; }

.flat-header,
.masthead:before {
  background-color: var(--tl-charcoal2) !important;
  background-image: none !important;
  background-size: cover !important;
  background-position: center bottom !important;
  height: 200px !important;
}

.flat-header h1, .masthead h1 {
  font-family: 'Open Sans', sans-serif !important;
  color: var(--tl-white) !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.masthead p, .flat-header p {
  color: rgba(255,255,255,0.55) !important;
  font-size: 14px !important;
}

.masthead .label, .flat-header .label {
  background-color: var(--tl-parchment) !important;
  color: var(--tl-charcoal) !important;
  font-size: 16px !important;
  padding: 10px !important;
}

.prefix-popover {
z-index: 9999 !important;
}


/* ===[ BREADCRUMBS ]=== */
.breadcrumb-line {
  background-color: var(--tl-parchment) !important;
  border-bottom: 0px solid var(--tl-border) !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
}

.breadcrumb li:first-child a { background: transparent !important; color: var(--tl-sage) !important; padding: 0 !important; }
.breadcrumb li:last-child a { color: var(--tl-charcoal) !important; font-weight: 600 !important; }
.breadcrumb > li + li:before { color: var(--tl-muted) !important; }

/* ===[ CATEGORY PANELS ]=== */
.panel-forum {
  background-color: var(--tl-cream) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  box-shadow: var(--tl-shadow) !important;
  margin-bottom: 1.25rem !important;
}

.panel-forum > .panel-heading,
.panel-stats .panel-heading {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--tl-on-dark) !important;
  background-color: var(--tl-ink) !important;
  border-bottom: 1px solid rgba(163,184,152,0.15) !important;
  border-radius: var(--tl-radius) var(--tl-radius) 0 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  padding: 12px 18px !important;
}

.panel-inner { border-radius: 0 0 var(--tl-radius) var(--tl-radius) !important; overflow: hidden !important; }

/* ===[ STATISTICS PANEL ]=== */
.panel-stats {
  background-color: var(--tl-cream) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  box-shadow: var(--tl-shadow) !important;
}

.panel-stats .output {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--tl-charcoal) !important;
  font-size: 2rem !important;
}

.panel-stats strong {
  color: var(--tl-muted) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.text-acqua     { color: var(--tl-sage-dk) !important; }
.text-seppia    { color: var(--tl-muted) !important; }
.text-melograno { color: var(--tl-terra) !important; }
.text-drank     { color: var(--tl-charcoal2) !important; }
.text-orange    { color: var(--tl-terra-lt) !important; }
.text-red       { color: var(--tl-terra) !important; }

/* ===[ TABLES ]=== */
.table-primary { border: none !important; }

.table-primary thead th {
  background-color: var(--tl-parchment) !important;
  color: var(--tl-muted) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--tl-border) !important;
  padding: 8px 14px !important;
}

.table-primary tbody td {
  color: var(--tl-charcoal) !important;
  background-color: var(--tl-cream) !important;
  border-top: 1px solid var(--tl-border) !important;
  padding: 14px !important;
  vertical-align: middle !important;
  font-size: 14px !important;
}

.table-primary tbody tr:nth-child(odd) td { background-color: var(--tl-cream) !important; }

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: var(--tl-parchment) !important;
  color: var(--tl-charcoal) !important;
}

table .stats-col {
  background-color: var(--tl-parchment) !important;
  color: var(--tl-muted) !important;
  font-size: 13px !important;
}

/* ===[ FORUM ICONS ]=== */
.row-icon-font,
.row-icon-font-topic,
tr .row-icon-font { display: none !important; }

.icon-wrapper,
.icon-wrapper.forum-read,
.icon-wrapper.forum-unread,
.icon-wrapper.topic-read,
.icon-wrapper.topic-unread {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Only hide <i> tags inside icon-wrapper, not all <i> tags globally */
.icon-wrapper > i { display: none !important; }

/* Default: folder (read) */
.icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 900 !important;
  content: "\f07b" !important;
  font-size: 25px !important;
  color: var(--tl-sage-lt) !important;
  display: inline-block !important;
  padding-left: 10px !important;
}

/* Unread: folder-open */
.forum_unread .icon-wrapper::before,
td:has(.forum-unread) .icon-wrapper::before,
tr:has(.forum-unread) .icon-wrapper::before,
[id^="forum-"]:has(.forum-unread) .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 900 !important;
  content: "\f07c" !important;
  color: var(--tl-terra) !important;
}

.forum-read  { color: var(--tl-muted) !important; }
.forum-unread { color: var(--tl-terra) !important; }

/* Per-forum icon overrides */

/*=== [The Guidepost] === */
#forum-2 .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important; font-weight: 800 !important;
  content: "\f277" !important; color: var(--tl-muted) !important;
color: var(--tl-sage-lt) !important;
}
#forum-2:has(.forum-unread) .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important; font-weight: 800 !important;
  content: "\f277" !important; color: var(--tl-terra) !important;
}

/*=== [Getting Started] === */
#forum-4 .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important; font-weight: 900 !important;
  content: "\f144" !important; color: var(--tl-muted) !important;
color: var(--tl-sage-lt) !important;
}
#forum-4:has(.forum-unread) .icon-wrapper::before {
  font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important;
  content: "\f144" !important; color: var(--tl-terra) !important;
}


/*=== [Regions] === */
#forum-5 .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important; font-weight: 400 !important;
  content: "\f0ac" !important; color: var(--tl-muted) !important;
color: var(--tl-sage-lt) !important;
}
#forum-5:has(.forum-unread) .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important; font-weight: 400 !important;
  content: "\f0ac" !important; color: var(--tl-terra) !important;
}


/*=== [Lorekeepers] === */
#forum-18 .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important; font-weight: 400 !important;
  content: "\f5ac" !important; color: var(--tl-muted) !important;
color: var(--tl-sage-lt) !important;
}
#forum-18:has(.forum-unread) .icon-wrapper::before {
  font-family: "Font Awesome 7 Sharp" !important; font-weight: 400 !important;
  content: "\f5ac" !important; color: var(--tl-terra) !important;
}

/* Topic icons */
.icon-moon-topic-read::before, .topic-read::before {
  font-family: "Font Awesome 7 Sharp" !important;
  font-weight: 900 !important;
  content: "\f075" !important;
  color: var(--tl-sage-lt) !important;
color: var(--tl-sage-lt) !important;
}

.icon-moon-topic-unread::before, .topic-unread::before {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 900 !important;
  content: "\f07b" !important;
  color: var(--tl-terra) !important;
}


.topic-locked::before {
  font-family: "Font Awesome 7 Sharp" !important;
  font-weight: 900 !important;
  content: "\f023" !important;
  color: var(--tl-terra) !important;
}


/* ===[ PINNED TOPIC ICON ]=== */
td:has(.icon-moon-pushpin2) .icon-wrapper::before,
tr:has(.icon-moon-pushpin2) .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 900 !important;
  content: "\e751" !important;
  color: var(--tl-sage-lt) !important; /* read */
}

td:has(.icon-moon-pushpin2.forum-unread) .icon-wrapper::before,
tr:has(.icon-moon-pushpin2.forum-unread) .icon-wrapper::before {
  color: var(--tl-terra) !important; /* unread */
}

/* ==[Link Forums ] == */
td:has(.icon-moon-link2) .icon-wrapper::before,
tr:has(.icon-moon-link2) .icon-wrapper::before {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 400 !important;
  content: "\e60e" !important;
  color: var(--tl-sage-lt) !important; /* read */
}

td:has(.icon-moon-link2.forum-unread) .icon-wrapper::before,
tr:has(.icon-moon-link2.forum-unread) .icon-wrapper::before {
  color: var(--tl-terra) !important; /* unread */
}

/* ===[ FORUM & TOPIC TITLES ]=== */
#page-body a.forumtitle,
#page-body a.forumtitle:link,
#page-body a.forumtitle:visited,
#page-body a.topictitle,
#page-body a.topictitle:link,
#page-body a.topictitle:visited {
  color: var(--tl-charcoal) !important;
  font-weight: 600 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
}

#page-body a.forumtitle:hover,
#page-body a.forumtitle:focus,
#page-body a.topictitle:hover,
#page-body a.topictitle:focus { color: var(--tl-sage-dk) !important; }

#page-body a.forumtitle:active,
#page-body a.topictitle:active { color: var(--tl-terra) !important; }

.description { color: var(--tl-muted) !important; font-size: 13px !important; margin-top: 3px !important; }
.subforums > .unread { color: var(--tl-terra) !important; }

#page-body .subforums a,
#page-body .subforums a:link,
#page-body .subforums a:visited { color: var(--tl-sage) !important; font-size: 13px !important; }
#page-body .subforums a:hover { color: var(--tl-terra) !important; }
.forum-mods > strong, .subforums > strong { color: var(--tl-muted) !important; font-size: 13px !important; }

/* ===[ LAST POST ]=== */
.lastsubject { color: var(--tl-charcoal) !important; font-weight: 500 !important; font-size: 14px !important; }

#page-body .lastsubject a,
#page-body .lastsubject a:link,
#page-body .lastsubject a:visited { color: var(--tl-charcoal) !important; }

#page-body .lastsubject a:hover,
.table-hover > tbody > tr:hover > td .lastsubject { color: var(--tl-sage-dk) !important; }

.forum-time { color: var(--tl-muted) !important; font-size: 12px !important; }
.last-wrapper { color: var(--tl-muted) !important; font-size: 13px !important; }

/* ===[ RECENT POSTS / HOMEPAGE FOOTER ]=== */
.section-page {
  background-color: var(--tl-parchment) !important;
  padding: 30px 0 !important;
}

.post-date, .entry-date, .date-block,
.rtblock .date, #rtblock .date,
.recent-topics .date,
.section-page .col-xs-2,
.section-page [class*="date"],
#rtblock [class*="date"] {
  background-color: var(--tl-sage) !important;
  color: var(--tl-white) !important;
}

.side-segment h2:after,
.side-segment h3:after {
  background-color: var(--tl-sage) !important;
}

/* MULTI COLUMN LAYOUT */
.section-page .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}

.section-page .row > div[class*="col-"] {
  width: 33.3333% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-bottom: 1.5rem !important;
  float: left !important;
}

.section-page .thumbnail,
.section-page .panel {
  margin-left: 40px !important;
  position: relative !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  background: var(--tl-cream) !important;
  box-shadow: var(--tl-shadow) !important;
  height: 100% !important;
}

.section-page .col-xs-2,
.section-page [class*="date-block"] {
  position: absolute !important;
  left: -40px !important;
  top: 0 !important;
  width: 50px !important;
  min-width: 50px !important;
  background-color: var(--tl-sage) !important;
  color: var(--tl-white) !important;
  border-radius: var(--tl-radius) !important;
  text-align: center !important;
  padding: 6px 4px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.section-page .btn-read-more,
.section-page a[href*="viewtopic"] {
  background-color: var(--tl-parchment) !important;
  color: var(--tl-sage-dk) !important;
  border-top: 1px solid var(--tl-border) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  display: block !important;
  text-align: center !important;
  padding: 10px !important;
}

/* Recent post titles only */
.section-page .topictitle,
.section-page a.topictitle,
.section-page .lastsubject a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  color: var(--tl-charcoal) !important;
  text-transform: none !important;
  display: block !important;
  margin-bottom: .35rem !important;
}

.section-page .topictitle:hover,
.section-page a.topictitle:hover,
.section-page .lastsubject a:hover {
  color: var(--tl-terra) !important;
}

/* Recent post tile background */
.section-page .thumbnail,
.section-page .panel,
.section-page .rtblock,
.section-page .recent-topics-item {
  background: var(--tl-cream) !important;
/* examples:
   background: #ffffff !important;
   background: #2B3329 !important;
*/
  
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  box-shadow: var(--tl-shadow) !important;
}

/* Make Load More full row width */
.section-page .row > .text-center,
.section-page .row > .col-xs-12,
.section-page .row > .load-more-wrap {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  float: none !important;
}

.section-page .btn-load,
.section-page .btn-load.btn-default,
.section-page a.btn-load {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* TABLET */
@media (max-width: 991px) {
  .section-page .row > div[class*="col-"] {
    width: 50% !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .section-page .row > div[class*="col-"] {
    width: 100% !important;
    float: none !important;
  }
}

/* ===[ PRE-FOOTER / FOOTER ]=== */
.section-pre-footer { background-color: var(--tl-ink) !important; }
.section-pre-footer .section-bg { background-color: var(--tl-charcoal2) !important; }
.section-pre-footer h3 { color: var(--tl-white) !important; }
.section-pre-footer .thumb i { color: var(--tl-sage-lt) !important; }

.burned-asphalt { background-color: var(--tl-ink) !important; }
.copyrights { color: var(--tl-muted) !important; font-size: 13px !important; }
.footer-nav a, .footer-foreground a { color: var(--tl-sage-lt) !important; font-size: 13px !important; }
.footer-nav a:hover, .footer-foreground a:hover { color: var(--tl-terra-lt) !important; }

/* ===[ TO TOP ]=== */
.top-flat { background-color: var(--tl-ink) !important; }
.top-flat:hover { background-color: var(--tl-sage) !important; }

/* ===[ BUTTONS ]=== */
.btn-primary {
  background-color: var(--tl-ink) !important;
  border-color: var(--tl-ink) !important;
  color: var(--tl-on-dark) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--tl-radius) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.open .dropdown-toggle.btn-primary {
  background-color: var(--tl-charcoal2) !important;
  border-color: var(--tl-charcoal2) !important;
}

/* btn-default base — ghost style for post action buttons */
.btn-default {
  background-color: var(--tl-sage-pale) !important;
  border-color: var(--tl-border) !important;
  color: var(--tl-charcoal) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--tl-radius) !important;
}

.btn-default:hover,
.btn-default:focus {
  background-color: var(--tl-parchment) !important;
  border-color: var(--tl-sage-lt) !important;
  color: var(--tl-terra) !important;
}

/* Icons inside any button */
.btn i,
.btn .fa,
.btn [class*="fa-"],
.btn [class*="icon-moon"] {
  color: inherit !important;
  display: inline-block !important;
}

/* Primary action buttons that should be sage (Reply, Search, etc.) */
.btn-load.btn-default,
.btn-read-more.btn-default,
form .btn-default,
.topic-actions > .btn-default {
  background-color: var(--tl-sage) !important;
  border-color: var(--tl-sage) !important;
  color: var(--tl-on-dark) !important;
}

.btn-load.btn-default:hover,
form .btn-default:hover,
.topic-actions > .btn-default:hover {
  background-color: var(--tl-sage-dk) !important;
  border-color: var(--tl-sage-dk) !important;
  color: var(--tl-on-dark) !important;
}

/* ===[ THREAD ACTION ICONS — subscribe, bookmark ]=== */
.watch-topic-link.t-icon::before {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 400 !important;
  content: "\f0f3" !important;
  font-size: 14px !important;
}

.t-bookmark.t-icon::before {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 400 !important;
  content: "\f02e" !important;
  font-size: 14px !important;
}

/* ===[ HEADINGS ]=== */
h1, h1 a { font-size: 26px !important; color: var(--tl-charcoal) !important; font-family: 'Open Sans', sans-serif !important; }
h2, h2 a { font-size: 22px !important; color: var(--tl-charcoal) !important; font-family: 'Open Sans', sans-serif !important; }
h3, h3 a { font-size: 18px !important; color: var(--tl-charcoal) !important; font-family: 'Open Sans', sans-serif !important; border-bottom-color: var(--tl-border) !important; text-transform: none !important; }
h4, h4 a { font-size: 16px !important; color: var(--tl-charcoal) !important; font-family: 'Open Sans', sans-serif !important; }
h5, h5 a { font-size: 15px !important; color: var(--tl-charcoal) !important; font-family: 'Open Sans', sans-serif !important; }
h6, h6 a { font-size: 14px !important; color: var(--tl-charcoal) !important; font-family: 'Open Sans', sans-serif !important; }

/* ===[ SEARCH ]=== */
.search-input-fullscreen { background-color: var(--tl-ink) !important; }
.search-input-fullscreen form:after { color: var(--tl-sage-lt) !important; opacity: 0.6 !important; }

/* ===[ PAGINATION ]=== */
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--tl-ink) !important;
  border-color: var(--tl-ink) !important;
  color: var(--tl-on-dark) !important;
}
.pagination > li > a, .pagination > li > span {
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-border) !important;
  background-color: var(--tl-cream) !important;
  font-size: 13px !important;
}
.pagination > li > a:hover {
  background-color: var(--tl-sage-pale) !important;
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-sage-lt) !important;
}

/* ===[ WELL / ALERTS ]=== */
.well { background-color: var(--tl-cream) !important; border-color: var(--tl-border) !important; font-size: 14px !important; }
.alert-primary { background-color: var(--tl-sage-pale) !important; border-color: var(--tl-sage) !important; color: var(--tl-charcoal) !important; }

/* ===[ CALL TO ACTION ]=== */
.call-to-action, .section-call-to-action, [class*="call-to-action"] { background-color: var(--tl-charcoal2) !important; }
.call-to-action .section-bg, .section-call-to-action .section-bg, [class*="call-to-action"] .section-bg { background-color: var(--tl-ink) !important; opacity: 0.5 !important; }
.call-to-action .btn, .call-to-action a.btn, .section-call-to-action .btn, [class*="call-to-action"] .btn { background-color: var(--tl-sage) !important; border-color: var(--tl-sage) !important; color: var(--tl-white) !important; font-weight: 600 !important; }
.call-to-action .btn:hover, .call-to-action a.btn:hover, [class*="call-to-action"] .btn:hover { background-color: var(--tl-sage-dk) !important; border-color: var(--tl-sage-dk) !important; }

/* ===[ ADMIN PANEL MENU ]=== */
#acp-menu a, #acp-menu li a { color: var(--tl-charcoal) !important; background-color: transparent !important; }
#acp-menu a:hover, #acp-menu li a:hover { color: var(--tl-terra) !important; background-color: var(--tl-parchment) !important; }
#acp-menu .active a, #acp-menu li.activetab > a { color: var(--tl-sage-dk) !important; font-weight: 600 !important; background-color: var(--tl-sage-pale) !important; }
#acp-menu h3 { color: var(--tl-muted) !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: 0.08em !important; }
#acp-menu i, #acp-menu .fa, #acp-menu [class*="icon-"] { color: var(--tl-sage-dk) !important; opacity: 1 !important; filter: none !important; }
#acp-menu li a i:before { font-family: "FontAwesome" !important; content: "\f013" !important; }

/* ===[ MOBILE ]=== */
@media (max-width: 767px) {
  .lines, .lines:after, .lines:before { background: var(--tl-white) !important; }

  .navbar-inverse,
  .navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-nav,
  .navbar-inverse .navbar-nav > li {
    background-color: var(--tl-charcoal2) !important;
  }

  .navbar-inverse .navbar-nav > li > a,
  .navbar-inverse .navbar-nav > li > a:link,
  .navbar-inverse .navbar-nav > li > a:visited {
    color: var(--tl-on-dark) !important;
    background-color: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }

  .navbar-inverse .navbar-nav > li > a:hover,
  .navbar-inverse .navbar-nav > li > a:focus,
  .navbar-inverse .navbar-nav > .open > a {
    color: var(--tl-white) !important;
    background-color: rgba(255,255,255,0.06) !important;
  }

  .navbar-inverse .navbar-nav > li > a i,
  .navbar-inverse .navbar-nav > li > a .fa,
  .navbar-inverse .navbar-nav > li > a .glyphicon,
  .navbar-inverse .navbar-nav > li > a [class*="icon-"] {
    color: var(--tl-on-dark) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu,
  .navbar-inverse .in .dropdown-menu,
  .navbar-inverse .collapse.in .dropdown-menu {
    background-color: var(--tl-cream) !important;
    border-top: 1px solid var(--tl-border) !important;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:link,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:visited,
  .navbar-inverse .in .dropdown-menu > li > a,
  .navbar-inverse .collapse.in .dropdown-menu > li > a {
    color: var(--tl-charcoal) !important;
    background-color: var(--tl-cream) !important;
    border-bottom: 1px solid var(--tl-border) !important;
    font-size: 14px !important;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
  .navbar-inverse .in .dropdown-menu > li > a:hover,
  .navbar-inverse .collapse.in .dropdown-menu > li > a:hover {
    color: var(--tl-terra) !important;
    background-color: var(--tl-parchment) !important;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu i,
  .navbar-inverse .navbar-nav .open .dropdown-menu .fa,
  .navbar-inverse .navbar-nav .open .dropdown-menu .glyphicon,
  .navbar-inverse .navbar-nav .open .dropdown-menu [class*="icon-"],
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a i,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a .fa {
    color: var(--tl-charcoal) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover i,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover .fa {
    color: var(--tl-terra) !important;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: var(--tl-border) !important;
  }
}

/* ===[ POST ACTION BUTTONS — always visible ]=== */
.btn-toolbar,
.btn-group {
  opacity: 1 !important;
  visibility: visible !important;
}

.fa-user-md:before {
font-weight: 900;
  font-family: "Font Awesome 7 Pro" !important;
    content: "\f7d9";
}

.blog-meta {
background: var(--tl-sage) !important;
    padding: .55em .9em !important;
}

/* ===[ POST DATE BAR ]=== */
.post-time-wrap,
.postbody .post-time-wrap,
p.post-time,
.post p:has(time),
div:has(> time) {
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  color: var(--tl-muted) !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
}

/* ===[ POST DATE — mobile ]=== */
@media (max-width: 767px) {
  .post-date-time,
  .postbody .post-time,
  .post .post-time,
  [class*="post-date"],
  [class*="post-time"] {
    background-color: var(--tl-parchment) !important;
    color: var(--tl-muted) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: var(--tl-radius) !important;
    padding: 3px 8px !important;
  }

.content::before {
clear: both !important;
margin-top: 2px !important;
}

}

/* ===[ ALTERNATING ROW COLORS ]=== */

/* Forum index rows */
.table-primary tbody tr:nth-child(odd) td {
  background-color: #FFFFFF!important;
}

.table-primary tbody tr:nth-child(even) td {
  background-color: var(--tl-cream) !important;
}

/* Topic list rows */
.topiclist tbody tr:nth-child(odd) td,
.table-primary.topiclist tr:nth-child(odd) td {
  background-color: var(--tl-cream) !important;
}

.topiclist tbody tr:nth-child(even) td,
.table-primary.topiclist tr:nth-child(even) td {
  background-color: #FFFFFF!important;
}

/* Hover still overrides both */
.table-hover > tbody > tr:hover > td {
  background-color: var(--tl-sage-pale) !important;
}

/* ===[ STOP MOBILE WORD BREAKING / HYPHENATION ]=== */
@media (max-width: 767px) {
  .postbody,
  .postbody .content,
  .postbody h1,
  .postbody h2,
  .postbody h3 {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width: 767px) {
  .postbody .content {
    clear: both !important;
    margin-top: 1rem !important;
  }

  .postbody .content * {
    float: none !important;
    clear: both !important;
  }
}
.postbody .content,
.post .content,
#preview .content {
  background: transparent !important;
  color: inherit !important;
}

/* shared divider base */
.tl-div {
  display: flex;
  align-items: center;
  padding: 6px 0;
  margin-top: 1.4em;
}
/* replace the ::before / ::after block with this */
.tl-div-line {
  flex: 1;
  height: 1px;
  background: rgba(30,36,32,0.18);
  display: block;
}
.tl-div-icon {
  flex-shrink: 0;
  padding: 0 12px;
}

/* [div-horseshoe] */
.tl-div-horseshoe .tl-div-icon { color: var(--tl-sage-lt); font-size: 18px; }

/* [div-horse] */
.tl-div-horse .tl-div-icon { color: var(--tl-sage); font-size: 18px; }

/* [div-double] */
.tl-div-double {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 0;
  margin-top: 1.4em;
}
.tl-div-double span {
  display: block;
  width: 100%;
  height: 1px;
}
.tl-div-double span:first-child { background: var(--tl-charcoal); opacity: .25; }
.tl-div-double span:last-child  { background: var(--tl-terra); opacity: .5; }

.tl-div-diamond .tl-diamonds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
}
.tl-div-diamond .tl-diamonds span {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--tl-sage-lt);
  transform: rotate(45deg);
}
.tl-div-diamond .tl-diamonds span.lg {
  width: 9px; height: 9px;
  background: var(--tl-sage);
}

/* [div-bit] */
.tl-div-bit { gap: 10px; }
.tl-div-bit svg { flex-shrink: 0; }

/* [div-dots] */
.tl-div-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  margin-top: 1.4em;
}
.tl-div-dots span {
  display: inline-block;
  border-radius: 50%;
}
.tl-div-dots span.sm { width: 4px; height: 4px; background: var(--tl-sage-lt); }
.tl-div-dots span.md { width: 6px; height: 6px; background: var(--tl-sage); }
.tl-div-dots span.lg { width: 8px; height: 8px; background: var(--tl-terra); }

/* [div-feather] */
.tl-div-feather {
  display: flex;
  align-items: center;
  padding: 6px 0;
  margin-top: 1.4em;
}
.tl-div-feather .left  { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--tl-sage)); }
.tl-div-feather .right { flex: 1; height: 1px; background: linear-gradient(to left, transparent, var(--tl-sage)); }
.tl-div-feather .center {
  width: 8px; height: 8px;
  background: var(--tl-sage);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin: 0 10px;
}

.tl-rev-toggle { display: none; }

.tl-rev-toggle + .tl-rev-box .tl-rev-label { 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f7f3ec;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7c5e;
  user-select: none;
  border-bottom: 1px solid transparent;
}

.tl-rev-toggle + .tl-rev-box .tl-rev-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tl-rev-toggle:checked + .tl-rev-box .tl-rev-content {
  max-height: 1000px;
}

.tl-rev-toggle:checked + .tl-rev-box .tl-rev-label {
  border-bottom: 1px solid rgba(30,36,32,0.08);
}

.bbcode-table tr:nth-child(even) {
    background: #f5f1ea;
}
.bbcode-table tr:nth-child(odd) {
    background: #ffffff;
}
.bbcode-table tr:first-child {
    background: #3a3a3a;
}
.buzz-header-row br { display: none; }

.buzz-header-row br { display: none; }

/* ==========================================================================
   TOPLINE PRESTIGE FLAIR  (added on top of everything above; keep at the end)
   Colours reuse the --tl-* variables defined at the top of this file.
   ========================================================================== */

/* ---- Category headings: terra cotta double rule + diamond marker ---- */
.panel-forum > .panel-heading,
.panel-stats > .panel-heading {
  border-bottom: 3px double var(--tl-terra) !important;
}
.panel-forum > .panel-heading::before {
  content: "\25C6";
  color: var(--tl-terra-lt);
  font-size: 0.7em;
  margin-right: 10px;
  vertical-align: middle;
}

/* ---- Panels lift slightly on hover ---- */
.panel-forum {
  transition: box-shadow 0.2s ease;
}
.panel-forum:hover {
  box-shadow: 0 2px 4px rgba(30,36,32,0.10), 0 8px 20px rgba(30,36,32,0.10) !important;
}

/* ---- Row accent: sage edge that turns terra cotta on hover ---- */
.table-primary tbody tr td:first-child {
  border-left: 4px solid var(--tl-sage-lt) !important;
  transition: border-left-color 0.18s ease;
}
.table-hover > tbody > tr:hover > td:first-child {
  border-left-color: var(--tl-terra) !important;
}

/* ---- Forum and topic titles: Open Sans ---- */
#page-body a.forumtitle,
#page-body a.forumtitle:link,
#page-body a.forumtitle:visited,
#page-body a.topictitle,
#page-body a.topictitle:link,
#page-body a.topictitle:visited {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
#page-body a.forumtitle:hover,
#page-body a.forumtitle:focus,
#page-body a.topictitle:hover,
#page-body a.topictitle:focus {
  color: var(--tl-terra) !important;
}

/* ---- Buttons: terra cotta underline accent, terra cotta on hover ---- */
.btn-primary {
  border-bottom: 3px solid var(--tl-terra) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.open .dropdown-toggle.btn-primary {
  background-color: var(--tl-terra) !important;
  border-color: var(--tl-terra) !important;
  border-bottom-color: var(--tl-ink) !important;
  color: var(--tl-white) !important;
}

/* ---- Pagination hover ---- */
.pagination > li > a:hover {
  background-color: var(--tl-ink) !important;
  border-color: var(--tl-ink) !important;
  color: var(--tl-on-dark) !important;
}

/* ---- Footer ornament above the copyright line ---- */
.copyrights::before {
  content: "\25C6  \25C6  \25C6";
  display: block;
  color: var(--tl-terra);
  font-size: 0.7rem;
  letter-spacing: 0.6em;
  margin-bottom: 8px;
}


/* ==========================================================================
   TOPLINE PRESTIGE: HEADER + COLUMN LABEL  (keep at the very end)
   ========================================================================== */

/* ---- Hero header: soft lattice, warm glow, double rule underneath ---- */
.flat-header,
.masthead:before {
  background-color: var(--tl-charcoal2) !important;
  background-image:
    radial-gradient(ellipse at 18% 0%, rgba(184,92,56,0.20), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(163,184,152,0.10), transparent 50%),
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.020) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.020) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #2c3329 0%, #1e2420 100%) !important;
}

.flat-header {
  border-bottom: 3px double var(--tl-terra) !important;
}

/* Title shadow */
.flat-header h1,
.masthead h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}

/* Tagline: Open Sans, softer */
.flat-header p,
.masthead p {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  color: rgba(247,243,236,0.72) !important;
}

/* Nav links get a terra cotta underline on hover / open */
.navbar-inverse .navbar-nav > li > a {
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a {
  box-shadow: inset 0 -3px 0 var(--tl-terra) !important;
}



/* ==========================================================================
   TOPLINE PRESTIGE: HERO PICTURE  (keep at the very end)
   Built for the Flatboots header markup:
     <div class="flat-header"><div class="masthead"></div><div class="wrapper-head">...
   The picture is its own layer on .flat-header, behind the title text.
   Image: https://toplinesim.com/forum/styles/FLATBOOTS/tl_hero.jpg
   ========================================================================== */
.flat-header {
  position: relative !important;
  overflow: hidden !important;
}

.flat-header .masthead {
  z-index: 0 !important;
}

.flat-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1700 / 668;
  max-width: 75%;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(30,36,32,0.30) 0%, rgba(30,36,32,0.50) 100%),
    url("https://toplinesim.com/forum/styles/FLATBOOTS/tl_hero.jpg");
  background-repeat: no-repeat;
  background-position: 0 0, right bottom;
  background-size: 100% 100%, cover;
  /* fade the picture out toward the title text on the left */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.85) 45%, #000 70%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.85) 45%, #000 70%);
}

/* keep the title and tagline above the picture */
.flat-header .wrapper-head {
  position: relative !important;
  z-index: 3 !important;
}

/* Small screens: picture becomes a faint backdrop */
@media (max-width: 767px) {
  .flat-header::after {
    max-width: 100%;
    opacity: 0.22;
  }
}


/* ==========================================================================
   TOPLINE PRESTIGE: SHOW-RING FLAIR  (keep at the very end)
   Ribbon-bookmark category headers, floating row cards, rosette icons,
   ribbon-cut date badges. Your per-forum, pinned and link-forum icons are kept.
   ========================================================================== */

/* ---- Category headers: a ribbon bookmark with a rosette, inside a thin frame ---- */
.panel-forum > .panel-heading {
  position: relative !important;
  padding-left: 66px !important;
  box-shadow: inset 0 0 0 4px var(--tl-ink), inset 0 0 0 5px rgba(212,132,95,0.30) !important;
}

.panel-forum > .panel-heading::before {
  content: "\f559";
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0;
  position: absolute;
  left: 20px;
  top: 0;
  width: 28px;
  height: calc(100% + 10px);
  margin: 0;
  padding-top: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: var(--tl-on-dark);
  background: linear-gradient(180deg, var(--tl-terra-lt), var(--tl-terra));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
  z-index: 3;
}

/* ---- Forum rows: floating cards ---- */
.panel-forum .table-primary {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  width: calc(100% - 24px) !important;
  margin: 0 12px 4px !important;
  background: transparent !important;
}

.panel-forum .table-primary thead th {
  background: transparent !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.panel-forum .table-primary tbody tr td {
  background-color: #ffffff !important;
  border: 0 !important;
  border-top: 1px solid var(--tl-border) !important;
  border-bottom: 1px solid var(--tl-border) !important;
  box-shadow: 0 6px 8px -3px rgba(30,36,32,0.16);
  /* let the shadow show below the card only, so cells join without seams */
  clip-path: inset(0 0 -16px 0);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.panel-forum .table-primary tbody tr td:first-child {
  border-left: 4px solid var(--tl-sage-lt) !important;
  border-radius: 4px 0 0 4px;
  clip-path: inset(0 0 -16px -12px);
}

.panel-forum .table-primary tbody tr td:last-child {
  border-right: 1px solid var(--tl-border) !important;
  border-radius: 0 4px 4px 0;
  clip-path: inset(0 -12px -16px 0);
}

.panel-forum .table-primary.table-hover > tbody > tr:hover > td {
  background-color: #f3f6ef !important;
  box-shadow: 0 8px 12px -3px rgba(30,36,32,0.26);
}
.panel-forum .table-primary.table-hover > tbody > tr:hover > td:first-child {
  border-left-color: var(--tl-terra) !important;
}

/* ---- Rosette icons in a ring (replaces the folder icons) ---- */
.icon-wrapper::before {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  margin-left: 4px;
  border-radius: 50%;
  font-size: 19px !important;
  line-height: 1 !important;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px var(--tl-sage-lt);
}

/* read forums: rosette */
.icon-wrapper.forum-read::before {
  content: "\f559" !important;
}

/* unread forums and topics: terra cotta ring + rosette (pinned and link forums keep their own icon) */
.forum_unread .icon-wrapper::before,
td:has(.forum-unread) .icon-wrapper::before,
tr:has(.forum-unread) .icon-wrapper::before,
[id^="forum-"]:has(.forum-unread) .icon-wrapper::before,
.icon-moon-topic-unread::before,
.topic-unread::before {
  background: var(--tl-terra-pale) !important;
  box-shadow: inset 0 0 0 2px var(--tl-terra) !important;
}

td:has(.forum-unread):not(:has(.icon-moon-pushpin2, .icon-moon-link2)) .icon-wrapper::before,
tr:has(.forum-unread):not(:has(.icon-moon-pushpin2, .icon-moon-link2)) .icon-wrapper::before,
[id^="forum-"]:has(.forum-unread):not(:has(.icon-moon-pushpin2, .icon-moon-link2)) .icon-wrapper::before,
.icon-moon-topic-unread::before,
.topic-unread::before {
  content: "\f559" !important;
}

/* ---- Homepage recent-post tiles: show-entry cards with a ribbon-cut date ---- */
.section-page .thumbnail,
.section-page .panel {
  border-top: 3px solid var(--tl-sage-lt) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.section-page .thumbnail:hover,
.section-page .panel:hover {
  transform: translateY(-3px);
  border-top-color: var(--tl-terra) !important;
  box-shadow: 0 2px 4px rgba(30,36,32,0.10), 0 14px 26px rgba(30,36,32,0.14) !important;
}

.section-page .col-xs-2,
.section-page [class*="date-block"] {
  background-color: var(--tl-terra) !important;
  border-radius: 0 !important;
  padding-bottom: 18px !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}


/* ==========================================================================
   TOPLINE PRESTIGE: DARK MODE + TOGGLE BUTTON  (keep at the very end)
   Dark mode applies when <html data-theme="dark"> is set by dark-toggle.js.
   Without that script nothing here changes the look.
   ========================================================================== */

/* ---- The toggle button (floating, bottom left) ---- */
.tl-theme-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1050;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tl-on-dark);
  background: var(--tl-ink);
  box-shadow: 0 0 0 2px var(--tl-terra), 0 6px 16px rgba(0,0,0,0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tl-theme-toggle:hover,
.tl-theme-toggle:focus {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--tl-terra-lt), 0 10px 20px rgba(0,0,0,0.30);
  outline: none;
}
.tl-theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tl-theme-toggle .tl-sun { display: none; }
:root[data-theme="dark"] .tl-theme-toggle .tl-sun { display: block; }
:root[data-theme="dark"] .tl-theme-toggle .tl-moon { display: none; }
:root[data-theme="dark"] .tl-theme-toggle { background: #2c3a30; }
@media print { .tl-theme-toggle { display: none !important; } }

/* ---- Dark palette: your existing rules pick these up through the variables ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --tl-parchment: #121714;
  --tl-cream: #1a211d;
  --tl-surface: #222b25;
  --tl-surface-hover: #2b372e;
  --tl-charcoal: #e9e4d8;      /* body and heading text */
  --tl-ink: #0b0f0d;           /* deep bars: category headers, footer */
  --tl-muted: #9aa591;
  --tl-border: rgba(255,255,255,0.11);
  --tl-sage-dk: #9cc08c;       /* links */
  --tl-sage-pale: #27342a;
  --tl-terra-pale: #3b2a22;
  --tl-shadow: 0 2px 14px rgba(0,0,0,0.50);
}

/* ---- Surfaces Flatboots/Bootstrap draw on their own ---- */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .panel-default,
:root[data-theme="dark"] .panel-body,
:root[data-theme="dark"] .thumbnail,
:root[data-theme="dark"] .well,
:root[data-theme="dark"] .jumbotron,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .input-group-addon,
:root[data-theme="dark"] .post.bg1,
:root[data-theme="dark"] .post.bg2,
:root[data-theme="dark"] .postbody {
  background-color: var(--tl-cream) !important;
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-border) !important;
}
:root[data-theme="dark"] .panel-default > .panel-heading,
:root[data-theme="dark"] .panel-footer {
  background-color: var(--tl-surface) !important;
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-border) !important;
}

/* ---- Forms ---- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] input[type="text"]:not(#keywords),
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--tl-surface) !important;
  color: var(--tl-charcoal) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
:root[data-theme="dark"] ::placeholder { color: var(--tl-muted) !important; opacity: 1; }
:root[data-theme="dark"] .close { color: var(--tl-charcoal) !important; text-shadow: none !important; }

/* ---- Tabs, quotes, code ---- */
:root[data-theme="dark"] .nav-tabs { border-bottom-color: var(--tl-border) !important; }
:root[data-theme="dark"] .nav-tabs > li > a { color: var(--tl-muted) !important; }
:root[data-theme="dark"] .nav-tabs > li > a:hover {
  background-color: var(--tl-cream) !important;
  border-color: var(--tl-border) !important;
}
:root[data-theme="dark"] .nav-tabs > li.active > a,
:root[data-theme="dark"] .nav-tabs > li.active > a:hover,
:root[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background-color: var(--tl-cream) !important;
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-border) !important;
}
:root[data-theme="dark"] blockquote {
  background-color: var(--tl-surface) !important;
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-border) !important;
}
:root[data-theme="dark"] pre,
:root[data-theme="dark"] code,
:root[data-theme="dark"] .codebox {
  background-color: var(--tl-ink) !important;
  color: #d9e6cf !important;
  border-color: var(--tl-border) !important;
}
:root[data-theme="dark"] hr { border-top-color: var(--tl-border) !important; }

/* ---- Forum lists: alternating rows, then the floating cards on top ---- */
:root[data-theme="dark"] .table-primary tbody tr:nth-child(odd) td { background-color: var(--tl-surface) !important; }
:root[data-theme="dark"] .table-primary tbody tr:nth-child(even) td { background-color: var(--tl-cream) !important; }
:root[data-theme="dark"] .topiclist tbody tr:nth-child(odd) td,
:root[data-theme="dark"] .table-primary.topiclist tr:nth-child(odd) td { background-color: var(--tl-cream) !important; }
:root[data-theme="dark"] .topiclist tbody tr:nth-child(even) td,
:root[data-theme="dark"] .table-primary.topiclist tr:nth-child(even) td { background-color: var(--tl-surface) !important; }

:root[data-theme="dark"] .panel-forum .table-primary tbody tr td {
  background-color: var(--tl-surface) !important;
  box-shadow: 0 6px 8px -3px rgba(0,0,0,0.55);
}
:root[data-theme="dark"] .panel-forum .table-primary.table-hover > tbody > tr:hover > td {
  background-color: var(--tl-surface-hover) !important;
  box-shadow: 0 8px 12px -3px rgba(0,0,0,0.65);
}
:root[data-theme="dark"] .icon-wrapper::before { background: var(--tl-cream); }

/* ---- Category headers stay deep and framed ---- */
:root[data-theme="dark"] .panel-forum > .panel-heading,
:root[data-theme="dark"] .panel-stats > .panel-heading,
:root[data-theme="dark"] .panel-stats .panel-heading {
  background-color: var(--tl-ink) !important;
  color: var(--tl-on-dark) !important;
}

/* ---- Buttons, pagination, back-to-top ---- */
:root[data-theme="dark"] .btn-primary {
  background-color: #2c3a30 !important;
  border-color: #2c3a30 !important;
  border-bottom-color: var(--tl-terra) !important;
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus,
:root[data-theme="dark"] .btn-primary:active {
  background-color: var(--tl-terra) !important;
  border-color: var(--tl-terra) !important;
  border-bottom-color: #2c3a30 !important;
}
:root[data-theme="dark"] .pagination > .active > a,
:root[data-theme="dark"] .pagination > .active > a:focus,
:root[data-theme="dark"] .pagination > .active > a:hover,
:root[data-theme="dark"] .pagination > .active > span,
:root[data-theme="dark"] .pagination > .active > span:focus,
:root[data-theme="dark"] .pagination > .active > span:hover,
:root[data-theme="dark"] .pagination > li > a:hover {
  background-color: var(--tl-terra) !important;
  border-color: var(--tl-terra) !important;
  color: var(--tl-on-dark) !important;
}
:root[data-theme="dark"] .top-flat { background-color: #2c3a30 !important; }

/* ---- Your forum-post helpers with hard-coded light colours ---- */
:root[data-theme="dark"] .tl-rev-toggle + .tl-rev-box .tl-rev-label {
  background: var(--tl-surface);
  color: var(--tl-sage-lt);
}
:root[data-theme="dark"] .bbcode-table tr:nth-child(even) { background: #1f2822; }
:root[data-theme="dark"] .bbcode-table tr:nth-child(odd) { background: #1a211d; }


/* ==========================================================================
   TOPLINE PRESTIGE: GREEN + / EXPAND BUTTONS ON FORUM ROWS  (keep at the very end)
   ========================================================================== */
.panel-forum td .btn,
.panel-forum td button,
.panel-forum td a[class*="btn"],
.panel-forum td [data-toggle="collapse"] {
  background-color: var(--tl-sage) !important;
  background-image: none !important;
  border-color: var(--tl-sage) !important;
  color: var(--tl-on-dark) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.panel-forum td .btn:hover,
.panel-forum td .btn:focus,
.panel-forum td .btn:active,
.panel-forum td button:hover,
.panel-forum td button:focus,
.panel-forum td a[class*="btn"]:hover,
.panel-forum td [data-toggle="collapse"]:hover,
.panel-forum td [data-toggle="collapse"][aria-expanded="true"] {
  background-color: var(--tl-terra) !important;
  border-color: var(--tl-terra) !important;
  color: var(--tl-on-dark) !important;
}

.panel-forum td .btn i,
.panel-forum td .btn .fa,
.panel-forum td .btn svg,
.panel-forum td button i,
.panel-forum td button .fa,
.panel-forum td [data-toggle="collapse"] i {
  color: inherit !important;
  fill: currentColor;
}

/* ---- Extra: stop forum descriptions breaking words mid-word on phones ---- */
.panel-forum td .description,
.panel-forum td a.forumtitle {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: manual !important;
          hyphens: manual !important;
}


/* ==========================================================
   DARK MODE: post text
   Normal posts: force light text, even over member-set dark colors.
   Posts built from cards/backgrounds (official notices etc.):
   untouched text colors, shown on a parchment slab so they stay readable.
   ========================================================== */
:root[data-theme="dark"] .postbody .content:not(:has([style*="background"])),
:root[data-theme="dark"] .postbody .content:not(:has([style*="background"])) span,
:root[data-theme="dark"] .postbody .content:not(:has([style*="background"])) p,
:root[data-theme="dark"] .postbody .content:not(:has([style*="background"])) div,
:root[data-theme="dark"] .postbody .content:not(:has([style*="background"])) font,
:root[data-theme="dark"] .postbody .content:not(:has([style*="background"])) li {
  color: #e9e4d8 !important;
}
:root[data-theme="dark"] .postbody .content:not(:has([style*="background"])) a { color: #b5d6a5 !important; }

:root[data-theme="dark"] .postbody .content:has([style*="background"]):not(:has([style*="var(--tl"])) {
  background-color: transparent !important;
  border-radius: 0;
  padding: 0;
}


/* ==========================================================
   DARK MODE: signature divider (white dotted tab above signatures)
   ========================================================== */
:root[data-theme="dark"] .signature,
:root[data-theme="dark"] .postbody .signature,
:root[data-theme="dark"] .post .signature { border-color: var(--tl-border) !important; }
:root[data-theme="dark"] .signature::before,
:root[data-theme="dark"] .signature::after,
:root[data-theme="dark"] .postbody .signature::before,
:root[data-theme="dark"] .postbody .signature::after,
:root[data-theme="dark"] .signature > hr,
:root[data-theme="dark"] .signature .sig-divider,
:root[data-theme="dark"] .signature .sig-dots {
  background-color: var(--tl-cream) !important;
  color: var(--tl-muted) !important;
  border-color: var(--tl-border) !important;
}
:root[data-theme="dark"] .signature::before { box-shadow: none !important; }
:root[data-theme="dark"] .signature hr,
:root[data-theme="dark"] .postbody hr { border-color: var(--tl-border) !important; background-color: var(--tl-border) !important; }


/* ==========================================================
   Post separator (dots between posts) — dark mode + spacing
   ========================================================== */
p.separator { margin-bottom: 22px !important; }
:root[data-theme="dark"] p.separator,
:root[data-theme="dark"] .separator.text-center {
  background-color: var(--tl-parchment) !important;
  border-color: var(--tl-border) !important;
  color: var(--tl-muted) !important;
}
:root[data-theme="dark"] p.separator i,
:root[data-theme="dark"] p.separator .fa {
  color: var(--tl-sage-dk) !important;
  background-color: transparent !important;
}
:root[data-theme="dark"] p.separator::before,
:root[data-theme="dark"] p.separator::after { border-color: var(--tl-border) !important; background-color: var(--tl-border) !important; }


/* ==========================================================
   "Liked this" pill — spacing + dark mode
   ========================================================== */
.label-huskygray {
  margin-top: 14px !important;
  display: inline-block;
}
:root[data-theme="dark"] .label-huskygray {
  background-color: var(--tl-surface) !important;
  color: var(--tl-muted) !important;
  border: 1px solid var(--tl-border);
}
:root[data-theme="dark"] .label-huskygray a { color: var(--tl-sage-dk) !important; }
:root[data-theme="dark"] .label-huskygray a:hover { color: var(--tl-terra) !important; }


/* ==========================================================
   DARK MODE: variable-based posts (cards using var(--tl-*))
   Belt and braces: no parchment slab, no extra padding.
   ========================================================== */
html:root[data-theme="dark"] body .postbody .content:has([style*="var(--tl"]) {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}


/* ==========================================================
   DARK MODE: user menu + notification dropdowns (Flatboots)
   Markup: ul.dropdown-menu.user-login-drop > li > .navbar-wrapper >
   .navbar-content / .navbar-footer; mobile uses ul.dropdown-menu.usermenu
   ========================================================== */
html:root[data-theme="dark"] body .user-login-drop,
html:root[data-theme="dark"] body .user-login-drop > li,
html:root[data-theme="dark"] body .user-login-drop .navbar-wrapper,
html:root[data-theme="dark"] body .user-login-drop .navbar-content,
html:root[data-theme="dark"] body .user-login-drop .navbar-footer,
html:root[data-theme="dark"] body .user-login-drop .navbar-footer-content,
html:root[data-theme="dark"] body .dropdown-menu.usermenu,
html:root[data-theme="dark"] body .dropdown-menu.usermenu > li {
  background-color: var(--tl-cream) !important;
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-border) !important;
}
html:root[data-theme="dark"] body .user-login-drop .navbar-footer {
  background-color: var(--tl-surface) !important;
  border-top: 1px solid var(--tl-border) !important;
}
html:root[data-theme="dark"] body .user-login-drop::before,
html:root[data-theme="dark"] body .user-login-drop::after { border-bottom-color: var(--tl-cream) !important; }
html:root[data-theme="dark"] body .user-login-drop .navbar-footer .btn-default {
  background-color: #2c3a30 !important;
  border-color: #2c3a30 !important;
  color: var(--tl-on-dark, #f2efe6) !important;
}


/* ==========================================================
   DARK MODE: posting / reply editor panels
   (scoped to body.section-posting; catches the Preview/Submit bar,
   the Options / Upload attachment tab strip and their bodies)
   ========================================================== */
html:root[data-theme="dark"] body.section-posting .panel,
html:root[data-theme="dark"] body.section-posting .panel > div,
html:root[data-theme="dark"] body.section-posting .panel-heading,
html:root[data-theme="dark"] body.section-posting .panel-footer,
html:root[data-theme="dark"] body.section-posting .panel-body,
html:root[data-theme="dark"] body.section-posting .panel-primary > .panel-heading,
html:root[data-theme="dark"] body.section-posting .panel-default > .panel-heading,
html:root[data-theme="dark"] body.section-posting .tab-content,
html:root[data-theme="dark"] body.section-posting .nav-tabs {
  background-color: var(--tl-cream) !important;
  color: var(--tl-charcoal) !important;
  border-color: var(--tl-border) !important;
}
html:root[data-theme="dark"] body.section-posting .panel-heading,
html:root[data-theme="dark"] body.section-posting .nav-tabs {
  background-color: var(--tl-surface) !important;
}
html:root[data-theme="dark"] body.section-posting .nav-tabs > li.active > a,
html:root[data-theme="dark"] body.section-posting .nav-tabs > li.active > a:hover,
html:root[data-theme="dark"] body.section-posting .nav-tabs > li.active > a:focus {
  background-color: var(--tl-cream) !important;
  color: var(--tl-charcoal) !important;
}
html:root[data-theme="dark"] body.section-posting input[type="checkbox"],
html:root[data-theme="dark"] body.section-posting input[type="radio"] { accent-color: var(--tl-sage); }

/* Posting page: Preview / Submit bar (extra guesses until exact class is known) */
html:root[data-theme="dark"] body.section-posting fieldset,
html:root[data-theme="dark"] body.section-posting .submit-buttons,
html:root[data-theme="dark"] body.section-posting .action-bar,
html:root[data-theme="dark"] body.section-posting .bar,
html:root[data-theme="dark"] body.section-posting .panel-footer,
html:root[data-theme="dark"] body.section-posting .well,
html:root[data-theme="dark"] body.section-posting #postform > div:not(.panel-forum),
html:root[data-theme="dark"] body.section-posting form > .panel + div,
html:root[data-theme="dark"] body.section-posting .text-center:has(> input[type="submit"]),
html:root[data-theme="dark"] body.section-posting .text-center:has(> .btn) {
  background-color: var(--tl-cream) !important;
  border-color: var(--tl-border) !important;
}
/* ===[ POST BODY — transparent, inherits the post's own light/dark background ]=== */
html body .postbody .content,
html body .post .content,
html body #preview .content {
  background: transparent !important;
  color: inherit !important;
}