/**
 * ads.css — Advertisement Container Styles
 * AI Travel Itinerary Generator
 *
 * AdSense Policy compliance:
 *  - Ads are clearly separated from content
 *  - No styling that mimics content (deceptive placement)
 *  - No overflow:hidden that clips the ad unit itself
 *  - Responsive — ads resize correctly on mobile
 */

/* ─── Base Ad Container ─────────────────────────────── */
.ad-container {
  width: 100%;
  text-align: center;
  padding: 12px 0;
  margin: 24px auto;
  overflow: visible; /* Never clip AdSense units */
}

/* Optional label above ads (recommended for transparency) */
.ad-container::before {
  content: 'Advertisement';
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #718096);
  margin-bottom: 6px;
  opacity: 0.6;
}

/* ─── Format Variants ───────────────────────────────── */
.ad-container--leaderboard {
  min-height: 90px;
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
}

.ad-container--rectangle {
  min-height: 250px;
  max-width: 336px;
  margin-left: auto;
  margin-right: auto;
}

.ad-container--native,
.ad-container--fluid {
  min-height: 150px;
  max-width: 100%;
}

/* ─── Placeholder (dev mode when AdSense not yet enabled) ── */
.ad-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.03);
  border: 2px dashed rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  padding: 24px 16px;
  min-height: 90px;
  color: #aaa;
  font-size: 0.78rem;
  font-family: var(--font-body, sans-serif);
  gap: 4px;
}

[data-theme="dark"] .ad-placeholder {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

.ad-placeholder-note {
  font-size: 0.68rem;
  opacity: 0.5;
}

/* ─── Anchor (invisible injection target) ─────────────── */
.ad-anchor {
  width: 100%;
  min-height: 0;
  overflow: visible;
}

/* ─── Mobile Responsiveness ─────────────────────────── */
@media (max-width: 768px) {
  .ad-container--leaderboard {
    min-height: 50px; /* Mobile banner */
  }
  .ad-container--rectangle {
    max-width: 100%;
    min-height: 250px;
  }
}

/* ─── Print: hide all ads ────────────────────────────── */
@media print {
  .ad-container,
  .ad-placeholder,
  .ad-anchor,
  .adsbygoogle {
    display: none !important;
  }
}