/*
 * CryptoNewsInsights Magazine Redesign v6.2
 * CoinTelegraph-inspired magazine layout
 * Loaded LAST via wp_enqueue_scripts priority 9999
 */

/* ================================================================
   1. CSS VARIABLES — MAGAZINE COLOR SYSTEM
================================================================ */
:root {
  /* Core palette */
  --cni-bg: #F8FAFC;
  --cni-card: #FFFFFF;
  --cni-border: #E2E8F0;
  --cni-border-light: #F1F5F9;
  --cni-text: #0F172A;
  --cni-text-secondary: #334155;
  --cni-muted: #64748B;
  --cni-muted-light: #94A3B8;

  /* Brand accent — vibrant blue */
  --cni-accent: #2563EB;
  --cni-accent-hover: #1D4ED8;
  --cni-accent-light: rgba(37,99,235,.08);
  --cni-accent-glow: rgba(37,99,235,.15);

  /* Breaking / Hot */
  --cni-hot: #DC2626;
  --cni-hot-bg: #FEF2F2;

  /* Category colors */
  --cat-bitcoin: #F59E0B;
  --cat-bitcoin-bg: #FFFBEB;
  --cat-ethereum: #6366F1;
  --cat-ethereum-bg: #EEF2FF;
  --cat-altcoin: #059669;
  --cat-altcoin-bg: #ECFDF5;
  --cat-trending: #DC2626;
  --cat-trending-bg: #FEF2F2;
  --cat-ai: #8B5CF6;
  --cat-ai-bg: #F5F3FF;
  --cat-press: #64748B;
  --cat-press-bg: #F8FAFC;

  /* Dark surfaces */
  --cni-dark: #0F172A;
  --cni-dark2: #1E293B;
  --cni-dark3: #334155;

  /* Layout */
  --cni-r: 12px;
  --cni-rs: 8px;
  --cni-rl: 16px;
  --cni-max-w: 1280px;

  /* Shadows */
  --cni-sh: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --cni-sh-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --cni-sh-lg: 0 12px 36px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.05);
  --cni-sh-glow: 0 0 0 3px var(--cni-accent-glow);

  /* Animation */
  --cni-ease: cubic-bezier(.4,0,.2,1);
  --cni-tr: .2s var(--cni-ease);
  --cni-tr-slow: .35s var(--cni-ease);

  /* Typography */
  --cni-f: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
  --cni-f-display: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
}


/* ================================================================
   2. BASE RESET & TYPOGRAPHY
================================================================ */
body {
  background: var(--cni-bg) !important;
  color: var(--cni-text) !important;
  font-family: var(--cni-f) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box }
.site { overflow-x: hidden }
#af-preloader { display: none !important }

a { color: var(--cni-text); text-decoration: none; transition: color var(--cni-tr) }
a:hover { color: var(--cni-accent) !important }
a:visited { color: var(--cni-text) }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--cni-f-display) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
  color: var(--cni-text) !important;
}

/* Hide site title/desc when logo is present */
.wp-custom-logo .site-branding .site-title,
.wp-custom-logo .site-branding .site-description {
  position: absolute !important; clip: rect(1px,1px,1px,1px) !important; display: none !important;
}
.site-branding .custom-logo-link { display: inline-block }


/* ================================================================
   3. TOP BAR — Slim utility bar
================================================================ */
.top-masthead {
  background: var(--cni-dark) !important;
  padding: 0 !important;
  border-bottom: none !important;
  min-height: 36px !important;
  display: flex;
  align-items: center;
}
.top-masthead .container { max-width: var(--cni-max-w) }
.top-masthead, .top-masthead a, .top-masthead .top-navigation a {
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .2px !important;
}
.top-masthead a:hover, .top-masthead .top-navigation a:hover {
  color: #fff !important;
}


