/*
Theme Name:   Newspaper Child
Theme URI:    https://betfootball.com
Description:  Newspaper Child Theme
Author:       BetFootball
Template:     Newspaper
Version:      1.0.0
Text Domain:  newspaper-child
*/

/* === BF-SEO-AGENT START === */
/*
 * Stadium Floodlight v0.2 — betfootball.com brand
 *
 * Overrides Newspaper / tagDiv Composer with full coverage:
 * header + nav, tdc_zones, td_module / tdb_ blocks, single post layout,
 * sidebar widgets, footer, forms, mobile.
 *
 * The theme inlines ~270 <style> blocks per page with high specificity
 * (per-zone .tdi_NNN rules), so most overrides need !important to win.
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root,
:root body,
html body {
  --bf-bg: #112337;
  --bf-bg-elev: #16304a;
  --bf-bg-deep: #0b1726;
  --bf-fg: #f8fafc;
  --bf-fg-muted: rgba(248, 250, 252, 0.72);
  --bf-fg-faint: rgba(248, 250, 252, 0.45);
  --bf-primary: #00c2ff;
  --bf-primary-dim: #0098c6;
  --bf-accent: #31c48d;
  --bf-cta: #ffd400;
  --bf-cta-hover: #ffec5c;
  --bf-border: rgba(0, 194, 255, 0.18);
  --bf-border-strong: rgba(0, 194, 255, 0.42);
  --bf-display: 'Oswald', 'Arial Narrow', sans-serif;
  --bf-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Override Newspaper / tagDiv Composer Theme Panel variables. */
  --td_theme_color: #00c2ff !important;
  --td_page_content_color: #f8fafc !important;
  --td_slider_text: rgba(248, 250, 252, 0.72) !important;
  --betfootball-links: #00c2ff !important;
  --accent-color: #00c2ff !important;
  --center-demo-1: #00c2ff !important;
  --nft-custom-color-1: #16304a !important;
  --nft-custom-color-2: #0b1726 !important;
}

/* Theme-Panel-strength overrides — mirror its selector lists so cascade weight matches. */
html body,
html body .td-page-content p,
html body .td-page-content li,
html body .td-page-content .td_block_text_with_title,
html body .wpb_text_column p,
html body p,
html body li,
html body span,
html body td,
html body div,
body, p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--bf-fg) !important;
}

/* DO NOT touch icon-font elements — Newspaper uses 'td-multipurpose' and
   'newspaper-icons' icon fonts on <i class="td-icon-..."> / <i class="tdb-icon-...">.
   If we let Inter inherit through, the :before glyphs render as blank squares. */
html body i[class*="td-icon-"],
html body i[class*="tdb-icon-"],
html body i[class*="newspaper-icon-"],
html body i[class*="td-icon-"]::before,
html body i[class*="tdb-icon-"]::before,
html body .td-icon-mobile,
html body .td-icon-search,
html body .td-icon-menu,
html body .tdb-mobile-menu-icon,
html body .tdb-mobile-search-icon {
  font-family: 'td-multipurpose', 'newspaper-icons', 'newspaper' !important;
}

/* Hamburger icon — Theme Panel points at .td-icon-mobile but the icon font
   does not define that codepoint. Force a unicode hamburger. */
html body .tdb-mobile-menu-icon::before,
html body .td-icon-mobile::before {
  content: '\2630' !important;  /* ☰ */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  display: inline-block !important;
  line-height: 1 !important;
}
html body .tdb-mobile-menu-icon,
html body .td-icon-mobile {
  display: inline-block !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

/* Heading selectors — must out-specify Theme Panel + tagDiv module rules
   (which target .entry-title / .td-module-title / .tdb-title-text at 0,1,1+) */
html body .td-page-title,
html body .td-category-title-holder .td-page-title,
html body .td-page-content h1,
html body .wpb_text_column h1,
html body .td-page-content h2,
html body .wpb_text_column h2,
html body .td-page-content h3,
html body .wpb_text_column h3,
html body .td-post-content h1,
html body .td-post-content h2,
html body .td-post-content h3,
html body .td-post-content h4,
html body h1.entry-title,
html body h2.entry-title,
html body h3.entry-title,
html body h4.entry-title,
html body .entry-title,
html body .entry-title a,
html body .td-module-title,
html body .td-module-title a,
html body .tdb-module-title,
html body .tdb-module-title a,
html body .tdb-title-text,
html body .tdb-title-text a,
html body .td-block-title,
html body .td-block-title > a,
html body .td-block-title > span,
html body .tdb-block-title,
html body .tdb-block-title > a,
html body .tdb-block-title > span,
html body .tdb-section-title,
html body .tdb-widget-title,
html body .td-trending-now-title,
html body .td-trending-now-title a,
html body .td_block_big_grid .entry-title,
html body .td_block_big_grid .entry-title a,
html body .tdb-author-name,
html body .tdb-author-page-title,
html body .tdb_single_title,
html body .tdb_single_title .tdb-title-text,
html body .tdb_single_post_title,
html body .tdb_single_subtitle,
html body .tdb_single_post_subtitle,
html body article .entry-title,
html body article .entry-title a,
html body [class*="td_module_"] .entry-title,
html body [class*="td_module_"] .entry-title a,
html body [class*="td_module_"] .td-module-title,
html body [class*="td_module_"] .td-module-title a,
html body [class*="tdb_module_"] .entry-title,
html body [class*="tdb_module_"] .entry-title a,
html body [class*="tdb_module_"] .td-module-title,
html body [class*="tdb_module_"] .td-module-title a,
html body [class*="tdb_module_"] .tdb-title-text,
html body [class*="tdb_module_"] .tdb-title-text a,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
  color: var(--bf-fg) !important;
  font-weight: 700 !important;
}

