/* ==========================================================================
   VetNAC — vlastní styly
   ========================================================================== */

:root {
	--vn-dark:   #062e28;
	--vn-teal:   #0d4f47;
	--vn-green:  #9ecb5c;
	--vn-text:   #14312c;
	--vn-muted:  #e8ede9;
	--vn-radius: 8px;
	--vn-gap:    1.5rem;
}

/* Tlačítka ---------------------------------------------------------------- */

.vn-btn {
	display: inline-block;
	padding: 0.875rem 1.375rem;
	border: 2px solid var(--vn-green);
	border-radius: var(--vn-radius);
	background: var(--vn-green);
	color: var(--vn-dark);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.vn-btn:hover,
.vn-btn:focus { opacity: 0.85; }

.vn-btn:focus-visible {
	outline: 3px solid var(--vn-dark);
	outline-offset: 2px;
}

.vn-btn--ghost {
	border-color: var(--vn-teal);
	background: transparent;
	color: var(--vn-teal);
}

/* Karty služeb ------------------------------------------------------------ */
/* Divi modul Blurb — Advanced — CSS Class: vn-service                        */

.vn-service .et_pb_blurb_content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.vn-service .et_pb_blurb_description {
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	text-wrap: pretty;
}

/* Řádek karet — Advanced — CSS Class: vn-services */
.vn-services .et_pb_column { display: flex; }
.vn-services .et_pb_module { width: 100%; }

@media (max-width: 980px) {
	.vn-service .et_pb_blurb_description { font-size: 0.875rem; }
}

/* Nadpisy podstránek služeb ------------------------------------------------ */
/* Divi Text modul s názvem služby — Advanced — CSS Class: vn-title.
   H1 přebírá styl, který měl původní H2 (Poppins 600, #005450, 60/42/24 px). */

.vn-title h1 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: #005450;
	font-size: 60px;
	line-height: 1.2em;
}

@media (max-width: 980px) {
	.vn-title h1 { font-size: 42px; }
}

@media (max-width: 767px) {
	.vn-title h1 { font-size: 24px; }
}

/* Mapa a navigace --------------------------------------------------------- */

.vn-map {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--vn-gap);
}

.vn-map__canvas {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 21.25rem;
	border-radius: var(--vn-radius);
	background: var(--vn-muted);
	overflow: hidden;
}

.vn-map__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vn-map__actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
}

.vn-map__address {
	margin: 0;
	color: var(--vn-text);
	font-weight: 600;
	line-height: 1.5;
}

@media (max-width: 780px) {
	.vn-map { grid-template-columns: 1fr; }
	.vn-map__canvas { min-height: 16rem; }
}

/* Varianta pro úzký sloupec (uvnitř kontaktního boxu) — vše pod sebou */
.vn-map--stack { grid-template-columns: 1fr; }
.vn-map--stack .vn-map__canvas { min-height: 16rem; }

/* Sekce „O mně" — fotka má na desktopu záměrný přesah (-10vw), na mobilu
   by způsobila vodorovný posuv stránky. */
@media (max-width: 980px) {
	.et_pb_image_10 { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Kontaktní box — srovnání svislých mezer:
   1) modul s kotvou #kontakt nemá zabírat místo (levý sloupec pak začíná
      stejně vysoko jako pravý),
   2) řádek s mapou bez horního odsazení (menší mezera pod informacemi). */

.et_pb_code:has(a[name="kontakt"]) {
	height: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.et_pb_row:has(.vn-map) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Kompaktnější box: menší vnitřní odsazení sekce a žádná mezera
   mezi řádkem s informacemi a řádkem s mapou */
.et_pb_section:has(.vn-map) {
	padding-top: 44px;
	padding-bottom: 44px;
}

.et_pb_row:has(a[name="kontakt"]) {
	padding-bottom: 0;
}

/* Full varianta — mapa přes celou šířku, pod ní lišta:
   tlačítka vlevo, platební karty vpravo */

.vn-map--full { display: block; }
.vn-map--full .vn-map__canvas { min-height: 24rem; }

.vn-map__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.25rem;
}

