/* 
 * Ad Containers and Styling
 * This file contains styles for consistent ad placements across layouts
 */

/* === Ad Container Basics === */
.ad-container {
    margin: var(--space-component, 2rem) 0;
    padding: var(--space-element, 1rem);
    background-color: var(--color-surface-variant, #f5f5f5);
    border-radius: var(--border-radius-md, 0.25rem);
    text-align: center;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    position: relative;
}

/* Ad label for accessibility and transparency */
.ad-container::before {
    content: "";
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-muted, #767676);
    margin-bottom: 0.25rem;
    text-align: center;
    letter-spacing: 1px;
}

/* Specific ad placements */
.rsoc-top {
    margin-top: 0.5rem;
}

.rsoc-middle {
    margin: var(--space-section, 3rem) 0;
}

.rsoc-bottom {
    margin-bottom: var(--space-section, 3rem);
}

.sidebar-ad {
    margin: 0 0 var(--space-component, 2rem);
}

/* Article page specific ads */
.article-top-ad {
    margin: 0 0 var(--space-component, 2rem);
}

.article-inline-ad {
    margin: var(--space-component, 2rem) 0;
    float: right;
    width: 300px;
    margin-left: var(--space-element, 1rem);
    margin-bottom: var(--space-element, 1rem);
}

.article-bottom-ad {
    margin: var(--space-component, 2rem) 0 0;
}

/* Make all ads responsive */
.ad-container div,
.ad-container iframe {
    max-width: 100%;
}

/* Prevent oversized ads on small screens */
@media (max-width: 768px) {
    .article-inline-ad {
        float: none;
        width: 100%;
        margin-left: 0;
    }
    
    /* Reduce padding on small screens */
    .ad-container {
        padding: 0.75rem;
    }
}

/* Hide ads when printing */
@media print {
    .ad-container {
        display: none !important;
    }
}

/* === Ad Position Placeholders === */
/* These classes help maintain consistent ad positions across layouts */

/* For top-of-page ads */
.ad-position-top {
    margin-bottom: var(--space-component, 2rem);
}

/* For middle-of-content ads */
.ad-position-middle {
    margin: var(--space-component, 2rem) 0;
}

/* For end-of-content ads */
.ad-position-bottom {
    margin-top: var(--space-component, 2rem);
}

/* For sidebar ads */
.ad-position-sidebar {
    margin-bottom: var(--space-component, 2rem);
}

/* Ensure RSOC ads don't overflow */
#rsoc-top, #rsoc-middle, #rsoc-bottom, #rsoc-sidebar {
    overflow: hidden;
    max-width: 100%;
}

/* RSOC ad styling */
.adsbygoogle {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

/* AFS ad styling */
.afs-ads {
    font-family: var(--font-family-primary, Arial, sans-serif);
    max-width: 100%;
    overflow: hidden;
}

.afs-ad-title {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary, #3490dc);
}

.afs-ad-snippet {
    color: var(--color-text-secondary, #4a5568);
}

.afs-ad-url {
    color: var(--color-text-muted, #718096);
    font-size: 0.875em;
}