/**
 * Google AdSense Ad Styling - HTML Free Codes
 * Ensures ads are visible, responsive, and don't break layout
 */

/* In-Content Ad Container */
.ad-container-in-content {
  margin: 40px 0;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid var(--border-color, #e5e7eb);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f8fafc);
  clear: both;
}

.ad-container-in-content::before {
  content: 'Advertisement';
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Responsive Ad - Works on all devices */
.adsbygoogle-in-content {
  display: block !important;
  margin: 0 auto !important;
  min-height: 250px; /* Prevent layout shift */
  max-width: 100%;
  width: 100% !important;
  text-align: center;
}

/* Mobile optimization */
@media (max-width: 768px) {
  /* Desktop/tablet ads - ensure they're hidden */
  .desktop-tablet-ad {
    display: none !important;
    visibility: hidden !important;
  }

  /* Mobile ads - make visible and centered */
  .mobile-ad {
    margin: 24px auto;
    padding: 20px 0;
    display: block !important;
    width: 100%;
    text-align: center;
  }

  .adsbygoogle-in-content {
    min-height: 200px;
  }

  .ad-container-in-content::before {
    font-size: 11px;
    margin-bottom: 8px;
    text-align: center;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1023px) {
  .ad-container-in-content {
    margin: 32px 0;
    padding: 18px 0;
  }
}

/* Sidebar Ad - Desktop only - Fixed position to not break layout */
.sticky-adsense {
  position: fixed;
  right: 20px; /* 20px from right edge */
  top: 100px; /* Below header */
  width: 300px;
  min-height: 600px;
  z-index: 100;
  display: block; /* Show by default on desktop */
}

.sticky-adsense .adsbygoogle {
  width: 300px !important;
  height: 600px !important;
  display: block !important;
}

/* Hide on screens below 1440px to match inline script threshold */
@media (max-width: 1439px) {
  .sticky-adsense {
    display: none !important;
  }
}

/* Show on wide desktop screens (≥1440px) */
@media (min-width: 1440px) {
  .sticky-adsense {
    display: block !important;
  }
}


/* Prevent ads from breaking layout */
.adsbygoogle {
  overflow: hidden;
}

/* Mobile: ensure ads fit properly */
@media (max-width: 768px) {
  .adsbygoogle-in-content {
    max-width: 100% !important;
    overflow: hidden;
  }

  .adsbygoogle-in-content iframe {
    max-width: 100% !important;
    width: 100% !important;
  }

  .adsbygoogle-in-content ins {
    max-width: 100% !important;
  }
}

/* Dark theme support for ad containers */
[data-theme="dark"] .ad-container-in-content,
[data-theme="dark-orange"] .ad-container-in-content {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .ad-container-in-content::before,
[data-theme="dark-orange"] .ad-container-in-content::before {
  color: var(--text-secondary);
}

/* Ensure ads don't interfere with page flow */
/* Removed width: 100% to fix content centering issue */
/* .lesson-content .ad-container-in-content {
  width: 100%;
} */

/* Prevent CLS (Cumulative Layout Shift) */
.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* Show/Hide ads based on device */
/* Desktop and Tablet: Show responsive ads, hide mobile ads */
@media (min-width: 769px) {
  .mobile-ad {
    display: none !important;
    visibility: hidden !important;
  }
  .desktop-tablet-ad {
    display: block !important;
    visibility: visible !important;
  }
}