/*
 * grzegorzek-child — style globalne: nagłówek, stopka, CF7, FAQ, ikony,
 * pasek zakładek, okna. Ładowany z functions.php (po style.css).
 *
 * BUILDER FIRST: wszystko, co da się ustawić w edytorze (tło, kolor, ramka,
 * radius, padding, margin, gap, layout, font-size, szerokości), ustawiasz
 * ATRYBUTEM BLOKU — nie tutaj. CSS tylko: pseudo-elementy, stany, color-mix/
 * clamp/aspect-ratio/gradienty, media queries, markup spoza bloków.
 * Bramka: python Theme-blocks/lint-css.py <child> → 0 naruszeń.
 * Po dodaniu/zmianie wzorców w patterns/ podbij Version (cache WP).
 */

/* ─── 0. Szerokości — model szerokości (Theme-blocks/CLAUDE.md) ─────── */
/* Kontener 1320 / szeroka 1400 / margines boczny 40 px = theme.json      */
/* (layout + custom.gutter → root padding). Tu tylko token marginesu na    */
/* ≤768 px (30 px, próg starej strony). Zero kontenerów w CSS.             */
@media (max-width: 768px) {
	:root {
		--wp--custom--gutter: 30px;
	}
}

/* ─── 1. Neutralne role koloru — wartości jawne w theme.json ──────────── */
/* Migracja 1:1 (PALETA-ROLE §3B): body/muted/surface/line mają dokładne     */
/* wartości starej strony (tokeny --tg-* z tg-child), więc NIE wyliczamy ich */
/* z ink przez color-mix (dawałoby inne odcienie niż oryginał).              */

/* ─── 2. Header — tło, cień, stan po scrollu ───────────────────────── */
/* base-block: header position:fixed + klasa .is-scrolled (JS).            */
/* Tło/blur MUSZĄ być na ::before — backdrop-filter na <header> przycina   */
/* fixed potomków (okna, menu).                                            */
header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--page);
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--wp--preset--color--accent-3) 6%, transparent),
		0 10px 24px -18px color-mix(in srgb, var(--wp--preset--color--accent-3) 45%, transparent);
	transition: background 0.25s ease;
}

header.is-scrolled::before {
	background: color-mix(in srgb, var(--wp--preset--color--page) 97%, transparent);
	backdrop-filter: blur(8px);
}

/* ─── 3. Contact Form 7 (markup spoza bloków) ───────────────────────── */
.wpcf7-form label,
.wpcf7-form-control-wrap,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea,
.wpcf7-form-control-wrap select {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea,
.wpcf7-form-control-wrap select {
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	font-size: 1rem;
	background: var(--wp--preset--color--white);
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form-control-wrap input[type=checkbox] { width: auto; }
.wpcf7-form label { margin-bottom: 0.5rem; }
.wrap-input p { flex: 1; }

/* ─── 4. FAQ accordion (blok Yoast FAQ + klasa `faq-accordion`) ─────── */
/* Aktywny tylko z klasą `faq-accordion` na bloku (Zaawansowane → klasy). */
/* Zwijanie bramkowane `.faq-js-ready` (dokłada JS) — bez JS odpowiedzi    */
/* są widoczne.                                                            */
.schema-faq.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.faq-accordion .schema-faq-section {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--white);
	overflow: hidden;
}

.faq-accordion .schema-faq-question {
	display: block;
	position: relative;
	padding: 16px 48px 16px 20px;
	font-weight: 600;
	line-height: 1.4;
	user-select: none;
}

.faq-accordion.faq-js-ready .schema-faq-question { cursor: pointer; }

.faq-accordion .schema-faq-question:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: -2px;
}

.faq-accordion.faq-js-ready .schema-faq-question::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.25s ease;
}

.faq-accordion.faq-js-ready .schema-faq-section.is-open .schema-faq-question::after {
	transform: translateY(-30%) rotate(-135deg);
}

.faq-accordion.faq-js-ready .schema-faq-answer {
	margin: 0;
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}

.faq-accordion.faq-js-ready .schema-faq-section.is-open .schema-faq-answer {
	max-height: 1000px;
	opacity: 1;
	padding: 0 20px 18px;
}

/* ─── 5. Nagłówek — mechanika (parts/header.html) ───────────────────── */
/* Wysokość, stan po scrollu (.is-scrolled z base-block.js) i progi        */
/* 1100/768 px starej strony — tego edytor nie wyrazi (lint-allow.txt).   */
/* Kolory, fonty, treści i przycisk — atrybuty bloków w części.           */
:root {
	--bb-header-height: 108px;
}

.tg-header {
	padding-block: 24px;
	transition: padding-block 0.25s ease;
}

header.is-scrolled .tg-header {
	padding-block: 14px;
}

