/* ==========================================================================
   RECTAL ERECTILE — warstwa wizualna motywu
   Kolory, typografia i odstępy pochodzą z theme.json (Style globalne).
   Ten plik zawiera wyłącznie efekty, których nie da się opisać w theme.json:
   ramka „mięsna”, ociekające przejścia sekcji, ziarno, hover zdjęć.
   ========================================================================== */

:root {
	--re-frame-width: clamp(6px, 0.9vw, 11px);
	--re-frame-radius: clamp(14px, 2vw, 26px);
	--re-drip-height: clamp(38px, 6vw, 78px);
}

/* --------------------------------------------------------------------------
   1. ZIARNO / BRUD — delikatna warstwa na całej stronie
   -------------------------------------------------------------------------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 999;
	pointer-events: none;
	opacity: 0.24;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	background-size: 220px 220px;
}

/* Wyłączenie ziarna w Edytorze — żeby nie przeszkadzało w pracy */
.editor-styles-wrapper::after { display: none; }

/* --------------------------------------------------------------------------
   2. RAMKA „MIĘSNA” — gruby czarny obrys z okładki I.A. Inhalator
   Klasa CSS: re-frame  (dodaj do bloku Obraz / Grupa / Galeria)
   -------------------------------------------------------------------------- */
:is(.re-frame, .is-style-re-frame),
:is(.re-frame, .is-style-re-frame) img,
:is(.re-frame, .is-style-re-frame) .wp-block-image img {
	border-radius: var(--re-frame-radius);
}

:is(.re-frame, .is-style-re-frame) {
	border: var(--re-frame-width) solid var(--wp--preset--color--black);
	background: var(--wp--preset--color--flesh);
	overflow: hidden;
}

:is(.re-frame, .is-style-re-frame) > figure,
:is(.re-frame, .is-style-re-frame) > .wp-block-image { margin: 0; }

:is(.re-frame, .is-style-re-frame) img { display: block; width: 100%; height: auto; }

/* Wariant z przesuniętym cieniem */
:is(.re-frame, .is-style-re-frame).re-shadow { box-shadow: 12px 12px 0 0 var(--wp--preset--color--black); }
:is(.re-frame, .is-style-re-frame).re-shadow-pink { box-shadow: 12px 12px 0 0 var(--wp--preset--color--pink); }

/* Lekkie przekrzywienie — używać oszczędnie */
.re-tilt-l { transform: rotate(-1.6deg); }
.re-tilt-r { transform: rotate(1.4deg); }

/* --------------------------------------------------------------------------
   3. OCIEKAJĄCE PRZEJŚCIE MIĘDZY SEKCJAMI
   Klasa CSS: re-drip  (blok Grupa, wysokość sterowana kolorem tła bloku)
   re-drip--up  = ociek skierowany do góry
   -------------------------------------------------------------------------- */
:is(.re-drip, .is-style-re-drip) {
	display: block;
	width: 100%;
	height: var(--re-drip-height);
	margin: 0 !important;
	padding: 0 !important;
	-webkit-mask-image: url("../images/drip.svg");
	mask-image: url("../images/drip.svg");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

:is(.re-drip, .is-style-re-drip).re-drip--up { transform: scaleY(-1); }

/* Grupa z klasą re-drip nie potrzebuje wewnętrznego kontenera */
:is(.re-drip, .is-style-re-drip) > * { display: none; }

/* --------------------------------------------------------------------------
   4. ZDJĘCIA KONCERTOWE — hover „lampa błyskowa”
   Klasa CSS: re-photo
   -------------------------------------------------------------------------- */
:is(.re-photo, .is-style-re-photo) img {
	transition: filter 220ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1);
	will-change: filter, transform;
}

:is(.re-photo, .is-style-re-photo):hover img,
:is(.re-photo, .is-style-re-photo):focus-within img {
	filter: contrast(1.18) saturate(1.25) brightness(1.12);
	transform: scale(1.028);
}

/* --------------------------------------------------------------------------
   5. LOGO — drganie tylko przy najechaniu
   -------------------------------------------------------------------------- */
.re-logo img,
.wp-block-site-logo.re-logo img {
	transition: transform 120ms steps(2, end);
}

.re-logo a:hover img,
.re-logo a:focus-visible img { animation: re-jitter 320ms steps(2, end) infinite; }

@keyframes re-jitter {
	0%   { transform: translate3d(0, 0, 0) skewX(0deg); }
	33%  { transform: translate3d(-2px, 1px, 0) skewX(-1.2deg); }
	66%  { transform: translate3d(2px, -1px, 0) skewX(1deg); }
	100% { transform: translate3d(0, 0, 0) skewX(0deg); }
}

/* --------------------------------------------------------------------------
   6. NAGŁÓWEK STRONY
   -------------------------------------------------------------------------- */
.re-header {
	position: sticky;
	top: 0;
	z-index: 500;
	border-bottom: 3px solid var(--wp--preset--color--pink);
	backdrop-filter: saturate(1.2);
}

.admin-bar .re-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .re-header { top: 46px; } }

.re-header .wp-block-site-logo img {
	height: clamp(30px, 4.6vw, 52px);
	width: auto;
	max-width: min(62vw, 460px);
	object-fit: contain;
}

.re-header .wp-block-navigation a:hover,
.re-header .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--pink);
	text-decoration: none;
}

.re-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--pink);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Menu mobilne na pełnym ekranie */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--flesh) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(1.6rem, 7vw, 2.6rem);
}

/* --------------------------------------------------------------------------
   7. PRZEŁĄCZNIK JĘZYKA  PL | EN | IT
   Klasa CSS: re-lang  (działa też z blokiem Polylang „Language switcher”)
   -------------------------------------------------------------------------- */
