/* ================================================================
   SHADOWS-TRIM.CSS — Sitewide shadow reduction

   Goal (from user): "only include shadows for the perimeter of the
   cards itselves, NOT the containers that contain the cards.
   Reduce intensity for perimeters around text containers & elements."

   Strategy:
     1. Trim the shared --shadow-sm/md/lg tokens (everything that uses
        them gets lighter automatically).
     2. Strip box-shadow entirely from containers that wrap cards
        (sections, grids, wrappers, the stats-bar strip).
     3. Force a tight, low-opacity shadow on actual cards so they keep
        a subtle perimeter without looking cushioned.
     4. Leave intentionally-glowing CTAs (primary buttons, WhatsApp,
        magnetic cluster) and chrome elements (nav, dropdowns) alone —
        those need their depth cue.

   Load AFTER index.html's inline <style> AND after motion.css so the
   token override + container-strip rules win the cascade. Wrapped in
   :where() / nothing for low specificity unless it has to be high.
   ================================================================ */


/* ---------------- 1) Lighter shadow tokens ----------------
   Light mode: was 0 8px 24px @ 0.05 + 0 2px 6px @ 0.03
                now 0 4px 12px @ 0.04 + 0 1px 3px @ 0.025
   Dark mode keeps a touch more opacity so cards still register on
   near-black backgrounds. */

:root {
    --shadow-sm: 0 4px 12px -6px rgba(0,0,0,0.040), 0 1px 3px -1px rgba(0,0,0,0.025) !important;
    --shadow-md: 0 8px 22px -10px rgba(0,0,0,0.050), 0 2px 6px -2px rgba(0,0,0,0.030) !important;
    --shadow-lg: 0 14px 32px -12px rgba(0,0,0,0.065), 0 4px 10px -4px rgba(0,0,0,0.040) !important;
}
body.dark-mode {
    --shadow-sm: 0 4px 12px -6px rgba(0,0,0,0.180), 0 1px 3px -1px rgba(0,0,0,0.140) !important;
    --shadow-md: 0 8px 22px -10px rgba(0,0,0,0.220), 0 2px 6px -2px rgba(0,0,0,0.170) !important;
    --shadow-lg: 0 14px 32px -12px rgba(0,0,0,0.260), 0 4px 10px -4px rgba(0,0,0,0.200) !important;
}


/* ---------------- 2) Strip shadow from containers ----------------
   These are elements that *hold* cards or arrange text — they should
   never cast their own shadow. Cards inside them keep theirs. */

.container,
section,
section > .container,
.section-padding,
.glow-section,
.process-sticky-section,
.split-reveal-section,
.ticker-section,
.packages-grid,
.addons-grid,
.care-grid,
.care-packages-grid,
.projects-grid,
.projects-grid.is-carousel,
.packages-grid.is-carousel,
.addons-grid.is-carousel,
#bundleCards,
#projectsGrid,
#carePackagesGrid,
.carousel-wrap,
.bundle-wrap,
.tabs-wrap,
.reviews-wrap,
.review-track,
.faq-list,
.faq-list.faq-chat,
.stats-bar,
.split-ticker,
.split-ticker-half,
.split-ticker-row,
.hero-content,
.hero-text,
.hero-btns,
.cat-title,
.section-title,
.section-heading,
.section-subtitle,
.leave-review-card,
#final-cta,
.final-cta,
.aw-section-divider,
.process-stack {
    box-shadow: none !important;
}


/* ---------------- 3) Card shadows — tighter & lighter ----------------
   Apply the new token to all card classes uniformly so we don't have
   to chase every ad-hoc box-shadow rule across both pages. */

.package-card,
.addon-card,
.care-card,
.project-card,
.tier,
.bundle-card,
.review-card,
.review-card-new,
.feature-card,
.service-card,
.pricing-card,
.info-card,
.stat-card,
.library-card {
    box-shadow: 0 3px 10px -4px rgba(0,0,0,0.045), 0 1px 2px -1px rgba(0,0,0,0.020) !important;
}

body.dark-mode .package-card,
body.dark-mode .addon-card,
body.dark-mode .care-card,
body.dark-mode .project-card,
body.dark-mode .tier,
body.dark-mode .bundle-card,
body.dark-mode .review-card,
body.dark-mode .review-card-new,
body.dark-mode .feature-card,
body.dark-mode .service-card,
body.dark-mode .pricing-card,
body.dark-mode .info-card,
body.dark-mode .stat-card,
body.dark-mode .library-card {
    box-shadow: 0 3px 10px -4px rgba(0,0,0,0.220), 0 1px 2px -1px rgba(0,0,0,0.160) !important;
}

/* Hover state — slight lift, still subtle */
.package-card:hover,
.addon-card:hover,
.care-card:hover,
.project-card:hover,
.tier:hover,
.bundle-card:hover,
.review-card:hover,
.review-card-new:hover,
.feature-card:hover,
.library-card:hover {
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.075), 0 2px 5px -2px rgba(0,0,0,0.035) !important;
}
body.dark-mode .package-card:hover,
body.dark-mode .addon-card:hover,
body.dark-mode .care-card:hover,
body.dark-mode .project-card:hover,
body.dark-mode .tier:hover,
body.dark-mode .bundle-card:hover,
body.dark-mode .review-card:hover,
body.dark-mode .review-card-new:hover,
body.dark-mode .feature-card:hover,
body.dark-mode .library-card:hover {
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.290), 0 2px 5px -2px rgba(0,0,0,0.190) !important;
}


/* ---------------- 4) Sticky-card (process.html "How It Works") ----
   Was already trimmed once; trim again to match the new card baseline. */

.sticky-card {
    box-shadow: 0 4px 14px -6px rgba(0,0,0,0.055) !important;
}
body.dark-mode .sticky-card {
    box-shadow: 0 4px 14px -6px rgba(0,0,0,0.220) !important;
}


/* ---------------- 5) Keep these alone ----------------
   CTAs, chrome and floating UI need their depth — explicitly NOT
   touched here. Listed for clarity:
   - .btn, .btn-primary, .btn-outline, .nav-cta (interactive feedback)
   - header / .pill-nav / .mega-nav (chrome ambient depth)
   - .mega-dropdown / .mobile-menu (panel emergence)
   - .carousel-arrow / .review-nav (clickable circular controls)
   - .wa-float-btn / .wa-mobile-bar / .wa-mobile-cta (WhatsApp pulse)
*/