/*
Theme Name: Former Lawman
Theme URI: https://formerlawman.com
Description: Former Lawman child theme. Dark, cinematic, mobile-first. Built on Newspaper.
Author: Former Lawman
Template: Newspaper
Version: 1.1
*/

/* ============================================================
   BRAND FOUNDATION
   Bebas Neue headings - Oswald subheads - Inter body
   #313537 charcoal - #7A6C5F tan - #415408 olive - #85C742 Rumble
   ============================================================ */

:root{
  --fl-bg:#0f1112;
  --fl-surface:#17191a;
  --fl-line:#2b2e30;
  --fl-text:#ffffff;
  --fl-muted:#8b857f;
  --fl-charcoal:#313537;
  --fl-tan:#7A6C5F;
  --fl-olive:#415408;
  --fl-rumble:#85C742;
  --fl-h:'Bebas Neue',Impact,sans-serif;
  --fl-sub:'Oswald',sans-serif;
  --fl-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

body,
body.td-animation-stack-type0 .td-animation-stack .entry-thumb{
  background-color:var(--fl-bg);
  color:#cfc9c2;
  font-family:var(--fl-body);
}

/* ---------- Headings ---------- */
h1,h2,h3,h4,h5,
.td-module-title,
.entry-title,
.td-page-title,
.block-title span,
.block-title a,
.widget_categories .block-title,
.td_block_title{
  font-family:var(--fl-h)!important;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--fl-text);
}

.entry-title,.td-page-title{line-height:.98}

/* Module titles read better in Oswald at small sizes than Bebas */
.td_module_wrap .entry-title,
.td_module_wrap .td-module-title,
.td-block-span12 .entry-title,
.td-block-span6 .entry-title,
.td-block-span4 .entry-title{
  font-family:var(--fl-sub)!important;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.24;
}

.td-module-title a{color:var(--fl-text)}
.td-module-title a:hover{color:var(--fl-rumble)}

/* ---------- Body copy ---------- */
.td-post-content p,
.td-post-content li,
.tdb_single_content p,
.tdb_single_content li{
  font-family:var(--fl-body);
  font-size:16.5px;
  line-height:1.75;
  color:#cfc9c2;
}

.td-post-content h2,
.tdb_single_content h2{
  font-family:var(--fl-h)!important;
  font-size:32px;
  letter-spacing:.03em;
  margin:34px 0 12px;
  color:var(--fl-text);
}

.td-post-content a,.tdb_single_content a{color:var(--fl-rumble)}

/* ---------- Chrome ---------- */
.td-header-wrap,
.td-header-menu-wrap,
.td-header-main-menu,
.td-header-menu-wrap-full,
.td-affix,
.td-footer-wrapper,
.td-sub-footer-container{
  background-color:var(--fl-bg)!important;
  border-color:var(--fl-line);
}

.sf-menu > li > a,
.td-header-menu-social .td-social-icon-wrap a{
  font-family:var(--fl-sub)!important;
  font-weight:500;
  font-size:13.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fl-text)!important;
}
.sf-menu > li > a:hover,
.sf-menu > .current-menu-item > a,
.sf-menu > .current-category-ancestor > a{color:var(--fl-rumble)!important}

.td-header-wrap .td-header-menu-wrap{border-bottom:1px solid var(--fl-line)}

/* ---------- Cards ---------- */
.td_module_wrap,
.td-block-row .td_module_wrap{
  background:var(--fl-surface);
  border:1px solid var(--fl-line);
  padding:0 0 12px;
}
.td_module_wrap .td-module-meta-info{padding:12px 13px 0;border:0}
.td_module_wrap .td-module-thumb{margin-bottom:0}

.td-post-category,
.td-post-category:hover{
  background:var(--fl-olive);
  color:#fff;
  font-family:var(--fl-sub);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.td-module-meta-info .entry-date,
.td-post-date,
.td-module-comments a,
.td-post-author-name a,
.td-post-author-name span{
  font-family:var(--fl-sub);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fl-muted)!important;
}

/* ---------- Sidebar + widgets ---------- */
.td-sidebar .td_block_wrap,
.widget{
  background:var(--fl-surface);
  border:1px solid var(--fl-line);
  padding:14px;
}
.block-title{border-bottom:1px solid var(--fl-line)}

