/*
 * Local-only overrides — replacements for behaviors that lived in Elementor Pro JS
 * (Sticky widget, Motion Effects, Entrance Animations, Lazy Image preloader).
 *
 * Each rule below is paired with the runtime.ts function that drives it.
 */

/* ─── Salvation chat widget: hide header when chat is fullscreen on mobile ──── */
@media (max-width: 640px) {
  body.salvation-chat-open .elementor-location-header { display: none !important; }
}

/* ─── Header sticky + transparent-on-top behavior ─────────────────────────────
 * Original site:
 *   - Fixed to top of viewport
 *   - Transparent bg at scrollY=0 so the hero video shows through
 *   - Solid dark bg once the user starts scrolling, with a smooth fade
 * Driven by `body.is-scrolled` toggled in runtime.ts → initScrollState().
 */
header.elementor-location-header,
.elementor-location-header > .elementor-section.clearheader {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 999;
}

.elementor-location-header > .elementor-section.clearheader {
  background-color: transparent !important;
  transition: background-color 0.35s ease;
}

body.is-scrolled .elementor-location-header > .elementor-section.clearheader {
  background-color: #1a1a19 !important;
}


/* ─── Hero section: guarantee full-viewport height ────────────────────────────
 * On live, the first section relied on Elementor's `section-height-full` to
 * resolve to height: 100vh. Defensive override for pages where that breaks.
 */
/*
 * Hero sizing fix — the real story.
 *
 * Each hero page (home/team/contact/foodbikes/get-inspired) wraps the hero in a
 * flex container (`.e-con.e-flex`) sized exactly 100vh, with `--margin-top: -120px`
 * baked into post-{id}.css. On live, the in-flow header took 120px at the top, so
 * that negative margin pulled the hero up *into* the header zone — netting visually
 * 100vh starting at viewport top.
 *
 * With the header now `position: fixed` (out of flow), there's no 120px to absorb,
 * so the negative margin pulls the hero element *above* the viewport — leaving
 * 120px of the next section bleeding into the bottom of the fold. Zeroing the
 * negative margin on the first child restores 100vh-from-top behavior.
 *
 * The hero elements already carry their own `--min-height: 100vh` from per-page
 * CSS, so nothing else is needed.
 */
body.elementor-page [data-elementor-type="wp-page"] > :first-child,
body.elementor-page [data-elementor-type="wp-page"] > .elementor-section:first-of-type,
body.elementor-page [data-elementor-type="wp-page"] > .e-con:first-child,
body.elementor-page [data-elementor-type="wp-page"] > .e-flex:first-child {
  --margin-top: 0px !important;
  margin-top: 0 !important;
}

/*
 * Force 100vh on the FIRST CHILD of the page only (whatever tag/markup it
 * uses). On home/team/contact/foodbikes/get-inspired the first child is an
 * `.e-con.e-flex` hero container that already carries `--min-height: 100vh`
 * from per-page CSS; this rule guarantees it survives `@media` overrides
 * (post-31.css drops contact's container to 253px at mobile, etc).
 *
 * Targeting `:first-child` (not `.elementor-section:first-of-type`) is
 * critical: on team page the first child is the hero flex container while
 * the first SECTION is the team-intro which must NOT be 100vh.
 */
body.elementor-page [data-elementor-type="wp-page"] > :first-child,
body.elementor-page [data-elementor-type="wp-page"] > :first-child > .elementor-container {
  min-height: 100vh !important;
}
body.page-id-1666 [data-elementor-type="wp-page"] > .elementor-section:first-of-type,
body.page-id-1666 [data-elementor-type="wp-page"] > .elementor-section:first-of-type > .elementor-container,
body.page-id-1679 [data-elementor-type="wp-page"] > .elementor-section:first-of-type,
body.page-id-1679 [data-elementor-type="wp-page"] > .elementor-section:first-of-type > .elementor-container,
body.page-id-2433 [data-elementor-type="wp-page"] > .elementor-section:first-of-type,
body.page-id-2433 [data-elementor-type="wp-page"] > .elementor-section:first-of-type > .elementor-container {
  min-height: 0 !important;
}

/* Confirmation page (#2433) has no 100vh hero — its first section starts at the
 * very top of the viewport, so the fixed 120px header overlaps the "WE GOT YOUR
 * MESSAGE" heading. Push the page content below the header. */
body.page-id-2433 [data-elementor-type="wp-page"] > .elementor-section:first-of-type {
  padding-top: 140px !important;
}
@media (max-width: 767px) {
  body.page-id-2433 [data-elementor-type="wp-page"] > .elementor-section:first-of-type {
    padding-top: 100px !important;
  }
}


