/**
 * PRISMATICA HEALTH - Brand & Readability Fixes
 * Loaded after style.css / animations.css. Delete the <link> in
 * includes/header.php to revert everything in this file at once.
 */

/* --------------------------------------------------------------
   1. Brand palette: replace leftover template blue with the
      logo's deep purple / plum, warmed by a faint coral glow.
   -------------------------------------------------------------- */
:root {
    --font-accent: var(--font-heading);
    --shadow-glow-primary: 0 0 30px rgba(138, 70, 196, 0.35);
    --shadow-glow-secondary: 0 0 30px rgba(247, 158, 42, 0.3);
    --shadow-glow-accent: 0 0 30px rgba(229, 82, 105, 0.3);
    --text-muted: rgba(255, 255, 255, 0.68);
}

/* seo-enhancements.css (cookie banner, mobile call bar, back-to-top)
   loads later and still uses template blue; html:root wins */
html:root {
    --ph-primary: #63328F;
    --ph-primary-dark: #462266;
}

.mesh-bg {
    background-color: #140b24;
}

.mesh-blob-1 {
    background: radial-gradient(circle, hsl(268, 48%, 26%) 0%, transparent 60%);
}

.mesh-blob-2 {
    background: radial-gradient(circle, hsl(282, 42%, 30%) 0%, transparent 70%);
    opacity: 0.55;
}

.mesh-blob-3 {
    background: radial-gradient(circle, hsl(252, 45%, 22%) 0%, transparent 65%);
}

.mesh-blob-4 {
    background: radial-gradient(circle, hsl(350, 55%, 28%) 0%, transparent 60%);
    opacity: 0.35;
}


/* --------------------------------------------------------------
   2. Navigation: solid backdrop once the page scrolls so links
      never sit on top of page content.
   -------------------------------------------------------------- */
