/* ========= pages/home.css ========= */
/* styles unique to the Home page */



/* ========= Home header background + fades ========= */
.home header{
  position: relative;
  z-index: 0; /* keep under the sticky nav */
  background:
    url("../../assets/backgrounds/home-bg.jpg") right top / cover no-repeat,
    var(--bg);
  border-bottom: 1px solid rgba(255,255,255,.02);
  overflow: hidden;
}



/* Make sure hero sits in the header layer (below the nav) */
.home header .hero{ position: relative; z-index: 0; }

/* (remove any stray z-index override on .nav-panel here) */
/* If you had this, delete it (it’s invalid CSS anyway):
   .nav-panel { z-index: 1800; !important; }
*/

/* ====== Your existing hero sizing/positioning rules stay the same ====== */
/* .home .hero.wrap, .home .hero .hero-grid, .hero-title-svg, .sub, 
   .hero-visual, .hero-chars, responsive @media queries, etc. */
/* make sure the hero itself doesn’t set its own background */
.home .hero { background: transparent; }


.nav-panel { 

  z-index: 1800; !important; 

 }


/* --- semantics-only (kept from yours) --- */
.home .hero h1{ text-transform:uppercase; z-index: 5;}

/* ============= HERO: FULL-BLEED OUTER ============= */
/* Break the hero out of the site container so the header/hero is full width */
.home .hero.wrap{
  max-width: none;

  width: 100vw;
  padding-inline: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* top/bottom spacing for the whole hero row */
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(6px, 1.6vw, 14px);
}

/* Center the actual hero content inside the full-bleed area */
.home .hero .hero-grid{

  max-width: 1920px;                /* play with 1360–1500 if you want wider */
  margin-left: 10%;
  margin-right: 10%;

  padding-inline: clamp(16px, 6vw, 48px); /* responsive gutters */
  display: grid;
  gap: 22px;
  grid-template-columns: 1.3fr 0.7fr;     /* more room for SVG title */
  align-items: center;
}

/* ============= TITLE + SUBHEAD ============= */
.hero-title-svg{
  display: block;
  width: min(100%, 1440px);         /* run wider across the banner */
  height: auto;
  margin-bottom: 0px;
  margin-left: -10px;
  
}

.sub{
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.5;
  letter-spacing: .2px;
  font-weight: lighter;
  max-width: 60ch;
  margin: 10 0 22px;
  color: #35E2FF;

  margin-bottom: 50px;
  margin-left: 8px;
}

/* ============= CHARACTERS VISUAL ============= */
.hero-visual{
  position: relative;
  mask-image: none;                 /* hard edge; no bg peeking under feet */
  overflow: visible;                /* allow scaled art to bleed a bit */
  display: grid;                    /* so child can align to bottom */
}

.hero-chars{
  align-self: end;
  width: 100%;                      /* larger than column for drama */
  max-width: none;
  transform: translateY(8px) translateX(4%) scale(1.25);
  margin-bottom: 0px;             /* tucks into header bottom */
  filter:
    drop-shadow(0 24px 38px rgba(0,0,0,.58))
    drop-shadow(0 4px 14px rgba(29,199,255,.18));
  padding-right: 40px;
}

/* ============= OTHER PAGE BITS YOU KEPT ============= */
.home .contact{ position:relative; padding-bottom:24px }
.home .umkc{ width:280px; max-width:60%; margin-top:18px }
.home .rae{
  position:absolute; right:-10px; bottom:-12px;
  width:210px; max-width:40%;
  pointer-events:none; user-select:none;
}

/* section spacing tweaks */
.home #learn{ }
.home #students{ margin-bottom:40px }

/* ============= RESPONSIVE ============= */
@media (max-width: 1024px){
  .home .hero .hero-grid{
    grid-template-columns: 1fr;     /* stack on tablet */
    gap: 28px;
  }
  .hero-title-svg{ width: min(100%, 1024px) }
  .hero-chars{
    width: 100%;
    transform: translateY(6px) translateX(0) scale(1);
    margin-bottom: 0px;
  }
}

@media (max-width: 720px){
  .hero-title-svg{ width: min(100%, 560px) }
  .home .rae{ position:static; display:block; margin:18px auto 0 }
  .home .umkc{ max-width:70% }
}



/* --- Remove extra padding inside home header / hero --- */
.home header,
.home header .hero {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

/* --- Optional: tighten overall hero spacing --- */
.home .hero .wrap,
.home .hero .hero-grid {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 auto;
}

/* --- Bring back soft fade at bottom of header --- */
.home header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(11,15,26,0), rgba(11,15,26,1));
  pointer-events: none;
  z-index: 2;  /* sits above bg image but below hero content */
}
/* Tighten hero spacing inside the header */
.home header .hero {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Remove any bottom padding/margin from inner containers */
.home header .hero .wrap,
.home header .hero > *:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Pull the bottom fade up slightly to overlap the image better */
.home header::after {
  height: 160px; /* slightly taller for smoother blend */
  bottom: -60px; /* pulls fade up into the artwork */
  background: linear-gradient(to bottom, rgba(11,15,26,0), rgba(11,15,26,1));
}



/* Tighten header bottom on smaller screens */
header .hero {
  padding-bottom: 0;            /* kill the gap */
}

/* Bring back a soft blend at the bottom of the header */
header {
  position: relative;
}
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 72px;                 /* feel free to tweak (60–100px) */
  background: linear-gradient(to bottom, rgba(11,15,26,0), rgba(11,15,26,1));
  pointer-events: none;
  z-index: 0;
}

/* Make sure header content sits above the fade */
header .site-nav,
header .hero {
  position: relative;
  z-index: 1;
}

/* Just in case any child has a trailing margin */
header .hero > *:last-child { margin-bottom: 0; }

/* Optional: if you want a touch of breathing room only on wide screens */
@media (min-width: 1200px){
  header .hero { padding-bottom: 8px; }  /* tiny pad to avoid crowding */
}



/* 1) Keep the hero tight at the bottom */
header .hero { padding-bottom: 0; }

/* 2) Strengthen the soft fade so it covers any tiny seam */
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 96px; /* tweak 72–120px to taste */
  background: linear-gradient(to bottom, rgba(11,15,26,0), rgba(11,15,26,1));
  pointer-events: none;
  z-index: 0;
}
header, header .hero { position: relative; z-index: 1; }

/* 3) Kill the top padding of the first section after the header */
main > section:first-of-type { 
  padding-top: 0 !important; 
  margin-top: 0 !important; 
}

/* If your page doesn't use <main>, this fallback also works: */
header + section { 
  padding-top: 0 !important; 
  margin-top: 0 !important; 
}

/* (Optional) Nudge content slightly up under the fade if you want it extra tight */
@media (max-width: 1200px){
  main > section:first-of-type,
  header + section { margin-top: -8px; } /* remove if you don't want overlap */
}


/* keep hero below the nav overlay on the home page */
.home header .hero{ position: relative; z-index: 0; }