/*
Theme Name: SLEM
Description: SLEM child theme (built on Notescape)
Author: Startupfactory
Template: notescape
Version: 1.1.0
*/

/* Hide all date elements in post widgets and marquee */
.entry-meta-marquee-date,
.entry-date {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/* Adjust marquee separator spacing when date is hidden */
.entry-marquee-meta-text:first-child .entry-meta-marquee-separator {
	display: none;
}

.scroll-init .locoscroll-bg,
.scroll-init .locoscroll-bg-parallax>.e-con-inner>.elementor-background-video-container,
.scroll-init .locoscroll-bg-zoomin>.e-con-inner>.elementor-background-video-container {
	opacity: 0 !important;
}

/* ==========================================================================
   Typography — one variable font, Archivo, loaded once with both its wdth
   and wght axes (functions.php). Display/heading text uses the same family
   as body text, just pulled wide via font-variation-settings:'wdth' 118 —
   there is no separate "Archivo Expanded" static family anymore (brand
   guide correction, 2026-09-04): a variable font's width axis IS the
   expanded cut, so loading a second static family duplicated it for no
   reason and doubled the font payload.
   ========================================================================== */

:root {
	/* SLEM brand guide 1.0: Archivo Expanded (wdth 125, 900) for display,
	   Barlow (400/500/600) for running text, labels and buttons. */
	--heading-font-stack: "Archivo", sans-serif;
	--heading-font-variation: "wdth" 125;
	--body-font-stack: "Barlow", system-ui, sans-serif;

	/* Same split as Elementor > Site Settings > Global Fonts. */
	--e-global-typography-primary-font-family: "Archivo";
	--e-global-typography-secondary-font-family: "Archivo";
	--e-global-typography-text-font-family: "Barlow";
	--e-global-typography-accent-font-family: "Barlow";
}

/* Body font: body text, nav, mobile menu, buttons, footer, form labels --- */
body,
input,
textarea,
select,
button,
.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.elementor-button,
.elementor-widget-text-editor,
#nav-bar,
.nav-bar,
#mobile-menu-panel,
.mobile-menu,
.site-footer,
.sidebar-footer,
label,
.form-label {
	font-family: var(--body-font-stack) !important;
}

/* Heading font: h1–h6, section titles, hero text ------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.elementor-heading-title {
	font-family: var(--heading-font-stack) !important;
	font-weight: 900;
	font-variation-settings: var(--heading-font-variation);
}

/* Titles that stay on the body face even though they're headings -------- */
.blog .entry-title,
.single-post .entry-title,
.category .entry-title,
.tag .entry-title,
.search .entry-title,
.product_title,
.woocommerce-loop-product__title,
.event-title,
.location-title {
	font-family: var(--body-font-stack) !important;
	font-weight: 700;
}

/* Micro-typography for labels, small caps, and meta text */
.label,
.small-caps,
.post-meta,
.event-label,
.gig-label,
.widget-title,
.form-label,
label,
.text-uppercase {
	font-family: var(--body-font-stack) !important;
	font-size: 11px !important;
	/* Targets 10px to 12px range */
	text-transform: uppercase !important;
	letter-spacing: 0.2em !important;
	font-weight: 600;
}

/* ==========================================================================
   Acid color palette.
   The theme's own Customizer color mods are forced to these values in
   functions.php, so its generated CSS (borders, hovers, panels, badges)
   already uses this palette. What's here covers what that mechanism
   doesn't reach: the "light section" panel scheme, and opt-in utility
   classes for marking a specific section/card's surface manually
   (e.g. via Elementor's "CSS Classes" field).
   ========================================================================== */

:root {
	--acid-blackout: #08080A; /* Primary background */
	--acid-booth: #14141A;    /* Cards, secondary surfaces */
	--acid-bone: #F2F2ED;     /* Light section background */
	--acid-accent-1: #FF2D3F; /* Redline (SLEM brand guide 1.0) — buttons, hovers, active states */
	--acid-accent-2: #FF2D3F; /* Redline too: one accent only, no second colour */
}

/* The theme's "light panel" scheme (Elementor rows/sections/menus set to
   a light background) — Bone background, Blackout text, instead of the
   theme's default cream/dark-gray pairing. */
.panel-font-dark,
.wolf-core-font-dark {
	--background-color: var(--acid-bone) !important;
	--foreground-color: var(--acid-blackout) !important;
	--strong-color: var(--acid-blackout) !important;
}

/* Opt-in surface utilities */
.bg-blackout {
	background-color: var(--acid-blackout) !important;
}

.bg-booth {
	background-color: var(--acid-booth) !important;
}

.bg-bone {
	background-color: var(--acid-bone) !important;
	color: var(--acid-blackout) !important;
}

/* ==========================================================================
   Cut-corner buttons — brand doc, section 06 "De 42 graden".
   Every button is rectangular except one corner (bottom-right), sliced off at
   the brand's fixed 42° diagonal — a rise of 1 per 1.11 run, the same
   ratio as the section dividers and beam texture elsewhere in this system.
   Replaces the parent theme's default/round/pill button shapes.

   The cut is set in fixed pixels, not a percentage of the button's own
   size, so it stays visually the same whether the element is a small
   button or a large one — the brand rule is "vaste maten, nooit procenten".
   ========================================================================== */

:root {
	--cut-corner-rise: 16px;  /* vertical leg of the cut */
	--cut-corner-run: 18px;   /* horizontal leg — rise × 1.11, the brand's 42° ratio */
	--cut-corner-border: 1px; /* stroke width for .button-outline, matches the parent theme's own 1px button border-width */
}

.button,
.button-secondary,
.button-download,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.elementor-button,
.added_to_cart,
.more-link,
input[type="submit"],
.wvc-mailchimp-submit,
.theme-button-primary {
	-webkit-clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--cut-corner-rise)),
		calc(100% - var(--cut-corner-run)) 100%,
		0 100%
	);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--cut-corner-rise)),
		calc(100% - var(--cut-corner-run)) 100%,
		0 100%
	);
	/* Force rectangular corners everywhere but the cut — overrides the
	   parent theme's Customizer > Buttons "round"/"standard" radius, which
	   would otherwise round the three uncut corners too. */
	border-radius: 0 !important;
}

/* One button style, quick win 5 — the shape above is already shared by
   every button class site-wide; this adds the shared typography/padding/
   tap-target, which varies per-widget in Elementor (button size preset,
   individual typography controls) and so wasn't actually consistent yet.
   Individual widgets keep their own background/text color (already Acid
   Green / #08080A per widget, fixed 2026-09-04) — only the shape,
   spacing and type carry site-wide here.

   display/align-items/justify-content were meant to center every
   button's own label+icon, but had no !important — Elementor's own
   core CSS sets `.elementor-button{display:inline-block}` with the
   same specificity and no !important on its side either, so it was a
   coin-flip on load order this rule kept losing site-wide (confirmed
   directly on the Spotify/Soundcloud buttons a while back, fixed there
   with a one-off, more-specific selector at the time — this is that
   same fix applied where it actually belongs, at the shared rule, so
   every button gets it instead of only the two that were checked).
   Padding was also 15px top / 14px bottom — a 1px mismatch that's now
   centering an asymmetric box even with flex actually active — evened
   out to 15px both, so centered means centered exactly, not "off by
   a rounding error." */
.button,
.button-secondary,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.elementor-button,
.theme-button-primary {
	font-weight: 600 !important;
	font-size: 12px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 15px 24px !important;
	border: none;
	min-height: 48px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Elementor's own inner wrapper span (.elementor-button-content-wrapper,
   holding the icon + label together) is a flex container too, defaulting
   to align-items:normal (= stretch) rather than center — invisible for a
   text-only button, but throws icon+text out of vertical alignment with
   each other on any button that has an icon. Centering it unconditionally
   here, not just where an icon happens to be in use today. */
.elementor-button-content-wrapper {
	align-items: center !important;
}

/* :not([href*=...]) exclusions on the first two selectors: the Spotify/
   Soundcloud/Apple Music buttons further below need their OWN, real per-widget Hover
   setting (set directly in their saved Elementor data, not CSS) to win
   here instead — this rule's own !important would otherwise beat
   Elementor's generated per-widget hover CSS regardless of how specific
   that is, since Elementor doesn't fight back with !important of its
   own. Every other button is untouched. */
.elementor-button:not(.button-outline):not([href*="open.spotify.com"]):not([href*="soundcloud.com"]):not([href*="music.apple.com"]):hover,
.elementor-button:not(.button-outline):not([href*="open.spotify.com"]):not([href*="soundcloud.com"]):not([href*="music.apple.com"]):focus,
a.button:not(.button-outline):hover,
a.button:not(.button-outline):focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
input[type="submit"]:hover,
input[type="submit"]:focus,
.added_to_cart:hover,
.more-link:hover,
.wvc-mailchimp-submit:hover {
	background-color: var(--acid-accent-2) !important;
	border-color: var(--acid-accent-2) !important;
	color: var(--acid-blackout) !important;
}

/* Bare theme .button markup — not an Elementor widget, so there's no
   per-widget Style-tab text-color control to set here (checked
   button-trait.php: that control only exists on the Elementor Button
   widget itself). The site's own Customizer > Colors only exposes button
   BACKGROUND via "Accent Color" (colors.php), no text-color option — so no
   native control at all exists for this, custom CSS is the correct
   fallback per our "widget option first, else custom" rule, not a
   shortcut around it.

   Needed because the parent theme's base CSS (main.css:
   `.button:not(:hover){color:#fff}`) sets white by default, which is
   wrong on this site's yellow accent background — Guide 06 is explicit
   that accent-background buttons are "text always #08080A on accent"
   (the same reasoning already applied to .theme-button-primary below).
   Surfaced by the site-wide booking button (functions.php,
   notescape_child_booking_button(), class="button
   dj-slem-booking-button") rendering with white text in the
   one-page sidebar.

   Deliberately excludes .elementor-button/.theme-button-primary — those
   already get their own correct text color natively per-widget (Elementor
   Button_Trait) or from the explicit rule further below; adding
   !important here to a bare `.elementor-button` selector would incorrectly
   win against a real per-widget setting, since Elementor's own generated
   per-widget CSS carries no !important on its side to fight back with.

   input[type="submit"]/.added_to_cart/.more-link/.wvc-mailchimp-submit
   added here per direct report + screenshot: the review form's own
   "Verzenden" submit button (a plain <input type="submit">, not an <a>
   or <button>) showed white text — it already got the cut-corner SHAPE
   from the shared rule above (that one does list input[type="submit"]),
   just not this color rule, which had only ever listed .button/a.button/
   button.button. Same gap, same white-on-white-ish parent default, on
   every other element in this added list — fixed for all of them at
   once rather than one at a time as each gets separately noticed. */
.button:not(:hover),
.button-secondary:not(:hover),
a.button:not(:hover),
.woocommerce a.button:not(:hover),
.woocommerce button.button:not(:hover),
input[type="submit"]:not(:hover),
.added_to_cart:not(:hover),
.more-link:not(:hover),
.wvc-mailchimp-submit:not(:hover) {
	color: var(--acid-blackout) !important;
}

/* ==========================================================================
   Volg mij: Spotify/Soundcloud buttons. Matched by href, not element ID —
   the same two buttons exist under different Elementor element IDs on the
   NL and EN homepages, so an ID-scoped rule would silently miss whichever
   page's copy has a different ID (this project has already been caught
   out by that more than once elsewhere).

   Centering used to be forced here specifically (Elementor's own
   frontend.min.css sets `.elementor-button{display:inline-block}` with
   the same specificity and no !important on either side as the shared
   rule above, so it was a cascade-order coin flip every button on the
   site was losing, not just these two) — that fix now lives at the
   shared button rule itself instead, so it isn't one-off patched per
   button as each one gets noticed.

   Hover color is NOT set here — deliberately. It's each button's own
   native Elementor "Hover" style-tab setting instead (Text Color +
   Background Hover + Border Hover Color, per Button_Trait), written
   directly into their saved settings once (Spotify → #1DB954, its own
   brand green; SoundCloud → #FF5500, its own brand orange — both an
   explicit exception to "one accent everywhere", Feedback doc quick win
   1, per direct request) so it shows up as real, already-filled-in
   fields in the Elementor editor rather than a CSS override the editor's
   own Style tab can't see or change. A future edit to either button's own
   Hover color in Elementor is what actually controls this now — nothing
   here would override it. */

/* .theme-button-primary (parent theme's own "primary CTA" class, used by
   the Merch grid's Add to cart/Select option buttons among others) needed
   its own explicit color pair rather than just the shape above — Guide 06
   is explicit that accent-background buttons are "text always #08080A on
   accent", and this class's own default elsewhere in the theme is closer
   to Feedback doc item 07's complaint ("in the footer it is white text on
   acid, which is close to unreadable"). Forced here instead of trusting
   whatever the parent's own default resolves to.

   `body` prefix on every selector below isn't decorative — the parent
   theme's own styles.css has equally-!important `.theme-button-primary`
   rules of its own (both the default text color AND the hover
   background), tied on plain-class specificity with these, and it loads
   after this file — confirmed directly on the Merch "Add to cart"
   button: white text and a Bone hover background were both coming from
   there, not from any missing rule here. Same fix as `#back-to-top-link`
   elsewhere in this file: one extra ancestor to out-specify it outright,
   regardless of load order. */
body .theme-button-primary {
	background-color: var(--acid-accent-1) !important;
	color: var(--acid-blackout) !important;
}

