/* ============================================================================
   PDFTEQ AD PLACEHOLDERS — ads.css
   ============================================================================
   CLS-safe ad placeholder system for Google AdSense preparation.
   
   Every slot has an explicit min-height so the layout never shifts when the
   real ad script replaces the placeholder content.
   
   Classes are prefixed with `ptq-ad-` to avoid collisions.
   ============================================================================ */


/* ==========================================================================
   1. SHARED BASE
   ========================================================================== */

.ptq-ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    /* Subtle visual so the placeholder is visible but unobtrusive */
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

/* The tiny "Advertisement" label inside each placeholder */
.ptq-ad-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.18);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none;
}

.ptq-ad-label i {
    font-size: 1rem;
    opacity: 0.4;
}

/* Dimension hint — shown only in placeholder mode */
.ptq-ad-label .ptq-ad-dim {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.6;
}


/* ==========================================================================
   2. TOP LEADERBOARD (728×90 desktop → 320×50 mobile)
   ========================================================================== */

.ptq-ad-leaderboard {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
    margin: 0 auto 0;
    padding: 0;
}

@media (max-width: 767px) {
    .ptq-ad-leaderboard {
        max-width: 320px;
        min-height: 50px;
    }
}

/* Wrapper that contains the slot + centering + top spacing */
.ptq-ad-leaderboard-wrap {
    width: 100%;
    padding: 14px 15px 0;
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   3. IN-GRID NATIVE AD (matches tool-card appearance)
   ========================================================================== */

/* Designed to sit inside a Bootstrap .col-md-6.col-lg-3 (or similar)
   so it takes the exact same grid cell as a tool card. */

.ptq-ad-native {
    width: 100%;
    min-height: 160px;
    border-radius: 16px;
    /* Match the tool-card surface */
    background: rgba(30, 41, 59, 0.35);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    padding: 25px;
    height: 100%;
}

/* Hovered state — match tool-card hover */
.ptq-ad-native:hover {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
}


/* ==========================================================================
   4. SIDEBAR / MEDIUM RECTANGLE (300×250)
   ========================================================================== */

.ptq-ad-sidebar {
    width: 300px;
    min-height: 250px;
    margin: 0 auto;
}

/* On smaller screens, allow it to shrink gracefully */
@media (max-width: 767px) {
    .ptq-ad-sidebar {
        width: 100%;
        max-width: 300px;
        min-height: 250px;
    }
}

/* Optional wrapper for tool pages — adds margin/padding context */
.ptq-ad-sidebar-wrap {
    margin-top: 24px;
}


/* ==========================================================================
   5. BOTTOM AD (728×90 desktop → 320×50 mobile, above footer)
   ========================================================================== */

.ptq-ad-bottom {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .ptq-ad-bottom {
        max-width: 320px;
        min-height: 50px;
    }
}

.ptq-ad-bottom-wrap {
    width: 100%;
    padding: 0 15px 20px;
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   6. LIGHT THEME OVERRIDES
   If PDFTeq ever supports a light mode, these classes adapt the
   placeholder colors so they don't look jarring on a white background.
   ========================================================================== */

[data-bs-theme="light"] .ptq-ad-slot,
.ptq-theme-light .ptq-ad-slot {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="light"] .ptq-ad-label,
.ptq-theme-light .ptq-ad-label {
    color: rgba(0, 0, 0, 0.2);
}

[data-bs-theme="light"] .ptq-ad-native,
.ptq-theme-light .ptq-ad-native {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   7. PRINT — HIDE ALL ADS
   ========================================================================== */

@media print {
    .ptq-ad-slot,
    .ptq-ad-leaderboard-wrap,
    .ptq-ad-sidebar-wrap,
    .ptq-ad-bottom-wrap {
        display: none !important;
    }
}