/* =====================
   Global stability
   ===================== */
:root {
  /* Avoid page-width nudge when the vertical scrollbar appears */
  scrollbar-gutter: stable both-edges;
}
html, body {
  /* Avoid 100vw overflow -> horizontal scroll -> reflow */
  overflow-x: hidden;
}

/* =====================
   Hero / Parallax layout
   ===================== */
/* OUTER BOX: reserves stable space; never transforms */
.ea-header-title {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;  /* adjust if your hero ratio changes */
  min-height: 540px;     /* desktop floor */
}
@media (max-width: 767.98px) {
  .ea-header-title { min-height: 320px; }
}

/* MOVING LAYER: lives inside the box; safe to animate later */
.ea-header-parallax {
  position: absolute;
  inset: 0;
  background: center center / cover no-repeat;
  transform: none;         /* start stable on first paint */
  will-change: transform;  /* animation happens after ready */
}

/* Foreground text container (align with Bootstrap grid if you wrap with .container) */
.ea-header-title-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* center by default; override if needed */
}

/* Safety: before JS runs, keep parallax still */
.no-js .ea-header-parallax { transform: none !important; }

/* ===========================
   Compatibility with old class
   =========================== */
/* If the original element still has .ea-header-title-parallax on it,
   neutralize transforms until we explicitly enable them */
.ea-header-title-parallax { transform: none !important; }
html.parallax-ready .ea-header-title-parallax { transform: translateZ(0); }

/* Ensure background layer sits under content; content sits on top */
.ea-header-parallax { z-index: 0; }
.ea-header-title-inner { z-index: 1; }

/* Make the hero <img> behave like a CSS background */
.ea-header-parallax > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fills the box without reflow */
}

/* Overlay rules (put at the bottom of eden_title.css) */
.ea-header-title { position: relative; overflow: hidden; aspect-ratio: 16/9; min-height: 540px; width: 100%; }
.ea-header-parallax { position: absolute; inset: 0; z-index: 0; }
.ea-header-parallax > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ea-header-title-inner { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; }
/* optional: if you want horizontal centering too */
/* .ea-header-title-inner { justify-content: center; } */

/* 1) Readability: add a subtle dark scrim over the image */
.ea-header-title { position: relative; }            /* ensure positioning */
.ea-header-title::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Dark-to-light vertical gradient; tweak alphas to taste */
  background: linear-gradient(to bottom,
              rgba(0,0,0,.55) 0%,
              rgba(0,0,0,.30) 35%,
              rgba(0,0,0,.25) 100%);
  z-index: 1;                 /* sits above image (0) but below text (2) */
  pointer-events: none;
}
/* Ensure text sits on top of the scrim */
.ea-header-title-inner { z-index: 2; }

