/**
 * BH Maat Berekenen Online - AdSense Stylesheet
 * Version: 1.0.0
 * Description: Styles for Google AdSense ad placements
 */

/* Ad container base styles */
.ad-container {
    margin: 20px auto;
    text-align: center;
    min-height: 90px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--radius-sm);
    padding: 10px;
    position: relative;
}

/* Ad label */
.ad-container::before {
    content: 'Advertentie';
    display: block;
    font-size: 10px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* Top banner ad */
.ad-top {
    margin-top: 20px;
    margin-bottom: 30px;
    max-width: 728px;
}

/* Sidebar ads */
.ad-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    margin-bottom: 20px;
    max-width: 300px;
}

/* In-content ad */
.ad-in-content {
    margin: 40px auto;
    max-width: 800px;
    clear: both;
}

/* Bottom banner ad */
.ad-bottom {
    margin-top: 40px;
    margin-bottom: 20px;
    max-width: 728px;
}

/* Ad placeholder (when cookies not accepted) */
.ad-placeholder {
    padding: 40px 20px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: var(--radius-md);
    text-align: center;
}

.ad-placeholder p {
    margin: 5px 0;
    color: #6c757d;
}

.ad-notice {
    font-size: 12px;
    font-style: italic;
}

/* AdSense responsive units */
.adsbygoogle {
    display: block;
    min-height: 50px;
}

/* Prevent layout shift */
.ad-container.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile ad styles */
@media (max-width: 768px) {
    .ad-sidebar {
        display: none;
    }
    
    .ad-container {
        margin: 15px auto;
        max-width: 100%;
    }
    
    .ad-top,
    .ad-bottom {
        max-width: 100%;
    }
    
    .ad-in-content {
        margin: 30px auto;
    }
}

/* Prevent ads from breaking layout */
.ad-container + .ad-container {
    margin-top: 40px;
}

/* Ad spacing in content */
.page-content .ad-container:first-child {
    margin-top: 0;
}

.page-content .ad-container:last-child {
    margin-bottom: 0;
}

/* Desktop-only ads */
@media (min-width: 769px) {
    .ad-mobile-only {
        display: none;
    }
}

/* Mobile-only ads */
@media (max-width: 768px) {
    .ad-desktop-only {
        display: none;
    }
}