/* ─── Swiper lazy-preloader: hide ─────────────────────────────────────────────
 * Each Swiper slide ships with a `.swiper-lazy-preloader` div (a CSS-spinning
 * circle) that Swiper's lazy module hides once the image finishes loading. We
 * promote `data-src` → `src` at build time, so the spinner has nothing to
 * track and sticks forever. Just hide them — images are already loading.
 */
.swiper-lazy-preloader,
.elementor-image-carousel-wrapper .swiper-lazy-preloader {
  display: none !important;
}


/* ─── Entrance animations fallback ────────────────────────────────────────────
 * runtime.ts → initEntranceAnimations() observes `.elementor-invisible` elements
 * and removes the class when they enter the viewport, applying any animation
 * named in `data-settings._animation`. If JS fails to run (or runs late), this
 * fallback kicks in after 1.5s of page load so content is never permanently
 * hidden — graceful degradation, no SEO/accessibility hit.
 */
@keyframes _ah_reveal { to { visibility: visible; opacity: 1; } }
.elementor-invisible {
  animation: _ah_reveal 0s linear 1.5s forwards;
}
.elementor-invisible.is-revealed {
  animation: none;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ─── Mobile menu visibility ──────────────────────────────────────────────────
 * Elementor toggles the dropdown via JS-managed inline styles. Our runtime
 * adds/removes `.elementor-active` on the dropdown container; this rule makes
 * sure the open state actually shows the menu (Elementor's default CSS expects
 * its own JS to set inline display:block).
 */
/* Open dropdown: take it out of flow and overlay below the toggle, full-width.
 * Elementor's CSS leaves max-height/overflow in a half-collapsed state without
 * its frontend.js running, and the nav lives inside a header section that's
 * vertically constrained — without `position: absolute` the items render but
 * are clipped to 0 visible height.
 *
 * The 1024px breakpoint mirrors Elementor's default tablet/mobile threshold. */
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown.elementor-active {
    display: block !important;
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    max-height: none !important;
    overflow: visible !important;
    background: #1a1a19;
    padding: 12px 0 24px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .elementor-nav-menu--dropdown.elementor-active ul,
  .elementor-nav-menu--dropdown.elementor-active li {
    display: block !important;
    width: 100%;
  }
  .elementor-nav-menu--dropdown.elementor-active a.elementor-item {
    display: block !important;
    padding: 14px 24px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.2;
  }
  /* Anchor parent for the absolute positioning above */
  .elementor-location-header > .elementor-section.clearheader {
    position: fixed; /* already set above; reaffirmed for cascade ordering */
  }
  .elementor-location-header > .elementor-section.clearheader .elementor-container {
    position: relative;
  }
}


/* ─── Mobile menu overlay (Elementor Popup #20 replacement) ───────────────────
 * The header burger icon points to `#elementor-action=popup:open id=20`.
 * runtime.ts → initPopupTriggers() catches that click and toggles .is-open
 * on #mobile-menu-panel rendered in Layout.astro.
 */
.ah-mobile-menu {
  position: fixed;
  inset: 0;
  background: #1a1a19;
  color: #fff;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 145px 31px 40px;
  /* Slide in/out from the left (original popup: slideInLeft on mobile). */
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.5s ease, visibility 0s linear 0.5s;
}
.ah-mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s ease;
}
.ah-mobile-menu__close {
  position: absolute;
  top: 27px;
  right: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.ah-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ah-mobile-menu__nav a {
  color: #f9be08;
  text-decoration: none;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 35px;
  text-transform: uppercase;
  line-height: 1;
  padding: 20px 0;
}
.ah-mobile-menu__nav a:hover,
.ah-mobile-menu__nav a:focus {
  color: #f9f8f4;
}
.ah-mobile-menu__logo {
  margin-top: auto;
  display: inline-block;
}
.ah-mobile-menu__logo img {
  width: 189px;
  height: auto;
  display: block;
}
body.menu-open {
  overflow: hidden;
}


/* ─── Elementor Pro Gallery layout ────────────────────────────────────────────
 * The team page's gallery widget is configured for masonry — 4 cols desktop,
 * 2 cols tablet, 1 col mobile, 10px gap. Elementor JS computes this at runtime
 * from data-settings; we hard-code via CSS Grid since JS is gone. Items get
 * their aspect-ratio from data-width/data-height, baked in process_pages.py.
 *
 * Using CSS Grid instead of true masonry — masonry-2 spec is still flagged in
 * most browsers. Visually equivalent for galleries with similar aspect ratios.
 */
.elementor-gallery__container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1024px) {
  .elementor-gallery__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .elementor-gallery__container {
    grid-template-columns: 1fr;
  }
}
.elementor-gallery__container > a.e-gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
}
.elementor-gallery__container > a.e-gallery-item .e-gallery-image {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


/* ─── Lightbox (Elementor Pro lightbox replacement) ───────────────────────────
 * runtime.ts → initLightbox() catches clicks on
 * `a[data-elementor-open-lightbox="yes"]`, builds a slideshow group from
 * `data-elementor-lightbox-slideshow`, and toggles `.is-open` on this overlay.
 * Click on the dark backdrop (or X / Esc) closes; arrow keys / chevrons step.
 */
.ah-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.92);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 80px;
}
.ah-lightbox.is-open {
  display: flex;
}
.ah-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ah-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  object-fit: contain;
  display: block;
}
.ah-lightbox__caption {
  color: #ddd;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: center;
  min-height: 1em;
}
.ah-lightbox__close,
.ah-lightbox__prev,
.ah-lightbox__next {
  position: absolute;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  line-height: 1;
  padding: 12px;
  transition: opacity 0.2s ease;
  opacity: 0.7;
}
.ah-lightbox__close:hover,
.ah-lightbox__prev:hover,
.ah-lightbox__next:hover {
  opacity: 1;
}
.ah-lightbox__close {
  top: 16px;
  right: 24px;
  font-size: 48px;
}
.ah-lightbox__prev,
.ah-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 64px;
  width: 64px;
  text-align: center;
}
.ah-lightbox__prev {
  left: 16px;
}
.ah-lightbox__next {
  right: 16px;
}
@media (max-width: 768px) {
  .ah-lightbox {
    padding: 24px 16px;
  }
  .ah-lightbox__close {
    font-size: 36px;
  }
  .ah-lightbox__prev,
  .ah-lightbox__next {
    font-size: 40px;
  }
}