/* ---------- Buttons + forms ---------- */
input[type=submit],
.wpb_button,
.td-read-more a,
button.fluentform-submit,
.ff-btn-submit{
  background:var(--fl-olive)!important;
  border:0!important;
  color:#fff!important;
  font-family:var(--fl-sub)!important;
  font-size:13px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  border-radius:0!important;
  padding:13px 22px!important;
}
input[type=submit]:hover,.ff-btn-submit:hover{background:var(--fl-rumble)!important;color:#0d1005!important}

input[type=text],input[type=email],textarea,
.ff-el-form-control{
  background:#0c0e0f!important;
  border:1px solid var(--fl-line)!important;
  color:#fff!important;
  border-radius:0!important;
  font-family:var(--fl-body)!important;
}

/* ---------- Officer Down: no advertising, ever ---------- */
.category-officer-down .fl-ad,
.category-officer-down .fl-promo-card,
.category-end-of-watch .fl-ad,
.category-end-of-watch .fl-promo-card{display:none!important}

/* ---------- Mobile first: 75-80% of traffic ---------- */
@media (max-width:767px){
  .td-post-content p,.tdb_single_content p{font-size:17px;line-height:1.8}
  .entry-title,.td-page-title{font-size:clamp(28px,8vw,40px)}
  .td_module_wrap{margin-bottom:16px}
}


/* ============================================================
   TAGDIV COMPOSER HEADER + FOOTER TEMPLATES
   This build renders its header and footer as Composer templates,
   so the classic .sf-menu / .td-header-wrap hooks above are inert.
   These are the class names that actually exist on the page.
   Verified on staging Aug 19 2026.
   ============================================================ */

/* tagDiv paints the real type on the inner span, so both are needed.
   Oswald is condensed - it buys back the width uppercase costs, which is
   what keeps all eight nav items out of the "More" pulldown. */
.tdb-menu > li > a,
.tdb-menu-item > a,
.tdb-menu-item-text,
.td-mobile-main-menu .tdb-menu-item > a,
.td-mobile-content .td-mobile-main-menu a{
  font-family:var(--fl-sub)!important;
  font-weight:500!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}
.td-header-desktop-wrap .tdb-menu-item-text{font-size:14px!important}

/* Hover only. tagDiv flags a menu item current on pages it is not on, so a
   persistent green "current" state would lie. */
.tdb-menu-item > a:hover .tdb-menu-item-text,
.tdb-menu-item > a:hover{color:var(--fl-rumble)!important}

.tdb-menu .sub-menu a{
  font-family:var(--fl-sub)!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
}

.tdb-logo-text-title{font-family:var(--fl-h)!important;letter-spacing:.03em!important}
.tdb-logo-text-tagline{
  font-family:var(--fl-sub)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--fl-muted)!important;
}

.td-header-template-wrap,
.td-header-desktop-wrap,
.td-header-mobile-wrap,
.td-footer-template-wrap,
.td-footer-wrap,
.td-menu-background,
.td-mobile-container{background-color:var(--fl-bg)!important}

.tdb-btn,
.td-read-more a{
  font-family:var(--fl-sub)!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

/* Block headings (the LATEST / POLICE SHOOTINGS strips) */
.td-block-title,
.td-block-title span,
.td-block-title a,
.td-block-title-wrap .td-pulldown-filter-display-option{
  font-family:var(--fl-h)!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}

/* Officer Down suppression, Composer archive/loop context too */
.category-officer-down .tdb_module_ad,
.category-officer-down .td-a-rec{display:none!important}


/* ============================================================
   NEWSLETTER POPUP + FLUENT FORMS
   The popup (WPCode 130) and Fluent Forms both shipped in amber
   #ffa301. The brand has no orange in it. Recoloured here rather
   than in the snippet because Cloudflare's WAF blocks PHP in POST
   bodies, so WPCode PHP snippets cannot be saved from wp-admin.
   Verified on staging Aug 19 2026.
   ============================================================ */

#fl-popup-box[style]{
  background:var(--fl-surface)!important;
  border:1px solid var(--fl-line)!important;
  border-top:4px solid var(--fl-olive)!important;
  border-radius:0!important;
}
#fl-popup-box div[style*="#ffa301"]{
  background:var(--fl-olive)!important;
  color:#fff!important;
  font-family:var(--fl-sub)!important;
  border-radius:0!important;
}
#fl-popup-box h2{
  font-family:var(--fl-h)!important;
  font-weight:400!important;
  font-size:30px!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}
#fl-popup-box p{font-family:var(--fl-body)!important}

