/* ──────────────────────────────────────────────────────────────────────────
   knews-overrides.css
   UI/UX polish layer — font-size + alignment + responsive only.
   Loaded LAST (after style.css / responsive.css) so it wins on the cascade
   without editing the purchased theme files. No template/markup changes.
   ────────────────────────────────────────────────────────────────────────── */

/* ── System-font fallback while web fonts load (prevents invisible text) ─── */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; }

/* ── Fluid heading scale (was fixed px: h1 40px, h2 32px, h3 28px) ────────── */
h1 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.1rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); }
h4 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); }

/* ── Section headings (Top Categories / Latest News / Popular / Breaking) ── */
.section-title .title,
.section-title-two .title,
.section-title-five .title { font-size: clamp(1.15rem, 1rem + 1vw, 1.4rem); }

/* ── Article / post titles — font size driven by --kn-font-scale from settings */
.post-title,
.post-title a {
  font-size: calc(clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem) * var(--kn-font-scale, 1));
  line-height: 1.4;
}

/* Line clamp — driven by --kn-title-lines; !important beats theme specificity */
.post-title {
  display: -webkit-box !important;
  -webkit-line-clamp: var(--kn-title-lines, 2) !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-clamp: var(--kn-title-lines, 2);
}

/* Lead post (big-post / featured slider) */
.latest-post-item.big-post .featured-post-content .post-title,
.featured-post-content .post-title {
  font-size: calc(clamp(1.05rem, 0.9rem + 1vw, 1.35rem) * var(--kn-font-scale, 1));
  line-height: 1.35;
}

/* Small / sidebar / breaking-grid post titles */
.latest-post-item.small-post .featured-post-content .post-title,
.popular-post .content .post-title,
.featured-post-item.healthy-post .featured-post-content .post-title {
  font-size: calc(clamp(0.9rem, 0.85rem + 0.3vw, 1rem) * var(--kn-font-scale, 1));
  line-height: 1.4;
}

/* ── Meta rows (author / date) — keep small and aligned ───────────────────── */
.blog-post-meta .list-wrap { row-gap: 4px; }
.blog-post-meta .list-wrap li { font-size: 0.78rem; }
.blog-post-meta .list-wrap li i { font-size: 0.85rem; }

/* ── Nav / menu text — trim slightly so the header feels lighter ─────────── */
.navigation > li > a { font-size: 0.92rem; }
.header-top-menu .list-wrap li a,
.header-top-social .title { font-size: 0.82rem; }

/* ── Sidebar / footer widget titles ────────────────────────────────────────── */
.sidebar-widget .widget-title .title,
.footer-widget .fw-title { font-size: 1rem; }
.footer-content p,
.footer-widget p { font-size: 0.85rem; line-height: 1.7; }

/* ── Card image consistency — aspect-ratio enforces uniform row heights ─── */
.featured-post-thumb,
.overlay-post-thumb,
.horizontal-post-thumb,
.card-image { overflow: hidden; border-radius: 4px; }
.featured-post-thumb img,
.overlay-post-thumb img,
.horizontal-post-thumb img,
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Standard slot heights per card type */
.featured-post-thumb          { aspect-ratio: 16 / 9; }
.featured-post-item.big-post .featured-post-thumb  { aspect-ratio: 3 / 2; }
.featured-post-item.small-post .featured-post-thumb { aspect-ratio: 4 / 3; }
.featured-post-item.healthy-post .featured-post-thumb { aspect-ratio: 16 / 9; }

/* Popular post thumbnails — square */
.popular-post .thumb {
  width: 90px; min-width: 90px; flex-shrink: 0;
  aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px;
}
.popular-post .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Keep a row of cards top-aligned */
.featured-post-wrap .row,
.categories-item-wrap .row,
.latest-post-wrap { align-items: flex-start; }

/* ── Category chips — center icon + label consistently ────────────────────── */
.categories-item { text-align: center; }
.categories-content { display: flex; justify-content: center; }

/* ── Section spacing — same layout, just less top/bottom air on every
   screen size (was fixed 60–70px regardless of viewport) ─────────────────── */
.featured-post-area,
.latest-post-area,
.recipe-area,
.healthy-area,
.categories-area { padding-top: clamp(24px, 4vw, 60px); padding-bottom: clamp(20px, 3vw, 40px); }

/* ── Mobile tightening (≤576px) ────────────────────────────────────────────── */
@media (max-width: 576px) {
  .post-title,
  .post-title a { font-size: 0.95rem; }
  .latest-post-item.big-post .featured-post-content .post-title,
  .featured-post-content .post-title { font-size: 1.1rem; }
  .section-title .title,
  .section-title-two .title { font-size: 1.15rem; }
  .blog-post-meta .list-wrap li { font-size: 0.72rem; }
  .featured-post-area,
  .latest-post-area,
  .recipe-area,
  .healthy-area,
  .categories-area { padding-top: 20px; padding-bottom: 16px; }
}