/* ================================================================
   4. HEADER — Clean magazine header
================================================================ */
.masthead-banner {
  background: var(--cni-card) !important;
  padding: 16px 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.masthead-banner .container { max-width: var(--cni-max-w) }
.site-branding img.custom-logo {
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
}
.banner-promotions-wrapper { display: none !important }


/* ================================================================
   5. NAVIGATION — Magazine-style with accent underlines
================================================================ */
.main-navigation, nav#site-navigation {
  background: var(--cni-card) !important;
  border: none !important;
  border-top: 1px solid var(--cni-border) !important;
  border-bottom: 3px solid var(--cni-accent) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
.main-navigation .container { max-width: var(--cni-max-w) }

/* Desktop menu items */
.main-navigation .menu ul.menu-desktop > li > a,
.main-navigation .menu ul.menu-desktop > li > a:visited {
  color: var(--cni-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  padding: 14px 16px !important;
  transition: all var(--cni-tr) !important;
  position: relative !important;
}
.main-navigation .menu ul.menu-desktop > li > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  width: 80% !important;
  height: 3px !important;
  background: var(--cni-accent) !important;
  transition: transform var(--cni-tr) !important;
  border-radius: 2px 2px 0 0 !important;
}
.main-navigation .menu ul.menu-desktop > li > a:hover::after,
.main-navigation .menu ul.menu-desktop > li.current-menu-item > a::after {
  transform: translateX(-50%) scaleX(1) !important;
}
.main-navigation .menu ul.menu-desktop > li > a:hover,
.main-navigation .menu ul.menu-desktop > li.current-menu-item > a {
  color: var(--cni-accent) !important;
  background: transparent !important;
}
.main-navigation .menu ul.menu-desktop > li > a .fa-angle-down {
  color: var(--cni-muted-light) !important;
}
/* Remove default underline from theme */
.main-navigation ul > li > a:after { display: none !important }

/* Dropdown */
.main-navigation .menu ul ul {
  background: var(--cni-card) !important;
  border: 1px solid var(--cni-border) !important;
  box-shadow: var(--cni-sh-lg) !important;
  border-radius: 0 0 var(--cni-rs) var(--cni-rs) !important;
  padding: 6px 0 !important;
  margin-top: 3px !important;
}
.main-navigation .menu ul ul li a,
.main-navigation .menu ul ul li a:visited {
  color: var(--cni-text-secondary) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.main-navigation .menu ul ul li a:hover {
  background: var(--cni-accent-light) !important;
  color: var(--cni-accent) !important;
}

/* Search */
.search-overlay { background: var(--cni-dark) !important }
.search-icon, .search-icon:visited, .search-icon:hover {
  color: var(--cni-text) !important;
}

/* Mobile toggle */
.ham, .ham:before, .ham:after { background-color: var(--cni-text) !important }
.navigation-container .toggle-menu { color: var(--cni-text) !important }


/* ================================================================
   6. CONTENT LAYOUT — Magazine grid (Bootstrap-compatible)
   Theme uses Bootstrap 4 .row (margin: 0 -15px) + float-based cols.
   We upgrade to flex BUT keep Bootstrap's padding model (no gap).
================================================================ */
#content.container {
  max-width: var(--cni-max-w) !important;
  padding: 0 20px !important;
  margin-top: 28px !important;
}

/* Flex layout for all .row containers that hold primary+secondary */
section.section-block-upper > .row,
#content.container > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  /* NO gap — use padding on children (Bootstrap-compatible) */
}

/* Primary content: 70% on desktop */
#primary,
#primary.content-area {
  width: 70% !important;
  max-width: 70% !important;
  flex: 0 0 70% !important;
  float: none !important;
  padding-right: 20px !important;
  padding-left: 0 !important;
}

/* Sidebar: 30% on desktop — works for both div#secondary and aside#secondary */
#secondary,
#secondary.sidebar-area,
aside#secondary {
  width: 30% !important;
  max-width: 30% !important;
  flex: 0 0 30% !important;
  float: none !important;
  padding-left: 12px !important;
  padding-right: 0 !important;
}

/* Banner section containers */
.af-main-banner .container,
.af-blocks .container {
  max-width: var(--cni-max-w) !important;
}

/* Full-width override (404, search, etc.) */
.full-width-content #primary,
#primary.content-area.full-width,
.error404 #primary {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-right: 0 !important;
}

/* Right-aligned content layout */
.align-content-right section.section-block-upper > .row,
.align-content-right #content.container > .row {
  flex-direction: row-reverse !important;
}
.align-content-right #primary {
  padding-right: 0 !important;
  padding-left: 20px !important;
}
.align-content-right #secondary {
  padding-left: 0 !important;
  padding-right: 12px !important;
}


/* ================================================================
   7. CARD SYSTEM — Clean magazine cards
   Only sidebar widgets + single-post entry get card treatment.
   Content-area widgets (.covernews-widget, #primary .widget) are
   transparent section containers — NOT cards.
================================================================ */

/* Reset: content-area widgets must NOT be cards */
#primary .widget,
#primary .covernews-widget,
.covernews-widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  overflow: visible !important;
}

/* Ensure inner .row containers keep the parent theme grid intact */
#primary .covernews-widget > .row,
#primary .widget > .row,
#primary > .page-content > .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Sidebar widgets = cards */
#secondary .widget {
  background: var(--cni-card) !important;
  border-radius: var(--cni-r) !important;
  box-shadow: var(--cni-sh) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--cni-border) !important;
}

/* Single post article body = card */
.entry-content {
  background: var(--cni-card) !important;
  border-radius: var(--cni-r) !important;
  padding: 32px !important;
  margin-bottom: 28px !important;
  box-shadow: var(--cni-sh) !important;
  border: 1px solid var(--cni-border) !important;
}


