/* ============================================================
   TopTier Insights — main stylesheet
   ============================================================ */

:root {
  --color-bg: #f7f8fb;
  --color-surface: #ffffff;
  --color-text: #1a1d29;
  --color-text-muted: #5b6072;
  --color-border: #e6e8ee;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-accent: #7c3aed;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.12);
  --max-width: 1200px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; left: -9999px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- Header ---------- */
#site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.brand i { font-size: 1.4rem; }
.main-nav {
  display: flex;
  gap: 20px;
  flex: 1;
}
.main-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.main-nav a:hover, .main-nav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ---------- Nav item wrapper + Mega-menu (Categories) ----------
   The panel is fixed to the viewport (not absolutely positioned relative to
   the nav item) so it can span the FULL browser width and show a real
   4-column category grid, edge to edge, instead of a narrow dropdown
   cramped under one nav link. Open/close is driven by JS hover-intent
   timers in layout.js (see the comment there) rather than plain CSS
   :hover — a fixed full-width panel that starts several pixels below the
   trigger link creates a real dead zone that pure-CSS :hover cannot
   survive crossing, which is what caused the original "hides on hover"
   flicker bug. The `.open` class (toggled by JS) is therefore the only
   thing that reveals the panel; there is no CSS-only :hover reveal. */
.nav-item.has-mega { position: relative; display: flex; align-items: center; }
.nav-categories-link, #nav-categories-link { display: flex; align-items: center; gap: 6px; }
.mega-caret { font-size: 0.65rem; transition: transform 0.2s; }
.nav-item.has-mega.open .mega-caret { transform: rotate(180deg); }
.mega-toggle {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 8px 2px 8px 6px;
  font-size: 0.7rem;
  line-height: 1;
  display: none;
  transition: color 0.2s, transform 0.2s;
}
.mega-menu {
  /* Hidden via opacity + pointer-events (NOT display:none / visibility:hidden)
     so links stay reachable by keyboard Tab navigation. A display:none panel
     can never receive focus, which permanently traps its links out of the tab
     order and makes :focus-within impossible to trigger — effectively turning
     real, indexable nav links into elements a keyboard-only user can never
     reach. Opacity + pointer-events keeps the panel out of sight and out of
     the mouse hit-test area while it's closed, but lets Tab walk into it and
     reveal it via :focus-within. */
  position: absolute;
  top: 85%;
  left: -120px;
  width: 1020px;
  max-width: 95vw;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.nav-item.has-mega.open .mega-menu,
.mega-menu:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mega-menu__inner { max-width: 1400px; margin: 0 auto; padding: 32px 40px 36px; }
.mega-menu__header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.mega-menu__heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0;
}
.mega-menu__viewall { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.mega-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; }
.mega-menu__cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.mega-menu__cat:hover { background: var(--color-bg); }
.mega-menu__cat.is-active {
  background: color-mix(in srgb, var(--color-primary) 8%, white);
  border-color: var(--color-primary);
}
.mega-menu__cat.is-active .mega-menu__cat-text strong { color: var(--color-primary); }
.mega-menu__cat-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.mega-menu__cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-menu__cat-text strong { font-size: 0.9rem; color: var(--color-text); }
.mega-menu__cat-text em { font-style: normal; font-size: 0.75rem; color: var(--color-text-muted); }
.mega-menu__section--tags { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.mega-menu__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mega-menu__tag-chip { padding: 6px 12px; font-size: 0.8rem; }
.mega-menu__tag-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.mega-menu__cat--skeleton { pointer-events: none; }
.mega-menu__cat--skeleton .mega-menu__cat-text { flex: 1; }

.header-search {
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  min-width: 220px;
}
.header-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  flex: 1;
  color: var(--color-text);
}
.header-search button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--color-text);
}

