/* ===== Generic ad slot styles (place FIRST so later overrides can win) ===== */
:root{ --ad-top-h-mobile:72px; --ad-bottom-h-mobile:60px; }
.ad-slot{
  display:block;
  margin:12px auto;
  text-align:center;
  max-width:100%;
  /* Zero-CLS base guard (never fully collapse) */
  min-height:1px;
  width:100%;
  background:rgba(0,0,0,.03)
}
.ad-fluid ins,
.ad-fluid iframe{
  display:block;
  margin:0 auto;
  max-width:100% !important;
}
.ad-fixed ins,
.ad-fixed iframe{
  display:block;
  margin:0 auto;
  max-width:none !important;
}

/* Minimum slot heights */
/* Top/bottom are fully controlled by the height clamp below */
.ad-slot--mid{min-height:280px;margin-block:24px}
.ad-slot--rail{min-height:600px}

/* Mobile-first reserved space & spacing (CLS guard) */
.ad-slot{display:block}
.ad-slot > ins.adsbygoogle{display:block;width:100%}
@media (max-width:480px){
  .ad-slot--mid{min-height:280px;margin-block:12px}
  .ad-slot--rail{display:none}
}
@media (min-width:481px) and (max-width:767.98px){
  .ad-slot--mid{min-height:280px;margin-block:16px}
  .ad-slot--rail{display:none}
}
@media (min-width:768px) and (max-width:1023.98px){
  .ad-slot--mid{min-height:280px;margin-block:16px}
  .ad-slot--rail{display:block;min-height:600px}
}
@media (min-width:1024px){
  .ad-slot--mid{min-height:280px;margin-block:18px}
  .ad-slot--rail{display:block;min-height:600px}
}

/* Removed previous mid-size override (@media max-width:1024) to keep consistent 250px reserve per spec */
@media (max-width:640px){
  /* Maintain 280px reserve for mid on small screens (zero CLS) */
  .ad-slot--mid{min-height:280px}
}

/* Reserve top banner height to avoid CLS */
@media (max-width: 639.98px){
  .ad-topbar{ min-height:120px; }
}
@media (min-width: 640px){
  .ad-topbar{ min-height:90px; }
}

/* Ensure creatives expand per slot */
.ad-slot--top .adsbygoogle,
.ad-slot--mid .adsbygoogle,
.ad-slot--bottom .adsbygoogle{display:block;width:100%}

/* ===== Ad Height Clamp (CSS-only; prevents post-load growth) =====
 * Rationale:
 * - Top bar: 100px on phones (≤640px), 120px on tablet/desktop (≥641px).
 * - Bottom:  90px on phones (≤640px), 120px on tablet/desktop (≥641px).
 * - Fixed wrapper height avoids CLS; inner content fills and is clipped.
 * - Neutralize AdSense absolute wrappers on ≥641px so creatives don’t escape.
 * - Single source of truth; no JS height writes.
 */
/* 1) Wrappers: fixed height per breakpoint, overflow hidden, neutral stacking */
.ad-topbar > .ad-slot,
.ad-slot--bottom { position: relative !important; overflow: hidden !important; z-index: auto !important; }

/* Phone ≤640px: use variables for compact visual caps */
@media (max-width:640px){
  /* No fixed height for topbar on mobile; bottom keeps compact cap */
  .ad-slot--bottom     { height: var(--ad-bottom-h-mobile) !important; min-height: var(--ad-bottom-h-mobile) !important; max-height: var(--ad-bottom-h-mobile) !important; margin-bottom: env(safe-area-inset-bottom); }
}
/* Tablet/Desktop ≥641px: top/bottom = 120px */
@media (min-width:641px){
  /* No fixed height for topbar on tablet/desktop; bottom keeps cap */
  .ad-slot--bottom { height: 120px !important; min-height: 120px !important; max-height: 120px !important; }
}

/* 2) Inner <ins>/<iframe>: fill wrapper (never exceed) */
.ad-slot iframe,
.ad-slot .adsbygoogle,
.ad-slot ins,
.ad-slot [id^="monetag"],
.ad-slot .monetag-banner,
.ad-topbar > .ad-slot .adsbygoogle,
.ad-topbar > .ad-slot iframe,
.ad-topbar > .ad-slot ins,
.ad-slot--bottom .adsbygoogle,
.ad-slot--bottom iframe,
.ad-slot--bottom ins{
  display:block !important;
  position:static !important; /* neutralize absolute placement */
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  margin:0 auto !important;
  overflow:hidden !important;
  object-fit:contain !important;
}
/* If no creative renders, collapse the wrapper to avoid blank space */
.ad-topbar > .ad-slot:empty { height: 0 !important; min-height: 0 !important; max-height: 0 !important; }