/* ── Ad banner slots — 728×90 desktop / 300×250 mobile ──────────────────── */
.ad-banner-area { padding: 16px 0; }
.ad-banner-area .ad-banner-img {
  display: block;
  width: stretch; 
  max-width: stretch;
  aspect-ratio: 728 / 90;
  overflow: hidden; border-radius: 4px;
  margin: 0 auto;
}
.ad-banner-area .ad-banner-img img,
.ad-banner-area .ad-banner-img picture,
.ad-banner-area .ad-banner-img a { display: block; width: stretch; height: 100%; }
.ad-banner-area .ad-banner-img img { object-fit: cover; }

@media (max-width: 767px) {
  .ad-banner-area .ad-banner-img { max-width: 300px; aspect-ratio: 300 / 250; }
}

/* ── Empty ad slot placeholder ──────────────────────────────────────────── */
.kn-ad-placeholder { padding: 12px 0; }
.kn-ad-placeholder-inner {
  border: 2px dashed #d4d4d4; border-radius: 8px;
  min-height: 90px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 20px 16px; background: #fafafa; color: #999;
}
.dark-mode .kn-ad-placeholder-inner { background: #1e1e1e; border-color: #444; color: #666; }
.kn-ad-placeholder-label { font-size: 0.82rem; font-weight: 500; }
.kn-ad-placeholder-sub { font-size: 0.72rem; }

/* ── Popup ad overlay — 300×250 (IAB medium rectangle, works on all screens) */
#kn-popup-ad {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.65); align-items: center; justify-content: center;
}
#kn-popup-ad.kn-popup-open { display: flex; }
#kn-popup-ad-inner {
  position: relative;
  width: min(300px, 90vw);   /* 300px desktop, shrinks on very narrow screens */
  height: auto;
}
#kn-popup-ad-inner img {
  width: 300px; height: 250px; max-width: 100%; height: auto;
  min-height: 0; display: block; border-radius: 4px; object-fit: cover;
}
@media (max-width: 767px) {
  #kn-popup-ad-inner { width: min(300px, 92vw); }
}
#kn-popup-close {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  border-radius: 50%; background: #fff; border: none; cursor: pointer;
  font-size: 1.1rem; font-weight: 700; color: #333; line-height: 32px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#kn-popup-close:hover { background: #f44; color: #fff; }

/* ── Sidebar ad slot — desktop only ─────────────────────────────────────── */
.kn-sidebar-ad { margin-bottom: 24px; }
.kn-sidebar-ad img { width: 100%; height: auto; border-radius: 4px; display: block; }
@media (max-width: 991px) {
  .kn-sidebar-ad { display: none; }
}

/* ── Outer left/right ad rails — desktop only (≥1280px) ─────────────────── */
.kn-outer-wrap {
  display: flex;
  align-items: flex-start;
  max-width: 1600px;
  margin: 0 auto;
}
.kn-content-col {
  flex: 1;
  min-width: 0;
}
.kn-ad-col {
  width: 160px;
  flex-shrink: 0;
  padding: 16px 8px;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow: hidden;
}
.kn-ad-col img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
@media (max-width: 1280px) {
  .kn-ad-col { display: none; }
}

/* ── Sidebar social widget (Subscribe & Followers) ──────────────────────── */
.sidebar-social-wrap .list-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-social-wrap .list-wrap li { flex: 1 1 calc(50% - 4px);   }
.sidebar-social-wrap .list-wrap li a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 0.82rem; font-weight: 600; transition: opacity .2s;
}
.sidebar-social-wrap .list-wrap li a:hover { opacity: .8; }
.sidebar-social-wrap .list-wrap li a i { width: 18px; text-align: center; }
/* platform colors */
.sidebar-social-wrap .list-wrap li:has(.fa-facebook-f)  a { background:#1877f2; color:#fff; }
.sidebar-social-wrap .list-wrap li:has(.fa-twitter)     a { background:#1da1f2; color:#fff; }
.sidebar-social-wrap .list-wrap li:has(.fa-instagram)   a { background:#e1306c; color:#fff; }
.sidebar-social-wrap .list-wrap li:has(.fa-youtube)     a { background:#ff0000; color:#fff; }
.sidebar-social-wrap .list-wrap li:has(.fa-linkedin-in) a { background:#0077b5; color:#fff; }
.sidebar-social-wrap .list-wrap li:has(.fa-pinterest-p) a { background:#bd081c; color:#fff; }
.sidebar-social-wrap .list-wrap li:has(.fa-whatsapp)    a { background:#25d366; color:#fff; }

/* ── Ad slider (multiple ads per placement → auto-rotate) ────────────────── */
.kn-ad-slides { position: relative; overflow: hidden; }
.kn-ad-slide { display: none; }
.kn-ad-slide.active { display: block; animation: kn-ad-fade .5s ease; }
@keyframes kn-ad-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Mid-range responsive: tablet + small desktop (768px – 1200px) ───────── */
@media (min-width: 768px) and (max-width: 1200px) {
  /* Widen the Bootstrap container to use more of the available viewport */
  .container { max-width: 96%; }
  /* Card grid: 2 columns always on this range */
  .col-70, .col-66 { flex: 0 0 65%; max-width: 65%; }
  .col-30, .col-34 { flex: 0 0 35%; max-width: 35%; }
}
@media (min-width: 1200px) {
  .container { max-width: 1200px; }
}