/* Make hero title readable against bright images (scoped override) */
.ea-header-title .ea-title {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
/* Optionally make body copy readable too (uncomment if needed) */
/*
.ea-header-title-inner p,
.ea-header-title-inner li { color: #fff; }
*/

/* 2) Move the title higher (reduce top spacing) */
.ea-header-title-inner {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-start;     /* <— top-align vertically */
  justify-content: flex-start; /* <— left-align horizontally */
  padding-top: clamp(8px, 3vh, 24px); /* adjust how high the title sits */
}

/* === FORCE TITLE TO TOP, OVERRIDING THEME PADDING/MARGINS === */

/* 1) Kill any top/bottom padding the theme adds on the hero container */
.ea-header-title,
.ea-header-title.ea-header-title-md {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Ensure the overlay layer aligns to the top-left with minimal offset */
.ea-header-title-inner {
  display: flex !important;
  align-items: flex-start !important;   /* top align */
  justify-content: flex-start !important; /* left align (use center if you prefer) */
  padding-top: 0px !important;          /* adjust this number to taste */
  padding-bottom: 0 !important;
}

/* 3) Nuke top padding/margins that Bootstrap or legacy CSS might add inside */
.ea-header-title-inner > .container,
.ea-header-title-inner > .container > .row:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4) Remove extra margin on the first heading */
.ea-header-title .ea-title {
  margin-top: 0 !important;
  margin-bottom: .25rem !important;  /* tiny breathing room */
}

/* 5) If any utility classes are sneaking in (mt-*, pt-*), neutralize them in the hero */
.ea-header-title-inner [class*="mt-"],
.ea-header-title-inner [class*="pt-"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* === HARD OVERRIDES: pin hero text to the very top === */

/* 0) Make sure the hero box itself isn't adding top/bottom padding */
.ea-header-title,
.ea-header-title.ea-header-title-md {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 1) Absolute overlay fills the hero and uses GRID to top-align content */
.ea-header-title-inner {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  display: grid !important;
  align-content: start !important;   /* vertical alignment (top) */
  justify-content: start !important; /* horizontal alignment (left) */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* 2) Nuke any top spacing that sneaks in via container/row/utilities */
.ea-header-title-inner > .container,
.ea-header-title-inner > .container > .row:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.ea-header-title-inner [class*="mt-"],
.ea-header-title-inner [class*="pt-"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Headline margins (your .ea-title sets 10px top by default) */
.ea-header-title .ea-title {
  margin-top: 0 !important;
}

/* 4) Optional: tighten the hero height so the top looks closer to the teal bar */
@media (min-width: 768px) {
  .ea-header-title { min-height: 460px !important; } /* try 460–500; adjust to taste */
}

/* Center the overlay content horizontally and set a predictable top offset */
.ea-header-title-inner{
  justify-content: center !important;   /* center the .container */
  align-items: flex-start !important;   /* keep it top-aligned */
  padding-top: 48px !important;         /* desktop top offset */
}
@media (max-width: 767.98px){
  .ea-header-title-inner{ padding-top: 24px !important; }  /* mobile offset */
}

/* Make sure the inner .container itself has no sneaky top spacing */
.ea-header-title-inner > .container{ margin-top:0 !important; padding-top:0 !important; }

/* Headline: remove any top margin forcing it upward */
.ea-header-title .ea-title{ margin-top:0 !important; }


/* === Brighter overlay text inside the hero only === */
.ea-header-title .ea-title {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Body copy, lists, small text in the overlay */
.ea-header-title-inner p,
.ea-header-title-inner li,
.ea-header-title-inner small,
.ea-header-title-inner .lead {
  color: rgba(255,255,255,.88) !important; /* softer than pure white, still bright */
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* Section headings in the overlay */
.ea-header-title-inner h2,
.ea-header-title-inner h3,
.ea-header-title-inner h4,
.ea-header-title-inner h5,
.ea-header-title-inner h6 {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Keep your brand-green links readable on the dark scrim */
.ea-header-title-inner a:not(.btn) {
  color: #8ebf42 !important; /* your existing brand color */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Mobile: convert hero to stacked image + text (no overlay) */
@media (max-width: 767.98px){
  .ea-header-title{ 
    aspect-ratio: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  .ea-header-parallax{
    position: relative !important;
    height: 42vh !important;      /* hero image height on phones */
    min-height: 220px !important;  /* floor for small devices */
    inset: auto !important;        /* reset absolute inset */
  }
  .ea-header-parallax > img{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  .ea-header-title-inner{
    position: static !important;   /* let text flow under the image */
    padding-top: 12px !important;
  }
  /* keep readability */
  .ea-header-title::after{ display:none !important; } /* remove dark scrim if you like */
}

/* --- MOBILE HOTFIX: no hero image, no extra top space --- */
@media (max-width: 767.98px){
  /* Hide the image + scrim */
  .ea-header-parallax,
  .ea-header-title::after { display: none !important; }

  /* Remove any reserved height/padding from the hero wrapper */
  .ea-header-title,
  .ea-header-title.ea-header-title-md{
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Let the text flow immediately below the nav */
  .ea-header-title-inner{
    position: static !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;   /* tweak this number if you want a bit more/less room */
    display: block !important;
  }

  /* Nuke any sneaky top spacing inside */
  .ea-header-title-inner > .container,
  .ea-header-title-inner > .container > .row:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Headline margin control */
  .ea-header-title .ea-title{
    margin-top: 0 !important;
    margin-bottom: .5rem !important;
    color: #11

/* Nudge the mobile title down from the teal bar */
@media (max-width: 767.98px){
  .ea-header-title-inner{
    padding-top: 24px !important;        /* try 14–24px to taste */
  }
  .ea-header-title .ea-title{
    margin-top: 10px !important;          /* tiny breathing room on the H1 */
  }
}