/*
 * ui.css — refactor interfejsu na jasny, pastelowy.
 *
 * Paczka HTML, z której powstał motyw, opierała się na ciemnozielonych
 * blokach. Identyfikacja Psyche & Intima jest odwrotna: przewiewna,
 * pastelowa, na kości słoniowej. Ten plik przenosi układ na jasne
 * powierzchnie bez przepisywania szablonów.
 *
 * Mechanizm: skompilowany Tailwind zapisuje utility jako
 * `.text-cream{color:var(--cream)}`. Wystarczy więc wewnątrz dawnej
 * ciemnej sekcji podmienić samą zmienną `--cream` na kolor tekstu —
 * wszystkie warianty (text-cream/60, /75, /80…) przestawiają się razem,
 * bo wskazują na tę samą zmienną.
 *
 * Ładowany po theme-extra.css.
 */

/* =========================================================================
   1. Dawne ciemne sekcje → pastelowe powierzchnie
   ====================================================================== */

.jw-body .bg-forest,
.jw-body .jw-section--forest,
.jw-body .jw-cta-band,
.jw-body .jw-footer {
	/* Tekst, który był kremowy, staje się grafitowy. */
	--cream: #38352c;

	background-color: var(--surface-sand);
	color: var(--forest);
	border-color: var(--border);
}

/* Cienkie linie w tych sekcjach nie mogą stać się grafitowe. */
.jw-body .bg-forest [class*="border-cream"],
.jw-body .jw-section--forest [class*="border-cream"],
.jw-body .jw-footer [class*="border-cream"] {
	border-color: color-mix(in oklab, var(--forest) 14%, transparent);
}

/* Tło „szkiełek” na dawnych ciemnych sekcjach. */
.jw-body .bg-forest [class*="bg-cream"],
.jw-body .jw-section--forest [class*="bg-cream"] {
	background-color: color-mix(in oklab, var(--forest) 4%, transparent);
}

/* --- rytm kolorystyczny: każda powierzchnia inna --- */

.jw-body div.bg-forest {
	background-color: var(--surface-sand);
}

.jw-body section.bg-forest {
	background-color: var(--surface-blush);
}

.jw-body section#contact.bg-forest {
	background-color: var(--surface-mist);
}

.jw-body .jw-section--forest {
	background-color: var(--surface-mist);
}

.jw-body .jw-footer {
	background-color: var(--surface-sage);
}

.jw-body .jw-cta-band {
	background-color: var(--surface-blush);
	border: 1px solid color-mix(in oklab, var(--brand-rose) 45%, transparent);
}

/* Wyróżniony kafelek oferty — terakotowy pastel zamiast czarnej plamy. */
.jw-body article.bg-forest {
	background-color: var(--accent-soft);
	border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}

.jw-body article.bg-forest .bg-accent {
	background-color: var(--accent);
	color: #fff8f3;
}

/* Plakietka „Nowość” na wyróżnionym kafelku. */
.jw-body article.bg-forest .text-forest {
	color: #fff8f3;
}

/* Poświaty z paczki były liczone pod ciemne tło — na jasnym są brudem. */
.jw-body .bg-forest .blur-3xl,
.jw-body .jw-section--forest .blur-3xl {
	display: none;
}

/* =========================================================================
   2. Przyciski
   ====================================================================== */

.jw-body .btn-primary,
.jw-body .btn-ghost,
.jw-body .jw-consent-bar__btn {
	text-decoration: none;
	border-radius: 999px;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease, transform 0.25s ease;
}

.jw-body .btn-primary {
	background-color: var(--accent);
	color: var(--accent-foreground);
	border: 1px solid var(--accent);
}

.jw-body .btn-primary:hover {
	background-color: #8a4830;
	border-color: #8a4830;
	color: var(--accent-foreground);
	transform: translateY(-1px);
}

.jw-body .btn-ghost {
	background-color: transparent;
	color: var(--forest);
	border: 1px solid color-mix(in oklab, var(--forest) 25%, transparent);
}

