/* ==============================================
   AdSense Styles
   ============================================== */

/* Base Ad Container */
.ad-container {
    position: relative;
    width: 100%;
    margin: 2rem 0;
    text-align: center;
    overflow: hidden;
    min-height: 90px; /* Minimum height for ad units */
    background-color: #f8f9fa;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Hover effect for better UX */
.ad-container:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Ad placeholder (shows while ad is loading) */
.ad-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        45deg,
        #f8f9fa,
        #f8f9fa 10px,
        #e9ecef 10px,
        #e9ecef 20px
    );
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ad-placeholder-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ad-container {
        margin: 1.5rem 0;
    }
    
    /* Full-width ads on mobile */
    .ad-container.fluid {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
        border-radius: 0;
    }
}

/* Specific ad placements */
#header-ad {
    margin: 0 0 2rem;
    min-height: 90px;
}

#content-top-ad,
#content-middle-ad {
    margin: 3rem 0;
    min-height: 250px;
}

#sidebar-ad {
    margin: 0 0 2rem;
    min-height: 600px;
}

#footer-ad {
    margin: 2rem 0 0;
    min-height: 90px;
}

/* AdSense responsive adjustments */
ins.adsbygoogle[data-ad-format="auto"] {
    display: block !important;
    width: 100%;
}

/* Hide ad placeholders when ad is loaded */
.adsbygoogle[data-adsbygoogle-status="done"] + .ad-placeholder {
    display: none !important;
}

/* Ad loading animation */
@keyframes adPulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.ad-container.loading .ad-placeholder {
    animation: adPulse 1.5s ease-in-out infinite;
}

/* Ad label for better UX */
.ad-label {
    display: block;
    font-size: 0.7rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Specific ad unit styles */
.ad-unit {
    margin: 1.5rem 0;
    position: relative;
}

.ad-unit .ad-container {
    margin: 0;
}

/* Sticky sidebar ad */
.sticky-ad {
    position: sticky;
    top: 100px; /* Adjust based on your header height */
    z-index: 100;
}

/* In-article ads */
.article-content .ad-container {
    margin: 2.5rem 0;
    border-left: 3px solid #4a6cf7;
    background-color: #f8f9fa;
}

/* Responsive video ad container */
.video-ad-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin: 2rem 0;
}

.video-ad-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}