/* ==========================================================================
   Verve Services – custom front-end styles (2026-10-04)
   Loaded by mu-plugins/verve-html-fixes.php after the theme stylesheet.
   (The "Amply – Child theme" is installed but NOT the active theme, so the
   child style.css is never loaded; this file is the reliable place instead.)
   Each block belongs to one change; remove the block to revert it.
   ========================================================================== */

/* [C0] Typography: the theme hard-codes Arial for body text, buttons and form
        fields and uses its own --fontBody variable (= "Work Sans" in theme options)
        only in a few places. Elementor pages already use Work Sans, so blog posts,
        archives, legal pages, 404 and form fields looked different. Unify on Work Sans. */
body,
button,
input,
select,
textarea {
	font-family: var(--fontBody, "Work Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* [C1] Home hero: the first slide title is rendered as <h1> (mu-plugin verve-html-fixes).
        Keep the slider layer look, ignore theme <h1> defaults. */
h1.mwt-elementor-main-slider-layer-2 {
	margin: 0;
	padding: 0;
	text-transform: none;
}

/* [C1b] Projekty: the intro heading was a second <h1>; it is now an <h2> with the
         same look (rule copied from the Customizer CSS for .verve-projects-intro h1). */
.verve-projects-intro h2 {
	margin: 0 0 18px;
	color: #262c31;
	font-size: clamp(40px, 5vw, 66px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.04em;
	text-transform: none;
}

/* [C2] Footer bottom bar: legal links, company identification, copyright
        (one block; mu-plugin verve-html-fixes replaces the theme copyright line). */
#copyright .verve-footer-legal {
	padding: 0.25rem 0 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.7;
}
.verve-footer-legal p {
	margin: 0 0 0.3rem;
}
.verve-footer-legal__links {
	font-size: 0.875rem;
	margin-bottom: 0.65rem !important;
}
.verve-footer-legal__links a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 1px;
}
.verve-footer-legal__links a:hover,
.verve-footer-legal__links a:focus {
	border-bottom-color: var(--colorMain, #a9c200);
	color: var(--colorMain, #a9c200);
}
.verve-footer-legal__company,
.verve-footer-legal__register {
	opacity: 0.75;
}
.verve-footer-legal__copyright {
	margin-top: 0.65rem !important;
	opacity: 0.6;
}
.verve-footer-legal__sep {
	display: inline-block;
	margin: 0 0.5em;
	opacity: 0.5;
}
@media (max-width: 767px) {
	.verve-footer-legal__company .verve-footer-legal__sep {
		display: none;
	}
	.verve-footer-legal__company .verve-footer-legal__item {
		display: block;
	}
	.verve-footer-legal__links a {
		display: inline-block;
		margin: 0.15rem 0;
	}
}

/* [C3] Legal pages (Ochrana osobných údajov, Politika cookies) */
.verve-legal-page {
	max-width: 900px;
	margin: 0 auto;
}
.verve-legal-page h2 {
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
	font-size: 1.5rem;
}
.verve-legal-page h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	font-size: 1.15rem;
}
.verve-legal-page ul {
	padding-left: 1.25rem;
}
.verve-legal-page li {
	margin-bottom: 0.4rem;
}
.verve-legal-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 1.5rem;
	font-size: 0.9rem;
}
.verve-legal-table th,
.verve-legal-table td {
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 0.6rem 0.75rem;
	vertical-align: top;
	text-align: left;
}
.verve-legal-table th {
	background: rgba(0, 0, 0, 0.04);
	font-weight: 600;
}
@media (max-width: 767px) {
	.verve-legal-table,
	.verve-legal-table thead,
	.verve-legal-table tbody,
	.verve-legal-table tr,
	.verve-legal-table th,
	.verve-legal-table td {
		display: block;
		width: 100%;
	}
	.verve-legal-table thead {
		display: none;
	}
	.verve-legal-table tr {
		margin-bottom: 1rem;
		border: 1px solid rgba(0, 0, 0, 0.12);
	}
	.verve-legal-table td {
		border: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	.verve-legal-table td:last-child {
		border-bottom: 0;
	}
}

/* [C4] Contact page: service contacts + branch offices (mu-plugin verve-html-fixes,
        data in mu-plugins/verve-content/contact-branches.html) */
.verve-branches {
	padding: 90px 0 100px;
	background: #fff;
	color: var(--colorFont, #777a7c);
}
.verve-branches .container {
	max-width: 1170px;
}
.verve-branches__head {
	max-width: 760px;
	margin-bottom: 2.5rem;
}
.verve-section-label {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--colorMain, #a9c200);
}
.verve-section-title {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 300;
	line-height: 1.15;
	color: var(--colorDark, #262c31);
}
.verve-section-title strong {
	font-weight: 700;
}
.verve-section-lead {
	margin: 0;
	font-size: 1.05rem;
}
.verve-branches__subtitle {
	margin: 2rem 0 1rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--colorDark, #262c31);
}
.verve-branches__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.verve-branch {
	margin: 0;
	padding: 22px 24px;
	background: var(--colorBackground, #f7f6fb);
	border: 1px solid var(--colorBorder, #dcdcdc);
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.6;
}
.verve-branch p {
	margin: 0 0 0.5rem;
}
.verve-branch p:last-child {
	margin-bottom: 0;
}
.verve-branch__city {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--colorMain, #a9c200);
}
.verve-branch__name {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--colorDark, #262c31);
}
.verve-branch a {
	color: var(--colorDark, #262c31);
	text-decoration: none;
	word-break: break-word;
}
.verve-branch a:hover,
.verve-branch a:focus {
	color: var(--colorMain, #a9c200);
}
.verve-branch--hq {
	border-left: 4px solid var(--colorMain, #a9c200);
}
@media (max-width: 767px) {
	.verve-branches {
		padding: 60px 0 70px;
	}
}

/* [C5] Google Maps placeholder shown until functional-cookie consent (mu-plugin verve-html-fixes) */
.verve-map-consent {
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: var(--colorDark, #262c31);
	color: #fff;
	text-align: center;
}
.verve-map-consent[hidden] {
	display: none;
}
.verve-map-consent__inner {
	max-width: 620px;
}
.verve-map-consent__icon {
	color: var(--colorMain, #a9c200);
	margin-bottom: 12px;
}
.verve-map-consent__title {
	margin: 0 0 10px;
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
}
.verve-map-consent__text {
	margin: 0 0 22px;
	font-size: 0.95rem;
	line-height: 1.6;
	opacity: 0.85;
}
.verve-map-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0 0 18px;
}
.verve-map-consent__btn {
	display: inline-block;
	padding: 12px 26px;
	border: 2px solid var(--colorMain, #a9c200);
	border-radius: 4px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
.verve-map-consent__btn--primary {
	background: var(--colorMain, #a9c200);
	color: var(--colorDark, #262c31);
}
.verve-map-consent__btn:hover,
.verve-map-consent__btn:focus {
	background: #fff;
	border-color: #fff;
	color: var(--colorDark, #262c31);
}
.verve-map-consent__address {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.7;
}
iframe.verve-consent-iframe[hidden] {
	display: none;
}

/* [C6] Legal note under forms (Contact Form 7) */
.verve-form-note {
	margin: 14px 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--colorFont, #777a7c);
}
.verve-form-note a {
	color: inherit;
	text-decoration: underline;
}
.verve-form .form-row.consent-row label {
	font-size: 0.9rem;
	font-weight: 400;
}

/* [C7] Home slider: keep the technician's head in frame on the first slide (customer photo 2026-11-04) */
.main-slider img[src*="verve-sprava-budov-home-2026"] {
	object-position: center 15%;
}
.main-slider img[src*="verve-kominar-home"] {
	object-position: center 30%;
}

/* [C8] Mobile photos (customer feedback 2026-11-05)
        a) Home slider: landscape slides are cropped to a 390×820 portrait window on phones, so keep the
           subject (person / fire equipment) inside the visible part of the photo.
        b) Služby page cards: on phones the description covered most of the photo (image was an absolute
           background behind the text). Stack the card instead: photo on top (4:3), text below on the dark card. */
@media (max-width: 767px) {
	.main-slider img[src*="verve-sprava-budov-home-2026"] {
		object-position: 20% 15%;
	}
	.main-slider img[src*="verve-poziarna-ochrana-home"] {
		object-position: 12% 50%;
	}
	.main-slider img[src*="verve-deratizacia-home"] {
		object-position: 58% 50%;
	}
}
@media (max-width: 680px) {
	.vs-service-grid .vs-service-card {
		display: block;
		min-height: 0;
	}
	.vs-service-grid .vs-service-card img {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: center 30%;
	}
	.vs-service-grid .vs-service-card img[src*="Upratovanie"] {
		object-position: center 72%; /* cleaning robot sits at the bottom of this portrait photo */
	}
	.vs-service-grid .vs-service-card:hover img {
		transform: none;
	}
	.vs-service-grid .vs-service-card:before {
		display: none;
	}
	.vs-service-grid .vs-service-card-content {
		padding: 22px 24px 26px;
	}
	.vs-service-grid .vs-service-card p {
		font-size: 14.5px;
	}
	.vs-service-grid .vs-service-card-arrow {
		top: 14px;
		right: 14px;
		background: rgba(18, 23, 26, 0.55);
	}
}

/* [C9] Service hero with a real photo (customer feedback 2026-11-06: the blurred fill of the composed
        hero images looked smeared on desktop and phones showed only a dark blob).
        Markup in the service page HTML widget (Kominárske služby 6251, Deratizácia 6245):
          <section class="vs-hero vs-hero--photo" style="--vs-hero-pos:…;--vs-hero-pos-m:…">
            <div class="vs-hero-media"><img …></div><div class="vs-hero-content">…</div></section>
        Per-page variables: --vs-hero-pos (object-position ≥851px), --vs-hero-pos-m (phones),
        --vs-hero-pos-t (tablet portrait, falls back to -m), --vs-hero-overlap-m (how far the text panel
        is pulled up over the faded photo bottom on phones).
        ≥851px: solid dark hero, the sharp photo fills the right part and fades into the background
        with a mask (no blur). ≤850px: photo on top, text panel below, photo bottom fades into the panel. */
.vs-page .vs-hero--photo {
	--vs-hero-overlap-m: 120px;
	background: #1c2226;
	background-image: none;
	overflow: hidden;
}
.vs-page .vs-hero--photo .vs-hero-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 52%;
	z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
	mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.vs-page .vs-hero--photo .vs-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: var(--vs-hero-pos, 50% 30%);
}
.vs-page .vs-hero--photo:before {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 26, 30, 0.55) 0, rgba(20, 26, 30, 0) 180px),
		linear-gradient(90deg, rgba(20, 26, 30, 0.6) 30%, rgba(20, 26, 30, 0.25) 55%, rgba(20, 26, 30, 0) 70%);
}
.vs-page .vs-hero--photo .vs-hero-content {
	z-index: 2;
}
@media (min-width: 851px) {
	.vs-page .vs-hero--photo h1 {
		max-width: min(860px, 70%);
	}
	.vs-page .vs-hero--photo .vs-hero-lead {
		max-width: min(720px, 60%);
	}
	.vs-page .vs-hero--photo .vs-tags {
		max-width: 70%;
	}
}
@media (min-width: 851px) and (max-width: 1100px) {
	.vs-page .vs-hero--photo .vs-hero-media {
		width: 58%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
		mask-image: linear-gradient(90deg, transparent 0, #000 26%);
	}
	.vs-page .vs-hero--photo h1 {
		max-width: 64%;
		font-size: clamp(44px, 5.2vw, 60px);
	}
	.vs-page .vs-hero--photo .vs-hero-lead {
		max-width: 56%;
	}
	.vs-page .vs-hero--photo .vs-tags {
		max-width: 64%;
	}
}
@media (max-width: 850px) {
	.vs-page .vs-hero--photo {
		display: block;
		min-height: 0;
	}
	.vs-page .vs-hero--photo .vs-hero-media {
		position: relative;
		width: 100%;
		height: min(120vw, 560px);
		-webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 96%);
		mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 96%);
	}
	.vs-page .vs-hero--photo .vs-hero-media img {
		object-position: var(--vs-hero-pos-m, 50% 20%);
	}
	.vs-page .vs-hero--photo:before {
		background: linear-gradient(180deg, rgba(20, 26, 30, 0.55) 0, rgba(20, 26, 30, 0) 170px);
	}
	.vs-page .vs-hero--photo .vs-hero-content {
		margin-top: calc(-1 * var(--vs-hero-overlap-m));
		padding: 0 0 60px;
	}
}
@media (min-width: 681px) and (max-width: 850px) {
	/* tablet portrait: taller photo, short fade, text panel just below (keeps the face out of the fade) */
	.vs-page .vs-hero--photo .vs-hero-media {
		height: 73vw;
		-webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
	}
	.vs-page .vs-hero--photo .vs-hero-media img {
		object-position: var(--vs-hero-pos-t, var(--vs-hero-pos-m, 50% 20%));
	}
	.vs-page .vs-hero--photo .vs-hero-content {
		margin-top: -40px;
	}
}