.jw-body .btn-ghost:hover {
	background-color: var(--accent-soft);
	border-color: color-mix(in oklab, var(--accent) 35%, transparent);
	color: var(--forest);
	transform: translateY(-1px);
}

/*
 * Warianty z paczki wymuszane przez !important — neutralizujemy.
 * Tailwithowe klasy z „!” (np. !text-forest) same kompilują się z
 * !important, więc żeby je realnie nadpisać, ta reguła też musi go użyć —
 * inaczej przegrywa z cascade mimo wyższej specyficzności selektora.
 * Dokładnie to spowodowało czarny tekst na przycisku z tłem --accent.
 */
.jw-body .btn-primary.\!bg-accent,
.jw-body .btn-primary.\!text-forest {
	background-color: var(--accent) !important;
	color: var(--accent-foreground) !important;
}

.jw-body .btn-ghost.\!text-cream {
	color: var(--forest);
}

.jw-body .btn-ghost.\!border-cream\/40 {
	border-color: color-mix(in oklab, var(--forest) 25%, transparent);
}

/* =========================================================================
   3. Pigułki obszarów pomocy
   ====================================================================== */

.jw-body .hover\:bg-forest:hover {
	background-color: var(--accent-soft);
	color: var(--forest);
	border-color: color-mix(in oklab, var(--accent) 32%, transparent);
}

.jw-body .hover\:text-cream:hover {
	color: var(--forest);
}

/* =========================================================================
   4. Karty
   ====================================================================== */

