/**
 * Chotynia — globalne style (front + iframe edytora).
 * Wspólne elementy sekcji: nadtytuł, nagłówek, akapit, przyciski, linki, ryciny, herb w tle
 * oraz stany animacji wejścia (sterowane przez assets/js/fx.js).
 * Wartości 1:1 z exportu Claude Design (Dwor Chotynia A v5) — clampy w vw tak jak w designie.
 */

:root {
	--ch-bg: var(--wp--preset--color--background, #f6f1e8);
	--ch-surface: var(--wp--preset--color--surface, #f8f4ec);
	--ch-sand: var(--wp--preset--color--sand, #ece4d6);
	--ch-ink: var(--wp--preset--color--ink, #2e2420);
	--ch-ink-deep: var(--wp--preset--color--ink-deep, #1e1714);
	--ch-text: var(--wp--preset--color--text, #4f443c);
	--ch-label: var(--wp--preset--color--label, #5b4f46);
	--ch-caption: var(--wp--preset--color--caption, #6e6158);
	--ch-muted: var(--wp--preset--color--muted, #7a6d62);
	--ch-accent: var(--wp--preset--color--accent, #7b2733);
	--ch-accent-dark: var(--wp--preset--color--accent-dark, #5c1a24);
	--ch-cream: var(--wp--preset--color--cream, #fbf7f0);
	--ch-on-dark: var(--wp--preset--color--on-dark, #f3ebe1);
	--ch-on-dark-soft: var(--wp--preset--color--on-dark-soft, #e3d6c8);
	--ch-rose: var(--wp--preset--color--rose, #d9b3a3);
	--ch-line: var(--wp--preset--color--line, #d8ccb8);
	--ch-line-strong: var(--wp--preset--color--line-strong, #d1c4ae);
	--ch-line-input: var(--wp--preset--color--line-input, #bcae98);
	--ch-display: var(--wp--preset--font-family--display, "Cormorant Garamond", Georgia, serif);
	--ch-serif: var(--wp--preset--font-family--serif, "Lora", Georgia, serif);
	--ch-sans: var(--wp--preset--font-family--sans, "Hanken Grotesk", system-ui, sans-serif);
	--ch-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--ch-gutter: clamp(20px, 4vw, 56px);
	--ch-section-y: clamp(56px, 6.5vw, 104px);
	/* wysokość dolnego paska mobilnego (blok inquiry ustawia ją ≤600px) */
	--ch-bar-h: 0px;
	--ch-bar-core: 0px; /* dolny pasek BEZ safe-area – do wysokości hero (env() zmienia się w Safari przy chowaniu paska → skok) */
}

/* Fokus po dotyku/kliknięciu bez obwódki (klasa z assets/js/fx.js); pola formularzy bez zmian */
.ch-pointer :is(a, button, summary, [tabindex]):focus { outline: none; }

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	/* miejsce na dolny pasek mobilny (blok inquiry) */
	padding-bottom: var(--ch-bar-h);
}

/* Sticky navbar: wrapper template partu nie może być kontenerem sticky (miałby 0 wysokości) */
.wp-site-blocks > header.wp-block-template-part { display: contents; }

/* ── Typografia sekcji ───────────────────────────── */
.ch-eyebrow {
	display: block;
	margin: 0;
	font-family: var(--ch-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ch-accent);
}
.ch-h2 {
	margin: 0;
	font-family: var(--ch-display);
	font-weight: 300;
	font-size: clamp(42px, 4.6vw, 72px);
	line-height: 1;
	color: var(--ch-ink);
	/* WP globalnie daje overflow-wrap:break-word — nagłówków nie łamiemy w środku słowa */
	overflow-wrap: normal;
	word-break: normal;
}
.ch-h2 em,
.ch-h2 i { font-style: italic; }
.ch-text {
	margin: 0;
	font-family: var(--ch-sans);
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--ch-text);
	text-wrap: pretty;
}
.ch-caption {
	display: block;
	margin: 0;
	font-family: var(--ch-display);
	font-style: italic;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ch-caption);
}

/* ── Przyciski ───────────────────────────────────── */
.ch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 19px 30px;
	border: 0;
	border-radius: 0;
	background: var(--ch-accent);
	color: var(--ch-cream);
	font-family: var(--ch-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ch-btn--outline {
	border: 1px solid var(--ch-ink);
	background: transparent;
	color: var(--ch-ink);
}
.ch-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
@media (hover: hover) {
	.ch-btn:hover { background: var(--ch-accent-dark); color: var(--ch-cream); }
	.ch-btn--outline:hover { background: var(--ch-ink); color: var(--ch-cream); }
}

/* Link z podkreśleniem („Dowiedz się więcej") */
.ch-link {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--ch-ink);
	font-family: var(--ch-sans);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ch-ink);
	-webkit-tap-highlight-color: transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.ch-link--light { color: var(--ch-cream); border-color: var(--ch-cream); }
@media (hover: hover) {
	.ch-link:hover { color: var(--ch-accent); border-color: var(--ch-accent); }
	.ch-link--light:hover { color: var(--ch-rose); border-color: var(--ch-rose); }
}

/* Wiersz akcji: przycisk + link */
.ch-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 30px;
}

/* ── Obrazy ──────────────────────────────────────── */
.ch-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ch-frame { overflow: hidden; }
/* Wideo w kadrach (karty, sekcje, tryptyk, galeria): delikatna ciemna maska – klipy z telefonu są jaśniejsze od zdjęć */
video.ch-img { filter: brightness(0.84) saturate(0.95); }
/* Placeholder zamiast brakującego zdjęcia (paski + podpis). */
.ch-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: repeating-linear-gradient(135deg, var(--ch-sand) 0 14px, var(--ch-surface) 14px 28px);
	border: 1px solid var(--ch-line);
}
.ch-ph__label {
	padding: 8px 14px;
	background: var(--ch-surface);
	font: 500 11px/1.4 var(--ch-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ch-caption);
	text-align: center;
}
@media (hover: hover) {
	.ch-frame--zoom .ch-img { transition: transform 1.2s ease; }
	.ch-frame--zoom:hover .ch-img { transform: scale(1.04); }
}

/* ── Ryciny (SVG kreskowe) ───────────────────────── */
.ch-motif,
.ch-engraving {
	display: block;
	max-width: 100%;
	height: auto;
	color: var(--ch-ink);
}
.ch-engraving { width: 100%; }
.ch-motif--laurel { width: 128px; }
.ch-motif--rings { width: 118px; }
.ch-motif--quill { width: 128px; }
.ch-motif--grapes { width: 150px; }
.ch-motif--key { width: 140px; }
.ch-motif--shield { width: 92px; }
.ch-motif--envelope { width: 112px; }

/* Herb jako znak wodny w tle sekcji (rodzic: position:relative; isolation:isolate; overflow:hidden) */
.ch-herb {
	position: absolute;
	z-index: -1;
	aspect-ratio: 700 / 799;
	background: url(../images/logo/herb.png) center / contain no-repeat;
	mix-blend-mode: multiply;
	pointer-events: none;
}

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

/* ── Formularz zapytania (Contact Form 7) — 1:1 z designu; markup pól w szablonie CF7 ──
   Używany przez bloki contact (sekcja) i inquiry (szuflada). Walidacja bez layout shift:
   pole rezerwuje 16px pod komunikat (docs/patterns/forms.md). */
.ch-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--ch-ink);
}
.ch-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0 22px;
}
.ch-form__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
	margin: 0;
	padding-bottom: 16px;
	font-family: var(--ch-sans);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ch-muted);
}
.ch-form__label { display: block; }
/* CF7 daje wrapowi position:relative — komunikat błędu ma się pozycjonować względem pola (.ch-form__field z rezerwą 16px) */
.ch-form .wpcf7-form-control-wrap { display: block; position: static; }
.ch-form__input,
.ch-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ch-form select,
.ch-form textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--ch-line-input);
	border-radius: 0;
	background: transparent;
	font-family: var(--ch-sans);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ch-ink);
	outline: none;
	box-shadow: none;
}
.ch-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ch-form textarea {
	-webkit-appearance: none;
	appearance: none;
}
.ch-form input::placeholder,
.ch-form textarea::placeholder,
.ch-form__input--ph { color: var(--ch-muted); opacity: 1; }
.ch-form textarea,
.ch-form__input--area {
	min-height: 96px;
	resize: none; /* bez uchwytu – dłuższy tekst przewija się w polu */
	overflow-y: auto;
}
.ch-form input:focus-visible,
.ch-form select:focus-visible,
.ch-form textarea:focus-visible { border-bottom-color: var(--ch-accent); }
.ch-form input[type="date"] { color-scheme: light; }
.ch-form input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; }
.ch-form__consent,
.ch-form .wpcf7-acceptance .wpcf7-list-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	font-family: var(--ch-sans);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ch-muted);
}
.ch-form__consent {
	position: relative;
	margin-top: 16px;
	padding-bottom: 18px; /* rezerwa na komunikat zgody (1 linia) */
}
@media (max-width: 600px) {
	.ch-form__consent { padding-bottom: 34px; } /* komunikat łamie się na 2 linie */
}
.ch-form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.ch-form__consent a { color: var(--ch-accent); text-decoration: none; }
.ch-form input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--ch-accent);
}
.ch-form__submit,
.ch-form .wpcf7-submit {
	align-self: flex-start;
	margin-top: 22px;
	padding: 22px 32px;
	letter-spacing: 0.24em;
}
.ch-form .wpcf7-spinner { margin: 0 0 0 12px; }
/* specyficzność > CF7 `.wpcf7 .wpcf7-not-valid-tip` (CSS CF7 ładuje się po theme.css) */
.ch-form .ch-form__field .wpcf7-not-valid-tip,
.ch-form .ch-form__consent .wpcf7-not-valid-tip {
	position: absolute;
	left: 0;
	bottom: -4px;
	font-family: var(--ch-sans);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--ch-accent);
}
.ch-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--ch-accent);
	font-family: var(--ch-sans);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ch-ink);
}
.wpcf7 form.sent .ch-form .wpcf7-response-output {
	border-color: var(--ch-line);
	background: var(--ch-sand);
	font-family: var(--ch-display);
	font-size: 20px;
	line-height: 1.4;
}
/* komunikat CF7 jest poza .ch-form (na końcu <form>); selektory ze stanem — CF7 ma własne
   `.wpcf7 form.invalid .wpcf7-response-output { border-color: #ffb900 }` o wyższej specyficzności */