body .theme-button-primary:hover,
body .theme-button-primary:focus {
	background-color: var(--acid-accent-2) !important;
	color: var(--acid-blackout) !important;
}

/* ==========================================================================
   "View Details" — the Quick View modal's own button (a.product-link.button,
   opened from a product card's "Quick Buy" thumbnail overlay). Direct
   request + screenshot: it rendered as a plain bone/cream box, unlike
   every other product CTA on the site (Add to cart/Select option), because
   it only carries the generic `.button` class, not `.theme-button-primary`
   — it already had the right shape/padding from the shared button rules
   near the top of this file, just not this accent color pair. Same
   colors/hover as .theme-button-primary above, for the same reason
   (Guide 06: accent-background buttons are dark text on accent, not the
   parent theme's own default here).

   A first attempt at just `body .product-link.button` didn't take —
   confirmed live via document.styleSheets: the parent theme's own
   build/styles.css has `.entry-product-quickview .button.product-link
   { background: var(--foreground-color) !important; ... }`, THREE
   classes deep (vs. two here), so it out-specifies a plain two-class
   version of this rule regardless of `!important` or load order. Adding
   `.entry-product-quickview` here too (the quickview modal's own wrapper,
   confirmed present in the actual DOM) matches that same specificity,
   and the `body` prefix (same trick used elsewhere in this file) tips it
   the rest of the way. */
body .entry-product-quickview .product-link.button {
	background-color: var(--acid-accent-1) !important;
	color: var(--acid-blackout) !important;
}

body .entry-product-quickview .product-link.button:hover,
body .entry-product-quickview .product-link.button:focus {
	background-color: var(--acid-accent-2) !important;
	color: var(--acid-blackout) !important;
}

/* Opt-in "outline" cut-corner button (e.g. a secondary CTA like "Luister"
   next to a filled primary one) — add the `button-outline` class via
   Elementor's "CSS Classes" field, the same way .bg-blackout/.bg-bone
   above are used.

   This is NOT built with a real `border` + clip-path: combining the two
   clips the border unevenly and leaves a stray line floating off the cut
   corner in every browser tested. Instead the stroke is two stacked
   cut-corner shapes — a full-size backdrop in the stroke color, and a
   1px-inset foreground in the fill color — which follow the same 42° cut
   cleanly with no artifact. Any border set on the element itself is
   removed so it can't double up with this.

   The custom properties (--stroke/--fill) are set on `.button-outline`
   itself (the widget wrapper), but every visual rule below — background
   reset, border reset, the shapes, color — targets `.button-outline
   .elementor-button`, the actual visible anchor, exclusively. Found
   2026-09-04 that for an Elementor Button widget, "CSS Classes" lands on
   the outer wrapper div, not the anchor inside it: an earlier version of
   this rule styled BOTH the wrapper and the anchor, which put two
   separate cut-corner shapes on two differently-sized boxes at once
   (visible as a doubled/offset outline), and left `color` set directly
   on the anchor by that same earlier rule — an explicit rule on the
   anchor always wins over whatever the wrapper inherits down to it, so
   a page-specific color override on the WRAPPER (further down this
   file, Contact's own dark-on-light variant) never reached the anchor's
   actual text, rendering it invisible against its own fill. Styling only
   the anchor avoids both problems at once. */
.button-outline {
	--stroke: var(--acid-bone);
	--fill: var(--acid-blackout);
}

.button-outline .elementor-button {
	position: relative;
	isolation: isolate;
	background: transparent !important;
	border: none !important;
	color: var(--acid-bone);
}

.button-outline .elementor-button::before,
.button-outline .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--cut-corner-rise)),
		calc(100% - var(--cut-corner-run)) 100%,
		0 100%
	);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--cut-corner-rise)),
		calc(100% - var(--cut-corner-run)) 100%,
		0 100%
	);
	transition: background-color 0.44s cubic-bezier(0.675, 0.475, 0.05, 0.67);
}

.button-outline .elementor-button::before {
	z-index: -2;
	background: var(--stroke);
}

.button-outline .elementor-button::after {
	inset: var(--cut-corner-border);
	z-index: -1;
	background: var(--fill);
	-webkit-clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - (var(--cut-corner-rise) - var(--cut-corner-border))),
		calc(100% - (var(--cut-corner-run) - var(--cut-corner-border))) 100%,
		0 100%
	);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - (var(--cut-corner-rise) - var(--cut-corner-border))),
		calc(100% - (var(--cut-corner-run) - var(--cut-corner-border))) 100%,
		0 100%
	);
}

.button-outline .elementor-button:hover {
	--stroke: var(--acid-accent-1);
	--fill: var(--acid-accent-1);
	color: var(--acid-blackout) !important;
}

/* ==========================================================================
   Homepage (page 16) brand-system pass.

   Every rule below is scoped to body.page-id-16 (and body.page-id-17777,
   its Polylang English translation, sharing the same Elementor element
   IDs) and targets Elementor's own
   .elementor-element-{id} classes for that page's existing containers/
   widgets — nothing here touches the database or _elementor_data; it's
   pure CSS override, same as every other rule in this file. IDs come from
   the page's current Elementor structure and will need updating if that
   structure is rebuilt.

   Audited 2026-09-04 against the live _elementor_data for both pages: the
   Blackout/Bone alternation is now set directly on each container's own
   Background control (an Elementor widget option) instead of being forced
   here with !important, so the background-color half of that pass was
   removed below — only the paired text-color declarations remain, since
   this Elementor version has no equivalent container-level text-color
   control to move those into. Several IDs this section used to target
   (f5d21d3 "Silhouette", 4e9ab80 "Booking form", 2996c6f/4555c9c/3390f3b
   streaming-button wrappers, and most of the demo-doodle list below) no
   longer exist on either page — those sections were intentionally removed
   in a later edit, so the dead rules targeting them have been dropped
   rather than left silently inert. The streaming buttons' Acid Green is
   now the Kit's own Global "Accent" color (Site Settings), which is what
   Spotify/Soundcloud already read via Elementor's global-color link.
   ========================================================================== */

:root {
	--section-cut-rise: 70px; /* fixed-px vertical rise for full-width section-transition cuts, same 42° family as the button/beam shapes, scaled down from the 180:200 reference for a section-height band instead of a full slope */
}

/* --- The original "retire leftover demo doodles" rule (11 IDs: yellow-
   bidule, yellow-arrow, yellow-circle, red-smiley, the torn-paper section-
   band pair used 5 times, play-me) — all 11 are gone from the current
   Elementor structure, nothing left to hide. aaaa6d0 used to be listed
   here too (it was an empty Image widget with no file attached, alt-text
   already reading "DJ SLEM live, hand raised") — 2026-09-04: found the
   real, correctly-matching photo sitting in the media library with a
   broken attachment record (missing _wp_attached_file/metadata, same bug
   as the release covers), repaired it, and wired it into aaaa6d0. It's
   real intended content now, not leftover decoration, so no longer
   hidden. --- */

/* --- Blackout / Bone alternation text-color pairing. Backgrounds are now
   each container's own native setting (Blackout: 9fb7873 Releases, a856ec7
   Video Spotlight, 9810794 Part 1, dca14f8 News, b4d92f1 TikTok, bdb29ba
   Merch — all #08080A. Bone: f0aff41 Instagram, e29a7c4 Part 2, d76618c
   Contact — all #F2F2ED); only the contrast text color still needs forcing
   here. Section order changed again 2026-09-04 (Contact moved to right
   after News, TikTok and Instagram swapped so TikTok comes first) — see
   the cut-chain comment below for the full new order and why. None of
   these six sections' own colors changed, only their position, so this
   group's membership is unchanged. */
body.page-id-16 .elementor-element-f0aff41,
body.page-id-17777 .elementor-element-f0aff41,
body.page-id-16 .elementor-element-e29a7c4,
body.page-id-17777 .elementor-element-e29a7c4,
body.page-id-16 .elementor-element-d76618c,
body.page-id-17777 .elementor-element-d76618c {
	color: var(--acid-blackout) !important;
}

body.page-id-16 .elementor-element-a856ec7,
body.page-id-17777 .elementor-element-a856ec7,
body.page-id-16 .elementor-element-9810794,
body.page-id-17777 .elementor-element-9810794,
body.page-id-16 .elementor-element-dca14f8 ,
body.page-id-17777 .elementor-element-dca14f8,
body.page-id-16 .elementor-element-b4d92f1,
body.page-id-17777 .elementor-element-b4d92f1,
body.page-id-16 .elementor-element-bdb29ba,
body.page-id-17777 .elementor-element-bdb29ba {
	color: var(--acid-bone) !important;
}

/* The WooCommerce-product-grid dark-text override that used to live here
   for bdb29ba (needed only while Merch was Bone, since the grid's own
   title/price/"view more" elements carry explicit white text) is gone now
   that Merch is Blackout again — that white is exactly what's needed on a
   dark background, forcing it dark would make it unreadable. */

/* Instagram Feed heading/box text color used to be forced here with
   !important — removed per explicit instruction: it was silently fighting
   the widget's own Elementor color settings (df67ca7's background_color and
   c856b00's title_color, both already set directly via Elementor), so any
   attempt to adjust the color in the editor had no visible effect. Style
   now comes entirely from the widgets' own settings, as it should. */

/* --- Replace the removed torn-paper graphics with the brand's 42°
   diagonal cut at every real color change between sections. Built from
   two complementary clip-paths + a matching negative margin so the lower
   section's own color shows cleanly through the upper section's cut,
   with no gap and no overlap artifact — see style.css comments on
   .button-outline above for why clip-path is used instead of a border/
   graphic. Always the same direction: rises left-to-right.

   Brand doc, section 06: "Elke uitsnede, sectieovergang, knop en textuur
   staat op die hoek" — EVERY section transition, no exceptions. This
   chain runs the full page, matching the current, gap-free DOM order
   exactly, re-verified 2026-09-04 against the live page structure after
   the reorder below:
   083dac9(Hero) → 9810794(Part 1) → 9fb7873(Releases) → e29a7c4(Part 2)
   → a856ec7(Video Spotlight) → a6f13d8(Photo Showreel) → dca14f8(News)
   → d76618c(Contact) → b4d92f1(TikTok) → f0aff41(Instagram) →
   bdb29ba(Merch), now the chain's actual final stop.

   Silhouette (f5d21d3) and Booking form (4e9ab80) — both present in an
   earlier version of this chain — no longer exist as sections on either
   page; dropped from the chain along with the streaming-button color-swap
   rule that used to follow it (see the Kit's Global "Accent" color
   instead, Site Settings, now Acid Green).

   Reordered 2026-09-04, per explicit request ("Contact should be moved to
   below News") — Contact (d76618c) moves from the end of the page to
   right after News, and TikTok/Instagram swap order (TikTok now first)
   so the seams either side of Contact's new position both still read as
   real color changes (News Blackout → Contact Bone → TikTok Blackout →
   Instagram Bone → Merch Blackout — this also happens to be the exact
   order both reference docs specced all along; the site had Instagram
   before TikTok and Contact at the very end, which the reorder now
   corrects). Merch (bdb29ba) inherits the final-stop, top-cut-only
   treatment Contact used to carry, since it's now the last section before
   the footer; Contact drops into the normal "both cuts" middle group. --- */
body.page-id-16 .elementor-element-083dac9,
body.page-id-17777 .elementor-element-083dac9,
body.page-id-16 .elementor-element-9810794,
body.page-id-17777 .elementor-element-9810794,
body.page-id-16 .elementor-element-9fb7873,
body.page-id-17777 .elementor-element-9fb7873,
body.page-id-16 .elementor-element-e29a7c4,
body.page-id-17777 .elementor-element-e29a7c4,
body.page-id-16 .elementor-element-a856ec7,
body.page-id-17777 .elementor-element-a856ec7,
body.page-id-16 .elementor-element-a6f13d8,
body.page-id-17777 .elementor-element-a6f13d8,
body.page-id-16 .elementor-element-dca14f8,
body.page-id-17777 .elementor-element-dca14f8,
body.page-id-16 .elementor-element-d76618c,
body.page-id-17777 .elementor-element-d76618c,
body.page-id-16 .elementor-element-b4d92f1,
body.page-id-17777 .elementor-element-b4d92f1,
body.page-id-16 .elementor-element-f0aff41,
body.page-id-17777 .elementor-element-f0aff41 {
	position: relative;
	margin-bottom: calc(-1 * var(--section-cut-rise));
}

/* bottom-cut only (first in the chain — Hero) */
body.page-id-16 .elementor-element-083dac9 ,
body.page-id-17777 .elementor-element-083dac9 {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--section-cut-rise)));
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--section-cut-rise)));
}

/* top-cut only (last in the chain — Merch, since Contact moved out of the
   final-stop spot 2026-09-04). No margin-bottom here on purpose — unlike
   every other chain member, nothing after it needs to overlap-reveal
   through a matching bottom cut, so pulling its own box up would just
   clip its last 70px behind the flat footer bar that follows instead of
   creating a seam. */
body.page-id-16 .elementor-element-bdb29ba ,
body.page-id-17777 .elementor-element-bdb29ba {
	position: relative;
	-webkit-clip-path: polygon(0 0, 100% var(--section-cut-rise), 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% var(--section-cut-rise), 100% 100%, 0 100%);
}

