/**
 * Salon Urody Edyta — globalna warstwa designu.
 * Utility współdzielone przez bloki (przyciski, eyebrow, karty, reveal).
 * Layout konkretnej sekcji zostaje w style.scss danego bloku.
 */

:root {
	--ed-radius-sm: 10px;
	--ed-radius: 18px;
	--ed-radius-lg: 28px;
	--ed-radius-pill: 999px;
	--ed-shadow-soft: 0 18px 50px -28px rgba(90, 48, 56, 0.45);
	--ed-shadow-card: 0 24px 60px -34px rgba(90, 48, 56, 0.55);
	--ed-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ed-inner: 1240px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--rose-soft);
	color: var(--wp--preset--color--ink);
}

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--rose);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Eyebrow (mała etykieta nad nagłówkiem) --- */
.ed-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rose-deep);
}
/* Na ciemnym tle ta sama etykieta musi być jasna — róż na grafitowym to 3,25:1. */
.wp-block-edytadidyk-benefits .ed-eyebrow,
.wp-block-edytadidyk-cta-band .ed-eyebrow,
.has-image .ed-eyebrow { color: var(--wp--preset--color--rose-soft); }
.ed-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--wp--preset--color--champagne);
}
.ed-eyebrow--center::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--wp--preset--color--champagne);
}

/* --- Przyciski --- */
.ed-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: var(--ed-radius-pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.35s var(--ed-ease), color 0.35s var(--ed-ease),
		border-color 0.35s var(--ed-ease), transform 0.35s var(--ed-ease),
		box-shadow 0.35s var(--ed-ease);
}
.ed-btn--primary {
	/* Róż podstawowy dawał z bielą 4,2:1 przy wymaganych 4,5 dla małego tekstu —
	   przycisk główny jest teraz o ton ciemniejszy (6,3:1). */
	background: var(--wp--preset--color--rose-deep);
	color: #fff;
	box-shadow: var(--ed-shadow-soft);
}
.ed-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--border);
}
.ed-btn--light {
	background: #fff;
	color: var(--wp--preset--color--rose-deep);
}
.ed-btn--outline-light {
	/* Na różowym pasie sama biel na przezroczystym tle dawała 3,2:1 — przyciemniamy podkład. */
	background: rgba(42, 34, 38, 0.28);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.75);
}
.ed-btn--sm {
	padding: 11px 22px;
	font-size: 12.5px;
}

@media (hover: hover) {
	.ed-btn--primary:hover { filter: brightness(0.9); transform: translateY(-2px); }
	.ed-btn--ghost:hover { border-color: var(--wp--preset--color--rose); color: var(--wp--preset--color--rose); }
	.ed-btn--light:hover { background: var(--wp--preset--color--blush); transform: translateY(-2px); }
	.ed-btn--outline-light:hover { background: rgba(42, 34, 38, 0.42); border-color: #fff; }
}

/* Strzałka w przycisku — arrow-1 wyjeżdża, arrow-2 wjeżdża */
.ed-btn__arrow {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 16px;
	height: 12px;
	flex: 0 0 16px;
}
.ed-btn__arrow span {
	position: absolute;
	inset: 0;
	display: block;
	transition: transform 0.4s var(--ed-ease);
	background: currentColor;
	-webkit-mask: var(--ed-arrow-mask) center / contain no-repeat;
	mask: var(--ed-arrow-mask) center / contain no-repeat;
	--ed-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M9.7.3 15.4 6l-5.7 5.7-1.06-1.06L12.28 6.75H.6v-1.5h11.68L8.64 1.36 9.7.3Z' fill='%23000'/%3E%3C/svg%3E");
}
.ed-btn__arrow span + span { transform: translateX(-22px); }
@media (hover: hover) {
	.ed-btn:hover .ed-btn__arrow span:first-child { transform: translateX(22px); }
	.ed-btn:hover .ed-btn__arrow span + span { transform: translateX(0); }
}
@media (max-width: 1024px) {
	.ed-btn__arrow span + span { display: none; }
	.ed-btn:hover .ed-btn__arrow span:first-child { transform: none; }
}

/* --- Link tekstowy ze strzałką --- */
.ed-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--rose);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	/* Cel dotykowy: linki-strzałki miały 23 px wysokości, próg WCAG 2.5.8 to 24. */
	min-height: 26px;
	align-items: center;
}
.ed-link::after {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: width 0.35s var(--ed-ease);
}
@media (hover: hover) {
	.ed-link:hover::after { width: 34px; }
}