.wpcf7 form.wpcf7-form .wpcf7-response-output,
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--ch-accent);
	font-family: var(--ch-sans);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--ch-ink);
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--ch-line);
	background: var(--ch-sand);
	font-family: var(--ch-display);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--ch-ink);
}


/* ── Podstrony: wspólne elementy sekcji (1:1 z v7 designu) ───────────────── */
.ch-wrap {
	max-width: 1500px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: var(--ch-section-y) var(--ch-gutter);
}
.ch-wrap--narrow { max-width: 1200px; }
.ch-wrap--flush-top { padding-top: clamp(24px, 3vw, 40px); }
.ch-wrap--flush-bottom { padding-bottom: clamp(32px, 4vw, 56px); }
.ch-wrap--no-top { padding-top: 0; }
.ch-bg--sand { background: var(--ch-sand); }
.ch-bg--dark { background: var(--ch-ink); color: var(--ch-on-dark); }
.ch-head { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ch-head--center { align-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
.ch-h2--s {
	font-size: clamp(40px, 4.4vw, 68px);
	line-height: 1.02;
	text-wrap: balance;
}
.ch-h3 {
	margin: 0;
	font-family: var(--ch-display);
	font-weight: 400;
	font-size: clamp(26px, 2.2vw, 32px);
	line-height: 1.1;
	color: inherit;
}
.ch-small {
	margin: 0;
	font-family: var(--ch-sans);
	font-size: 15.5px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--ch-text);
	text-wrap: pretty;
}
.ch-kicker {
	font-family: var(--ch-sans);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.24em;
	color: var(--ch-accent);
}
.ch-label {
	font-family: var(--ch-sans);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ch-muted);
}
.ch-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(48px, 7vw, 120px);
	align-items: start;
}
.ch-rows { display: flex; flex-direction: column; border-top: 1px solid var(--ch-line); }
.ch-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 20px;
	padding: 15px 0;
	border-bottom: 1px solid var(--ch-line);
}
.ch-row__name { font-family: var(--ch-display); font-size: 21px; line-height: 1.3; }
.ch-row__value {
	font-family: var(--ch-sans);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ch-label);
}
.ch-btn--light { background: var(--ch-cream); color: var(--ch-ink); }
@media (hover: hover) {
	.ch-btn--light:hover { background: var(--ch-rose); color: var(--ch-ink); }
}
.ch-phone {
	font-family: var(--ch-display);
	font-size: 22px;
	color: var(--ch-ink);
	text-decoration: none;
}
@media (hover: hover) {
	.ch-phone:hover { color: var(--ch-accent); }
}
/* ciemne tło: kolory jawnie na elementach */
.ch-bg--dark .ch-eyebrow { color: var(--ch-rose); }
.ch-bg--dark .ch-h2,
.ch-bg--dark .ch-h3,
.ch-bg--dark .ch-row__name { color: var(--ch-on-dark); }
.ch-bg--dark .ch-text,
.ch-bg--dark .ch-small,
.ch-bg--dark .ch-row__value { color: var(--ch-on-dark-soft); }
.ch-bg--dark .ch-label { color: var(--ch-rose); }
.ch-bg--dark .ch-rows,
.ch-bg--dark .ch-row { border-color: rgba(243, 235, 225, 0.22); }
.ch-bg--dark .ch-link { color: var(--ch-cream); border-color: var(--ch-cream); }
.ch-bg--sand .ch-rows,
.ch-bg--sand .ch-row { border-color: #cdbfa9; }

/* Front page: treść pełnej szerokości, bez odstępów WP między sekcjami */
.ch-main { position: relative; }
.ch-main > .wp-block-post-content > * { margin-block: 0; }
.ch-main .ch-anchor-target { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ── Animacje wejścia (1:1 ze skryptu designu; klasę .ch-fx na <html> dodaje fx.js) ──
   Bez JS i przy prefers-reduced-motion klasy nie ma → treść jest po prostu widoczna.
   Opóźnienia przez CSS vary (--d, --dl), nie inline transform — hover zostaje w CSS. */
.ch-fx [data-reveal] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 1.2s var(--ch-ease) var(--d, 0s), transform 1.4s var(--ch-ease) var(--d, 0s);
}
.ch-fx [data-reveal].is-in {
	opacity: 1;
	transform: none;
}
.ch-fx [data-reveal-img] video.ch-img { clip-path: none; }
.ch-fx [data-reveal-img] .ch-img {
	clip-path: inset(100% 0 0 0);
	transform: scale(1.18);
	transition: transform 1.9s var(--ch-ease), clip-path 1.5s var(--ch-ease);
}
.ch-fx [data-reveal-img].is-in .ch-img {
	clip-path: inset(0 0 0 0);
	transform: scale(1);
}
/* po wjeździe (1,9 s) wraca zwykłe przejście — hover zoom działa od razu */
.ch-fx [data-reveal-img].is-done .ch-img {
	clip-path: none;
	transform: none;
	transition: transform 1.2s ease;
}
@media (hover: hover) {
	.ch-fx .ch-frame--zoom[data-reveal-img].is-done:hover .ch-img { transform: scale(1.04); }
}
.ch-fx [data-draw] [data-dl] {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1) var(--dl, 0s);
}
.ch-fx [data-draw].is-in [data-dl] { stroke-dashoffset: 0; }

