/* ============================================================
   Newsnibs Theme Layer — dark / light / system preference
   Load AFTER style.css. Does not modify the vendor theme;
   overrides via CSS custom properties + higher specificity.
   ============================================================ */

/* ---------- Light tokens (default) ---------- */
:root {
  --bg-page: #FCFCFC;
  --bg-page-alt: #F2F6F8;
  --bg-card: #fff;
  --bg-card-hover: #F6F7F7;
  --bg-input: #fff;

  --text-primary: #17222B;
  --text-body: #515A60;
  --text-muted: #8B9195;
  --text-link: #17222B;
  --text-link-hover: #1091FF;

  --accent-blue: #1091FF;
  --accent-red: #FF5555;

  --border: #DADCDD;
  --border-light: #E9EAEB;
  --border-dashed: #DCDEDF;

  --shadow: rgba(0,0,0,0.1);

  --progress-track: #B9BCBF;
  --progress-dot: #ECEDEE;

  --overlay-text: rgba(23,34,43,0.5);
  --overlay-text-strong: rgba(23,34,43,0.85);
  --overlay-text-light: rgba(23,34,43,0.6);

  --tab-bg: #fff;
  --tab-active-border: #1091FF;

  --preloader-bg: #fff;
}

/* ---------- Dark tokens — system preference ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #17222B;
    --bg-page-alt: #1C2A35;
    --bg-card: #233340;
    --bg-card-hover: #29333C;
    --bg-input: #29333C;

    --text-primary: #E9EAEB;
    --text-body: #B9BCBF;
    --text-muted: #7A8289;
    --text-link: #E9EAEB;
    --text-link-hover: #1091FF;

    --border: #3A434B;
    --border-light: #2E3D4A;
    --border-dashed: #3A434B;

    --shadow: rgba(0,0,0,0.3);

    --progress-track: #3A434B;
    --progress-dot: #3A434B;

    --overlay-text: rgba(255,255,255,0.5);
    --overlay-text-strong: rgba(255,255,255,0.85);
    --overlay-text-light: rgba(255,255,255,0.6);

    --tab-bg: #233340;
    --tab-active-border: #1091FF;

    --preloader-bg: #17222B;
  }
}

/* ---------- Dark tokens — explicit toggle ---------- */
:root[data-theme="dark"] {
  --bg-page: #17222B;
  --bg-page-alt: #1C2A35;
  --bg-card: #233340;
  --bg-card-hover: #29333C;
  --bg-input: #29333C;

  --text-primary: #E9EAEB;
  --text-body: #B9BCBF;
  --text-muted: #7A8289;
  --text-link: #E9EAEB;
  --text-link-hover: #1091FF;

  --border: #3A434B;
  --border-light: #2E3D4A;
  --border-dashed: #3A434B;

  --shadow: rgba(0,0,0,0.3);

  --progress-track: #3A434B;
  --progress-dot: #3A434B;

  --overlay-text: rgba(255,255,255,0.5);
  --overlay-text-strong: rgba(255,255,255,0.85);
  --overlay-text-light: rgba(255,255,255,0.6);

  --tab-bg: #233340;
  --tab-active-border: #1091FF;

  --preloader-bg: #17222B;
}

/* ============================================================
   M1 — Page-level overrides (backgrounds, body text, links)
   ============================================================ */

/* Page backgrounds */
.home-1-bg { background: var(--bg-page); }
.home-2-bg { background: var(--bg-page-alt); }
.home-3-bg { background: var(--bg-page); }

/* Body text */
body {
  color: var(--text-body);
}

/* Links */
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

/* Headings — the theme uses #17222B and #222 throughout */
h1, h2, h3, h4, h5, h6,
.title a,
.section-title .title {
  color: var(--text-primary);
}

/* No global img background. A placeholder tint was used during local
   dev, but it paints a visible plate behind every transparent PNG
   (logo, play button, badges) — caused two separate bugs. Broken
   images are better diagnosed in devtools than papered over. */

/* Major section backgrounds that use #fff */
.post-layout-top-content,
.about-author-content,
.feature-post-area,
.latest-news-area,
.video-news-area,
.opinion-post-area,
.sport-news-area,
.business-news-area {
  background: var(--bg-page);
}

/* Meta text (dates, authors) */
.post-meta .meta-date span,
.post-meta .meta-categories a,
.post-author .author-info ul li {
  color: var(--text-muted);
}

/* Border overrides for major dividers */
.section-title {
  border-bottom-color: var(--border);
}

/* ============================================================
   M2 — Cards, sidebars, section backgrounds, borders, inputs
   ============================================================ */

/* Trending / news cards */
.trending-news-item {
  background: var(--bg-card);
}

/* Gallery items (sidebar story cards, footer items) */
.gallery_item .gallery_item_content {
  color: var(--text-body);
}

/* Post slider (headline strip) */
.post-area {
  background: var(--bg-card);
}
.post-slider .slick-arrow {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: -16px 8px 17px var(--shadow);
}

/* Sidebar tabbed panel */
.post_gallery_sidebar {
  background: var(--bg-card);
}
.post_gallery_sidebar .nav-pills .nav-link {
  color: var(--text-muted);
}
.post_gallery_sidebar .nav-pills .nav-link.active {
  color: var(--accent-blue);
}
.post_gallery_sidebar .tab-content {
  background: var(--bg-card);
  padding: 20px 18px 18px;
}
/* last item's own margin would otherwise double the gap */
.post_gallery_sidebar .tab-content .gallery_item:last-child {
  margin-bottom: 0;
}

/* Single post items (headline strip thumbnails) */
.single__post .post-content .title a {
  color: var(--text-primary);
}
.single__post .post-content .title a:hover {
  color: var(--text-link-hover);
}