.jw-body .card-elevated {
	background-color: var(--card);
	border: 1px solid var(--border);
	border-radius: 1.25rem;
	box-shadow: 0 1px 2px rgb(56 53 44 / 0.03);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.jw-body .card-elevated:hover {
	transform: translateY(-3px);
	border-color: color-mix(in oklab, var(--brand-rose) 55%, transparent);
	box-shadow: 0 20px 40px -28px rgb(56 53 44 / 0.35);
}

.jw-card,
.jw-quote-card,
.jw-post-card {
	box-shadow: 0 1px 2px rgb(56 53 44 / 0.03);
}

.jw-card:hover,
.jw-post-card:hover {
	border-color: color-mix(in oklab, var(--brand-rose) 55%, transparent);
	box-shadow: 0 20px 40px -28px rgb(56 53 44 / 0.35);
}

/* =========================================================================
   5. Typografia — spokojniejsza hierarchia
   ====================================================================== */

.jw-body .eyebrow,
.jw-body .jw-card__num,
.jw-body .jw-post-card__meta {
	color: var(--accent);
	letter-spacing: 0.24em;
	font-size: 0.68rem;
	text-transform: uppercase;
}

/* Nagłówki z paczki bywały ekstremalnie duże — skala bardziej czytelna. */
.jw-body h1.font-display {
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.jw-body h2.font-display {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.jw-body h3.font-display,
.jw-body .card-elevated h3 {
	font-size: clamp(1.2rem, 1.6vw, 1.45rem);
	line-height: 1.25;
}

/* Kursywa akcentowa — dawniej złota, teraz terakotowa. */
.jw-body .italic.text-accent,
.jw-body em.text-accent {
	color: var(--accent);
}

.jw-body blockquote.font-display {
	font-size: clamp(1.5rem, 2.8vw, 2.15rem);
	line-height: 1.3;
	color: var(--forest);
}

/* =========================================================================
   6. Formularz kontaktowy
   ====================================================================== */

/*
 * Cały .jw-form mieszka teraz tutaj, w jednym miejscu — wcześniej te same
 * selektory były zdefiniowane też w style.css (dawny wygląd: szklane,
 * półprzezroczyste pola na ciemnozielonym tle, kolory liczone z --cream
 * w wysokim rozjaśnieniu). style.css ładuje się jako ostatni, więc mimo
 * poprawek kolorystycznych tutaj, jego reguły zawsze wygrywały cascade —
 * stąd pola wyglądały na płaskie i rozmyte na jasnym tle formularza.
 * Żeby to się nie powtórzyło, cała definicja formularza żyje odtąd
 * wyłącznie w tym pliku.
 */

/*
 * Odstępy w tym formularzu przebudowane od zera (poprzednie podejście —
 * marginesy na .jw-field/label — dawało nieprzewidywalny, zbyt duży
 * odstęp między etykietą a polem, bo CF7 owija każdy wiersz we własne
 * <p>, czasem dokłada <br>, a przeglądarka ma domyślny margines na <p>.
 * Te źródła się sumowały i żaden pojedynczy margines w tym pliku nie
 * dawał nad tym pełnej kontroli).
 *
 * Nowy model: zerujemy WSZYSTKIE marginesy wewnątrz formularza (p, br),
 * chowamy <br>, i budujemy CAŁY rytm pionowy jednym mechanizmem —
 * odstępem (gap) na samym <form>. To jedyne miejsce, które decyduje
 * o odległości między polami, więc nie ma już nic, co mogłoby się z nim
 * zsumować.
 */
.jw-form {
	margin-top: 2.5rem;
	max-width: 36rem;
}

.jw-form form {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.jw-form p,
.jw-form br {
	margin: 0;
	padding: 0;
}

.jw-form br {
	display: none;
}

.jw-form .jw-field {
	display: block;
}

.jw-form label {
	display: block;
	margin: 0 0 0.45rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}

/* CF7 owija każde pole w <span class="wpcf7-form-control-wrap">, który
   w domyślnym CSS wtyczki bywa block-level z własnym marginesem —
   dokładamy reset, żeby nic nie dokładało się do odstępu z gap powyżej. */
.jw-form .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
}

.jw-form input[type="text"],
.jw-form input[type="email"],
.jw-form input[type="tel"],
.jw-form select,
.jw-form textarea {
	width: 100%;
	/* 16px, nie 0.95rem (~15.2px) — poniżej 16px Safari na iOS
	   automatycznie przybliża widok przy dotknięciu pola, co na
	   formularzu tej długości jest szczególnie uciążliwe. */
	padding: 15px 18px;
	border: 1px solid var(--input);
	border-radius: 14px;
	background: var(--card);
	box-shadow: 0 1px 2px color-mix(in oklab, var(--forest) 5%, transparent);
	color: var(--forest);
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.jw-form input[type="text"]:hover,
.jw-form input[type="email"]:hover,
.jw-form input[type="tel"]:hover,
.jw-form select:hover,
.jw-form textarea:hover {
	border-color: color-mix(in oklab, var(--forest) 35%, var(--input));
}

.jw-form select {
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b6558' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
}

.jw-form input::placeholder,
.jw-form textarea::placeholder {
	color: color-mix(in oklab, var(--forest) 42%, transparent);
}

.jw-form input:focus,
.jw-form select:focus,
.jw-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--card);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

.jw-form textarea {
	min-height: 140px;
	resize: vertical;
}

.jw-form .jw-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--muted-foreground);
	text-transform: none;
	letter-spacing: normal;
}

.jw-form .jw-consent input[type="checkbox"] {
	margin-top: 4px;
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: var(--accent);
	cursor: pointer;
}

.jw-form .wpcf7-list-item {
	margin: 0;
}

.jw-form .wpcf7-list-item-label {
	font-size: 0.82rem;
	color: var(--muted-foreground);
}

.jw-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 16px 36px;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-foreground);
	font-weight: 500;
	font-size: 0.95rem;
	cursor: pointer;
	transition: filter 0.25s ease, transform 0.25s ease;
}

.jw-form input[type="submit"]:hover {
	filter: brightness(1.07);
	transform: translateY(-2px);
}

.jw-form input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.jw-form .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	color: #a33b2c;
}

.jw-form .wpcf7-response-output {
	margin: 1.2rem 0 0;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: var(--card);
	font-size: 0.88rem;
	color: var(--forest);
}

.jw-form .wpcf7-spinner {
	background-color: var(--accent);
}

/* =========================================================================
   7. Dane kontaktowe i stopka
   ====================================================================== */

.jw-contact-list li {
	border-top-color: var(--border);
}

.jw-contact-list li:last-child {
	border-bottom-color: var(--border);
}

.jw-contact-list .jw-label {
	color: var(--accent);
}

