/* ============================================================
   JustAir 2026 — RESOURCES (Articles) page modernization.
   IMPORTANT: load ONLY on a /resources-copy staging duplicate,
   never on production /resources. Templated on about-modern:
   keeps + restyles the navbar, dark-logo swap, mesh hero band,
   floating article cards. Strict brand palette only.
   ============================================================ */
/* JM-BUILD: resources-2026-06-13a */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  --navy:#211F54; --sky:#29ABE2; --sky-dk:#196A8C; --gold:#E4AF60; --green:#22B573;
  --grey:#98A5B2; --grey-med:#4B5157; --light-bg:#ECF3F7; --bd:hsl(220 20% 90%);
  --shadow-sm:0 2px 8px -2px rgba(33,31,84,.08);
  --shadow-md:0 8px 24px -8px rgba(33,31,84,.15);
}

body{ font-family:'Manrope',system-ui,sans-serif!important; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,[class*="heading"],[class*="blog-post-title"]{ font-family:'Sora',system-ui,sans-serif!important; letter-spacing:-.025em!important; }

.navbar_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-darktext.svg")!important; }

/* ---- HERO band: the centered txt-white heading gets a mesh gradient ---- */
.centered-heading.txt-white{ color:#fff!important; font-size:clamp(2.6rem,6vw,4.4rem)!important; font-weight:800!important; line-height:1.04!important; }
/* the hero band gets a [data-jm-hero] marker from the JS (outer .sidekick wrapper) */
[data-jm-hero]{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 540px at 82% 16%, rgba(41,171,226,.42), transparent 60%),
    radial-gradient(720px 520px at 8% 88%, rgba(34,181,115,.22), transparent 55%),
    linear-gradient(135deg,#211F54 0%,#196A8C 100%) !important;
  background-size:cover !important; background-repeat:no-repeat !important;
  padding:clamp(96px,12vw,150px) 0 !important;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
/* kill the old hero photo on any inner wrapper so the mesh reads clean */
[data-jm-hero] .sidekick-wrapper,
[data-jm-hero] .sidekick-content,
[data-jm-hero] .blog-body,
[data-jm-hero] .section-spacing{ background:transparent!important; background-image:none!important; padding-top:0!important; padding-bottom:0!important; }
[data-jm-hero] *{ color:#fff!important; }
/* the title's own card-like panel (if any) becomes invisible — mesh is the surface */
[data-jm-hero] .centered-heading{ background:transparent!important; box-shadow:none!important; padding:0!important; max-width:none!important; }
.jm-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; margin-bottom:1.1rem;
  border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.02em; color:#fff!important;
}
.jm-eyebrow::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--green); }

/* ---- article grid: floating cards ---- */
.blog-post-item{
  position:relative; overflow:hidden; background:#fff!important;
  border:1px solid rgba(33,31,84,.08)!important; border-radius:20px!important;
  box-shadow:var(--shadow-sm),0 22px 46px -30px rgba(33,31,84,.26)!important;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s!important;
}
.blog-post-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md),0 30px 60px -28px rgba(33,31,84,.32)!important; }
.blog-post-image{
  width:100%!important; aspect-ratio:16/10; object-fit:cover!important; display:block!important; border-radius:0!important;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.blog-post-item:hover .blog-post-image{ transform:scale(1.04); }
.blog-post-title{
  color:var(--navy)!important; font-size:clamp(1.1rem,1.6vw,1.3rem)!important; line-height:1.25!important; font-weight:700!important;
  transition:color .2s;
}
.blog-post-item:hover .blog-post-title{ color:var(--sky-dk)!important; }
.blog-body, .blog-post-item p{ color:var(--grey-med)!important; line-height:1.6!important; }

/* category / read-more chips, dates */
.blog-post-item .flex-h{ color:var(--grey-med)!important; }

.section-spacing:not([data-jm-hero]){ background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFC 100%)!important; }

/* footer */
.footer-section,.footer-section.background-color-black{ background-color:var(--navy)!important; }
.footer_logo{ max-height:40px; width:auto; }
.footer-section .footer_link-list a,.footer-section a.footer_link{ color:var(--gold)!important; transition:color .2s; }
.footer-section .footer_link-list a:hover,.footer-section a.footer_link:hover{ color:#FFFFFF!important; }

.wave_background.dark-blue{ background-color:transparent!important; }
.background-holder{ display:none!important; }

a:focus-visible{ outline:3px solid rgba(41,171,226,.55)!important; outline-offset:3px; border-radius:8px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

/* white JustAir wordmark in the footer (navy bg) — keeps the colour mark */
.footer_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-whitetext.svg") !important; }