/*****************************************************************
* 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-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: 14px !important;
  line-height: 1.65 !important;
}

#page-body {
  margin: 24px 0 !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-cream) !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: 600 !important;
}

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

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

.navbar-inverse .navbar-brand,
.navbar-brand {
  color: var(--tl-cream) !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-cream) !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-cream) !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-charcoal) !important;
  border-color: var(--tl-charcoal) !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: 14px !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: 14px !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;
}

/* ===[ 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;
}

/* ===[ 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-cream) !important;
  background-color: var(--tl-charcoal) !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;
}

/* 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 */
}

/* ===[ 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; }

.section-page .row > div[class*="col-"] { width: 100% !important; margin-bottom: 1.5rem !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;
}

.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;
}

/* ===[ PRE-FOOTER / FOOTER ]=== */
.section-pre-footer { background-color: var(--tl-charcoal) !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-charcoal) !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-charcoal) !important; }
.top-flat:hover { background-color: var(--tl-sage) !important; }

/* ===[ BUTTONS ]=== */
.btn-primary {
  background-color: var(--tl-charcoal) !important;
  border-color: var(--tl-charcoal) !important;
  color: var(--tl-cream) !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-cream) !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-cream) !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-cream) !important;
}

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

.t-bookmark.t-icon::before {
  font-family: "Font Awesome 7 Free" !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-charcoal) !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-charcoal) !important;
  border-color: var(--tl-charcoal) !important;
  color: var(--tl-cream) !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-charcoal) !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-cream) !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-cream) !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;
  }
}

/* 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);
}