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

/* ---- iOS Safari hardening (real-device behaviors that don't show in Chromium) ----
   1. -webkit-text-size-adjust: stop iOS from auto-inflating text (the "all text
      moves around" on tap/rotate/navigation).
   2. overscroll-behavior: kill the rubber-band bounce that, on every page, reveals
      the fixed drifting-logo background BELOW the footer (the "full screen of empty
      page underneath the footer").
   3. Solid background on the scroll root so any overscroll shows a clean color. */
/* Solid canvas background so iOS overscroll (below the footer) shows a clean color
   instead of empty page ("ghost footer space"). This USED to hide the inner-page
   drift, because that drift was body::before at z-index:-1 (needs canvas
   propagation). Fixed below by switching inner pages to the .main-area::before
   drift layer (z-index:0), which renders fine with an html background. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; background: #edf2f7; }
/* Sticky footer: on pages whose content is shorter than the screen (common on big
   iPad screens), keep the footer at the bottom of the viewport instead of floating
   mid-page with blank space beneath it. Body is a flex column; the footer takes
   margin-top:auto to absorb any leftover space and sit at the bottom. NOTE: uses
   a STABLE 100vh (NOT 100dvh) — 100dvh changes as the iOS address bar hides/shows,
   which made the layout grow and shove the footer down mid-scroll. Anchoring via
   the footer's margin (not main-area flex-grow) also avoids interacting with
   .main-area's contain:paint. */
body { overscroll-behavior-y: none; min-height: 100vh; display: flex; flex-direction: column; }
body > .elementor-1979 { margin-top: auto; }

/* Inner-page drift watermark: use the .main-area::before layer (z-index:0, same as
   the homepage — visible over the html background) instead of body::before
   (z-index:-1, which the html background covers). */
body:not(.home) .main-area::before { display: block !important; }
body:not(.home)::before { display: none !important; }

/* FontAwesome replacement: the theme used FA for exactly two glyphs. We dropped
   the ~90KB FA font/CSS and draw them with plain characters in the inherited font.
   .fa-times = mobile menu close, .fa-star-of-life = marquee separator. */
.fa-times { font-family: inherit !important; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; }
.fa-times::before { content: "\00d7"; }        /* × (multiplication sign — always text, never emoji) */
/* star-of-life marquee separator: the EXACT FontAwesome 6 Free Solid star-of-life
   glyph (\f621) drawn as an SVG mask filled with currentColor. Pixel-identical to
   the original icon, always monochrome in the accent color — NOT an emoji (U+2733
   rendered as a color emoji on iOS, which was the regression). */
