/*
 * brand.css — paleta marki Psyche & Intima
 *
 * Kolory pobrane z pliku wizytówki (analiza pikseli, nie „na oko”):
 *   tło karty          #E9E7DB   ciepła kość słoniowa
 *   „mgr J. Walaszek”  #403E32   ciepły grafit
 *   lotos              #C4937A   terakota
 *   liście różowe      #C89A88
 *   liście zielone     #C4BB9A
 *   akwarela błękitna  #C9CBBE
 *   akwarela złota     #C1A980
 *
 * Wizytówka jest pastelowa i jasna — strona też. Zamiast ciemnozielonych
 * bloków używamy czterech przewiewnych powierzchni (blush, sage, mist, sand),
 * a rolę „ciemnego” pełni ciepły grafit, wyłącznie w typografii.
 *
 * Barwy użytkowe są przyciemnione względem druku tak, aby każda para
 * tekst/tło przechodziła WCAG AA. Papier wybacza niski kontrast, ekran nie.
 *
 * Plik ładuje się PO main.css i nadpisuje wyłącznie zmienne w :root —
 * skompilowany Tailwind zostaje nietknięty, bo wszystkie jego klasy
 * odwołują się do tych zmiennych przez var().
 */

:root {
	/* --- barwy źródłowe z wizytówki --- */
	--brand-ivory: #e9e7db;
	--brand-terracotta: #c4937a;
	--brand-rose: #c89a88;
	--brand-leaf: #c4bb9a;
	--brand-mist: #c9cbbe;
	--brand-sand: #c1a980;

	/* --- powierzchnie pastelowe --- */
	--surface-blush: #f8eae4;
	--surface-sage: #eceee3;
	--surface-mist: #e9edeb;
	--surface-sand: #f5ecdd;
	--surface-tint: #fdf6f1;

	/*
	 * --forest zostaje w nazwie, bo odwołuje się do niego skompilowany
	 * Tailwind, ale nie jest już zielony: to ciepły grafit z wizytówki.
	 * Służy wyłącznie do typografii — żadnych ciemnych plam.
	 */
	--forest: #38352c;
	--sage: #a9ae97;
	--gold: #c1a980;

	--cream: #fcfaf6;
	--background: #fcfaf6;
	--foreground: #38352c;

	--card: #ffffff;
	--card-foreground: #38352c;

	--popover: #ffffff;
	--popover-foreground: #38352c;

	--primary: #9d543a;
	--primary-foreground: #fff8f3;

	--secondary: #f4ece1;
	--secondary-foreground: #38352c;

	--muted: #f3eee5;
	--muted-foreground: #6b6558;

	/* Terakota lotosu, przyciemniona do 4.75:1 na najciemniejszym pastelu. */
	--accent: #9d543a;
	--accent-foreground: #fff8f3;

	/*
	 * Miękkie wypełnienie terakotowe — plakietki, sygnet, wyróżniony kafelek.
	 * Rozjaśnione do 4.6:1 dla terakoty, bo na tym tle bywa tekstem.
	 */
	--accent-soft: #f7e6de;

	--destructive: #a33b2c;
	--destructive-foreground: #fff8f3;

	/* Włos oddzielający sekcje — element dekoracyjny, bez wymogu kontrastu. */
	--border: #e6dfd3;

	/*
	 * Obramowanie pól formularza to granica komponentu interaktywnego,
	 * więc wg WCAG 1.4.11 musi mieć min. 3:1 wobec tła — także wobec
	 * najciemniejszego pastelu, nie tylko wobec bieli.
	 */
	--input: #847d6c;

	--ring: #9d543a;
}

/* Pola formularzy na jasnym tle korzystają z --input, nie z --border. */
.jw-searchform input[type="search"],
.jw-comments .comment-form input[type="text"],
.jw-comments .comment-form input[type="email"],
.jw-comments .comment-form input[type="url"],
.jw-comments .comment-form textarea {
	border-color: var(--input);
}


/* =========================================================================
   Delikatne tło akwarelowe — echo wizytówki
   ====================================================================== */