/* top-cut + bottom-cut combined (every section between the two seams above) */
body.page-id-16 .elementor-element-9810794,
body.page-id-17777 .elementor-element-9810794,
body.page-id-16 .elementor-element-9fb7873,
body.page-id-17777 .elementor-element-9fb7873,
body.page-id-16 .elementor-element-e29a7c4,
body.page-id-17777 .elementor-element-e29a7c4,
body.page-id-16 .elementor-element-a856ec7,
body.page-id-17777 .elementor-element-a856ec7,
body.page-id-16 .elementor-element-a6f13d8,
body.page-id-17777 .elementor-element-a6f13d8,
body.page-id-16 .elementor-element-dca14f8,
body.page-id-17777 .elementor-element-dca14f8,
body.page-id-16 .elementor-element-d76618c,
body.page-id-17777 .elementor-element-d76618c,
body.page-id-16 .elementor-element-b4d92f1,
body.page-id-17777 .elementor-element-b4d92f1,
body.page-id-16 .elementor-element-f0aff41,
body.page-id-17777 .elementor-element-f0aff41 {
	-webkit-clip-path: polygon(0 0, 100% var(--section-cut-rise), 100% 100%, 0 calc(100% - var(--section-cut-rise)));
	clip-path: polygon(0 0, 100% var(--section-cut-rise), 100% 100%, 0 calc(100% - var(--section-cut-rise)));
}

/* --- Section padding, quick win 6 ("every section padding:120px 56px on
   desktop and padding:72px 20px below 768px, and nothing else"). This used
   to be a 100px-top/bottom-only !important override here, standing in for
   real values because the widgets' own padding hadn't been set — moved
   2026-09-04 to each container's own native Padding control (Elementor
   widget option), desktop and mobile both, so this CSS override is gone.
   120px is still comfortably more than the 70px diagonal-cut wedge these
   sections also carry, so the cut-safety margin this rule used to provide
   is preserved by the new values, not lost.

   Hero (083dac9) is intentionally not part of this — it has its own
   full-bleed padding:0 plus an inset content wrapper (see the Hero block
   above), not a uniform section padding. --- */

/* ==========================================================================
   Brand doc, task 10 — "Monogram as a fixed corner mark, plus favicon" —
   REMOVED 2026-09-04. Superseded by the Feedback doc's own newer
   "Monogram" spec item, which explicitly says: "This replaces item 14...
   No small 24px corner mark per section — it made the page look busy."
   That same spec item fixes the monogram to exactly four places on the
   homepage instead, all #C8FF00: the menu rail (30px — #onepage-sidebar,
   functions.php), the footer (32px — Notescape_Child_Footer_Brand_Widget,
   functions.php), the silhouette-block lockup (52px — no such section
   currently exists on either page, so nothing to add there), and the
   merch prints (existing artwork, untouched). See the two live instances'
   own CSS further down this file for the current color/size treatment.
   ========================================================================== */

/* ==========================================================================
   Brand doc, section 06 — "Levelbalken" (level bars).
   Opt-in utility: add `level-bars` via Elementor's "CSS Classes" field on
   an Icon/Image or HTML widget wherever a loader, divider, or "now
   playing" indicator is needed. Straight/flush bottoms, equal spacing,
   one bar in the accent colour — proportions match the brand doc's own
   swatch exactly. Static art; wiring it to live playback state would need
   a template/JS change, out of scope for a CSS-only pass.
   ========================================================================== */

.level-bars {
	display: inline-block;
	width: 90px;
	height: 32px;
	background-image: url("assets/img/level-bars.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ==========================================================================
   Brand doc, section 06 — "Beamveld" (beam field / background texture).
   Opt-in utility: add `bg-beam` via Elementor's "CSS Classes" field on any
   section/row background — same 42° family as the diagonal cut and the
   button corner, 16px stripes on a 44px grid, low-contrast so it reads as
   a quiet texture rather than a pattern. For sections with no photo of
   their own.
   ========================================================================== */

.bg-beam {
	background-color: var(--acid-booth) !important;
	background-image: repeating-linear-gradient(
		42deg,
		rgba(242, 242, 237, 0.08) 0,
		rgba(242, 242, 237, 0.08) 16px,
		transparent 16px,
		transparent 44px
	) !important;
}

/* ==========================================================================
   Brand doc, section 05 — Content Sections (Discography, Diary, Events, Merch)
   ========================================================================== */

/* --- Discography: clean grid, 800px covers, Blackout background. ---------
   Confirmed live (not guessed): this page renders through the theme's own
   #discography-index grid (see the notescape_post_module_custom_thumbnail_size
   / theme_mod_release_grid_padding filters in functions.php for how the
   cover size + gutter are actually controlled — this is just the surface
   color/spacing layer on top of that real, confirmed markup). ------------- */

body.discography-page #primary,
body.discography-page #content,
body.discography-page .content-wrapper {
	background-color: var(--acid-blackout);
}

/* .content-wrapper's own 50px top/bottom (main.css) plus the grid's own
   top margin was the "excess empty padding around the row" — collapse the
   wrapper's share of it now that release_grid_padding (functions.php) has
   already dropped the grid's own opt-in gutter. */
body.discography-page .content-wrapper {
	padding-top: 16px;
	padding-bottom: 16px;
}

body.discography-page .entry-release-grid .entry-title a {
	color: var(--acid-bone);
}

body.discography-page .entry-release-grid .entry-title a:hover {
	color: var(--acid-accent-1);
}

/* ==========================================================================
   Release cards: Spotify/SoundCloud buttons next to the title.

   Not scoped to body.discography-page — .entry-release-grid is the
   shared class both the Discography archive AND the homepage Releases
   widget render (release-index widget, horizontal_scroll section), so
   this covers wherever a release card appears, not just one of them.

   Each icon is its own per-release field (native custom-field metabox,
   "Social / Streaming Links" on the Release edit screen — see
   notescape_child_add_release_socials_metabox() in functions.php) —
   only rendered here when that specific release actually has a URL
   saved for it (notescape_child_output_release_loop_streaming_links());
   nothing to toggle here, an empty field simply means no button.

   .entry-taxonomy (band names — unused on this single-artist site,
   always empty) sits between the title and the streaming links in the
   template markup with no way to reorder that server-side without a
   template override; flex + explicit `order` puts the streaming links
   next to the title visually regardless, and collapses the empty
   taxonomy line out of the flow instead of leaving a gap. */
.entry-release-grid .entry-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
}

.entry-release-grid .entry-title {
	order: 1;
	margin: 0;
}

/* SLEM brand guide 1.0, web scale: H3 20–24px ("Keeping Me Up" is the guide's
   own example). Element-qualified so it outranks the parent theme's 18px rule,
   which loads after this stylesheet. */
.entry-release-grid h3.entry-title {
	font-size: 22px;
	line-height: 1;
}

.entry-release-grid .release-streaming-links {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.entry-release-grid .entry-taxonomy {
	order: 3;
	width: 100%;
}

.entry-release-grid .entry-taxonomy:empty {
	display: none;
}

.release-streaming-link {
	display: inline-flex;
}

/* Icon-only buttons, matching the site's cut-corner shape at a scale
   that fits inline next to a card title (compare to the full-size
   version on the "Volg mij" Spotify/Soundcloud buttons, De 42 graden
   section) — same shape, no label, since there isn't room for one here. */
.release-streaming-svg-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	color: var(--acid-blackout);
	background-color: var(--acid-accent-1);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 6px),
		calc(100% - 7px) 100%,
		0 100%
	);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.release-streaming-svg-link:hover,
.release-streaming-svg-link:focus-visible {
	background-color: var(--acid-accent-2);
	color: var(--acid-blackout);
}

.release-streaming-svg-link svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

/* --- Events: one unified card grid — see the long comment on
   notescape_child_event_cards() in functions.php for how the earlier
   split "upcoming as cards / past as an archive list" layout (dead code
   below used to style) got replaced 2026-09-04 to match the newer
   reference screenshot, which has no Upcoming/Past distinction at all. */

body.is-events #primary,
body.is-events #content {
	background-color: var(--acid-blackout);
	color: var(--acid-bone);
}

/* The theme's own native output for this post type has no working card/
   grid template for events (only a list-row), so it's hidden entirely in
   favour of the custom card grid notescape_child_event_cards() builds
   instead. #events-index is the stable wrapper id the theme's own engine
   always gives this output, whether it's showing events or its "no
   upcoming" text. */
#events-index {
	display: none;
}

.events-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}

.event-card {
	background-color: var(--acid-booth);
	display: flex;
	flex-direction: column;
}

.event-card-link {
	color: inherit;
	text-decoration: none;
	display: block;
}

.event-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--acid-blackout);
}

/* .event-card qualifier: outranks Elementor's later `.elementor img { height:auto }`,
   which otherwise left photos at their own ratio instead of cropping to 4:3. */
.event-card .event-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Subtle hover zoom — direct request. .event-card-media already has
	   overflow:hidden (above), so the scaled-up image just stays cropped
	   to the same card frame instead of spilling out. Kept small (1.06)
	   and slow (0.4s) on purpose — a "subtle" zoom, not the more dramatic
	   scale used elsewhere on the site. */
	transition: transform 0.4s ease;
}

.event-card:hover .event-card-media img {
	transform: scale(1.06);
}

/* No featured photo for this event — same diagonal-stripe texture used
   everywhere else on the site for a placeholder photo slot (.bg-beam,
   applied alongside this class in the markup itself), plus a visible
   "livefoto · [name]" label rather than pretending a real photo exists —
   matches the reference screenshot's own treatment of the same case
   exactly (its example cards carry the identical caption/texture). */
.event-card-media-caption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	font-family: Archivo, Impact, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	color: rgba(242, 242, 237, 0.4);
}

.event-card-body {
	padding: 20px;
}

.event-card-date {
	display: block;
	color: var(--acid-accent-2);
	margin-bottom: 8px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
}

.event-card-title {
	color: var(--acid-bone);
	margin: 0 0 8px;
	/* No Elementor widget here to reach for (notescape_child_event_cards(),
	   functions.php, is plain custom PHP markup) — line-height was never
	   set at all, so it fell back to the parent theme's own default h3
	   line-height (1.5, confirmed: 48px on this 32px font, a large empty
	   band between two wrapped lines). First cut halved that outright
	   (0.75) per direct request, but that then read as too tight —
	   lines nearly touching. Settled on 0.95 instead, same ratio already
	   used for every other display heading on this site (Releases,
	   Showreel, Foto's, etc.) — consistent with them, and a middle
	   ground between the two. */
	line-height: 0.95;
	/* SLEM brand guide 1.0, web scale: H3 20–24px. 20px so one long word
	   ("Bevrijdingsfestival") still fits a third-width card in Archivo Expanded. */
	font-size: 20px;
}

.event-card-description {
	/* SLEM brand guide 1.0: second text in dim, text 16–18px / 1.6. */
	color: #948C8E;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* ==========================================================================
   Bilingual (NL/EN) — language switch. Same markup in header + footer
   (functions.php: notescape_child_language_switcher()); active language in
   the accent colour, per the brand doc.
   ========================================================================== */

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--body-font-stack);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 600;
}