@media (max-width: 860px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    flex-direction: column;
    padding: 12px 20px 16px;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    gap: 4px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 150;
  }
  .main-nav.open { display: flex; }
  .main-nav > a { padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
  .main-nav > a:last-of-type { border-bottom: none; }
  .main-nav .mobile-nav-search { display: flex; order: -1; margin-bottom: 8px; }
  .header-search { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; }
  .header-inner { position: relative; }

  /* Mega-menu collapses into an inline accordion under "Categories" on mobile */
  .nav-item.has-mega {
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
  }
  .nav-item.has-mega > a { flex: 1; padding: 12px 4px; border-bottom: none; }
  .mega-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 12px 8px; }
  .mega-caret { display: none; }
  .mega-menu {
    display: none;
    position: static;
    width: 100%;
    max-width: none;
    margin: 0 0 10px;
    box-shadow: none;
    border: none;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .nav-item.has-mega.open .mega-menu { display: block; }
  .mega-menu__inner { padding: 4px 4px 14px; }
  .mega-menu__grid { grid-template-columns: 1fr; }
  .mega-menu__header-row { margin-bottom: 10px; }
}

/* Mobile in-menu search (only rendered inside the hamburger dropdown below 860px) */
.mobile-nav-search {
  display: none;
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
}
.mobile-nav-search input { border: none; background: transparent; outline: none; font-size: 0.9rem; flex: 1; color: var(--color-text); min-width: 0; }
.mobile-nav-search button { background: var(--color-primary); color: #fff; border: none; border-radius: 50%; width: 34px; height: 34px; flex: 0 0 34px; cursor: pointer; }

/* ---------- Header / Footer boot skeleton ----------
   Static markup rendered inside <header>/<footer> in the raw HTML so visitors
   see a lightweight placeholder immediately on first paint, before the JS
   bundle (marked.js, ContentStore, layout.js, etc.) has finished downloading
   and executing. renderLayout() overwrites this markup with the real header
   and footer as soon as it runs, and reruns after ContentStore.init() with
   live data — this is just the "before either of those has happened yet" state. */
.header-skeleton-nav { display: flex; align-items: center; gap: 20px; flex: 1; }
.header-skeleton-nav .skeleton--line { margin: 0; height: 16px; }
.header-skeleton-search { display: block; width: 220px; height: 36px; border-radius: 999px; flex-shrink: 0; }
.header-skeleton-toggle { display: none; width: 44px; height: 44px; border-radius: 8px; margin-left: auto; }
@media (max-width: 860px) {
  .header-skeleton-nav, .header-skeleton-search { display: none; }
  .header-skeleton-toggle { display: block; }
}
.footer-inner--skeleton { align-items: start; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
  color: #fff;
  padding: 64px 0 56px;
  text-align: center;
}
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 0.4em; }
.hero p { font-size: 1.1rem; opacity: 0.92; max-width: 640px; margin: 0 auto 28px; }
.hero-search {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  background: #fff;
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  box-shadow: var(--shadow-lg);
}
.hero-search input { flex: 1; border: none; outline: none; font-size: 1rem; color: var(--color-text); min-width: 0; }
.hero-search button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 420px) {
  .hero-search { padding: 6px 6px 6px 16px; }
  .hero-search button { padding: 12px 18px; font-size: 0.9rem; }
}

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-header h2 { font-size: 1.75rem; font-weight: 800; }
.section-header p.subtitle { color: var(--color-text-muted); margin: 4px 0 0; }
.section-header a { color: var(--color-primary); font-weight: 600; font-size: 0.95rem; }