/* Logo: znak SVG + podpis (wp:html .tg-brand) */
.tg-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.95rem;
	color: var(--wp--preset--color--accent-3);
	text-decoration: none;
}

.tg-brand .tg-logo {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 56px;
	transition: color 0.18s ease, height 0.25s ease;
}

.tg-brand__txt {
	display: flex;
	flex-direction: column;
	width: max-content;
	line-height: 1.06;
}

.tg-brand__t {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.tg-brand__s {
	margin-top: 0.28rem;
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: right;
	text-transform: uppercase;
}

.tg-brand:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-1);
}

@media (min-width: 1101px) {
	.tg-brand { position: relative; top: -4px; }
}

@media (min-width: 769px) {
	header.is-scrolled .tg-brand { gap: 0.75rem; }
	header.is-scrolled .tg-brand .tg-logo { height: 44px; }
	header.is-scrolled .tg-brand__t { font-size: 1.25rem; }
	header.is-scrolled .tg-brand__s { margin-top: 0.22rem; font-size: 0.64rem; }
}

/* Menu główne (core/navigation .tg-nav) — pigułka bieżącej pozycji */
.tg-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	margin: 10px 0;
	padding: 0 0.85rem;
	border-radius: 12px;
	font-size: 1rem;
	line-height: 40px;
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.tg-nav .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation-item__content,
.tg-nav .wp-block-navigation__container > .wp-block-navigation-item:is(.is-current, .current-menu-item) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 6%, transparent);
}

.tg-nav .wp-block-navigation__container > .wp-block-navigation-item:is(.is-current, .current-menu-item):hover > .wp-block-navigation-item__content {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 10%, transparent);
}

.tg-nav .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Mega menu „Zabiegi" (podmenu .tg-mega): 3 kolumny obszarów, zabiegi    */
/* zawsze widoczne pod nagłówkiem obszaru. Tło/tekst podmenu = atrybuty  */
/* bloku nawigacji (overlayBackgroundColor / overlayTextColor).          */
@media (min-width: 1101px) {
	body .wp-block-navigation.tg-nav .tg-mega.has-child > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.15rem 1.6rem;
		width: min(980px, 94vw);
		min-width: 0;
		right: auto;
		left: 50% !important; /* base-block: header submenu left:-15px !important */
		padding: 1.4rem 1.6rem;
		border: 0;
		border-radius: 12px;
		box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--wp--preset--color--accent-3) 60%, transparent);
		transform: translateX(-50%);
	}

	body .wp-block-navigation.tg-nav .tg-mega.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
	}

	body .wp-block-navigation.tg-nav .tg-mega.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		padding: 0 0 0.4rem;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--surface) 26%, transparent);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--heading);
		font-size: 0.95rem;
		font-weight: 700;
		line-height: 1.3;
		text-decoration: none;
	}

	body .wp-block-navigation.tg-nav .tg-mega.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible, .is-current) {
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--accent-4) 55%, transparent);
		color: var(--wp--preset--color--accent-4);
	}

	body .wp-block-navigation.tg-nav .tg-mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		visibility: visible;
		opacity: 1;
		width: auto;
		min-width: 0 !important; /* base-block: min-width:300px !important */
		height: auto;
		overflow: visible;
		padding: 0.4rem 0 0;
		border: 0;
		box-shadow: none;
		transform: none;
	}

	body .wp-block-navigation.tg-nav .tg-mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.28rem 0;
		border-radius: 6px;
		font-size: 0.88rem;
		font-weight: 400;
		line-height: 1.35;
		text-decoration: none;
		transition: color 0.18s ease, background-color 0.18s ease;
	}

	body .wp-block-navigation.tg-nav .tg-mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		margin-inline: -0.45rem;
		padding-inline: 0.45rem;
		background: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
		color: var(--wp--preset--color--white);
	}

	body .wp-block-navigation.tg-nav .tg-mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content.is-current {
		margin-inline: -0.45rem;
		padding-inline: 0.45rem;
		background: color-mix(in srgb, var(--wp--preset--color--accent-4) 14%, transparent);
		color: var(--wp--preset--color--accent-4);
	}
}

/* Przycisk „Umów wizytę" i lupa */
.tg-header__tools .wp-block-button__link {
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tg-header__tools .wp-block-button__link:is(:hover, :focus-visible) {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-1px);
}

.tg-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--wp--preset--color--accent-3);
	cursor: pointer;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.tg-search-toggle svg {
	display: block;
}

.tg-search-toggle:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 7%, transparent);
	color: var(--wp--preset--color--accent-1);
}

.tg-search-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ≤1100: menu przejmuje pasek zakładek; przycisk i lupa dopiero po scrollu */
@media (max-width: 1100px) {
	:root { --bb-header-height: 85px; }
	.tg-header,
	header.is-scrolled .tg-header { padding-block: 10px 19px; }
	.tg-header .tg-nav { display: none; }
	header:not(.is-scrolled) .tg-header__tools { display: none; }
}