/* ================================================================
   8. SECTION TITLES — Magazine-style with colored left border
================================================================ */
.widget-title.header-after1,
.em-title-subtitle-wrap .widget-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--cni-text) !important;
  margin-bottom: 20px !important;
  padding: 0 0 0 14px !important;
  border-bottom: none !important;
  border-left: 4px solid var(--cni-accent) !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}
span.header-after {
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}
span.header-after:after {
  display: none !important;
}
#secondary .widget-title span {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
#secondary .widget-title.widget-title-1 {
  border-bottom: none !important;
  border-left: 4px solid var(--cni-accent) !important;
  padding: 0 0 0 12px !important;
  margin-bottom: 16px !important;
}


/* ================================================================
   9. ARTICLE CARDS — Magazine style with hover effects
================================================================ */
.spotlight-post {
  border-radius: var(--cni-r) !important;
  overflow: hidden !important;
  transition: transform var(--cni-tr), box-shadow var(--cni-tr) !important;
  background: var(--cni-card) !important;
  border: 1px solid var(--cni-border) !important;
}
.spotlight-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--cni-sh-lg) !important;
  border-color: transparent !important;
}

/* Images */
.data-bg-categorised, .data-bg-featured, .data-bg-hover,
.data-bg-slide, .read-bg-img {
  border-radius: var(--cni-r) var(--cni-r) 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.data-bg-categorised img, .data-bg-featured img, .data-bg-hover img,
.data-bg-slide img, .read-bg-img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  transition: transform .5s var(--cni-ease) !important;
}
.spotlight-post:hover img {
  transform: scale(1.06) !important;
}

/* Captions */
.spotlight-post figcaption {
  padding: 16px 20px !important;
}

/* Article titles */
h3.article-title, h3.article-title a, h3.article-title a:visited {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--cni-text) !important;
  letter-spacing: -.01em !important;
  transition: color var(--cni-tr) !important;
}
h3.article-title a:hover { color: var(--cni-accent) !important }

.article-title-2 a, .article-title-2 a:visited {
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.article-title-2 a:hover { color: var(--cni-accent) !important }


/* ================================================================
   10. CATEGORY BADGES — Color-coded magazine style
================================================================ */
.figure-categories .cat-links a {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  display: inline-block !important;
  transition: all var(--cni-tr) !important;
}

/* Category-specific badge colors */
.figure-categories .cat-links a[href*="bitcoin"] {
  background: var(--cat-bitcoin-bg) !important;
  color: var(--cat-bitcoin) !important;
  border: 1px solid rgba(245,158,11,.2) !important;
}
.figure-categories .cat-links a[href*="ethereum"] {
  background: var(--cat-ethereum-bg) !important;
  color: var(--cat-ethereum) !important;
  border: 1px solid rgba(99,102,241,.2) !important;
}
.figure-categories .cat-links a[href*="altcoin"] {
  background: var(--cat-altcoin-bg) !important;
  color: var(--cat-altcoin) !important;
  border: 1px solid rgba(5,150,105,.2) !important;
}
.figure-categories .cat-links a[href*="trending"] {
  background: var(--cat-trending-bg) !important;
  color: var(--cat-trending) !important;
  border: 1px solid rgba(220,38,38,.2) !important;
}
.figure-categories .cat-links a[href*="ai-news"] {
  background: var(--cat-ai-bg) !important;
  color: var(--cat-ai) !important;
  border: 1px solid rgba(139,92,246,.2) !important;
}
.figure-categories .cat-links a[href*="press-release"] {
  background: var(--cat-press-bg) !important;
  color: var(--cat-press) !important;
  border: 1px solid rgba(100,116,139,.2) !important;
}


/* ================================================================
   11. METADATA — Clean, subtle
================================================================ */
.grid-item-metadata, .grid-item-metadata *, .item-metadata,
.grid-item-metadata a, .grid-item-metadata a:visited {
  font-size: 12px !important;
  color: var(--cni-muted) !important;
  font-weight: 500 !important;
}
.grid-item-metadata a:hover { color: var(--cni-accent) !important }
.grid-item-metadata .posts-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ================================================================
   12. HERO SLIDER — Full-width magazine hero
================================================================ */
.af-blocks {
  background: var(--cni-bg) !important;
  padding: 24px 0 !important;
}
.af-main-banner .container {
  max-width: var(--cni-max-w) !important;
}

/* Slider wrapper */
.main-slider-wrapper {
  border-radius: var(--cni-rl) !important;
  overflow: hidden !important;
  box-shadow: var(--cni-sh-lg) !important;
}

/* Slider caption overlay */
.slider-figcaption {
  padding: 28px 32px !important;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 50%, transparent 100%) !important;
}
.slider-figcaption .slide-title,
.slider-figcaption .slide-title a,
.slider-figcaption .slide-title a:visited {
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}
.slider-figcaption .slide-title a:hover {
  color: rgba(255,255,255,.85) !important;
}
.slider-figcaption .grid-item-metadata,
.slider-figcaption .grid-item-metadata *,
.slider-figcaption .grid-item-metadata a {
  color: rgba(255,255,255,.7) !important;
  font-size: 12px !important;
}