/* ── 1. FOUNDATIONS ───────────────────────────────────────────────── */

html,
html body,
body,
body.td-boxed-layout,
body.td-full-screen-layout,
body.td-magazine-layout,
html .td-main-page-wrap,
html .td-header-wrap-full,
html .td-content-wrap,
html .td-page-wrap,
html #td-outer-wrap,
html #page {
  background-color: var(--bf-bg) !important;
  color: var(--bf-fg) !important;
}

p, li, td, .tdb-block-inner p, .td-post-content p, .td_block_wrap p {
  color: var(--bf-fg-muted) !important;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.tdb-title-text,
.td-module-title,
.td-block-title,
.tdb-block-title,
.tdb-section-title,
.tdb-widget-title,
.td-page-title,
.tds-title,
.tds-title2,
.tdb-author-name,
.tdb-author-page-title,
.tdb-category-text {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  color: var(--bf-fg) !important;
}

h3, h4 { font-weight: 700 !important; }
h5, h6 { font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: uppercase; }

a, .td-pb-row a, .tdb-block-inner a {
  color: var(--bf-primary);
  transition: color .15s ease;
}
a:hover, .td-pb-row a:hover, .tdb-block-inner a:hover {
  color: var(--bf-cta);
  text-decoration: none;
}

::selection { background: var(--bf-primary); color: var(--bf-bg); }
img { border-radius: 4px; }

/* ── 2. NUKE ZONE / COLUMN BACKGROUNDS ───────────────────────────── */
/* tagDiv Composer paints zone backgrounds via inline .tdi_NNN rules.
   We undo black/white default zones globally but preserve per-zone
   image backgrounds (those use `background-image`, not `background-color`). */

[class*="tdc_zone"],
[class*="tdc_zone"][style],
.wpb_row.td-pb-row,
.vc_column.tdc-column,
.td-page-content,
.tdb-block-inner,
.tdb-block-inner-no-p {
  background-color: transparent !important;
}

.tdc-element-style[style*="background-color: rgb(0, 0, 0)"],
.tdc-element-style[style*="background-color:#000"],
.tdc-element-style[style*="background-color: #000"],
.tdc-element-style[style*="background-color: rgb(255, 255, 255)"],
.tdc-element-style[style*="background-color:#fff"] {
  background-color: var(--bf-bg) !important;
}

/* ── 3. HEADER + NAV ─────────────────────────────────────────────── */

.td-header-wrap,
.td-header-bg,
.td-header-template-wrap,
.td-header-desktop-wrap,
.td-header-mobile-wrap,
.td-header-desktop-sticky-wrap,
.td-header-mobile-sticky-wrap,
.tdb-header-bg,
[class*="tdb_header"] {
  background-color: var(--bf-bg-deep) !important;
  border-bottom: 1px solid var(--bf-border);
}

.tdb-menu .menu-item > a,
.tdb-menu li a,
.td-header-menu-wrap a,
.tdb_header_menu a,
.td-affix .tdb-menu li a {
  color: var(--bf-fg) !important;
  font-family: var(--bf-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
}

.tdb-menu .menu-item-has-children > a:after,
.tdb-menu .menu-item:hover > a,
.tdb-menu .current-menu-item > a,
.tdb-menu li:hover > a,
.tdb-menu .current-menu-ancestor > a {
  color: var(--bf-primary) !important;
}

.tdb-menu .sub-menu,
.tdb-menu ul.sub-menu,
.td-mega-menu-page-wrap {
  background-color: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 4px;
}
.tdb-menu .sub-menu li a {
  color: var(--bf-fg) !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.tdb-menu .sub-menu li a:hover {
  background-color: var(--bf-bg-deep) !important;
  color: var(--bf-primary) !important;
}

.tdb-search-form .tdb-search-form-input,
.tdb-header-search-input,
input.tdb-head-search-input,
input.wpb_search-text {
  background: var(--bf-bg-elev) !important;
  color: var(--bf-fg) !important;
  border: 1px solid var(--bf-border) !important;
  font-family: var(--bf-body);
}

/* Search dropdown wrapper renders a thin white band below the header by default — kill it. */
html body .tdb-search-form,
html body .tdb-search-form-inner,
html body .td-drop-down-search,
html body .td-search-background {
  background-color: var(--bf-bg-deep) !important;
}
html body .tdb-search-form:before,
html body .tdb-search-form:after {
  background-color: transparent !important;
}

.tdb-mobile-horiz-menu li a,
.tdm-header-style-1 .td-icon-search,
.td-icon-menu {
  color: var(--bf-fg) !important;
}

/* Site logo wrapper backdrop */
.td-logo-wrap-full,
.tdb-logo-bg,
.tdb_header_logo {
  background: transparent !important;
}

/* ── 4. POST CARDS / MODULES ─────────────────────────────────────── */

.td_module_wrap,
.td_module_flex,
.td_module_flex_1,
.td_module_flex_2,
.td_module_flex_3,
.td_module_flex_4,
.td_module_flex_5,
.td_module_flex_6,
.td_module_flex_7,
.td_module_flex_8,
.td_module_flex_9,
.td_module_flex_10,
.td_module_flex_11,
.td_module_flex_12,
.td_module_mx1,
.td_module_mx2,
.td_module_mx3,
.td_module_mx4,
.td_module_mx5,
.td_module_mx6,
.td_module_mx7,
.td_module_mx8,
.td_module_mx9,
.td_module_mx10,
.tdb_module_loop,
article.post {
  background-color: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px;
  padding: 12px !important;
  margin-bottom: 14px;
  transition: border-color .2s ease, transform .2s ease;
}

.td_module_wrap:hover,
.td_module_flex:hover,
.tdb_module_loop:hover,
article.post:hover {
  border-color: var(--bf-border-strong) !important;
  transform: translateY(-1px);
}

.td-module-thumb,
.tdb-module-thumb,
.entry-thumb {
  border-radius: 4px;
  overflow: hidden;
}

.td-module-meta-info,
.td-post-author-name,
.td-post-author-name a,
.entry-date,
.td-post-date,
.tdb-author-name,
.tdb-date,
.tdb-meta-line {
  color: var(--bf-fg-faint) !important;
  font-family: var(--bf-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.entry-title a,
.td-module-title a,
.tdb-module-title a,
.tdb-title-text a {
  color: var(--bf-fg) !important;
}
.entry-title a:hover,
.td-module-title a:hover,
.tdb-module-title a:hover,
.tdb-title-text a:hover {
  color: var(--bf-primary) !important;
}

.td-excerpt,
.tdb-excerpt,
.tdb-block-inner .tdb-excerpt-content {
  color: var(--bf-fg-muted) !important;
  font-family: var(--bf-body);
}

/* Category labels — electric blue pills */
a.td-post-category,
a.tdb-entry-category,
.td-post-category,
.tdb-category a,
.entry-category a,
.tdb-category > a {
  background-color: var(--bf-primary) !important;
  color: var(--bf-bg) !important;
  font-family: var(--bf-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px !important;
  border-radius: 3px;
  font-size: 10.5px !important;
  border: none !important;
}

a.td-post-category:hover,
a.tdb-entry-category:hover {
  background-color: var(--bf-cta) !important;
  color: var(--bf-bg-deep) !important;
}

/* Hero / featured big modules */
.td_module_mx1,
.td_module_flex_1,
.tdb_module_loop[data-module-template="m_image_overlay"] {
  background: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border-strong) !important;
}

/* ── 5. BLOCK TITLES (section headers like "Latest Posts") ──────── */

.td-block-title,
.tdb-block-title,
.tdb-title-text,
.td-pb-title,
h4.block-title,
.entry-crumbs,
.tdb-section-title,
.tdb-block-title > span {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bf-fg) !important;
  border-bottom: 2px solid var(--bf-primary) !important;
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.td-block-title > a,
.tdb-block-title > a,
.tdb-block-title-link,
.tdb-block-title > span > a {
  color: var(--bf-fg) !important;
  background: transparent !important;
}

/* ── 6. SINGLE POST ──────────────────────────────────────────────── */

.tdb_single_title .tdb-title-text,
.tdb_single_post_title,
.td-post-header h1,
h1.entry-title {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  line-height: 1.05 !important;
  color: var(--bf-fg) !important;
  letter-spacing: -0.01em;
}

.tdb_single_subtitle,
.tdb-subtitle,
.td-post-sub-title {
  color: var(--bf-fg-muted) !important;
  font-family: var(--bf-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
}

.tdb_single_post_share,
.td-post-sharing,
.td-post-sharing-bottom,
.tdb-block-inner.td-fix-index ul.td-post-sharing-classic {
  background: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 4px;
  padding: 8px 12px !important;
}

.td-post-content,
.tdb_single_content,
.td_block_wrap.tdb_single_content {
  font-family: var(--bf-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--bf-fg) !important;
}

.td-post-content blockquote,
.tdb_single_content blockquote {
  border-left: 4px solid var(--bf-primary);
  background: var(--bf-bg-elev);
  padding: 14px 18px;
  margin: 22px 0;
  font-family: var(--bf-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--bf-fg) !important;
  border-radius: 0 4px 4px 0;
}

.td-post-content code,
.tdb_single_content code {
  background: var(--bf-bg-deep);
  border: 1px solid var(--bf-border);
  color: var(--bf-accent);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.92em;
}

.td-post-content pre,
.tdb_single_content pre {
  background: var(--bf-bg-deep);
  border: 1px solid var(--bf-border);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--bf-fg-muted);
}

.tdb_author_box,
.td-author-box,
#tdb-author-box {
  background-color: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px;
  padding: 18px !important;
  margin-top: 24px;
}

.td-author-name a,
.tdb-author-name,
.tdb-author-name a {
  color: var(--bf-fg) !important;
  font-family: var(--bf-display);
  font-weight: 700;
}

/* ── 7. SIDEBAR + WIDGETS ────────────────────────────────────────── */
/* Scoped to actual sidebar columns (.td-sidebar) so we don't accidentally
   skin every .td-pb-span4 in the header (which catches the logo column). */

.td-sidebar .td_block_wrap,
.tdb-sidebar .tdb-block-inner,
.widget_archive,
.widget_categories,
.widget_recent_entries,
.widget_recent_comments,
.widget_search,
.widget_meta,
.widget_text,
.widget_tag_cloud,
.td-pb-padding-side aside.widget,
aside.widget {
  background-color: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px;
  padding: 14px !important;
  margin-bottom: 18px;
}

/* Header logo column should stay transparent — undo any accidental card styling */
.td-header-template-wrap .tdb_header_logo,
.td-header-template-wrap .vc_column,
.td-header-template-wrap .td_block_wrap {
  background: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
}
/* Site gutter — header row matches the homepage 1280px max-width container */
html body .td-header-template-wrap > .tdc-row,
html body .td-header-template-wrap .tdc-row.tdc-row-stretch,
html body .td-header-template-wrap .tdc_zone > .td-element-style + div,
html body .td-header-desktop-wrap .tdc-row,
html body .td-header-mobile-wrap .tdc-row {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
@media (max-width: 599px) {
  html body .td-header-desktop-wrap .tdc-row,
  html body .td-header-mobile-wrap .tdc-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* Footer same treatment */
html body [class*="tdb_footer"] > .tdc-row,
html body .td-footer-template-wrap > .tdc-row {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.widget_categories ul li,
.widget_archive ul li,
.widget_recent_entries ul li {
  border-bottom: 1px solid var(--bf-border) !important;
  padding: 8px 0 !important;
}

.tagcloud a,
.widget .tagcloud a {
  background: transparent !important;
  color: var(--bf-primary) !important;
  border: 1px solid var(--bf-border-strong) !important;
  font-family: var(--bf-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 3px;
}
.tagcloud a:hover {
  background: var(--bf-primary) !important;
  color: var(--bf-bg) !important;
}

/* ── 8. PAGINATION + BREADCRUMBS ─────────────────────────────────── */

.page-nav a,
.page-nav span,
.tdb-pagination a,
.tdb-pagination span,
.td-load-more-wrap a,
.tdb-loadmore .tdb-loadmore-text {
  background: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  color: var(--bf-fg) !important;
  font-family: var(--bf-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-nav a:hover,
.tdb-pagination a:hover {
  background: var(--bf-primary) !important;
  color: var(--bf-bg) !important;
  border-color: var(--bf-primary) !important;
}
.page-nav .current,
.tdb-pagination .current {
  background: var(--bf-primary) !important;
  color: var(--bf-bg) !important;
  border-color: var(--bf-primary) !important;
}

.entry-crumbs,
.entry-crumbs span,
.tdb-breadcrumbs,
.tdb-breadcrumbs a {
  color: var(--bf-fg-faint) !important;
  font-family: var(--bf-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
  padding: 0;
}
.tdb-breadcrumbs a:hover {
  color: var(--bf-primary) !important;
}

/* ── 9. CTA / AFFILIATE BUTTONS ──────────────────────────────────── */

.bf-cta,
a.bf-affiliate,
a.cas2-cta,
.cas2-affiliate-button a,
.td-page-content a.bf-cta,
.tdb-block-inner a.bf-cta {
  display: inline-block !important;
  background: var(--bf-cta) !important;
  color: var(--bf-bg-deep) !important;
  font-family: var(--bf-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 24px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.bf-cta:hover,
a.bf-affiliate:hover {
  background: var(--bf-cta-hover) !important;
  color: var(--bf-bg-deep) !important;
}

/* ── 10. FORMS, COMMENTS ─────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input.wpcf7-text,
textarea,
select {
  background-color: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  color: var(--bf-fg) !important;
  font-family: var(--bf-body);
  border-radius: 3px;
  padding: 10px 12px;
}

input[type="submit"],
button[type="submit"],
.wpcf7-submit {
  background: var(--bf-primary) !important;
  color: var(--bf-bg) !important;
  font-family: var(--bf-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 3px;
  cursor: pointer;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--bf-cta) !important;
  color: var(--bf-bg-deep) !important;
}

.comments-area,
#comments,
.comment-list .comment-body,
.tdb_comments {
  background: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px;
  padding: 16px !important;
}

/* ── 11. FOOTER ──────────────────────────────────────────────────── */

.td-footer-wrapper,
.td-footer-template-wrap,
.tdb-footer-bg,
[class*="tdb_footer"],
.td-sub-footer-container {
  background-color: var(--bf-bg-deep) !important;
  color: var(--bf-fg-muted) !important;
  border-top: 1px solid var(--bf-border) !important;
  font-family: var(--bf-body);
}

.td-footer-wrapper a,
.td-sub-footer-container a,
[class*="tdb_footer"] a {
  color: var(--bf-primary) !important;
}
.td-footer-wrapper a:hover,
[class*="tdb_footer"] a:hover {
  color: var(--bf-cta) !important;
}

.td-footer-wrapper .td-block-title,
[class*="tdb_footer"] .tdb-block-title {
  border-bottom-color: var(--bf-primary) !important;
}

.td-sub-footer-container,
.tdb-footer-copyrights {
  border-top: 1px solid var(--bf-border) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 12. CASINO / iGAMING REVIEW BLOCKS (cas2 plugin) ───────────── */

.cas2_casino_review,
.cas2-review-card,
.cas2-list-item,
.cas2-betting-site {
  background: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px;
  padding: 16px !important;
  color: var(--bf-fg) !important;
}
.cas2-rating, .cas2-stars {
  color: var(--bf-cta) !important;
}

/* ── 13. CUSTOM BF DATA WIDGETS ──────────────────────────────────── */
/* (rendered as static HTML by lib/football/widgets/*.ts via the cron) */

.bf-fixtures-bar,
.bf-standings-strip,
.bf-bracket,
.bf-top-scorers,
.bf-team-profile,
.bf-venue-map,
.bf-match-preview {
  background: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px;
  padding: 16px 18px !important;
  margin-bottom: 24px;
  font-family: var(--bf-body);
  color: var(--bf-fg) !important;
}

.bf-widget-title {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bf-fg) !important;
  border-bottom: 2px solid var(--bf-primary) !important;
  padding-bottom: 6px;
  margin: 0 0 12px;
}

.bf-fixtures-bar table,
.bf-standings-strip table,
.bf-top-scorers table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bf-fixtures-bar th,
.bf-standings-strip th,
.bf-top-scorers th {
  font-family: var(--bf-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
  color: var(--bf-fg-faint);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bf-border);
}

.bf-fixtures-bar td,
.bf-standings-strip td,
.bf-top-scorers td {
  padding: 8px;
  border-bottom: 1px solid var(--bf-border);
  color: var(--bf-fg);
}

.bf-score {
  font-family: var(--bf-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--bf-primary);
}
.bf-status-live { color: var(--bf-accent); font-weight: 600; }
.bf-source-note {
  color: var(--bf-fg-faint);
  font-size: 11px;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 14. UTILITIES — PROMOS, RANK MATH BREADCRUMBS, MISC ────────── */

.rank-math-breadcrumb,
.rank-math-breadcrumb a,
.rank-math-breadcrumb span {
  color: var(--bf-fg-faint) !important;
}

.tdm-btn,
a.tdm-btn,
.tdb-button {
  font-family: var(--bf-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700 !important;
  border-radius: 3px !important;
}

/* Newspaper "Trending Now" / category-row strips */
.td-trending-now-wrapper,
.td_block_big_grid_slide,
.td-big-grid-meta,
.td-trending-now-title {
  background: var(--bf-bg-deep) !important;
  color: var(--bf-fg) !important;
}

.td-trending-now-title {
  font-family: var(--bf-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Big featured slider */
.td_block_big_grid .entry-title a,
.td_block_big_grid_slide .entry-title a {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ── 13b. ZONE :after OVERLAYS (mobile + desktop headers) ────────
   Every tagDiv tdc_zone emits a per-instance <style> that sets
   `.tdiNNN > .td-element-style:after { background-color:#ffffff !important }`
   That white pseudo paints over everything, including the navy header.
   Make every such overlay transparent so the body brand colour shows. */

html body [class*="tdi_"] > .td-element-style:after,
html body .tdc_zone > .td-element-style:after,
html body .tdc-zone > .td-element-style:after,
html body [class*="tdc_zone"] > .td-element-style:after {
  background-color: transparent !important;
}

/* ── 14a. ICON CARDS (NEWS / PREDICTIONS / GUIDES / REVIEWS etc) ──
   tagDiv emits per-instance `tdi_NNN_rand_style td-element-style` divs with
   inline black `background-color` set in a generated <style> block. Override
   the lot to match brand surface colour. */

[class*="_rand_style"].td-element-style {
  background-color: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 4px;
}
[class*="_rand_style"].td-element-style:hover {
  border-color: var(--bf-border-strong) !important;
}
[class*="_rand_style"].td-element-style svg,
[class*="_rand_style"].td-element-style svg * {
  fill: var(--bf-fg) !important;
  stroke: var(--bf-fg) !important;
}

/* ── 14b. RESPONSIVE HEADER + KILL THE STRAY POPUP MODALS ────────
   Newspaper inlines mobile-nav/search wraps as visibility:hidden +
   position:static, which on desktop creates ~700px of empty flow.
   It also leaves two transparent .tdm-popup-modal-wrap divs full-screen,
   each rendered at 1200px even on mobile (causes horizontal overflow).
   We hide both unconditionally, then re-show on the correct breakpoint. */

#tdm-popup-modal-td_m_45b1,
.tdm-popup-modal-wrap.tdm-popup-modal-over-screen,
.tdm-popup-modal-bg {
  display: none !important;
}

/* Take mobile chrome OUT of document flow on every breakpoint, so it doesn't
   stack 700+ px of empty space above #td-outer-wrap. tagDiv toggles them
   visible when the user opens the hamburger / search; position:fixed lets
   that still work without taking flow space when closed. */
#td-mobile-nav,
.td-mobile-content,
.td-search-wrap-mob,
.td-search-background,
.td-menu-background {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999;
}

/* Desktop ≥768: hide all mobile-only chrome */
@media (min-width: 768px) {
  #td-mobile-nav,
  .td-mobile-content,
  .td-search-wrap-mob,
  .td-search-background,
  .td-menu-background,
  .td-header-mobile-wrap,
  .td-header-mobile-sticky-wrap {
    display: none !important;
  }
}

/* Mobile <768: hide desktop header, show mobile header.
   Newspaper's own rules misfire — force the correct state. */
@media (max-width: 767px) {
  .td-header-desktop-wrap,
  .td-header-desktop-sticky-wrap {
    display: none !important;
  }
  .td-header-mobile-wrap {
    display: block !important;
  }
  /* Belt-and-braces against any element that creates horizontal overflow */
  html, body, #td-outer-wrap, .td-theme-wrap, .td-main-page-wrap, .td-pb-row, .vc_row, [class*="tdc_zone"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ── 15. MOBILE RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 767px) {
  /* 15.1 — Typography: smaller, tighter, mobile-readable */
  html body,
  html body p,
  html body li,
  html body .td-page-content p,
  html body .td-page-content li {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  html body h1,
  html body .tdb_single_title .tdb-title-text,
  html body h1.entry-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.1 !important;
  }
  html body h2 { font-size: 22px !important; line-height: 1.15 !important; }
  html body h3 { font-size: 18px !important; }
  html body h4 { font-size: 16px !important; }

  /* 15.2 — Section gutters so content doesn't bleed to the screen edge.
     Newspaper wraps the page in `.tdc-content-wrap > .tdc-zone > .tdc-row` —
     applying the gutter at the .tdc-row level catches every page section
     (hero, post grid, sidebar, ads) without double-padding. */
  html body .tdc-content-wrap .tdc-row,
  html body .tdc-content-wrap > .tdc-zone > .tdc-row,
  html body .td-page-content,
  html body .tdb_single_content,
  html body .td-post-content,
  html body .td-main-content,
  html body .tdb-block-inner,
  html body .td-page-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  /* Header / footer zones stay flush — they manage their own padding internally. */
  html body .td-header-template-wrap,
  html body .td-header-template-wrap .tdc-row,
  html body [class*="tdb_footer"] .tdc-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .td-pb-row, .vc_row { margin-left: 0 !important; margin-right: 0 !important; }

  /* 15.3 — Header layout: logo + hamburger + search in one tight row */
  .td-header-template-wrap,
  .tdb-header-bg {
    padding: 6px 0 !important;
  }
  .td-header-mobile-wrap .tdb_header_logo img,
  .td-header-mobile-wrap .tdb-logo-img {
    max-height: 44px !important;
    width: auto !important;
    max-width: 60vw !important;
    object-fit: contain;
  }
  .td-header-mobile-wrap .tdb-logo-a {
    justify-content: center !important;
  }
  .tdb-mobile-menu-button,
  .tdb-header-search-button-mob {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    color: var(--bf-fg) !important;
  }
  .tdb-mobile-menu-button i,
  .tdb-header-search-button-mob i,
  .td-icon-menu,
  .td-icon-search {
    color: var(--bf-fg) !important;
    font-size: 22px !important;
  }
  .tdb-mobile-menu-button svg,
  .tdb-mobile-menu-button svg *,
  .tdb-header-search-button-mob svg,
  .tdb-header-search-button-mob svg * {
    fill: var(--bf-fg) !important;
  }

  /* 15.4 — Stack the homepage icon cards (.tdi_NNN_rand_style) */
  [class*="_rand_style"].td-element-style {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 120px !important;
    margin-bottom: 10px !important;
  }
  .td-block-row,
  .vc_row_inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .td-block-span6, .td-block-span4, .td-block-span3 {
    width: 100% !important;
    flex: 1 1 100%;
  }

  /* 15.5 — Tap-target safe minimum on every interactive element */
  a.bf-cta,
  .bf-cta,
  input[type="submit"],
  button[type="submit"],
  .wpcf7-submit,
  .tdm-btn,
  a.tdm-btn,
  .page-nav a,
  .tdb-pagination a {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 18px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 15.6 — Single post specific adjustments */
  .tdb_single_title .tdb-title-text,
  h1.entry-title { font-size: clamp(26px, 7vw, 34px) !important; }
  .td-post-content, .tdb_single_content { font-size: 16px !important; }
  .td-post-content blockquote,
  .tdb_single_content blockquote {
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
  .tdb_author_box,
  .td-author-box { padding: 14px !important; }

  /* 15.7 — Custom BF data widgets compress on mobile */
  .bf-fixtures-bar, .bf-standings-strip, .bf-bracket, .bf-top-scorers {
    padding: 12px !important;
  }
  .bf-fixtures-bar table,
  .bf-standings-strip table,
  .bf-top-scorers table {
    font-size: 12.5px;
  }
  .bf-widget-title { font-size: 14px !important; }

  /* 15.8 — Footer typography on small screens */
  .td-footer-template-wrap,
  [class*="tdb_footer"] { padding: 18px 14px !important; font-size: 14px; }

  /* 15.9 — Sidebar: full-width and below content on mobile */
  .td-pb-span4.td-sidebar,
  .tdb-sidebar { width: 100% !important; padding: 0 !important; }
}

/* ── 15b. SMALL TABLET (768–1023): single sidebar column, comfortable spacing */
@media (min-width: 768px) and (max-width: 1023px) {
  html body h1,
  html body .tdb_single_title .tdb-title-text,
  html body h1.entry-title { font-size: clamp(30px, 5vw, 42px) !important; }
  .td-page-content, .tdb_single_content { padding: 0 18px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   17. STADIUM FLOODLIGHT HOMEPAGE (front-page.php)
   ───────────────────────────────────────────────────────────────── */

html body main.bf-home {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 14px;
  box-sizing: border-box;
}

html body .bf-home .bf-section {
  margin: 48px 0;
}

html body .bf-home .bf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--bf-primary);
  padding-bottom: 8px;
}

html body .bf-home .bf-section-title {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bf-fg) !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  margin: 0 0 18px;
  border-bottom: 2px solid var(--bf-primary);
  padding-bottom: 8px;
}
html body .bf-home .bf-section-head .bf-section-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

html body .bf-home .bf-section-link {
  font-family: var(--bf-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  font-weight: 600;
  color: var(--bf-primary) !important;
  text-decoration: none;
}
html body .bf-home .bf-section-link:hover {
  color: var(--bf-cta) !important;
}

/* ── HERO ─────────────────────────────────────────────────────── */

html body .bf-home .bf-hero {
  margin-top: 24px;
  margin-bottom: 36px;
}

html body .bf-home .bf-hero-card {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(380px, 56vw, 620px);
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none !important;
  color: var(--bf-fg) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
html body .bf-home .bf-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

html body .bf-home .bf-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 4vw, 44px);
}

html body .bf-home .bf-hero-cat {
  display: inline-block;
  background: var(--bf-primary);
  color: var(--bf-bg-deep) !important;
  font-family: var(--bf-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
}

html body .bf-home .bf-hero-title {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4.4vw, 56px) !important;
  line-height: 1.05 !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  margin: 0 0 14px;
  max-width: 900px;
  letter-spacing: -0.01em;
}

html body .bf-home .bf-hero-excerpt {
  font-family: var(--bf-body);
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 720px;
}

html body .bf-home .bf-hero-meta {
  display: flex;
  gap: 14px;
  font-family: var(--bf-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

html body .bf-home .bf-hero-cta {
  display: inline-block;
  font-family: var(--bf-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-cta) !important;
  border-bottom: 2px solid var(--bf-cta);
  padding-bottom: 2px;
}

/* ── FIXTURES STRIP ──────────────────────────────────────────── */

html body .bf-home .bf-fixtures-section { margin: 36px 0; }

html body .bf-home .bf-fixtures-bar {
  background: var(--bf-bg-elev);
  border: 1px solid var(--bf-border-strong);
  border-left: 4px solid var(--bf-primary);
  border-radius: 6px;
  padding: 24px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
html body .bf-home .bf-fixtures-bar .bf-widget-title {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 16px;
  color: var(--bf-fg) !important;
  margin: 0;
  border: none;
  flex: 0 0 100%;
}
html body .bf-home .bf-fixtures-empty {
  flex: 1 1 auto;
  font-family: var(--bf-body);
  color: var(--bf-fg-muted) !important;
  font-size: 14px;
  margin: 0;
  min-width: 220px;
}
html body .bf-home .bf-fixtures-bar .bf-cta {
  flex: 0 0 auto;
  background: var(--bf-cta) !important;
  color: var(--bf-bg-deep) !important;
  font-family: var(--bf-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 3px;
  text-decoration: none;
}
html body .bf-home .bf-fixtures-bar .bf-cta:hover {
  background: var(--bf-cta-hover) !important;
  color: var(--bf-bg-deep) !important;
}

/* ── CARD GRID ───────────────────────────────────────────────── */

html body .bf-home .bf-grid {
  display: grid;
  gap: 18px;
}
html body .bf-home .bf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .bf-home .bf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

html body .bf-home .bf-card {
  display: flex;
  flex-direction: column;
  background: var(--bf-bg-elev) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--bf-fg) !important;
  transition: transform .2s ease, border-color .2s ease;
}
html body .bf-home .bf-card:hover {
  transform: translateY(-2px);
  border-color: var(--bf-border-strong) !important;
}

html body .bf-home .bf-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bf-bg-deep);
}

html body .bf-home .bf-card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
}

html body .bf-home .bf-card-cat {
  display: inline-block;
  align-self: flex-start;
  background: var(--bf-primary) !important;
  color: var(--bf-bg-deep) !important;
  font-family: var(--bf-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}

html body .bf-home .bf-card-title {
  font-family: var(--bf-display) !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.2 !important;
  color: var(--bf-fg) !important;
  margin: 0;
  text-transform: none;
  letter-spacing: -0.005em;
}
html body .bf-home .bf-card:hover .bf-card-title {
  color: var(--bf-primary) !important;
}

html body .bf-home .bf-card-meta {
  font-family: var(--bf-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bf-fg-faint) !important;
  margin-top: auto;
  padding-top: 4px;
}

/* ── CTA STRIP ───────────────────────────────────────────────── */

html body .bf-home .bf-cta-strip {
  margin: 56px 0 64px;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
  background:
    linear-gradient(135deg, rgba(0, 194, 255, 0.18) 0%, rgba(49, 196, 141, 0.15) 100%),
    var(--bf-bg-elev);
  border: 1px solid var(--bf-border-strong);
  border-radius: 8px;
  text-align: center;
}

html body .bf-home .bf-cta-eyebrow {
  display: inline-block;
  font-family: var(--bf-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-primary) !important;
  margin-bottom: 12px;
}

html body .bf-home .bf-cta-title {
  font-family: var(--bf-display) !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3.2vw, 38px) !important;
  line-height: 1.1 !important;
  color: var(--bf-fg) !important;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

html body .bf-home .bf-cta-blurb {
  font-family: var(--bf-body);
  color: var(--bf-fg-muted) !important;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 24px;
}

html body .bf-home .bf-cta-large {
  display: inline-block;
  background: var(--bf-cta) !important;
  color: var(--bf-bg-deep) !important;
  font-family: var(--bf-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  transition: transform .15s ease, background .15s ease;
}
html body .bf-home .bf-cta-large:hover {
  background: var(--bf-cta-hover) !important;
  color: var(--bf-bg-deep) !important;
  transform: translateY(-1px);
}

/* ── HOMEPAGE RESPONSIVE ──────────────────────────────────────── */

@media (max-width: 1023px) {
  html body .bf-home .bf-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .bf-home .bf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  html body .bf-home { padding: 0 12px; }
  html body .bf-home .bf-grid-3,
  html body .bf-home .bf-grid-4 { grid-template-columns: 1fr; gap: 14px; }
  html body .bf-home .bf-section { margin: 32px 0; }
  html body .bf-home .bf-cta-strip { margin: 40px 0 48px; }
  html body .bf-home .bf-fixtures-bar { padding: 18px 20px; flex-direction: column; align-items: flex-start; }
  html body .bf-home .bf-fixtures-bar .bf-cta { align-self: stretch; text-align: center; }
  html body .bf-home .bf-hero-card { height: 70vw; min-height: 320px; }
}

/* ─────────────────────────────────────────────────────────────────
   18. IMAGE RATIO + ASPECT FIXES
   ───────────────────────────────────────────────────────────────── */

/* 18.1 — tagDiv .tdm-image inline images:
   shipped with object-fit:fill which squashes 1.84-ratio source images
   into 3.0/4.0 boxes. Force cover + cap height, never stretch. */
html body img.tdm-image,
html body .tdm-image > img,
html body img.td-retina-data:not(.tdb-logo-img),
html body .tdm-block .td-image-container img,
html body .tdm_block_inline_image img {
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  display: block;
}

/* 18.2 — Single-post related/latest thumbnails default to 468x468 squares.
   Force 16:9 to match the rest of the brand. */
html body .entry-thumb,
html body .td-thumb-css,
html body .td-image-container .entry-thumb,
html body [class*="td_module_"] .entry-thumb,
html body [class*="tdb_module_"] .entry-thumb,
html body .td_block_related_posts .entry-thumb {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  padding-bottom: 0 !important;  /* Newspaper uses padding-bottom hack for ratio — kill it */
  background-size: cover !important;
  background-position: center !important;
}

/* 18.3 — Author avatar on single-post pages renders at 920x1000.
   Cap to a sane size and center. */
html body img.avatar,
html body .avatar.avatar-500,
html body .avatar.photo,
html body .tdb-author-photo img,
html body .author-box-wrap img,
html body .td-author-avatar img,
html body .td-animation-stack-type0-1 {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Author-box layout — left-align avatar, body text right of it */
html body .tdb_author_box,
html body .td-author-box,
html body #tdb-author-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px;
}
html body .tdb_author_box .tdb-author-photo,
html body .td-author-box .td-author-avatar {
  flex: 0 0 auto;
}

/* 18.4 — Mobile hero card: was 1.13 ratio (squarish). Push to a more
   editorial 4:5-ish portrait that fits a phone better. */
@media (max-width: 599px) {
  html body .bf-home .bf-hero-card {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
  }
}

/* 18.5 — In-article images: cap width to content area, never stretch. */
html body .td-post-content img,
html body .tdb_single_content img,
html body .wp-block-image img,
html body figure.wp-block-image img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 4px;
}

/* 18.6 — Logo respects its own aspect always. */
html body .tdb-logo-img,
html body .td-retina-data.tdb-logo-img {
  object-fit: contain !important;
  aspect-ratio: auto !important;
  width: auto !important;
  height: auto !important;
}

/* ── 16. PRINT ───────────────────────────────────────────────────── */

@media print {
  body, .td-main-page-wrap { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .td-header-wrap, .td-footer-wrapper, .td-sidebar, [class*="tdb_footer"], [class*="tdb_header"] { display: none !important; }
}

/* === BF-SEO-AGENT END === */