/* --- Reveal (IntersectionObserver) ---
   Stan startowy obowiązuje TYLKO wtedy, gdy skrypt animacji faktycznie wystartował
   (klasa `ed-anim` dokładana w <head> przed pierwszym malowaniem). Bez tego nic się
   nie chowa: zablokowany albo spóźniony JavaScript nie może ukryć zdjęcia ani sekcji. */
.ed-anim .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.75s var(--ed-ease), transform 0.75s var(--ed-ease);
	will-change: opacity, transform;
}
.ed-anim .reveal.is-in {
	opacity: 1;
	transform: none;
}
.ed-anim .reveal--fade { transform: none; }
.ed-anim .reveal--right { transform: translateX(26px); }

/* Poziome przycięcie strony.
   Stan startowy `reveal--left/right` przesuwa sekcje o 26 px w bok. Elementy, które
   jeszcze nie weszły w kadr, rozpychały przez to dokument — na telefonie stronę dawało
   się przesunąć w bok o kilka pikseli, zanim animacja zdążyła je ustawić na miejsce.
   `clip` zamiast `hidden`: nie tworzy kontekstu przewijania, więc przyklejony navbar
   dalej łapie się viewportu, a nie tego kontenera. */
.wp-site-blocks { overflow-x: clip; }

.ed-anim .reveal--left { transform: translateX(-26px); }

/* Odsłanianie obrazu „kurtyną” — kadr wjeżdża spod maski.
   Start od 82%, nie od 100%: nawet w trakcie animacji widać już górę kadru. */
.ed-anim .reveal-img {
	clip-path: inset(0 0 82% 0);
	transition: clip-path 0.75s var(--ed-ease);
}
.ed-anim .reveal-img.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-img {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* --- Utility --- */
.ed-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Treść redakcyjna: wpisy bloga, strony prawne
   ========================================================================== */

.ed-prose {
	font-size: 17.5px;
	line-height: 1.78;
	color: var(--wp--preset--color--ink);
}
.ed-prose > * { margin-block: 0; }
.ed-prose > * + * { margin-top: 22px; }
.ed-prose > h2 {
	margin-top: clamp(38px, calc(38px + 16 * ((100vw - 768px) / 672)), 54px);
	font-size: clamp(26px, calc(26px + 8 * ((100vw - 768px) / 672)), 34px);
	line-height: 1.2;
}
.ed-prose > h3 {
	margin-top: clamp(28px, calc(28px + 10 * ((100vw - 768px) / 672)), 38px);
	font-size: clamp(21px, calc(21px + 4 * ((100vw - 768px) / 672)), 25px);
	line-height: 1.28;
}
.ed-prose > h4 { margin-top: 28px; }
.ed-prose p { color: var(--wp--preset--color--ink); }
.ed-prose a { color: var(--wp--preset--color--rose); text-underline-offset: 3px; }
/* Przycisk w treści jest linkiem, więc reguła wyżej nadawała mu kolor różu — na różowym
   tle dawało to tekst niewidoczny (kontrast 1:1). Kolory przycisków ustala theme.json. */
.ed-prose .wp-block-button__link { color: var(--wp--preset--color--base); text-decoration: none; }
.ed-prose .is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--rose-deep); }
.ed-prose ul,
.ed-prose ol { padding-left: 22px; }
.ed-prose li + li { margin-top: 8px; }
.ed-prose ul li::marker { color: var(--wp--preset--color--rose); }
.ed-prose blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--wp--preset--color--rose-soft);
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 22px;
	line-height: 1.45;
}
.ed-prose blockquote p { margin: 0; }
.ed-prose figure img,
.ed-prose img { border-radius: var(--ed-radius); }
.ed-prose figcaption {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--wp--preset--color--muted);
	text-align: center;
}
.ed-prose hr {
	margin: 44px 0;
	border: 0;
	height: 1px;
	background: var(--wp--preset--color--border);
}
.ed-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ed-prose th,
.ed-prose td { padding: 12px 14px; border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; }

/* Wyróżniony akapit / ramka „w skrócie” */
.ed-prose .ed-note,
.ed-prose .wp-block-group.ed-note {
	padding: clamp(20px, calc(20px + 8 * ((100vw - 768px) / 672)), 28px);
	background: var(--wp--preset--color--blush);
	border-radius: var(--ed-radius-lg);
}
.ed-prose .ed-note > * + * { margin-top: 12px; }

