/*
Theme Name: Blue Sheep Grooves
Theme URI: https://bluesheep.fi/
Description: Gritty, stage-lit child theme of Twenty Twenty-Four for a blues, rock and pop music production business. Dark blue scheme, condensed display type, self-hosted fonts (no third-party requests).
Author: Blue Sheep Grooves
Author URI: https://bluesheep.fi/
Template: twentytwentyfour
Version: 1.4.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bluesheep-grooves
Tags: block-patterns, full-site-editing, blog, portfolio, one-column, dark-mode-support
*/

/* ---------------------------------------------------------------------------
   0. Reusable distress assets — torn edges, ripped tape, rough underline.
      Kept as custom properties so masks can be shared between block styles.
--------------------------------------------------------------------------- */

:root {
	--bsg-torn-top: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='18'%3E%3Cpath d='M0 9 11 4 19 11 34 2 47 8 55 14 71 6 80 3 96 12 104 7 119 15 131 5 142 10 158 2 167 9 181 13 193 4 206 11 218 6 233 14 241 8 256 3 268 12 279 6 291 10 303 2 312 13 320 9 320 18 0 18Z' fill='%23fff'/%3E%3C/svg%3E");
	--bsg-torn-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='18'%3E%3Cpath d='M0 0 320 0 320 9 312 4 303 12 291 6 279 14 268 3 256 10 241 7 233 13 218 5 206 11 193 2 181 12 167 8 158 14 142 4 131 10 119 3 104 13 96 7 80 11 71 2 55 9 47 14 34 5 19 10 11 3 0 9Z' fill='%23fff'/%3E%3C/svg%3E");
	--bsg-rough-line: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpath d='M0 4c14-3 24 1 38-1s22 3 34 1 30-3 48 1' stroke='%23E9B44C' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	--bsg-torn-side: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='160'%3E%3Cpath d='M1 0 0 10 2 22 0 35 1 48 0 60 2 73 0 86 1 99 0 112 2 125 0 138 1 150 1 160 5 160 6 148 4 136 6 124 5 112 6 100 4 88 6 76 5 64 6 52 4 40 6 28 5 16 5 0Z' fill='%23fff'/%3E%3C/svg%3E");
	--bsg-tape-cut: polygon(0 12%, 6% 0, 12% 14%, 88% 6%, 94% 20%, 100% 8%, 100% 88%, 93% 100%, 87% 86%, 13% 96%, 7% 82%, 0 94%);
}

/* ---------------------------------------------------------------------------
   1. Grain overlay — the "grit". Fixed, non-interactive, purely decorative.
      Two noise layers: fine film grain plus coarse blotching, then a separate
      vignette/scratch plate underneath it.
--------------------------------------------------------------------------- */

body::after {
	content: "";
	position: fixed;
	inset: -4%; /* headroom for the jitter animation */
	z-index: 1000; /* below the nav overlay (100000) and admin bar (99999) */
	pointer-events: none;
	opacity: 0.13;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23b)'/%3E%3C/svg%3E");
	background-size: 160px 160px, 420px 420px;
}

/* Stage vignette, dust scratches and a wash of amp light from above. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 999;
	pointer-events: none;
	background-image: repeating-linear-gradient(
			97deg,
			transparent 0 57px,
			rgba(237, 233, 225, 0.04) 57px 58px,
			transparent 58px 131px,
			rgba(237, 233, 225, 0.025) 131px 132px,
			transparent 132px 219px
		),
		radial-gradient(125% 85% at 50% -10%, rgba(233, 180, 76, 0.08) 0%, transparent 45%),
		radial-gradient(115% 95% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.55) 100%);
}

@media (prefers-reduced-motion: no-preference) {
	body::after {
		animation: bsg-grain 0.9s steps(4) infinite;
	}
}

@keyframes bsg-grain {
	0%,
	100% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-2%, 1.5%);
	}
	50% {
		transform: translate(1.5%, -2%);
	}
	75% {
		transform: translate(-1%, -1.5%);
	}
}

/* ---------------------------------------------------------------------------
   2. Type — condensed display headings, tightened up like a gig poster.
--------------------------------------------------------------------------- */

h1,
h2,
h3,
.wp-block-site-title a {
	text-wrap: balance;
}

/* Off-register screenprint: the plates never line up on a cheap poster. */
h1,
h2,
.wp-block-site-title a {
	text-shadow: 1px 0 0 rgba(181, 67, 46, 0.32), -1px 0 0 rgba(76, 134, 184, 0.26);
}

.wp-block-site-title a {
	text-decoration: none;
}