/* ─── Foodbikes "grote honger" grid: center last 2 items ───────────────────
 * 4-col grid, 14 items → last row has only 2. Place them in columns 2 & 3
 * so they appear centred. Tablet/mobile collapse to fewer cols so no fix needed.
 */
@media (min-width: 1025px) {
  .elementor-element-0b233bd .elementor-loop-container > *:nth-child(13) {
    grid-column: 2;
  }
  .elementor-element-0b233bd .elementor-loop-container > *:nth-child(14) {
    grid-column: 3;
  }
}

/* ─── HL-Signature footer badge ────────────────────────────────────────────── */
.ah-hl-signature {
  text-align: center;
  /* Negative top margin eats the footer section's internal dead space;
     the footer's own bottom margin is zeroed below. */
  margin-top: -48px;
  padding: 0 24px 24px;
  background: #1a1a19;
}
.elementor-location-footer .elementor-element-69449e04,
footer.elementor-element-69449e04 {
  margin-bottom: 0 !important;
}
.ah-hl-signature a {
  display: inline-block;
}
.ah-hl-signature img {
  height: 36px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .ah-hl-signature img {
    height: 44px;
  }
}

/* Elementor spacer heights — the rule lives in custom-frontend.min.css (full
   bundle) which we don't load; the lite bundle omits it, so per-element
   --spacer-size vars from post-N.css never resolve. */
.elementor-widget-spacer .elementor-spacer-inner {
  height: var(--spacer-size);
}

/* Elementor divider — like the spacer rule above, the base styles live only in
   custom-frontend.min.css (full bundle). post-N.css sets the --divider-* vars
   per element; without these the separator renders 0px/none (invisible). */
.elementor-widget-divider {
  --divider-border-style: none;
  --divider-border-width: 1px;
  --divider-color: #0c0d0e;
}
.elementor-widget-divider .elementor-divider {
  display: flex;
}
.elementor-widget-divider .elementor-divider-separator {
  display: flex;
  margin: 0;
  direction: ltr;
  border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
}

/* Cookie consent banner — Consent Mode v2 starts denied, runtime.ts grants only
   after OK. */
.ah-cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 18px;
  background: #1a1a19;
  color: #f9f8f4;
  border: 1px solid rgba(249, 248, 244, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  font-family: 'Barlow', sans-serif;
}
.ah-cookie-banner[hidden] {
  display: none;
}
.ah-cookie-banner p {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}
.ah-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ah-cookie-banner a,
.ah-cookie-banner button {
  color: #f9f8f4;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.ah-cookie-banner a {
  opacity: 0.78;
}
.ah-cookie-banner button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(249, 248, 244, 0.35);
  background: transparent;
  cursor: pointer;
}
.ah-cookie-banner button[data-cookie-accept] {
  background: #f9be08;
  border-color: #f9be08;
  color: #1a1a19;
}
@media (max-width: 640px) {
  .ah-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .ah-cookie-banner__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}