/* 3) Line-height zero to avoid extra text line space */
.ad-topbar{ line-height:0 }

/* Removed duplicate clamp blocks: unified above */

/* Footer wrapper avoids extra line-box space */
.site-footer .ad-block-bottom { line-height: 0; }

/* ===== Top bar (scrolls; NOT sticky) ===== */
.ad-topbar{
  position:relative !important; /* hard override in case any legacy sticky rules leak in */
  top:auto !important;
  margin-top:0;                 /* no blank band above the bar */
  display:block;
  width:100%;
  line-height:0; /* prevent extra line box space */
}
/* Apply visual styling only when a slot exists */
.ad-topbar:has(> .ad-slot){
  background:#f7f9fc;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
/* Make sure any generic ad-slot margin doesn’t add gaps inside the bar */
.site-header + .ad-topbar{margin-top:0 !important}
.ad-topbar > .ad-slot{
  max-width:1100px;
  margin:0 auto !important;     /* overrides the 12px .ad-slot margin */
  padding:0 18px;
  text-align:center;
  line-height:0; /* prevent extra line box space */
}
/* Kill inner margins that iframes/ins sometimes carry */
.ad-topbar .adsbygoogle,
.ad-topbar iframe{display:block;margin:0 !important}

/* If a top bar exists, don’t add the usual main offset */
.ad-topbar ~ main{margin-top:0 !important}

/* (Removed legacy max-height cap on .ad-topbar; wrapper clamps height now) */
/* (Removed conflicting small-screen expansion: keep absolute containment on mobile) */
@media (max-width:640px){
  /* Sticky only when armed to avoid initial push */
  html.arm-sticky-topbar .ad-topbar { position: sticky !important; top: 0; left: 0; right: 0; width: 100vw; z-index: 1200; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  /* Only add top offset when an .ad-topbar actually precedes the content */
  html.arm-sticky-topbar .ad-topbar ~ main,
  html.arm-sticky-topbar .ad-topbar ~ .page-main {
    margin-top: var(--ad-top-h-mobile) !important; /* Adjust if your topbar ad is taller */
  }

}

/* Defensive: prevent overly tall creatives on small screens */
.ad-slot{overflow:hidden}
.ad-slot iframe, .ad-slot > ins.adsbygoogle{max-height:600px !important;overflow:hidden !important}
@media (max-width:900px){
  .ad-slot iframe, .ad-slot > ins.adsbygoogle{max-height:300px !important}
}
/* (Removed conflicting small-screen overflow/height relaxations for top/bottom) */

/* Small-screen specific: ensure topbar ad shows fully (overrides generic .ad-slot overflow) */
/* (Removed small-screen block that overrode topbar containment) */

/* Footer ad wrapper - ensure visible and not collapsed */
.ad-block-bottom{display:block;width:100%;padding-top:8px;padding-bottom:8px}
.site-footer .ad-slot{margin:12px auto}

/* Collapsible state for empty/no-fill slots */
.ad-slot.is-empty{ display:none !important; height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; }

/* Oversize creative scaling (mobile fallback for stubborn 300x250, etc.) */
@media (max-width:640px){
  .ad-slot.is-oversize > * { transform-origin:center center; pointer-events:auto; }
  .ad-topbar > .ad-slot.is-oversize > * { transform: scale(calc(var(--ad-top-h-mobile) / var(--creative-h, 250px))); }
  .ad-slot--bottom.is-oversize > * { transform: scale(calc(var(--ad-bottom-h-mobile) / var(--creative-h, 250px))); }
}

/* Debug placeholder for missing slots */
.ad-debug{border:1px dashed var(--border);padding:10px;border-radius:8px;color:var(--muted);background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}

/* ===== Rails / page-shell grid ===== */
:root{--rail-width:160px}
/* FIX: rails were hidden by overly strict breakpoint (1280px + hover/pointer).
   Broaden to >=1024px and drop input modality filters so rails return on standard desktop & tablets. */
@media (min-width:1024px){
  .page-shell{
    display:grid;
    grid-template-columns:var(--rail-width) minmax(0,1fr) var(--rail-width);
    column-gap:16px;
    align-items:start;
    overflow:visible;
  }
  .page-main{min-width:0}
  .ad-rail{display:block;position:sticky;top:80px;width:var(--rail-width);text-align:center}
  .ad-rail .ad-slot{min-height:600px}
  /* Mid ad slot: allow 280px on desktop */
  .ad-slot--mid{min-height:280px}
}
/* Defensive override */
@media (min-width:1024px){.ad-rail{display:block !important}}
@media (max-width:1023.98px){.ad-rail{display:none !important}}

/* Tools grid “inline ad card” container */
.tools-grid > .tools-grid-ad{width:100%}
.tools-grid > .tools-grid-ad .ad-slot,
.tools-grid > .tools-grid-ad .ad-slot iframe,
.tools-grid > .tools-grid-ad .ad-slot .adsbygoogle{max-width:100% !important}
.tools-grid > .tools-grid-ad .ad-slot{overflow:hidden}

/* Visibility helpers for breakpoint-specific ad insertions */
.only-desktop, .only-tablet, .only-mobile { display: none; }
@media (min-width:1024px){ .only-desktop{display:block;} }
@media (min-width:640px) and (max-width:1023.98px){ .only-tablet{display:block;} }
@media (max-width:639.98px){ .only-mobile{display:block;} }


/* Keep stacking neutral */
.ad-slot,.ad-rail{overflow:hidden}
.ad-topbar,.ad-slot,.ad-slot *{z-index:auto !important}

/* Remove blur when mobile menu is open – dim only */
.nav-backdrop{backdrop-filter:none !important}

/* Dark theme */
html[data-theme="dark"] .ad-topbar,
html[data-theme="dark"] .ad-rail{
  background:#0a1427;
  border-color:#1b263b;
}

/* (Removed old desktop caps in favor of explicit fixed heights above) */

/* Desktop/tablet: neutralize AdSense absolute positioning in topbar so size stays constrained */
@media (min-width:641px){
  .ad-topbar div[id^="aswift_"],
  .ad-topbar div[id$="_host"],
  .ad-topbar iframe[id^="aswift_"],
  .ad-topbar ins.adsbygoogle,
  .ad-topbar .adsbygoogle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .ad-topbar [style*="position:absolute"]{ position: static !important; left: auto !important; right: auto !important }
  /* Bottom slot: neutralize absolute wrappers too */
  .ad-slot--bottom div[id^="aswift_"],
  .ad-slot--bottom div[id$="_host"],
  .ad-slot--bottom iframe[id^="aswift_"],
  .ad-slot--bottom ins.adsbygoogle,
  .ad-slot--bottom .adsbygoogle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .ad-slot--bottom [style*="position:absolute"]{ position: static !important; left: auto !important; right: auto !important }
}

/* (Removed previous tablet caps block in favor of fixed-height clamps above) */

/* Hide rails and remove reservations on tablets/phones */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  .ad-rail,
  .rail-left,
  .rail-right,
  .ads-rail,
  .ads-rail-top,
  .ads-rail-bottom {
    display: none !important;
    visibility: hidden !important;
  }

  /* Remove reserved space used for CLS guards on small viewports */
  .ad-rail-placeholder,
  .ads-rail-placeholder,
  .ads--reserve-rail,
  .ads-reserve-top,
  .ads-reserve-bottom {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* If content columns add margins to make room for rails, reset them */
  .has-rails-left  { margin-left: 0 !important; }
  .has-rails-right { margin-right: 0 !important; }
  .has-rails       { margin-left: 0 !important; margin-right: 0 !important; }
}

/* === Main site: remove top ad/rail/hero reserves on tablets/phones === */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  /* 2a) Hide/zero any top ad/rail containers */
  .ads-reserve-top,
  .ads--reserve-top,
  .ads-rail-top,
  .ad-top,
  .ad-leaderboard,
  .ad-slot--top,
  .ad-slot--leaderboard,
  .rail-top,
  .ad-rail-placeholder-top,
  .hero-spacer,
  .header-spacer,
  .sticky-spacer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2b) Collapse grid row that reserved space for rails/hero */
  .page-shell { display: block !important; }
  .page-shell .page-main {
    margin-top: 0 !important;
    padding-top: clamp(8px, 1.2vh, 16px) !important;
  }

  /* 2c) If content wrapper adds offset when rails are present, reset it */
  .page-shell.has-rails,
  .page-shell.has-top-rail {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* === MAIN SITE: kill remaining top reserve on tablets/phones (except .ad-topbar) === */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  /* A) collapse non-ad top reserves on small screens */
  .ads-reserve-top,
  .ad-slot--top:empty,
  .ad-slot--leaderboard:empty,
  .ads-rail-top,
  .hero-spacer,
  .header-spacer,
  .sticky-spacer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* B) Some pages use a grid row for top content – flatten shell on small screens */
  .page-shell { display: block !important; }
  .page-shell .page-main {
    margin-top: 0 !important;
    padding-top: clamp(8px, 1.2vh, 16px) !important;
  }

  /* C) Prevent H1/hero “margin-top collapse” creating phantom space */
  .page-main > :first-child { margin-top: 0 !important; }

  /* D) Ensure the element immediately after header never adds offset */
  .site-header + main,
  .site-header + .page-shell,
  .site-header + .page-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Desktop safety: if you need explicit reserves, add them near the topbar clamp rules. */

/* === MAIN SITE: remove sticky/top reserve on tablets/phones === */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  /* Zero common CSS variables used for top spacing */
  :root{
    --header-h: 0px !important;
    --top-reserve: 0px !important;
    --ads-top-reserve: 0px !important;
  }

  /* Nuke any layout offsets below the header */
  .site-header + main,
  .site-header + .page-shell,
  .site-header + .page-main,
  .page-shell,
  .page-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* If a sticky spacer exists, collapse it */
  .sticky-spacer,
  .header-spacer,
  .hero-spacer,
  .ads-reserve-top,
  .ad-topbar,
  .ad-slot--top,
  .ad-slot--leaderboard {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Guard against first-child margin collapsing into the body */
  .page-main > :first-child { margin-top: 0 !important; }

  /* If grid reserves a top row, flatten it */
  .page-shell { display: block !important; }
}

  /* ===== Main site: collapse any top reserve on touch devices & tablets ===== */

  /* (Tablet-targeted rules will be appended after this file.) */

/* Tablet-only runtime class applied by includes/head.php script: .is-tablet-touch
   This collapses top/hero/leaderboard space and rail reserves only on tablets
   where the script determined a touch-capable tablet experience (iPad-ish).
   Desktop touch-capable laptops should NOT receive these rules because the
   runtime detection avoids setting the class there. */
.is-tablet-touch .ad-topbar,
.is-tablet-touch .ads-reserve-top,
.is-tablet-touch .ad-slot--top,
.is-tablet-touch .ad-slot--leaderboard,
.is-tablet-touch .ads-rail-top,
.is-tablet-touch .hero-spacer,
.is-tablet-touch .header-spacer,
.is-tablet-touch .sticky-spacer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.is-tablet-touch .site-header + main,
.is-tablet-touch .site-header + .page-shell,
.is-tablet-touch .site-header + .page-main,
.is-tablet-touch .page-shell,
.is-tablet-touch .page-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.is-tablet-touch .page-main > :first-child { margin-top: 0 !important; }
.is-tablet-touch .page-shell { display: block !important; }

/* Keep the rail collapse at <=1200px for narrow viewports (phones/tablets)
   regardless of runtime class — this is width-based and already conservative. */
@media (max-width: 1200px) {
  .ads--reserve-rail,
  .ad-rail-placeholder,
  .ad-rail { display: none !important; }
  .ad-rail-placeholder { height: 0 !important; min-height: 0 !important; }
}

/* ===== Main site: iPad/tablet-only top-gap collapse ===== */
.is-tablet-touch .site-header + .page-shell,
.is-tablet-touch .site-header + .page-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Collapse the usual gap sources on tablets only */
.is-tablet-touch .ad-topbar,
.is-tablet-touch .ads-reserve-top,
.is-tablet-touch .page-hero,
.is-tablet-touch .banner-top,
.is-tablet-touch .hero-spacer,
.is-tablet-touch .header-spacer,
.is-tablet-touch .sticky-spacer,
.is-tablet-touch .ads-rail-top {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Some pages reserve a grid row for a hero/topbar */
.is-tablet-touch .page-shell {
  display: block !important;            /* flatten grid */
  padding-top: 0 !important;
}

/* Defensive: first child margin collapsing into the body */
.is-tablet-touch .page-main > :first-child { margin-top: 0 !important; }

/* Defensive: any CSS variables used as sticky offsets */
.is-tablet-touch :root {
  --header-h: 0px !important;
  --top-reserve: 0px !important;
  --ads-top-reserve: 0px !important;
}
.is-tablet-touch body { scroll-padding-top: 0 !important; }
.is-tablet-touch :target { scroll-margin-top: 0 !important; }

/* If the first node after header is a spacer, remove it on tablets */
.is-tablet-touch .site-header + .ad-topbar,
.is-tablet-touch .site-header + .ads-reserve-top,
.is-tablet-touch .site-header + .ads-rail-top,
.is-tablet-touch .site-header + .page-hero,
.is-tablet-touch .site-header + .banner-top,
.is-tablet-touch .site-header + .hero-spacer,
.is-tablet-touch .site-header + .header-spacer,
.is-tablet-touch .site-header + .sticky-spacer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ===== Topbar (always on when it renders) ===== */
.ad-topbar {
  display: block;
  margin: 0 auto;
  padding: 8px 0;           /* breathing room */
  max-width: 100%;
  text-align: center;
}
.ad-topbar:empty { display:none !important; height:0 !important; padding:0 !important; }
.ad-topbar:not(:has(.topbar-slot)) { display:none !important; height:0 !important; padding:0 !important; }