.prisma-nav.scrolled {
    background: rgba(20, 11, 36, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prisma-nav .nav-link:hover,
.prisma-nav .nav-link.active {
    color: var(--secondary-light);
}

/* --------------------------------------------------------------
   3. Contrast on "light" sections (badges, roles, body copy)
   -------------------------------------------------------------- */
.section-light .section-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.section-light .section-subtitle,
.section-light .text-muted,
.section-light p,
.why-us-point p,
.team-card .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Bootstrap's .text-muted is near-black, meant for white pages. The
   site is dark, so lighten it everywhere except inside the light
   boxes some pages use (bg-light / bg-white / cards / alerts). */
.text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

.bg-light .text-muted,
.bg-white .text-muted,
.bg-light.text-muted,
.bg-white.text-muted,
.card .text-muted,
.alert .text-muted,
.alert.text-muted {
    color: #5c5668 !important;
}

/* Services page: white cards used a rainbow of tag/link colours too
   faint for small text; use brand purple. "html" outranks the page's
   inline <style>, and !important beats the per-card style="" colours. */
html .svc-card-tag {
    background: var(--primary) !important;
}

html .svc-card-link {
    color: var(--primary) !important;
}

html .svc-btn-primary,
html .ph-blog-cta-btn {
    background: var(--accent-dark);
    color: #ffffff;
}

/* Services page palette: template blue → brand purple / coral */
html :is(.svc-hero, .svc-grid-section, .svc-process, .svc-trust, .svc-faq, .svc-cta-banner) {
    --svc-primary: #63328F;
    --svc-dark: #462266;
    --svc-accent: #B93B4E;
}

html .svc-cta-banner {
    background: linear-gradient(135deg, #1a0b2e 0%, #462266 60%, #63328F 100%);
}

html .svc-btn-primary:hover {
    background: #9e2f41;
    box-shadow: 0 12px 32px rgba(185, 59, 78, 0.4);
}

/* Service-page headers hard-code the old blue→teal gradient inline */
header.page-hero[style*="0056D2"] {
    background: linear-gradient(135deg, #462266 0%, #63328F 55%, #B93B4E 100%) !important;
}

/* Bootstrap's default blue panels → brand purple */
html:root {
    --bs-primary: #63328F;
}

.bg-primary {
    background-color: var(--primary) !important;
}

/* Dark panels marked .text-white: style.css forces dark text inside
   .bg-light/.bg-white sections with !important, which also hit dark
   panels nested in them, leaving dark-on-dark text */
.text-white :is(h1, h2, h3, h4, h5, h6, li, small, .lead) {
    color: #ffffff !important;
}

.text-white p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Blog index hero: was bright template blue with a yellow headline;
   match the other page heroes (site purple + gradient headline) */
html .ph-blog-hero {
    background: transparent;
}

html .ph-blog-hero-title span {
    color: transparent;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
}

html .ph-blog-search {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
}

html .ph-blog-search button {
    background: var(--gradient-accent);
}

/* Blog index: dates and read times sit on white cards; style.css
   forces pale #9CA3AF with !important (2.5:1) — darken it */
html .ph-blog-meta,
html .ph-blog-meta small,
html .ph-blog-card-meta,
html .ph-blog-card-meta span,
html .ph-blog-card-meta small {
    color: #5c5668 !important;
}

.team-card-role,
.team-card .text-accent {
    color: var(--secondary-light) !important;
    font-weight: 600;
}

.why-us-check {
    background: rgba(250, 189, 106, 0.12);
    color: var(--secondary-light);
}

.why-us-point:hover {
    background: rgba(255, 255, 255, 0.06);
}

.why-us-point:hover .why-us-check {
    background: var(--gradient-accent);
    color: #ffffff;
}

.why-us-title {
    color: #ffffff;
}

.section-light .service-image-content h5 {
    color: var(--light);
}

.section-light .service-image-content p {
    color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------
   4. Testimonials: readable quotes, visible stars and authors
   -------------------------------------------------------------- */
.testimonial-quote {
    font-style: normal;
    color: rgba(255, 255, 255, 0.86);
}

.testimonial-quote::before {
    color: rgba(250, 189, 106, 0.35);
}

.testimonial-name {
    color: #ffffff;
    font-weight: 700;
}

.testimonial-role {
    color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------
   5. Service images: one consistent, brand-tinted treatment
   -------------------------------------------------------------- */
.service-img-wrapper {
    position: relative;
    border-radius: var(--radius-md);
}

.service-img-wrapper img {
    filter: saturate(0.8) contrast(1.05);
}

.service-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(99, 50, 143, 0) 45%, rgba(20, 11, 36, 0.55) 100%),
                linear-gradient(135deg, rgba(99, 50, 143, 0.18), rgba(229, 82, 105, 0.12));
    pointer-events: none;
}

/* --------------------------------------------------------------
   6. Footer: keep the back-to-top button off the badges
   -------------------------------------------------------------- */
@media (min-width: 768px) {
    .footer-bottom .footer-badges {
        margin-right: 72px;
    }
}

@media (max-width: 767.98px) {
    .footer-bottom {
        padding-bottom: 88px;
    }
}

/* --------------------------------------------------------------
   7. Mobile: shorten the decorative scroll section
   -------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .scroll-follow-section {
        min-height: 0;
    }

    .scroll-follow-content {
        margin-top: 6rem;
    }

    .scroll-follow-bottom {
        margin-top: 55vh;
    }
}

/* --------------------------------------------------------------
   8. Mobile performance
      Large animated blur layers and backdrop blurs are the most
      expensive things a phone browser can paint every frame; they
      made scrolling stutter. Keep the look, drop the motion/blur.
   -------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .mesh-blob {
        animation: none;
        filter: blur(60px);
        will-change: auto;
    }

    .mesh-orb {
        animation: none;
    }

    #hero-particles {
        display: none;
    }
}

@media (max-width: 767.98px) {
    *,
    *::before,
    *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Background videos are skipped on phones (see LazyVideo in main.js) */
    .video-container:has(video[data-lazy-video]),
    #footer-aurora-canvas,
    .shader-canvas {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mesh-blob,
    .mesh-orb {
        animation: none;
    }
}