/*
 * Reint Snob – block styles
 * Everything here hangs off core block classes or registered block styles
 * (is-style-*) so editors can apply it from the block sidebar.
 */

:root {
	--rs-bg: var(--wp--preset--color--espresso);
	--rs-surface: var(--wp--preset--color--roast);
	--rs-ink: var(--wp--preset--color--cream);
	--rs-accent: var(--wp--preset--color--caramel);
	--rs-hot: var(--wp--preset--color--stage-red);
	--rs-muted: var(--wp--preset--color--smoke);
	--rs-display: var(--wp--preset--font-family--display);
	--rs-mono: var(--wp--preset--font-family--mono);
	--rs-hazard: repeating-linear-gradient(-45deg, var(--rs-accent) 0 14px, var(--rs-bg) 14px 28px);
}

/* Film grain over the whole page: club-flyer photocopy feel */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
	opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--rs-accent); color: var(--rs-bg); }

:where(a, button, input, textarea):focus-visible {
	outline: 3px dashed var(--rs-accent);
	outline-offset: 3px;
}

/* ---------- Eyebrow / mono label ---------- */
.rs-label {
	font-family: var(--rs-mono);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-accent);
}

/* ---------- The "grense": a hazard line that runs through the site ---------- */
.rs-border-line {
	height: 10px;
	background: var(--rs-hazard);
	border: 0;
	width: 100%;
	max-width: none !important;
	margin-block: 0;
	margin-inline: 0;
	opacity: 1;
}

/* ---------- Header ---------- */
.rs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--rs-bg) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid color-mix(in srgb, var(--rs-ink) 12%, transparent);
}
.rs-header .wp-block-site-logo img { transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.rs-header .wp-block-site-logo:hover img { transform: rotate(-12deg) scale(1.08); }
.rs-header .wp-block-navigation-item__content {
	font-family: var(--rs-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.rs-header .wp-block-navigation-item__content:hover { color: var(--rs-accent); }

/* ---------- Hero ---------- */
.rs-hero { position: relative; overflow: clip; }
.rs-hero-title {
	font-family: var(--rs-display);
	font-size: clamp(3.2rem, 10.5vw, 8.5rem);
	max-width: calc(100% - clamp(120px, 18vw, 230px));
	line-height: .82;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0;
}
.rs-hero-title .rs-edge {
	/* PÅ GRENSEN sits on the hazard line and hangs over it */
	display: inline-block;
	color: var(--rs-accent);
	transform: rotate(-2deg) translateY(.06em);
}
.rs-hero-title .rs-tip {
	display: inline-block;
	transform-origin: 0 100%;
	animation: rs-tip 5s ease-in-out infinite;
}
@keyframes rs-tip {
	0%, 70%, 100% { transform: rotate(0); }
	78% { transform: rotate(9deg); }
	86% { transform: rotate(4deg); }
}

/* The logo as a sticker slapped over the headline; it laughs when poked */
.rs-sticker {
	position: absolute;
	width: clamp(120px, 18vw, 230px);
	right: clamp(16px, 4vw, 48px);
	top: clamp(16px, 3vw, 40px);
	transform: rotate(9deg);
	filter: drop-shadow(0 12px 18px rgb(0 0 0 / .45));
	cursor: pointer;
	transition: transform .5s cubic-bezier(.3, 1.8, .5, 1);
	z-index: 3;
	margin: 0;
}
.rs-sticker:hover { transform: rotate(-4deg) scale(1.06); }
.rs-sticker.is-laughing img { animation: rs-laugh .12s linear 6 alternate; }
@keyframes rs-laugh {
	from { transform: translateY(0) rotate(-2deg); }
	to { transform: translateY(-6px) rotate(2deg); }
}

.rs-heckle-bubble {
	position: absolute;
	right: calc(clamp(120px, 18vw, 230px) + clamp(16px, 4vw, 48px) - 12px);
	top: clamp(40px, 4vw, 64px);
	max-width: 230px;
	padding: .7rem .9rem;
	background: var(--rs-ink);
	color: var(--rs-bg);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.3;
	border-radius: 14px 14px 2px 14px;
	transform: rotate(-3deg);
	z-index: 4;
}
.rs-heckle-bubble small { display: block; font-family: var(--rs-mono); font-weight: 400; font-size: .65rem; margin-top: .35rem; letter-spacing: .08em; text-transform: uppercase; }

.rs-hero-art img {
	border: 3px solid var(--rs-ink);
	border-radius: 4px;
	box-shadow: 10px 10px 0 var(--rs-accent);
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-stamp .wp-block-button__link {
	font-family: var(--rs-display);
	font-size: 1.15rem;
	letter-spacing: .01em;
	background: var(--rs-ink);
	color: var(--rs-bg);
	border: 3px solid var(--rs-ink);
	border-radius: 999px;
	padding: .7em 1.4em;
	box-shadow: 5px 5px 0 var(--rs-accent);
	transition: transform .15s, box-shadow .15s;
}
.wp-block-button.is-style-stamp .wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--rs-accent); }
.wp-block-button.is-style-stamp .wp-block-button__link:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--rs-accent); }