/* Opt-in hairline rule under a heading, fading out to the right. */
.is-style-bsg-rule::after {
	content: "";
	display: block;
	height: 2px;
	margin-block-start: 0.4em;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--accent-1) 0,
		var(--wp--preset--color--accent-6) 40%,
		transparent 100%
	);
}

/* Outlined "stage" heading: stencil-like, for hero titles. */
.is-style-bsg-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--contrast);
	text-shadow: 3px 3px 0 var(--wp--preset--color--accent-6);
}

/* Ransom-note sticker: slapped on crooked, hard shadow, torn along the edges. */
.is-style-bsg-sticker {
	display: inline-block;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	padding: 0.08em 0.42em 0.2em;
	transform: rotate(-1.6deg);
	text-shadow: none;
	box-shadow: 7px 7px 0 var(--wp--preset--color--accent-6);
	-webkit-mask-image: var(--bsg-torn-top), linear-gradient(#000, #000), var(--bsg-torn-bottom);
	-webkit-mask-size: 320px 10px, 100% calc(100% - 18px), 320px 10px;
	-webkit-mask-position: left top, 0 9px, left bottom;
	-webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
	mask-image: var(--bsg-torn-top), linear-gradient(#000, #000), var(--bsg-torn-bottom);
	mask-size: 320px 10px, 100% calc(100% - 18px), 320px 10px;
	mask-position: left top, 0 9px, left bottom;
	mask-repeat: repeat-x, no-repeat, repeat-x;
}

/* ---------------------------------------------------------------------------
   3. Links, buttons, forms — square edges, hard offset shadow.
--------------------------------------------------------------------------- */

.wp-block-post-content a:where(:not(.wp-element-button)),
.wp-block-post-excerpt a,
.entry-content a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.15s ease;
}

/* Hover swaps the flat underline for a hand-drawn marker stroke. */
.wp-block-post-content a:where(:not(.wp-element-button)):hover,
.wp-block-post-excerpt a:hover,
.entry-content a:where(:not(.wp-element-button)):hover {
	text-decoration-color: transparent;
	background-image: var(--bsg-rough-line);
	background-repeat: repeat-x;
	background-position: left 100%;
	background-size: 120px 6px;
}

.wp-element-button,
.wp-block-button__link,
input[type="submit"],
button:where(:not([class*="wp-block-navigation__responsive-container"])) {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* Torn corners. Clipping kills box-shadow, so the offset moves to a filter. */
	clip-path: polygon(
		0 4px,
		5px 0,
		calc(100% - 8px) 2px,
		100% 7px,
		calc(100% - 2px) calc(100% - 4px),
		calc(100% - 10px) 100%,
		6px calc(100% - 2px),
		2px calc(100% - 8px)
	);
	filter: drop-shadow(4px 4px 0 var(--wp--preset--color--accent-6));
	transition: transform 0.12s ease, filter 0.12s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button:where(:not([class*="wp-block-navigation__responsive-container"])):hover {
	transform: translate(2px, 2px) rotate(-0.5deg);
	filter: drop-shadow(2px 2px 0 var(--wp--preset--color--accent-1));
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translate(4px, 4px);
	filter: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 2px;
}

input:where(:not([type="submit"])),
textarea,
select {
	border-radius: 0;
	border: 1px solid var(--wp--preset--color--accent-6);
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--contrast);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   4. Media — slightly bleached, high-contrast press photos.
--------------------------------------------------------------------------- */

.wp-block-post-featured-image img,
.wp-block-image img {
	filter: contrast(1.18) saturate(0.76) brightness(0.96);
}

.wp-block-post-featured-image img {
	border-block-end: 3px solid var(--wp--preset--color--accent-1);
}

/* ---------------------------------------------------------------------------
   5. Structure — panels, quotes, separators, navigation.
--------------------------------------------------------------------------- */

.wp-block-separator:not(.is-style-dots) {
	border: 0;
	height: 3px;
	opacity: 1;
	background: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--accent-1) 0 18px,
		transparent 18px 30px
	);
}

