/* ============================================================
   PPC SERVICES — shared red-theme stylesheet
   Load AFTER assetsnew/css/sim-shared.css — extends it, doesn't
   replace it. sim-shared.css stays on the site's default blue
   accent; this file swaps the accent to red and adds the PPC
   platform-tabs component (adapted from services-section-tailwind.html)
   so it can be reused as-is across the outsource-ppc family of pages
   (Google Ads, Facebook Ads, Amazon Ads, Bing Ads, Whitelabel PPC,
   PPC Audits, etc.) without rebuilding these pieces per page.
   ============================================================ */

:root {
    --ppc-red: #dc2626;
    --ppc-red-dark: #991b1b;
    --ppc-red-light: #fca5a5;
    --ppc-red-bg: #fef2f2;
    --ppc-red-border: #fecaca;
}

/* ===== TAB PANE TITLE — condensed Oswald treatment for the platform-tab
   headings ("GOOGLE Ads", "META Ads", ...), paired with a small red
   accent bar underneath for a bit of polish beyond plain black text. ===== */
.ppc-tab-title {
    font-family: 'Oswald', sans-serif !important;
    letter-spacing: 0.01em;
}
.ppc-tab-title-bar {
    width: 3.5rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #ef4444, var(--ppc-red-dark));
}

/* ===== DISPLAY HEADING — condensed, uppercase, statement-style treatment
   borrowed from the whitedigital.in "Ready to Dominate?" CTA heading
   (Oswald + tight leading + big responsive scale). Pair with a
   .bg-gradient-to-br...bg-clip-text span for the accented portion. ===== */
.heading-display {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.01em;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
}

/* ===== TRUST LOGO BADGE — third-party award/directory logos below the hero ===== */
.trust-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 0.875rem;
    padding: 1rem 1.35rem;
    height: 96px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.trust-logo-badge:hover {
    border-color: var(--ppc-red-light);
    box-shadow: 0 8px 20px -10px rgba(220,38,38,0.35);
    transform: translateY(-2px);
}
.trust-logo-badge img {
    height: 100%;
    width: auto;
    max-width: 210px;
    object-fit: contain;
}

/* Featured variant — makes the Google Premier Partner badge the visual
   anchor of the strip via size alone, no glow. */
.trust-logo-badge--featured {
    height: 130px;
    padding: 1.1rem 1.6rem;
}
.trust-logo-badge--featured img {
    max-width: 260px;
}