/* Slider nav buttons */
.af-main-navcontrols .af-btn {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  color: #fff !important;
  transition: all var(--cni-tr) !important;
}
.af-main-navcontrols .af-btn:hover {
  background: rgba(255,255,255,.3) !important;
  transform: scale(1.05);
}


/* ================================================================
   13. BREAKING NEWS TICKER — Bold red accent
================================================================ */
.exclusive-posts {
  background: var(--cni-dark) !important;
  border: none !important;
  padding: 0 !important;
  border-radius: var(--cni-rs) !important;
  margin: 0 0 20px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
}
.exclusive-now {
  background: var(--cni-hot) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  position: relative !important;
}
.exclusive-now::after {
  content: '' !important;
  position: absolute !important;
  right: -8px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 16px !important;
  background: var(--cni-hot) !important;
  clip-path: polygon(0 0, 0 100%, 100% 50%) !important;
  z-index: 1 !important;
}
.exclusive-now strong { font-size: 11px !important; color: #fff !important }
.exclusive-slides {
  padding: 0 20px 0 24px !important;
  display: flex !important;
  align-items: center !important;
}
.exclusive-slides a, .exclusive-slides a:visited {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.exclusive-slides a:hover { color: var(--cat-bitcoin) !important }

/* Spinner animation */
.alert-spinner { margin-right: 8px !important }
.alert-spinner .double-bounce1,
.alert-spinner .double-bounce2 {
  background-color: #fff !important;
}


/* ================================================================
   14. EDITORS PICKS / FEATURED / TRENDING
================================================================ */
.categorized-story {
  border-radius: var(--cni-r) !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--cni-dark) 0%, var(--cni-dark2) 100%) !important;
}
.categorized-story .title-heading .article-title-2 a,
.categorized-story .title-heading .article-title-2 a:visited {
  color: #fff !important;
  font-size: 14px !important;
}
.categorized-story .title-heading .article-title-2 a:hover {
  color: var(--cat-bitcoin) !important;
}
.trending-story {
  border-radius: var(--cni-r) !important;
  overflow: hidden !important;
}
.banner-trending-posts-wrapper .spotlight-post {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.banner-trending-posts-wrapper .spotlight-post:hover {
  transform: none !important;
  box-shadow: none !important;
}


/* ================================================================
   15. DOUBLE COLUMN GRID — Magazine 2-column
================================================================ */
.covernews_double_col_categorised_posts .widget-block {
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
/* Inner columns use Bootstrap padding (matches .row -10px margins) */
#primary .col-sm-6 {
  padding: 0 10px !important;
}
#primary .col-sm-4 {
  padding: 0 10px !important;
  margin-bottom: 16px !important;
}

/* Lead article in grid */
.full-plus-list .spotlight-post:first-of-type {
  border-radius: var(--cni-r) !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
  border: 1px solid var(--cni-border) !important;
  box-shadow: var(--cni-sh-md) !important;
}
.full-plus-list .spotlight-post:first-of-type:hover {
  box-shadow: var(--cni-sh-lg) !important;
}
.full-plus-list .spotlight-post:first-of-type .data-bg-categorised {
  border-radius: var(--cni-r) var(--cni-r) 0 0 !important;
}
.full-plus-list .spotlight-post:first-of-type figcaption h3 a,
.full-plus-list .spotlight-post:first-of-type figcaption h3 a:visited {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--cni-text) !important;
  line-height: 1.25 !important;
}

/* Secondary articles in list */
.full-plus-list .spotlight-post:not(:first-of-type) {
  border-radius: var(--cni-rs) !important;
  margin-bottom: 10px !important;
  border: 1px solid var(--cni-border) !important;
  box-shadow: none !important;
}
.full-plus-list .spotlight-post:not(:first-of-type):hover {
  border-color: transparent;
  box-shadow: var(--cni-sh) !important;
}


/* ================================================================
   16. LATEST POSTS — Horizontal scroll carousel
================================================================ */
.af-main-banner-latest-posts {
  padding: 24px 0 !important;
  background: var(--cni-bg) !important;
}
.af-main-banner-latest-posts > .container > .row > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--cni-border) transparent !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
}
.af-main-banner-latest-posts > .container > .row > .row::-webkit-scrollbar {
  height: 4px !important;
}
.af-main-banner-latest-posts > .container > .row > .row::-webkit-scrollbar-track {
  background: transparent !important;
}
.af-main-banner-latest-posts > .container > .row > .row::-webkit-scrollbar-thumb {
  background: var(--cni-border) !important;
  border-radius: 4px !important;
}
.af-main-banner-latest-posts .col-sm-15 {
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
  float: none !important;
  padding: 0 8px !important;
  margin-bottom: 0 !important;
  scroll-snap-align: start !important;
}
.af-main-banner-latest-posts .spotlight-post {
  border-radius: var(--cni-r) !important;
  border: 1px solid var(--cni-border) !important;
  height: 100% !important;
}
.af-main-banner-latest-posts .data-bg-categorised {
  border-radius: var(--cni-r) var(--cni-r) 0 0 !important;
}


