/*
 * The Wetnecks — shared front-end + editor styles.
 * Colours/typography that belong in theme.json live there; this file covers the
 * torn-edge / grunge system and component layout that theme.json can't express.
 */

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/SourceSerif4-Variable.woff2") format("woff2");
}
@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/SourceSerif4-Italic-Variable.woff2") format("woff2");
}

:root {
	--wn-maroon: #3d000f;
	--wn-terracotta: #cc5139;
	--wn-brown: #91552f;
	--wn-tan: #e3b279;
	--wn-cream: #efc793;
	--wn-white: #ffffff;
	--wn-red: #e01b1b;
	--wn-grunge: url(../images/grunge.jpg);
	--wn-edge-up: url(../images/edge-mask-flip.png);
	--wn-edge-down: url(../images/edge-mask.png);
}

html {
	scroll-behavior: smooth;
}

/* WordPress adds a default margin-block-start between top-level blocks (24px);
   that gap let the maroon body background leak through as an ugly flat bar
   between every full-bleed section, breaking the torn-edge illusion. Kill it. */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

body {
	background: var(--wn-maroon);
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ---------- colour + grunge utility classes, shared by header/section/torn ---------- */
.is-bg-maroon { background-color: var(--wn-maroon); }
.is-bg-terracotta { background-color: var(--wn-terracotta); }
.is-bg-brown { background-color: var(--wn-brown); }
.is-bg-tan { background-color: var(--wn-tan); }
.is-bg-cream { background-color: var(--wn-cream); }
.is-bg-white { background-color: var(--wn-white); }

.is-text-maroon { color: var(--wn-maroon); }
.is-text-terracotta { color: var(--wn-terracotta); }
.is-text-brown { color: var(--wn-brown); }
.is-text-tan { color: var(--wn-tan); }
.is-text-cream { color: var(--wn-cream); }
.is-text-white { color: var(--wn-white); }

.has-grunge {
	background-image: var(--wn-grunge);
	background-repeat: repeat;
	background-size: 700px 700px;
	background-blend-mode: multiply;
}

/* ---------- torn-paper edge: a mask filled with the same colour+grunge formula ----------
   as whatever it's coloured like, so it can never mismatch. Zero layout impact, overlaps
   the neighbouring section so the masked-out gaps reveal that neighbour's real pixels. */
.wetnecks-torn {
	position: absolute;
	left: 0;
	width: 100%;
	height: 60px;
	z-index: 1;
	pointer-events: none;
	background-image: var(--wn-grunge);
	background-repeat: repeat;
	background-size: 700px 700px;
	background-blend-mode: multiply;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 482px 100%;
	mask-size: 482px 100%;
}
.wetnecks-torn.is-up {
	top: -60px;
	-webkit-mask-image: var(--wn-edge-up);
	mask-image: var(--wn-edge-up);
}
.wetnecks-torn.is-down {
	top: 0;
	-webkit-mask-image: var(--wn-edge-down);
	mask-image: var(--wn-edge-down);
}
.wetnecks-torn.is-maroon { background-color: var(--wn-maroon); }
.wetnecks-torn.is-terracotta { background-color: var(--wn-terracotta); }
.wetnecks-torn.is-brown { background-color: var(--wn-brown); }
.wetnecks-torn.is-tan { background-color: var(--wn-tan); }
.wetnecks-torn.is-cream { background-color: var(--wn-cream); }
.wetnecks-torn.is-white { background-color: var(--wn-white); }

/* ---------- generic Section block ---------- */
.wetnecks-section {
	position: relative;
	scroll-margin-top: 76px;
	margin: 0 !important;
}
.wetnecks-section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 28px 92px;
	position: relative;
	z-index: 2;
}
.wetnecks-section-inner > * {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.wetnecks-section-inner h2 {
	text-align: center;
	max-width: none;
	font-size: clamp( 30px, 4vw, 42px );
	margin: 0 0 8px;
	font-weight: 800;
}
.wetnecks-section-inner h3 {
	text-align: center;
	max-width: none;
	font-size: clamp( 24px, 3vw, 32px );
	margin: 0 0 4px;
	font-weight: 800;
}
.wetnecks-section-inner h4 {
	text-align: center;
	max-width: none;
	font-size: clamp( 20px, 2.6vw, 26px );
	margin: 0 0 22px;
	font-weight: 800;
}
.wetnecks-section-inner > p {
	text-align: center;
	font-weight: 700;
	line-height: 1.55;
	margin: 0 auto 18px;
}
.wetnecks-section-inner > p:last-child {
	margin-bottom: 0;
}
.wetnecks-section-inner > p.wetnecks-lede {
	font-size: 17px;
	margin-bottom: 32px;
}
.wetnecks-section-inner > p.wetnecks-quote {
	font-style: italic;
	margin-top: 28px;
}
.wetnecks-section-inner .wetnecks-members-grid,
.wetnecks-section-inner .wetnecks-media-gallery,
.wetnecks-section-inner .wetnecks-gigs,
.wetnecks-section-inner .wp-block-columns {
	max-width: none;
}

/* ---------- header ---------- */
.wetnecks-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background-color: var(--wn-maroon);
	background-image: var(--wn-grunge);
	background-repeat: repeat;
	background-size: 700px 700px;
	background-blend-mode: multiply;
}
/* header is taken out of flow (fixed). The hero block is designed to start at
   y:0 with the header floating over its photo, so it gets no offset -- but
   any OTHER page (one without a hero as its first block) needs top padding
   so its content doesn't start underneath the fixed header. */
