/* ═══════════════════════════════════════════════════════════════
   FinancialDataTools.com — Ad System Styles  (assets/ads.css)
   All ad slot sizing, placeholder visuals, and toggle UI live
   here. Do NOT add ad styles to global.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base wrapper behaviour ────────────────────────────────────── */
.ad-wrap {
  display: block;
  margin: 12px 0;
  text-align: center;
}
.ad-wrap.is-empty {
  display: none !important;
}

/* When placeholder audit mode is active, keep empty wrappers visible */
body.ad-placeholders-visible .ad-wrap.is-empty {
  display: block !important;
}
body.ad-placeholders-visible .ad-slot.is-empty {
  display: flex !important;
}

.ad-label {
  font-size: .60rem;
  color: var(--text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .20rem;
  opacity: .55;
}

.ad-slot {
  width: 100%;
  display: block;
  background: transparent;
  overflow: hidden;
}
.ad-slot.is-empty {
  display: none;
}

/* ── Top leaderboard: 970x90 desktop / 320x50 mobile ─────────── */
.ad-slot-top {
  min-height: 60px;
  max-width: 728px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .ad-slot-top {
    min-height: 42px;
    max-width: 320px;
  }
}

/* ── Content / inline slots (all 728x280) ─────────────────────── */
.ad-slot-home-mid,
.ad-slot-home-lower,
.ad-slot-category-mid,
.ad-slot-category-bottom,
.ad-slot-blog-inline-1,
.ad-slot-blog-inline-2,
.ad-slot-blog-bottom,
.ad-slot-tool-lower {
  min-height: 120px;
  max-width: 728px;
  margin: 0 auto;
}

/* ── Tool inline: compact leaderboard (970x90) ─────────────────── */
.ad-slot-tool-inline {
  min-height: 48px;
  max-width: 728px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .ad-slot-tool-inline {
    min-height: 42px;
    max-width: 320px;
  }
}

/* ── Sidebar (300x600, defined for future use) ─────────────────── */
.ad-slot-sidebar-sticky {
  min-height: 600px;
  width: 300px;
  max-width: 300px;
}

/* ── Tool page engagement gating ──────────────────────────────── */
/* tool-inline and tool-lower stay hidden until user engages.      */
/* sidebar-sticky is never gated and always renders.               */
.ad-wrap.ad-pre-engagement,
.ad-wrap.ad-pre-engagement-deep {
  display: none !important;
}

/* In placeholder/audit mode keep gated slots visible but dimmed   */
body.ad-placeholders-visible .ad-wrap.ad-pre-engagement,
body.ad-placeholders-visible .ad-wrap.ad-pre-engagement-deep {
  display: block !important;
  opacity: 0.50;
}

/* ── Placeholder box visual ────────────────────────────────────── */
.ad-slot[data-ad-filled="1"] {
  display: flex;
  align-items: stretch;
}

/* Subtle placeholder — identifiable for QA but low visual weight  */
.ad-debug-placeholder {
  width: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed rgba(120, 140, 120, .32);
  border-radius: 6px;
  background: rgba(120, 140, 120, .04);
  color: rgba(160, 175, 160, .55);
  padding: 10px 12px;
  box-sizing: border-box;
  font-size: .75rem;
  line-height: 1.50;
  font-family: inherit;
  letter-spacing: .01em;
}
.ad-debug-placeholder strong {
  display: block;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  opacity: .70;
  margin-bottom: .25rem;
}
.ad-debug-placeholder code {
  font-family: monospace;
  font-size: .85em;
  background: rgba(120, 140, 120, .08);
  padding: .04em .28em;
  border-radius: 3px;
  opacity: .80;
}

/* ── Ad Toggle Switch (owner dev / audit tool) ─────────────────── */
#fdt-ad-toggle-wrap {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(6, 9, 6, .92);
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: .45rem .85rem .45rem .7rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
  font-size: .72rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
#fdt-ad-toggle-wrap:hover {
  border-color: var(--green);
  color: var(--text);
}

.fdt-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.fdt-toggle-track.on {
  background: var(--green);
  border-color: var(--green);
}
.fdt-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.fdt-toggle-track.on .fdt-toggle-knob {
  transform: translateX(16px);
}

/* Tool page: right sidebar ad layout */
.tool-ad-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 0 16px;
  box-sizing: border-box;
}

.tool-ad-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.tool-ad-sidebar {
  width: 260px;
  min-width: 260px;
  align-self: start;
  /* Add breathing room so sidebar never kisses the tool content */
  padding-left: 4px;
}

.tool-ad-sidebar .ad-slot {
  width: 260px;
  max-width: 260px;
}

.tool-ad-sidebar .ad-slot-sidebar-sticky {
  position: sticky;
  top: 88px;
  min-height: 250px;
}

/* Desktop-only ads: hide all ad containers on mobile/tablet viewports */
@media (max-width: 1100px) {
  .ad-wrap,
  .ad-slot,
  .tool-ad-sidebar,
  .ad-slot-sidebar-sticky {
    display: none !important;
  }

  .tool-ad-layout {
    grid-template-columns: 1fr !important;
  }

  .tool-ad-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}