.lang-switch-item {
	color: var(--acid-bone);
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.lang-switch-item:hover {
	opacity: 1;
}

.lang-switch-item.is-active {
	color: var(--acid-accent-1);
	opacity: 1;
}

.lang-switch-sep {
	color: var(--acid-bone);
	opacity: 0.3;
}

/* Header placement, alongside the cart/wishlist icons it's hooked next to
   (.cta-container / .cta-item — inc/frontend/hooks/navigation.php). */
.cta-container .lang-switch,
.flex-mobile-wrap .lang-switch {
	margin-right: 12px;
}

/* Footer placement — notescape_footer_before (always fires, unlike the
   optional bottom bar — see the PHP comment above where this is hooked). */
.footer-lang-switch {
	display: flex;
	justify-content: center;
	padding: 20px 24px;
	background-color: var(--acid-blackout);
}

/* ==========================================================================
   Booking button — site-wide header + footer CTA (functions.php:
   notescape_child_booking_button()). .button already carries the cut-corner
   shape/colours from the "De 42 graden" block above; this is placement only.
   ========================================================================== */

.dj-slem-booking-button {
	margin-right: 16px;
	padding: 10px 20px !important;
	font-size: 11px;
}

.footer-booking-button {
	display: flex;
	justify-content: center;
	padding: 24px;
	background-color: var(--acid-blackout);
}

/* ==========================================================================
   Mobile-first — brand doc, section 15. "Most traffic comes from Instagram,
   so mobile is the real design. At 390px: full-width cut-corner buttons
   with a 48px hit area, hero display type at 34px, the corner monogram at
   20px, the release grid at two columns, and the booking button visible
   without scrolling."

   Breakpoint is 480px (comfortably covers the 390px test width plus other
   small phones) rather than 390px exactly, standard practice for a
   min-width-up design — nothing about this brand system calls for matching
   a single device width precisely. NOTE: no visual/screenshot tool was
   available to actually see these applied on a phone — the values below
   are implemented exactly as specified, but a real look on an actual
   device (or the "test the language switch and the video fallback on a
   real phone" line from this same doc section) is still the way to
   actually confirm this reads right, not just that the rules exist.
   ========================================================================== */

@media (max-width: 480px) {

	/* Full-width cut-corner buttons, 48px minimum hit area. */
	.button,
	.button-secondary,
	.button-download,
	a.button,
	.woocommerce a.button,
	.woocommerce button.button,
	.elementor-button {
		width: 100%;
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* The site-wide booking button (header/footer) is an inline CTA among
	   other header chrome (language switch, cart icon) — full-width there
	   would break the header row layout, so it's exempted from the
	   full-width rule above.
	   Was hidden entirely at this breakpoint (verified overflowing ~25px
	   past the viewport edge in .cta-container's flex-wrap:nowrap row) —
	   restored 2026-09-04 per the client's "100% definitive structure" doc,
	   which explicitly requires it "visible without scrolling" on mobile.
	   Shrunk instead of hidden so it actually fits the same row: smaller
	   padding/font than desktop, and the language switch next to it
	   (already duplicated in the mobile menu panel) drops its separator
	   and gains a tighter margin to free up the space the booking button
	   needs. Still needs a real-device check — no visual tool available
	   here to confirm the row now fits instead of just fitting on paper. */
	.dj-slem-booking-button {
		display: inline-flex !important;
		width: auto !important;
		padding: 8px 12px !important;
		font-size: 9px !important;
		letter-spacing: 0.12em !important;
		margin-right: 6px !important;
		min-height: 36px;
	}

	.cta-container .lang-switch,
	.flex-mobile-wrap .lang-switch {
		margin-right: 6px;
		gap: 4px;
	}

	.cta-container .lang-switch-sep,
	.flex-mobile-wrap .lang-switch-sep {
		display: none;
	}

	/* Hero display type at 34px. */
	.hero-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}

	/* Corner monogram mobile override removed 2026-09-04 along with the
	   base rule above — see that removal's own comment. */

	/* Release grid at two columns. The theme's own grid engine sets an
	   explicit column count via inline/class-driven CSS (post-grid-columns-3
	   etc.) rather than a fluid auto-fill track, so it doesn't reflow to 2
	   columns on its own at this width — force it here instead of touching
	   the per-page column setting (which would also affect desktop). */
	.discography-grid,
	#discography-index.items,
	.post-grid-columns-3,
	.post-grid-columns-4,
	.post-grid-columns-5 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ==========================================================================
   Hero — full bleed, big name, one button (brand guide correction,
   2026-09-04, quick win 4 + component spec "Hero"/"Slider arrows"/
   "Scroll down"). Image list, autoplay timing (20s), loop and Ken Burns
   stay on Elementor's own Background > Slideshow panel on the Hero
   container (083dac9) — an Elementor widget option, not touched here.
   This covers: the gradient overlay (Elementor's native overlay only
   supports a 2-stop gradient; the spec's is 3-stop, so that part is
   custom), the wordmark's fluid clamp() size (Elementor's size control
   takes a plain number, not an expression), excluding the Hero from the
   sitewide corner monogram (component spec: "No monogram in the hero"),
   and the positioning/visibility layer for the arrows-only nav markup
   functions.php injects (Elementor's slideshow has no navigation UI of
   its own), plus the restyled Scroll Down icon widget (a1c9e02).
   ========================================================================== */

body.page-id-16 .elementor-element-083dac9,
body.page-id-17777 .elementor-element-083dac9 {
	/* Already position:relative via the diagonal-cut/monogram rules above —
	   restated here as documentation of why the absolutely-positioned nav
	   below anchors correctly to the Hero itself. */
	overflow: hidden;
}

/* No monogram in the Hero — the sitewide per-section corner mark (further
   down this file) is excluded here only; the rest of the per-section
   marks are unchanged (that system's full replacement is a later item). */
body.page-id-16 .elementor-element-083dac9::after,
body.page-id-17777 .elementor-element-083dac9::after {
	display: none !important;
}

/* 3-stop gradient overlay, dark at the bottom for the wordmark to sit on,
   thinning toward the top. Sits above the slideshow, below the content. */
body.page-id-16 .elementor-element-083dac9::before,
body.page-id-17777 .elementor-element-083dac9::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(8, 8, 10, 0.85) 0%,
		rgba(8, 8, 10, 0.15) 55%,
		rgba(8, 8, 10, 0.35) 100%
	);
}

body.page-id-16 .elementor-element-083dac9 > .e-con-inner,
body.page-id-17777 .elementor-element-083dac9 > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* Wordmark size, label chip, and Boekingen button clearance (all three
   fixed 2026-09-07 — "DJ SLEM bigger", "DJ · PRODUCER in a yellow
   block", "button falls off slightly"), per direct request to prefer
   native Elementor widget options wherever the control actually exists,
   custom CSS only where it doesn't:
     - Wordmark (6232f0a): its own responsive Typography > Font Size
       (140/88/56 desktop/tablet/mobile — 3 discrete breakpoints rather
       than the continuous clamp() a CSS rule could do, but a genuine
       native control instead of one). No CSS needed.
     - Button row (daebd1e): the Container's own native Padding control,
       bottom raised from 56px past the Hero's 70px diagonal-cut rise
       (--section-cut-rise) to 96px. No CSS needed.
     - Label (a1b2c3e) text color: its own Style-tab Text Color, now
       #08080A. No CSS needed for this part.
     - Label (a1b2c3e) background+padding: tried the Advanced tab's
       generic Background/Padding controls first (present on every
       widget) — genuinely a no-op on this install: both target
       "{{WRAPPER}} > .elementor-widget-container", and this site has
       Elementor's "Optimized Markup" experiment active, which drops
       that wrapper div entirely (confirmed: no
       .elementor-widget-container anywhere in this widget's actual
       rendered HTML). Removed those two settings again rather than
       leave dead, no-effect values sitting in the Style tab, and did
       this one part in CSS below instead — the one piece of this
       request without a working native option on this install. */
/* Eyebrow-label yellow-bar chips: the Hero's "DJ · PRODUCER" (a1b2c3e),
   Nieuws en events' "Actualiteit" (a1000002, "Verslagen" renamed
   directly in its own Title setting — NL only, EN's own translation
   "Reports" is untouched), and Showreel's "Video" (a1000001). Same
   reason it's CSS and not a widget option for all three: Heading
   widgets have no background control at all (checked). Each one's own
   Style-tab Text Color is already set to #08080A on both pages
   (readable against this background) — no color override needed here,
   only the chip itself. */
body.page-id-16 .elementor-element-a1b2c3e .elementor-heading-title,
body.page-id-17777 .elementor-element-a1b2c3e .elementor-heading-title,
body.page-id-16 .elementor-element-a1000002 .elementor-heading-title,
body.page-id-17777 .elementor-element-a1000002 .elementor-heading-title,
body.page-id-16 .elementor-element-a1000001 .elementor-heading-title,
body.page-id-17777 .elementor-element-a1000001 .elementor-heading-title {
	display: inline-block;
	background: var(--acid-accent-1);
	padding: 6px 12px 5px;
}

/* Dots, bottom center of the hero — restored 2026-09-04 per the client's
   "100% definitive structure" doc, which explicitly calls for bottom-center
   slide dots and supersedes the brand-guide-feedback pass that had removed
   them (item 4 there). Sits above the Scroll Down button (bottom:44px,
   52px tall) with clearance to spare. */
.hero-slideshow-dots {
	position: absolute;
	left: 50%;
	bottom: 116px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 3;
}

.hero-slideshow-dot {
	width: 9px;
	height: 9px;
	border-radius: 0; /* SLEM brand guide 1.0: no rounded shapes */
	border: 1px solid var(--acid-bone);
	background: transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.hero-slideshow-dot:hover,
.hero-slideshow-dot:focus-visible {
	opacity: 1;
}

/* Same reasoning as the arrows just below: a plain custom <button>,
   no widget/Style-tab option to reach for, and no :focus style here
   before now meant clicking one left the browser's own default focus
   ring showing — on an already-circular 9px dot, an unstyled ring
   would read as a much bigger, out-of-place circle. */
.hero-slideshow-dot:focus {
	outline: none;
}

.hero-slideshow-dot.is-active {
	background-color: var(--acid-accent-1);
	border-color: var(--acid-accent-1);
	opacity: 1;
	transform: scale(1.15);
}

/* Arrows, top right of the hero photo, hidden until the Hero itself is
   hovered — "only appear when hovering over the hero section". */
.hero-slideshow-arrows {
	position: absolute;
	top: 34px;
	right: 56px;
	display: flex;
	gap: 10px;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.elementor-element-083dac9:hover .hero-slideshow-arrows {
	opacity: 1;
	pointer-events: auto;
}

/* Not a real `border` + clip-path: this project already found (see
   .button-outline above) that combining the two clips the border
   unevenly and leaves the diagonal corner with no stroke at all —
   exactly the "buttons are open" report here, on this element for the
   same reason.

   .button-outline's own fix (two stacked SOLID cut-corner shapes) isn't
   right for this element though: that technique only works because
   that button is meant to be opaque even at rest. This one's spec is
   "Default background:transparent" — the hero photo should show
   through the middle — and layering an opaque 1px-inset shape on top,
   as a first pass here briefly did, faked a border by literally
   painting a black square behind the icon, which is exactly a bug of
   its own (that's the "why a default black background" question).

   The actual fix: clip a single ::before to a RING — the cut-corner
   shape with a 1px-smaller copy of itself subtracted out via an
   evenodd path (`path()`, not `polygon()` — a plain polygon can't
   express a shape with a hole in it). Only that 1px ring is ever
   painted, so the middle stays genuinely empty/transparent at rest;
   on hover the ring's own clip-path swaps to the plain solid
   cut-corner shape, filling the whole button.

   Point coordinates below are absolute px for this element's fixed
   48x48 size. The inner (hole) outline is a true perpendicular 1px
   inset of the outer shape, not just "shrink the rise/run by 1px each"
   — that shortcut (tried first) moves the two straight edges in by
   exactly 1px but the diagonal edge by only ~0.9px, since rise/run
   aren't themselves measured perpendicular to that edge, leaving the
   diagonal segment of the ring visibly thinner than the other three
   sides ("same border all sides, same thickness"). The two diagonal
   points below (35.54, 33.63) are where the true 1px-inset diagonal
   line actually intersects the inset right/bottom edges, keeping the
   stroke width identical all the way around instead of approximate. */
.hero-slideshow-arrow {
	position: relative;
	isolation: isolate;
	width: 48px;
	height: 48px;
	background: transparent;
	border: none;
	color: var(--acid-bone);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	transition: color 0.2s ease;
}

.hero-slideshow-arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--acid-bone);
	-webkit-clip-path: path(evenodd, "M0 0 L48 0 L48 36 L34 48 L0 48 Z M1 1 L47 1 L47 35.54 L33.63 47 L1 47 Z");
	clip-path: path(evenodd, "M0 0 L48 0 L48 36 L34 48 L0 48 Z M1 1 L47 1 L47 35.54 L33.63 47 L1 47 Z");
	transition: clip-path 0.2s ease;
}

.hero-slideshow-arrow:hover,
.hero-slideshow-arrow:focus-visible {
	color: var(--acid-blackout);
}

.hero-slideshow-arrow:hover::before,
.hero-slideshow-arrow:focus-visible::before {
	/* SLEM brand guide 1.0: secondary buttons go to redline on hover. */
	background: var(--acid-accent-1);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
}

/* Mirrored per direct request — same fix, same math as the Photo
   Gallery's own Prev/Next (assets/style.css there): both arrows shared
   the identical bottom-right cut, reading as two copies of the same
   shape rather than a matched pair. Every x-coordinate reflected
   (x' = 48 - x, or 100% - x for the percentage values) so Prev's cut
   corner mirrors to the bottom-left instead — a true mirror image, not
   a different cut. */
.hero-slideshow-arrow-prev::before {
	-webkit-clip-path: path(evenodd, "M48 0 L0 0 L0 36 L14 48 L48 48 Z M47 1 L1 1 L1 35.54 L14.37 47 L47 47 Z");
	clip-path: path(evenodd, "M48 0 L0 0 L0 36 L14 48 L48 48 Z M47 1 L1 1 L1 35.54 L14.37 47 L47 47 Z");
}

.hero-slideshow-arrow-prev:hover::before,
.hero-slideshow-arrow-prev:focus-visible::before {
	-webkit-clip-path: polygon(100% 0, 0 0, 0 calc(100% - 12px), 14px 100%, 100% 100%);
	clip-path: polygon(100% 0, 0 0, 0 calc(100% - 12px), 14px 100%, 100% 100%);
}

/* Plain custom <button>, no widget/Style-tab option to reach for —
   clicking one previously left it wearing the browser's own default
   focus ring (color varies by OS/browser) since nothing here styled
   :focus at all; matching the hover look above instead of removing the
   outline outright keeps a visible state for keyboard users, just the
   site's own one. */
.hero-slideshow-arrow:focus {
	outline: none;
}

/* Scroll Down button (the icon widget added alongside the DJ SLEM
   heading/Boekingen button — see functions.php's add-scroll-down.php
   note for why it's a sibling of that container, not inside it).
   Centered at the bottom of the Hero, with a slow bounce hint. */
#hero-scroll-down {
	position: absolute;
	left: 50%;
	bottom: 44px;
	transform: translateX(-50%);
	z-index: 3;
}

/* Direct request: match the back-to-top button's own layout exactly
   (same 48×48 cut-corner square, same hand-drawn chevron), just pointing
   down instead of up — was 52×52 with a real Font-Awesome glyph
   (fa-chevron-down) rendered by Wolf Core's icon widget, visibly a
   different size and a different (icon-font) chevron style from
   #back-to-top-link's own CSS-only one. Colors are still the widget's
   own native Elementor settings (Icon Color / Hover, already the same
   --acid-accent-1/--acid-accent-2/--acid-blackout trio used everywhere
   else) — untouched, only shape and the icon itself change here. */
#hero-scroll-down .wolf-core-icon {
	position: relative;
	width: 48px !important;
	height: 48px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
	box-shadow: none;
	animation: hero-scroll-hint 1.8s ease-in-out infinite;
}