.wp-site-blocks > main {
	padding-top: 66px;
}
.wp-site-blocks > main:has( > .wetnecks-hero:first-child ) {
	padding-top: 0;
}
/* Classic menu (Weergave > Menu's), styled to match the design (white links,
   tan hover, no underline) and to fill the same header-bar footprint the
   original design used. Mobile breakpoint forced at 760px, with a simple
   full-width dropdown. */
.wetnecks-nav-block {
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px 28px;
	min-height: 46px;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.wetnecks-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}
.wetnecks-menu a {
	color: var(--wn-white);
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 6px 10px;
	display: inline-block;
}
.wetnecks-menu a:hover,
.wetnecks-menu a:focus {
	color: var(--wn-tan);
	outline: none;
}
/* Shared "button" look, used for the "Direct Boeken" menu item and reused
   standalone (e.g. in the contact section). */
.wetnecks-menu .wetnecks-btn-item > a,
.wetnecks-btn {
	background-color: var(--wn-terracotta);
	color: var(--wn-white) !important;
	border-radius: 4px;
	padding: 8px 16px;
}
.wetnecks-menu .wetnecks-btn-item > a:hover,
.wetnecks-menu .wetnecks-btn-item > a:focus,
.wetnecks-btn:hover,
.wetnecks-btn:focus {
	color: var(--wn-cream) !important;
}
.wetnecks-btn {
	display: inline-block;
	text-decoration: none !important;
	font-weight: 700;
	letter-spacing: 0.02em;
}
/* Animated 3-bar -> X burger icon (the original design's effect). */
.wetnecks-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.wetnecks-burger-icon {
	display: block;
	width: 24px;
	height: 18px;
	position: relative;
}
.wetnecks-burger-icon span,
.wetnecks-burger-icon span::before,
.wetnecks-burger-icon span::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--wn-white);
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.wetnecks-burger-icon span {
	top: 7.5px;
}
.wetnecks-burger-icon span::before {
	top: -7.5px;
}
.wetnecks-burger-icon span::after {
	top: 7.5px;
}
.wetnecks-burger-icon.is-open span {
	background: transparent;
}
.wetnecks-burger-icon.is-open span::before {
	top: 0;
	transform: rotate( 45deg );
}
.wetnecks-burger-icon.is-open span::after {
	top: 0;
	transform: rotate( -45deg );
}
@media ( max-width: 760px ) {
	.wetnecks-menu-toggle {
		display: flex;
	}
	.wetnecks-menu-container {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		max-height: 80vh;
		overflow-y: auto;
		background-color: var(--wn-maroon);
		border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	}
	.wetnecks-menu-container.is-menu-open {
		display: block;
	}
	.wetnecks-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.wetnecks-menu li {
		width: 100%;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	}
	.wetnecks-menu a {
		padding: 14px 22px;
		width: 100%;
		display: block;
	}
	.wetnecks-menu .wetnecks-btn-item > a {
		margin: 10px 22px;
		display: inline-block;
		width: auto;
	}
}
.wetnecks-header-torn {
	position: absolute;
	left: 0;
	width: 100%;
	height: 64px;
	top: 100%;
	margin: 0 !important;
	z-index: 1;
	pointer-events: none;
	background-color: var(--wn-maroon);
	background-image: var(--wn-grunge);
	background-repeat: repeat;
	background-size: 700px 700px;
	background-blend-mode: multiply;
	-webkit-mask-image: var(--wn-edge-down);
	mask-image: var(--wn-edge-down);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 514px 100%;
	mask-size: 514px 100%;
}
.wetnecks-logo {
	position: absolute;
	left: 34px;
	top: 12px;
	margin: 0 !important;
	z-index: 60;
	width: clamp( 190px, 22vw, 300px );
	display: block;
}
.wetnecks-logo img {
	width: 100%;
	display: block;
	filter: drop-shadow( 0 6px 10px rgba( 0, 0, 0, 0.35 ) );
	transition: transform 0.15s;
}
.wetnecks-logo:hover img {
	transform: scale( 1.03 );
}