/* ---------- Grids & Cards ---------- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .posts-grid { grid-template-columns: 1fr; } }

.post-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__image-link { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
.post-card__image { width: 100%; height: 100%; object-fit: cover; }
.post-card__category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.post-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.post-card__title { font-size: 1.15rem; margin-bottom: 8px; }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__desc { color: var(--color-text-muted); font-size: 0.92rem; flex: 1; }
.post-card__meta {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  margin-top: 8px;
}
.post-card__meta i { margin-right: 4px; }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, #eceef2 25%, #f5f6f9 37%, #eceef2 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 6px; }
.skeleton--image { aspect-ratio: 16/10; border-radius: 0; }
.skeleton--line { height: 12px; margin: 8px 0; }
.skeleton--icon { width: 52px; height: 52px; border-radius: 14px; }
.skeleton--chip { display: inline-block; width: 100px; height: 26px; border-radius: 999px; }
.skeleton--tag-chip { display: inline-block; height: 38px; border-radius: 999px; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Skeleton state helpers for cards built with real components */
.post-card--skeleton, .featured-card--skeleton, .category-card--skeleton { pointer-events: none; }
.category-card--skeleton { display: flex; flex-direction: column; }
.category-card--skeleton .skeleton--line { margin: 8px 0; }
.category-card--skeleton .category-card__footer { margin-top: auto; }

/* Broken-image fallback (shown instead of a broken-icon when a source 404s) */
.post-card__image-link, .featured-card__image-link {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}
img.img-fallback { min-height: 100%; }

/* Featured / hero grid */
.featured-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
@media (max-width: 860px) { .featured-grid { grid-template-columns: 1fr; } }
.featured-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.featured-card__image-link { display: block; aspect-ratio: 16/9; overflow: hidden; }
.featured-card__image-link img { width: 100%; height: 100%; object-fit: cover; }
.featured-card__body { padding: 22px; }
.featured-card__category {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.featured-card h3 { font-size: 1.3rem; }
.featured-side { display: flex; flex-direction: column; gap: 20px; }
.featured-side .featured-card { flex-direction: row; }
.featured-side .featured-card__image-link { flex: 0 0 40%; aspect-ratio: auto; }
.featured-side .featured-card__body { flex: 1; padding: 16px; }
.featured-side .featured-card h3 { font-size: 1rem; }
@media (max-width: 640px) { .featured-side .featured-card { flex-direction: column; } .featured-side .featured-card__image-link { flex: none; aspect-ratio: 16/9; } }

/* ---------- Category cards ---------- */
.categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .categories-grid { grid-template-columns: 1fr; } }
.category-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--accent, var(--color-primary));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: block;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-card__body { padding: 22px 26px 26px; }
/* Indexed image placeholder shown above each category card (see IMAGE_PROMPTS.md
   for the index → prompt mapping; drop the generated files into /img/ named
   category-01.jpg … category-13.jpg to fill these in). Uses a plain CSS
   background-image with a gradient fallback so a not-yet-generated image
   never shows a broken-image icon — just a soft brand-colored placeholder
   with the icon centered on it until the real photo lands. */
.category-card__image {
  position: relative;
  height: 140px;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, white) 0%, color-mix(in srgb, var(--accent) 8%, white) 100%), var(--card-image, none);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.category-card__image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.18) 100%);
}
.category-card__icon {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 14px rgba(16,24,40,0.14);
}
.category-card h3 { font-size: 1.15rem; }
.category-card p { color: var(--color-text-muted); font-size: 0.9rem; }
.category-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 8px; }
.category-card__count { font-size: 0.82rem; color: var(--color-text-muted); }
.category-card--skeleton .category-card__image { background-image: none; }

