/* ============================================================
   EmZAp — frog-inspired styling for HFE Header & Footer
   Applies to the header/footer WÁTGU built in Elementor (HFE).
   Only colors, spacing, typography, hover — structure untouched.
   Palette: deep green #2f6b46 / light green #e8f2ec / ink #0e1a13
   ============================================================ */

:root {
  --ez-green: #2f6b46;
  --ez-green-d: #24543a;
  --ez-green-mid: #4e9c6b;
  --ez-green-l: #e8f2ec;
  --ez-ink: #0e1a13;
  --ez-muted: #5a6b60;
  --ez-line: #dbe6de;
  --ez-logo-bg: #444444;   /* matches cropped-logo.png background */
}

/* ---------- FIX: theme auto page-title duplicates our hero title ---------- */
.page-header .entry-title,
.hentry > .page-header,
.elementor-page .page-header,
.page-id-34 .entry-title, .page-id-35 .entry-title, .page-id-36 .entry-title,
.page-id-37 .entry-title, .page-id-38 .entry-title, .page-id-39 .entry-title,
.page-id-40 .entry-title, .page-id-41 .entry-title, .page-id-42 .entry-title {
  display: none !important;
}

/* ---------- FIX: hero / CTA buttons — force readable white text ---------- */
.ez .ez__btn,
.ez .ez__hero .ez__btn,
.ez__ctaband .ez__btn {
  color: #ffffff !important;
}
.ez__ctaband .ez__btn {
  background: #ffffff !important;
  color: var(--ez-green) !important;
}

/* ---------- HEADER ---------- */
/* hello-elementor wraps the HFE header in header#masthead > .elementor-74 */
/* header background = logo background (#444) so the logo blends in */
header#masthead,
header#masthead .elementor,
header#masthead .elementor > .e-con,
.ehf-header #site-header,
.ehf-header .elementor-location-header {
  background: var(--ez-logo-bg) !important;
}
header#masthead {
  border-bottom: 3px solid var(--ez-green);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* header inner: logo LEFT, menu to its right — roomy padding */
header#masthead .elementor-74 > .e-con > .e-con-inner,
header#masthead .elementor-74 .e-con-inner,
.ehf-header .elementor-location-header .e-flexbox {
  padding: 12px clamp(20px, 4vw, 48px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  flex-wrap: nowrap !important;
}

/* logo sits at the far left */
header#masthead .elementor-widget-site-logo {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
header#masthead .hfe-site-logo img,
header#masthead .elementor-widget-site-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}

/* menu sits right after the logo (left-aligned group), fills remaining space */
header#masthead .elementor-widget-navigation-menu {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* ---------- NAV MENU (light text on dark header) ---------- */
/* keep the whole menu on ONE line (no wrapping to a 2nd row) */
header#masthead .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
header#masthead ul.hfe-nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: nowrap;
}
header#masthead .hfe-nav-menu .menu-item {
  flex: 0 0 auto !important;
  white-space: nowrap;
}

.hfe-nav-menu__layout-horizontal .hfe-nav-menu .menu-item a.hfe-menu-item,
.hfe-nav-menu .menu-item a.hfe-menu-item,
.elementor-widget-navigation-menu .menu-item a {
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.005em;
  padding: 8px 11px !important;
  border-radius: 9px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.elementor-widget-navigation-menu .menu-item a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12);
}

/* active / current menu item — brand green highlight */
.hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item,
.elementor-widget-navigation-menu .menu-item.current-menu-item a {
  color: #ffffff !important;
  background: var(--ez-green);
}

/* submenu (dropdown) — dark to match */
.hfe-nav-menu ul.sub-menu {
  background: #3a3a3a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 6px;
  overflow: hidden;
}
.hfe-nav-menu ul.sub-menu .menu-item a.hfe-menu-item {
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86) !important;
}

/* mobile toggle icon light */
.hfe-nav-menu__toggle .hfe-nav-menu-icon,
.hfe-nav-menu-icon i {
  color: #ffffff !important;
}

/* ---------- FOOTER ---------- */
/* hello-elementor wraps the HFE footer in footer#colophon > .footer-width-fixer > .elementor */
footer#colophon,
footer#colophon .footer-width-fixer,
.ehf-footer #site-footer,
.ehf-footer .elementor-location-footer {
  background: var(--ez-ink);
  color: rgba(255, 255, 255, 0.72);
}

/* roomy padding on the footer flex container */
footer#colophon .footer-width-fixer > .elementor > .e-con,
footer#colophon .footer-width-fixer .e-flexbox,
.ehf-footer .elementor-location-footer > .e-con {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* copyright text + links */
.ehf-footer .hfe-copyright-wrapper,
.ehf-footer .elementor-widget-copyright .hfe-copyright-wrapper {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.ehf-footer .hfe-copyright-wrapper a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
}
.ehf-footer .hfe-copyright-wrapper a:hover {
  color: var(--ez-green-mid) !important;
}

/* footer nav / links if present */
.ehf-footer .menu-item a,
.ehf-footer .elementor-widget-navigation-menu .menu-item a {
  color: rgba(255, 255, 255, 0.72) !important;
}
.ehf-footer .menu-item a:hover {
  color: #ffffff !important;
}

/* ============================================================
   COMING SOON (page 24) — full-screen background video
   Elementor self-hosted video, cropped to show bottom 1/3
   (object-position keeps the horizon; crops more from bottom).
   ============================================================ */

/* the Elementor video container on page 24 stretches full viewport */
.page-id-24 .elementor-24 .e-con,
.page-id-24 .elementor-24 .e-con-inner {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.page-id-24 .elementor-24 {
  margin: 0 !important;
}

/* the video itself: fill the viewport, cover, crop from bottom */
.page-id-24 video.e-self-hosted-video-base,
.page-id-24 .elementor-24 video {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 640px;
  object-fit: cover !important;
  /* keep upper area (horizon at top 1/3) — crop more from the bottom */
  object-position: center 30% !important;
  display: block;
  margin: 0;
  background: #0a0a0a;
}

/* remove the wrapping <p> gap that WP may add around the video */
.page-id-24 .page-content p {
  margin: 0 !important;
}

/* hide native video controls (background video feel) */
.page-id-24 video.e-self-hosted-video-base::-webkit-media-controls,
.page-id-24 video.e-self-hosted-video-base::-webkit-media-controls-enclosure {
  display: none !important;
}