/* ---------- hero ---------- */
.wetnecks-hero {
	position: relative;
	background: var(--wn-maroon);
	margin: 0 !important;
}
.wetnecks-hero-media {
	position: relative;
	margin-top: 66px; /* clears the fixed header so the photo's top isn't hidden behind it */
}
.wetnecks-hero-media img {
	width: 100%;
	height: clamp( 380px, 45vw, 1100px );
	object-fit: cover;
	object-position: 50% 8%;
	display: block;
}
.wetnecks-hero-caption {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 70px 24px 82px;
}
.wetnecks-hero-caption h1 {
	font-size: clamp( 32px, 5vw, 48px );
	margin: 0 0 14px;
	font-weight: 800;
}
.wetnecks-hero-caption p {
	font-size: clamp( 18px, 2.4vw, 24px );
	font-weight: 700;
	margin: 0;
	max-width: 820px;
	margin-inline: auto;
	line-height: 1.35;
}

/* ---------- video block ---------- */
.wetnecks-video-wrap {
	max-width: 820px;
	margin: 40px auto 0;
}
.wetnecks-video {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	border: 3px solid rgba( 239, 199, 147, 0.25 );
	background: rgba( 0, 0, 0, 0.25 );
}
.wetnecks-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
}
.wetnecks-video-empty {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wn-cream);
	opacity: 0.7;
	font-size: 14px;
	text-align: center;
	padding: 20px;
}

/* ---------- members ---------- */
.wetnecks-members-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 34px 26px;
	margin-top: 44px;
}
.wetnecks-member img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}
.wetnecks-member h3 {
	margin: 14px 0 8px;
	font-size: 20px;
}
.wetnecks-member p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	font-weight: 600;
}
.wetnecks-member.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.18 );
	border: 2px dashed rgba( 61, 0, 15, 0.35 );
	height: 260px;
	font-weight: 700;
	text-align: center;
	padding: 20px;
}

/* ---------- media gallery ---------- */
/* 100vw includes a classic scrollbar's width; clip so full-bleed rows
   (photo slider, Instagram grid) can never cause a page-level h-scroll. */
.wp-site-blocks {
	overflow-x: clip;
}
/* Full-bleed photo slider (same behaviour as the Bold festival slider):
   every photo keeps its own natural aspect ratio, the active one is
   centred, larger and fully opaque; the rest are smaller and dimmed.
   Rotation, click-to-select and swipe sync live in assets/js/frontend.js.
   The row has a fixed height so nothing below it jumps while rotating. */
