/* Safety net: never let scroll-reveal animations leave content invisible.
   Elementor hides elements with entrance animations until its waypoints JS
   fires; if that script isn't enqueued the content stays at opacity:0 forever. */
.elementor-invisible.elementor-invisible.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hero grain: subtle halftone/raster dot texture over the video background,
   matching .hero-grain from the reference design. */
.elementor-element-0d427bf { position: relative; }
.elementor-element-0d427bf::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.35) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}
.elementor-element-340d0ba { position: relative; z-index: 2; }

/* Big Elementor headings across the site (About, DJ, Evenement identiteit,
   Websites, Contact, DMVN, Projecten — not just the Home hero) had no mobile
   font-size set, so on narrow screens long words like "HARDSTYLE" broke
   mid-word instead of wrapping. Desktop sizing is untouched — mobile only. */
@media (max-width: 767px) {
  .elementor-widget-heading h1,
  .elementor-widget-heading h1 span {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .elementor-widget-heading h2,
  .elementor-widget-heading h2 span {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.15 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* Instagram Feed plugin's own "Load More" / "Follow" buttons — restyle to
   match the site's button look (they ship with generic blue/white styling,
   and the follow button's color comes from an inline style so needs !important). */
.sbi_load_btn {
  background: #FF3355 !important;
  color: #F6F5F3 !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 15px 30px !important;
  transition: transform .2s ease, background .2s ease !important;
}
.sbi_load_btn:hover { background: #FF5270 !important; transform: translateY(-2px); }
.sbi_follow_btn a {
  background: #FF3355 !important;
  border-radius: 2px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: .85rem !important;
  padding: 15px 30px !important;
  line-height: normal !important;
  transition: background .2s ease !important;
}
.sbi_follow_btn a:hover { background: #FF5270 !important; }

/* Site-wide scroll-reveal (same technique as the DJ "Behind The Set" page):
   fades + lifts each top-level Elementor section into view once, via a plain
   IntersectionObserver. Independent of Elementor's own entrance-animation
   system (which needed a permanent visibility override earlier in this
   project and is left inert on purpose to avoid conflicting with this). */
.sqr-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.sqr-reveal.sqr-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sqr-reveal { opacity: 1; transform: none; transition: none; } }

/* Home hero content ("Hardstyle die je voelt. Events die je onthoudt." + eyebrow,
   subtext, buttons, scroll cue): fades — and lifts — in immediately on first
   load, since it's visible above the fold without any scrolling. */
.elementor-element-340d0ba { animation: sqrHeroIn 1s cubic-bezier(.19,1,.22,1) both .15s; }
@keyframes sqrHeroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .elementor-element-340d0ba { animation: none; } }

/* SQREUR hardstyle skin — sandbox stylesheet (independent of Astra's Additional CSS,
   which gets overwritten whenever Astra's own settings are saved) */

/* Brand wordmark */
.site-title, .site-title a { font-family: 'Anton', 'Arial Narrow', sans-serif !important; letter-spacing: .04em; }

/* Sticky, translucent, blurred header */
#masthead { position: sticky; top: 0; z-index: 999; }
.ast-primary-header-bar {
  background-color: rgba(10,10,13,.85) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}

/* Desktop nav link styling */
.main-header-menu > .menu-item > .menu-link {
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .86rem;
}

/* Mobile popup drawer contents */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-desktop-header-content { background-color: #0A0A0D !important; }
.ast-mobile-popup-drawer.active .menu-toggle-close { color: #F6F5F3; }
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg { fill: #F6F5F3; }

/* Mobile drawer: slide down from the top (full width) instead of in from the side */
.ast-mobile-popup-drawer {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  top: 0 !important;
  bottom: auto !important;
  height: auto !important;
  max-height: 100vh;
  overflow-y: auto;
  transform: translateY(-100%) !important;
  transition: transform .3s ease !important;
}
.ast-mobile-popup-drawer.active { transform: translateY(0) !important; }
.ast-mobile-popup-drawer .ast-mobile-popup-inner { padding-top: calc(var(--ast-mobile-header-height, 70px) + 16px); }
.ast-mobile-popup-drawer nav.site-navigation ul.main-header-menu {
  display: flex; flex-direction: column; gap: 4px;
}
.ast-mobile-popup-drawer .main-header-menu .menu-link {
  font-family: 'Anton', 'Arial Narrow', sans-serif !important;
  text-transform: uppercase; font-size: 1.6rem; padding: 10px 0;
  border-bottom: 1px solid rgba(246,245,243,.13);
}

/* Header scaling on mobile: keep logo/title and hamburger from crowding */
@media (max-width: 544px) {
  .site-title, .site-title a { font-size: clamp(1.1rem, 6vw, 1.5rem) !important; }
  .ast-primary-header-bar .site-branding { max-width: 62%; }
}

/* Hide the last nav item ("Contact") from the visible top bar on small screens;
   it still appears inside the mobile dropdown, which renders its own menu markup. */
@media (max-width: 920px) {
  .ast-desktop-header .main-header-menu > .menu-item:last-child { display: none; }
}

/* ---- More effects ported from the reference HTML ---- */

/* Hero video: slight saturation/contrast boost, matching .hero-video */
.elementor-element-0d427bf video { filter: saturate(1.15) contrast(1.05); }

/* Hero logo: drop shadow + entrance pop, matching .hero-logo / @keyframes logo-in */
.sqr-hero-logo img {
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
  animation: sqr-logo-in .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sqr-logo-in { from { opacity: 0; transform: scale(.85) translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sqr-hero-logo img { animation: none; } }

/* Scroll cue: bouncing indicator, now placed in normal flow right under the
   hero CTA buttons rather than floating absolutely at the hero's bottom edge. */
.sqr-scroll-cue {
  margin-top: 18px;
  background: none; border: none; color: #AEACB8; display: flex; flex-direction: column;
  align-items: center; gap: 8px; cursor: pointer; font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; font-family: 'Open Sans', sans-serif;
}
.sqr-cue-bar { width: 1px; height: 34px; background: linear-gradient(#AEACB8, transparent); position: relative; overflow: hidden; display: block; }
.sqr-cue-bar::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #FF3355; animation: sqr-cue 1.8s ease-in-out infinite; }
@keyframes sqr-cue { 0% { top: -100%; } 60%, 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .sqr-cue-bar::after { animation: none; top: 40%; } }
.elementor-element-0d427bf { overflow: hidden; }

/* Service cards: arrow link turns accent-bright red on card hover, matching .service-card:hover .service-arrow */
.sqr-service-card:hover .sqr-service-arrow { color: #FF5270 !important; }

/* Gallery captions: pin over the bottom of the image with a gradient scrim, matching .strip-cap */
.sqr-gallery-card { position: relative; overflow: hidden; }
.sqr-gallery-card .sqr-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important;
  padding: 14px !important; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent);
  z-index: 2;
}

/* ---- Real header fixes: the header is an XPro Theme Builder template (post 40),
   not Astra's native header builder, so it needed its own selectors. ---- */

/* Sticky translucent blurred header, always on (top of page and scrolled). */
.xpro-theme-builder-header-nav {
  background-color: rgba(10,10,13,.85) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
/* The inner Elementor container paints a solid opaque background right on top
   of the header, hiding the blur above — make it transparent so the blur shows. */
.xpro-theme-builder-header .elementor-element-feaf733,
.xpro-theme-builder-header .elementor-element-feaf733:not(.elementor-motion-effects-element-type-background) {
  background-color: transparent !important;
}
/* Elementor also sets its own no-op backdrop-filter (blur(0px)) on the next
   layer in (elementor-element-14e36a5, wrapping logo+menu+button). Even a
   0px blur still creates its own compositing layer, which can flatten the
   translucent header behind it into a solid block on desktop. Remove it. */
.elementor-element-14e36a5,
.elementor-element-3f72210 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* The menu widget itself (elementor-element-3f72210) had its own real
   blur(10px) backdrop-filter left over from the editor — stacked on top of
   the header's own blur, this is what produced the dark box specifically
   around the nav links. Remove it too. */
.elementor-element-3f72210 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mobile/tablet menu panel: full width and dark, matching the site (was a
   fixed 400px light-grey side drawer by default). Scoped to mobile/tablet
   widths only — without the media query this was also rendering on desktop,
   sitting as an opaque black layer behind the nav text and blocking the blur. */
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-menu-responsive-tablet,
  .xpro-elementor-horizontal-menu-responsive-mobile {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #0A0A0D !important;
  }
}
.xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a,
.xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-horizontal-navbar-nav > li > a {
  background: transparent !important;
  color: #AEACB8 !important;
  border-bottom-color: rgba(246,245,243,.13) !important;
}

/* Hide the standalone Contact button on mobile/tablet; Contact now also lives
   as a normal item in the hoofdmenu, so it still appears in the mobile menu. */
@media (max-width: 1024px) {
  .sqr-header-contact-btn { display: none !important; }
}

/* Center the hamburger icon inside its button */
.xpro-elementor-horizontal-menu-toggler {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* "Contact" was added to the hoofdmenu so it shows up in the mobile dropdown,
   but the desktop row already has the dedicated Contact button next to it —
   hide the menu-item copy on desktop only. */
@media (min-width: 1025px) {
  #menu-item-195 { display: none !important; }
}