/* FAQ na bazie core/details */
.ed-prose .wp-block-details {
	padding: 18px 22px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ed-radius);
}
.ed-prose .wp-block-details + .wp-block-details { margin-top: 10px; }
.ed-prose .wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.ed-prose .wp-block-details[open] summary { color: var(--wp--preset--color--rose); }

/* ==========================================================================
   Nagłówek wpisu i archiwów
   ========================================================================== */

.ed-post__head {
	padding-top: clamp(34px, calc(34px + 20 * ((100vw - 768px) / 672)), 54px);
	padding-bottom: clamp(20px, calc(20px + 8 * ((100vw - 768px) / 672)), 28px);
	background: var(--wp--preset--color--blush);
}
.ed-post__cat {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.ed-post__cat a { color: var(--wp--preset--color--rose-deep); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.ed-post__title {
	margin: 12px 0 0;
	font-size: clamp(32px, calc(32px + 18 * ((100vw - 768px) / 672)), 50px);
	line-height: 1.1;
}
.ed-post__meta {
	margin-top: 16px;
	gap: 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}
.ed-post__meta p { margin: 0; }
.ed-post__author::before { content: "· "; }
.ed-post__image { margin-top: 0; }
.ed-post__image img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	/* Kadry poziome bezpiecznie przycinamy od środka, ale odrobinę wyżej niż w połowie —
	   na zdjęciach zabiegów najważniejsze dzieje się w górnej części kadru. */
	object-position: 50% 38%;
	border-radius: 0;
}
/* Kadr pionowy pokazujemy w całości: przycięcie do szerokiego pasa obcinało twarze.
   Zdjęcie siada na spokojnym tle marki i zachowuje własne proporcje. */
.ed-post__image--portrait {
	background: var(--wp--preset--color--blush);
}
.ed-post__image--portrait img {
	width: auto;
	max-width: min(100%, 620px);
	max-height: min(78vh, 720px);
	margin-inline: auto;
	object-fit: contain;
	display: block;
}
.ed-post .wp-block-post-content { padding-block: clamp(34px, calc(34px + 18 * ((100vw - 768px) / 672)), 52px); }

.ed-archive-head {
	padding-top: clamp(36px, calc(36px + 24 * ((100vw - 768px) / 672)), 60px);
	padding-bottom: clamp(16px, calc(16px + 8 * ((100vw - 768px) / 672)), 24px);
	background: var(--wp--preset--color--blush);
}
.ed-archive-title {
	margin: 10px 0 0;
	font-size: clamp(32px, calc(32px + 16 * ((100vw - 768px) / 672)), 48px);
}
.ed-archive-desc {
	margin: 12px 0 0;
	max-width: 62ch;
	color: var(--wp--preset--color--muted);
}
.ed-404 { padding-block: clamp(30px, calc(30px + 14 * ((100vw - 768px) / 672)), 44px); }
.ed-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ed-radius-pill);
	padding: 12px 20px;
}
.ed-search .wp-block-search__button {
	border-radius: var(--ed-radius-pill);
	background: var(--wp--preset--color--rose-deep);
	color: #fff;
	border: none;
	padding: 12px 24px;
}

/* Blok treści redakcyjnej użyty jako samodzielna sekcja strony (landingi, dokumenty) */
.wp-block-group.ed-prose {
	padding-block: clamp(40px, calc(40px + 24 * ((100vw - 768px) / 672)), 64px);
}

/* Zamykające wezwanie do działania we wpisach */
.ed-prose .ed-note--cta {
	background: linear-gradient(150deg, var(--wp--preset--color--blush) 0%, #f6e2e0 100%);
	border: 1px solid var(--wp--preset--color--border);
}
.ed-prose .ed-note--cta h2 {
	margin-top: 0;
	font-size: clamp(24px, calc(24px + 6 * ((100vw - 768px) / 672)), 30px);
}
.ed-prose .ed-note--cta .wp-block-buttons { margin-top: 18px; }

/* Okruszki — styl globalny: blok page-hero nie występuje na wpisach i archiwach,
   a nawigacja okruszkowa tak. Trzymamy reguły tutaj, żeby wyglądała wszędzie tak samo. */
.ed-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
}
.ed-crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}
.ed-crumbs span[aria-current] { color: var(--wp--preset--color--rose-deep); }
.ed-crumbs .ed-crumbs__sep { opacity: 0.5; }
@media (hover: hover) {
	.ed-crumbs a:hover { color: var(--wp--preset--color--rose); text-decoration: underline; }
}