.wetnecks-media-gallery {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	height: 448px;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	/* no side padding: the first photo starts flush at the screen edge */
	padding: 24px 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* full browser width, breaking out of the section's content column.
	   --wn-vw is the real visible width (set in frontend.js) because 100vw
	   includes a classic scrollbar and would push the row ~7px off-centre. */
	max-width: var( --wn-vw, 100vw ) !important;
	width: var( --wn-vw, 100vw );
	position: relative;
	left: 50%;
	margin-left: calc( var( --wn-vw, 100vw ) / -2 ) !important;
	margin-right: 0 !important;
}
/* auto margins centre the row only when it is narrower than the screen
   (few photos); with overflow they collapse and the row starts at the edge. */
.wetnecks-media-gallery img:first-child {
	margin-left: auto;
}
.wetnecks-media-gallery img:last-child {
	margin-right: auto;
}
.wetnecks-media-gallery::-webkit-scrollbar {
	display: none;
}
.wetnecks-media-gallery img {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	height: 260px;
	object-fit: contain;
	border-radius: 2px;
	display: block;
	opacity: 0.6;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.35 );
	transition: height 0.5s ease, opacity 0.5s ease;
}
.wetnecks-media-gallery img.is-active {
	height: 400px;
	opacity: 1;
}
@media ( prefers-reduced-motion: reduce ) {
	.wetnecks-media-gallery img {
		transition: none;
	}
}
@media ( max-width: 599px ) {
	.wetnecks-media-gallery {
		height: 320px;
		padding: 16px 0;
		gap: 10px;
	}
	.wetnecks-media-gallery img {
		height: 200px;
	}
	.wetnecks-media-gallery img.is-active {
		height: 280px;
	}
}
.wetnecks-media-add {
	height: 300px;
	width: 180px;
	flex: none;
	border-radius: 2px;
	border: 2px dashed rgba( 239, 199, 147, 0.4 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	background: transparent;
	cursor: pointer;
	padding: 16px;
}
.wetnecks-media-add .plus {
	font-size: 30px;
	line-height: 1;
	color: var(--wn-terracotta);
}

/* ---------- instagram grid ---------- */
.wetnecks-instagram-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
	/* full browser width, breaking out of the section's normal content column */
	max-width: var( --wn-vw, 100vw ) !important;
	width: var( --wn-vw, 100vw );
	position: relative;
	left: 50%;
	margin-left: calc( var( --wn-vw, 100vw ) / -2 ) !important;
	margin-right: 0 !important;
	padding: 0 24px;
	box-sizing: border-box;
}
.wetnecks-ig-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: 600px;
	overflow: hidden;
	border-radius: 3px;
	background-color: #fff;
}
.wetnecks-ig-card .instagram-media {
	margin: 0 !important;
	width: 100% !important;
	max-width: 400px !important;
	min-width: 280px !important;
}
.wetnecks-ig-card-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 36px;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 0.95 ) );
	pointer-events: none;
}

/* ---------- gigs ---------- */
.wetnecks-section-inner .wetnecks-gigs-columns {
	max-width: none;
	align-items: flex-start;
	gap: 30px;
	margin-top: 32px;
}
.wetnecks-gigs-photo img {
	border-radius: 2px;
	width: 100%;
	display: block;
}
.wetnecks-gigs {
	background: rgba( 61, 0, 15, 0.28 );
	border-radius: 4px;
	padding: 8px 20px;
}

/* Artwin Live plugin output: force readable colours + spacing to match the design
   (the plugin ships its own default.css meant for a light page, not our dark/warm
   sections, so nearly everything below overrides its inline-ish styling). */