.jw-contact-list .jw-value {
	color: var(--forest);
}

.jw-contact-list a.jw-value:hover {
	color: var(--accent);
}

.jw-footer {
	color: var(--muted-foreground);
}

.jw-footer h2,
.jw-footer .jw-logo__name {
	color: var(--forest);
}

.jw-footer .jw-logo__sub,
.jw-footer__bottom {
	color: var(--muted-foreground);
}

.jw-footer a:hover {
	color: var(--accent);
}

.jw-footer__grid {
	border-bottom-color: var(--border);
}

.jw-footer .jw-mark {
	background: var(--accent-soft);
	color: var(--accent);
}

/* =========================================================================
   8. Pasek zgody na cookies
   ====================================================================== */

.jw-consent-bar {
	background: var(--card);
	color: var(--forest);
	border: 1px solid var(--border);
	box-shadow: 0 24px 50px -30px rgb(56 53 44 / 0.35);
}

.jw-consent-bar__text a {
	color: var(--accent);
}

.jw-consent-bar__btn {
	background: var(--accent);
	color: var(--accent-foreground);
}

.jw-consent-bar__btn--ghost {
	background: transparent;
	border-color: color-mix(in oklab, var(--forest) 25%, transparent);
	color: var(--forest);
}

.jw-consent-bar__btn--ghost:hover {
	background: var(--accent-soft);
}

/* =========================================================================
   9. Nagłówek — mniej ciężaru, więcej powietrza
   ====================================================================== */

.jw-body header .container-x > div {
	backdrop-filter: blur(12px);
}

.jw-mark {
	background: var(--accent-soft);
	color: var(--accent);
}

.jw-logo__name {
	color: var(--forest);
}

/* Sygnet w stopce nie potrzebuje osobnego wariantu — dziedziczy jasny. */

/* =========================================================================
   10. Cennik i sekcje pastelowe — czytelniejsze linie
   ====================================================================== */

.jw-body .divide-border > * + *,
.jw-body .border-y {
	border-color: var(--border);
}

.jw-price-row,
.jw-faq details,
.jw-faq {
	border-color: var(--border);
}

.jw-price-row__value {
	color: var(--accent);
}

/* Marquee z pasami usług — subtelniejszy na jasnym tle. */
.jw-body div.bg-forest .text-accent {
	color: color-mix(in oklab, var(--accent) 70%, transparent);
}

/* =========================================================================
   11. Sekcja z alternatywnym tłem
   ====================================================================== */

.jw-body .bg-secondary\/50 {
	background-color: var(--surface-sage);
}

.jw-section--alt {
	background: var(--surface-sage);
}

/* =========================================================================
   12. Akwarelowe tła dekoracyjne
   ====================================================================== */

/*
 * Dwie ilustracje w stylu akwareli, dopasowane kolorystycznie do palety
 * marki (szałwia, przygaszony róż, kość słoniowa). Obie mają celowo pustą,
 * jasną przestrzeń pod tekst — dlatego wystarczy delikatna nakładka
 * w kolorze --cream, żeby wtopić je w resztę strony i zagwarantować
 * czytelność cytatu niezależnie od tego, jak przytnie się tło na danej
 * szerokości ekranu.
 */
.jw-bg-decor {
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	isolation: isolate;
}

.jw-bg-decor::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, color-mix( in oklab, var(--cream) 55%, transparent ), color-mix( in oklab, var(--cream) 80%, transparent ) );
	pointer-events: none;
	z-index: 0;
}

.jw-bg-decor > * {
	position: relative;
	z-index: 1;
}

.jw-bg-decor--leaves {
	background-image: url('../img/bg-watercolor-leaves-900.webp');
}

.jw-bg-decor--silhouettes {
	background-image: url('../img/bg-watercolor-silhouettes-900.webp');
	background-position: right center;
}

@media (min-width: 768px) {
	.jw-bg-decor--leaves {
		background-image: url('../img/bg-watercolor-leaves-1600.webp');
	}

	.jw-bg-decor--silhouettes {
		background-image: url('../img/bg-watercolor-silhouettes-1600.webp');
	}
}