/* --- Warstwa ruchu (assets/js/motion.js) --- */
.ed-parallax {
	/* Zmienna ustawiana z JavaScriptu; bez niego wartość zerowa i zero ruchu. */
	transform: translate3d(0, var(--ed-parallax, 0px), 0) scale(1.06);
	will-change: transform;
}
.ed-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: 210; /* nad przyklejonym nagłówkiem (200) */
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--wp--preset--color--rose-soft), var(--wp--preset--color--rose));
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.ed-parallax { transform: none; }
	.ed-progress { display: none; }
}


/* Czytelność dla grupy docelowej (klientki 30–50/60).
   Przyjęty w projekcie próg: tekst pomocniczy i etykiety min. 13 px, cele dotykowe min. 24 px.
   Pasek kontaktowy w nagłówku i strzałki slidera opinii były poniżej tych progów —
   pasek to miejsce, w którym szuka się telefonu, więc drobny druk jest tam najbardziej kosztowny. */
.nav__top-item,
.nav__top-phone {
	font-size: 13px;
}

.nav__cta.ed-btn--sm {
	font-size: 13px;
}

.tst__arrow {
	min-width: 26px;
}

.ed-crumbs,
.ed-crumbs a,
.ed-crumbs__sep,
.ed-crumbs span {
	font-size: 13px;
}

.ph__eyebrow {
	font-size: 13px;
}

/* Reszta drobnego druku podciągnięta do tego samego progu 13 px.
   Najważniejsze w tej grupie: etykiety pól formularza i etykiety w pasie faktów na
   stronach lokalnych („Odległość”, „Czas jazdy”, „Godziny”) — miały 11–12 px. */
.hero__kicker,
.hero__badge-text,
.ed-eyebrow,
.promo__eyebrow,
.abt__sign-role,
.abt__stamp-line,
.tst__author-meta,
.pg__cat,
.cnt__map-hint,
.ed-cf7__label,
.lf__label,
.sg__index {
	font-size: 13px;
}

.intro__portrait-role {
	font-size: 13px;
}

/* Kontrast tekstu w treści i etykiet nagłówka.
   Marka `rose` (#A85C6B) na jasnym tle daje 4,29:1 — poniżej progu 4,5:1 dla tekstu.
   `rose-deep` na tym samym tle daje ok. 6,3:1. Dotyczy linków w treści oraz etykiety
   nagłówka podstrony tam, gdzie nagłówek jest jasny (bez zdjęcia). */
.ed-prose a:not(.wp-element-button):not(.ed-btn),
.wp-block-edytadidyk-page-hero.is-plain .ph__eyebrow {
	color: var(--wp--preset--color--rose-deep, #8C4855);
}

/* Numer telefonu i gwiazdki oceny.
   Telefon w sekcji wartości był w kolorze `rose` na jasnym tle (4,29:1) — to element,
   po który sięga się wzrokiem, więc idzie na `rose-deep`. Gwiazdki w szampanie dawały
   2,04:1; to nośnik oceny, nie ozdoba, więc dostają ciemniejszy odcień złota.
   Ozdobny cudzysłów (`tst__mark`) zostaje jasny świadomie — nic nie komunikuje. */
.wp-block-edytadidyk-values a[href^="tel:"],
.faq a[href^="tel:"] {
	color: var(--wp--preset--color--rose-deep, #8C4855);
}

.tst__stars {
	color: #8A6A34;
}

/* Przeglądarki bez `clip` (Safari < 16): NIE dawać tu `overflow-x: hidden`.
   Gdy jedna oś jest `hidden`, druga `visible` liczy się jako `auto` — powstaje kontener
   przewijania i przyklejone elementy zaczepiają się o niego zamiast o viewport.
   Zamiast tego usuwamy przyczynę: przesunięcie idzie w pionie, więc nic nie wystaje w bok. */
@supports not (overflow-x: clip) {
	.ed-anim .reveal--right,
	.ed-anim .reveal--left { transform: translateY(20px); }
}

/* Cele dotykowe w tekście.
   WCAG 2.2 (2.5.8) wymaga 24×24 px. Linki w akapitach miały 19–23 px wysokości:
   numer telefonu w sekcji wartości i w odpowiedziach FAQ oraz odnośnik do polityki
   przy zgodzie w formularzu — czyli akurat te, w które trafia się palcem.
   Padding pionowy na elemencie liniowym powiększa obszar trafienia, ale NIE zmienia
   wysokości wiersza, więc układ tekstu zostaje bez zmian. */
.val__note a,
.faq__answer a,
.wpcf7-list-item-label a {
	padding-block: 4px;
}