/* ==========================================================================
   Pingal IT Solutions — public site polish
   --------------------------------------------------------------------------
   Layered on top of the compiled Bootstrap (app.css). Loaded in <head> AFTER
   app.css, but BEFORE any page-level inline <style> blocks (landing pages),
   so bespoke landing-page styling still wins.

   Purpose: the page backgrounds (#f8fafc body / #f8f9fa bg-light) sit so close
   to white that white cards had no separation, and the core pages reference
   .service-card / .hero-section / .hover-lift / .hover-shadow / .transition-all
   which were never defined. This file restores tonal contrast + card elevation.
   ========================================================================== */

:root {
    --pis-band: #eef1f6;                                    /* cool-slate band behind white cards */
    --pis-card-radius: .75rem;
    --pis-card-border: rgba(13, 38, 76, .07);              /* faint brand-navy hairline */
    --pis-card-shadow: 0 .5rem 1.25rem rgba(13, 38, 76, .07);
    --pis-card-shadow-hover: 0 1rem 2.25rem rgba(13, 38, 76, .12);
    --pis-transition: transform .25s ease, box-shadow .25s ease;
}

/* --- Section rhythm ----------------------------------------------------- */
/* Full-width alternating bands get a perceptible cool tint so the white cards
   inside them read as raised objects. Scoped to <section> so small bg-light
   helpers (image placeholders, landing-page cards) are left untouched. */
section.bg-light {
    background-color: var(--pis-band) !important;
}

/* Soft white→slate hero so the large hero area reads intentional, not blank,
   and flows seamlessly into the first slate band below it. Landing pages
   redefine .hero-section inline, so this only affects the core pages. */
.hero-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--pis-band) 100%);
}

/* --- Card elevation ----------------------------------------------------- */
/* Cards default to white. Bootstrap's $card-bg inherits from $body-bg, which
   is #f8fafc in this build, so every .card was tinted gray and blended into
   the page. Reset the card background variable so white cards read crisply.
   Utility fills (bg-light / bg-primary / bg-dark …) use !important and still
   win wherever a card intentionally needs a colored background. */
.card {
    --bs-card-bg: #ffffff;
}

/* Give cards that never opted into a shadow utility a clean baseline
   elevation. This fixes the previously unstyled .service-card cards while
   leaving any card that already declares .shadow-sm / .shadow-lg alone. */
.card:not([class*="shadow"]) {
    border-color: var(--pis-card-border);
    border-radius: var(--pis-card-radius);
    box-shadow: var(--pis-card-shadow);
}

/* Hover interactions the markup already references but were never defined. */
.transition-all,
.service-card {
    transition: var(--pis-transition);
}

.service-card:hover,
.hover-lift:hover,
.hover-shadow:hover {
    transform: translateY(-4px);
    box-shadow: var(--pis-card-shadow-hover) !important;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

    .transition-all,
    .service-card {
        transition: none;
    }

    .service-card:hover,
    .hover-lift:hover,
    .hover-shadow:hover {
        transform: none;
    }
}