.vn-map--full .vn-map__actions {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.vn-map__cards {
	display: block;
	max-height: 30px;
	width: auto;
	margin-left: auto;
}

@media (max-width: 780px) {
	.vn-map--full .vn-map__canvas { min-height: 18rem; }
	.vn-map__cards { margin-left: 0; }
}

/* Tlačítka pod mapou — stejný vzhled jako plovoucí (pilulka, stín, ikonka).
   Ikonky se přidávají přes ::before s maskou, HTML modulu se nemění. */

.vn-map__actions .vn-btn {
	border: 0;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(6, 46, 40, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

/* Stejné barvy jako plovoucí „Zavolat" — plná teal, bílý text */
.vn-map__actions .vn-btn--ghost {
	background: var(--vn-teal);
	color: #fff;
}

.vn-map__actions .vn-btn:hover,
.vn-map__actions .vn-btn:focus {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(6, 46, 40, 0.24);
}

.vn-map__actions .vn-btn::before {
	content: "";
	display: inline-block;
	width: 1.125em;
	height: 1.125em;
	margin-right: 0.5rem;
	vertical-align: -0.2em;
	background-color: currentColor;
	-webkit-mask: var(--vn-icon) no-repeat center / contain;
	mask: var(--vn-icon) no-repeat center / contain;
}

/* První tlačítko (plné) = navigace, ghost = telefon */
.vn-map__actions .vn-btn {
	--vn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4.5 20.3l.7.7L12 18l6.8 3 .7-.7L12 2z'/%3E%3C/svg%3E");
}

.vn-map__actions .vn-btn--ghost {
	--vn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* Jemný overlay mapy — vinětka + linka, neblokuje ovládání mapy */
.vn-map__canvas::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow:
		inset 0 0 0 1px rgba(6, 46, 40, 0.10),
		inset 0 16px 32px -16px rgba(6, 46, 40, 0.30);
	background: linear-gradient(180deg, rgba(6, 46, 40, 0.06), rgba(6, 46, 40, 0) 30%);
}

/* Ikona blurbu „Napište mi zprávu" — stejný kroužek jako ostatní kontakty
   (Divi pro nový modul nevygeneroval padding/pozadí ikonky) */

.et_pb_blurb:has(a[data-vn-form-open]) .et-pb-icon {
	padding: 8px !important;
	border-radius: 100%;
	background-color: rgba(0, 39, 37, 0.1);
	font-size: 18px !important;
	color: #002725 !important;
}

/* …a stejná typografie/barvy jako u sousedních položek (E-mail, Telefon…) —
   Divi pro ručně vložený modul negeneruje per-modulové styly */

.et_pb_blurb:has(a[data-vn-form-open]) .et_pb_module_header {
	color: #002725 !important;
	font-family: 'Work Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.2em;
	font-weight: 500;
}

.et_pb_blurb:has(a[data-vn-form-open]) .et_pb_blurb_description,
.et_pb_blurb:has(a[data-vn-form-open]) .et_pb_blurb_description a {
	color: #002725 !important;
	font-family: 'Poppins', Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6em;
	text-decoration: none;
}

/* Modal s kontaktním formulářem -------------------------------------------- */
/* Formulář (.vn-form) a nadpis (.vn-form-title) jsou v layoutu skryté,
   JS je přesune do modalu. Otevírá [data-vn-form-open]. */

.vn-form,
.vn-form-title { display: none; }

.vn-modal .vn-form,
.vn-modal .vn-form-title { display: block; }

.vn-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(6, 46, 40, 0.55);
}

.vn-modal[hidden] { display: none; }

.vn-modal__card {
	position: relative;
	width: min(640px, 100%);
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 15px;
	padding: 2rem;
	box-shadow: 0 24px 64px rgba(6, 46, 40, 0.35);
}

.vn-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--vn-muted);
	color: var(--vn-dark);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.vn-modal__close:hover,
.vn-modal__close:focus { background: var(--vn-green); }

/* Vše v modalu zarovnané na jednu levou hranu — reset Divi odsazení modulů */
.vn-modal .et_pb_module {
	width: 100%;
	margin: 0;
	padding: 0;
}

.vn-modal .vn-form-title .et_pb_text_inner { padding: 0; }

.vn-modal .vn-form-title h2 {
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: 28px;
	color: #005450;
}

body.vn-modal-open { overflow: hidden; }

/* Titulek nekoliduje s křížkem a vše sedí na jedné levé hraně */
.vn-modal__body { padding-top: 0.25rem; }
.vn-modal .vn-form-title { padding-right: 2.5rem; }

/* Formulář v modalu — vlastní styl. (Divi pravidla vázaná na
   `body #page-container …` po přesunu do modalu neplatí.) */

.vn-modal .et_pb_contact_form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem;
}