/* ================================================================
   17. SIDEBAR — Clean magazine sidebar
================================================================ */
#secondary .widget_text {
  font-size: 14px !important;
  line-height: 1.7 !important;
}
#secondary .widget ul li {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--cni-border-light) !important;
}
#secondary .widget ul li:last-child { border-bottom: none !important }
#secondary .widget ul li a,
#secondary .widget ul li a:visited {
  color: var(--cni-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color var(--cni-tr) !important;
}
#secondary .widget ul li a:hover { color: var(--cni-accent) !important }

/* Crypto widget */
.cryptoboxes {
  border-radius: var(--cni-r) !important;
  overflow: hidden !important;
}
#secondary .mcw-list .coin-img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
}

/* Sidebar sticky */
@media (min-width: 992px) {
  #secondary,
  aside#secondary {
    position: sticky;
    top: 80px;
    align-self: flex-start;
  }
}


/* ================================================================
   18. SINGLE POST — Magazine article layout
================================================================ */
.entry-header h1.entry-title {
  font-size: 36px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -.04em !important;
  color: var(--cni-text) !important;
  margin-bottom: 16px !important;
}
.entry-content p {
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: var(--cni-text-secondary) !important;
}
.entry-content h2 {
  font-size: 26px !important;
  margin-top: 40px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--cni-accent) !important;
}
.entry-content h3 {
  font-size: 22px !important;
  margin-top: 32px !important;
}
.entry-content blockquote {
  border-left: 4px solid var(--cni-accent) !important;
  background: var(--cni-accent-light) !important;
  padding: 20px 28px !important;
  border-radius: 0 var(--cni-rs) var(--cni-rs) 0 !important;
  margin: 32px 0 !important;
  font-style: italic !important;
  color: var(--cni-text-secondary) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}
.entry-content img {
  border-radius: var(--cni-rs) !important;
}


/* ================================================================
   19. BREADCRUMBS
================================================================ */
.em-breadcrumbs {
  background: transparent !important;
  padding: 14px 0 !important;
  font-size: 13px !important;
}
.em-breadcrumbs a { color: var(--cni-muted) !important }
.em-breadcrumbs a:hover { color: var(--cni-accent) !important }


/* ================================================================
   20. FOOTER — Dark magazine footer with gradient top border
================================================================ */
.site-footer { margin-top: 0 !important }
.site-footer .primary-footer {
  background: var(--cni-dark) !important;
  padding: 48px 0 28px !important;
  border-top: none !important;
  position: relative !important;
}
.site-footer .primary-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--cni-accent), var(--cat-bitcoin), var(--cat-ethereum), var(--cat-altcoin), var(--cat-ai)) !important;
}

/* Footer titles */
.site-footer .widget-title.widget-title-1 {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-left: none !important;
  padding-left: 0 !important;
}
.site-footer .widget-title.widget-title-1 .header-after {
  font-size: 12px !important;
  color: rgba(255,255,255,.9) !important;
  letter-spacing: 1.2px !important;
}

/* Footer nav */
.site-footer .widget_nav_menu .menu { margin: 0 !important; padding: 0 !important }
.site-footer .widget_nav_menu .menu li { padding: 0 !important; margin: 0 !important; list-style: none !important }
.site-footer .widget_nav_menu .menu li a,
.site-footer .widget_nav_menu .menu li a:visited {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 5px 0 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.5) !important;
  transition: color var(--cni-tr), padding-left var(--cni-tr) !important;
  border-bottom: none !important;
}
.site-footer .widget_nav_menu .menu li a:hover {
  color: var(--cni-accent) !important;
  padding-left: 6px !important;
}

/* Footer tags */
.site-footer .tagcloud a, .site-footer .tagcloud a:visited {
  font-size: 11px !important;
  padding: 5px 14px !important;
  margin: 3px 3px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.5) !important;
  background: transparent !important;
  transition: all var(--cni-tr) !important;
  display: inline-block !important;
}
.site-footer .tagcloud a:hover {
  border-color: var(--cni-accent) !important;
  color: var(--cni-accent) !important;
  background: rgba(37,99,235,.08) !important;
}

