/* =========================================================
   Teplo — design system
   =========================================================
   Single source of truth for vertical rhythm, backgrounds,
   the card component and the corner-radius scale.

   The theme grew in two layers (legacy `theme.minified.css` and
   the newer `section-*.css` files), which produced slightly
   different paddings, four near-identical light greys and five
   different card radii. This file is loaded after every section
   stylesheet and normalises those values instead of rewriting
   the vendored bundles.

   Tokens are plain custom properties so a child theme can
   override any of them without touching selectors.
   ========================================================= */

:root {
	/* Vertical rhythm */
	--teplo-space-section: 70px;
	--teplo-space-section-lg: 140px;
	--teplo-space-heading: 60px;

	/* Section backgrounds: two values, alternated by PHP */
	--teplo-bg-plain: #ffffff;
	--teplo-bg-tint: #f8f9f9;

	/* Card component */
	--teplo-card-bg: #ffffff;
	--teplo-card-border: 1px solid rgba(0, 0, 0, .06);
	--teplo-card-radius: 12px;
	--teplo-card-shadow: 0 2px 12px rgba(0, 0, 0, .07);
	--teplo-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, .12);

	/* Corner radii — one scale: small / medium / pill */
	--teplo-radius-sm: 6px;
	--teplo-radius-md: 12px;
	--teplo-radius-pill: 999px;

	/* Control heights — one scale for every button and submit control.
	   The large variant no longer grows taller; it only gets a slightly
	   larger type scale and more horizontal padding, so a submit button
	   in a form can never look smaller than a CTA next to it. */
	--teplo-control-h: 40px;
	--teplo-control-h-lg: 40px;

	/* Text fields — one look everywhere (theme + bundled form plugin).
	   #717171 on white is 4.84:1, so the field boundary itself passes
	   WCAG 1.4.11 (3:1) without relying on a shadow. */
	--teplo-input-bg: #ffffff;
	--teplo-input-border: #717171;
	--teplo-input-radius: var(--teplo-radius-sm);
	--teplo-input-shadow: none;
	--teplo-input-color: #1a2535;
	--teplo-input-placeholder: #6b7280;
}

/* =========================================================
   1. Vertical rhythm
   =========================================================
   Every content section uses the same block padding. Two
   intentional exceptions remain:
   - `.section-padding-larger` (video band) — 140px accent;
   - hero / map / slider — full-bleed, no block padding. */

.onepage-section.section-padding:not(.section-inverse):not(.section-inverse-extended) {
	padding-top: var(--teplo-space-section);
	padding-bottom: var(--teplo-space-section);
}

.section-padding-larger {
	padding-top: var(--teplo-space-section-lg);
	padding-bottom: var(--teplo-space-section-lg);
}

/* Heading block keeps the same distance to the content in every
   section (the about section used to override it to 30px). */
.onepage-section .section-title-area {
	margin-bottom: var(--teplo-space-heading);
}

/* =========================================================
   2. Section backgrounds
   =========================================================
   PHP assigns `section-meta` to alternating sections (see
   teplo_get_section_background_plan()), so the light/tinted
   rhythm survives any drag & drop order chosen in the
   Customizer. Dark bands and CTA paint their own background. */

.onepage-section.section-padding:not(.section-inverse):not(.section-inverse-extended):not(.section-cta) {
	background-color: var(--teplo-bg-plain);
}

.onepage-section.section-padding.section-meta:not(.section-inverse):not(.section-inverse-extended):not(.section-cta) {
	background-color: var(--teplo-bg-tint);
}

/* CTA fallback colour when no background image is configured. */
.section-cta {
	background-color: var(--teplo-bg-tint);
}

/* =========================================================
   3. Card component
   =========================================================
   One look for every boxed item: services, projects, pricing,
   testimonials, contact panels. Flat sections (features, team,
   clients, counter) intentionally stay card-free — they are a
   media/text pattern, not a card. */

/* `.onepage-section` keeps these selectors one step above the
   legacy per-section rules (`.section-services .service-item` etc.)
   while still winning by load order, so every card really shares
   the same shadow. */
.onepage-section .service-item,
.onepage-section .project-item,
.onepage-section .pricing-plan,
.onepage-section .contact-info-card,
.onepage-section .contact-form-panel {
	background-color: var(--teplo-card-bg);
	border: var(--teplo-card-border);
	border-radius: var(--teplo-card-radius);
	box-shadow: var(--teplo-card-shadow);
}

/* One hover/focus behaviour for every card: the same shadow token and the
   same 6px lift. Sections may add their own inner motion, but the box
   itself always looks identical. */