.vn-modal .et_pb_contact_field {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.vn-modal .et_pb_contact_field:not(.et_pb_contact_field_half) { grid-column: 1 / -1; }

.vn-modal .input {
	width: 100%;
	padding: 0.875rem 1.125rem;
	border: 1px solid rgba(6, 46, 40, 0.15);
	border-radius: 10px;
	background: #f4f8f6;
	color: var(--vn-text);
	font-size: 16px;
	line-height: 1.4;
}

.vn-modal .input:focus {
	outline: 2px solid var(--vn-green);
	outline-offset: 1px;
	background: #fff;
}

.vn-modal textarea.input {
	min-height: 140px;
	resize: vertical;
}

.vn-modal .et_contact_bottom_container {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	float: none;
	margin: 0.25rem 0 0;
}

.vn-modal .et_pb_contact_right p {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.vn-modal .et_pb_contact_captcha {
	width: 4.5rem;
	text-align: center;
}

.vn-modal .et_pb_contact_captcha_question {
	font-weight: 600;
	color: var(--vn-text);
}

.vn-modal .et_pb_contact_submit {
	margin: 0;
	padding: 0.875rem 1.625rem;
	border: 0;
	border-radius: 999px;
	background: var(--vn-green);
	color: var(--vn-dark);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.vn-modal .et_pb_contact_submit:hover,
.vn-modal .et_pb_contact_submit:focus { opacity: 0.85; }

.vn-modal .et-pb-contact-message {
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.vn-modal .et-pb-contact-message ul {
	padding: 0;
	list-style: none;
}

@media (max-width: 560px) {
	.vn-modal .et_pb_contact_form { grid-template-columns: 1fr; }
	.vn-modal .et_contact_bottom_container {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.vn-modal__card { padding: 1.5rem 1.25rem; }
}

/* Jednotná barva nadpisů ---------------------------------------------------- */
/* Světlé karty a toggly měly šedomodrou #2a3749 / tmavou #002725 — sjednoceno
   na brandovou zelenou. Tmavé karty (bílý text) se nemění. */

.et_pb_blurb:not(.et_pb_bg_layout_dark) .et_pb_module_header,
.et_pb_blurb:not(.et_pb_bg_layout_dark) .et_pb_module_header a,
.et_pb_toggle .et_pb_toggle_title {
	color: #005450 !important;
}

/* Jemné animace ------------------------------------------------------------ */
/* Řádky se objevují posunem zdola; výchozí skrytí platí jen s html.vn-anim
   (přidává JS), takže bez JS je vše normálně vidět. */

html.vn-anim .vn-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

html.vn-anim .vn-reveal.vn-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.vn-anim .vn-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Hover karet služeb -------------------------------------------------------- */

.vn-services .et_pb_column {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

.vn-services .et_pb_column:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(6, 46, 40, 0.2);
}

.vn-service .et-pb-icon,
.vn-service .et_pb_main_blurb_image img {
	transition: transform 0.25s ease;
}

.vn-services .et_pb_column:hover .et-pb-icon,
.vn-services .et_pb_column:hover .et_pb_main_blurb_image img {
	transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.vn-services .et_pb_column,
	.vn-service .et-pb-icon,
	.vn-service .et_pb_main_blurb_image img { transition: none; }
	.vn-services .et_pb_column:hover { transform: none; }
}

/* Patička ------------------------------------------------------------------ */

#et-footer-nav { background: var(--vn-dark); }

#et-footer-nav .bottom-nav {
	padding: 1.375rem 0;
	text-align: center;
}

#et-footer-nav .bottom-nav a {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 500;
	transition: color 0.2s ease;
}

#et-footer-nav .bottom-nav a:hover,
#et-footer-nav .bottom-nav li.current-menu-item a { color: var(--vn-green); }

#footer-bottom {
	background: #04211d;
	padding: 0.875rem 0;
}

#footer-bottom .container { text-align: center; }

#footer-info {
	float: none;
	color: rgba(255, 255, 255, 0.45);
}

#footer-info a { color: rgba(255, 255, 255, 0.65); }

/* Plovoucí tlačítka (vpravo dole, viditelná při scrollování) ---------------- */

.vn-fab {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.625rem;
}

.vn-fab__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8125rem 1.125rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(6, 46, 40, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vn-fab__btn:hover,
.vn-fab__btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(6, 46, 40, 0.34);
}

.vn-fab__btn:focus-visible {
	outline: 3px solid var(--vn-dark);
	outline-offset: 2px;
}

.vn-fab__btn--nav  { background: var(--vn-green); color: var(--vn-dark); }
.vn-fab__btn--call { background: var(--vn-teal);  color: #fff; }
.vn-fab__btn--msg  { background: #fff; color: var(--vn-teal); }

.vn-fab__btn svg {
	width: 1.125em;
	height: 1.125em;
	flex: none;
}

/* Na malých telefonech jen kulaté ikony, ať nezavazí obsahu */
@media (max-width: 480px) {
	.vn-fab__btn span { display: none; }
	.vn-fab__btn { padding: 0.9375rem; }
}