/* ==========================================================================
   Visiting Apartments — tokeny, baza, typografia, przyciski
   Źródło wartości: claude/visiting-apartments/design-spec.md (§2–§5)
   ========================================================================== */

:root {
	/* Kolory (aliasy presetów theme.json) */
	--va-base: var(--wp--preset--color--base, #E6E1DB);
	--va-surface: var(--wp--preset--color--surface, #EDE9E4);
	--va-field: var(--wp--preset--color--field, #FFFFFF);
	--va-contrast: var(--wp--preset--color--contrast, #141414);
	--va-contrast-hover: #3A3A3A;
	--va-muted: var(--wp--preset--color--muted, #8C8781);
	--va-line: var(--wp--preset--color--line, #6F6B67);
	--va-on-photo: var(--wp--preset--color--on-photo, #F4F1EC);
	--va-error: #9B2C2C;

	/* Typografia */
	--va-font: var(--wp--preset--font-family--archivo, "Archivo", "Helvetica Neue", Arial, sans-serif);
	--va-stretch: 112%;
	--va-fs-tiny: 10px;
	--va-fs-small: 13px;
	--va-fs-base: var(--wp--preset--font-size--base, 14px);
	--va-fs-medium: var(--wp--preset--font-size--medium, 20px);
	--va-fs-large: var(--wp--preset--font-size--large, 44px);
	--va-ls: 0.02em;
	--va-ls-caps: 0.06em;
	--va-ls-nav: 0.08em;

	/* Layout */
	--va-sidebar-w: clamp(320px, 20vw, 400px);   /* XD: ~20% szerokości ekranu, przy lewej krawędzi */
	--va-sidebar-pad: clamp(104px, 6.4vw, 128px);
	--va-gutter: clamp(88px, 5vw, 104px);
	--va-logo-size: clamp(34px, 2.25vw, 44px);
	--va-nav-fs: clamp(13px, .75vw, 15px);
	--va-nav-gap: clamp(19px, 1.3vw, 25px);
	--va-content-w: 1250px;
	--va-top: 100px;          /* oddech nad logo i przyciskiem REZERWUJ */
	--va-btn-h: 40px;
	--va-mbar-h: 64px;
	--va-page-pad: 20px;       /* padding boczny na mobile */
	--va-measure-narrow: 360px;
	--va-measure-text: 560px;
	--va-section-gap: clamp(64px, 6vw, 100px);

	/* Kształty i ruch */
	--va-radius-btn: 10px;
	--va-ease: cubic-bezier(.2, .6, .2, 1);
	--va-t-fast: 200ms;
	--va-t-mid: 250ms;
	--va-t-slow: 400ms;
}

/* --------------------------------------------------------------------------
   Baza
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--va-base);
	color: var(--va-contrast);
	font-family: var(--va-font);
	font-stretch: var(--va-stretch);
	font-size: var(--va-fs-base);
	line-height: 1.6;
	letter-spacing: var(--va-ls);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Bez kursywy w całym projekcie */
em, i, cite, dfn, var { font-style: normal; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

::selection { background: var(--va-contrast); color: var(--va-base); }

p { margin: 0 0 24px; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 24px;
	font-weight: 400;
	font-stretch: var(--va-stretch);
	letter-spacing: var(--va-ls-caps);
	text-transform: uppercase;
	line-height: 1.6;
	font-size: var(--va-fs-base);
}
h3 {
	font-size: var(--va-fs-medium);
	line-height: 1.3;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--va-t-fast) var(--va-ease);
}
a:hover { color: var(--va-muted); }

:focus-visible {
	outline: 2px solid var(--va-contrast);
	outline-offset: 3px;
}

hr, .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--va-line);
	margin: var(--va-section-gap) 0;
	opacity: 1;
}

/* Treść edytora: zachowujemy wąskie łamy projektu */
.va-prose,
.va-content .wp-block-post-content > p,
.va-content .wp-block-post-content > ul,
.va-content .wp-block-post-content > ol {
	max-width: var(--va-measure-text);
}

/* --------------------------------------------------------------------------
   Typografia — klasy pomocnicze
   -------------------------------------------------------------------------- */

.va-caps {
	text-transform: uppercase;
	letter-spacing: var(--va-ls-caps);
}
.va-title-md {
	font-size: var(--va-fs-medium);
	line-height: 1.3;
	letter-spacing: var(--va-ls-caps);
	text-transform: uppercase;
	font-weight: 400;
}
.va-title-hero {
	font-size: var(--va-fs-large);
	line-height: 1.15;
	letter-spacing: .01em;
	font-weight: 300;
	text-transform: none;
}
.va-meta { font-size: var(--va-fs-small); line-height: 1.4; }
.va-tiny {
	font-size: var(--va-fs-tiny);
	text-transform: uppercase;
	letter-spacing: var(--va-ls-caps);
	line-height: 1.6;
}
.va-narrow { max-width: var(--va-measure-narrow); }

/* --------------------------------------------------------------------------
   Przyciski  .va-btn  (+ blok Przycisk z edytora)
   -------------------------------------------------------------------------- */

.va-btn,
.wp-element-button,
.wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--va-btn-h);
	padding: 0 32px;
	border: 1px solid var(--va-contrast);
	border-radius: var(--va-radius-btn);
	background: transparent;
	color: var(--va-contrast);
	font-family: var(--va-font);
	font-stretch: var(--va-stretch);
	font-size: var(--va-fs-small);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--va-ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--va-t-fast) var(--va-ease), color var(--va-t-fast) var(--va-ease), border-color var(--va-t-fast) var(--va-ease);
}
.va-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--va-contrast);
	color: var(--va-base);
}

.va-btn--solid {
	background: var(--va-contrast);
	color: #fff;
}
.va-btn--solid:hover {
	background: var(--va-contrast-hover);
	border-color: var(--va-contrast-hover);
	color: #fff;
}

.va-btn--light {
	background: #EEEAE5;
}

.va-btn--done,
.va-btn[aria-disabled="true"] {
	pointer-events: none;
}

.va-btn--sm {
	min-height: 32px;
	padding: 0 16px;
	font-size: 12px;
}

.va-btn--wide { min-width: 172px; }
.va-btn--block { display: flex; width: 100%; }

.va-link-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--va-fs-small);
	font-weight: 700;
	letter-spacing: var(--va-ls-caps);
	text-transform: uppercase;
	text-decoration: none;
}
.va-link-back:hover { text-decoration: underline; color: var(--va-contrast); }

/* --------------------------------------------------------------------------
   Dostępność
   -------------------------------------------------------------------------- */

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

.va-skip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--va-contrast);
	color: #fff;
	font-size: var(--va-fs-small);
	text-decoration: none;
	transform: translateY(-200%);
}
.va-skip:focus { transform: none; color: #fff; }
/* wpautop w bloku shortcode potrafi owinąć markup w <p> z marginesem → przesunięcie całej strony o 24px */
.va-skipwrap { height: 0; }
.va-sidebar-part > p,
.va-topbar-part > p { margin: 0; }

.va-icon { display: block; flex: none; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.va-404 { max-width: var(--va-measure-text); }
.va-404__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }