/* ==========================================================================
   SPEEDMATH - ADVERTISEMENT STYLES (Refactored & Optimized)
   AdSense slot styling with consent-aware placeholders
   ========================================================================== */

/* Import CSS Variables */
@import url('variables.css');

/* ==========================================================================
   1. BASE AD CONTAINER
   ========================================================================== */

.ad-container {
  margin: var(--space-6) auto;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  padding: 0 var(--space-4);
  transition: opacity var(--transition-base);
}

/* Ad Label (Advertisement Text) */
.ad-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
  opacity: 0.7;
}

/* ==========================================================================
   3. SPECIFIC AD SLOT TYPES
   ========================================================================== */

/* Header Banner Ad (970x90 or 728x90) */
.ad-header-banner {
  max-width: 970px;
  margin: var(--space-6) auto;
}

/* Practice Page Bottom Ad (Leaderboard) */
.ad-practice-bottom {
  max-width: 1200px;
  margin: var(--space-8) auto;
}

/* Sidebar Ad (300x250 or 300x600) */
.ad-sidebar {
  width: 100%;
  max-width: 300px;
  margin: var(--space-6) auto;
}

/* Content Inline (Smaller In-Article Ad) */
.ad-content-inline {
  max-width: 728px;
  margin: var(--space-6) auto;
}

/* ==========================================================================
   5. CONSENT-AWARE STYLING
   ========================================================================== */

/* Hide container + label when AdSense does not fill the slot */
.ad-container:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  display: none !important;
}

/* Hide label until ins is filled — prevents label floating alone */
.ad-container .ad-label {
  display: none;
}
.ad-container:has(ins.adsbygoogle[data-ad-status="filled"]) .ad-label {
  display: block;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet (960px and below) */
@media (max-width: 960px) {
  .ad-container {
    margin: var(--space-4) auto;
    padding: 0 var(--space-3);
  }

  .ad-header-banner {
    max-width: 728px;
  }
}

/* Mobile (640px and below) */
@media (max-width: 640px) {
  .ad-container {
    margin: var(--space-3) auto;
    padding: 0 var(--space-2);
  }

  /* Hide sidebar ads on mobile */
  .ad-sidebar {
    display: none;
  }

  /* Smaller label text */
  .ad-label {
    font-size: 0.65rem;
    margin-bottom: var(--space-1);
  }
}

/* ==========================================================================
   7. PRINT STYLES
   ========================================================================== */

@media print {
  .ad-container {
    display: none !important;
  }
}

/* ==========================================================================
   8. STICKY SIDE AD LAYOUT — Desktop / Large Tablet Only
   Ad divs are placed as first children of the main content element.
   Positioned absolutely relative to that element — content width NEVER changes.
   ========================================================================== */

/* Hidden by default on all screens */
.sticky-side-left,
.sticky-side-right {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px; /* Increased from 160px to utilize extra space */
  pointer-events: none; /* Pass clicks through to content beneath */
}

/* Left ad: anchored to right edge of container, going left */
.sticky-side-left {
  right: calc(100% + var(--space-4));
}

/* Right ad: anchored to left edge of container, going right */
.sticky-side-right {
  left: calc(100% + var(--space-4));
}

/* Inner ad scrolls with user via sticky */
.sticky-side-left > .ad-container,
.sticky-side-right > .ad-container {
  position: sticky;
  top: 90px;
  pointer-events: all;
}

/* Show only when viewport has enough room: content (900) + 2x(200px + 16px gap) = 1332px */
@media (min-width: 1340px) {
  .sticky-side-left,
  .sticky-side-right {
    display: block;
  }
}

/* Expand to 300px wide half-page ads on very large screens to utilize empty whitespace */
@media (min-width: 1540px) {
  .sticky-side-left,
  .sticky-side-right {
    width: 300px;
  }
}

/* Utility to hide top/banner ads on screens where sidebar ads are active */
@media (min-width: 1340px) {
  .hide-on-desktop-ads {
    display: none !important;
  }
}