@media (max-width: 768px) {
	:root { --bb-header-height: 87px; }
	.tg-header { padding-block: 20px 27px; }
	header.is-scrolled .tg-header { padding-block: 18px; }
	.tg-brand { gap: 0.65rem; }
	.tg-brand .tg-logo { height: 40px; }
	.tg-brand__t { font-size: 1.12rem; }
	.tg-brand__s { margin-top: 0.2rem; font-size: 0.6rem; }
	.tg-search-toggle { width: 40px; height: 40px; }
}

@media (max-width: 540px) {
	header.is-scrolled .tg-brand__txt { display: none; }
}

/* ─── 6. Ikony w natywnych blokach — maska SVG, kolor = currentColor ─── */
/* Przyciski core/button nie przyjmą inline SVG bez utraty edycji, więc   */
/* ikona idzie przez ::before/::after (klasa na bloku: tg-ic-calendar,     */
/* tg-ic-after-arrow). Ikony samodzielne = inline SVG w wp:html.          */
.tg-ic-calendar .wp-block-button__link::before,
.tg-ic-after-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.14em;
	background-color: currentColor;
	-webkit-mask: var(--tg-ic) center / contain no-repeat;
	mask: var(--tg-ic) center / contain no-repeat;
}

.tg-ic-calendar .wp-block-button__link::before {
	--tg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z'/%3E%3C/svg%3E");
	margin-right: 0.55rem;
}

.tg-ic-after-arrow .wp-block-button__link::after {
	--tg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	margin-left: 0.5rem;
}

/* ─── 7. Stopka (parts/footer.html) ─────────────────────────────────── */
.tg-cta-band .tg-ic-after-arrow .wp-block-button__link::after {
	--tg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
	width: 16px;
	height: 16px;
	margin-left: 18px;
}

/* Hover przycisku na pasku CTA (klasa koloru tła ma !important w WP) */
.tg-cta-band .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent-1) !important;
}

.tg-cta-band a,
.tg-footer a,
.tg-footer-bottom a {
	text-decoration: none;
}

.tg-flogo {
	display: flex;
}

.tg-flogo .tg-logo {
	display: block;
	width: auto;
	height: 64px;
	color: var(--wp--preset--color--muted-invert);
}

.tg-ic-contact {
	display: block;
	flex: 0 0 auto;
}

/* Social (core/social-links): mniejsze kółka jak na starej stronie */
.wp-block-social-links.tg-social .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
	padding: 7px;
}

.wp-block-social-links.tg-social .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg {
	width: 13px;
	height: 13px;
}

.wp-block-social-links.tg-social .wp-social-link {
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wp-block-social-links.tg-social .wp-social-link:is(:hover, :focus-within) {
	background-color: var(--wp--preset--color--ink-deep) !important;
	color: var(--wp--preset--color--white) !important;
}

@media (max-width: 782px) {
	.tg-cta-band__row {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.tg-footer-bottom__row {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.tg-flogo .tg-logo { height: 52px; }
}

/* ─── 8. Pasek zakładek — mobile ≤1100 (wp:html .tg-tabbar) ──────────── */
.tg-tabbar {
	display: none;
}

@media (max-width: 1100px) {
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	.tg-tabbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1310;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0.15rem;
		padding: 0.3rem 0.3rem calc(0.3rem + env(safe-area-inset-bottom));
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--muted-invert) 16%, transparent);
		background: var(--wp--preset--color--accent-3);
		box-shadow: 0 -6px 22px color-mix(in srgb, var(--wp--preset--color--accent-3) 24%, transparent);
	}

	.tg-tabbar::after {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: 140px;
		background: inherit;
		pointer-events: none;
	}

	.tg-tab {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		min-height: 52px;
		padding: 0.35rem 0.1rem;
		border: 0;
		border-radius: 12px;
		background: none;
		color: var(--wp--preset--color--muted-invert);
		font-family: var(--wp--preset--font-family--heading);
		font-size: 0.68rem;
		font-weight: 600;
		line-height: 1.15;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.18s ease, color 0.18s ease;
	}

	.tg-tab svg {
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
	}

	.tg-tab:is(:hover, :focus-visible) {
		background-color: color-mix(in srgb, var(--wp--preset--color--muted-invert) 14%, transparent);
		color: var(--wp--preset--color--white);
		outline: none;
	}

	.tg-tab.is-current {
		background-color: color-mix(in srgb, var(--wp--preset--color--accent-4) 16%, transparent);
		color: var(--wp--preset--color--accent-4);
	}

	.tg-tab.tg-tab--cta {
		background-color: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--white);
	}

	.tg-tab.tg-tab--cta:is(:hover, :focus-visible) {
		background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 77%, var(--wp--preset--color--black));
	}
}