@keyframes chProg {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes chUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
@keyframes chDown {
	from { transform: translateY(-24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@keyframes chBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ── Strony tekstowe (templates/page.html: polityka prywatności, regulaminy) ── */
.ch-legal {
	max-width: 820px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: clamp(40px, 5vw, 80px) var(--ch-gutter) var(--ch-section-y);
}
.ch-legal__head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-bottom: clamp(28px, 3vw, 40px);
	margin-bottom: clamp(28px, 3vw, 40px);
	border-bottom: 1px solid var(--ch-line);
}
.ch-legal__head .ch-h2 { text-wrap: balance; }
.ch-prose {
	font-family: var(--ch-sans);
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--ch-text);
}
/* .ch-legal podbija specyficzność ponad `:root :where(.is-layout-flow) > *` z global styles (wypisane później) */
.ch-legal .ch-prose > * { margin: 0 0 1.1em; }
.ch-legal .ch-prose > :last-child { margin-bottom: 0; }
.ch-legal .ch-prose h2 {
	margin: 2em 0 0.6em;
	font-family: var(--ch-display);
	font-weight: 400;
	font-size: clamp(28px, 2.6vw, 36px);
	line-height: 1.15;
	color: var(--ch-ink);
}
.ch-legal .ch-prose h3 {
	margin: 1.6em 0 0.5em;
	font-family: var(--ch-sans);
	font-weight: 500;
	font-size: 17px;
	color: var(--ch-ink);
}
.ch-prose ul,
.ch-prose ol { padding-left: 1.3em; }
.ch-prose li { margin-bottom: 0.4em; }
.ch-prose li::marker { color: var(--ch-accent); }
.ch-prose strong { font-weight: 500; color: var(--ch-ink); }
.ch-prose a {
	color: var(--ch-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.ch-prose a[href^="tel:"] { white-space: nowrap; }
@media (hover: hover) {
	.ch-prose a:hover { color: var(--ch-accent-dark); }
}
.ch-prose .ch-prose__meta {
	font-size: 14px;
	color: var(--ch-muted);
}

/* Simple Commenter (uwagi klienta na dev): widget nad dolnym paskiem telefonu */
@media (max-width: 600px) {
	#simple-commenter-modebox-container { bottom: calc(var(--ch-bar-h, 0px) + 12px) !important; }
}