#fl-popup-box .ff-btn-submit,
body .fluentform .ff-btn-submit,
body .frm-fluent-form .ff-btn-submit{
  background:var(--fl-olive)!important;
  background-color:var(--fl-olive)!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  font-family:var(--fl-sub)!important;
  font-size:13px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
#fl-popup-box .ff-btn-submit:hover,
body .fluentform .ff-btn-submit:hover{
  background:var(--fl-rumble)!important;
  background-color:var(--fl-rumble)!important;
  color:#0d1005!important;
}

body .fluentform .ff-el-form-control{
  background:#0c0e0f!important;
  border:1px solid var(--fl-line)!important;
  color:#fff!important;
  border-radius:0!important;
  font-family:var(--fl-body)!important;
}
body .fluentform .ff-el-input--label label{
  font-family:var(--fl-sub)!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  font-size:12px!important;
  color:#a9a29b!important;
}


/* ============================================================
   KILL THE AMBER ACCENT SITEWIDE
   tagDiv ships this build with --td_theme_color:#ffa301. That one
   token paints article links, module title hovers, menu hover and
   current states, sub-menu icons, and every tdm button. The brand
   has no orange in it, so the token is repointed at brand tan and
   the specific !important rules tagDiv writes inline are beaten on
   specificity (body + wrapper prefix), not on load order.

   Rumble green stays reserved for Rumble and watch actions only.
   Aug 19 2026.
   ============================================================ */

html:root{
  --td_theme_color:#7A6C5F!important;
  --td_slider_text:rgba(122,108,95,.7)!important;
}

/* Link text needs more lift than #7A6C5F gives on a black field. */
body .td-post-content a,
body .entry-content a,
body .tdb_single_content a,
body .td-page-content a{color:#A89684!important}
body .td-post-content a:hover,
body .entry-content a:hover,
body .tdb_single_content a:hover,
body .td-page-content a:hover{color:#ffffff!important}

body .td_module_wrap .entry-title a:hover,
body .td_module_wrap .td-module-title a:hover,
body .td-module-title a:hover,
body .entry-title a:hover{color:#A89684!important}

/* Menu: hover and current state. tagDiv writes these against a
   per-block .tdi_NN class, so the wrapper prefix is what wins. */
body .td-header-template-wrap .tdb-menu > li > a:hover,
body .td-header-template-wrap .tdb-menu > li > a:hover .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu > li:hover > a,
body .td-header-template-wrap .tdb-menu > li:hover > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu > li.current-menu-item > a,
body .td-header-template-wrap .tdb-menu > li.current-menu-item > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu > li.current-menu-ancestor > a,
body .td-header-template-wrap .tdb-menu > li.current-menu-ancestor > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu > li.current-category-ancestor > a,
body .td-header-template-wrap .tdb-menu > li.current-category-ancestor > a .tdb-menu-item-text,
body .td-mobile-container .tdb-menu > li > a:hover,
body .td-mobile-container .tdb-menu > li.current-menu-item > a{color:var(--fl-rumble)!important}

body .td-header-template-wrap .tdb-menu ul li > a:hover,
body .td-header-template-wrap .tdb-menu ul li > a:hover .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu ul li:hover > a,
body .td-header-template-wrap .tdb-menu ul li.current-menu-item > a,
body .td-header-template-wrap .tdb-menu ul li.current-menu-item > a .tdb-menu-item-text{color:var(--fl-rumble)!important}

body .td-header-template-wrap .tdb-menu .tdb-sub-menu-icon,
body .td-header-template-wrap .tdb-menu .tdb-main-sub-menu-icon,
body .td-header-template-wrap .tdb-menu > li > a:hover .tdb-sub-menu-icon{color:inherit!important}

/* Dropdown panel reads as a panel, not a floating list. */
body .td-header-template-wrap .tdb-menu ul.sub-menu{
  background:var(--fl-surface)!important;
  border:1px solid var(--fl-line)!important;
  border-top:2px solid var(--fl-olive)!important;
}

body .tdm-btn-style1{background-color:var(--fl-olive)!important}
body .tdm-btn-style2{color:#A89684!important}
body .tdm-btn-style2::before{border-color:var(--fl-olive)!important}
body .tdm-btn-style3{box-shadow:none!important}

body .frm-fluent-form .ff-el-form-control:focus{
  border-color:var(--fl-rumble)!important;
  box-shadow:none!important;
}

/* tagDiv does menu hover with a JS-applied .tdb-hover class, NOT :hover.
   Styling :hover alone leaves the amber in place - this is the selector
   that actually fires. */
body .td-header-template-wrap .tdb-menu > li.tdb-hover > a,
body .td-header-template-wrap .tdb-menu > li.tdb-hover > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu > li.tdb-hover > a .tdb-sub-menu-icon,
body .td-header-template-wrap .tdb-menu ul li.tdb-hover > a,
body .td-header-template-wrap .tdb-menu ul li.tdb-hover > a .tdb-menu-item-text,
body .td-mobile-container .tdb-menu > li.tdb-hover > a{color:var(--fl-rumble)!important}


/* ================= ARCHIVE AND CATEGORY TEMPLATES ================= */
/* tagDiv Composer writes literal #ffa301 into per-block inline style tags,
   so the --td_theme_color override never reaches archive templates.
   Named selectors with a body prefix are the only thing that outranks them. */

body .tdb-title-text,
body .tdb_module_category_title .tdb-title-text,
body .td-page-title,
body .tdb-category-title{
  font-family:var(--fl-h)!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}

body .td_module_wrap .entry-title,
body .td_module_wrap .entry-title a,
body .td_module_wrap .td-module-title,
body .td_module_wrap .td-module-title a,
body .tdb_module_loop .entry-title,
body .tdb_module_loop .entry-title a,
body .td-module-title,
body .td-module-title a{
  font-family:var(--fl-sub)!important;
  font-weight:600!important;
  letter-spacing:.005em!important;
  text-transform:uppercase!important;
}

body .td-post-category,
body .tdb-sibling-cat-bg,
body .td-module-meta-info .td-post-category,
body .tdb-category a .tdb-sibling-cat-bg{
  background-color:var(--fl-olive)!important;
  color:#ffffff!important;
}
body .td-post-category,
body .tdb-category a{
  font-family:var(--fl-sub)!important;
  font-weight:500!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

/* No persistent amber current-item. tagDiv marks the wrong item on some
   templates, so the current state is never coloured - hover only. */
body .td-header-template-wrap .tdb-menu > li.current-menu-item > a,
body .td-header-template-wrap .tdb-menu > li.current-menu-item > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu > li.current-menu-ancestor > a,
body .td-header-template-wrap .tdb-menu > li.current-menu-ancestor > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu > li.current-menu-parent > a,
body .td-header-template-wrap .tdb-menu > li.current-menu-parent > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu ul li.current-menu-item > a,
body .td-header-template-wrap .tdb-menu ul li.current-menu-item > a .tdb-menu-item-text,
body .td-mobile-container .tdb-menu > li.current-menu-item > a,
body .td-mobile-container .tdb-menu > li.current-menu-ancestor > a{
  color:var(--fl-text)!important;
}
body .td-header-template-wrap .tdb-menu > li.tdb-hover > a,
body .td-header-template-wrap .tdb-menu > li.tdb-hover > a .tdb-menu-item-text,
body .td-header-template-wrap .tdb-menu ul li.tdb-hover > a,
body .td-header-template-wrap .tdb-menu ul li.tdb-hover > a .tdb-menu-item-text{
  color:var(--fl-rumble)!important;
}

/* Pagination */
body .page-nav a,
body .page-nav span,
body .tdb-pagination a,
body .tdb-pagination span{
  font-family:var(--fl-sub)!important;
  letter-spacing:.06em!important;
}
body .page-nav .current,
body .tdb-pagination .current,
body .page-nav .page-numbers.current{
  background-color:var(--fl-olive)!important;
  border-color:var(--fl-olive)!important;
  color:#ffffff!important;
}

/* Archive description */
body .tdb-category-description,
body .td-category-description p{
  font-family:var(--fl-body)!important;
  color:var(--fl-muted)!important;
}


/* ---------- Social row ---------- */
/* The tagDiv social module carried the amber accent through its own inline
   styles. Uniform tan, white on hover. Restrained on purpose. */
body .tdm-social-item,
body .tdm-social-item i,
body .tdm-social-text,
body .tdm-social-wrapper .tdm-social-item .td-icon-font,
body .tdm-social-wrapper .tdm-social-text{
  color:var(--fl-tan)!important;
}
body .tdm-social-item:hover,
body .tdm-social-item:hover i,
body .tdm-social-text:hover,
body .tdm-social-wrapper .tdm-social-item:hover .td-icon-font{
  color:var(--fl-text)!important;
}


/* ================= TAGDIV COMPOSER OVERRIDES ================= */
/* Composer writes per-block rules shaped like
     .tdi_47 .td-category .tdb-sibling-cat-bg { background-color:#ffa301!important }
   Two or three classes deep AND !important. A "body .class" rule loses that
   fight on specificity even with !important of its own, which is why the first
   archive pass looked like it worked and did not.
   These chains outrank Composer without ever naming a .tdi_NN id - those ids
   are regenerated every time a block is saved in the visual editor. */

/* --- Sibling category chips on archives --- */
html body .tdc-zone .tdb_category_sibling_categories .td-category .entry-category a .tdb-sibling-cat-bg,
html body .tdc-zone .tdb_category_sibling_categories .td-category .entry-category a .tdb-sibling-cat-bg::before,
html body .td-theme-wrap .tdb_category_sibling_categories .td-category .entry-category .tdb-sibling-cat-bg{
  background-color:var(--fl-olive)!important;
  border-color:var(--fl-olive)!important;
}
html body .tdc-zone .tdb_category_sibling_categories .td-category .entry-category a,
html body .td-theme-wrap .tdb_category_sibling_categories .td-category .entry-category a{
  color:#ffffff!important;
  font-family:var(--fl-sub)!important;
  letter-spacing:.06em!important;
}

/* --- Archive title --- */
html body .tdc-zone .td_block_wrap.tdb_title .tdb-title-text,
html body .tdc-zone .tdb_title.tdb-category-title .tdb-title-text,
html body .td-theme-wrap .td_block_wrap.tdb_title .tdb-title-text{
  font-family:var(--fl-h)!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  color:var(--fl-text)!important;
}

/* --- Menu: never a persistent amber current item, hover only --- */
html body .tdc-zone .tdb_header_menu .tdb-menu .tdb-menu-item.current-menu-item > a .tdb-menu-item-text,
html body .tdc-zone .tdb_header_menu .tdb-menu .tdb-menu-item.current-menu-ancestor > a .tdb-menu-item-text,
html body .tdc-zone .tdb_header_menu .tdb-menu .tdb-menu-item.current-menu-parent > a .tdb-menu-item-text,
html body .td-theme-wrap .tdb_header_menu .tdb-menu .tdb-menu-item.current-menu-item > a .tdb-menu-item-text,
html body .td-theme-wrap .tdb_header_menu .tdb-menu .tdb-menu-item.current-menu-ancestor > a .tdb-menu-item-text{
  color:var(--fl-text)!important;
}
html body .tdc-zone .tdb_header_menu .tdb-menu .tdb-menu-item.tdb-hover > a .tdb-menu-item-text,
html body .td-theme-wrap .tdb_header_menu .tdb-menu .tdb-menu-item.tdb-hover > a .tdb-menu-item-text{
  color:var(--fl-rumble)!important;
}
html body .tdc-zone .tdb_header_menu .tdb-menu-items-dropdown .td-subcat-more,
html body .tdc-zone .tdb_header_menu .tdb-menu-items-pulldown .td-subcat-more{
  color:var(--fl-tan)!important;
  background-color:transparent!important;
}

/* --- Social row --- */
html body .tdc-zone .tdm_block_socials .tdm-social-item-wrap .tdm-social-item,
html body .tdc-zone .tdm_block_socials .tdm-social-item-wrap .tdm-social-item i,
html body .tdc-zone .tdm_block_socials .tdm-social-item-wrap .tdm-social-text,
html body .td-theme-wrap .tdm_block_socials .tdm-social-item-wrap .tdm-social-item i,
html body .td-theme-wrap .tdm_block_socials .tdm-social-item-wrap .tdm-social-text{
  color:var(--fl-tan)!important;
}
html body .tdc-zone .tdm_block_socials .tdm-social-item-wrap .tdm-social-item:hover,
html body .tdc-zone .tdm_block_socials .tdm-social-item-wrap .tdm-social-item:hover i,
html body .tdc-zone .tdm_block_socials .tdm-social-item-wrap .tdm-social-item:hover .tdm-social-text{
  color:var(--fl-text)!important;
}

/* --- Pagination --- */
html body .tdc-zone .tdb_loop.tdb-numbered-pagination .page-nav a,
html body .tdc-zone .tdb_loop.tdb-numbered-pagination .page-nav span,
html body .td-theme-wrap .tdb_loop.tdb-numbered-pagination .page-nav a,
html body .td-theme-wrap .tdb_loop.tdb-numbered-pagination .page-nav span{
  font-family:var(--fl-sub)!important;
  color:var(--fl-tan)!important;
  border-color:var(--fl-line)!important;
  background-color:transparent!important;
}
html body .tdc-zone .tdb_loop.tdb-numbered-pagination .page-nav .current,
html body .td-theme-wrap .tdb_loop.tdb-numbered-pagination .page-nav .current{
  background-color:var(--fl-olive)!important;
  border-color:var(--fl-olive)!important;
  color:#ffffff!important;
}


/* --- Header menu, Composer markup ---
   The header block builds "ul.tdb-horiz-menu > li.menu-item", NOT the
   ".tdb-menu > .tdb-menu-item" structure the docs imply. Composer then writes
   ".tdi_NN .tdb-horiz-menu > li.current-menu-ancestor > a{color:#ffa301}"
   with no !important, so matching the real structure is the whole fix. */
html body .tdc-zone .tdb-horiz-menu > li.current-menu-item > a,
html body .tdc-zone .tdb-horiz-menu > li.current-menu-ancestor > a,
html body .tdc-zone .tdb-horiz-menu > li.current-menu-parent > a,
html body .tdc-zone .tdb-horiz-menu > li.current-category-ancestor > a,
html body .tdc-zone .tdb-horiz-menu > li.current-menu-item > a .tdb-menu-item-text,
html body .tdc-zone .tdb-horiz-menu > li.current-menu-ancestor > a .tdb-menu-item-text,
html body .tdc-zone .tdb-horiz-menu > li.current-menu-parent > a .tdb-menu-item-text,
html body .tdc-zone .tdb-horiz-menu .sub-menu > li.current-menu-item > a,
html body .tdc-zone .tdb-horiz-menu .sub-menu > li.current-menu-ancestor > a,
html body .tdc-zone .tdb-horiz-menu .sub-menu > li.current-menu-item > a .tdb-menu-item-text{
  color:var(--fl-text)!important;
}
html body .tdc-zone .tdb-horiz-menu > li.tdb-hover > a,
html body .tdc-zone .tdb-horiz-menu > li.tdb-hover > a .tdb-menu-item-text,
html body .tdc-zone .tdb-horiz-menu > li:hover > a,
html body .tdc-zone .tdb-horiz-menu > li:hover > a .tdb-menu-item-text,
html body .tdc-zone .tdb-horiz-menu .sub-menu > li.tdb-hover > a,
html body .tdc-zone .tdb-horiz-menu .sub-menu > li:hover > a,
html body .tdc-zone .tdb-horiz-menu .sub-menu > li:hover > a .tdb-menu-item-text{
  color:var(--fl-rumble)!important;
}

/* The "more" chevron on the menu and on the category chip row */
html body .tdc-zone .td-subcat-more,
html body .tdc-zone .td-subcat-more span,
html body .tdc-zone .td-subcat-more i{
  color:var(--fl-tan)!important;
}
html body .tdc-zone .td-subcat-more::before,
html body .tdc-zone .td-subcat-more::after{
  background-color:var(--fl-olive)!important;
  color:var(--fl-tan)!important;
}


/* ---------- Instagram block, category sidebars ----------
   The Newspaper theme drops a td_block_instagram widget into the category template
   sidebar. Instagram is not one of our platforms and the block renders empty, so it
   is hidden here. Remove this rule if the block is ever deleted from the Composer
   template properly, or if Instagram is ever added to the platform list. */
html body .td_block_instagram,
html body .td-instagram-wrap{display:none!important}

/* ---------- Rumble icon ----------
   Two failures, one symptom: the icon vanished.
   1. The mobile slide-out menu asks the Newspaper icon font for a rumble glyph
      at U+E92C. That font has no such glyph, so it drew nothing.
   2. The desktop social row drew a generic rounded-square-with-play-triangle in
      the same tan as every other platform, so Rumble read as one more icon.
   The path below is Rumble's own logo mark, lifted from their site (viewBox
   0 0 32 34). It is drawn as a CSS mask so one shape serves both places.
   Orange is Ray's call - #ffa301, the accent this site ran before the reskin.
   Rumble's own brand green is already here as --fl-rumble if we ever switch.
   Delete this block to revert. */
:root{--fl-rumble-orange:#ffa301;--fl-rumble-orange-lift:#ffc04d}

html body .td-icon-rumble::before{content:'';display:none}
html body .td-menu-socials .td-icon-rumble,
html body i.td-icon-rumble{
  display:inline-block;width:40px;height:40px;vertical-align:middle;
  font-size:0!important;line-height:0;color:transparent!important;
  background-color:var(--fl-rumble-orange)!important;background-image:none!important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'><path d='M19.1 19a2.5 2.5 0 0 0 0-4c-2-1.5-4-2.8-6.2-3.7-1.5-.7-3.2.2-3.4 1.9-.4 2.5-.5 5.1-.2 7.5a2.4 2.4 0 0 0 3.4 2 28.3 28.3 0 0 0 6.4-3.6Zm10-7.3a7.8 7.8 0 0 1 0 10.8c-5.2 5.3-11.6 9-18.8 10.7a7.3 7.3 0 0 1-8.8-5A39.6 39.6 0 0 1 1.7 6 7.3 7.3 0 0 1 10.3.7c7 1.6 13.7 5.7 18.7 11Z'/></svg>") no-repeat center/22px 22px!important;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'><path d='M19.1 19a2.5 2.5 0 0 0 0-4c-2-1.5-4-2.8-6.2-3.7-1.5-.7-3.2.2-3.4 1.9-.4 2.5-.5 5.1-.2 7.5a2.4 2.4 0 0 0 3.4 2 28.3 28.3 0 0 0 6.4-3.6Zm10-7.3a7.8 7.8 0 0 1 0 10.8c-5.2 5.3-11.6 9-18.8 10.7a7.3 7.3 0 0 1-8.8-5A39.6 39.6 0 0 1 1.7 6 7.3 7.3 0 0 1 10.3.7c7 1.6 13.7 5.7 18.7 11Z'/></svg>") no-repeat center/22px 22px!important;}
html body .td-menu-socials a:hover i.td-icon-rumble{
  background-color:var(--fl-rumble-orange-lift)!important}

html body a.fl-rumble-icon svg{display:none!important}
html body a.fl-rumble-icon::before{
  content:'';display:block;width:18px;height:18px;
  background-color:var(--fl-rumble-orange);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'><path d='M19.1 19a2.5 2.5 0 0 0 0-4c-2-1.5-4-2.8-6.2-3.7-1.5-.7-3.2.2-3.4 1.9-.4 2.5-.5 5.1-.2 7.5a2.4 2.4 0 0 0 3.4 2 28.3 28.3 0 0 0 6.4-3.6Zm10-7.3a7.8 7.8 0 0 1 0 10.8c-5.2 5.3-11.6 9-18.8 10.7a7.3 7.3 0 0 1-8.8-5A39.6 39.6 0 0 1 1.7 6 7.3 7.3 0 0 1 10.3.7c7 1.6 13.7 5.7 18.7 11Z'/></svg>") no-repeat center/18px 18px;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'><path d='M19.1 19a2.5 2.5 0 0 0 0-4c-2-1.5-4-2.8-6.2-3.7-1.5-.7-3.2.2-3.4 1.9-.4 2.5-.5 5.1-.2 7.5a2.4 2.4 0 0 0 3.4 2 28.3 28.3 0 0 0 6.4-3.6Zm10-7.3a7.8 7.8 0 0 1 0 10.8c-5.2 5.3-11.6 9-18.8 10.7a7.3 7.3 0 0 1-8.8-5A39.6 39.6 0 0 1 1.7 6 7.3 7.3 0 0 1 10.3.7c7 1.6 13.7 5.7 18.7 11Z'/></svg>") no-repeat center/18px 18px;}
html body a.fl-rumble-icon:hover::before{background-color:var(--fl-rumble-orange-lift)}

/* ---------- fl-mobile-header ----------
   The Composer header carries no mobile menu block - no hamburger, nothing. On a
   phone it rendered the desktop nav and let it run off the right edge, slicing
   Support and Merch mid-word.
   The nav does not get hidden behind a burger: it wraps. Logo on its own line,
   then every item across two centred rows, nothing hidden, no tap to find Merch.
   The part that matters: the row and column chain has to be clamped to the
   viewport as well as set to 100% width. Composer sizes those containers wider
   than the screen, and a flex row only wraps when its container is actually
   narrow - which is why width:100% alone did nothing. Delete this block to revert. */
@media (max-width:767px){
  html body .td-header-template-wrap{max-width:100vw!important;overflow-x:hidden!important;box-sizing:border-box}
  html body .td-header-template-wrap .tdc-row,
  html body .td-header-template-wrap .vc_row,
  html body .td-header-template-wrap .vc_column,
  html body .td-header-template-wrap .td_block_wrap,
  html body .td-header-template-wrap .td_block_inner,
  html body .td-header-template-wrap .tdb-menu-items-pulldown{
    width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important;white-space:normal!important;overflow:visible!important;
    padding-left:0!important;padding-right:0!important;}
  html body .td-header-template-wrap .vc_row{display:flex!important;flex-wrap:wrap!important}
  html body .td-header-template-wrap .vc_column{flex:0 0 100%!important;float:none!important}
  html body .td-header-template-wrap ul.tdb-menu{
    display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
    white-space:normal!important;width:100%!important;max-width:100%!important;
    padding:0!important;margin:0 auto!important;}
  html body .td-header-template-wrap ul.tdb-menu > li{float:none!important;display:inline-flex!important;flex:0 0 auto!important}
  html body .td-header-template-wrap ul.tdb-menu > li > a{font-size:12.5px!important;padding:7px 9px!important;line-height:1.25!important}
  html body .td-header-template-wrap .tdb_header_logo img{max-height:76px!important;width:auto!important;height:auto!important}
  html body .td-header-template-wrap .tdb_header_logo .tdb-block-inner{display:flex!important;justify-content:center!important}
  html body .td-header-template-wrap .tdm-social-wrapper{display:flex!important;justify-content:center!important;width:100%!important}
}

/* ---------- fl-mobile-footer ----------
   Ray on a phone: no footer. The markup was there all along - 21 links, privacy,
   affiliate disclosure, the lot - it just was not on screen.
   Same root cause as the header: Composer sizes its row and column chain wider
   than the viewport, so on a narrow screen the content sits off to the right of
   the visible area and all you see is empty ground. Clamping the chain to the
   viewport and letting the columns stack is the same fix, applied to the other
   end of the page. Delete this block to revert. */
@media (max-width:767px){
  html body .td-footer-template-wrap{max-width:100vw!important;overflow-x:hidden!important;box-sizing:border-box}
  html body .td-footer-template-wrap .tdc-row,
  html body .td-footer-template-wrap .vc_row,
  html body .td-footer-template-wrap .vc_column,
  html body .td-footer-template-wrap .td_block_wrap,
  html body .td-footer-template-wrap .td_block_inner,
  html body .td-footer-template-wrap .wpb_wrapper{
    width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important;white-space:normal!important;overflow:visible!important;
    padding-left:0!important;padding-right:0!important;}
  html body .td-footer-template-wrap .vc_row{display:flex!important;flex-wrap:wrap!important}
  html body .td-footer-template-wrap .vc_column{flex:0 0 100%!important;float:none!important;margin-bottom:22px}
  html body .td-footer-template-wrap ul{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
    white-space:normal!important;padding:0!important;margin:0 auto!important}
  html body .td-footer-template-wrap li{float:none!important}
  html body .td-footer-template-wrap .tdm-social-wrapper{display:flex!important;justify-content:center!important;width:100%!important}
  html body .td-footer-template-wrap .tdb_header_logo img,
  html body .td-footer-template-wrap img{max-width:100%!important;height:auto!important}
  html body .td-footer-template-wrap{text-align:center}
}

/* ---------- fl-spacing-rule ----------
   Ray, Aug 22: user experience overrides any attempt at marketing, always and
   forever. This is the CSS half of that rule; the PHP half lives in
   fl-merch-card.php, which refuses to place itself within three paragraphs of an
   ad and renders nothing at all if no such gap exists.
   Here: every commercial block gets real air, and when two of them do end up
   next to each other - the ad engine and the opt-in both want the end of an
   article - the second one gets a much bigger break and a hairline, so the
   reader sees a boundary instead of a wall. */
html body .fl-ad,
html body .fl-ad-native,
html body .fl-ad-banner,
html body .fl-merch-card,
html body .fl-optin,
html body .fl-alerts,
html body .fl-promo-card{margin-top:44px;margin-bottom:44px}

html body .fl-ad + .fl-optin,
html body .fl-ad-native + .fl-optin,
html body .fl-ad-banner + .fl-optin,
html body .fl-ad + .fl-merch-card,
html body .fl-merch-card + .fl-ad,
html body .fl-optin + .fl-alerts,
html body .fl-ad + .fl-ad,
html body .fl-ad-native + .fl-ad-native{
  margin-top:88px!important;
  border-top:1px solid #2b2e30;
  padding-top:44px;}

@media (max-width:767px){
  html body .fl-ad,
  html body .fl-ad-native,
  html body .fl-ad-banner,
  html body .fl-merch-card,
  html body .fl-optin,
  html body .fl-alerts{margin-top:36px;margin-bottom:36px}
}


/* ---------- fl-footer-lazyrender ----------
   THE ACTUAL REASON THERE WAS NO FOOTER ON A PHONE. Aug 23 2026.
   WP Rocket's automatic lazy-render stamps data-wpr-lazyrender on below-the-fold
   elements and gives them content-visibility:auto. On this site it stamps exactly
   one element on the whole page - the footer - and sets no contain-intrinsic-size.
   So the footer reports height 0. It is the last thing in the document, so a reader
   can never scroll to it, so it never becomes visible, so it never renders. Zero
   height forever. Deadlock.
   It only affects real readers: WP Rocket skips its optimisations for logged-in
   admins, which is why every logged-in check said the footer was fine.
   Measured logged-out at 390px: 0px before this rule, 1528px after, full footer -
   socials, popular articles, the newsletter form, copyright and all seven
   compliance links. There is no setting for lazy-render in this WP Rocket version,
   so it is turned off here, for this one element. Nothing else on the page uses it.
   Delete this block to revert. */
html body .td-footer-template-wrap,
html body [data-wpr-lazyrender]{
  content-visibility: visible !important;
}


/* ---------- fl-promo-label ----------
   The Rumble promo card carried rel="sponsored" and rendered no visible label, while
   /affiliate-disclosure/ promises in writing that every ad unit on the site is labelled.
   Verified logged-out Aug 23: the real ad units render "ADVERTISEMENT", this one rendered
   nothing. The card is injected by a WPCode snippet as a single <a>, so the label goes on
   as a ::before rather than reopening that snippet and risking the click-coordinate bug
   those admin screens have. Styled to match .fl-ad-lab in the ad engine.
   Delete this block to revert. */
html body .fl-promo-card{position:relative}
html body .fl-promo-card::before{
  content:"Advertisement";
  display:block;
  font-family:Oswald,Arial,sans-serif;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8b857f;
  margin:0 0 10px;
}