/* Copyright bar */
.site-info {
  background: #060A13 !important;
  padding: 16px 0 !important;
  font-size: 12px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

/* Footer crypto ticker */
.mcw-ticker.mcw-footer {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  margin-top: 12px !important;
}


/* ================================================================
   21. SCROLLBAR
================================================================ */
::-webkit-scrollbar { width: 8px }
::-webkit-scrollbar-track { background: var(--cni-bg) }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px }
::-webkit-scrollbar-thumb:hover { background: #94A3B8 }


/* ================================================================
   22. COMMENTS
================================================================ */
.comments-area {
  background: var(--cni-card) !important;
  border-radius: var(--cni-r) !important;
  box-shadow: var(--cni-sh) !important;
  border: 1px solid var(--cni-border) !important;
}


/* ================================================================
   23. PAGINATION
================================================================ */
.nav-links a, .nav-links span {
  border-radius: var(--cni-rs) !important;
  transition: all var(--cni-tr) !important;
  font-weight: 600 !important;
}
.nav-links .current,
.nav-links a:hover {
  background: var(--cni-accent) !important;
  border-color: var(--cni-accent) !important;
  color: #fff !important;
}


/* ================================================================
   24. FORMS
================================================================ */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], textarea, select {
  border: 1px solid var(--cni-border) !important;
  border-radius: var(--cni-rs) !important;
  padding: 10px 14px !important;
  font-family: var(--cni-f) !important;
  transition: border-color var(--cni-tr), box-shadow var(--cni-tr) !important;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="search"]:focus, textarea:focus {
  border-color: var(--cni-accent) !important;
  outline: none !important;
  box-shadow: var(--cni-sh-glow) !important;
}
button, input[type="submit"], input[type="button"] {
  background: var(--cni-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cni-rs) !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-family: var(--cni-f) !important;
  cursor: pointer !important;
  transition: background var(--cni-tr), transform var(--cni-tr) !important;
}
button:hover, input[type="submit"]:hover {
  background: var(--cni-accent-hover) !important;
  transform: translateY(-1px);
}


/* ================================================================
   25. ARCHIVE / CATEGORY PAGES
================================================================ */
.archive .page-title,
.category .page-title,
.search .page-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}
.archive-description,
.taxonomy-description {
  color: var(--cni-muted) !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
}


/* ================================================================
   26. 404 PAGE
================================================================ */
.error-404 .page-title {
  font-size: 100px !important;
  color: var(--cni-accent) !important;
  opacity: .2;
}


/* ================================================================
   27. SELECTION HIGHLIGHT
================================================================ */
::selection {
  background: var(--cni-accent) !important;
  color: #fff !important;
}
::-moz-selection {
  background: var(--cni-accent) !important;
  color: #fff !important;
}


/* ================================================================
   28. FOCUS STATES (Accessibility)
================================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cni-accent) !important;
  outline-offset: 2px !important;
}


/* ================================================================
   29. CRYPTO PRICE TICKER — Enhanced
================================================================ */
.mcw-ticker, .mcw-list {
  font-family: var(--cni-f) !important;
}
.mcw-ticker .coin-name {
  font-weight: 700 !important;
  font-size: 12px !important;
}
.mcw-ticker .coin-price {
  font-weight: 600 !important;
}
.mcw-ticker .coin-change.up { color: #059669 !important }
.mcw-ticker .coin-change.down { color: #DC2626 !important }

/* Sidebar crypto widget */
#secondary .mcw-list .coin-row,
#secondary .mcw-list tr {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--cni-border-light) !important;
}
#secondary .mcw-list .coin-name {
  font-weight: 600 !important;
  color: var(--cni-text) !important;
}
#secondary .mcw-list .coin-symbol {
  color: var(--cni-muted) !important;
  font-size: 11px !important;
}


/* ================================================================
   30. RELATED POSTS
================================================================ */
.af-related-posts-wrapper {
  background: var(--cni-card) !important;
  border-radius: var(--cni-r) !important;
  padding: 24px !important;
  box-shadow: var(--cni-sh) !important;
  border: 1px solid var(--cni-border) !important;
  margin-bottom: 28px !important;
}
.af-related-posts-wrapper .widget-title {
  border-left: 4px solid var(--cni-accent) !important;
  padding-left: 14px !important;
}