/* Ripped strip instead of a rule. */
.wp-block-separator.is-style-bsg-torn-edge {
	border: 0;
	height: 18px;
	opacity: 1;
	background: var(--wp--preset--color--accent-1);
	-webkit-mask-image: var(--bsg-torn-top), linear-gradient(#000, #000), var(--bsg-torn-bottom);
	-webkit-mask-size: 320px 9px, 100% 2px, 320px 9px;
	-webkit-mask-position: left top, 0 8px, left bottom;
	-webkit-mask-repeat: repeat-x, repeat-x, repeat-x;
	mask-image: var(--bsg-torn-top), linear-gradient(#000, #000), var(--bsg-torn-bottom);
	mask-size: 320px 9px, 100% 2px, 320px 9px;
	mask-position: left top, 0 7px, left bottom;
	mask-repeat: repeat-x, repeat-x, repeat-x;
}

.wp-block-quote,
.wp-block-pullquote {
	position: relative;
	border-inline-start: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	font-style: normal;
}

/* Torn strip standing in for the quote rule. */
.wp-block-quote::before,
.wp-block-pullquote::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 6px;
	background-color: var(--wp--preset--color--accent-1);
	-webkit-mask-image: var(--bsg-torn-side);
	-webkit-mask-size: 6px 160px;
	-webkit-mask-repeat: repeat-y;
	mask-image: var(--bsg-torn-side);
	mask-size: 6px 160px;
	mask-repeat: repeat-y;
}

.wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wp-block-navigation :where(.wp-block-navigation-item__content):hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.wp-block-navigation :where(.wp-block-navigation-item__content):hover {
	display: inline-block;
	transform: rotate(-1.2deg);
}

/* Toggle and overlay stay legible even if the header block carries older colours. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--contrast);
}

/* Submenus need an opaque panel against the grain overlay. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
}

/* Language switcher (Polylang / WPML / TranslatePress) kept compact and quiet. */
.wp-block-navigation .lang-item a,
.wp-block-navigation .pll-parent-menu-item a,
.trp-language-switcher a {
	letter-spacing: 0.12em;
	font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   6. Opt-in distress \u2014 block styles selectable in the editor's Styles panel.
--------------------------------------------------------------------------- */

/* Torn from the page: ragged top and bottom edges. Needs a background or an
   image to read \u2014 on bare text it will just shave the first and last lines. */
.is-style-bsg-torn {
	-webkit-mask-image: var(--bsg-torn-top), linear-gradient(#000, #000), var(--bsg-torn-bottom);
	-webkit-mask-size: 320px 18px, 100% calc(100% - 34px), 320px 18px;
	-webkit-mask-position: left top, 0 17px, left bottom;
	-webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
	mask-image: var(--bsg-torn-top), linear-gradient(#000, #000), var(--bsg-torn-bottom);
	mask-size: 320px 18px, 100% calc(100% - 34px), 320px 18px;
	mask-position: left top, 0 17px, left bottom;
	mask-repeat: repeat-x, no-repeat, repeat-x;
}

:where(.wp-block-group, .wp-block-cover).is-style-bsg-torn {
	padding-block: max(var(--wp--preset--spacing--40, 2rem), 24px);
}

/* Flyposted: pasted up crooked with a hard shadow and a heavy border. */
.is-style-bsg-poster {
	border: 2px solid var(--wp--preset--color--accent-6);
	box-shadow: 10px 10px 0 var(--wp--preset--color--accent-6);
	transform: rotate(-0.8deg);
}

.is-style-bsg-poster > * {
	transform: rotate(0.8deg);
}

/* Third-generation photocopy, warmed by the amp glow. */
.is-style-bsg-xerox {
	position: relative;
	isolation: isolate;
}

.is-style-bsg-xerox img {
	filter: grayscale(1) contrast(2.1) brightness(1.05);
}

.is-style-bsg-xerox::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--wp--preset--color--accent-1);
	mix-blend-mode: multiply;
	opacity: 0.26;
}

.is-style-bsg-xerox figcaption {
	position: relative;
	z-index: 1;
}

/* Gaffer-taped to the wall. */
.is-style-bsg-tape {
	position: relative;
}

.is-style-bsg-tape::before,
.is-style-bsg-tape::after {
	content: "";
	position: absolute;
	width: clamp(70px, 22%, 120px);
	height: 30px;
	background-color: rgba(237, 233, 225, 0.2);
	box-shadow: inset 0 0 0 1px rgba(237, 233, 225, 0.14);
	-webkit-clip-path: var(--bsg-tape-cut);
	clip-path: var(--bsg-tape-cut);
	pointer-events: none;
}

.is-style-bsg-tape::before {
	inset-block-start: -15px;
	inset-inline-start: -14px;
	transform: rotate(-8deg);
}

.is-style-bsg-tape::after {
	inset-block-end: -15px;
	inset-inline-end: -14px;
	transform: rotate(-6deg);
}

/* ---------------------------------------------------------------------------
   7. Chrome
--------------------------------------------------------------------------- */

html {
	scrollbar-color: var(--wp--preset--color--accent-2) var(--wp--preset--color--base);
}

::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}