.fa-star-of-life { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='1%20-448%20480%20512'%3E%3Cpath%20transform='scale(1%20-1)'%20d='M473%20114Q479%20110%20480.5%20103.5Q482%2097%20479%2092L447%2036Q444%2031%20437.5%2029.0Q431%2027%20425%2030L289%20109V-48Q289%20-55%20284.5%20-59.5Q280%20-64%20273%20-64H209Q202%20-64%20197.5%20-59.5Q193%20-55%20193%20-48V109L57%2030Q51%2027%2044.5%2029.0Q38%2031%2035%2036L3%2092Q0%2097%201.5%20103.5Q3%20110%209%20114L145%20192L9%20270Q3%20274%201.5%20280.5Q0%20287%203%20292L35%20348Q38%20353%2044.5%20355.0Q51%20357%2057%20354L193%20275V432Q193%20439%20197.5%20443.5Q202%20448%20209%20448H273Q280%20448%20284.5%20443.5Q289%20439%20289%20432V275L425%20354Q431%20357%20437.5%20355.0Q444%20353%20447%20348L479%20292Q482%20287%20480.5%20280.5Q479%20274%20473%20270L337%20192Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='1%20-448%20480%20512'%3E%3Cpath%20transform='scale(1%20-1)'%20d='M473%20114Q479%20110%20480.5%20103.5Q482%2097%20479%2092L447%2036Q444%2031%20437.5%2029.0Q431%2027%20425%2030L289%20109V-48Q289%20-55%20284.5%20-59.5Q280%20-64%20273%20-64H209Q202%20-64%20197.5%20-59.5Q193%20-55%20193%20-48V109L57%2030Q51%2027%2044.5%2029.0Q38%2031%2035%2036L3%2092Q0%2097%201.5%20103.5Q3%20110%209%20114L145%20192L9%20270Q3%20274%201.5%20280.5Q0%20287%203%20292L35%20348Q38%20353%2044.5%20355.0Q51%20357%2057%20354L193%20275V432Q193%20439%20197.5%20443.5Q202%20448%20209%20448H273Q280%20448%20284.5%20443.5Q289%20439%20289%20432V275L425%20354Q431%20357%20437.5%20355.0Q444%20353%20447%20348L479%20292Q482%20287%20480.5%20280.5Q479%20274%20473%20270L337%20192Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fa-star-of-life::before { content: ""; }

/* Preload guard: while the page is loading, kill EVERY transition so WebKit
   (iOS) can't fire them on initial render — the cause of the header elements
   animating and the mobile menu popping in/out on every page load. The
   .hns-preload class is on <html> from the first byte and removed on window
   load, so transitions only run for genuine user interaction afterward. */
html.hns-preload * { transition: none !important; }

/* Freeze the header during JS init so it never animates on page load / navigation
   (becoming fixed, frost fade-in, hide/reveal). Released after two frames. */
.nav-header.hns-no-trans, .nav-header.hns-no-trans * { transition: none !important; }

/* 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. MUST be display:none when closed. It's position:fixed
   height:100%, but an ancestor (.nav-header has will-change:transform) is a
   containing block for it, so its height:100% resolved to the DOCUMENT height and,
   while merely hidden, extended the page a full screen tall on any page shorter
   than the viewport — the "full page of blank space under the footer" bug (same
   class as the backdrop). display:none removes it from layout entirely; it slides
   in via a keyframe when opened. */
.mobile-menu-wrapper { position: fixed; top: 0; left: 0; height: 100%; width: 320px; max-width: 84vw; background: #fff; z-index: 9999; overflow-y: auto; box-shadow: 0 0 44px rgba(0, 0, 0, .28); display: none; transform: translateX(-100%); }
.mobile-menu-wrapper.body-visible { display: block; animation: hnsMenuSlideIn .4s ease forwards; }
@keyframes hnsMenuSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .mobile-menu-wrapper.body-visible { animation: none; transform: translateX(0); } }

/* Mobile menu backdrop. MUST be display:none when closed (NOT visibility:hidden):
   as a position:fixed full-viewport div appended to <body>, while merely hidden it
   still occupied layout and extended the document to a full screen tall on any page
   shorter than the viewport (big iPad screens) — that was the "full page of blank
   space under the footer" bug. display:none removes it from layout entirely. */
.hns-mobile-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; display: none; transition: opacity .42s ease; z-index: 9998; }
.hns-mobile-backdrop.is-open { display: block; opacity: 1; }