/* ================================================================
   T1. TABLET (max-width: 991px)
================================================================ */
@media (max-width: 991px) {
  /* Stack columns */
  #content.container {
    padding: 0 16px !important;
    margin-top: 16px !important;
  }
  section.section-block-upper > .row,
  #content.container > .row {
    flex-direction: column !important;
  }
  #primary, #primary.content-area,
  #secondary, #secondary.sidebar-area, aside#secondary {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #secondary, aside#secondary { position: static !important }

  /* Content-area widgets: no card padding */
  #primary .widget,
  #primary .covernews-widget,
  .covernews-widget {
    padding: 0 !important;
    margin-bottom: 18px !important;
  }

  /* Inner .row negative margins must match parent theme */
  #primary .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  /* Inner columns: stack on tablet */
  #primary .col-sm-6.full-plus-list {
    width: 100% !important;
    float: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 18px !important;
  }

  /* Banner */
  .af-blocks { padding: 16px 0 !important }

  /* Nav — keep white bg on mobile */
  .main-navigation {
    position: sticky !important;
    top: 0 !important;
    border-bottom: 2px solid var(--cni-accent) !important;
  }
  .main-navigation .menu .menu-mobile li a {
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 12px 18px !important;
    color: var(--cni-text) !important;
    border-bottom: 1px solid var(--cni-border-light) !important;
  }
  .navigation-container .toggle-menu {
    min-width: 48px !important;
    min-height: 48px !important;
  }
  .navigation-container .cart-search a.search-icon {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* Slider */
  .slider-figcaption .slide-title,
  .slider-figcaption .slide-title a {
    font-size: 22px !important;
  }

  /* Article images */
  .spotlight-post .data-bg-categorised,
  .spotlight-post .data-bg-featured {
    height: auto !important;
    min-height: 0 !important;
  }
  .spotlight-post .data-bg-categorised img,
  .spotlight-post .data-bg-featured img {
    max-height: 280px !important;
  }
  .spotlight-post figcaption {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    background: var(--cni-card) !important;
  }

  /* Full+list mobile fix */
  .full-plus-list .spotlight-post:first-of-type figcaption {
    position: relative !important;
    bottom: auto !important;
    background: var(--cni-card) !important;
  }
  .full-plus-list .spotlight-post:first-of-type figcaption h3 a {
    color: var(--cni-text) !important;
  }
  .full-plus-list .spotlight-post:first-of-type .data-bg-categorised {
    height: auto !important;
  }
  .full-plus-list .spotlight-post:not(:first-of-type) figure.categorised-article,
  .list .spotlight-post figure.categorised-article {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }
  .full-plus-list .spotlight-post:not(:first-of-type) figcaption,
  .list .spotlight-post figcaption {
    width: 100% !important;
    display: block !important;
  }

  /* Double col mobile */
  .covernews_double_col_categorised_posts .col-sm-4 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 14px !important;
  }

  /* Footer */
  .site-footer .primary-footer { padding: 28px 0 14px !important }

  /* Hide secondary ticker + last crypto box */
  .mcw-ticker.mcw-footer, .cryptoboxes:last-child { display: none !important }

  /* Latest posts: scroll carousel on tablet */
  .af-main-banner-latest-posts .col-sm-15 {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
  }

  /* Breaking news */
  .exclusive-posts {
    font-size: 13px !important;
    border-radius: 0 !important;
    margin: 0 0 16px !important;
  }

  /* Trending */
  .banner-trending-posts-wrapper .data-bg-featured { height: auto !important }
  .banner-trending-posts-wrapper .data-bg-featured img { max-height: 100px !important }
  .read-bg-img img, .data-bg-hover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}