/* ===== RED BUTTON — same shape/motion language as .btn-primary, red accent ===== */
.btn-ppc {
    background: linear-gradient(to bottom, #ef4444, var(--ppc-red));
    box-shadow: 0 4px 14px -2px rgba(220,38,38,0.35);
}
.btn-ppc:hover {
    background: linear-gradient(to bottom, #f87171, #ef4444);
    box-shadow: 0 6px 20px -2px rgba(220,38,38,0.45);
}

/* ===== RED BADGE / TEXT ACCENTS ===== */
.badge-ppc { background: var(--ppc-red-bg); border: 1px solid var(--ppc-red-border); }
.text-ppc { color: var(--ppc-red); }

/* ===== RED ICON BOX — drop-in alternative to .icon-box for this page family ===== */
.icon-box.ppc-red { background: linear-gradient(135deg, #fca5a5, #ef4444); box-shadow: 0 4px 12px -4px rgba(220,38,38,0.3); }

/* ===== RED HERO — same structural classes as .hero-section/.hero-overlay,
   swapped to a near-black base with a red-tinted scrim so the accent
   reads immediately without fighting the hero artwork. Kept deliberately
   lighter than the site's default hero-overlay: this artwork already has
   a near-black background baked in (it needs contrast help only under the
   H1/subhead on the left), and its brightest content — the red glow and
   character art — sits mid-canvas, so a heavy scrim there just muddies it. ===== */
.hero-section-ppc { background-color: #120404; }

/* Crops the small "White Label / Expert Team / ..." icon strip baked into
   the bottom of outsource-ppc.webp: zoom the art in slightly and anchor it
   to the top so the excess height (and that strip with it) overflows past
   the section's bottom edge, where .hero-section's overflow:hidden clips
   it. Because the crop fills the full section height, the section's own
   near-black background-color never shows through as a seam. */
.hero-bg-image.hero-bg-image-ppc {
    background-size: auto 124%;
    background-position: top right;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.7s ease;
}
@media (max-width: 1023px) {
    .hero-bg-image.hero-bg-image-ppc {
        background-size: contain;
        background-position: center center;
    }
}

/* Hover glow — hovering the hero brightens the artwork and blooms a soft
   red glow around the section edges. No scale/zoom, just light + glow.
   Scoped to any .hero-bg-image inside .hero-section-ppc (not just the
   -ppc crop variant) so sibling pages get the glow with a plain
   .hero-bg-image + their own hero art, no page-specific crop class needed
   unless the artwork actually requires custom cropping. */
.hero-section-ppc { transition: box-shadow 0.7s ease; }
.hero-section-ppc:hover .hero-bg-image {
    filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 70px rgba(239,68,68,0.55));
}
.hero-section-ppc:hover {
    box-shadow: inset 0 0 140px rgba(220,38,38,0.3);
}
.hero-bg-image { transition: filter 0.7s ease; }
@media (prefers-reduced-motion: reduce) {
    .hero-bg-image,
    .hero-section-ppc {
        transition: none;
    }
}
.hero-overlay-ppc {
    background:
        linear-gradient(105deg,
            rgba(18,4,4,0.88) 0%,
            rgba(20,5,5,0.72) 20%,
            rgba(24,6,6,0.48) 40%,
            rgba(30,7,7,0.24) 60%,
            rgba(30,7,7,0.10) 80%,
            rgba(30,7,7,0.02) 100%
        );
}
@media (max-width: 1023px) {
    .hero-overlay-ppc {
        background: linear-gradient(180deg,
            rgba(18,4,4,0.94) 0%,
            rgba(18,4,4,0.90) 60%,
            rgba(18,4,4,0.96) 100%
        );
    }
}

/* ===== RED OFFSET-SHADOW CARD MODIFIER — pairs with .card-offset from
   sim-shared.css (structure: .card-offset > .card-offset-block +
   .card-offset-front). Adds a solid-red variant alongside the existing
   Google-color modifiers. ===== */
.card-offset.ppc-red { --accent: var(--ppc-red); }

/* ===== STACK PILL — reused from the WordPress page pattern, red hover glow ===== */
.stack-pill-ppc {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .2s;
}
.stack-pill-ppc:hover {
    transform: translateY(-2px);
    border-color: var(--ppc-red-light);
    box-shadow: 0 8px 20px -10px rgba(220,38,38,0.35);
}
.stack-pill-ppc-logo { width: 1.1rem; height: 1.1rem; object-fit: contain; flex-shrink: 0; }

/* ===== PROCESS TIMELINE — red step numbers ===== */
.process-track-ppc { position: relative; }
.process-track-ppc::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--ppc-red-border) 0, var(--ppc-red-border) 8px, transparent 8px, transparent 16px);
    z-index: 0;
}
@media (max-width: 767px) {
    .process-track-ppc::before { display: none; }
}
.process-step-num-ppc {
    position: relative;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--ppc-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 8px 18px -6px rgba(220,38,38,0.45);
    margin: 0 auto 1rem;
}

/* ============================================================
   PLATFORM TABS — adapted from services-section-tailwind.html.
   Structure is unchanged from that file (buttons with data-tab +
   panes with data-pane, toggled by the same JS pattern); only the
   color language moves from blue to red so this section drops
   straight into any page in the PPC family.
   ============================================================ */
.ppc-tab-btn.is-inactive {
    background: #0f0f0f;
    border-color: #222222;
    color: #888888;
}
.ppc-tab-btn.is-inactive:hover {
    border-color: var(--ppc-red);
    color: #ffffff;
}
.ppc-tab-btn.is-active {
    background: linear-gradient(135deg, #ef4444, var(--ppc-red-dark));
    border-color: transparent;
    color: #ffffff;
}
.ppc-tab-icon.is-inactive { background: rgba(220,38,38,0.1); color: var(--ppc-red); }
.ppc-tab-icon.is-active { background: rgba(255,255,255,0.2); color: #ffffff; }

.ppc-tab-visual {
    position: relative;
}
.ppc-tab-visual::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ef4444, var(--ppc-red-dark));
    z-index: -1;
    border-radius: 1.5rem;
}
.ppc-tab-visual-inner {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 1.5rem;
    background: linear-gradient(155deg, #161616, #0a0a0a);
    border: 1px solid #262626;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Grayscale-to-color reveal on hover, matching hero-imgs-updated-1.html's
   .ppc-tab-media:hover img — no glow, just the color reveal. */
.ppc-tab-visual-inner img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    filter: grayscale(40%);
    transition: filter 0.4s;
}
.ppc-tab-pane:hover .ppc-tab-visual-inner img {
    filter: grayscale(0%);
}
/* Campaign Types tab images (white-label-google-ads.html) each have their own
   aspect ratio, so they fit without cropping instead of cover-cropping to fill. */
#campaign-types-tabs .ppc-tab-visual-inner img {
    object-fit: contain;
}
#campaign-types-tabs .ppc-tab-visual-inner,
#campaign-types-tabs .ppc-tab-visual-inner img {
    min-height: 420px;
}
.ppc-tab-visual-inner svg,
.ppc-tab-visual-inner i {
    width: 5.5rem;
    height: 5.5rem;
    color: var(--ppc-red-light);
}

/* ===== CAMPAIGN-TYPES MARQUEE — scrolling strip, e.g. below a hero ===== */
.ppc-marquee-section {
    background: linear-gradient(135deg, #ef4444, var(--ppc-red-dark));
    padding: 14px 0;
    overflow: hidden;
}
.ppc-marquee-track {
    display: flex;
    width: max-content;
    animation: ppc-marquee-scroll 28s linear infinite;
}
.ppc-marquee-section:hover .ppc-marquee-track {
    animation-play-state: paused;
}
.ppc-marquee-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 2.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}
.ppc-marquee-item i {
    width: 1.1rem;
    height: 1.1rem;
    color: #ffffff;
    opacity: 0.9;
}
.ppc-marquee-item + .ppc-marquee-item {
    border-left: 1px solid rgba(255,255,255,0.3);
}
@keyframes ppc-marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ppc-marquee-track { animation: none; }
}