.wetnecks-gigs .artwinlive_tour_dates-item-table {
	width: 100%;
	border-collapse: collapse;
}
.wetnecks-gigs tr {
	border-bottom: 1px solid rgba( 239, 199, 147, 0.18 );
}
.wetnecks-gigs tr:last-child {
	border-bottom: none;
}
.wetnecks-gigs td {
	padding: 16px 8px;
	vertical-align: top;
}
.wetnecks-gigs .artwinlive_tour_dates-large-daten {
	width: 90px;
}
.wetnecks-gigs .artwinlive_tour_dates-large-block {
	background: rgba( 0, 0, 0, 0.25 );
	border-radius: 3px;
	text-align: center;
	padding: 8px 4px;
}
.wetnecks-gigs .artwinlive_tour_dates-text-day,
.wetnecks-gigs .artwinlive_tour_dates-text-month {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wn-cream);
	opacity: 0.85;
}
.wetnecks-gigs .artwinlive_tour_dates-number-date {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--wn-cream);
}
.wetnecks-gigs .artwinlive_tour_dates-list-detail2 span {
	font-weight: 800;
	font-size: 16px;
	color: var(--wn-cream);
}
.wetnecks-gigs .artwinlive_tour_dates-where {
	font-size: 13px;
	color: var(--wn-cream);
	opacity: 0.85;
	margin-top: 2px;
}
.wetnecks-gigs .artwinlive_tour_dates-where img {
	display: inline-block;
	vertical-align: middle;
	height: 12px;
	width: auto;
}
.wetnecks-gigs .artwinlive_tour_dates-buttons {
	margin-top: 10px;
}
.wetnecks-gigs .artwinlive_tour_dates-button2 {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--wn-cream);
	border: 1px solid rgba( 239, 199, 147, 0.4 );
	border-radius: 3px;
	padding: 3px 10px;
	margin-right: 6px;
	cursor: pointer;
}
.wetnecks-gigs .artwinlive_tour_dates-powered-by,
.wetnecks-gigs [class*="powered"] {
	color: var(--wn-cream);
	opacity: 0.6;
	font-size: 11px;
}

/* ---------- contact ---------- */
.wetnecks-section-inner .wp-block-columns.wetnecks-contact-columns {
	max-width: 720px;
	gap: 40px;
	text-align: left;
	margin-top: 40px;
}
.wetnecks-contact-columns h4 {
	margin: 0 0 6px;
	font-size: 16px;
	text-align: left;
}
.wetnecks-contact-columns p {
	margin: 0 0 18px;
	font-weight: 600;
	line-height: 1.5;
}
.wetnecks-nozem-credit {
	margin: 8px 0 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	opacity: 0.65;
	text-align: center;
}
.wetnecks-contact-columns .wetnecks-btn-contact {
	margin-bottom: 16px;
}
.wetnecks-contact-columns a {
	color: var(--wn-terracotta) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wetnecks-contact-columns a:hover {
	color: var(--wn-maroon) !important;
}
.wetnecks-contact-columns a.wetnecks-btn,
.wetnecks-contact-columns a.wetnecks-btn:hover {
	color: var(--wn-white) !important;
	text-decoration: none !important;
}

/* ---------- footer credit ---------- */
.wp-block-template-part footer a {
	color: var(--wn-terracotta) !important;
	font-weight: 700;
}
.wp-block-template-part footer a:hover {
	color: var(--wn-maroon) !important;
}
.wetnecks-section-inner .wp-block-social-links {
	justify-content: center;
	margin-top: 38px;
}
.wetnecks-section-inner .wp-block-social-links .wp-social-link {
	background-color: var(--wn-terracotta) !important;
	color: var(--wn-cream) !important;
}

/* ---------- responsive ---------- */
@media ( max-width: 760px ) {
	.wetnecks-nav-block {
		padding: 12px 18px;
	}
	.wetnecks-members-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.wetnecks-section-inner .wp-block-columns.wetnecks-contact-columns {
		grid-template-columns: 1fr;
	}
	.wetnecks-logo {
		width: 150px;
		left: 16px;
		top: 8px;
	}
	.wetnecks-section-inner {
		padding: 64px 20px 56px;
	}
	.wetnecks-members-grid {
		margin-top: 30px;
	}
}

@media ( max-width: 480px ) {
	.wetnecks-hero-caption h1 {
		font-size: 30px;
	}
	.wetnecks-members-grid {
		grid-template-columns: 1fr;
	}
}