/* ============================================================================
   REDESIGN — "Atmospheric Elevation"  (homepage first, 2026-07)
   Approved direction: warm editorial SERIF display (Fraunces), an atmospheric
   hero with a topographic contour ridgeline, and a TEAL / pine-mint accent used
   as the single spark. BLUE stays the primary brand colour — cards and their
   icons/accents keep blue (kept "correct"), teal only sparks the hero, eyebrows,
   highlight word, CTAs and hovers. Linked on index.php first; rolls out site-wide
   once approved.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
    --x-accent:      #13c2a8;   /* teal / pine-mint — the accent spark */
    --x-accent-deep: #0c9d88;
    --x-accent-ink:  #04231f;
    --x-glow:        rgba(19,194,168,.45);
    --x-blue:        #2986cc;   /* primary brand blue — stays correct on cards */
    --x-blue-deep:   #1c4e78;
    --x-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ---- HERO : atmospheric + editorial ----------------------------------- */
.index-page .blog-hero .blog-hero-item::after {
    background: linear-gradient(180deg,
        rgba(10,25,36,.12) 0%,
        rgba(10,25,36,.34) 45%,
        rgba(10,25,36,.86) 100%) !important;
}
.index-page .blog-hero { position: relative; }
.index-page .blog-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
    background: url(../img/elevate-contour.svg) center bottom / 1500px auto no-repeat;
    opacity: .55; mix-blend-mode: screen; pointer-events: none; z-index: 2;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
            mask-image: linear-gradient(180deg, transparent, #000 70%);
}
/* Headline : serif display, larger, with a teal accent bar */
.index-page .blog-hero .blog-hero-content .hero-heading {
    font-family: var(--x-display);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.06;
    font-size: clamp(2.7rem, 6vw, 4.7rem) !important;
    text-shadow: 0 6px 34px rgba(0,0,0,.45);
}
.index-page .blog-hero .blog-hero-content .hero-heading::after {
    content: ""; display: block; width: 88px; height: 5px; margin: 1.15rem auto 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--x-accent), var(--x-accent-deep));
    box-shadow: 0 6px 18px var(--x-glow);
}
/* Category pill : teal spark */
.index-page .blog-hero .blog-hero-content .category {
    background: linear-gradient(135deg, var(--x-accent), var(--x-accent-deep)) !important;
    color: #fff !important;
    font-weight: 800; letter-spacing: .14em;
    box-shadow: 0 10px 26px var(--x-glow);
}
/* Watch-video : teal ring, teal fill on hover */
.index-page .btn-watch-video { border-color: var(--x-accent) !important; }
.index-page .btn-watch-video i { color: var(--x-accent); }
.index-page .btn-watch-video:hover {
    background: linear-gradient(135deg, var(--x-accent), var(--x-accent-deep)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.index-page .btn-watch-video:hover i { color: #fff; }

/* ---- SECTION TITLES : serif display + teal underline ------------------ */
.index-page .section-title h2 { font-family: var(--x-display); font-weight: 600; letter-spacing: -.01em; }
.index-page .section-title span { font-family: var(--x-display); }
.index-page .section-title h2::after {
    background: linear-gradient(90deg, var(--x-accent), var(--x-accent-deep)) !important;
    height: 4px !important; width: 72px !important;
}

/* ---- CARDS : refined depth, brand-BLUE accents kept correct (NOT teal) - */
.index-page .featured-posts .blog-card {
    border-radius: 18px !important;
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease !important;
}
.index-page .featured-posts .blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 54px rgba(16,40,54,.15) !important;
    border-color: #cfe0ee !important;               /* blue-tinted */
}
.index-page .featured-posts .blog-card h3 a:hover { color: var(--x-blue) !important; }
.index-page .featured-posts .blog-card .btn-read-more,
.index-page .featured-posts .blog-card .category-badge { color: var(--x-blue) !important; }
/* Facility cards keep the brand-blue lift + rounded corners */
.index-page .category-section .hero-post,
.index-page .category-section .sidebar-post { border-radius: 18px !important; }
.index-page .category-section .hero-post:hover {
    box-shadow: 0 26px 54px rgba(16,40,54,.15) !important;
    border-color: #cfe0ee !important;
}

/* ---- "WHY A&J" band : teal eyebrow + teal highlight word -------------- */
.index-page .hp-why__eyebrow {
    color: var(--x-accent) !important;
    border-color: var(--x-glow) !important;
}
.index-page .hp-why__title { font-family: var(--x-display); }
.index-page .hp-why__title b { color: var(--x-accent) !important; }

/* ---- CTA buttons : teal spark ---------------------------------------- */
.index-page .cta-box .btn-apply {
    background: linear-gradient(135deg, var(--x-accent), var(--x-accent-deep)) !important;
    color: #fff !important;
    font-weight: 800;
}
.index-page .cta-box .btn-apply:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
    .index-page .featured-posts .blog-card:hover { transform: none; }
}