.re-lang,
.re-lang ul {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.re-lang li { margin: 0; }

.re-lang a,
.re-lang a:link {
	display: inline-block;
	padding: 0.28em 0.6em;
	border: 2px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1;
}

.re-lang a:hover,
.re-lang a:focus-visible,
.re-lang .current-lang > a,
.re-lang .lang-item.current-lang a {
	background: var(--wp--preset--color--pink);
	border-color: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--black);
}

/* Polylang: ukryj flagi, zostaw kody językowe */
.re-lang img.iclflag,
.re-lang .lang-item img { display: none; }

/* --------------------------------------------------------------------------
   8. PASEK PRZEWIJANY (marquee)
   Klasa CSS: re-marquee  (Grupa z jednym akapitem w środku)
   -------------------------------------------------------------------------- */
:is(.re-marquee, .is-style-re-marquee) {
	overflow: hidden;
	white-space: nowrap;
	border-top: 3px solid var(--wp--preset--color--black);
	border-bottom: 3px solid var(--wp--preset--color--black);
	padding-block: 0.5rem !important;
}

:is(.re-marquee, .is-style-re-marquee) p {
	display: inline-block;
	margin: 0;
	padding-left: 100%;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	animation: re-scroll 26s linear infinite;
}

:is(.re-marquee, .is-style-re-marquee):hover p { animation-play-state: paused; }

@keyframes re-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------------
   9. ETYKIETY I TRACKLISTA
   -------------------------------------------------------------------------- */
:is(.re-tag, .is-style-re-tag) {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	padding: 0.3em 0.75em;
	border: 2px solid currentColor;
	border-radius: 999px;
}

:is(.re-tracklist, .is-style-re-tracklist),
:is(.re-tracklist, .is-style-re-tracklist) ol,
:is(.re-tracklist, .is-style-re-tracklist) ul {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: re-track;
	font-family: var(--wp--preset--font-family--mono);
}

:is(.re-tracklist, .is-style-re-tracklist) li {
	counter-increment: re-track;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.55rem 0;
	border-bottom: 2px dotted currentColor;
	font-size: var(--wp--preset--font-size--small);
}

:is(.re-tracklist, .is-style-re-tracklist) li::before {
	content: counter(re-track, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--wp--preset--color--pink);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. GALERIA — układ kaskadowy (masonry) na bazie bloku Galeria
   Klasa CSS: re-masonry  (dodaj do bloku Galeria)
   -------------------------------------------------------------------------- */
.wp-block-gallery:is(.re-masonry, .is-style-re-masonry) {
	display: block;
	columns: 3;
	column-gap: clamp(0.6rem, 1.6vw, 1.4rem);
}

.wp-block-gallery:is(.re-masonry, .is-style-re-masonry) .wp-block-image {
	display: block;
	width: 100% !important;
	break-inside: avoid;
	margin: 0 0 clamp(0.6rem, 1.6vw, 1.4rem);
	border: var(--re-frame-width) solid var(--wp--preset--color--black);
	border-radius: var(--re-frame-radius);
	overflow: hidden;
	background: var(--wp--preset--color--black);
}

.wp-block-gallery:is(.re-masonry, .is-style-re-masonry) .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 220ms ease, transform 320ms ease;
}

.wp-block-gallery:is(.re-masonry, .is-style-re-masonry) .wp-block-image:hover img {
	filter: contrast(1.18) saturate(1.25) brightness(1.1);
	transform: scale(1.03);
}

@media (max-width: 1024px) { .wp-block-gallery:is(.re-masonry, .is-style-re-masonry) { columns: 2; } }
@media (max-width: 600px)  { .wp-block-gallery:is(.re-masonry, .is-style-re-masonry) { columns: 1; } }

/* --------------------------------------------------------------------------
   11. SIATKA MERCH / KAFLE
   -------------------------------------------------------------------------- */
.re-card {
	border: var(--re-frame-width) solid var(--wp--preset--color--black);
	border-radius: var(--re-frame-radius);
	overflow: hidden;
	height: 100%;
}

.re-card img { display: block; width: 100%; height: auto; }

/* WooCommerce — minimalne dopasowanie, jeśli sklep zostanie włączony */
.woocommerce ul.products li.product {
	border: var(--re-frame-width) solid var(--wp--preset--color--black);
	border-radius: var(--re-frame-radius);
	overflow: hidden;
	padding: 0 0 1rem;
	background: var(--wp--preset--color--flesh);
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .price {
	padding-inline: 1rem;
}

.woocommerce ul.products li.product .price { font-family: var(--wp--preset--font-family--mono); }

.woocommerce span.onsale {
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--black);
	border: 3px solid var(--wp--preset--color--black);
}

/* --------------------------------------------------------------------------
   12. DOSTĘPNOŚĆ I RUCH
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, .wp-block-navigation a):focus-visible {
	outline: 3px solid var(--wp--preset--color--pink);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 1000;
	padding: 0.8em 1.2em;
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	:is(.re-marquee, .is-style-re-marquee) p { animation: none; padding-left: 0; }
	.re-logo a:hover img { animation: none; }
	:is(.re-photo, .is-style-re-photo):hover img,
	.wp-block-gallery:is(.re-masonry, .is-style-re-masonry) .wp-block-image:hover img { transform: none; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   13. DROBIAZGI
   -------------------------------------------------------------------------- */
::selection { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--black); }

.re-hero { position: relative; }

.re-hero .wp-block-cover__image-background { filter: contrast(1.1) saturate(1.15); }

/* Duży napis wychodzący poza kolumnę — używać wyłącznie w hero */
.re-oversize {
	line-height: 0.82;
	letter-spacing: -0.03em;
	word-break: break-word;
}

hr.wp-block-separator {
	border: 0;
	border-top: 4px solid currentColor;
	opacity: 1;
}