/*
 * HClinic design system - 1/7 foundation
 * Tokens, base typography, focus, motion. Loaded after The7, WPBakery, Ultimate Addons and
 * Fluent Forms (see hclinic-ui-polish.php), so plain selectors win on source order.
 *
 * Breakpoints follow The7's own header switches: desktop nav >= 1051px, mobile bar <= 778px.
 * Contrast (WCAG): blue-primary on white 4.94:1 (AA text); blue-vivid on white 4.09:1, so it is
 * for accents, borders and large text only, never for small button labels.
 */

:root {
	/* Colour */
	--hc-navy-deep: #0a192f;
	--hc-blue-primary: #1e73be;
	--hc-blue-primary-dark: #175a98;
	--hc-blue-vivid: #0284c7;
	--hc-blue-surface: #f0f9ff;
	--hc-slate-text: #1e293b;
	--hc-slate-muted: #64748b;
	--hc-border-subtle: #e2e8f0;
	--hc-field-border: #7c8ca1; /* 3.4:1 on white - form field edges must reach 3:1 (WCAG 1.4.11) */
	--hc-card-bg: #ffffff;
	--hc-page-bg: #f8fafc;
	--hc-alert: #b42318;
	--hc-alert-surface: #fef3f2;

	/* Shape */
	--hc-radius-sm: 8px;
	--hc-radius-md: 14px;
	--hc-radius-lg: 20px;
	--hc-radius-pill: 9999px;

	/* Elevation */
	--hc-shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);
	--hc-shadow-card:
		0 10px 25px -5px rgba(15, 23, 42, .04),
		0 8px 10px -6px rgba(15, 23, 42, .02);
	--hc-shadow-hover:
		0 20px 30px -10px rgba(2, 132, 199, .18),
		0 10px 10px -5px rgba(2, 132, 199, .04);

	/* Motion */
	--hc-ease-standard: cubic-bezier(.2, .7, .2, 1);
	--hc-duration-fast: 160ms;
	--hc-duration-normal: 260ms;

	/* Type: Roboto is what The7 already loads (Cyrillic included); no extra font request. */
	--hc-font: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--hc-text-sm: .875rem;
	--hc-text-base: 1rem;
	--hc-text-lg: 1.125rem;
	--hc-h1: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
	--hc-h2: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	--hc-h3: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);

	/* Spacing (4px base) and layout */
	--hc-space-1: .25rem;
	--hc-space-2: .5rem;
	--hc-space-3: .75rem;
	--hc-space-4: 1rem;
	--hc-space-5: 1.5rem;
	--hc-space-6: 2rem;
	--hc-space-7: 3rem;
	--hc-space-8: 4.5rem;
	--hc-gutter: clamp(1rem, 4vw, 1.5rem);
	--hc-reading-width: 46rem;
	--hc-tap: 44px;
}

/* ---- Base ------------------------------------------------------------------------------ */

body,
#page {
	background-color: var(--hc-page-bg);
}

body {
	color: var(--hc-slate-text);
	font-family: var(--hc-font);
	font-size: var(--hc-text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: rgba(30, 115, 190, .18);
}

/* ---- Headings: one hierarchy for every template ---------------------------------------- */

#main h1,
#main h2,
#main h3,
#main h4,
#main .uvc-heading h1,
#main .uvc-heading h2,
#main .uvc-heading h3 {
	color: var(--hc-navy-deep);
	font-family: var(--hc-font);
	font-weight: 700;
	letter-spacing: -.015em;
	text-wrap: balance;
}

#main h1,
#main .uvc-heading h1 {
	font-size: var(--hc-h1);
	line-height: 1.15;
}

#main h2,
#main .uvc-heading h2 {
	font-size: var(--hc-h2);
	line-height: 1.25;
}

#main h3,
#main .uvc-heading h3 {
	font-size: var(--hc-h3);
	line-height: 1.3;
}

#main h4 {
	font-size: var(--hc-text-lg);
	line-height: 1.35;
}

/* Section headings built with Ultimate Addons: keep the accent line, drop the loud weight. */
#main .uvc-heading .uvc-heading-spacer {
	opacity: .9;
}

/* ---- Section rhythm ---------------------------------------------------------------------
   Dead space on price and service pages came from stacked sources: row margins, 35px element
   margins, explicit 32px spacers (often two in a row), an inline margin-top:50px on headings and
   empty <p>&nbsp;</p> lines. One rule per source, so a section is separated by one 2rem gap.
   Rows that carry a custom WPBakery class (their own padding/background) or the full-width
   stretch are left alone. */

#content .wpb-content-wrapper > .vc_row.wpb_row:not([data-vc-full-width]):not([class*="vc_custom_"]) {
	margin-top: 0;
	margin-bottom: var(--hc-space-6);
}

/* A row that only introduces a section (heading, divider, spacer) sits close to the content it
   introduces: one small gap, and its spacers add nothing. */
#content .wpb-content-wrapper > .vc_row.wpb_row:not([data-vc-full-width]):not([class*="vc_custom_"]):has(.uvc-heading):not(:has(.aio-icon-component, .wpb_text_column, table, .shortcode-single-image, .dt-btn, .btn-modal, form)) {
	margin-bottom: var(--hc-space-4);
}

#content .wpb-content-wrapper > .vc_row.wpb_row:has(.uvc-heading):not(:has(.aio-icon-component, .wpb_text_column, table, .shortcode-single-image, .dt-btn, .btn-modal, form)) .vc_empty_space {
	display: none;
}

/* Spacer elements: never taller than 1.5rem, and a second one in a row adds nothing. */
#content .vc_empty_space {
	max-height: 1.5rem;
}

#content .vc_empty_space + .vc_empty_space {
	display: none;
}

/* Section headings (Ultimate Addons): title anchored to what follows it. The saved markup puts
   margin-top:50px on the h2 and margin-bottom:30px on the chevron divider inline. */
#content .uvc-heading {
	margin-bottom: var(--hc-space-4);
}

#content .uvc-heading .uvc-main-heading :is(h1, h2) {
	margin: 0 0 .5rem;
}

#content .uvc-heading h2[style*="margin-top"] {
	margin-top: 0 !important;
}

#content .uvc-heading .uvc-heading-spacer.line_with_icon {
	margin-bottom: var(--hc-space-3) !important;
}

/* Decorative rules directly under a heading repeat what the heading divider already says. */
#content .uvc-heading + .hr-thin,
#content .uvc-heading:has(h1) + .vc_separator {
	display: none;
}

/* Kicker: a small tracked label above a title. Only drawn when a page defines --hc-kicker, so
   no page gets invented text by default. Add a page with one line, e.g.
     .page-id-123 #content .uvc-heading:has(h1) { --hc-kicker: "Label"; } */
#content .uvc-heading::before {
	content: var(--hc-kicker, none);
	display: block;
	margin-bottom: .5rem;
	color: var(--hc-blue-primary);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.page-id-2046 #content .uvc-heading:has(h1) { --hc-kicker: "Вартість послуг"; }
.page-id-2980 #content .uvc-heading:has(h1) { --hc-kicker: "Стоимость услуг"; }

/* ---- Links ----------------------------------------------------------------------------- */

#main a {
	transition: color var(--hc-duration-fast) var(--hc-ease-standard),
		background-color var(--hc-duration-fast) var(--hc-ease-standard),
		border-color var(--hc-duration-fast) var(--hc-ease-standard);
}

/* ---- Keyboard focus: always visible, never colour-only ---------------------------------- */

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid var(--hc-blue-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(30, 115, 190, .18);
}

/* ---- Motion: purposeful, and off when asked --------------------------------------------- */

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