/* Hide the real Font-Awesome glyph, replace it with the exact same
   border-rotation chevron #back-to-top-link uses (same 10px box, same
   2px stroke, same color) — just rotated the other way to point down
   instead of up. */
/* The real fix for the button being unclickable: `.wolf-core-icon` is
   display:flex with align-items:center (set above), and its only DOM
   child is the actual `<a href="#personal-story-part-1">` link (the
   icon glyph `<i>` hidden below is INSIDE that `<a>`, not a sibling of
   it). With align-items:center (not the flex default of stretch) a flex
   item shrinks to fit its own content - and once that content (the icon
   glyph) is display:none, the `<a>` has nothing left to size itself by
   and collapses to 0x0, sitting invisible/unclickable under the visible
   ::before chevron drawn on its parent. Confirmed directly (Playwright):
   real clicks landed on the 0-size `<a>`'s own delegated jQuery handler
   walking up to the wrapping div instead, which has no href, so the
   click was silently swallowed. Filling the `<a>` back out to the
   parent's own full size fixes this without touching the parent theme's
   own click-handling JS at all. */
#hero-scroll-down .wolf-core-icon a {
	/* position:absolute (not a flex-filling width/height) so the link
	   doesn't become a second competing flex item alongside the
	   ::before chevron below - it just sits over the same 48x48 box as
	   an independent layer, restoring the clickable area without
	   disturbing the chevron's own centered flex layout. #hero-scroll-
	   down is already position:absolute, so this anchors correctly
	   against it without needing position:relative added here. */
	position: absolute;
	inset: 0;
}

#hero-scroll-down .wolf-core-icon .fa-chevron-down {
	display: none;
}

#hero-scroll-down .wolf-core-icon::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid var(--acid-blackout);
	border-right: 2px solid var(--acid-blackout);
	transform: rotate(45deg) translateY(-2px);
}

@keyframes hero-scroll-hint {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}

/* "Mijn verhaal" / personal-story section — the solid card at the bottom
   of the photo (M logo + "DJ SLEM" + "DJ · PRODUCER") per the approved
   "DJ Slem Homepage Concept v2" reference: a near-black panel with a
   shallow diagonal top edge, matching the site's cut-corner motif used
   elsewhere (hero-scroll-down, buttons). Elementor has no native control
   for an arbitrary clip-path polygon, so — per the "native option first,
   custom only if it doesn't exist" rule — this is the one piece of this
   composition that legitimately needs a CSS rule; everything else (the
   card's own background color/size/position) is set through the widget's
   native Elementor settings. Applied via a shared "_css_classes" value
   set on both the NL and EN caption-row containers, so one rule covers
   both languages instead of duplicating per element ID. */
.story-photo-caption {
	-webkit-clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
}

/* Back-to-top link (#back-to-top-link) — a parent-theme template
   feature, not an Elementor widget or a page setting, so there's no
   widget/Customizer option for its actual shape (only whether it
   shows at all). It ships as a hand-drawn squiggle-and-swoosh SVG —
   the same doodle family the brand guide already had removed
   everywhere else on the site ("the decoration layer goes, and
   nothing replaces it") — this is the one spot it survived, since
   nothing here had touched this element before. Same fix as every
   other custom (non-widget) icon control on this site: hide the
   original SVG, rebuild it as the same cut-corner square + plain
   chevron used for the Hero's own Scroll Down button and slideshow
   arrows, via CSS only (a plain border-rotation chevron, so this
   doesn't need any new markup injected to get a clean arrow shape).
   Solid fill rather than the arrows' transparent-ring style, since
   this one has to stay legible as a fixed element scrolling over
   every kind of section background, not just one known photo. */
/* `body` prefix on every selector below isn't decorative — the parent
   theme's own styles.css has an equally-!important #back-to-top-link
   rule of its own, and (both sides tied on plain-ID specificity) it
   happens to load after this file, so it was winning ties by source
   order alone until this added the one extra ancestor needed to
   out-specify it outright, regardless of load order. */
body #back-to-top-link {
	position: fixed !important;
	width: 48px !important;
	height: 48px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--acid-accent-1) !important;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
	transition: background-color 0.2s ease;
}

body #back-to-top-link svg {
	display: none !important;
}

body #back-to-top-link::before {
	content: "";
	display: block !important;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--acid-blackout);
	border-right: 2px solid var(--acid-blackout);
	transform: rotate(-45deg) translateY(2px);
}

body #back-to-top-link:hover,
body #back-to-top-link:focus-visible {
	background: var(--acid-accent-2) !important;
}

#back-to-top-link:focus {
	outline: none;
}

/* Elementor's native lightbox (Photo Gallery widget, djslem-photo-gallery
   — see djslem_photo_gallery_render_tile()) reserves 70px of padding on
   every side of the slide before the photo itself gets sized into
   whatever's left (Elementor core's own lightbox.min.css,
   .elementor-lightbox .elementor-lightbox-item) — plenty of room for
   its own toolbar/arrows, but it leaves the actual photo noticeably
   smaller than the screen it has to work with, especially once an
   image's own aspect ratio is narrower than the viewport's. Checked
   Elementor's own Lightbox kit settings first (Site Settings >
   Lightbox) — no control there for this at all, only which UI features
   show and their colors, so this is CSS, not a missed native option.
   Reduced to 24px — plenty still for the toolbar (top-right) and arrows
   (vertically centered outside this padded box already, unaffected by
   it) not to crowd the image, while letting the photo actually grow
   into the space that opened up. `body` prefix for the same reason as
   elsewhere in this file: matching specificity against Elementor's own
   stylesheet, whichever one happens to load first. */
body .elementor-lightbox .elementor-lightbox-item {
	padding: 24px;
}

/* Prev/Next lightbox arrows, smaller again per direct follow-up request
   (this was tried, reverted to Elementor's plain default per a request
   right after, then asked for small again here — this is that same fix
   re-applied, not a new one). Native setting: Site Settings > Lightbox
   > Navigation Icons Size, 16px (Kit post 17318's own
   lightbox_slider_icons_size, down from Elementor's 25px default).

   Needs the CSS below to actually take effect, for two stacked reasons
   confirmed by checking what's actually rendered, not just the
   variable's own value:

   1) A different Elementor stylesheet (e-swiper.min.css, generic
      swiper-widget base styles, not lightbox-specific) sets a hardcoded
      font-size:25px on a MORE specific selector chain than
      lightbox.min.css's own rule (which does use the Kit's variable),
      so it wins regardless of what the Kit setting resolves to.

   2) Even with font-size corrected, the arrow is an inline SVG
      (`<svg class="e-font-icon-svg">`, Elementor's icon sprite system),
      and the parent theme's own styles.css has an `!important` rule
      sizing that exact SVG to `width:100%; height:100%` of its
      button — and the button is a deliberately huge click target
      (240x900px) — so the icon rendered at the full size of the click
      zone regardless of font-size or the Kit setting.

   That same parent-theme rule also pins the SVG at `position:absolute;
   top:0` — invisible while the icon filled its whole button anyway,
   but shrinking it without addressing this put the (now small) icon in
   the button's extreme top-left corner instead of centered in it,
   clipped almost entirely off the top of the screen — confirmed
   directly, and exactly what "where did the buttons go" turned out to
   be last time. The button itself is flex with
   align-items/justify-content:center already; taking the icon out of
   absolute positioning is enough to let that flex centering place it
   correctly, no manual centering math needed. */
.elementor-lightbox .swiper .elementor-swiper-button-next,
.elementor-lightbox .swiper .elementor-swiper-button-prev {
	font-size: var(--lightbox-navigation-icons-size, 16px) !important;
}

.elementor-lightbox .swiper .elementor-swiper-button-next svg,
.elementor-lightbox .swiper .elementor-swiper-button-prev svg {
	width: var(--lightbox-navigation-icons-size, 16px) !important;
	height: var(--lightbox-navigation-icons-size, 16px) !important;
	position: static !important;
}

/* Photo Showreel (a6f13d8) — its carousel-era arrow/slide CSS (Elementor
   Image Carousel widget, an earlier version of this section) removed
   2026-09-04: the section is the static photo grid now (b3000000's row +
   column of containers with background_image, see the grid CSS further
   below), no swiper/carousel markup left on the page for any of this to
   match. See functions.php/this file's own grid rules for the current
   build — label chip a1000007, heading a1000008, grid row b3000000. */

/* ==========================================================================
   Left sidebar — full custom sidebar, 2026-09-04 (matches the concept
   mockup's always-visible left text sidebar, per explicit request over
   the restyled-dots interim version this replaces). Originally the
   homepage's own one-page nav only; broadened site-wide 2026-09-1x per
   direct request/screenshot — see the doc comment on
   notescape_child_onepage_sidebar() (functions.php) for the full "why".

   Background on why a custom build was needed at all: the theme's own
   .floating-menu deliberately renders empty on the homepage (menu-desktop.php
   skips wp_nav_menu() whenever notescape_do_onepage_menu() is true), which
   is meant to hand off to Wolf Core's own #wolf-core-one-page-nav scroller
   — its toggle (postmeta _post_scroller) was off, now on, so that one
   works too, but its native pattern is small edge dots with the label as
   a hover-only tooltip, not an always-visible text list. Both of those
   are hidden below in favor of #onepage-sidebar (functions.php,
   notescape_child_onepage_sidebar()) — a full left sidebar reusing the
   site's own existing language-switcher and booking-button functions
   rather than reimplementing them. Desktop only: a fixed sidebar is a
   poor mobile pattern, so below 1024px this reverts to the existing top
   header + hamburger menu, already fixed for mobile in quick win 9.

   Width: 200px originally, reduced to 170px per direct request ("reduce
   left menu width") — checked the longest label ("MIJN VERHAAL"/"AGENDA")
   still fits on one line at this width before settling on it, rather than
   picking a number blind.
   ========================================================================== */
.floating-menu,
#wolf-core-one-page-nav {
	display: none !important;
}

#onepage-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	#onepage-sidebar {
		display: flex;
		flex-direction: column;
		gap: 34px;
		position: fixed;
		left: 0;
		top: 0;
		width: 170px;
		/* Not 100vh: the site-wide sticky MP3 player bar (Wolf Playlist
		   Manager, wpm-sticky-playlist-container) is a separate fixed
		   element that also claims this same bottom-left corner — its own
		   height is 50px. A real, confirmed bug otherwise (not just a
		   visual guess): with the sidebar at full 100vh height and a
		   higher z-index (200) than the player bar (auto), Prev/Play/Next
		   render UNDERNEATH the sidebar and every click there lands on the
		   sidebar instead — checked with the browser's own
		   elementFromPoint() at the Play button's exact center, not just
		   by eye. Tried clearing the button row itself first (padding-left
		   on .mejs-controls, matching how #page-content/footer already
		   clear this same sidebar) — no effect: MediaElement's own control
		   buttons don't actually follow their container's padding for
		   horizontal position (confirmed directly: padding-left computed
		   correctly on the parent, button rect didn't move at all), so
		   that approach couldn't work here regardless of the value used.
		   Shortening the sidebar itself instead, so it simply doesn't
		   reach into the player bar's own space in the first place — the
		   flex column's `margin-top:auto` on the booking button (further
		   below) re-flows to sit above this new shorter bottom
		   automatically, so nothing else here needs to change to match. */
		height: calc(100vh - 50px);
		padding: 34px 22px 30px;
		background: var(--acid-blackout);
		border-right: 1px solid rgba(242, 242, 237, 0.1);
		z-index: 200;
	}

	#onepage-sidebar-logo {
		display: block;
		width: 40px;
		/* SLEM brand guide 1.0: strokes in bone via fill="currentColor",
		   third stroke redline from the SVG itself — never all red. */
		color: var(--acid-bone);
	}

	#onepage-sidebar-logo svg {
		display: block;
		width: 100%;
		height: auto;
	}

	#onepage-sidebar-nav {
		display: flex;
		flex-direction: column;
		gap: 15px;
		font-family: 'Archivo', sans-serif;
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	#onepage-sidebar-nav a {
		color: var(--acid-bone);
		text-decoration: none;
		opacity: 0.75;
		transition: opacity 0.2s ease, color 0.2s ease;
	}

	#onepage-sidebar-nav a:hover,
	#onepage-sidebar-nav a.is-active {
		opacity: 1;
		color: var(--acid-accent-1);
	}

	/* Reused site-wide components (language switch, booking button) —
	   both already correctly styled for the header's inline row; only
	   their layout needs adjusting to sit stacked in the sidebar instead. */
	#onepage-sidebar .lang-switch {
		font-size: 11px;
	}

	#onepage-sidebar .dj-slem-booking-button {
		margin-top: auto;
		margin-right: 0;
		width: 100%;
		text-align: center;
	}

	/* The header's own copies of everything this sidebar now shows
	   (logo, nav, language switch, booking button) become fully
	   redundant once the sidebar covers the same ground — direct
	   request ("remove top menu"). This replaces an earlier, narrower
	   version of this rule that only hid the language-switch/booking-
	   button pieces on the two home page IDs — surgical, and it had
	   also stopped actually working (the booking button specifically
	   kept showing, a higher-specificity/!important parent-theme rule
	   winning over this one) — hiding the whole bar sidesteps that
	   entirely, and covers every page now that the sidebar does too.

	   Two different bars, not one: confirmed live this site actually
	   runs two different Menu Layouts depending on the page — the
	   homepage itself is set to "Floating" (renders only #mobile-bar,
	   at every width, never #nav-bar), while every other page (event,
	   shop, blog, ...) is "Top Justify" (renders #nav-bar — a full
	   horizontal menu, id="site-navigation-primary-desktop" — from
	   1024px up, and only falls back to #mobile-bar below that). First
	   pass here only covered #mobile-bar, so #nav-bar was still showing
	   its own full duplicate "Home / Releases / ... / Contact" row on
	   every non-home page above ~1024px — confirmed via a follow-up
	   screenshot. Both are hidden here now rather than trying to
	   reconcile the two pages' different Menu Layout settings into one
	   (that's a broader, riskier change with its own knock-on styling
	   effects via the menu-layout-* body classes elsewhere; this
	   sidebar already covers everything either bar would show). Note:
	   this also removes #mobile-bar's own cart/search icons at this
	   breakpoint site-wide, not only the logo/nav/language/booking
	   pieces the sidebar duplicates — flagged directly, not silently,
	   in case that specific trade-off wasn't intended. */
	#mobile-bar,
	#nav-bar {
		display: none !important;
	}

	/* Push the page's own content clear of the fixed sidebar. The footer
	   (.site-footer, .site-infos) is NOT inside #page-content — footer.php
	   closes that div before either one renders — so it needs the same
	   170px pushed clear separately, or the fixed sidebar sits on top of
	   it instead of stopping where the page content does. Site-wide now
	   (was page-id-16/17777 only), matching the sidebar itself. */
	#page-content,
	.site-footer,
	.site-infos {
		padding-left: 170px;
	}
}