/* ================================================================
   T2. MOBILE (max-width: 768px)
================================================================ */
@media (max-width: 768px) {
  body { font-size: 15px !important }
  #content.container { margin-top: 12px !important; padding: 0 12px !important }

  /* Content-area widgets: no card treatment */
  #primary .widget,
  #primary .covernews-widget,
  .covernews-widget {
    padding: 0 !important;
    margin-bottom: 14px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #secondary .widget {
    padding: 14px !important;
    margin-bottom: 12px !important;
  }

  /* Inner grids: reduce negative margin to avoid overflow */
  #primary .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  #primary .col-sm-6,
  #primary .col-sm-4,
  #primary .col-sm-3 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Smaller section titles */
  .widget-title.header-after1,
  .em-title-subtitle-wrap .widget-title {
    font-size: 16px !important;
    margin-bottom: 14px !important;
    padding-left: 12px !important;
  }
  span.header-after { font-size: 16px !important }

  /* Single post */
  .entry-header h1.entry-title { font-size: 26px !important }
  .entry-content p { font-size: 16px !important; line-height: 1.7 !important }
  .entry-content { padding: 20px !important }

  /* Header */
  .masthead-banner { padding: 10px 0 !important }
  .site-branding img.custom-logo { max-height: 40px !important }

  /* Featured posts: horizontal card layout on mobile */
  .af-main-banner-featured-posts .featured-posts-grid .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .af-main-banner-featured-posts .col-sm-15 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .af-main-banner-featured-posts .spotlight-post {
    display: flex !important;
    flex-direction: row !important;
    background: var(--cni-card) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: var(--cni-sh) !important;
    border: 1px solid var(--cni-border) !important;
  }
  .af-main-banner-featured-posts .spotlight-post:hover {
    transform: none !important;
    box-shadow: var(--cni-sh) !important;
  }
  .af-main-banner-featured-posts .spotlight-post figure.featured-article {
    flex: 0 0 115px !important;
    width: 115px !important;
    margin: 0 !important;
  }
  .af-main-banner-featured-posts .spotlight-post .featured-article-wrapper {
    height: 100% !important;
  }
  .af-main-banner-featured-posts .spotlight-post .data-bg-featured {
    height: 100% !important;
    min-height: 90px !important;
    border-radius: 0 !important;
  }
  .af-main-banner-featured-posts .spotlight-post .data-bg-featured img {
    width: 115px !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 90px !important;
  }
  .af-main-banner-featured-posts .spotlight-post .data-bg-featured a {
    display: block !important;
    height: 100% !important;
  }
  .af-main-banner-featured-posts .spotlight-post .figure-categories {
    display: none !important;
  }
  .af-main-banner-featured-posts .spotlight-post figcaption {
    flex: 1 !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    bottom: auto !important;
    background: var(--cni-card) !important;
  }
  .af-main-banner-featured-posts .spotlight-post figcaption h3.article-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
  }
  .af-main-banner-featured-posts .spotlight-post figcaption h3.article-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: var(--cni-text) !important;
  }
  .af-main-banner-featured-posts .spotlight-post .grid-item-metadata {
    font-size: 11px !important;
  }
  .af-main-banner-featured-posts .spotlight-post .grid-item-metadata .posts-author {
    display: none !important;
  }

  /* Slider */
  .slider-figcaption .slide-title,
  .slider-figcaption .slide-title a { font-size: 20px !important }
  .slider-figcaption { padding: 20px !important }
  .main-slider-wrapper { border-radius: 10px !important }

  /* Grid */
  .full-plus-list .spotlight-post:first-of-type figcaption h3 a {
    font-size: 17px !important;
  }

  /* Footer */
  .site-footer .primary-footer { padding: 24px 0 10px !important }
  .site-footer .tagcloud a { font-size: 11px !important; padding: 4px 10px !important }

  /* Breaking news arrow */
  .exclusive-now::after { display: none !important }

  /* Latest posts: wider cards in scroll */
  .af-main-banner-latest-posts .col-sm-15 {
    flex: 0 0 65% !important;
    width: 65% !important;
    max-width: 65% !important;
  }
}


/* ================================================================
   T3. SMALL MOBILE (max-width: 480px)
================================================================ */
@media (max-width: 480px) {
  #content.container { padding: 0 8px !important }
  #primary .widget,
  #primary .covernews-widget,
  .covernews-widget {
    padding: 0 !important;
    margin-bottom: 10px !important;
  }
  #primary .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }
  #primary .col-sm-6,
  #primary .col-sm-4,
  #primary .col-sm-3 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .spotlight-post .data-bg-categorised img,
  .spotlight-post .data-bg-featured img {
    max-height: 200px !important;
  }
  .slider-figcaption .slide-title,
  .slider-figcaption .slide-title a { font-size: 17px !important }
  .slider-figcaption { padding: 16px !important }
  .entry-header h1.entry-title { font-size: 22px !important }

  /* Featured cards even smaller */
  .af-main-banner-featured-posts .spotlight-post figure.featured-article {
    flex: 0 0 95px !important;
    width: 95px !important;
  }
  .af-main-banner-featured-posts .spotlight-post .data-bg-featured img {
    width: 95px !important;
  }
  .af-main-banner-featured-posts .spotlight-post figcaption h3.article-title {
    font-size: 12px !important;
  }
  h3.article-title, h3.article-title a { font-size: 14px !important }

  /* Section titles */
  .widget-title.header-after1,
  .em-title-subtitle-wrap .widget-title {
    font-size: 15px !important;
    padding-left: 10px !important;
    border-left-width: 3px !important;
  }

  /* Latest posts: single card scroll */
  .af-main-banner-latest-posts .col-sm-15 {
    flex: 0 0 80% !important;
    width: 80% !important;
    max-width: 80% !important;
  }
}


/* ================================================================
   T4. LARGE DESKTOP (min-width: 1400px)
================================================================ */
@media (min-width: 1400px) {
  #content.container,
  .af-main-banner .container {
    max-width: 1360px !important;
  }
  .slider-figcaption .slide-title,
  .slider-figcaption .slide-title a {
    font-size: 34px !important;
  }
  .full-plus-list .spotlight-post:first-of-type figcaption h3 a {
    font-size: 22px !important;
  }
}


/* ================================================================
   PRINT
================================================================ */
@media print {
  .top-masthead, .main-navigation, .site-footer,
  .exclusive-posts, .af-blocks, #secondary,
  .mcw-ticker, .cryptoboxes { display: none !important }
  body { background: #fff !important }
  #primary { width: 100% !important; max-width: 100% !important }
  .entry-content { box-shadow: none !important; border: none !important }
}