/* HNS static rebuild — overrides for the vanilla islands (hero carousel, marquee,
   mobile menu) plus the placeholder newsletter form. Loaded after the theme sheets. */

/* Hero carousel (slides fade in/out; slick is gone) */
.hero-wrapper .global-carousel { position: relative; overflow: hidden; }
.hero-wrapper .global-carousel .hero-slider { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-wrapper .global-carousel .hero-slider.is-active { opacity: 1; }
.hero-slider.background-image { background-size: cover; background-position: center; }
/* Dark photo overlay — the dropped theme JS used to paint this from data-opacity="5".
   The theme markup ships the overlay at z-index:-1 (behind the photo), so it did
   nothing. Lift it ABOVE the slide's bg image and push the text above the overlay
   so the headline pops. */
.home .hero-wrapper .hero-overlay { background: rgba(0, 0, 0, .45); z-index: 1; }
/* Lift the text + CTA above the overlay individually. Do NOT position .container
   (that would make it the containing block for the absolutely-positioned circle
   CTA and pull it inward from the hero's bottom-right corner). */
.home .hero-wrapper .hero-style5 { position: relative; z-index: 2; }
.home .hero-wrapper .circle-btn { z-index: 2; }

/* Marquee (CSS-driven infinite scroll of a duplicated group) */
.slider__marquee { overflow: hidden; }
.slider__marquee .hns-marquee-track { display: flex; width: max-content; animation: hnsMarquee 26s linear infinite; }
.slider__marquee .hns-marquee-track .marquee__group { display: flex; align-items: center; flex: 0 0 auto; }
@keyframes hnsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .slider__marquee .hns-marquee-track { animation: none; } }

/* Off-canvas mobile menu — the dropped theme JS used to position + hide this, so
   without CSS it renders full-width on-screen and flashes on every page load.
   Pin it off-screen with a transform so it can never flash, and slide in on open. */
.mobile-menu-wrapper { position: fixed; top: 0; left: 0; height: 100%; width: 320px; max-width: 84vw; background: #fff; transform: translateX(-100%); transition: transform .35s ease; z-index: 9999; overflow-y: auto; visibility: visible; box-shadow: 0 0 44px rgba(0, 0, 0, .28); }
.mobile-menu-wrapper.body-visible { transform: translateX(0); }

/* Mobile menu backdrop */
.hns-mobile-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 9998; }
.hns-mobile-backdrop.is-open { opacity: 1; visibility: visible; }

/* Footer: the newsletter section's inner padding (applied to .e-con-inner via
   Elementor's --padding-block-*) leaves a blank gap above the copyright line.
   Tighten the bottom directly on the inner wrapper (the custom prop override
   doesn't reach the consumed logical property). */
.elementor-1979 .elementor-element-d130da9 > .e-con-inner { padding-block-start: 60px !important; padding-block-end: 44px !important; }

/* Newsletter placeholder form (Phase 5 swaps in the real Mailchimp embed) */
.hns-nl-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hns-nl-fields input { flex: 1 1 160px; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .15); font: inherit; }
.hns-nl-btn { background: #2CC4EE; color: #0A0C00; font-weight: 800; border: 0; border-radius: 999px; padding: 12px 28px; cursor: pointer; }
.hns-nl-btn:hover { background: #23b6df; }
.hns-nl-thanks { padding: 14px 18px; border-radius: 12px; background: #16a34a; color: #fff; font-weight: 700; text-align: center; line-height: 1.4; }