/*
 * 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;
}
/* core/navigation block, styled to match the design (white links, tan hover,
   no underline) and to fill the same header-bar footprint the old hand-rolled
   nav used to. We force our own 760px breakpoint below, rather than trusting
   WordPress's own default, and re-skin the mobile overlay as a simple
   full-width dropdown (matching the old design) instead of WP's full-screen
   modal look. */
.wetnecks-nav-block.wp-block-navigation {
	max-width: 1400px;
	margin: 0 auto !important;
	padding: 10px 28px !important;
	min-height: 46px;
	position: relative;
	z-index: 2;
}
.wetnecks-nav-block .wp-block-navigation-item__content {
	color: var(--wn-white) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 6px 10px !important;
}
.wetnecks-nav-block .wp-block-navigation-item__content:hover,
.wetnecks-nav-block .wp-block-navigation-item__content:focus {
	color: var(--wn-tan) !important;
	outline: none;
}
/* Animated 3-bar -> X burger icon (the original design's effect). WP's own
   button SVGs are hidden; frontend.js injects a .wetnecks-burger-icon span
   structure into the open button once, and toggles .is-open on it to morph
   the bars into a cross. The close button is kept functional (click target)
   but visually hidden -- the single open/toggle button handles both states. */
.wetnecks-nav-block .wp-block-navigation__responsive-container-open,
.wetnecks-nav-block .wp-block-navigation__responsive-container-close {
	display: none;
}
.wetnecks-nav-block .wp-block-navigation__responsive-container-open svg,
.wetnecks-nav-block .wp-block-navigation__responsive-container-close svg {
	display: none;
}
.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 );
}
/* Force our own 760px breakpoint, overriding whatever WP's own default is. */
@media ( min-width: 761px ) {
	.wetnecks-nav-block .wp-block-navigation__responsive-container:not( .hidden-by-default ) {
		position: static !important;
		inset: auto !important;
		background: none !important;
		width: auto !important;
		height: auto !important;
	}
	.wetnecks-nav-block .wp-block-navigation__responsive-container-content {
		display: flex !important;
		padding: 0 !important;
	}
}
@media ( max-width: 760px ) {
	.wetnecks-nav-block .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.wetnecks-nav-block .wp-block-navigation__responsive-container-open svg {
		fill: var(--wn-white);
	}
	.wetnecks-nav-block .wp-block-navigation__responsive-container {
		display: none !important;
		position: absolute !important;
		inset: auto !important;
		top: 100% !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
		max-height: 80vh;
		overflow-y: auto;
		background-color: var(--wn-maroon) !important;
		border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	}
	.wetnecks-nav-block .wp-block-navigation__responsive-container.is-menu-open {
		display: block !important;
	}
	.wetnecks-nav-block .wp-block-navigation__responsive-container-content {
		padding: 0 !important;
	}
	.wetnecks-nav-block .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch !important;
	}
	.wetnecks-nav-block .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	}
	.wetnecks-nav-block .wp-block-navigation-item__content {
		padding: 14px 22px !important;
		width: 100%;
		display: block;
	}
}
.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: 440px;
	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 ---------- */
.wetnecks-media-gallery {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 14px;
	scroll-snap-type: x proximity;
	margin-top: 32px;
}
.wetnecks-media-gallery img {
	height: 300px;
	width: 260px;
	object-fit: cover;
	border-radius: 2px;
	flex: none;
	scroll-snap-align: start;
}
.wetnecks-media-gallery::-webkit-scrollbar {
	height: 8px;
}
.wetnecks-media-gallery::-webkit-scrollbar-thumb {
	background: var(--wn-terracotta);
	border-radius: 4px;
}
.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);
}

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

/* ---------- 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.wp-block-navigation {
		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;
	}
}