.floating-menu .one-page-menu-link.menu-link-active .svg-doodle path {
	stroke: var(--acid-accent-1) !important;
}

/* ==========================================================================
   Sticky MP3 player bar (Wolf Playlist Manager / MediaElement.js) — its
   default "transparent" theme leaves the bar with no background at all, so
   whatever's scrolled behind it (a photo, a section edge) bleeds straight
   through and the controls read as floating debris rather than a real
   player. Gives it a solid dark bar, Acid Green on the controls that
   matter (play button, progress fill), and proper spacing/typography for
   the track info text — matches the site's button/accent language instead
   of the plugin's generic default look.
   ========================================================================== */
.wpm-sticky-playlist-container,
.wpm-sticky-playlist-container .mejs-container {
	background: var(--acid-blackout) !important;
}

/* .mejs-controls deliberately NOT included in the rule above (it used to
   be) — .mejs-layers, which holds the track title/artist text, sits
   BEHIND .mejs-controls in mejs's own DOM/paint order, both covering the
   exact same box. Painting .mejs-controls opaque as well completely
   hid the title behind it — confirmed directly, the text was there in
   the DOM with the right color the whole time, just permanently
   covered. .mejs-container right above already gives the whole bar the
   same solid blackout backdrop, so nothing here loses that background —
   this only stops painting over it a second time, directly on top of
   the text meant to show through. */

.wpm-sticky-playlist-container {
	border-top: 1px solid rgba(242, 242, 237, 0.12);
	/* Flicker fix: this bar is position:fixed on top of a page that uses a
	   rAF-driven smooth-scroll library (Lenis, see <html class="lenis ...">)
	   plus large scrolling photo/video backgrounds behind it. Without its
	   own GPU compositing layer, Chromium repaints this fixed element from
	   the main thread on every scroll frame instead of just moving an
	   already-composited layer — on fast/continuous scroll that shows up as
	   a visible flicker/tear. Promoting it to its own layer keeps it rock
	   steady regardless of what's scrolling behind it. */
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
}

.wpm-sticky-playlist-container .mejs-controls {
	padding: 0 20px !important;
	gap: 4px;
}

/* Play/pause gets real visual weight — a filled Acid Green circle instead
   of a bare icon — since it's the one control people actually look for. */
.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-playpause-button {
	background: var(--acid-accent-1) !important;
	border-radius: 0 !important; /* SLEM brand guide 1.0: no rounded shapes */
	overflow: hidden !important;
	width: 40px !important;
	height: 40px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Sits on top of the 50x50 track-artwork thumbnail (.mejs-layers,
	   a separate sibling covering the same box) — was top-aligned like
	   every other control instead of centered on it, so the 10px the
	   button doesn't cover only showed up as a sliver of artwork at the
	   very bottom rather than an even ring all the way round (confirmed
	   directly: both boxes start at the same y, one just 10px shorter). */
	top: 50% !important;
	transform: translateY(-50%);
	/* Moved to sit beside the artwork thumbnail instead of on top of it,
	   per direct request — was left:0 (the plugin's own default, see
	   wpm.css), directly overlapping the 50px-wide artwork square next
	   to it. 58px clears that 50px square plus an 8px gap. Prev/Next and
	   the track-info text's own left padding are shifted the same
	   distance further right below, so the whole row still reads as one
	   evenly-spaced composition instead of just relocating one overlap
	   into a new one. */
	left: 58px !important;
}

.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-playpause-button button {
	background: transparent !important;
	width: 100% !important;
	height: 100% !important;
	/* The actual play/pause icon is the WRAPPER's own ::before (further
	   below), not this <button> — this element is only the invisible
	   click target. The wrapper centers its contents via flex
	   (align-items/justify-content:center, above), and since ::before
	   counts as a flex item too, this <button> was competing for space
	   in that same centered row right alongside the icon: two items
	   sharing one centered group instead of one icon centered alone,
	   which is what was actually pushing the icon off-center (confirmed
	   directly — this button's own rendered width came out to a random
	   16.8px, not the 100%/40px asked for here, because flexbox shrank
	   both competing items down to fit). Taking it out of flow with
	   absolute positioning stops it competing for layout space at all,
	   so the ::before is the only thing left for the flex centering to
	   center — while still covering the full circle for clicks/taps. */
	position: absolute !important;
	inset: 0 !important;
}

.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-playpause-button:before {
	color: var(--acid-blackout) !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	line-height: 1 !important;
	/* mejs's own base CSS (built for its default, much wider skin) sets
	   this pseudo's own height to 55px — taller than the 40px circle
	   it's actually in here, confirmed directly. `align-items:center` on
	   the wrapper still centers that oversized box within the circle,
	   but the glyph's own text sits somewhere inside ITS OWN 55px box
	   that isn't that box's visual middle (a block's line-height:1 text
	   still renders from its own top, not vertically centered within a
	   taller box around it) — so the glyph itself ends up off-center
	   even though the box containing it is centered correctly. Matching
	   height to the actual circle plus flex centering on the glyph's own
	   box (rather than trusting line-height alone) is what actually
	   fixes that, not just centering the outer box. */
	height: 40px !important;
	width: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Shifted the same distance further right as the play button above, so
   Prev/Next land right after it instead of the play button's new
   position now overlapping THEM — same 45px/85px gap between the two
   the plugin's own CSS already used, just both moved to start after the
   play button's own new right edge (58+40=98) plus a 10px gap. */
.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-previous-button {
	left: 108px !important;
}

.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-next-button {
	left: 148px !important;
}

.wpm-sticky-playlist-container .mejs-previous-button button,
.wpm-sticky-playlist-container .mejs-next-button button {
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.wpm-sticky-playlist-container .mejs-previous-button button:hover,
.wpm-sticky-playlist-container .mejs-next-button button:hover {
	opacity: 1;
}

/* The plugin's own left padding here (145px) was sized for the OLD
   layout — play/prev/next all packed into the first ~130px, artwork
   overlaid underneath them rather than taking its own space. Now that
   the play button starts at 58px and Next ends at 148+30=178px, the
   text needs to start clear of that instead, not the old narrower
   row — 195px leaves the same ~20px breathing room the original design
   had after Next. */
.wpm-sticky-playlist-container .mejs-track-details {
	padding-left: 195px !important;
}

/* Track info (title/artist) — proper brand typography instead of the
   plugin default, with the title picking up more visual weight than the
   artist name underneath it. */
.wpm-sticky-playlist-container .mejs-track-title,
.wpm-sticky-playlist-container .mejs-track-artist {
	font-family: 'Archivo', sans-serif;
	color: var(--acid-bone) !important;
}

.wpm-sticky-playlist-container .mejs-track-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wpm-sticky-playlist-container .mejs-track-artist {
	opacity: 0.6;
	font-size: 11px;
}

/* Progress/time rail — Acid Green fill instead of the plugin's default
   grey, consistent with every other progress/accent element on the site.

   Also constrained to an actual thin strip here (top edge of the bar) —
   the color-only rule below was already correct, but neither it nor the
   plugin's own CSS ever set a height for this element, so it defaulted
   to the full 50px bar height at 15% opacity: technically "there," but
   reading as a barely-there grey wash across the whole bar rather than
   a visible progress indicator (confirmed directly: rail computed to
   the full bar's own height). First cut used 3px — a plain 1px per
   direct follow-up request. */
.mejs-time-rail {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 1px !important;
}

.wpm-sticky-playlist.wpm-theme-transparent-light .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total,
.wpm-sticky-playlist.wpm-theme-transparent-dark .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total,
.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
	background: rgba(242, 242, 237, 0.15) !important;
	height: 1px !important;
	top: 0 !important;
}

.wpm-sticky-playlist.wpm-theme-transparent-light .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current,
.wpm-sticky-playlist.wpm-theme-transparent-dark .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current,
.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
	background: var(--acid-accent-1) !important;
	height: 1px !important;
	top: 0 !important;
}

.wpm-sticky-playlist .mejs-container .mejs-controls .mejs-time-rail .mejs-time-handle-content {
	background: var(--acid-accent-1) !important;
	border-color: var(--acid-accent-1) !important;
}

.wpm-sticky-playlist-container .mejs-time {
	color: var(--acid-bone) !important;
	opacity: 0.7;
	font-family: 'Archivo', sans-serif;
	font-size: 11px;
}

.wpm-sticky-playlist-container .mejs-toggle-playlist-button button {
	opacity: 0.7;
}

.wpm-sticky-playlist-container .mejs-toggle-playlist-button button:hover {
	opacity: 1;
}

/* Track list panel (opens above the bar when toggled) — match the same
   dark/Bone/Acid Green language instead of the plugin's default panel. */
.wpm-playlist .wpm-tracks {
	background: var(--acid-blackout) !important;
	border-bottom: 1px solid rgba(242, 242, 237, 0.12);
}

.wpm-playlist .wpm-track {
	border-bottom: 1px solid rgba(242, 242, 237, 0.08) !important;
}

.wpm-playlist .wpm-track-title,
.wpm-playlist .wpm-track-artist {
	color: var(--acid-bone) !important;
	font-family: 'Archivo', sans-serif;
}

.wpm-playlist .wpm-track.is-current,
.wpm-playlist .wpm-track:hover {
	background: rgba(255, 45, 63, 0.08) !important;
}

.wpm-playlist .wpm-track.is-current .wpm-track-title {
	color: var(--acid-accent-1) !important;
}

/* ==========================================================================
   Video Spotlight (a856ec7) carousel — rebuilt 2026-09-04 per the
   component spec ("bars, not dots"). See the matching JS in functions.php
   (notescape_child_video_spotlight_nav) for how slides are found, swapped
   and captioned. Only one .video-spotlight-slide is ever visible; the
   show/hide itself is done in CSS rather than JS so there's no flash of
   every video stacked on load before JS runs.

   Prev/next arrow buttons (previously here alongside the bars) were
   removed per direct request — bars are the only navigation now, so
   their CSS (.video-spotlight-arrows/.video-spotlight-arrow) is removed
   too rather than left as dead, unused rules. --- */
.video-spotlight-slide {
	display: none !important;
	position: relative;
}

.video-spotlight-slide.is-active {
	display: flex !important;
}