/* 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; }

/* ---- Mobile + tablet footer polish (owner, 2026-07-05) ---- */
@media (max-width: 1024px) {
  /* Stack the footer's newsletter + legal columns into ONE column on tablet/mobile
     (the theme only stacked at <=640, so iPad kept a 2-col layout that squeezed the
     legal links into a ~156px column and mangled them). Stacking gives the legal
     row full width to render as one clean centered line. */
  .elementor-1979 .elementor-element-d130da9 > .e-con-inner { flex-direction: column !important; align-items: center !important; gap: 26px !important; }
  .elementor-1979 .elementor-element-d130da9 > .e-con-inner > .elementor-element { width: 100% !important; }
  .elementor-element-a8267f3 { text-align: center !important; }

  /* Legal links (Contact / Privacy / Terms) stay on ONE straight line across all
     mobile + tablet widths — the theme only did this at <=640, so wider phones and
     tablets were stacking them. */
  .elementor-element-057ec82 .elementor-icon-list-items { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; }
  .elementor-element-057ec82 .elementor-icon-list-item { display: inline-flex !important; align-items: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; }
  .elementor-element-057ec82 .elementor-icon-list-item a { display: inline-flex !important; align-items: center !important; padding: 0 !important; }
  .elementor-element-057ec82 .elementor-icon-list-item a,
  .elementor-element-057ec82 .elementor-icon-list-text { white-space: nowrap !important; line-height: 1 !important; }
  /* pipe separators between the links (the theme only defined these at <=640) */
  .elementor-element-057ec82 .elementor-icon-list-item:not(:first-child)::before { content: "|"; display: inline-flex; align-items: center; margin: 0 10px; opacity: .4; font-weight: 400; line-height: 1; }
  .elementor-element-057ec82 .hns-tc-long { display: none !important; }
  .elementor-element-057ec82 .hns-tc-short { display: inline !important; }

  /* "Legal" heading gets a little breathing room above the links */
  .elementor-element-a8267f3 .elementor-element-b8dbed6 { margin-bottom: 12px !important; }

  /* Newsletter "Coming Soon" widget: compact + responsive height. It was ~370px
     tall on mobile (the full placeholder form dictated the height). Collapse the
     tall bits so the yellow COMING SOON card scales to a reasonable size. */
  .elementor-element-b2c42bd { height: clamp(168px, 27vh, 232px) !important; overflow: hidden !important; }
  .elementor-element-b2c42bd .elementor-element-f303701 { display: none !important; }
  .elementor-element-b2c42bd .elementor-element-2f51e4d { margin-bottom: 10px !important; }
  .elementor-element-b2c42bd .elementor-element-2f51e4d h2 { font-size: clamp(1rem, 4.2vw, 1.25rem) !important; line-height: 1.3 !important; }
  .elementor-element-b2c42bd .hns-role { margin-bottom: 8px !important; }
  .elementor-element-b2c42bd .hns-nl-fields { gap: 8px !important; margin-top: 8px !important; }
  .elementor-element-b2c42bd .hns-nl-fields input { padding: 9px 14px !important; }
  .elementor-element-b2c42bd .hns-nl-btn { padding: 9px 22px !important; }

  /* Email sign-up widget: nearly full screen width with a small side gutter.
     Uses the full path so it beats the `> .elementor-element{width:100%}` rule. */
  .elementor-1979 .elementor-element-d130da9 > .e-con-inner > .elementor-element-b2c42bd { max-width: none !important; width: calc(100% - 16px) !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; }
  /* less empty space above the widget */
  .elementor-1979 .elementor-element-d130da9 > .e-con-inner { padding-block-start: 24px !important; }
}

/* Header: when the bar is revealed by an up-scroll mid-page, force a readable
   frosted background. On the homepage the normal scrolled state is transparent
   over the dark hero, which left the nav buttons hard to read on scroll-up. */
/* revealed always co-occurs with .hns-scrolled; the homepage transparent-scrolled
   rule is `.home .nav-header.hns-fixed.hns-scrolled` (0,4,0), so match/beat it by
   pinning both classes (+ .home) — otherwise the frost loses on the homepage. */
.nav-header.hns-fixed.hns-scrolled.hns-revealed,
.home .nav-header.hns-fixed.hns-scrolled.hns-revealed { background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: saturate(180%) blur(18px) !important; backdrop-filter: saturate(180%) blur(18px) !important; box-shadow: 0 2px 16px rgba(0, 0, 0, .10) !important; }
.nav-header.hns-fixed.hns-scrolled.hns-revealed .nav-links,
.nav-header.hns-fixed.hns-scrolled.hns-revealed .navigation a,
.nav-header.hns-fixed.hns-scrolled.hns-revealed .main-menu a,
.home .nav-header.hns-fixed.hns-scrolled.hns-revealed .navigation a,
.home .nav-header.hns-fixed.hns-scrolled.hns-revealed .main-menu a { color: #0A0C00 !important; }
.nav-header.hns-fixed.hns-scrolled.hns-revealed .sidebar-btn { color: #0A0C00 !important; border-color: #0A0C00 !important; }

/* Instagram strip (home): remove the IG glyph from the "Follow @hanginnslangin"
   button, and hide the flanking Instagram glyphs in the "Catch the vibe on
   Instagram" heading on mobile, where they scaled awkwardly against the text. */
.hns-ig-follow .hns-ig-logo { display: none !important; }
@media (max-width: 768px) {
  .hns-ig-h .hns-ig-logo { display: none !important; }
}

/* Hero CTA (circle button) on mobile: the theme's label is "SEE UPCOMING<br>EVENTS"
   (two lines) inside a fixed-height overflow:hidden box. At the theme's 13px the
   "SEE UPCOMING" line is too wide for the 140px circle, so it wraps to a 3rd line
   and "EVENTS" gets clipped. Shrink the font a touch and keep each label line on
   one line so all of it fits cleanly inside the circle. */
@media (max-width: 575px) {
  .home .hero-wrapper .circle-btn.style2 { font-size: 11px !important; letter-spacing: 0 !important; }
  .home .hero-wrapper .circle-btn.style2 .effect-1 { white-space: nowrap; line-height: 1.4; }
}