/* ═══════════════════════════════════════════════════════════════════
   MUSAFIR SEDUNIA — ADSENSE INTEGRATION
   ─────────────────────────────────────────────────────────────────
   File: musafir-adsense.css
   
   6 Ad Slots with responsive behavior:
   1. Header Leaderboard (below header, above content)
   2. In-Content (after paragraph 3 in articles)
   3. Sidebar Sticky (right column, 300x250 + 300x600)
   4. Between Sections (homepage, between category sections)
   5. Pre-Footer (above newsletter/footer)
   6. Mobile Sticky Bottom (mobile only, 320x100)
   
   Integration: Replace placeholder divs with actual AdSense code.
   The shortcode [musafir_ad slot="..." size="..."] generates these.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ SLOT 1: HEADER LEADERBOARD ═══
   Location: Below header/trending bar, above first content section
   Desktop: 728x90 or responsive
   Mobile: 320x50 or responsive
   RPM estimate: $0.50–1.50 */
.musafir-ad-slot--header-leaderboard {
    text-align: center;
    padding: 16px 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
}
.musafir-ad-slot--header-leaderboard .ad-container {
    max-width: 728px;
    margin: 0 auto;
    min-height: 90px;
}
@media (max-width: 768px) {
    .musafir-ad-slot--header-leaderboard .ad-container {
        max-width: 320px;
        min-height: 50px;
    }
}

/* ═══ SLOT 2: IN-CONTENT ═══
   Location: After paragraph 3 in single post articles
   Desktop + Mobile: Responsive
   RPM estimate: $1.00–3.00 (highest performing slot) */
.musafir-ad-slot--in-content {
    margin: 28px 0;
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    text-align: center;
}
.musafir-ad-slot--in-content .ad-container {
    min-height: 100px;
}
/* Label above ad */
.musafir-ad-slot--in-content::before {
    content: 'Iklan';
    display: block;
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* ═══ SLOT 3: SIDEBAR ═══
   Location: Right sidebar on archives + single posts
   Desktop: 300x250 (medium rectangle) + 300x600 (half page)
   Mobile: Hidden (sidebar collapses)
   RPM estimate: $0.80–2.00 */
.musafir-ad-slot--sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}
.musafir-ad-slot--sidebar .ad-container {
    min-height: 250px;
    margin-bottom: 24px;
}
.musafir-ad-slot--sidebar-tall .ad-container {
    min-height: 600px;
}
@media (max-width: 1024px) {
    .musafir-ad-slot--sidebar { position: static; }
}

/* ═══ SLOT 4: BETWEEN SECTIONS ═══
   Location: Between homepage category sections
   Desktop: Responsive leaderboard
   Mobile: Responsive
   RPM estimate: $0.50–1.00 */
.musafir-ad-slot--between-sections {
    padding: 20px 0;
    text-align: center;
}
.musafir-ad-slot--between-sections .ad-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 100px;
}

/* ═══ SLOT 5: PRE-FOOTER ═══
   Location: Above newsletter or footer section
   Desktop: 970x250 or responsive
   Mobile: 320x100 or responsive
   RPM estimate: $0.30–0.80 */
.musafir-ad-slot--pre-footer {
    padding: 20px 0;
    background: var(--light-gray);
    border-top: 1px solid var(--border-light);
    text-align: center;
}
.musafir-ad-slot--pre-footer .ad-container {
    max-width: 970px;
    margin: 0 auto;
    min-height: 100px;
}
@media (max-width: 768px) {
    .musafir-ad-slot--pre-footer .ad-container {
        max-width: 320px;
        min-height: 100px;
    }
}

/* ═══ SLOT 6: MOBILE STICKY BOTTOM ═══
   Location: Fixed bottom of screen (mobile only)
   Size: 320x100 or 320x50
   Only shows when bottom nav is NOT visible (scroll down)
   RPM estimate: $0.40–1.00 */
.musafir-ad-slot--mobile-sticky {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    z-index: 998; /* Below bottom nav (999) */
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 8px 0;
    text-align: center;
}
@media (max-width: 768px) {
    .musafir-ad-slot--mobile-sticky { display: block; }
    /* When mobile sticky ad is shown, add bottom padding */
    body.has-sticky-ad { padding-bottom: 120px; }
}

/* ═══ ADSENSE CODE TEMPLATE ═══
   Replace the ad-placeholder divs in templates with:

   <div class="musafir-ad-slot--[slot-name]">
       <div class="ad-container">
           <ins class="adsbygoogle"
                style="display:block"
                data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
                data-ad-slot="XXXXXXXXXX"
                data-ad-format="auto"
                data-full-width-responsive="true"></ins>
           <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
       </div>
   </div>

   For sidebar 300x250:
   data-ad-format="rectangle"
   style="display:inline-block;width:300px;height:250px"
*/

/* ═══ AD DENSITY RULES ═══
   Google AdSense requires:
   - No more than 3 ads above the fold on desktop
   - No more than 1 ad above the fold on mobile
   - Ads must not exceed 30% of visible page area
   - At least 300px of content between ad units
   
   Our implementation follows these rules:
   - Homepage: 2 ads (header leaderboard + between sections)
   - Archive: 2 ads (sidebar × 2, hidden on mobile)
   - Single: 3 ads (in-content + sidebar × 2)
   - Mobile: Only in-content + pre-footer (sidebar hidden)
*/