.video-spotlight-meta {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.video-spotlight-bars {
	display: flex;
	gap: 8px;
}

.video-spotlight-bar {
	width: 34px;
	height: 6px;
	background: rgba(242, 242, 237, 0.28);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.video-spotlight-bar:hover {
	background: rgba(242, 242, 237, 0.5);
}

.video-spotlight-bar.is-active {
	background: var(--acid-accent-1);
}

.video-spotlight-caption {
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(242, 242, 237, 0.45);
}

/* html was left at its default overflow-x: visible — off-canvas panels
   (mobile menu, cart) sit fully off-screen via fixed positioning, which
   pushes past the viewport edge and lets the whole document actually
   scroll ~10px sideways on mobile, revealing empty space at the right
   edge. Fixed-position elements are positioned against the viewport
   itself, escaping any ordinary ancestor's own overflow clipping (that's
   why the parent theme's existing `body{overflow-x:hidden!important}`
   alone never stopped this) — clipping them needs the actual root
   (html) to declare its own overflow.

   This one turned into a real rabbit hole diagnosing the Releases
   horizontal-scroll widget, worth recording in full so it isn't
   reintroduced by a future "just add overflow-x:hidden here" edit:

   1) `html{overflow-x:hidden}` alone breaks position:sticky SITE-WIDE.
      Two separate, both spec-correct browser behaviours stack together:
      (a) an element can't have one axis 'visible' and the other not —
      the browser silently promotes the visible axis to 'auto' so both
      axes agree, so overflow-y quietly becomes 'auto' too even though
      never declared; (b) overflow-x/y on <html> ONLY propagates from
      <body> (letting body's own overflow act as if it were the
      viewport's) while html's OWN computed overflow is 'visible visible'
      on both axes — the instant html declares anything else (even just
      one axis), that propagation stops, body's overflow-y:auto (parent
      theme's own main.css) becomes body's own real, independent, inert
      scroll container instead (inert because body's natural height
      never actually exceeds itself — html{height:100%;max-height:100%},
      also parent theme, is what's really capping/scrolling), and every
      `position:sticky` element on the page — computed against its
      nearest ancestor scroll container, which resolves to <body> once
      propagation stops — silently stops sticking. Confirmed directly on
      the Releases widget's own `.sticky-holder`: rect.top scrolled
      linearely with the page the whole way through instead of clamping
      at 0px, exactly like the untouched reference build
      (wordpress-1496572-6167087.cloudwaysapps.com) does the whole way.

   2) Switching to `overflow-x: clip` (which, unlike hidden, never
      becomes a scroll container at all, so rule (a) above shouldn't
      even apply) was NOT enough by itself — html having any non-visible
      axis at all is what kills the body-overflow propagation in (b),
      regardless of which non-visible value it is. Sticky stayed broken
      until BODY's own overflow was also put back to plain `visible`
      here (overriding the parent theme's `!important`, which is why
      this needs its own `!important` too) — with only ONE element
      (html) declaring a real overflow, propagation/scrollingElement
      resolution stops being ambiguous and sticky positioning is
      unambiguous again. Confirmed empirically against the reference
      build's own identical scroll behaviour before landing on this,
      not guessed from the spec text alone. */
html {
	overflow-x: clip;
	overflow-y: visible;
}

body {
	overflow: visible !important;
}

/* ==========================================================================
   Releases: horizontal-scroll-via-vertical-scroll is the widget's OWN
   native "Horizontal Scroll Grid" option (release-index widget setting
   `horizontal_scroll`, already enabled on this widget) — a prior round
   here fought it instead of using it: it added min-height:0 / height:auto
   / position:static overrides (removed now) to kill the tall
   .space-holder the widget's own JS sizes in JS (Gs.setContainerHeight(),
   assets/js/t/notescape/build/app.js), because that tall scroll-runway
   looked like "a tall black gap" under the release covers.

   It isn't a gap to fix — it's the animation's runway, exactly as tall on
   the reference build too (confirmed directly:
   wordpress-1496572-6167087.cloudwaysapps.com computes the same
   .space-holder to ~4189px there, un-overridden). What actually fills
   that runway with the right color is the wrapping Elementor container
   ("Releases", background_color #08080A) simply being tall enough to
   contain its own child — solid black-on-black already, so there's
   nothing to visually patch here at all. The override above didn't fix a
   gap, it just silently broke the scroll effect: with height:auto the
   .space-holder collapses back to content height, leaving the JS no
   extra scroll distance to translate .horizontal-grid across, and
   position:static on .horizontal-grid breaks the absolute-positioned
   translateX animation entirely (confirmed: transform stayed
   translateX(0px) through every scroll step with the override in place).
   ========================================================================== */

/* ==========================================================================
   Merch: price directly under the title, same column as the image (quick
   win 15). The product-index widget doesn't expose a "price under title"
   layout control, so this reorders/aligns the rendered card content.
   ========================================================================== */
body.page-id-16 .elementor-element-bdb29ba .product,
body.page-id-17777 .elementor-element-bdb29ba .product {
	text-align: left;
}

body.page-id-16 .elementor-element-bdb29ba .woocommerce-loop-product__title,
body.page-id-17777 .elementor-element-bdb29ba .woocommerce-loop-product__title {
	margin-bottom: 6px;
}

body.page-id-16 .elementor-element-bdb29ba .price,
body.page-id-17777 .elementor-element-bdb29ba .price {
	display: block;
	margin: 0 0 16px;
	font-weight: 600;
}

/* ==========================================================================
   Product card ("Add to cart"/"Select option" button) — direct report +
   screenshots: on the shop/search results grid (WooCommerce's own native
   product loop template, content-product.php — the same markup the merch
   fix right above this one already styles on the homepage, just via a
   different Elementor widget instance there) the button was sitting
   BESIDE the title instead of below it, wide enough combined to overflow
   into the next card. Not reproducible from the theme's own CSS alone
   (.product-summary is plain block there, not flex) — going by the
   screenshot itself, not a guess: the .product-summary wrapper (holds
   .product-caption — title/price — and .product-action — the button — as
   two sibling divs) is guaranteed to stack them regardless of whatever
   context is actually causing the row layout, matching the homepage's
   already-correct look (second screenshot) instead of chasing the exact
   conflicting rule live gated pages made impossible to inspect directly.
   Site-wide (not scoped to one widget instance, unlike the homepage-only
   fix above) since this is WooCommerce's own shared loop template, used
   by the shop archive/search results too, not just the homepage's merch
   section.
   ========================================================================== */
body .entry-product-grid .product-summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Direct follow-up, screenshot of the fix above actually live: the button
   (now correctly on its own row) should be centered under the product,
   not left-aligned like the title/price above it — text-align here
   rather than changing .product-summary's own align-items, which would
   also re-center the title/price and wasn't asked for.

   `body` prefix on this one specifically (not needed above): confirmed
   live via document.styleSheets that the parent theme's own build/
   styles.css carries `.grid-item-big .product-action { text-align:
   right; margin-left: auto; ... }` — .grid-item-big is a real class on
   this exact grid (WooCommerce's own "big" grid-item layout) — at the
   SAME specificity (two classes) as the plain version of this rule, and
   that parent stylesheet loads after this one on this page, winning the
   tie. Same recurring cascade issue as elsewhere on this site (parent
   theme rules loading after the child theme's own); boosting specificity
   with `body` is the established fix. */
body .entry-product-grid .product-action {
	margin-top: 12px;
	width: 100%;
	text-align: center;
	margin-left: 0;
}

.entry-product-grid .product-action .button {
	max-width: 100%;
	white-space: normal;
}

/* ==========================================================================
   Product review form ("Verzenden"/Submit, single product page). The
   button itself already had the site's shared cut-corner shape/type
   (it's covered by the same .button-family selector list above,
   `input[type="submit"]`), so this rule is placement only — see the
   comment right below for the back-and-forth on what that placement
   actually ended up being.
   ========================================================================== */
/* Centered first per an earlier request, then reverted here per a direct
   follow-up ("move this to left") on the actual single-product page —
   back to flush-left against the Name/E-mail fields above it, its
   original position. Kept as its own explicit rule (margin-left:0,
   not just deleting the centering block) so a future edit here doesn't
   silently fall back to the browser default and drift again. Centering
   via the wrapping <p class="form-submit"> doesn't work as an
   alternative: giving it display:flex broke the review form's own
   layout outright (confirmed live — the button ended up floating
   mid-form, overlapping other fields). */
.woocommerce #respond input#submit,
.comment-respond input#submit {
	display: flex !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ==========================================================================
   "Mijn verhaal"/"My story" label chip (Part 2, component spec: "On bone
   it is an accent chip: background:#C8FF00 ... never thin grey or black
   text"). Elementor's own heading widget has no background-color control
   at all — confirmed by checking the generated CSS, which only carried
   the padding through, not the fill — so the chip itself is a CSS
   fallback on top of the widget's own text-color/padding/typography. --- */
body.page-id-16 .elementor-element-b2000001,
body.page-id-17777 .elementor-element-b2000001,
body.page-id-16 .elementor-element-a1000005,
body.page-id-17777 .elementor-element-a1000005,
body.page-id-16 .elementor-element-a1000006,
body.page-id-17777 .elementor-element-a1000006,
body.page-id-16 .elementor-element-a1000007,
body.page-id-17777 .elementor-element-a1000007,
body.page-id-16 .elementor-element-fd2c26c,
body.page-id-17777 .elementor-element-fd2c26c {
	background-color: var(--acid-accent-1) !important;
	display: inline-block;
	/* Every chip's parent container (b7c391a, 4751de0, and now a6f13d8
	   itself for the Photo section's own "Showreel" chip) never had an
	   explicit Align Items set, so they fall back to Elementor's own
	   container default — align-items:stretch on a column-direction
	   flex container, which is the width axis. That stretched the chip's
	   own flex-item box to the full column width regardless of its
	   display:inline-block, turning it into a full-width bar instead of
	   a snug chip (found 2026-09-04, comparing against the Feedback doc's
	   own reference). align-self here opts each chip back out of that
	   stretch without touching the container setting itself — safer than
	   changing Align Items on the container, which would also affect the
	   heading/paragraph siblings that currently rely on the stretch to
	   size themselves. */
	align-self: flex-start;
}

/* Contact (d76618c) is Bone/light now, not Blackout — the generic
   .button-outline default (light stroke, Blackout fill) is built for a
   dark section and would go near-invisible here. Scoped swap to a dark
   stroke / Bone fill for this section only; every other .button-outline
   usage elsewhere on the page is untouched. */
body.page-id-16 .elementor-element-d76618c .button-outline,
body.page-id-17777 .elementor-element-d76618c .button-outline {
	--stroke: var(--acid-blackout);
	--fill: var(--acid-bone);
}

/* color has to be repeated here targeting the anchor directly, not just
   inherited from the wrapper above — the base .button-outline
   .elementor-button rule (earlier in this file) sets color on that same
   anchor explicitly, and an explicit rule on an element always beats
   whatever its parent would otherwise pass down by inheritance. */
body.page-id-16 .elementor-element-d76618c .button-outline .elementor-button,
body.page-id-17777 .elementor-element-d76618c .button-outline .elementor-button {
	color: var(--acid-blackout);
}

body.page-id-16 .elementor-element-d76618c .button-outline .elementor-button:hover,
body.page-id-17777 .elementor-element-d76618c .button-outline .elementor-button:hover {
	--stroke: var(--acid-accent-1);
	--fill: var(--acid-accent-1);
	color: var(--acid-blackout) !important;
}

/* Social icons in Contact: dark icon color set via the widget's own
   Elementor setting (icon_secondary_color) now that the section is
   light. Hover swapping to Acid Green (the reference's own icon hover
   intent) used to be forced here in CSS — moved to the widget's own
   native Hover > Secondary Color control (hover_secondary_color,
   Widget_Social_Icons) instead, per "widget options first": that
   control already existed and simply wasn't being used. */

/* Eyebrow label → main heading gap, every section — found 2026-09-04 the
   gap looked far bigger than the 20px set on each label's own widget
   margin (Merch's "WEBSHOP"→"MERCH" gap flagged specifically, but every
   section has the same pair). Cause: Elementor's Kit ("Site Settings" →
   Layout → "Widgets Space Between") sets a global --kit-widget-spacing of
   20px that's added underneath EVERY widget's own bottom margin via
   `calc(var(--kit-widget-spacing, 0px) + <widget's own value>)` — so a
   label set to 20px in its own Advanced > Margin control was actually
   rendering at 20+20=40px, not 20px. Overridden here with !important,
   bypassing that stacked kit variable entirely, so every label below
   gets the exact same small, predictable gap regardless of what the
   Kit's own global spacing is set to (now or in the future). */
body.page-id-16 .elementor-element-b2000001,
body.page-id-17777 .elementor-element-b2000001,
body.page-id-16 .elementor-element-a1000001,
body.page-id-17777 .elementor-element-a1000001,
body.page-id-16 .elementor-element-a1000002,
body.page-id-17777 .elementor-element-a1000002,
body.page-id-16 .elementor-element-a1000003,
body.page-id-17777 .elementor-element-a1000003,
body.page-id-16 .elementor-element-a1000004,
body.page-id-17777 .elementor-element-a1000004,
body.page-id-16 .elementor-element-a1000005,
body.page-id-17777 .elementor-element-a1000005,
body.page-id-16 .elementor-element-a1000006,
body.page-id-17777 .elementor-element-a1000006,
body.page-id-16 .elementor-element-a1000007,
body.page-id-17777 .elementor-element-a1000007,
body.page-id-16 .elementor-element-fd2c26c,
body.page-id-17777 .elementor-element-fd2c26c {
	margin-bottom: 14px !important;
}

/* ==========================================================================
   Real site footer (Item 10 of the "100% definitive structure" doc) — the
   theme's own Footer Type / Footer Widgets Layout Customizer options
   (standard, 4-cols) handle the on/off switch and the column mechanics
   (float, 25% width, wrap every 4th); this only styles what's inside them,
   since the parent theme's own footer styling is generic/light-touch by
   design. Explicit Blackout background here rather than trusting the
   "footer-skin-dark" body class alone, same reasoning as every other
   section's background in this file: state it, don't assume it. --- */
.site-footer {
	background: var(--acid-blackout);
	/* Merch (bdb29ba) is the final content section now (post-reorder,
	   2026-09-04) and is Blackout same as the footer — with no color
	   change between them the diagonal-cut chain's own seam there is
	   invisible (nothing to reveal, same situation documented earlier in
	   this file for other same-color seams), so this flat line marks the
	   section/footer boundary instead.
	   Found 2026-09-05: this border wasn't just faint, it was fully
	   painted over — confirmed with devtools by forcing it to an 8px
	   solid red and still seeing nothing. Merch's own box (padding-bottom
	   included) runs a little into the footer's, and since Merch carries
	   `position: relative` (needed for its own clip-path above) while
	   this footer is a plain static element, normal paint order puts any
	   positioned box above static siblings regardless of who's on top in
	   the actual markup — so Merch's own Blackout background was drawing
	   straight over this border every time, at any opacity. Lifting the
	   footer into its own stacking position (below) puts its border back
	   on top where a 1px line can actually do its job; 0.18 (up from the
	   0.09 used for the .site-infos bottom-bar seam) is still a thin
	   brand hairline, just with enough contrast against #08080A to read
	   as a seam instead of empty space once it's actually visible. */
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(242, 242, 237, 0.18);
}

.sidebar-footer-inner {
	max-width: 1180px;
	padding: 72px 56px !important;
}

#tertiary .widget:first-child {
	padding-left: 0 !important;
}

.sidebar-footer .widget-title {
	margin: 0 0 18px;
	color: var(--acid-bone);
	opacity: 0.5;
	font-family: Archivo, Impact, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sidebar-footer .menu li {
	margin: 0 0 12px;
}

.sidebar-footer .menu a,
.footer-brand-link {
	display: inline-block;
	font-family: Archivo, Impact, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--acid-bone);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sidebar-footer .menu a:hover,
.footer-brand-link:hover {
	opacity: 0.6;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.footer-brand-logo {
	margin-bottom: 4px;
	/* Lockup 01 (.slem-lockup, end of file): bone mark + name, redline stroke from the SVG. */
	color: var(--acid-bone);
}

/* The Taal column reuses the site's own #onepage-sidebar/header language
   switcher component as-is (notescape_child_language_switcher()) — its
   ".lang-switch" styling already matches this palette everywhere else it
   appears, so nothing extra is needed here beyond making sure it doesn't
   inherit the nav-menu-list spacing above (it isn't a <ul>, so it already
   doesn't). */

/* Bottom bar — Feedback doc, Footer spec: "one bottom line: © 2026 DJ Slem
   left, Door StartupFabriek BV right, both in the label style at
   rgba(242,242,237,0.32)". Copyright left-aligned (Footer Width→"Bottom
   Bar Layout: Inline" handles the float itself); the divider above it
   matches the same doc's own colophon footer, which uses this exact
   border (rgba(242,242,237,0.09)) for the same seam. */
.site-infos {
	background: var(--acid-blackout);
	border-top: 1px solid rgba(242, 242, 237, 0.09);
}

.site-infos .wrap {
	max-width: 1180px;
	padding-left: 56px !important;
	padding-right: 56px !important;
}

.credits {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
}

/* The parent theme's own "Bottom Bar Layout: Inline" CSS (main.css) floats
   .credits left at a fixed 500px so it shares the row with a social-icons
   block on the right — that's tuned for the icon row, not this two-text
   layout, and would leave "Door StartupFabriek BV" bunched up next to the
   copyright instead of pinned to the bar's far edge like the reference.
   Same selector, so this wins on source order (enqueued after main.css);
   the !important on width is just insurance. */
.bottom-bar-layout-inline .credits {
	float: none;
	width: 100% !important;
	height: auto;
	line-height: normal;
}

/* Always empty on this site — social links live in the footer's own
   Social widget column instead, not duplicated here (footer_socials is
   deliberately left unset) — but the parent theme still renders the
   wrapper div itself, floated right, which would otherwise eat into the
   row .credits needs to span. */
.bottom-social-links {
	display: none;
}

.credits .copyright-text,
.credits .footer-agency-credit {
	/* SLEM brand guide 1.0 label style: Barlow 600, 0.16–0.2em, dim. */
	font-family: var(--body-font-stack) !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #948C8E !important;
	opacity: 1 !important;
}

/* ==========================================================================
   Instagram (f0aff41) / TikTok (b4d92f1) — 4-tile placeholder grid, added
   2026-09-04 per the reference. Both sections' actual feed widgets
   (Instagram: sbi-widget, unconfigured — prints "Geen feed geselecteerd om
   weer te geven."; TikTok: sb-tiktok-feed, unconfigured — renders nothing
   at all) never had a real account connected, so neither had anything to
   show; removed in favor of the same honest bg-beam placeholder treatment
   used everywhere else on the page a real photo/video doesn't exist (the
   News cards' "livefoto" captions), rather than an error string or empty
   space. igGrid1/ttGrid1 — four containers each, one per tile, holding a
   small caption heading widget positioned over the beam texture. --- */
#igGrid1,
#ttGrid1 {
	margin-top: 24px;
}

.elementor-element-igGrid1 > .e-con-inner > .elementor-element,
.elementor-element-ttGrid1 > .e-con-inner > .elementor-element {
	position: relative;
}

.social-tile-caption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	text-transform: lowercase;
}

/* Mobile/side menu panel — direct request: "add top logo to menu same as
   that of home page" + "reduce width of menu bg". The logo markup itself
   (.logo/.logo-text) is the theme's own notescape_logo() output, injected
   in functions.php (notescape_child_mobile_panel_with_logo) — already
   correctly sized/styled by the parent theme's own CSS for that class;
   this just adds space below it so it doesn't run straight into "Home".

   No native Customizer/Elementor control exists for this panel's width
   (checked first) — it's a flat 500px in the parent theme's own
   assets/css/main.css (#mobile-menu-panel), close to 40% of a typical
   desktop viewport for a menu holding a handful of short labels — so
   this is a plain CSS override down to 360px, with the matching
   closed-state offset updated to match (not strictly required — the old
   -500px still hides a 360px panel, just with extra slack — but kept in
   sync for clarity). The existing max-width:300px on narrow/mobile
   viewports (assets/css/main.css, @media max-width:600px) is untouched,
   already narrower than this. */
#mobile-menu-panel {
	width: 360px;
	right: -360px;
}

.mobile-menu-panel-logo {
	margin-bottom: 40px;
}


/* Skip-to-content link (WordPress audit finding) - standard pattern:
   visually hidden off-screen until keyboard focus reveals it. */
.skip-to-content-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--acid-accent-1);
	color: var(--acid-blackout);
	font-family: var(--body-font-stack);
	font-weight: 700;
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-to-content-link:focus {
	top: 0;
}

/* Releases scroll-jack gallery — page-wide horizontal overflow fix.
   Root cause: parent theme's own compiled CSS sets `.sticky-holder`
   overflow-x:hidden then, in the same block, overflow:visible - the
   shorthand resets overflow-x back to visible, cancelling the clip and
   letting the intentionally oversized `.horizontal-grid` spill out,
   scrolling the WHOLE page sideways. */
.enable-horizontal-grid .sticky-holder {
	overflow-x: hidden !important;
}

/* Releases scroll-jack gallery — zero-width flex-item fix.
   The widget's own wrapper can end up as a flex item inside an
   Elementor flex container (flex-direction:row) with no explicit width,
   while its own content is defined in percentages relative to itself -
   a circular 0-width computation that clips all cover art away
   entirely. Explicit width breaks that. */
.elementor-widget-release-index {
	width: 100%;
	flex: 1 1 100%;
}

/* ==========================================================================
   SLEM brand guide 1.0 — work order 30-10-2026, items 1.2 and 1.4.
   Display: Archivo Expanded 900 (wdth 125). Text, labels, buttons: Barlow.
   ========================================================================== */
:root {
  --slem-black: #08080A;  --slem-booth: #14141A;  --slem-bone: #F2F2ED;
  --slem-red: #FF2D3F;    --slem-dim: #948C8E;    --slem-rule: #242228;
}
body, p, li, a, input, textarea, select, button,
.elementor-widget-text-editor, .elementor-button, .event-card-description {
  font-family: 'Barlow', system-ui, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .elementor-heading-title,
.logo-text, .event-card-title, .entry-title {
  font-family: 'Archivo', sans-serif !important;
  font-variation-settings: 'wdth' 125;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* small labels above headings stay Barlow */
.elementor-heading-title[data-animation="subtitle"],
.event-card-date, #onepage-sidebar-nav a {
  font-family: 'Barlow', sans-serif !important;
  font-variation-settings: normal;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
}
::selection { background: var(--acid-accent-1); color: var(--acid-blackout); }

/* Lockup 01 (horizontal): mark as high as the capitals, 0.45 x mark height between. */
.slem-lockup { display:inline-flex; align-items:center; gap:.33em;
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 125;
  font-weight:900; font-size:28px; line-height:.8; letter-spacing:.02em;
  color:var(--acid-bone); text-decoration:none; }
.slem-lockup svg { height:.74em; width:auto; }

/* Mobile bar + menu panel text logo as lockup 01 (functions.php,
   notescape_child_logo_lockup()): same measurements as .slem-lockup. */
.logo-is-text .logo-text {
  display: inline-flex; align-items: center; gap: .33em;
  font-size: 28px; line-height: .8; letter-spacing: .02em;
  color: var(--acid-bone);
}
.logo-is-text .logo-text svg { height: .74em; width: auto; flex: none; }

/* Links inside display headings (release titles, linked headings) keep the
   heading face; the work order's `a { Barlow }` rule above is for running text. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.elementor-heading-title a, .entry-title a, .event-card-title a {
  font-family: inherit !important;
  font-size: inherit;
}

/* Footer: the parent theme's dark footer skin forces pure #fff on every link
   and heading (.site-footer-dark a { color:#fff !important }). Brand guide:
   bone, never pure white. ID-qualified so it outranks that rule. */
#colophon.site-footer-dark a,
#colophon.site-footer-dark .widget a,
#colophon.site-footer-dark .widget-title,
#colophon.site-footer-dark h1, #colophon.site-footer-dark h2, #colophon.site-footer-dark h3,
#colophon.site-footer-dark h4, #colophon.site-footer-dark h5, #colophon.site-footer-dark h6 {
  color: var(--acid-bone) !important;
}
#colophon.site-footer-dark a:hover,
#colophon.site-footer-dark .lang-switch-item.is-active {
  color: var(--acid-accent-1) !important;
}

/* Mobile menu panel: parent skin colours (#212121 panel, #EBE2D0 text and
   rules) mapped onto the brand palette at the variable level. */
#mobile-menu-panel {
  --background-color: var(--acid-booth);
  --foreground-color: var(--acid-bone);
  --strong-color: var(--acid-bone);
  --theme-border-color: #242228;
}