/* Gallery sidebar items */
.gallery_item .gallery_item_content .title a {
  color: var(--text-primary);
}
.gallery_item .gallery_item_content .title a:hover {
  color: var(--text-link-hover);
}

/* Most Shared items */
.most-share-post-item {
  border-bottom-color: var(--border-light);
}
.most-share-post-item .title a {
  color: var(--text-primary);
}
/* Count badges — vendor's own dark variant uses #29333C / #697076,
   which is exactly --bg-card-hover / --text-muted. */
.most-share-post-items .most-share-post-item .count span {
  background: var(--bg-card-hover);
  color: var(--text-muted);
}

/* Newsletter / subscription form */
.newsletter-box,
.sidebar-newsletter-box {
  background: var(--bg-card);
  border-color: var(--border);
}

/* Input fields */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
.nice-select {
  background: var(--bg-input);
  color: var(--text-body);
  border-color: var(--border);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

/* Card-like white boxes throughout.
   Vendor gives these no padding, so once they carry a card
   background their contents run past the edges.
   .most-share-post is NOT one of these — it wraps only the
   section title, not the story list (that's the sibling
   .trending-sidebar-slider), so a card background there paints
   a plate behind the heading alone. */
.trending-sidebar,
.sidebar-add {
  background: var(--bg-card);
}
.trending-sidebar {
  padding: 20px 18px 18px;
  border-radius: 6px;
}
.trending-sidebar .section-title {
  margin-bottom: 18px;
}

/* Trending news card borders & related news borders */
.trending-news-item .trending-news-thumb {
  border-color: var(--border-light);
}

/* ============================================================
   Dashed separators → solid. The vendor theme dashes every
   divider; on dark they read as noise.
   ============================================================ */
/* bottom-edge dividers */
.header-topbar,
.upcoming-matches-post-items .upcoming-matches-post-item,
.finance-item,
.post-sports-item,
.international-item,
.footer-topbar,
.footer-twitter-post .twitter-post,
.widget-twitter .twitter-post,
.most-share-post-items .most-share-post-item ul,
.gallery_item.gallery_item-style-2.footer_gallery_item::before,
.gallery_item_3.gallery_item-style-2.footer_gallery_item::before,
.gallery_item::before,
.gallery_item_3::before,
.post-gallery-style-2 .post-gallery-content::before,
.bussiness-post-item .bussiness-post-content::before {
  border-bottom-style: solid !important;
  border-bottom-color: var(--border-light) !important;
}

/* top-edge dividers */
.trending-news-post-items,
.wedget-service,
.footer-twitter-post,
.widget-news-categories,
.widget-twitter {
  border-top-style: solid !important;
  border-top-color: var(--border-light) !important;
}

/* right-edge dividers (footer columns) */
.footer-widget-area .footer-widget-right-border,
.widget-list {
  border-right-style: solid !important;
  border-right-color: var(--border-light) !important;
}

/* Business/Technology post — blend card bg with page */
.business-post-item .trending-news-content {
  background: transparent !important;
}
.business-post-item .trending-news-item {
  background: transparent !important;
}
/* "Read more" buttons — vendor has 4 variants, two hardcoded #222.
   Covered generically so new sections inherit correct colours. */
.trending-news-content > a,
.sports-news-area .trending-news-item .trending-news-content > a,
.business-post-item .trending-news-item .trending-news-content > a,
.business-post-item .trending-news-content > a {
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
.trending-news-content > a:hover,
.sports-news-area .trending-news-item .trending-news-content > a:hover,
.business-post-item .trending-news-item .trending-news-content > a:hover,
.business-post-item .trending-news-content > a:hover {
  background: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: #fff !important;
}

/* Related news section in sidebar */
.trending-sidebar .section-title {
  border-bottom-color: var(--border);
}

/* Feature post cards (Featured News 3-col on home) */
.trending-news-content {
  background: var(--bg-card);
  padding: 14px 16px 18px;
}
/* Must match vendor specificity (.trending-news-item .trending-news-content
   .title a) or the hardcoded #17222B wins and goes invisible on dark. */
.trending-news-item .trending-news-content .title a,
.trending-news-3-item .trending-news-content .title a,
.trending-news-content .title a {
  color: var(--text-primary);
}
.trending-news-item .trending-news-content .title a:hover,
.trending-news-3-item .trending-news-content .title a:hover,
.trending-news-content .title a:hover {
  color: var(--text-link-hover);
}

/* Borders on dashed dividers */
.footer-topbar {
  border-bottom-color: var(--border-dashed);
}
.footer-widget-area .footer-widget-right-border {
  border-right-color: var(--border-dashed);
}

/* ============================================================
   M2a — Breaking World News hero image constraint
   ============================================================ */

.video-news-area {
  height: auto;
  margin-top: 0;
  padding-top: 30px;
  padding-bottom: 0;
}
.all-post-area {
  padding-top: 30px;
}
.video-news-post {
  margin-top: 0;
}
.video-news-post-thumb img {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
}
.video-news-post-item {
  background: var(--bg-card);
}
.video-news-post-item .video-news-post-content .title a {
  color: var(--text-primary);
}
.video-news-post-item .video-news-post-content .post-meta .meta-date {
  color: var(--text-muted);
}
.video-news-post-item .video-news-post-content .post-meta .meta-date::before {
  background: var(--text-muted);
}

/* ============================================================
   M2b — Logo & banner sizing
   ============================================================ */

.header-centerbar {
  padding: 8px 0;
}
.header-centerbar-ad {
  text-align: right;
}
.header-centerbar-ad img {
  max-height: 70px;
  width: auto;
}

/* ============================================================
   M3 — Header and nav
   ============================================================ */

/* Top bar */
.header-topbar {
  background: var(--bg-page-alt);
  border-bottom-color: var(--border);
}
.header-topbar .topbar-trending span {
  color: var(--text-primary);
}
.header-topbar .topbar-trending .trending-slider .trending-item p {
  color: var(--text-body);
}
.header-topbar .topbar-trending .trending-slider .slick-arrow,
.header-topbar .topbar-trending .trending-slider span.prev,
.header-topbar .topbar-trending .trending-slider span.next {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.header-topbar .topbar-trending .trending-slider .slick-arrow:hover,
.header-topbar .topbar-trending .trending-slider span.prev:hover,
.header-topbar .topbar-trending .trending-slider span.next:hover {
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
}
.header-topbar .topbar-social p {
  color: var(--text-body);
}

/* Center bar (logo + ad) */
.header-centerbar {
  background: var(--bg-card);
}

/* Menu bar */
.header-menubar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.header-menubar .header-menu .stellarnav.light {
  background-color: transparent;
}
.header-menubar .header-menu .stellarnav.light li a {
  color: var(--text-primary);
}
.header-menubar .header-menu .stellarnav.light ul ul {
  background: var(--bg-card);
  border-color: var(--border);
}
.header-menubar .header-menu .stellarnav.desktop li.has-sub ul li a:hover {
  background: var(--bg-card-hover);
}
.header-menubar .header-menu .stellarnav > ul > li > a:hover,
.header-menubar .header-menu .stellarnav > ul > li > a.active {
  background: var(--bg-card-hover);
}
.header-menubar .header-menu .stellarnav.mobile.light ul {
  background: var(--bg-card);
}
.header-menubar .header-menu .stellarnav.light .menu-toggle span.bars span {
  background: var(--text-primary);
}
.header-menubar .header-menu .stellarnav.light a.dd-toggle .icon-plus::after,
.header-menubar .header-menu .stellarnav.light a.dd-toggle .icon-plus::before {
  border-color: var(--text-primary);
}

/* Breadcrumb (article pages) */
.breadcrumb {
  background: var(--bg-page);
}
.breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item a:visited,
.breadcrumb-item a,
.breadcrumb-item a:visited {
  color: var(--text-body) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.breadcrumb-item a:hover {
  color: var(--accent-blue);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}
.breadcrumb-item.active {
  color: var(--text-body);
}

/* Sticky header */
.header-area.mobile-sticky {
  background: var(--bg-card);
}

/* ============================================================
   M4 — Article body, meta, author block, post content
   ============================================================ */

/* Article page main content area */
.post-layout-top-content {
  background: var(--bg-card);
  padding: 30px 34px 34px;
  border-radius: 6px;
}

/* Post text paragraphs */
.post-text p,
.post-text {
  color: var(--text-body);
}
.post-text .title {
  color: var(--text-primary);
}

/* Post content links (within article body) */
.post-text a {
  color: var(--accent-blue);
}

/* Author info block */
.post-author {
  border-top-color: var(--border-light);
  border-bottom-color: var(--border-light);
}
.post-author .author-info .title {
  color: var(--text-primary);
}
.post-author .author-info ul li {
  color: var(--text-muted);
}

/* Post categories label (on article page, non-overlay context) */
.post-categories .categories-item span {
  color: var(--text-body);
}

/* Post content summary under title */
.post-layout-top-content .post-content > p {
  color: var(--text-body);
}

/* Sidebar nav pills (Trending/Latest/Popular tabs) */
.post_gallery_sidebar .nav li a {
  background: var(--bg-card);
  color: var(--overlay-text-strong);
  box-shadow: 0px 10px 40px var(--shadow);
}
.post_gallery_sidebar .nav li a.active,
.post_gallery_sidebar .nav li a.active:hover {
  background: var(--accent-blue);
  color: #fff !important;
}

/* Post news list (sidebar story lists) */
.post-news-list {
  background: var(--bg-card);
}

/* Category badge colors — keep accent bg, ensure white text */
.post-meta .meta-categories a {
  color: #fff;
}

/* Separator dot in meta on non-overlay contexts */
.trending-news-content .post-meta .meta-date,
.gallery_item_content .post-meta .meta-date span,
.trending-news-content .post-meta .meta-date span {
  color: var(--text-muted);
}
.trending-news-content .post-meta .meta-categories a {
  color: var(--accent-red);
}

/* Archive story rows (category/country listing pages) */
.archive-story-row,
.post-list-item {
  border-bottom-color: var(--border-light);
  background: var(--bg-card);
}

/* ============================================================
   M5 — Progress bars, social, sliders, tabs, misc UI
   ============================================================ */

/* Slick slider dots */
.slick-dots li button {
  background: var(--progress-dot);
}
.slick-dots li.slick-active button {
  background: var(--accent-blue);
}

/* Slick arrows on gallery */
.post_gallery_slider .slick-arrow,
.post_gallery_inner_slider .slick-arrow,
.post_gallery_inner_slider span.prev,
.post_gallery_inner_slider span.next {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 10px 40px var(--shadow);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.post_gallery_inner_slider .slick-arrow:hover,
.post_gallery_inner_slider span.prev:hover,
.post_gallery_inner_slider span.next:hover {
  background: var(--accent-blue) !important;
  color: #fff !important;
}

/* All section slider arrows (Spotlight, Most Viewed, Top World, Top Shared) */
.trending-news-slider .slick-arrow,
.trending-sidebar-slider .slick-arrow,
.trending-news-slider span.prev,
.trending-news-slider span.next,
.trending-sidebar-slider span.prev,
.trending-sidebar-slider span.next {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  top: -48px !important;
}
/* Most Viewed needs more offset because of mt-25 on its title wrapper */
.trending-most-view + .trending-sidebar-slider .slick-arrow,
.trending-most-view + .trending-sidebar-slider span.prev,
.trending-most-view + .trending-sidebar-slider span.next {
  top: -56px !important;
}
.trending-news-slider .slick-arrow:hover,
.trending-sidebar-slider .slick-arrow:hover,
.trending-news-slider span.prev:hover,
.trending-news-slider span.next:hover,
.trending-sidebar-slider span.prev:hover,
.trending-sidebar-slider span.next:hover {
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
}

/* Post slider (headline strip) — prev arrow on left */
.post-slider .slick-arrow.prev {
  right: auto;
  left: 0;
  box-shadow: 16px 8px 17px var(--shadow);
}

/* Tab active/inactive states */
.nav-pills .nav-link {
  color: var(--text-muted);
}
.nav-pills .nav-link.active {
  background: var(--accent-blue);
  color: #fff;
}

/* Go-to-top button */
.go-top-btn {
  background: var(--accent-blue);
  color: #fff;
}

/* Social share — keep brand colors, no override needed */

/* Ad placeholder areas */
.sidebar-add {
  background: var(--bg-card);
}

/* Section background overrides for feature/sport/business/video areas */
.feature-area,
.trending-area,
.business-news-area,
.sport-news-area {
  background: var(--bg-page);
}

/* Alt-background sections */
.video-news-area,
.opinion-post {
  background: var(--bg-page-alt);
}

/* White card wrappers that appear throughout */
.post-layout-1-area,
.post-layout-2-area {
  background: var(--bg-page);
}

/* ============================================================
   Search (Pagefind) — replaces the old Google CSE widget
   ============================================================ */

.nn-search { position: relative; max-width: 300px; margin-left: auto; }

.nn-search-input {
  width: 100%;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
  transition: border-color .2s ease;
}
.nn-search-input::placeholder { color: var(--text-muted); }
.nn-search-input:focus { border-color: var(--accent-blue); }
.nn-search-input::-webkit-search-cancel-button { filter: invert(var(--search-x-invert, 0)); }

.nn-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 999;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 8px 24px var(--shadow);
}

.nn-search-hit {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
}
.nn-search-hit:last-child { border-bottom: 0; }
.nn-search-hit:hover { background: var(--bg-card-hover); }

.nn-search-cat {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-blue);
  margin-bottom: 3px;
}
.nn-search-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.nn-search-excerpt {
  display: block;
  font-size: 12px;
  line-height: 17px;
  color: var(--text-muted);
}
.nn-search-excerpt mark {
  background: transparent;
  color: var(--accent-blue);
  font-weight: 600;
}
.nn-search-empty {
  margin: 0;
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 991px) {
  .nn-search { max-width: 100%; margin: 10px 0; }
}

/* ============================================================
   M6 — Unicode icon replacements (Font Awesome removed)
   ============================================================ */

.icon-bolt, .icon-play, .icon-envelope, .icon-up {
  font-style: normal;
  line-height: 1;
}

/* Bolt icon — constrain emoji within its circle/container */
.icon-bolt {
  font-size: inherit;
  line-height: inherit;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
}
/* Numbered rank badges — vendor floats them above the image edge */
.gallery_item.populer_item-style .gallery_item_thumb span,
.gallery_item_3.populer_item-style .gallery_item_thumb span {
  top: 4px;
  border-color: var(--bg-page);
}

/* Gallery items: old CSS targeted <i> which we replaced with <span> */
.gallery_item .gallery_item_thumb .icon,
.gallery_item_3 .gallery_item_thumb .icon {
  top: 0;
}
.gallery_item .gallery_item_thumb .icon .icon-bolt,
.gallery_item_3 .gallery_item_thumb .icon .icon-bolt {
  font-size: 14px;
}
/* Hero spotlight: remove red circle from bolt link, just show the emoji */
.trending-news-item .trending-news-thumb .icon a,
.trending-news-3-item .trending-news-thumb .icon a {
  background: none !important;
  width: auto;
  height: auto;
  line-height: 1;
  border-radius: 0;
}
.trending-news-thumb .icon a .icon-bolt {
  font-size: 20px;
}

/* Stellarnav dropdown arrows — FA font missing, use unicode */
.stellarnav li.has-sub > a::after {
  content: "\25BE" !important;
  font-family: system-ui, sans-serif !important;
}
.stellarnav li li.has-sub > a::after {
  content: "\25B8" !important;
  font-family: system-ui, sans-serif !important;
}
.stellarnav li.drop-left li.has-sub > a::after {
  content: "\25C2" !important;
  font-family: system-ui, sans-serif !important;
}

/* Slider prev/next arrows — unicode chevrons */
.slick-arrow {
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Go-to-top triangle */
.icon-up {
  font-size: 14px;
}

/* Kill the obnoxious ripple/heartbeat animation on go-to-top */
.go-top-wrap .go-top-btn::after {
  animation: none;
  -webkit-animation: none;
}

/* ============================================================
   M7 — Theme toggle button
   ============================================================ */

.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 18px;
  padding: 4px 6px;
  margin-left: 15px;
  line-height: 1;
  transition: color 0.3s ease;
}
.theme-toggle-btn:hover {
  color: var(--accent-blue);
}

/* ============================================================
   Logo — light/dark variant swap
   ============================================================ */
.logo img {
  max-width: 280px;
  width: 100%;
  height: auto;
}
.logo .logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo .logo-dark  { display: block; }
}
[data-theme="dark"] .logo .logo-light { display: none; }
[data-theme="dark"] .logo .logo-dark  { display: block; }
[data-theme="light"] .logo .logo-light { display: block; }
[data-theme="light"] .logo .logo-dark  { display: none; }

/* Footer logo always uses the knockout variant */
.footer-logo img {
  max-width: 240px;
  width: 100%;
  height: auto;
}

/* ============================================================
   White card containers the vendor hardcoded to #FCFCFC.
   These sit inside otherwise-dark sections, so they stayed
   light in dark mode and swallowed their own white titles.
   ============================================================ */
.video-news-box,
.single-play-post-area .single-play-box {
  background: var(--bg-card);
}

/* section-title-2 is hardcoded #fff — invisible on a light card.
   Token it so it reads correctly in both modes. */
.section-title.section-title-2 .title,
.section-title.section-title-2 .title a {
  color: var(--text-primary);
}
.section-title.section-title-2 a {
  color: var(--text-muted);
}
.section-title.section-title-2 a:hover {
  color: var(--accent-blue);
}

/* Play-post text sits on a gradient overlay above the photo —
   must stay white in BOTH modes, do not token it. */

/* Breaking World News item text is below its image, so it tokens */
.video-news-post-item .video-news-post-content .title a {
  color: var(--text-primary);
}

/* Top World / sidebar list inside the video-news box */
.video-news-box .gallery_item .gallery_item_content .title a {
  color: var(--text-primary);
}
.video-news-box .gallery_item .gallery_item_content span {
  color: var(--text-muted);
}

/* ============================================================
   Numbered list items (gallery_item-style-2)
   Vendor reserves only 20px padding for a 36px absolutely-
   positioned number — fine at 1-9, collides at 10+.
   ============================================================ */
.gallery_item.gallery_item-style-2 .gallery_item_content {
  padding-right: 58px;
}
.gallery_item.gallery_item-style-2 .gallery_item_content > span {
  color: var(--text-muted);
  opacity: 0.55;
  text-align: right;
  min-width: 48px;
}

/* ============================================================
   Remaining vendor rules hardcoding #17222B on text.
   Selectors mirror style.css exactly so specificity ties and
   source order (theme.css loads second) decides.
   Found via audit, not by spotting them in the page — several
   live on article/footer views not yet visually QA'd.
   ============================================================ */

/* Body copy */
.post-quote .post-quote-content p,
.post-layout-top-content .post-text ul li,
.widget-twitter .twitter-post .twitter-content p,
.contact-info-item ul li {
  color: var(--text-body);
}

/* Headings / emphasised labels */
.upcoming-matches-post-items .upcoming-matches-post-item .upcoming-matches-content span,
.international-item.international-3-item .meta-category span,
.about-item-area .about-tab-btn .archive-btn ul li,
.counter-post-tab .post-tab-btn ul li a.active,
.footer-download-store .store-btn ul li a span,
.sub-item:hover span {
  color: var(--text-primary);
}

/* ============================================================
   Remaining slider arrows the vendor gave a white background.
   Found by audit — several are on sections not yet QA'd.
   ============================================================ */
.trending-slider-item .trending-slider-3 .slick-arrow,
.trending-image-slide .slick-arrow,
.science-news-area .science-slide .slick-arrow,
.post-reader-text.post-reader-text-2.post-reader-text-3 .post-reader-prev,
.trending-slider-item .trending-slider-3 span.prev,
.trending-slider-item .trending-slider-3 span.next,
.trending-image-slide span.prev,
.trending-image-slide span.next,
.science-news-area .science-slide span.prev,
.science-news-area .science-slide span.next {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.trending-slider-item .trending-slider-3 .slick-arrow:hover,
.trending-image-slide .slick-arrow:hover,
.science-news-area .science-slide .slick-arrow:hover {
  background: var(--accent-blue) !important;
  color: #fff !important;
}

/* Play-post slider arrows (section above Breaking World News) */
.single-play-post-area .single-play-post-slider .slick-arrow,
.single-play-post-area .single-play-post-slider span.prev,
.single-play-post-area .single-play-post-slider span.next {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: -16px 8px 17px var(--shadow);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.single-play-post-area .single-play-post-slider .slick-arrow:hover,
.single-play-post-area .single-play-post-slider span.prev:hover,
.single-play-post-area .single-play-post-slider span.next:hover {
  background: var(--accent-blue) !important;
  color: #fff !important;
}

/* Overlay caption on play-post slides: vendor sets left/bottom but no
   right, so meta text runs flush to the image edge. */
.single-play-post-item .single-play-post-content {
  right: 25px;
  bottom: 14px;
}

/* ============================================================
   Photo-overlay captions.
   These sit on a gradient above an image, so their text must
   stay light in BOTH themes — the muted token is too weak here.
   Vendor also sets left/bottom without right, so meta runs to
   the image edge.
   ============================================================ */
.feature-post .feature-post-content {
  right: 15px;
  bottom: 10px;
}
.feature-post .feature-post-content .post-meta .meta-date,
.feature-post .feature-post-content .post-meta .meta-date span,
.single-play-post-item .single-play-post-content .post-meta .meta-date,
.single-play-post-item .single-play-post-content .post-meta .meta-date span,
.trending-news-3-item .trending-news-content .post-meta .meta-date,
.trending-news-3-item .trending-news-content .post-meta .meta-date span {
  color: rgba(255, 255, 255, 0.85);
}
.feature-post .feature-post-content .post-meta .meta-categories a,
.single-play-post-item .single-play-post-content .post-meta .meta-categories a {
  color: #fff;
}
/* the "/" separator between category and date */
.feature-post .feature-post-content .post-meta .meta-date::before,
.single-play-post-item .single-play-post-content .post-meta .meta-date::before {
  background: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   Menubar vertical tightening.
   Nav links' 20px symmetric padding sets the row height, and
   align-items:center then centres the search box in it. The
   banner above forces the search low, so trimming the top side
   pulls the whole row up toward the logo.
   ============================================================ */
.header-menubar .header-menu .stellarnav > ul > li > a {
  padding-top: 13px;
  padding-bottom: 19px;
}
/* Desktop only. Unscoped, this fights the symmetric 10px margin the
   search box gets below 992px, leaving it 3px high and making the
   hamburger beside it look low — the toggle itself is centred. */
@media (min-width: 992px) {
  .header-menubar .nn-search {
    margin-top: -3px;
  }
}

/* ============================================================
   Article hero video play button.
   Original markup used <center> with an inline top:-249px hack
   tuned to one specific image height — it drifted into the
   headline whenever the image differed. Anchored to the image
   instead.
   ============================================================ */
.post-content .thumb {
  position: relative;
  display: block;
}
.post-content .thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.post-content .thumb .post-video-play {
  position: absolute;
  top: 22px;
  right: 16px;
  line-height: 0;
  transition: transform .2s ease, opacity .2s ease;
}
/* playbtn.png is natively 48x48 — never scale it above that or it
   softens visibly. 40px reads clean and leaves headroom on 2x. */
.post-content .thumb .post-video-play img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.post-content .thumb .post-video-play:hover {
  transform: scale(1.08);
}

/* ============================================================
   Related News slider arrows.
   On the article page this slider is also a Bootstrap .row, so
   it carries -15px side margins while the image sits inside a
   column's 15px padding. Anchor the arrows to the slider and
   offset by that 15px so they right-align with the image edge.
   The homepage sliders are not .row, so scope it.
   ============================================================ */
.trending-sidebar-slider {
  position: relative;
}
.trending-sidebar-slider.row .slick-arrow.next,
.trending-sidebar-slider.row span.next {
  right: 15px !important;
}
.trending-sidebar-slider.row .slick-arrow.prev,
.trending-sidebar-slider.row span.prev {
  right: 60px !important;
}

/* ============================================================
   Article footer sections: vendor stacks 65px bottom padding on
   .latest-news-area against 90px top on .post-form-area, giving
   ~155px of dead space before "Bite Back!".
   ============================================================ */
.latest-news-area {
  padding-bottom: 30px;
}
.post-form-area {
  padding-top: 45px;
  padding-bottom: 55px;
}


/* ============================================================
   Bulk sweep: vendor sections with hardcoded light backgrounds.
   Generated from an audit of style.css with comments stripped
   and malformed selectors rejected — style.css contains several
   multi-line selectors missing commas, and including even one
   invalid selector causes browsers to drop the whole rule.
   ============================================================ */
/* Full-width section bands */
.about-author-area,
.add-area,
.bussiness-box,
.error-area,
.finance-box,
.footer-style-2-area,
.international-news-area,
.most-view-box,
.post-sports-box,
.sports-post-3-area,
.video-style-post-2-area .video-style-box {
  background: var(--bg-page);
}

/* Cards and panels */
.all-post-sidebar-3 .categories-list,
.counter-post-tab .counter-post-main-item .counter-post-content .counter-number span,
.feature-news-box .section-title,
.feature-news-item,
.finance-3-style,
.footer-copyright.footer-copyright-style-2,
.header-area.header-style-2.header-style-3,
.header-area.header-style-2.header-style-3 .header-menubar .menubar-bg::before,
.main-btn:hover,
.post-contact,
.post-international,
.post-layout-top-content.post-layout-top-content-3,
.post-news-item-2,
.post-newsletter,
.post-play-list,
.post-quote.post-quote-2-style,
.post-style-tab-post,
.post-style-tab-post .tab-btn ul li a,
.post_gallery_play .post__gallery_play_content .post-meta .meta-date::before,
.treding-post-news,
.trending-3-area .trending-news-3,
.trending-business-post,
.trending-news-item.technology-item,
.widet-newsletter .post-newsletter {
  background: var(--bg-card);
}

/* Form fields */
.footer-newaletter .input-box input,
.newsletter-box .input-box input,
.post-form-box .input-box input,
.post-form-box .input-box textarea,
.post-newsletter.post-newsletter-3-style .input-box input,
.widet-newsletter .post-newsletter .input-box input {
  background: var(--bg-input);
}

/* ============================================================
   Related News slider: slides are Bootstrap .col-lg-6, which
   carry flex:0 0 50% and max-width:50%. Slick sets an inline
   width on each slide, but max-width still clamps it, so the
   track geometry is subtly wrong. Invisible during normal
   transitions, visible as a snap at the infinite wrap where
   slick repositions instantly.
   ============================================================ */
.row.trending-sidebar-slider .slick-slide,
.row.trending-news-slider .slick-slide,
.row.single-play-post-slider .slick-slide,
.row.feature-post-slider .slick-slide,
.row.post-slider .slick-slide,
.trending-sidebar-slider .slick-slide[class*="col-"],
.trending-news-slider .slick-slide[class*="col-"],
.single-play-post-slider .slick-slide[class*="col-"],
.feature-post-slider .slick-slide[class*="col-"],
.post-slider .slick-slide[class*="col-"] {
  max-width: none;
  flex: none;
}
.row.trending-sidebar-slider .slick-track,
.row.trending-news-slider .slick-track,
.row.single-play-post-slider .slick-track,
.row.feature-post-slider .slick-track,
.row.post-slider .slick-track {
  display: flex;
  align-items: stretch;
}

/* Pages without a topbar (privacy) carry the theme toggle beside the
   search box instead. .nn-search has margin-left:auto, so the button
   needs a shared flex row or it strands itself at the far left. */
.nn-search-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.nn-search-row .nn-search {
  margin-left: 0;
  flex: 0 1 300px;
}

/* ============================================================
   Privacy/about mascot. The vendor positions .thumb absolutely
   with no width, sized for a small original asset — a larger
   replacement overflows and covers the body copy.
   ============================================================ */
.about-author-content .author-content {
  padding-left: 150px;
  min-height: 130px;
}
.about-author-content .author-content .thumb {
  width: 120px;
}
.about-author-content .author-content .thumb img {
  width: 120px;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .about-author-content .author-content {
    padding-left: 0;
    min-height: 0;
  }
}


/* ============================================================
   Dark rgba() text sweep.
   The earlier audits matched literal hex only, so every rule
   using rgba(23,34,43,a) slipped through — including the
   privacy page body copy, which rendered invisible on dark.
   Bucketed by alpha: >=0.75 reads as primary, below that as
   muted.
   ============================================================ */
/* Near-opaque -> primary */
.finance-item .finance-post-meta .meta-date span,
.finance-item .finance-post-meta .meta-user span,
.footer-download-store .store-btn ul li a p,
.footer-top-info .footer-info-item .title,
.header-topbar .topbar-social .social ul li a,
.international-item .meta-user span,
.widget-about {
  color: var(--text-primary);
}

/* Translucent -> muted */
.about-author-content .author-content ul li,
.about-author-content nav ol li,
.about-author-content nav ol li a,
.about-item-area .about-tab-btn ul li > a,
.bussiness-post-item .bussiness-post-content .meta-date-link span,
.bussiness-post-item .bussiness-post-content > a,
.contact-box .input-box input,
.contact-box .input-box textarea,
.contact-info-item span,
.finance-item .finance-content ul li a,
.footer-copyright.footer-copyright-style-2 .copyright-item p,
.footer-copyright.footer-copyright-style-2 .copyright-item ul li a,
.gallery_item_3 .gallery_item_content .post-meta .meta-date,
.header-menu-search ul li a,
.international-item ul li a,
.more-news-items .more-news-item ul li a,
.opinion-post .trending-news-item .trending-news-content ul li a,
.post-gallery-style-2 .post-gallery-content ul li a,
.post-layout-top-content .post-categories .categories-share ul li,
.post-layout-top-content .post-text .thumb span,
.post-newsletter span,
.post-play-list .post-play-list-item .play-meta span,
.post-quote .post-quote-content .user span,
.post-reader-text.post-reader-text-2 .post-reader-prev span,
.post-sports-item .post-sports-content ul li a,
.post-style-tab-post .tab-pane .most-view-style-2 .meta-post-categores a,
.section-title a,
.trending-news-3-item .trending-news-content .post-meta .share-link ul li a,
.upcoming-matches-post-items .upcoming-matches-post-item .upcoming-matches-content ul li,
.video-play-item .video-play-content ul li a,
.widget-twitter .twitter-post .twitter-content span {
  color: var(--text-muted);
}

/* Placeholders */
.contact-box .input-box input::placeholder,
.contact-box .input-box textarea::placeholder,
.footer-newaletter .input-box input::placeholder,
.newsletter-box .input-box input::placeholder,
.post-form-box .input-box input::placeholder,
.post-form-box .input-box textarea::placeholder,
.post-newsletter .input-box input::placeholder {
  color: var(--text-muted);
}


/* Remaining dark hex text (second pass — these appeared only after
   the rgba sweep changed which selectors were already present). */
.about-item-area .about-tab-btn ul li > a.active,
.about-item-area .pagination-item nav ul li a,
.feature-news-item .feature-news-content,
.footer-top-info .footer-info-item ul li a,
.gallery_item_3 .gallery_item_content .title a,
.go-top-wrap .go-top-btn:hover,
.main-btn-2,
.main-btn-2:hover,
.widget-services .service-item ul li a {
  color: var(--text-primary);
}


/* ============================================================
   M8 — Phone layout (< 576px)

   The vendor theme treats phones as an afterthought: it hides
   the topbar outright, keeps the hero at a desktop height, and
   splits the menubar on a grid sized for a full nav rather than
   a hamburger. Each fix below is a vendor decision being undone,
   not a new design.
   ============================================================ */

@media (max-width: 575px) {
  /* style.css:346 hides .header-topbar below 767px and re-shows it
     only for 576-767px, so phones lose Breaking, the date AND the
     theme toggle — the toggle is ours and was never meant to be
     inside something the vendor hides. Bring the bar back and let
     its two halves stack. */
  .header-topbar {
    display: block;
  }
  .header-topbar .topbar-trending {
    padding: 8px 0 4px;
  }
  .header-topbar .topbar-social {
    justify-content: center;
    gap: 12px;
  }
  /* Vendor reserves 30px of right padding for a social list that
     no longer exists; centred, it just offsets the date. */
  .header-topbar .topbar-social p {
    padding-right: 0;
  }

  /* Logo sits left in a full-width column once the grid collapses.
     text-align has no effect here: the dark variant is display:block
     (see the logo swap above), so it centres with auto margins. */
  .header-centerbar .logo img {
    margin-left: auto;
    margin-right: auto;
  }

  /* Vendor floats the red "Breaking" badge left of the headline
     slider. Float can't centre vertically, so once the headline
     wraps to two lines the badge stays pinned to the first. */
  .header-topbar .topbar-trending {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .header-topbar .topbar-trending > span {
    float: none;
    flex: 0 0 auto;
  }
  .header-topbar .topbar-trending .trending-slider {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-topbar .topbar-trending .trending-slider .trending-item p {
    padding-left: 0;
  }

  /* Menubar is col-3 + col-9: the hamburger reserves a quarter of
     the screen it doesn't use, shoving search to the right. Let the
     toggle take only its own width and search claim the rest. */
  .header-menubar .row > [class*="col-"]:first-child {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .header-menubar .row > [class*="col-"]:last-child {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  /* The hamburger is built as an inline-block on a text baseline,
     with 15px padding and three bars that each carry a 5px bottom
     margin — including the last, leaving dead space under the bars
     that nothing balances above them. Plus stellarnav.css:104 nudges
     the whole thing down 3px to sit level with a "MENU" label this
     variant sets to font-size:0. Any of those throws it off centre
     against the search box, so drop the lot and centre it directly. */
  .header-menubar .header-menu .stellarnav .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px 0 0;
    line-height: 0;
  }
  /* Rebuild the bars as a flex column with gap: with no trailing
     margin on the last bar, the stack's box is exactly the bars,
     so centring it centres what you actually see. */
  .header-menubar .stellarnav .menu-toggle span.bars {
    position: static;
    top: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
  .header-menubar .stellarnav .menu-toggle span.bars span {
    margin: 0;
  }
}

@media (max-width: 767px) {
  /* .post_gallery_play is a fixed 500px tall at every width. On a
     phone that's a portrait box showing a landscape photo through
     background-size: cover, so the image is cropped to a zoomed
     centre slice. Height closer to the source aspect ratio crops
     far less. */
  .post_gallery_play {
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 240px;
  }
  /* Gradient scrim is sized for the 500px box; on a short box it
     covers the whole image and flattens it. */
  .post_gallery_play .bg-image::before {
    height: 55%;
  }
  /* The real cause of the "no photo visible" look: the overlay
     title is desktop-sized and fills the frame on its own. */
  .post_gallery_play .post__gallery_play_content .title {
    font-size: 20px;
    line-height: 1.3;
  }
  .post_gallery_play .post__gallery_play_content {
    padding-bottom: 14px;
  }
}


/* ============================================================
   M9 — Sticky header on touch devices

   style.css:5901 pins .mobile-sticky (the whole header) to the
   viewport on any coarse pointer, then offsets the page with a
   hardcoded .mobile-main { margin-top: 150px }. That number was
   measured against the 2023 header. The current one — topbar,
   logo, ad banner, menubar — is more than twice that, so the
   fixed header overlaps the top of the hero at scroll position
   zero. A magic-number offset can't track a header whose height
   depends on content, and a header this tall shouldn't eat a
   third of a phone viewport anyway, so it scrolls normally here.
   ============================================================ */

@media (pointer: coarse) and (max-width: 991px) {
  .header-area.mobile-sticky { position: static; }
  .mobile-main { margin-top: 0; }
}
@media (pointer: none) and (max-width: 991px) {
  .header-area.mobile-sticky { position: static; }
  .mobile-main { margin-top: 0; }
}


/* ============================================================
   M10 — One flat header on phones

   .header-topbar is --bg-page-alt while .header-centerbar and
   .header-menubar are --bg-card. On desktop that tonal step
   reads as depth. Stacked on a phone the three bars become
   three visible boxes, so the topbar joins the rest and the
   divider between them goes with it.
   ============================================================ */

@media (max-width: 767px) {
  .header-topbar {
    background: var(--bg-card);
    border-bottom: 0;
  }
}


/* ============================================================
   M11 — Featured News cards on phones

   Each card's thumb carries a hardcoded inline
   `width:254px;height:320px` from the 2023 build. Below 576px
   slick shows one slide at full container width, so a 254px
   image sits left-aligned in a ~370px slide with dead space
   beside it, reading as an off-centre card. !important is
   required to beat an inline attribute style — the durable fix
   is for the renderer to stop emitting a fixed pixel width at
   all (see the template rebuild).
   ============================================================ */

@media (max-width: 575px) {
  .feature-post-slider .feature-post-thumb > div {
    width: 100% !important;
    height: 220px !important;
  }
}


/* ============================================================
   M12 — Stacked sidebar needs a boundary

   Below 992px the .col-lg-4 sidebar stacks under the Spotlight
   list instead of sitting beside it, so "Most Viewed" runs
   straight into the last story above with nothing separating
   them. A rule rather than an <hr> keeps this out of the markup
   the renderer will emit, and out of the desktop layout where
   the column edge already does this job.
   ============================================================ */

@media (max-width: 991px) {
  .trending-right-sidebar {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
  }
}

/* Dateline and photo credit.
   The dateline opens the first paragraph inline, the way a wire story
   prints it, so it must not be a block element. */
.nn-dateline {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-right: .4em;
}
.nn-photo-credit {
  margin-top: 18px;
  font-size: 13px;
  opacity: .75;
}
.nn-photo-credit a { text-decoration: underline; }

/* ============================================================
   Breaking ticker: one line, always.

   The vendor rule sets no width constraint, so a long headline
   wraps. Slick's track then takes the height of the tallest
   slide while the red "Breaking" pill stays one line tall, and
   the wrapped second line runs underneath the prev/next arrows,
   which are absolutely positioned and do not move.

   Headlines here are model-generated and their length is not
   bounded by anything, so this has to hold at any length rather
   than be tuned to the ones in the store today.
   ============================================================ */
.topbar-trending .trending-slider .trending-item p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Clear both arrows: .next sits at right:0 and .prev at right:25px,
   each 23px wide, so the text must stop 48px short of the edge.
   Scoped to where they exist -- slick turns arrows off under 768
   (main.js), and the padding would be a gap with nothing in it. */
@media (min-width: 768px) {
  .topbar-trending .trending-slider .trending-item p {
    padding-right: 56px;
  }
}


/* ============================================================
   Standing pages (About, Editorial Standards, Contact, Privacy,
   Site Terms): readable body copy inside .about-author-content.
   ============================================================ */
.nn-page {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
}
.nn-page p,
.nn-page ul,
.nn-page ol { margin: 0 0 18px; }
.nn-page .nn-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 24px;
}
.nn-page .nn-updated {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.nn-page h4 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.nn-page ul,
.nn-page ol { padding-left: 22px; }
.nn-page ul { list-style: disc; }
.nn-page ol { list-style: decimal; }
.nn-page li { margin-bottom: 10px; }
.nn-page li::marker { color: var(--accent-blue); font-weight: 600; }
.nn-page strong { color: var(--text-primary); font-weight: 600; }
.nn-page a {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nn-page a:hover { color: var(--text-primary); }
.nn-contact { margin: 0; }
.nn-contact dt {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 22px;
}
.nn-contact dd { margin: 4px 0 0; color: var(--text-primary); }
@media (max-width: 767px) {
  .nn-page { font-size: 16px; }
  .nn-page .nn-lede { font-size: 18px; }
}