.onepage-section .service-item:hover,
.onepage-section .service-item:focus-within,
.onepage-section .project-item:hover,
.onepage-section .project-item:focus-within,
.onepage-section .pricing-plan:hover,
.onepage-section .pricing-plan:focus-within,
.onepage-section .contact-info-card:hover,
.onepage-section .contact-info-card:focus-visible,
.onepage-section .contact-form-panel:hover,
.onepage-section .contact-form-panel:focus-within {
	box-shadow: var(--teplo-card-shadow-hover);
	transform: translateY(-6px);
}

/* The featured plan keeps its emphasis, but in the brand colour
   instead of the Bootstrap blue it inherited. */
.onepage-section .pricing-plan--featured {
	border-color: rgba(0, 0, 0, .1);
	box-shadow: 0 10px 32px rgba(0, 0, 0, .14);
}

.onepage-section .pricing-plan--featured:hover {
	transform: scale(1.04) translateY(-4px);
}

@supports (color: color-mix(in srgb, red, blue)) {
	.onepage-section .pricing-plan--featured {
		border-color: color-mix(in srgb, var(--teplo-primary, #03c4eb) 45%, transparent);
		box-shadow: 0 10px 32px color-mix(in srgb, var(--teplo-primary, #03c4eb) 20%, transparent);
	}
}

/* =========================================================
   4. Brand colour in the "modern" layer
   =========================================================
   These rules used to be hard-coded Bootstrap blue (#0275d8),
   so parts of the page ignored the owner's primary colour.
   Contrast-safe shades come from dynamic-css.php. */

.pricing-plan--featured .pricing-header {
	background: var(--teplo-primary, #03c4eb);
}

.plan-features li::before {
	color: var(--teplo-primary, #03c4eb);
}

/* Normal-size text needs 4.5:1, so it uses the link shade
   (computed against #f8f9f9) instead of the large-text shade. */
.project-category,
.project-title a:hover {
	color: var(--teplo-primary-link, #027288);
}

.testimonial-content::before {
	color: var(--teplo-primary, #03c4eb);
}

/* Secondary text stays neutral, exactly as in the carousel layout. */
.testimonials-grid .author-position {
	color: rgba(0, 0, 0, .6);
}

/* =========================================================
   5. Controls
   =========================================================
   Every text field shares one appearance: white fill, a visible
   1px outline and the brand colour on focus. The legacy layer
   painted fields #f2f2f2 with an inset shadow and no border,
   which gave low-vision users no boundary at all (the fill is
   1.1:1 against white) and clashed with the form plugin's
   outlined fields. */

/* One box for every button on the site: 50px tall, 13px uppercase
   label, 6px radius — the metrics the gallery and reviews CTAs use.
   Colours stay untouched; only the geometry is normalised here. */
.btn {
	box-sizing: border-box;
	border-radius: 6px;
	min-height: 50px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.04em;
}

.btn-lg {
	min-height: 50px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 13px;
	font-size: 0.8125rem;
}

/* Core block buttons (the gallery and reviews CTAs are bare
   .wp-block-button__link anchors) keep the same box. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 50px;
	padding: 0 30px;
	border-radius: 6px;
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

@media screen and (max-width: 640px) {
	.btn,
	.btn-lg,
	.wp-block-button__link,
	body form input[type="submit"]:not(.btn),
	body form button[type="submit"]:not(.btn) {
		min-height: 46px;
		padding-left: 22px;
		padding-right: 22px;
		font-size: 12px;
	}
}

/* Bare submit controls (comment form, search form, 404 search) are not
   `.btn` elements, so they used to keep the legacy `input[type=submit]`
   metrics — 15px/23px padding, a 13px line box and a 2px radius — and
   ended up a different height from every other button. They now share the
   `.btn` height, typography and radius.
   `:not(.btn)` leaves plugin buttons that already carry `.btn .btn-lg`
   (the feedback form) on the large scale instead of shrinking them.
   The `form` ancestor keeps slider dots, which are also
   `button[type=submit]`, out of this rule. */
body form input[type="submit"]:not(.btn),
body form button[type="submit"]:not(.btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 30px;
	border: 1.5px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: var(--teplo-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	cursor: pointer;
	transition: background-color .22s ease, transform .18s ease, box-shadow .22s ease;
}

body form input[type="submit"]:not(.btn):hover,
body form input[type="submit"]:not(.btn):focus,
body form button[type="submit"]:not(.btn):hover,
body form button[type="submit"]:not(.btn):focus {
	background-color: var(--teplo-primary-hover);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

/* `body` and `:not(.editor-post-title__input)` are not decorative:
   the legacy bundle styles `input[type=...]` and
   `textarea:not(.editor-post-title__input)`, and `:not()` carries
   the class specificity, so a plain `textarea` selector could never
   win. These selectors are one step above it and the file loads
   last, which is what makes the normalisation deterministic. */
body input[type="text"],
body input[type="search"],
body input[type="email"],
body input[type="url"],
body input[type="tel"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body input[type="time"],
body input[type="datetime-local"],
body input[type="month"],
body input[type="week"],
body textarea:not(.editor-post-title__input),
body select {
	background-color: var(--teplo-input-bg);
	border: 1px solid var(--teplo-input-border);
	border-radius: var(--teplo-input-radius);
	box-shadow: var(--teplo-input-shadow);
	color: var(--teplo-input-color);
}

body input[type="text"]::placeholder,
body input[type="search"]::placeholder,
body input[type="email"]::placeholder,
body input[type="url"]::placeholder,
body input[type="tel"]::placeholder,
body input[type="password"]::placeholder,
body input[type="number"]::placeholder,
body textarea:not(.editor-post-title__input)::placeholder {
	color: var(--teplo-input-placeholder);
	opacity: 1;
}

/* Focus: the border takes the brand colour and a soft ring repeats
   it. The transparent outline stays visible in forced-colors mode. */
body input[type="text"]:focus,
body input[type="search"]:focus,
body input[type="email"]:focus,
body input[type="url"]:focus,
body input[type="tel"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="time"]:focus,
body input[type="datetime-local"]:focus,
body input[type="month"]:focus,
body input[type="week"]:focus,
body textarea:not(.editor-post-title__input):focus,
body select:focus {
	border-color: var(--teplo-primary, #03c4eb);
	box-shadow: 0 0 0 3px rgba(3, 196, 235, .22);
	outline: 2px solid transparent;
	outline-offset: 1px;
}

@supports (color: color-mix(in srgb, red, blue)) {
	body input[type="text"]:focus,
	body input[type="search"]:focus,
	body input[type="email"]:focus,
	body input[type="url"]:focus,
	body input[type="tel"]:focus,
	body input[type="password"]:focus,
	body input[type="number"]:focus,
	body input[type="date"]:focus,
	body input[type="time"]:focus,
	body input[type="datetime-local"]:focus,
	body input[type="month"]:focus,
	body input[type="week"]:focus,
	body textarea:not(.editor-post-title__input):focus,
	body select:focus {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--teplo-primary, #03c4eb) 22%, transparent);
	}
}

/* =========================================================
   6. Search form and 404 page
   =========================================================
   The legacy search field kept 10px vertical padding while the
   submit control now uses the 40px control height, so the two
   halves of the same form were different heights. The field is
   aligned to the shared height and keeps its 15px inner padding.

   On the 404 page the message, the "back home" button and the
   search form were stacked with zero gaps, and the search form
   stretched across the full container while every other block
   is centred and narrow. Both are fixed here. */

.search-form .search-field {
	height: var(--teplo-control-h);
	padding-top: 0;
	padding-bottom: 0;
}

.error-404 {
	padding-top: 24px;
	padding-bottom: 48px;
}

.error-404__content {
	margin-bottom: 28px;
}

.error-404__actions {
	margin-bottom: 32px;
}

.error-404__search {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.error-404__search .search-form {
	margin-bottom: 0;
}

/* Back link — «Назад» on content pages and «Назад на головну» on the 404.
   One shared style: minimal grey uppercase label with an animated
   underline that turns brand green on hover/focus. */
.tpb-back-wrap {
	display: flex;
	justify-content: center;
	padding: 34px 0 38px;
}

a.tpb-back,
a.tpb-back:link,
a.tpb-back:visited {
	position: relative;
	display: inline-block;
	padding: 0 4px 7px;
	color: #8e8e8e;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .3s ease;
}

a.tpb-back::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: #d7d7d7;
	transform: translateX(-50%) scaleX(.42);
	transform-origin: center;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), background-color .35s ease;
}

a.tpb-back:hover,
a.tpb-back:focus {
	color: #3caa28;
	text-decoration: none;
}

a.tpb-back:hover::after,
a.tpb-back:focus::after {
	background: #3caa28;
	transform: translateX(-50%) scaleX(1);
}

@media (max-width: 640px) {
	.tpb-back-wrap {
		padding: 28px 0 32px;
	}

	a.tpb-back {
		font-size: 10.5px;
		letter-spacing: .18em;
	}
}

/* Reviews: initials avatar used when a testimonial has no photo. */
.author-avatar--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #eef7e9;
	color: #3caa28;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	user-select: none;
}
/* Hero buttons: keep the flex centring on mobile. The theme forces
   display:inline-block below 768px, which pushes the label 16px above centre. */
.hero-content-style1 .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}