/* CPM badges */
.cpm-badge { font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.cpm-badge--very-high { background: #fee2e2; color: #b91c1c; }
.cpm-badge--high { background: #fef3c7; color: #92400e; }
.cpm-badge--medium-high { background: #dbeafe; color: #1d4ed8; }
.cpm-badge--medium { background: #e0e7ff; color: #4338ca; }
.cpm-badge--low { background: #f1f5f9; color: #475569; }

/* ---------- Geo personalization badge ---------- */
.geo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0 auto 22px;
  max-width: fit-content;
}
.geo-badge i { color: #fbbf24; }

/* ---------- CPM ranges by country table ---------- */
.country-cpm-table-wrap {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.country-cpm-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.country-cpm-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.country-cpm-row td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  vertical-align: middle;
}
.country-cpm-row:last-child td { border-bottom: none; }
.country-cpm-row--active { background: color-mix(in srgb, var(--color-primary) 6%, white); }
.country-cpm-row__country { display: flex; align-items: center; gap: 10px; font-weight: 700; white-space: nowrap; }
.country-cpm-row__flag { font-size: 1.2rem; }
.country-cpm-row__you {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.country-cpm-note { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 14px; }

/* ---------- Tags ---------- */
.tags-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.tag-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.tag-chip:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

/* ---------- Sidebar layout (category/tag/search/post pages) ---------- */
.content-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 940px) { .content-layout { grid-template-columns: 1fr; } }
.sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 90px; min-width: 0; }
@media (max-width: 940px) {
  .sidebar { position: static; top: auto; }
}
.sidebar-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.sidebar-card h4 { font-size: 1.05rem; margin-bottom: 14px; }
.sidebar-list { display: flex; flex-direction: column; gap: 12px; }
.sidebar-list a { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sidebar-list a:hover { color: var(--color-primary); }
.sidebar-list a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sidebar-list a .cpm-badge { flex-shrink: 0; }

/* ---------- Page header banner ---------- */
.page-banner {
  padding: 48px 0 36px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumbs { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 12px; }
.breadcrumbs a { color: var(--color-primary); }
.page-banner h1 { font-size: 2rem; font-weight: 800; }
.page-banner p { color: var(--color-text-muted); max-width: 700px; }
.page-banner-icon {
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; margin-bottom: 16px;
}

/* ---------- Hero banner w/ animated background image (category / tag / post pages) ----------
   Markup pattern:
   <section class="page-banner page-banner--hero" style="--hero-image:url('img/category-01.jpg');--hero-accent:#2563eb">
     <div class="hero-bg-layer" aria-hidden="true"></div>
     <div class="hero-bg-overlay" aria-hidden="true"></div>
     <div class="container">...real content...</div>
   </section>
   The background image is a plain CSS background-image (not an <img> tag), so a
   missing/placeholder file degrades gracefully to the solid gradient overlay —
   no broken-image icon is ever shown while real photos are being sourced. */
.page-banner--hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 48px;
  border-bottom: none;
  color: #fff;
  isolation: isolate;
}
.page-banner--hero .hero-bg-layer {
  position: absolute;
  inset: 0;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 5s cubic-bezier(0.16, 0.7, 0.3, 1), filter 0.4s ease;
  z-index: 0;
}
.page-banner--hero:hover .hero-bg-layer { transform: scale(1.16); }
.page-banner--hero .hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hero-accent, #2563eb) 78%, #0b1030 22%) 0%, rgba(10, 12, 28, 0.88) 100%);
  z-index: 1;
  transition: opacity 0.4s ease;
}
.page-banner--hero:hover .hero-bg-overlay { opacity: 0.92; }
.page-banner--hero .container { position: relative; z-index: 2; }
.page-banner--hero .breadcrumbs { color: rgba(255,255,255,0.75); }
.page-banner--hero .breadcrumbs a { color: #fff; }
.page-banner--hero h1 { color: #fff; }
.page-banner--hero p { color: rgba(255,255,255,0.88); }
.page-banner--hero .cpm-badge { box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.page-banner--hero .page-banner-icon {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
}
/* Compact variant used on the article/post page — shorter, sits above the
   article's own title block instead of replacing it. */
.page-banner--hero.page-banner--compact { padding: 34px 0; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85); margin-bottom: 10px;
}
@media (max-width: 640px) {
  .page-banner--hero { padding: 44px 0 32px; }
  .page-banner--hero.page-banner--compact { padding: 26px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-banner--hero .hero-bg-layer { transition: none; }
  .page-banner--hero:hover .hero-bg-layer { transform: scale(1.06); }
}

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.page-btn {
  min-width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 600;
}
.page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-muted); }
.empty-state i { font-size: 2.4rem; margin-bottom: 12px; display: block; }

/* ---------- Filters bar ---------- */
.filters-bar {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px;
  align-items: center;
}
.filters-bar select, .filters-bar input {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--color-surface);
}
.results-count { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 20px; }

/* ---------- "Last Verified" freshness stamp (CONTENT_TRICKS.md #1) ---------- */
.freshness-stamp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #166534;
  margin: 0 auto 28px;
  max-width: 780px;
}
.freshness-stamp i { margin-top: 2px; color: #16a34a; }
.freshness-stamp strong { font-weight: 700; }

/* ---------- Article / Post page ---------- */
.article-header { max-width: 780px; margin: 0 auto 32px; text-align: left; }
.article-category-badge {
  display: inline-block; background: var(--color-primary); color: #fff;
  font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  text-transform: uppercase; margin-bottom: 14px;
}
.article-header h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; margin-bottom: 16px; }
.article-meta { display: flex; gap: 20px; flex-wrap: wrap; color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.article-meta span { display: flex; align-items: center; gap: 6px; }
.article-cover { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16/8; object-fit: cover; margin-bottom: 8px; }

.article-body {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: #262a38;
}
.article-body h2 { font-size: 1.5rem; margin-top: 2em; font-weight: 800; }
.article-body h3 { font-size: 1.2rem; margin-top: 1.6em; font-weight: 700; }
.article-body p { margin-bottom: 1.2em; }
.article-body ul, .article-body ol { margin-bottom: 1.2em; padding-left: 1.4em; }
.article-body li { margin-bottom: 0.5em; }
.article-body blockquote {
  border-left: 4px solid var(--color-primary);
  background: #eef2ff;
  padding: 14px 20px;
  border-radius: 0 8px 8px 0;
  margin: 1.6em 0;
  color: #333;
}
.article-body code { background: #eef0f4; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.article-body pre { background: #1a1d29; color: #f4f4f5; padding: 16px; border-radius: 10px; overflow-x: auto; margin-bottom: 1.4em; }
.article-body pre code { background: none; padding: 0; color: inherit; }
.article-body img { border-radius: var(--radius-md); margin: 1.4em 0; }
.article-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.6em; }
.article-body th, .article-body td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; font-size: 0.92rem; }
.article-body th { background: #f2f4f8; }
.article-body a { color: var(--color-primary); text-decoration: underline; }
.article-body hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }

.article-tags { max-width: 780px; margin: 32px auto 0; display: flex; gap: 10px; flex-wrap: wrap; }
.article-tags a {
  font-size: 0.82rem; font-weight: 600; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px;
}
.article-tags a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.related-posts { max-width: 780px; margin: 48px auto 0; }
.related-posts h3 { font-size: 1.3rem; margin-bottom: 20px; }

.in-content-ad { max-width: 780px; margin: 2.4em auto; }

/* ---------- Ads ---------- */
.ad-unit { text-align: center; }
.ad-unit__label {
  display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 8px; font-weight: 700;
}
.ad-placeholder {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--color-text-muted);
  background: repeating-linear-gradient(45deg, #f4f5f8 0 10px, #eef0f4 10px 20px);
  width: 100%;
  font-size: 0.85rem;
  font-weight: 600;
}
.ad-placeholder i { font-size: 1.6rem; opacity: 0.6; }
.ad-placeholder--leaderboard { min-height: 90px; }
.ad-placeholder--rectangle { min-height: 250px; }
.ad-placeholder--inContent { min-height: 200px; }
.ad-placeholder--sidebar { min-height: 300px; }
.ad-slot-top { padding: 20px 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.ad-slot-bottom { padding: 32px 0; }

/* ---------- Footer ---------- */
#site-footer { background: #12141c; color: #c6c9d4; margin-top: 40px; }
.footer-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 56px 20px 28px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
}
@media (max-width: 780px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; } }
#site-footer .brand { color: #fff; margin-bottom: 12px; }
.footer-brand p { font-size: 0.88rem; color: #9297a8; }
.footer-col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 0.88rem; color: #9297a8; margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 20px; text-align: center; font-size: 0.82rem; color: #767b8c;
}

/* ---------- Static legal pages ---------- */
.static-page { max-width: 780px; margin: 0 auto; padding: 48px 0 80px; }
.static-page h1 { font-size: 2rem; margin-bottom: 0.6em; }
.static-page h2 { font-size: 1.3rem; margin-top: 1.6em; }
.static-page p, .static-page li { color: var(--color-text-muted); }

/* ---------- Social Share ---------- */
.share-inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.share-label { font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); }
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg); border: 1px solid var(--color-border);
  color: var(--color-text); cursor: pointer; font-size: 0.95rem;
  transition: all 0.2s;
}
.share-btn:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share-fb:hover { background: #1877f2; }
.share-x:hover { background: #000; }
.share-li:hover { background: #0a66c2; }
.share-wa:hover { background: #25d366; }
.share-pin:hover { background: #e60023; }
.share-copy.copied { background: #059669; color: #fff; border-color: transparent; }

/* ---------- Reading progress bar ---------- */
#reading-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 999; transition: width 0.1s ease-out;
}

/* ---------- Scroll to top ---------- */
#scroll-to-top-btn {
  position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--color-primary); color: #fff; border: none;
  font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: all 0.25s ease; z-index: 200;
}
#scroll-to-top-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#scroll-to-top-btn:hover { background: var(--color-primary-dark); }

/* ---------- Table of Contents ---------- */
.toc-list { display: flex; flex-direction: column; gap: 8px; }
.toc-link { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; padding: 4px 0; border-left: 2px solid transparent; padding-left: 10px; }
.toc-link:hover { color: var(--color-primary); border-left-color: var(--color-primary); }
.toc-level-3 { padding-left: 22px; font-weight: 500; font-size: 0.8rem; }

/* ---------- Trending list ---------- */
.trending-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.trending-item:last-child { border-bottom: none; }
.trending-rank {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--color-bg);
  color: var(--color-primary); font-weight: 800; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
}
.trending-title { font-size: 0.86rem; font-weight: 600; color: var(--color-text); }
.trending-item:hover .trending-title { color: var(--color-primary); }

/* ---------- Newsletter ---------- */
.newsletter-box {
  background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: #fff;
  text-align: center;
}
.newsletter-box h3 { font-size: 1.5rem; margin-bottom: 8px; }
.newsletter-box p { opacity: 0.92; max-width: 520px; margin: 0 auto 22px; }
.newsletter-form { display: flex; max-width: 460px; margin: 0 auto; background: #fff; border-radius: 999px; padding: 6px 6px 6px 20px; gap: 8px; }
.newsletter-form input { flex: 1; border: none; outline: none; font-size: 0.95rem; min-width: 0; }
.newsletter-form button { background: #111827; color: #fff; border: none; border-radius: 999px; padding: 12px 22px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.newsletter-success { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-weight: 600; color: #d1fae5; }
.newsletter-box.compact { padding: 26px; text-align: left; }
.newsletter-box.compact .newsletter-form { margin: 0; }
@media (max-width: 480px) {
  .newsletter-box { padding: 26px 20px; }
  .newsletter-form { flex-direction: column; background: transparent; padding: 0; gap: 10px; }
  .newsletter-form input { background: #fff; border-radius: 999px; padding: 12px 18px; }
  .newsletter-form button { width: 100%; }
  .newsletter-box.compact { display: block !important; text-align: center; }
  .newsletter-box.compact > div:first-child { text-align: center; margin-bottom: 16px; }
}

/* ---------- Footer newsletter placement ---------- */
.footer-newsletter { grid-column: 1 / -1; margin-bottom: 12px; }

/* Utility spacing */
.mt-0 { margin-top: 0 !important; }