.jw-body {
	background-color: var(--background);
	background-image:
		radial-gradient(58rem 30rem at 100% -8%, color-mix(in oklab, var(--brand-rose) 22%, transparent), transparent 62%),
		radial-gradient(46rem 26rem at -10% 4%, color-mix(in oklab, var(--brand-mist) 30%, transparent), transparent 60%),
		radial-gradient(52rem 28rem at 50% 112%, color-mix(in oklab, var(--brand-sand) 16%, transparent), transparent 65%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

@media (max-width: 720px) {
	.jw-body {
		background-attachment: scroll;
	}
}

/* Sekcje o własnym tle muszą być nieprzezroczyste. */
.jw-section--forest,
.jw-footer {
	position: relative;
	z-index: 0;
}

/* Poświata w nagłówkach podstron w kolorze lotosu, nie złota. */
.jw-hero-page::after {
	background: color-mix(in oklab, var(--brand-terracotta) 24%, transparent);
}

/* =========================================================================
   Sygnet marki (lotos)
   ====================================================================== */

.jw-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: color-mix(in oklab, var(--brand-terracotta) 16%, var(--cream));
	color: var(--accent);
}

.jw-mark svg {
	width: 28px;
	height: 23px;
}

.jw-footer .jw-mark {
	background: color-mix(in oklab, var(--cream) 12%, transparent);
	color: var(--accent);
}

/* =========================================================================
   Logotyp tekstowy
   ====================================================================== */

.jw-logo {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
}

.jw-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.jw-logo__name {
	font-family: Lora, Georgia, serif;
	font-size: 1.22rem;
	letter-spacing: 0.02em;
	color: var(--forest);
}

.jw-logo__sub {
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}

/* Na bardzo wąskich ekranach (mniej niż ok. 380px) podtytuł logo z dużym
   odstępem liter potrafi być szerszy niż sama nazwa marki — ściągamy
   odstęp, żeby nie pchał nagłówka w poziomą przewijalność. */
@media (max-width: 380px) {
	.jw-logo__sub {
		letter-spacing: 0.1em;
	}
}

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

.jw-footer .jw-logo__sub {
	color: color-mix(in oklab, var(--cream) 55%, transparent);
}

/* Hasło „Przestrzeń inkluzywna” — cienka linia po obu stronach, jak na wizytówce. */
.jw-claim {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1.4rem;
	font-size: 0.66rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--accent);
}

.jw-claim::before,
.jw-claim::after {
	content: "";
	flex: 1;
	max-width: 3.5rem;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.jw-claim--start::before {
	display: none;
}

/* =========================================================================
   Drobne dostrojenia do nowej palety
   ====================================================================== */

.jw-card:hover,
.jw-post-card:hover {
	box-shadow: 0 30px 60px -40px color-mix(in oklab, var(--forest) 55%, transparent);
}

.jw-map {
	box-shadow: 0 40px 80px -50px color-mix(in oklab, var(--forest) 70%, transparent);
}

.jw-tag {
	border-color: color-mix(in oklab, var(--forest) 20%, transparent);
	background: color-mix(in oklab, var(--brand-ivory) 45%, var(--cream));
}

.jw-quote-card::before {
	color: color-mix(in oklab, var(--brand-terracotta) 70%, transparent);
}

.jw-prose blockquote {
	border-left-color: var(--accent);
}

.jw-stars {
	color: var(--brand-terracotta);
}

/* =========================================================================
   Nawigacja — stan aktywny
   ====================================================================== */

.jw-nav-link {
	position: relative;
	color: color-mix(in oklab, var(--forest) 80%, transparent);
	text-decoration: none;
	transition: color 0.25s ease;
}

.jw-nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width 0.3s ease;
}

.jw-nav-link:hover {
	color: var(--forest);
}

.jw-nav-link:hover::after {
	width: 100%;
}

.jw-nav-link.is-current {
	color: var(--accent);
}

.jw-nav-link.is-current::after {
	width: 100%;
	background: var(--accent);
}

.jw-mobile-nav a.is-current {
	color: var(--accent);
}

/* =========================================================================
   Wydruk — pacjent często drukuje cennik albo dane kontaktowe
   ====================================================================== */

@media print {
	.jw-body {
		background: #fff !important;
		color: #000;
		font-size: 11pt;
	}

	header,
	.jw-mobile-nav,
	.jw-mobile-toggle,
	.jw-map,
	.jw-form,
	.jw-cta-band,
	.jw-breadcrumbs,
	.jw-searchform,
	.jw-footer nav,
	#comments {
		display: none !important;
	}

	.jw-section,
	.jw-hero-page {
		padding: 1rem 0 !important;
	}

	.jw-section--forest,
	.jw-footer {
		background: #fff !important;
		color: #000 !important;
	}

	.jw-section--forest .jw-h1,
	.jw-section--forest .jw-h2,
	.jw-footer .jw-logo__name,
	.jw-contact-list .jw-value {
		color: #000 !important;
	}

	.jw-card,
	.jw-quote-card,
	.jw-post-card {
		border: 1px solid #999;
		box-shadow: none !important;
		break-inside: avoid;
	}

	/* Adresy linków przydają się na papierze. */
	.jw-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}

	.jw-faq details {
		break-inside: avoid;
	}

	.jw-faq .jw-faq__answer {
		display: block !important;
	}

	img,
	picture {
		break-inside: avoid;
	}
}

/* =========================================================================
   Baner zgody na cookies
   ====================================================================== */

.jw-consent-bar {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 980;
	background: var(--forest);
	color: color-mix(in oklab, var(--cream) 88%, transparent);
	border-radius: 1.25rem;
	box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.5);
}

.jw-consent-bar[hidden] {
	display: none;
}

.jw-consent-bar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.15rem 1.5rem;
	flex-wrap: wrap;
}

.jw-consent-bar__text {
	flex: 1 1 24rem;
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
}

.jw-consent-bar__text a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.jw-consent-bar__actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.jw-consent-bar__btn {
	padding: 0.7rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--accent);
	color: var(--forest);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 500;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.jw-consent-bar__btn:hover {
	filter: brightness(1.07);
}

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

.jw-consent-bar__btn--ghost:hover {
	background: color-mix(in oklab, var(--cream) 10%, transparent);
}

@media print {
	.jw-consent-bar {
		display: none !important;
	}
}