/**
 * Ad Slots Styling
 * Google AdSense Policy Compliant
 * 
 * Key compliance points:
 * - Clear separation from content (margins/spacing)
 * - No sticky/floating ads covering content
 * - Minimum dimensions for ad visibility
 * - "Advertisement" label for transparency
 * - Not too close to interactive elements
 */

/* ====================================
   AD WRAPPER CONTAINER
   ==================================== */
.ppp-ad-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Margin and spacing constraints belong to the wrapper container */
.ppp-ad-wrapper-top {
    margin-top: 32px !important;
    margin-bottom: 28px !important;
}

.ppp-ad-wrapper-bottom {
    margin-top: 32px !important;
    margin-bottom: 24px !important;
}

/* ====================================
   AD SLOT CONTAINER
   ==================================== */
.ppp-ad-slot {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    box-sizing: border-box;
    background-color: transparent;
}

/* Top Ad: border-top and border-bottom wrap only the inner ad container */
.ppp-ad-slot.ppp-ad-top {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Bottom Ad: border-top wraps only the inner ad container */
.ppp-ad-slot.ppp-ad-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

/* Middle ad position removed — all non-bottom positions map to 'top' in tools-manager.php */

/* ====================================
   AD INNER CONTAINER
   ==================================== */
.ppp-ad-inner {
    max-width: 728px;
    /* Leaderboard size */
    width: 100%;
    min-height: 90px !important;
    /* Minimum ad height - prevents layout shift */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: relative;
}

/* AdSense container should fill space */
.ppp-ad-inner ins.adsbygoogle {
    display: block !important;
    width: 100%;
    min-height: 90px !important;
}

/* ====================================
   ADVERTISEMENT LABEL (Policy Compliance)
   Required for strict AdSense compliance
   ==================================== */
/* Real DOM label — readable by screen readers, crawlers, and AdSense policy scanners */
.ppp-ad-label {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85); /* 21:1 contrast on dark theme */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 600;
    opacity: 0.85;
}

body:not(.dark-mode):not([data-theme="dark"]) .ppp-ad-label {
    color: rgba(0, 0, 0, 0.65); /* Accessible contrast on light theme */
}

/* ::before kept as structural placeholder but content hidden to avoid duplication */
.ppp-ad-slot::before {
    content: none;
    display: none;
}

/* ====================================
   TABLET RESPONSIVE (768px and below)
   ==================================== */
@media (max-width: 768px) {
    .ppp-ad-inner {
        max-width: 468px;
        /* Banner size */
        min-height: 60px !important;
    }

    .ppp-ad-inner ins.adsbygoogle {
        display: block !important;
        min-height: 60px !important;
    }

    .ppp-ad-slot {
        padding: 14px 16px;
    }

    .ppp-ad-wrapper-top {
        margin-bottom: 20px !important;
    }

    .ppp-ad-wrapper-bottom {
        margin-top: 28px !important;
        margin-bottom: 20px !important;
    }
}

/* ====================================
   MOBILE RESPONSIVE (480px and below)
   ==================================== */
@media (max-width: 480px) {
    .ppp-ad-inner {
        max-width: 320px;
        /* Mobile banner */
        min-height: 50px !important;
    }

    .ppp-ad-inner ins.adsbygoogle {
        display: block !important;
        min-height: 50px !important;
    }

    .ppp-ad-slot {
        padding: 12px 10px;
    }

    .ppp-ad-wrapper-top {
        margin-bottom: 16px !important;
    }

    .ppp-ad-wrapper-bottom {
        margin-top: 24px !important;
        margin-bottom: 16px !important;
    }
}

/* ====================================
   SMALL MOBILE (320px and below)
   ==================================== */
@media (max-width: 320px) {
    .ppp-ad-inner {
        max-width: 280px;
        min-height: 50px !important;
    }

    .ppp-ad-inner ins.adsbygoogle {
        display: block !important;
        min-height: 50px !important;
    }

    .ppp-ad-slot {
        padding: 10px 8px;
    }
}




/* ====================================
   DARK MODE SUPPORT
   ==================================== */
@media (prefers-color-scheme: dark) {
    .ppp-ad-slot.ppp-ad-top {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .ppp-ad-slot.ppp-ad-bottom {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

}

/* Dark mode class override */
.dark-mode .ppp-ad-slot.ppp-ad-top,
[data-theme="dark"] .ppp-ad-slot.ppp-ad-top {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .ppp-ad-slot.ppp-ad-bottom,
[data-theme="dark"] .ppp-ad-slot.ppp-ad-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
}


/* ====================================
   ADSENSE COLOUR SAFEGUARD
   ====================================
   dark-theme.css applies:
     body            { color: #ffffff !important }
     p, span, li     { color: #ffffff !important }
     h1…h6           { color: #ffffff !important }
   These rules cascade into ins.adsbygoogle and can cause
   "invisible text in ads" policy violations.

   This block resets ALL colour-related inherited properties
   on AdSense elements back to transparent/initial so Google
   controls them entirely. Uses high-specificity selectors
   to beat the !important rules above where possible.
   ==================================== */

/* Reset on the <ins> element itself */
ins.adsbygoogle {
    color: initial !important;
    background: transparent !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Ensure the ad container (.ppp-ad-inner) itself is neutral */
.ppp-ad-inner {
    color: initial !important;
    background: transparent !important;
}

/* ====================================
   AD SECTION BREAK / DIVIDER
   ==================================== */
.ppp-ad-section-break {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent);
    margin-top: 24px;
    margin-bottom: 24px;
    clear: both;
}

/* Light mode fallback styling */
body:not(.dark-mode):not([data-theme="dark"]) .ppp-ad-section-break {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent);
}