/* ============================================================
   FREE PPC AUDIT — noir "detective case file" theme layered on
   top of sim-shared.css + ppc-services.css. Those two stay on
   their default light backgrounds for the rest of the PPC family;
   this file only reskins the sections/components used on THIS
   page to a dark red-and-black palette, reusing the same red
   accent (--ppc-red) so it still reads as the same brand.
   ============================================================ */

.case-eyebrow {
    font-family: 'Special Elite', 'Courier New', monospace;
    letter-spacing: 0.06em;
}

/* ===== SECTION BACKGROUNDS ===== */
.case-bg { background: #0a0a0a; }
.case-bg-alt { background: #121012; }

/* ===== CASE CARD — dark card, red hover accent ===== */
.case-card {
    background: #141212;
    border: 1px solid #2a2020;
    border-radius: 1rem;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.case-card:hover {
    border-color: var(--ppc-red);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -18px rgba(220,38,38,0.45);
}

/* ===== CASE CHECK LIST — red check marks on dark text ===== */
.case-check-list { list-style: none; padding: 0; margin: 0; }
.case-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #b8b0b0;
    font-size: 0.925rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.case-check-list li i {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    color: #ef4444;
    margin-top: 0.15rem;
}

/* ===== EVIDENCE TAG — pill used for the "what we investigate" grid ===== */
.evidence-tag {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #141212;
    border: 1px solid #262020;
    color: #d4cccc;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.evidence-tag:hover {
    border-color: var(--ppc-red);
    background: #1a1414;
    transform: translateY(-2px);
}
.evidence-tag i { width: 1.05rem; height: 1.05rem; color: #ef4444; flex-shrink: 0; }

/* ===== CASE BADGE — small red chip, reused for section eyebrows ===== */
.case-badge {
    background: rgba(220,38,38,0.12);
    border: 1px solid rgba(220,38,38,0.35);
    color: #fca5a5;
}

/* ===== CASE FAQ ITEM — dark accordion row (same .faq-item/.faq-answer/
   .faq-icon structure sim-shared.js already toggles; only the paint
   changes here). ===== */
.case-faq-item {
    background: #141212;
    border: 1px solid #262020;
    border-radius: 0.75rem;
    overflow: hidden;
}
.case-faq-item button:hover { background: #1a1414; }
.case-faq-item .case-faq-q { color: #ece6e6; }
.case-faq-item .case-faq-a { color: #a89f9f; }

/* ===== HERO BACKGROUND — free-manual-ppc-audit.webp's own edge color
   samples out to a cool blue-black (~rgb(6,12,17)), not the warm
   red-tinted near-black ppc-services.css defaults to (#120404). On a
   wide monitor, background-size:contain leaves a large fallback-color
   gap on the left (art is anchored center-right), and the mismatched
   hue turned that gap into a visible seam instead of a blend — this
   retints the fallback to the art's actual tone so the seam disappears,
   and nudges the fill size up (within the safe range that keeps the
   baked-in "AUDIT" lettering from clipping) to shrink the gap itself. ===== */
.hero-section-audit {
    background-color: #0a121a;
}
.hero-bg-image.hero-bg-image-audit {
    background-size: auto 122%;
    background-position: top right;
}
@media (max-width: 1023px) {
    .hero-bg-image.hero-bg-image-audit {
        background-size: contain;
        background-position: center center;
    }
}
.hero-overlay-audit {
    background:
        linear-gradient(105deg,
            rgba(6,12,17,0.92) 0%,
            rgba(8,14,20,0.82) 25%,
            rgba(10,16,22,0.56) 45%,
            rgba(10,16,22,0.28) 65%,
            rgba(10,16,22,0.10) 82%,
            rgba(10,16,22,0.02) 100%
        );
}
@media (max-width: 1023px) {
    .hero-overlay-audit {
        background: linear-gradient(180deg,
            rgba(6,12,17,0.94) 0%,
            rgba(6,12,17,0.90) 60%,
            rgba(6,12,17,0.96) 100%
        );
    }
}

/* ===== EVIDENCE MARQUEE — near-black instead of the shared ppc-red
   gradient, so the scrolling strip reads as a shadowy case-file ticker. ===== */
.ppc-marquee-section-audit {
    background: linear-gradient(135deg, #1a0303, #050000);
}

/* ===== CASE PROCESS TIMELINE — same dashed-track pattern as
   .process-track-ppc, just confirmed dark-bg safe (no light-only
   colors in the original rule, so no override needed beyond spacing
   already handled by ppc-services.css). ===== */

/* ===== STAMP — rotated dashed-border chip for a rubber-stamp feel
   on the "not an AI audit" USP card. ===== */
.case-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 2px dashed rgba(239,68,68,0.55);
    border-radius: 0.5rem;
    color: #ef4444;
    font-family: 'Special Elite', 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    transform: rotate(-3deg);
}