.wp-block-button.is-style-outline-mono .wp-block-button__link {
	font-family: var(--rs-mono);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: transparent;
	color: var(--rs-ink);
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: .9em 1.4em;
}
.wp-block-button.is-style-outline-mono .wp-block-button__link:hover { background: var(--rs-ink); color: var(--rs-bg); }

/* ---------- Ticket stub (Group block style) ---------- */
.wp-block-group.is-style-ticket {
	--notch: 14px;
	position: relative;
	background: var(--rs-ink);
	color: var(--rs-bg);
	border-radius: 6px;
	-webkit-mask:
		radial-gradient(circle var(--notch) at left 50%, #0000 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--notch) at right 50%, #0000 98%, #000) right / 51% 100% no-repeat;
	        mask:
		radial-gradient(circle var(--notch) at left 50%, #0000 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--notch) at right 50%, #0000 98%, #000) right / 51% 100% no-repeat;
	transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.wp-block-group.is-style-ticket:hover { transform: rotate(-.6deg) translateY(-3px); }
.is-style-ticket .rs-stub {
	font-family: var(--rs-mono);
	text-transform: uppercase;
	border-right: 2px dashed color-mix(in srgb, var(--rs-bg) 35%, transparent);
	padding-right: 1.2rem;
	line-height: 1.1;
}
.is-style-ticket .rs-stub .rs-day { font-family: var(--rs-display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .9; display: block; }
.is-style-ticket h3 { margin: 0; }
.is-style-ticket .rs-venue { font-family: var(--rs-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--rs-bg) 70%, var(--rs-ink)); margin: 0; }
.is-style-ticket .wp-block-button.is-style-stamp .wp-block-button__link { background: var(--rs-bg); color: var(--rs-ink); border-color: var(--rs-bg); box-shadow: 4px 4px 0 var(--rs-accent); }

/* Past show: stamped SPILT and toned down */
.is-style-ticket.rs-played { background: color-mix(in srgb, var(--rs-ink) 55%, var(--rs-bg)); }
.is-style-ticket.rs-played::after {
	content: "Spilt";
	position: absolute;
	right: 8%;
	top: 50%;
	translate: 0 -50%;
	rotate: -12deg;
	font-family: var(--rs-display);
	font-size: 1.9rem;
	text-transform: uppercase;
	color: var(--rs-hot);
	border: 4px solid currentColor;
	border-radius: 8px;
	padding: .05em .45em;
	opacity: .85;
	mix-blend-mode: multiply;
}
.is-style-ticket.rs-played .wp-block-buttons { visibility: hidden; }

/* ---------- Promise list (what to expect) ---------- */
.rs-promise h3 { font-family: var(--rs-display); font-weight: 400; color: var(--rs-accent); }
.rs-promise .rs-count { font-family: var(--rs-mono); font-size: .7rem; color: var(--rs-muted); letter-spacing: .12em; }
.rs-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.rs-chips li {
	font-family: var(--rs-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 1.5px solid color-mix(in srgb, var(--rs-ink) 35%, transparent);
	border-radius: 999px;
	padding: .45em 1em;
	transition: background .2s, color .2s, rotate .2s;
}
.rs-chips li:hover { background: var(--rs-accent); color: var(--rs-bg); border-color: var(--rs-accent); rotate: -3deg; }

/* ---------- Lineup (Group block style) ---------- */
.wp-block-group.is-style-lineup {
	position: relative;
	background-color: #0d0806;
	background-image:
		repeating-linear-gradient(to bottom, transparent 0 39px, color-mix(in srgb, var(--rs-ink) 22%, transparent) 39px 40px),
		repeating-linear-gradient(to bottom, transparent 0 7px, color-mix(in srgb, var(--rs-ink) 8%, transparent) 7px 8px);
	border-block: 3px solid var(--rs-ink);
	padding-top: 2.5rem;
}
.is-style-lineup::before {
	/* height marks down the left edge */
	content: "200\A\A 190\A\A 180\A\A 170\A\A 160\A\A 150";
	white-space: pre;
	position: absolute;
	left: 8px;
	top: 1.9rem;
	font-family: var(--rs-mono);
	font-size: .6rem;
	line-height: 20px;
	color: color-mix(in srgb, var(--rs-ink) 45%, transparent);
}
.rs-mug { display: flex; flex-direction: column; gap: 0; }
.rs-mug .rs-plate { flex: 1; }
.rs-mug .wp-block-image { margin: 0; }
.rs-mug .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(1.05);
	mix-blend-mode: lighten;
	transition: filter .35s;
}
.rs-mug:hover .wp-block-image img { filter: none; }
.rs-plate {
	background: var(--rs-ink);
	color: var(--rs-bg);
	padding: .7rem .85rem;
	font-family: var(--rs-mono);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .66rem;
	line-height: 1.5;
}
.rs-plate strong { display: block; font-family: var(--rs-display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0; line-height: 1; margin-bottom: .2rem; }
.rs-mug p.rs-rap { font-size: .95rem; line-height: 1.5; color: color-mix(in srgb, var(--rs-ink) 82%, transparent); margin-top: .9rem; }

/* ---------- Heckles (Quote block style) ---------- */
.wp-block-quote.is-style-heckle {
	background: var(--rs-surface);
	border: 0;
	border-radius: 18px 18px 18px 4px;
	padding: 1.2rem 1.3rem 1rem;
	margin: 0;
	transition: rotate .25s, background .25s;
	break-inside: avoid;
}
.wp-block-quote.is-style-heckle p { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0; }
.wp-block-quote.is-style-heckle cite { display: block; margin-top: .7rem; font-family: var(--rs-mono); font-style: normal; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-accent); }
.wp-block-quote.is-style-heckle cite::before { content: "— "; }
.wp-block-quote.is-style-heckle:nth-child(3n+1) { rotate: -1.2deg; }
.wp-block-quote.is-style-heckle:nth-child(3n+2) { rotate: .8deg; background: var(--rs-accent); color: var(--rs-bg); }
.wp-block-quote.is-style-heckle:nth-child(3n+2) cite { color: var(--rs-bg); }
.wp-block-quote.is-style-heckle:nth-child(5n) { background: var(--rs-ink); color: var(--rs-bg); }
.wp-block-quote.is-style-heckle:nth-child(5n) cite { color: var(--rs-hot); }
.wp-block-quote.is-style-heckle:hover { rotate: 0deg; }
.rs-heckles { columns: 4 230px; column-gap: 1rem; }
.rs-heckles > * { margin-bottom: 1rem !important; }

/* ---------- Follow list: huge platform names ---------- */
.rs-platforms { list-style: none; padding: 0; margin: 0; border-top: 1px solid color-mix(in srgb, var(--rs-ink) 20%, transparent); }
.rs-platforms li { border-bottom: 1px solid color-mix(in srgb, var(--rs-ink) 20%, transparent); }
.rs-platforms a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .3em;
	font-family: var(--rs-display);
	font-size: clamp(2.2rem, 7vw, 5.5rem);
	line-height: 1;
	text-decoration: none;
	color: var(--rs-ink);
	transition: color .2s, padding .3s cubic-bezier(.3, 1.6, .5, 1);
}
.rs-platforms a small { font-family: var(--rs-mono); font-size: .75rem; letter-spacing: .1em; color: var(--rs-muted); }
.rs-platforms a:hover { color: var(--rs-accent); padding-left: .4em; }

/* ---------- Merch / app cards ---------- */
.rs-card-shop img { border-radius: 4px; rotate: -2deg; box-shadow: 8px 8px 0 var(--rs-ink); }

/* ---------- Booking form (styles Contact Form 7 / core form output) ---------- */
.rs-booking input:not([type="submit"]),
.rs-booking textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 2px solid color-mix(in srgb, var(--rs-bg) 45%, transparent);
	padding: .6rem 0;
	font: inherit;
	font-size: 1.1rem;
	color: inherit;
}
.rs-booking input:focus, .rs-booking textarea:focus { outline: 0; border-bottom-color: var(--rs-hot); }
.rs-booking label { font-family: var(--rs-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 781px) {
	.is-style-ticket .rs-stub { border-right: 0; border-bottom: 2px dashed color-mix(in srgb, var(--rs-bg) 35%, transparent); padding: 0 0 .8rem; }
	.is-style-ticket.rs-played::after { top: 22%; font-size: 1.4rem; }
	.rs-heckle-bubble { position: static; margin: 0 0 0 auto; transform: rotate(-2deg); }
	.rs-sticker { width: 96px; top: 8px; right: 16px; }
	.rs-hero-title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Nav CTA pill */
.rs-nav-cta .wp-block-navigation-item__content {
	background: var(--rs-accent);
	color: var(--rs-bg) !important;
	border-radius: 999px;
	padding: .55em 1.1em !important;
}

/* ---------- Kulby program embed in Reint Snob colours ----------
 * <kulby-events> renders in a closed-off Shadow DOM. Its public hooks are:
 *   accent="#hex", theme, font="inherit" (copies the PARENT's font-family),
 *   --kulby-accent and --kulby-radius.
 * Everything else here dresses the frame around it. */
.rs-program {
	position: relative;
	font-family: var(--wp--preset--font-family--body); /* what font="inherit" picks up */
	background: var(--rs-surface);
	border-radius: 6px;
	padding: clamp(1.2rem, 3vw, 2.2rem);
	padding-top: calc(clamp(1.2rem, 3vw, 2.2rem) + 10px);
	overflow: hidden;
}
.rs-program::before {
	/* the hazard "grense" along the top edge, like the ticket stubs */
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 10px;
	background: var(--rs-hazard);
}
.rs-program kulby-events {
	--kulby-accent: var(--wp--preset--color--caramel);
	--kulby-radius: 4px;
}
/* Fallback link, shown only if the script is blocked */
.rs-program kulby-events > a {
	font-family: var(--rs-display);
	font-size: 1.4rem;
	color: var(--rs-accent);
}

/* Ticket stub shown inside <kulby-events> until the widget has a scope */
.rs-ticket-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 1.5rem; align-items: center; }
.rs-ticket-row h3 { margin: .2rem 0 .3rem; }
@media (max-width: 781px) { .rs-ticket-row { grid-template-columns: 1fr; } }

.rs-checklist { padding-left: 1.2em; margin-bottom: 1.5rem; }
.rs-checklist li::marker { content: "✓  "; color: var(--wp--preset--color--stage-red); font-weight: 700; }

/* Light sections (cream booking, caramel shop): flip links and buttons to espresso */
.rs-booking a:not(.wp-block-button__link),
.has-caramel-background-color a:not(.wp-block-button__link) { color: var(--rs-bg); }
.rs-booking .wp-block-button.is-style-stamp .wp-block-button__link,
.has-caramel-background-color .wp-block-button.is-style-stamp .wp-block-button__link {
	background: var(--rs-bg);
	color: var(--rs-ink);
	border-color: var(--rs-bg);
}
.has-caramel-background-color .wp-block-button.is-style-stamp .wp-block-button__link { box-shadow: 5px 5px 0 var(--rs-ink); }
.rs-booking .wp-block-button.is-style-outline-mono .wp-block-button__link,
.has-caramel-background-color .wp-block-button.is-style-outline-mono .wp-block-button__link { color: var(--rs-bg); }
.rs-booking .wp-block-button.is-style-outline-mono .wp-block-button__link:hover,
.has-caramel-background-color .wp-block-button.is-style-outline-mono .wp-block-button__link:hover { background: var(--rs-bg); color: var(--rs-ink); }