/* ─── 9. Okna: menu Zabiegi (mobile) i wyszukiwarka — assets/js/tg-ui.js ── */
/* Klasę .tg-js dokłada skrypt w <head>. Bez JS (i w edytorze) okna są     */
/* zwykłymi sekcjami na końcu stopki — treść zostaje dostępna.            */
.tg-js .tg-overlay:not(.is-open) {
	display: none;
}

.tg-js .tg-overlay {
	position: fixed;
	z-index: 1300;
	overflow-y: auto;
	overscroll-behavior: contain;
}

html.tg-lock {
	overflow: hidden;
}

html.tg-lock body {
	pointer-events: none;
}

html.tg-lock :is(.tg-overlay, .tg-tabbar) {
	pointer-events: auto;
}

.tg-js .tg-sheet {
	right: 0;
	bottom: 0;
	left: 0;
	max-height: 84vh;
	padding-bottom: calc(84px + env(safe-area-inset-bottom));
	box-shadow:
		0 0 0 100vmax color-mix(in srgb, var(--wp--preset--color--ink-deep) 55%, transparent),
		0 -18px 44px color-mix(in srgb, var(--wp--preset--color--accent-3) 30%, transparent);
	animation: tg-sheet-up 0.18s ease-out;
}

@keyframes tg-sheet-up {
	from { bottom: -40px; opacity: 0; }
}

.tg-sheet__grab {
	display: block;
	width: 44px;
	height: 4px;
	margin: 0.1rem auto 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
}

.tg-sheet__close {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-3);
	cursor: pointer;
}

.tg-sheet-areas,
.tg-sheet-areas ul,
.tg-sheet-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-sheet-areas {
	margin-bottom: 1.1rem;
}

.tg-sheet-areas > li + li {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.tg-sheet-areas > li > a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.35rem 0.25rem;
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.tg-sheet-areas > li > a::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--accent-1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tg-sheet-areas ul {
	margin-bottom: 0.35rem;
}

.tg-sheet-areas ul a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 0.4rem 0.25rem;
	color: var(--wp--preset--color--accent-3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.tg-overlay :is(a, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.tg-sheet-areas a:hover,
.tg-sheet-links a:hover {
	color: var(--wp--preset--color--accent-1);
}

.tg-sheet-links li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.tg-sheet-links a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 52px;
	padding: 0.5rem 0.25rem;
	color: var(--wp--preset--color--accent-3);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	text-decoration: none;
}

/* Ikony listy „Reszta serwisu" dobierane po adresie linku */
.tg-sheet-links a::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--tg-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")) center / contain no-repeat;
	mask: var(--tg-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")) center / contain no-repeat;
}

.tg-sheet-links a[href$="/o-mnie/"]::before { --tg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.tg-sheet-links a[href*="/kontakt/"]::before { --tg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.9 8.9 0 0 1-4-.9L3 21l1.9-4.9A8.4 8.4 0 0 1 4 11.5 8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z'/%3E%3C/svg%3E"); }
.tg-sheet-links a[href="#tg-search"]::before { --tg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.tg-sheet-links a[href^="tel:"]::before { --tg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }

.tg-js .tg-search {
	top: clamp(56px, 12vh, 140px);
	left: 50%;
	z-index: 1400;
	width: min(680px, 92vw);
	max-height: calc(100vh - clamp(56px, 12vh, 140px) - 24px);
	box-shadow:
		0 0 0 100vmax color-mix(in srgb, var(--wp--preset--color--ink-deep) 55%, transparent),
		0 24px 70px color-mix(in srgb, var(--wp--preset--color--black) 28%, transparent);
	transform: translateX(-50%);
	animation: tg-fade 0.16s ease-out;
}

@keyframes tg-fade {
	from { opacity: 0; }
}

.tg-search__close {
	position: absolute;
	top: 10px;
	right: 14px;
	padding: 6px 10px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--wp--preset--color--body);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.tg-search__close:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-1);
}

.tg-search__form .wp-block-search__label {
	display: block;
	margin: 0 0 10px;
	color: var(--wp--preset--color--accent-1);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tg-search__form .wp-block-search__input {
	box-sizing: border-box;
	width: 100%;
	padding: 16px 18px;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 12px;
	outline: none;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-3);
	font-size: 18px;
	line-height: 1.3;
}

.tg-search__form .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--body);
	opacity: 1;
}

.tg-search__form .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
}

@media (max-width: 600px) {
	.tg-js .tg-search {
		top: 0;
		left: 0;
		width: 100vw;
		min-height: 100vh;
		max-height: 100vh;
		border-radius: 0 !important;
		transform: none;
	}

	.tg-search__form .wp-block-search__input {
		font-size: 16px;
	}
}