/* Lockup 01 name in the display face: the work order's `a { Barlow !important }`
   would otherwise win on the footer link (.slem-lockup is an <a>). */
.slem-lockup, .slem-lockup span,
.logo-is-text .logo-text, .logo-is-text .logo-text span {
  font-family: 'Archivo', sans-serif !important;
  font-variation-settings: 'wdth' 125;
  font-weight: 900 !important;
  text-transform: uppercase;
}

/* Mobile bar (below the 1024px sidebar breakpoint).
   Solid blackout so content no longer scrolls visibly underneath it, with the
   brand guide's masthead rule: a 2px redline along the bottom edge. */
@media (max-width: 1023px) {
  #mobile-bar {
    background: var(--acid-blackout);
    border-bottom: 2px solid var(--acid-accent-1);
  }
}

/* Phones: lockup + NL/EN + Boekingen + menu button were 535px wide on a 390px
   screen, pushing the menu button off-screen. Tighter spacing so all four fit. */
@media (max-width: 480px) {
  #mobile-bar .logo-container { padding: 0 0 0 16px; }
  #mobile-bar .logo-is-text .logo-text { font-size: 20px; }
  #mobile-bar .cta-container { padding: 0 8px; gap: 8px; }
  #mobile-bar .cta-container .lang-switch { margin-right: 0 !important; }
  /* Beats the site-wide `.button { padding: 15px 24px !important }` for this one button. */
  #mobile-bar .cta-container a.button { padding: 12px 12px !important; margin-right: 0 !important; }
  #mobile-bar .hamburger-container { padding: 0 14px 0 0; }
}

/* Phones: centred slide dots ran into the hero's Boekingen button; same
   height, moved to the right edge (the scroll-down arrow keeps the centre). */
@media (max-width: 767px) {
  .hero-slideshow-dots { left: auto; right: 24px; transform: none; }
}

/* ==========================================================================
   Client feedback 11-11-2026
   ========================================================================== */

/* Item 6 — Releases: pinned window = card height.
   The parent theme pins a full 100vh window around ~520px of cards, which
   left a big black gap under the cards. notescape_child_fix_horizontal_grid_height()
   (functions.php) measures the cards and sets these two variables; without
   JS the theme's own 100vh / top 0 still apply. */
.enable-horizontal-grid.horizontal-grid-container {
  min-height: 0;
}
/* Two classes + element: the parent's styles.css loads after this file with
   the same `.enable-horizontal-grid .sticky-holder` selector. */
.horizontal-grid-container.enable-horizontal-grid .sticky-holder {
  height: var(--slem-release-pin-height, 100vh);
  top: var(--slem-release-pin-top, 0px);
}
/* Covers line up at the top, also next to a release without a player. */
.horizontal-grid-container.enable-horizontal-grid .items {
  align-items: flex-start;
}
/* No vertical scrollbar in the pinned window. `overflow-x: hidden` (rule
   "Releases scroll-jack gallery — page-wide horizontal overflow fix" above)
   turns overflow-y into `auto`; now that the window is exactly card-height,
   a sub-pixel overflow (638.09px in 638px) showed a scrollbar. `clip` cuts
   the sideways overflow without making the window scrollable; browsers
   without `clip` keep the hidden/hidden fallback. */
.horizontal-grid-container.enable-horizontal-grid .sticky-holder {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Item 6 — Release player (Releases > edit > "Player" box, inc/release-player.php). */
.release-player {
  position: relative;
  z-index: 2; /* above the card's full-size link mask */
  width: 100%;
  margin-top: 12px;
}
.release-player iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--acid-booth, #14141A);
}

/* Item 7 — Photo gallery crops (plugin djslem-photo-gallery, left untouched).
   Elementor's `.elementor img { height: auto }` loads after the gallery's
   own `height: 100%`, so every photo kept its natural portrait height and
   only the top of it (cap/forehead) showed. Extra class wins; the photo's
   Media Library focal point (inc/focal-point.php) then decides the crop. */
.djslem-photo-slider .djslem-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.djslem-photo-slider .djslem-photo-group[data-count='3'] {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}