/* ==========================================================================
   Zonzani – pastel theme
   Palette is a softened version of the old site's purple #9d80a0 and
   orange #f0b04c (Zon is lavender, Zani is butter-yellow).
   ========================================================================== */

:root {
	/* Brand */
	--zz-lavender: #d9c9e8;
	--zz-lavender-soft: #f1eaf7;
	--zz-lavender-deep: #75598a;   /* text/links on light backgrounds (AA) */
	--zz-plum: #4f3a60;            /* headings, footer, primary button hover */
	--zz-butter: #f9dca4;
	--zz-butter-soft: #fdf2dc;
	--zz-butter-deep: #8a5a12;

	/* Status */
	--zz-mint: #cdebd8;
	--zz-mint-soft: #e9f6ee;
	--zz-mint-deep: #2f6b47;
	--zz-peach: #f8d3c3;
	--zz-peach-deep: #8f4127;
	/* Status colours: pastel, each its own hue (red, pink, periwinkle, turquoise; butter or
	   lavender = looking for a home, mint = adopted). */
	--zz-sky: #b9ecef;             /* trial adoption: turquoise */
	--zz-sky-soft: #e8f8f9;
	--zz-sky-deep: #0e5c63;
	--zz-rose: #ffc4e5;            /* with a foster carer: pink */
	--zz-rose-deep: #9b1d6a;
	--zz-quarantine: #ffbcb5;      /* in quarantine: red */
	--zz-quarantine-soft: #fff0ee;
	--zz-quarantine-ink: #9b1c1c;
	--zz-reserved: #cbcdfb;        /* reserved: periwinkle */
	--zz-reserved-soft: #efefff;
	--zz-reserved-ink: #3532a0;

	/* Neutrals */
	--zz-cream: #fffaf3;
	--zz-white: #ffffff;
	--zz-ink: #3b3740;
	--zz-ink-soft: #6c6672;
	--zz-line: #ece4dc;

	/* Type */
	--zz-font-heading: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
	--zz-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Shape */
	--zz-radius: 26px;
	--zz-radius-sm: 14px;
	--zz-shadow: 0 2px 4px rgba(117, 89, 138, 0.05), 0 10px 30px rgba(117, 89, 138, 0.10);
	--zz-container: 1200px;
	--zz-gutter: clamp(16px, 4vw, 32px);
	/* Coloured panels (homepage hero and band, the top section of inner pages): as wide as
	   the content column on desktop, a small margin from the screen edge on phones. */
	--zz-panel-width: min(calc(100% - 2 * clamp(8px, 2vw, 24px)), calc(var(--zz-container) - 2 * var(--zz-gutter)));
	--zz-panel-pad: clamp(16px, 5vw, 64px);
}

/* Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--zz-cream);
	color: var(--zz-ink);
	font-family: var(--zz-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--zz-font-heading);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--zz-ink);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a { color: var(--zz-lavender-deep); text-underline-offset: 3px; }
a:hover { color: var(--zz-ink); }

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

:focus-visible {
	outline: 3px solid var(--zz-lavender-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.skip-link {
	position: absolute;
	left: 16px; top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--zz-ink);
	color: var(--zz-white);
	border-radius: var(--zz-radius-sm);
}
.skip-link:focus { top: 16px; }

.container {
	width: 100%;
	max-width: var(--zz-container);
	margin-inline: auto;
	padding-inline: var(--zz-gutter);
}
.container--narrow { max-width: 780px; }

/* Buttons & pills
   ========================================================================== */

.button,
.wp-element-button,
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.75em 1.5em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--zz-lavender);
	color: var(--zz-ink);
	font: 700 1rem/1.2 var(--zz-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.button:hover,
.wpcf7-submit:hover { background: var(--zz-butter); color: var(--zz-ink); transform: translateY(-2px); }

.button--ghost { background: transparent; border-color: var(--zz-lavender); }
.button--ghost:hover { background: var(--zz-lavender-soft); }
.button--primary { background: var(--zz-lavender-deep); color: var(--zz-white); }
.button--primary:hover { background: var(--zz-plum); color: var(--zz-white); }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
}
.pill {
	padding: 0.45em 1.1em;
	border-radius: 999px;
	background: var(--zz-white);
	border: 2px solid var(--zz-line);
	color: var(--zz-ink);
	font-weight: 700;
	text-decoration: none;
}
.pill:hover { border-color: var(--zz-lavender); }
.pill.is-active { background: var(--zz-lavender); border-color: var(--zz-lavender); }
.pill--adopted { margin-left: auto; }
.pill--adopted.is-active { background: var(--zz-mint); border-color: var(--zz-mint); }

/* Status badges */
.badge {
	display: inline-block;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
}
.badge--isce-dom  { background: var(--zz-butter); color: var(--zz-butter-deep); }
.badge--karantena { background: var(--zz-quarantine); color: var(--zz-quarantine-ink); }
.badge--poskusna-oddaja { background: var(--zz-sky); color: var(--zz-sky-deep); }
.badge--zacasni-skrbnik { background: var(--zz-rose); color: var(--zz-rose-deep); }
.badge--rezerviran { background: var(--zz-reserved); color: var(--zz-reserved-ink); }
.badge--oddan     { background: var(--zz-mint);   color: var(--zz-mint-deep); }

/* Info bar above the header: office hours and contact
   ========================================================================== */

.info-bar { background: var(--zz-lavender-deep); color: var(--zz-white); font-size: 0.88rem; line-height: 1.4; }
.info-bar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding-block: 8px; }
.info-bar p { margin: 0; }
.info-bar b { color: var(--zz-butter); }
.info-bar a { color: var(--zz-white); font-weight: 700; text-decoration: none; }
.info-bar a:hover { text-decoration: underline; }
/* Phone with a small handset icon */
.info-bar__phone {
	padding-left: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f9dca4'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") left center / 14px no-repeat;
}
@media (max-width: 600px) {
	/* Phones: the tappable number first and larger, then information hours, emergencies
	   and visits in smaller text; the e-mail is in the footer. */
	.info-bar { font-size: 0.8rem; }
	.info-bar__inner { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
	.info-bar__contact { order: -1; }
	.info-bar__phone { font-size: 1.05rem; padding-left: 22px; background-size: 16px; }
	.info-bar__email { display: none; }
}

/* Phone numbers in content, linked by the theme (inc/phone-links.php) */
a.tel { white-space: nowrap; font-weight: 700; }

/* Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 250, 243, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--zz-line);
}
.admin-bar .site-header { top: 32px; }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 84px;
}

.site-logo img,
.custom-logo { width: auto; max-height: 64px; }

.primary-nav__list,
.primary-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav__list { display: flex; gap: 4px; }
.primary-nav__list > li { position: relative; }
.primary-nav__list a {
	display: block;
	white-space: nowrap; /* text and the submenu chevron stay on one line */
	padding: 0.5em 1em;
	border-radius: 999px;
	color: var(--zz-ink);
	font-weight: 700;
	text-decoration: none;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a { background: var(--zz-lavender-soft); }
/* Small chevron after items with a submenu */
.primary-nav__list > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	margin: 0 0 3px 8px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0.5;
}

.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 8px;
	background: var(--zz-white);
	border-radius: var(--zz-radius-sm);
	box-shadow: var(--zz-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all 0.15s ease;
}
.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu,
.primary-nav__list li.is-clicked > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.nav-toggle {
	display: none;
	width: 48px; height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--zz-lavender-soft);
	cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 20px; height: 2px;
	margin: auto;
	background: var(--zz-ink);
	border-radius: 2px;
	transition: transform 0.2s ease;
	content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Elementor's global button style (.elementor-kit-… button: padding 14px 28px, pill)
   applies to every <button> and stretched the round burger into an oval. */
.site-header .nav-toggle {
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	background: var(--zz-lavender-soft);
	color: var(--zz-ink);
	font-size: 0;
	line-height: 0;
}
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus { background: var(--zz-lavender); }

/* Below 1100 px the logo, five menu items and "Doniraj" don't fit on one line:
   the menu goes behind the burger. */
@media (max-width: 1100px) {
	.nav-toggle { display: block; }
	.primary-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		display: none;
		padding: 12px var(--zz-gutter) 24px;
		background: var(--zz-cream);
		border-bottom: 1px solid var(--zz-line);
	}
	.primary-nav.is-open { display: block; }
	.primary-nav__list { flex-direction: column; }
	.primary-nav__list .sub-menu {
		position: static;
		display: none;
		flex-basis: 100%;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none;
		background: transparent;
		padding: 0 0 4px 16px;
	}
	/* Folded submenus (main.js): the link, then a chevron button, then the submenu */
	.primary-nav__list .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
	.primary-nav__list > .menu-item-has-children > a { flex: 1; }
	.primary-nav__list > .menu-item-has-children > a::after { display: none; }
	.primary-nav__list .is-expanded > .sub-menu { display: block; }
	.site-header .sub-toggle {
		display: block;
		flex: none;
		position: relative;
		width: 44px; height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--zz-ink);
		cursor: pointer;
	}
	.site-header .sub-toggle:hover,
	.site-header .sub-toggle:focus { background: var(--zz-lavender-soft); }
	.sub-toggle::before {
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		width: 8px; height: 8px;
		margin: -6px 0 0 -4px;
		border: solid currentColor;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}
	.sub-toggle[aria-expanded="true"]::before { margin-top: -2px; transform: rotate(225deg); }
}
/* The parent's own page (Kontakt) is the first submenu item on desktop too, like in the burger menu. */
@media (min-width: 1101px) {
	.site-header .sub-toggle { display: none; }
}
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

/* "Doniraj" button in the header */
.button--butter { background: var(--zz-butter); }
.button--butter:hover { background: var(--zz-lavender); }
.primary-nav { margin-left: auto; }
.site-header__cta { flex: none; padding: 0.6em 1.3em; }
.site-header .site-logo { flex: none; } /* never squeezed by the menu */
@media (max-width: 1100px) {
	.site-header__cta { margin-left: auto; order: 2; }
	.nav-toggle { order: 3; }
}
@media (max-width: 400px) {
	.site-header__cta { padding: 0.5em 1em; font-size: 0.9rem; }
	.site-logo img, .custom-logo { max-height: 52px; }
}

/* Hero (animal list)
   ========================================================================== */

.hero {
	background: linear-gradient(135deg, var(--zz-lavender-soft) 0%, var(--zz-butter-soft) 100%);
	border-radius: 0 0 48px 48px;
	margin-bottom: 40px;
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 32px;
	padding-block: 48px;
}
.hero__lead { font-size: 1.2rem; color: var(--zz-ink-soft); max-width: 34ch; }
.hero__mascot { max-height: 280px; width: auto; justify-self: center; }

@media (max-width: 720px) {
	.hero__inner { grid-template-columns: 1fr; text-align: center; padding-block: 32px; }
	.hero__lead { margin-inline: auto; }
	.hero__mascot { max-height: 180px; }
}

/* Cards
   ========================================================================== */

.animal-grid,
.post-grid,
.zza-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	margin-bottom: 40px;
}
.zza-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.zza-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 900px) {
	.zza-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.zza-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Card: the photo sits inset in the card (10px frame), rounded on its own */
.card {
	padding: 10px;
	background: var(--zz-white);
	border-radius: var(--zz-radius);
	box-shadow: var(--zz-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(117, 89, 138, 0.18); }

.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:hover { color: inherit; }

.card__media {
	position: relative;
	aspect-ratio: 1;
	border-radius: 18px;
	overflow: hidden;
	background: var(--zz-lavender-soft);
}
/* .card prefix outranks Elementor's `.elementor img { height: auto }`. */
.card .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card .card__media .card__placeholder { object-fit: contain; padding: 15%; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.card__media .badges { position: absolute; top: 12px; left: 12px; right: 12px; }

.card__body { padding: 14px 10px 6px; }
.card__title { font-size: 1.45rem; margin: 0; }
.card__meta { margin: 0; color: var(--zz-ink-soft); font-size: 0.95rem; }
.card__excerpt { margin: 0.5em 0 0; color: var(--zz-ink-soft); }

/* Animal cards: tinted by species, details as chips, round arrow */
.card--animal { background: var(--zz-butter-soft); }
.card--animal.card--pes { background: var(--zz-lavender-soft); }
.card--animal.card--ostalo { background: var(--zz-mint-soft); }
.card--animal .card__media { background: var(--zz-white); }
.card--animal .card__body { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.chip {
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: var(--zz-white);
	color: var(--zz-ink-soft);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.5;
}
.card__go {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--zz-white);
	color: var(--zz-lavender-deep);
	font-weight: 800;
	transition: background-color 0.15s ease;
}
.card--animal:hover .card__go { background: var(--zz-butter); }
.card--animal.card--pes:hover .card__go { background: var(--zz-lavender); }
.card--pes .badge--isce-dom { background: var(--zz-lavender); color: var(--zz-plum); }

.card--oddan .card__media img:not(.card__placeholder) { filter: saturate(0.85); }

/* Animal profile
   ========================================================================== */

.animal__header {
	background: linear-gradient(160deg, var(--zz-lavender-soft), var(--zz-cream) 70%);
	padding-block: 40px 56px;
	margin-bottom: 40px;
}
.animal--isce-dom .animal__header { background: linear-gradient(160deg, var(--zz-butter-soft), var(--zz-cream) 70%); }
.animal--oddan .animal__header    { background: linear-gradient(160deg, #e6f5ec, var(--zz-cream) 70%); }

.animal__header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.animal__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--zz-radius);
	box-shadow: var(--zz-shadow);
}
.animal__photo .mascot { object-fit: contain; box-shadow: none; background: var(--zz-white); padding: 10%; }

.animal__name { margin-top: 0.3em; }

.animal__note {
	padding: 14px 18px;
	border-radius: var(--zz-radius-sm);
	/* Default: quarantine */
	background: var(--zz-quarantine);
	color: var(--zz-quarantine-ink);
	font-weight: 600;
}
.animal__note--happy { background: var(--zz-mint); color: var(--zz-mint-deep); }

.facts {
	display: grid;
	/* Wide enough for "DATUM NAJDBE" / "KRAJ NAJDBE" on one line */
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	margin: 24px 0;
}
.facts__item {
	padding: 12px 16px;
	background: var(--zz-white);
	border-radius: var(--zz-radius-sm);
}
.facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zz-ink-soft); white-space: nowrap; }
.facts dd { margin: 0; font-weight: 700; font-size: 1.1rem; overflow-wrap: break-word; }
/* Size: a row of five dogs growing in size, the dog's own size in plum (the words are for
   screen readers only). Sized to fit a normal box at the height of one line of text. */
.facts__item--size dd { display: flex; align-items: flex-end; }
.size-scale { display: flex; align-items: flex-end; gap: 5px; height: 1.65em; }
.size-scale__dog { height: calc(10px + var(--step) * 4px); width: auto; aspect-ratio: 4 / 3; color: var(--zz-lavender); }
.size-scale__dog.is-current { color: var(--zz-plum); }
.size-scale__star { margin-left: 4px; }

/* "* Pri mladičih…" under the facts: pulled up to the grid, which keeps its bottom margin below */
.facts:has(+ .facts__note) { margin-bottom: 8px; }
.facts__note { margin: 0 0 24px; color: var(--zz-ink-soft); font-size: 0.85rem; }
@media (max-width: 380px) {
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facts dt { letter-spacing: 0.02em; }
}

.animal__notes {
	margin: 0 0 16px;
	padding: 14px 18px;
	border-radius: var(--zz-radius-sm);
	background: var(--zz-white);
}
.animal__notes p { margin: 0.25em 0 0; }
.animal__id { font-size: 0.95rem; color: var(--zz-ink-soft); }
.animal__cta { justify-content: flex-start; margin-top: 8px; }

.animal__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 16px;
	margin-bottom: 40px;
}
.animal__gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--zz-radius-sm);
	box-shadow: var(--zz-shadow);
	transition: transform 0.2s ease;
}
.animal__gallery a:hover img { transform: scale(1.02); }

/* Photo viewer (assets/js/main.js): the main photo and the extra photos open large over the page. */
.animal__photo-link { display: block; cursor: zoom-in; }
.animal__photo-link img { transition: transform 0.2s ease; }
.animal__photo-link:hover img { transform: scale(1.01); }
.animal__gallery a { cursor: zoom-in; }
.zz-no-scroll { overflow: hidden; }
.zz-viewer {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 56px clamp(8px, 7vw, 88px);
	border: 0;
	background: rgba(35, 27, 42, 0.94);
	box-sizing: border-box;
}
.zz-viewer[open] { display: grid; place-items: center; }
.zz-viewer::backdrop { background: rgba(35, 27, 42, 0.94); }
.zz-viewer__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--zz-radius-sm);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	user-select: none;
}
.zz-viewer__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0 0 4px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--zz-plum);
	font: 700 2rem/1 var(--zz-font-body);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.zz-viewer__btn:hover { background: var(--zz-white); }
.zz-viewer__btn:focus-visible { outline: 3px solid var(--zz-butter); outline-offset: 2px; }
.zz-viewer__close { top: 12px; right: 12px; }
.zz-viewer__prev, .zz-viewer__next { top: 50%; transform: translateY(-50%); }
.zz-viewer__prev { left: 12px; }
.zz-viewer__next { right: 12px; }
.zz-viewer--single .zz-viewer__prev, .zz-viewer--single .zz-viewer__next { display: none; }
.zz-viewer__count {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: var(--zz-white);
	font-weight: 700;
	pointer-events: none; /* Full width: on phones it lies over the ‹ › buttons, which must get the taps. */
}
/* Phones: arrows lower down, next to the counter, so they don't cover the photo. */
@media (max-width: 600px) {
	.zz-viewer { padding: 60px 8px 76px; }
	.zz-viewer__prev, .zz-viewer__next { top: auto; bottom: 8px; transform: none; }
	.zz-viewer__prev { left: 16px; }
	.zz-viewer__next { right: 16px; }
	.zz-viewer__count { bottom: 22px; }
}

.animal__content { margin-bottom: 32px; }
.animal__footer { margin-bottom: 64px; }

@media (max-width: 800px) {
	.animal__header-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* Entries (pages, posts)
   ========================================================================== */

.entry { padding-block: 48px 64px; }
.entry__meta { color: var(--zz-ink-soft); font-size: 0.95rem; }
.entry__image img { border-radius: var(--zz-radius); margin-bottom: 32px; }
.entry__content > * + * { margin-top: 1em; }
.entry__content img { border-radius: var(--zz-radius-sm); }
.entry__content blockquote {
	margin-inline: 0;
	padding: 20px 24px;
	background: var(--zz-lavender-soft);
	border-radius: var(--zz-radius-sm);
}

.page-header { padding-block: 48px 24px; }

/* Pagination */
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 56px; }
.page-numbers {
	min-width: 44px;
	padding: 0.5em 0.9em;
	border-radius: 999px;
	background: var(--zz-white);
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	color: var(--zz-ink);
}
.page-numbers.current { background: var(--zz-lavender); }

/* Empty state & 404
   ========================================================================== */

.empty-state {
	padding-block: 48px 72px;
	text-align: center;
	color: var(--zz-ink-soft);
}
.empty-state .mascot { max-width: 260px; margin: 0 auto 24px; }
.empty-state--404 h1 { margin-top: 0.2em; }

/* Footer
   ========================================================================== */

.site-footer {
	position: relative;
	margin-top: 120px;
	padding-top: 40px;
	background: var(--zz-plum);
	color: #e8def0;
}
.wave--top {
	position: absolute;
	top: -59px; left: 0;
	width: 100%; height: 60px;
	fill: var(--zz-plum);
}
.site-footer a { color: var(--zz-white); }
.site-footer__logo { display: inline-block; padding: 10px 14px; border-radius: 16px; background: var(--zz-white); }
.site-footer__logo img { max-height: 48px; width: auto; }
.site-footer .footer-widget__title { color: var(--zz-butter); }
/* First footer widget is "Uradne ure": its text in a soft box */
.site-footer__widgets > .footer-widget:first-child .textwidget {
	display: inline-block;
	padding: 12px 16px;
	border-radius: var(--zz-radius-sm);
	background: rgba(255, 255, 255, 0.1);
}
.site-footer .footer-widget h5 { color: var(--zz-butter); font-size: 0.95rem; margin: 0.7em 0 0; }
.site-footer .footer-widget h5:first-child { margin-top: 0; }
.site-footer .footer-phone { font: 800 1.25rem/1.3 var(--zz-font-heading); text-decoration: none; }
.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 3fr;
	gap: 48px;
	align-items: start;
	padding-bottom: 32px;
}
.site-footer__brand p { margin: 12px 0 0; }
/* Facebook link: white pill with the "f" mark */
.site-footer .site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 6px 16px 6px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--zz-white);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.site-footer .site-footer__social::before {
	content: "f";
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--zz-white);
	color: #1877f2;
	font: 800 1.1rem/1 var(--zz-font-heading);
}
.site-footer .site-footer__social:hover { background: rgba(255, 255, 255, 0.2); color: var(--zz-butter); }
.site-footer .site-footer__social { white-space: nowrap; }
@media (max-width: 900px) {
	/* Brand block is a grid there (text left, Bravo right): the link gets its own row */
	.site-footer .site-footer__social { grid-column: 1 / -1; justify-self: start; }
	.site-footer__logo { justify-self: start; }
}
.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.footer-widget__title { font-size: 1.15rem; margin-bottom: 0.4em; }
.footer-widget p { margin: 0 0 0.8em; }
.footer-widget h5 { font-size: 0.95rem; margin: 0.6em 0 0.1em; }
.footer-widget .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-widget .menu a { color: var(--zz-white); font-weight: 700; text-decoration: none; }
.footer-widget .menu a:hover { color: var(--zz-butter); }
.site-footer__mascot { max-width: 200px; margin-top: 20px; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.9rem;
}
.site-footer__bottom p { margin: 0; }
.footer-nav { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }

@media (max-width: 900px) {
	.site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.site-footer__brand { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
	.site-footer__mascot { max-width: 140px; margin: 0; grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 600px) {
	.site-footer__widgets { grid-template-columns: 1fr; gap: 24px; }
	.site-footer__bottom { flex-direction: column; }
}

/* Forms (Contact Form 7)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	padding: 0.7em 1em;
	border: 2px solid var(--zz-line);
	border-radius: var(--zz-radius-sm);
	background: var(--zz-white);
	font: inherit;
	color: inherit;
}
input:focus,
select:focus,
textarea:focus { border-color: var(--zz-lavender); outline: none; }

/* Contact Form 7 forms (Kontakt, Prijava izgubljene živali) are laid out with
   <table> rows of two cells. Turned into a grid: two columns on desktop, one on
   phones; label above its field; section headers ("PODATKI O ŽIVALI") as headings. */
.wpcf7 table { width: 100%; border-collapse: collapse; margin: 0; }
.wpcf7 table,
.wpcf7 tbody,
.wpcf7 th,
.wpcf7 td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.wpcf7 tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border: 0; background: none; }
.wpcf7 th,
.wpcf7 td[colspan] { grid-column: 1 / -1; }
.wpcf7 th p {
	margin: 18px 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--zz-lavender-soft);
	color: var(--zz-lavender-deep);
	font: 800 0.85rem/1.3 var(--zz-font-body);
	letter-spacing: 0.06em;
}
.wpcf7 table:first-of-type th p { margin-top: 4px; }
.wpcf7 td p { margin: 0; font-weight: 700; font-size: 0.95rem; }
.wpcf7 td .wpcf7-form-control-wrap { display: block; margin: 6px 0 16px; font-weight: 400; }
.wpcf7 textarea { height: 11em; resize: vertical; }

/* "Vrsta živali": options as pills in one row */
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.5em 1em;
	border: 2px solid var(--zz-line);
	border-radius: 999px;
	background: var(--zz-white);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wpcf7 .wpcf7-list-item label:hover { border-color: var(--zz-lavender); }
.wpcf7 .wpcf7-list-item label:has(input:checked) { border-color: var(--zz-lavender-deep); background: var(--zz-lavender-soft); }
.wpcf7 .wpcf7-list-item input { width: auto; margin: 0; accent-color: var(--zz-lavender-deep); }

/* File upload: the browser's button as a small pill */
.wpcf7 input[type="file"] { font: inherit; font-size: 0.9rem; font-weight: 400; color: var(--zz-ink-soft); }
.wpcf7 input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 0.5em 1.1em;
	border: 2px solid var(--zz-lavender);
	border-radius: 999px;
	background: var(--zz-white);
	color: var(--zz-ink);
	font: 700 0.9rem/1.2 var(--zz-font-body);
	cursor: pointer;
}
.wpcf7 input[type="file"]::file-selector-button:hover { background: var(--zz-lavender-soft); }
.wpcf7 .wpcf7-submit { margin-top: 4px; }
.wpcf7 .wpcf7-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
/* While a form sends (main.js): a moving bar and a line of text under the send button */
.zz-sending { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin: 12px 0 0; }
.zz-sending[hidden], .zz-sending__bar[hidden] { display: none; }
.zz-sending__bar { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--zz-lavender-soft); overflow: hidden; }
.zz-sending__bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: var(--zz-lavender-deep); animation: zz-sending 1.2s ease-in-out infinite; }
.zz-sending__text { color: var(--zz-ink-soft); font-size: 0.9rem; font-weight: 400; }
@keyframes zz-sending { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .zz-sending__bar span { animation-duration: 3s; } }

@media (max-width: 600px) {
	.wpcf7 tr { grid-template-columns: 1fr; }
}

/* Elementor: let full-width pages breathe */
.elementor-page .site-main > .elementor { margin-bottom: 0; }

/* Content pieces used on Elementor pages (text-editor / html widgets)
   ========================================================================== */

/* Numbered steps with round lavender counters */
.zz-steps {
	list-style: none;
	counter-reset: zz-step;
	margin: 0;
	padding: 0;
}
.zz-steps > li {
	position: relative;
	counter-increment: zz-step;
	padding: 0 0 22px 56px;
}
.zz-steps > li::before {
	content: counter(zz-step);
	position: absolute;
	left: 0; top: -2px;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--zz-lavender);
	font: 700 1.1rem/38px var(--zz-font-heading);
	text-align: center;
}
.zz-steps ul { margin: 0.5em 0; padding-left: 1.2em; }

/* Label / value table (bank details, price list) */
.zz-table { width: 100%; border-collapse: collapse; }
.zz-table th,
.zz-table td { padding: 12px 0; border-bottom: 1px solid var(--zz-line); text-align: left; vertical-align: top; }
.zz-table tr:last-child th,
.zz-table tr:last-child td { border-bottom: 0; }
.zz-table th { padding-right: 16px; color: var(--zz-ink-soft); font-weight: 600; }
.zz-table td { overflow-wrap: anywhere; }

.zz-small { margin-top: 0.75em; font-size: 0.9rem; color: var(--zz-ink-soft); }

/* Icon lists (Kontakt details): Elementor makes every link in an item a flex box (for whole-item links),
   which put a link inside the text on a line of its own. Keep it inline, and line a multi-line item's
   icon up with its first line. */
.elementor-widget .elementor-icon-list-item .elementor-icon-list-text a { display: inline; }
.elementor-widget .elementor-icon-list-item:has(.elementor-icon-list-text br) { align-items: flex-start; }
.elementor-widget .elementor-icon-list-item:has(.elementor-icon-list-text br) .elementor-icon-list-icon { margin-top: 0.3em; }

/* Responsive map / video embed */
.zz-embed {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--zz-radius);
	overflow: hidden;
	box-shadow: var(--zz-shadow);
	background: var(--zz-lavender-soft);
}
.zz-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Route map on "Kako do nas": a static OpenStreetMap image (no Google embed, no cookies) and the
   "Odpri navigacijo" button, which opens the visitor's own maps app. */
.zz-map { margin: 0; }
/* .elementor prefix: Elementor resets border-radius and box-shadow on every img */
.elementor .zz-map img,
.zz-map img { width: 100%; height: auto; border-radius: var(--zz-radius); box-shadow: var(--zz-shadow); }
.zz-map figcaption { margin-top: 6px; color: var(--zz-ink-soft); font-size: 0.8rem; text-align: right; }
/* A photo inside a text box (O nas: the old van) */
.zz-photo { margin: 18px 0 24px; }
.elementor .zz-photo img,
.zz-photo img { display: block; width: 100%; height: auto; border-radius: var(--zz-radius); box-shadow: var(--zz-shadow); }
.zz-photo figcaption { margin-top: 8px; color: var(--zz-ink-soft); font-size: 0.85rem; text-align: center; }
.zz-map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }

/* Donacije: jump cards in the top section, bank details with a copy button, UPN QR,
   the list of things we need, the drop-off card and the thank-you band. */
.elementor .e-con.zz-anchor { scroll-margin-top: 110px; }
/* Column containers inside these sections: no Elementor default side padding, so the text lines
   up with sections that have no columns */
.elementor .zz-anchor .e-con:not(.zz-dropoff) { --padding-left: 0px; --padding-right: 0px; }

.zz-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin-top: 8px; }
.zz-jump__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 20px;
	background: var(--zz-white);
	color: var(--zz-ink);
	text-decoration: none;
	box-shadow: var(--zz-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zz-jump__card:hover { color: var(--zz-ink); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(79, 58, 96, 0.15); }
.zz-jump__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	font: 800 1.3rem/1 var(--zz-font-heading);
	color: var(--zz-plum);
}
.zz-jump__card--lavender .zz-jump__icon { background: var(--zz-lavender); }
.zz-jump__card--butter .zz-jump__icon { background: var(--zz-butter); }
.zz-jump__text strong { display: block; font: 700 1.05rem/1.2 var(--zz-font-heading); }
.zz-jump__text small { display: block; margin-top: 2px; color: var(--zz-ink-soft); font-size: 0.85rem; }

.zz-bank {
	padding: 8px 24px;
	border-radius: 22px;
	background: var(--zz-white);
	box-shadow: var(--zz-shadow);
}
.zz-bank .zz-table th { width: 6.5em; }
.zz-bank .zz-table th,
.zz-bank .zz-table td { vertical-align: middle; }
.zz-bank__iban strong { font-size: 1.1rem; letter-spacing: 0.02em; white-space: nowrap; }
/* .elementor prefix: the Elementor kit styles every <button> as a big lavender one */
.elementor .zz-copy,
.zz-copy {
	margin-left: 6px;
	padding: 4px 12px;
	border: 2px solid var(--zz-lavender);
	border-radius: 999px;
	background: transparent;
	color: var(--zz-ink);
	font: 700 0.8rem/1.2 var(--zz-font-body);
	vertical-align: 1px;
	cursor: pointer;
}
.elementor .zz-copy:hover,
.zz-copy:hover { background: var(--zz-lavender-soft); color: var(--zz-ink); }
.elementor .zz-copy.is-done,
.zz-copy.is-done { border-color: var(--zz-mint); background: var(--zz-mint); color: var(--zz-mint-deep); }

.zz-qr {
	margin: 0 auto;
	max-width: 340px;
	padding: 24px 24px 20px;
	border-radius: var(--zz-radius);
	background: var(--zz-butter-soft);
	text-align: center;
}
.elementor .zz-qr img,
.zz-qr img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 14px; border-radius: 14px; background: var(--zz-white); }
.zz-qr figcaption { font-size: 0.92rem; color: var(--zz-ink-soft); }
.zz-qr figcaption strong { display: block; margin-bottom: 4px; font: 700 1.1rem/1.2 var(--zz-font-heading); color: var(--zz-ink); }

.zz-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.zz-needs li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	background: var(--zz-white);
	box-shadow: 0 2px 10px rgba(117, 89, 138, 0.08);
	font-weight: 600;
}
.zz-needs svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--zz-mint); color: var(--zz-mint-deep); }
.zz-nope {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 16px;
	background: #fde8e5;
	color: #7a2a20;
}
.zz-nope svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--zz-quarantine); color: #9b1c1c; }

/* Psi, Mačke: every animal has found a home */
.zza-happy {
	padding: 32px 32px 32px 200px;
	border-radius: var(--zz-radius);
	background: var(--zz-mint-soft) url("../images/bravo.webp") 28px center / 140px auto no-repeat;
	color: var(--zz-ink-soft);
}
.zza-happy p { margin: 0 0 0.5em; }
.zza-happy p:last-child { margin-bottom: 0; }
.zza-happy a { color: var(--zz-mint-deep); font-weight: 700; }
.zza-happy .zza-happy__title { font: 800 clamp(1.5rem, 3vw, 2rem)/1.15 var(--zz-font-heading); color: var(--zz-mint-deep); }
@media (max-width: 600px) {
	.zza-happy { padding: 148px 24px 24px; background-position: center 20px; text-align: center; }
}

/* Photo edge to edge at the top, text inset below it */
.elementor .e-con.zz-dropoff {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 28px;
	--padding-left: 0px;
	padding-bottom: 28px;
	overflow: hidden;
	border-radius: var(--zz-radius);
	background: var(--zz-white);
	box-shadow: var(--zz-shadow);
}
.elementor .zz-dropoff img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.elementor .zz-dropoff .elementor-widget-heading,
.elementor .zz-dropoff .elementor-widget-text-editor,
.elementor .zz-dropoff .elementor-widget-button { padding-inline: 28px; }
.elementor .zz-dropoff p { margin: 0 0 0.6em; }

.elementor .e-con.e-con.zz-thanks__box { /* doubled class: must outrank the "zz-" padding reset further down */
	--padding-top: 24px;
	--padding-right: 40px;
	--padding-bottom: 24px;
	--padding-left: 40px;
	border-radius: 40px;
	background: linear-gradient(120deg, var(--zz-lavender-soft), var(--zz-butter-soft));
}
.elementor .zz-thanks__img { flex: none; width: 220px; }
.elementor .zz-thanks__img img { width: 100%; height: auto; }
.elementor .zz-thanks__text p { margin: 0; color: var(--zz-ink-soft); font-size: 1.05rem; }
.elementor .zz-thanks__text .zz-thanks__title { margin-bottom: 4px; font: 800 clamp(1.5rem, 3vw, 2rem)/1.15 var(--zz-font-heading); color: var(--zz-plum); }

@media (max-width: 600px) {
	.zz-jump { grid-template-columns: 1fr; }
	/* Label above the value, so the account number gets the full card width */
	.zz-bank { padding: 6px 18px; }
	.zz-bank .zz-table,
	.zz-bank .zz-table tbody,
	.zz-bank .zz-table tr,
	.zz-bank .zz-table th,
	.zz-bank .zz-table td { display: block; width: auto; }
	.zz-bank .zz-table tr { padding: 10px 0; border-bottom: 1px solid var(--zz-line); }
	.zz-bank .zz-table tr:last-child { border-bottom: 0; }
	.zz-bank .zz-table th,
	.zz-bank .zz-table td { padding: 0; border: 0; }
	.zz-bank .zz-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
	.zz-needs { grid-template-columns: 1fr; }
	.elementor .e-con.e-con.zz-thanks__box { --padding-right: 20px; --padding-left: 20px; text-align: center; }
	.elementor .zz-thanks__img { width: 170px; }
}

/* Numbered step cards (Ste izgubili žival?): a grid of white cards, or one column with --single */
.zz-stepcards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: start;
	counter-reset: zz-stepcard;
}
.zz-stepcards--single { grid-template-columns: 1fr; gap: 12px; }
.zz-stepcards > li {
	position: relative;
	counter-increment: zz-stepcard;
	padding: 22px 24px 20px 76px;
	border-radius: 22px;
	background: var(--zz-white);
	box-shadow: var(--zz-shadow);
}
.zz-stepcards--single > li { padding: 16px 20px 14px 68px; box-shadow: 0 2px 10px rgba(117, 89, 138, 0.08); }
.zz-stepcards > li::before {
	content: counter(zz-stepcard);
	position: absolute;
	left: 22px; top: 18px;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--zz-lavender);
	font: 800 1.15rem/38px var(--zz-font-heading);
	text-align: center;
	color: var(--zz-plum);
}
.zz-stepcards--single > li::before { left: 18px; top: 14px; }
#najdena-zival .zz-stepcards > li::before { background: var(--zz-butter); }
.zz-stepcards h3 { margin: 4px 0 6px; font-size: 1.2rem; line-height: 1.25; color: var(--zz-ink); }
.zz-stepcards p { margin: 0 0 0.6em; }
.zz-stepcards p:last-child { margin-bottom: 0; }
.zz-stepcards ul { margin: 0 0 0.6em; padding-left: 1.2em; }
.zz-stepcards .button { margin-top: 4px; }

.zz-callout { margin: 8px 0 0; padding: 16px 22px; border-radius: 18px; }
.zz-callout--mint { background: var(--zz-mint); color: var(--zz-mint-deep); }

.zz-callcard {
	padding: 28px 28px 24px;
	border-radius: var(--zz-radius);
	background: var(--zz-butter-soft);
	text-align: center;
}
.zz-callcard__title { margin: 0; font: 700 1.2rem/1.2 var(--zz-font-heading); }
.elementor .zz-callcard__phone,
.zz-callcard__phone {
	display: inline-block;
	margin: 12px 0 14px;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--zz-lavender-deep);
	color: var(--zz-white);
	font: 800 1.5rem/1.2 var(--zz-font-heading);
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.elementor .zz-callcard__phone:hover,
.zz-callcard__phone:hover { background: var(--zz-plum); color: var(--zz-white); transform: translateY(-2px); }
/* Lost-animal card: lavender, the button opens the report form */
.zz-callcard--lost { background: var(--zz-lavender-soft); }
.zz-callcard--lost .zz-callcard__hours { margin-top: 8px; }
.elementor .zz-callcard--lost .zz-callcard__phone,
.zz-callcard--lost .zz-callcard__phone { margin: 16px 0 4px; font-size: 1.15rem; }
.zz-callcard__hours { margin: 0; color: var(--zz-ink-soft); }
.zz-callcard__hours strong { display: block; color: var(--zz-ink); }
.zz-callcard__small { margin: 12px 0 0; font-size: 0.85rem; color: var(--zz-ink-soft); }
.elementor .zz-callcard__img img { width: 200px; height: auto; }
/* Farm and wild animals: a notice box, not small print */
.zz-small.zz-other-animals {
	position: relative;
	margin: 16px 0 0;
	padding: 16px 22px 16px 64px;
	border-left: 5px solid var(--zz-lavender-deep);
	border-radius: 18px;
	background: var(--zz-lavender-soft);
	color: var(--zz-ink);
	font-size: 1rem;
}
.zz-small.zz-other-animals::before {
	content: "i";
	position: absolute;
	left: 18px; top: 50%;
	width: 30px; height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background: var(--zz-lavender-deep);
	color: var(--zz-white);
	font: 800 1.05rem/30px var(--zz-font-heading);
	text-align: center;
}
@media (max-width: 600px) {
	.zz-small.zz-other-animals { padding: 52px 18px 16px; }
	.zz-small.zz-other-animals::before { top: 14px; margin-top: 0; }
}

/* Desktop: the card next to the steps stays in view while the steps scroll past */
@media (min-width: 1025px) {
	.elementor .zz-anchor .elementor-widget:has(> .elementor-widget-container > .zz-callcard),
	.elementor .zz-anchor .elementor-widget:has(> .zz-callcard) { position: sticky; top: 120px; z-index: 1; }
	/* Line the card up with the first step card, not with the section heading above the steps */
	.zz-anchor .zz-callcard { margin-top: 54px; }
}
@media (max-width: 900px) {
	.zz-stepcards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.zz-stepcards > li { padding: 18px 18px 16px 64px; }
	.zz-stepcards > li::before { left: 16px; top: 16px; width: 34px; height: 34px; line-height: 34px; }
}

.zza-empty {
	padding: 32px;
	border-radius: var(--zz-radius);
	background: var(--zz-lavender-soft);
	text-align: center;
	color: var(--zz-ink-soft);
}

/* Animal lists from [zonzani_animals title="…"]
   Quarantine (red) and trial adoption (turquoise) get their own band with a dot.
   ========================================================================== */

.zza-list__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
}
.zza-list__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--zz-plum); margin: 0 0 0.2em; }
.zza-list__intro { margin: 0; max-width: 62ch; color: var(--zz-ink-soft); }
.zza-list__count {
	display: inline-block;
	margin-left: 6px;
	padding: 0.1em 0.7em;
	border-radius: 999px;
	background: var(--zz-butter);
	color: var(--zz-butter-deep);
	font: 800 0.95rem/1.4 var(--zz-font-body);
	vertical-align: middle;
}
.zza-list__more { font-weight: 800; text-decoration: none; white-space: nowrap; }
.zza-list__more:hover { text-decoration: underline; }

/* Dog / cat lists: Zon or Zani in the box next to the heading */
.zza-list--pes .zza-list__heading,
.zza-list--macka .zza-list__heading { position: relative; padding-left: 114px; min-height: 96px; }
.zza-list--pes .zza-list__heading::before,
.zza-list--macka .zza-list__heading::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 96px; height: 96px;
	transform: translateY(-50%);
	border-radius: 22px;
	background: var(--zz-butter-soft) url("../images/zani-isce-dom.webp") center / 84% no-repeat;
}
.zza-list--pes .zza-list__heading::before { background-color: var(--zz-lavender-soft); background-image: url("../images/zon-isce-dom.webp"); }
.zza-list--pes .zza-list__count { background: var(--zz-lavender); color: var(--zz-plum); }
/* Quarantine / trial lists on the species pages keep their band, not the mascot */
.zza-list--karantena .zza-list__heading,
.zza-list--poskusna-oddaja .zza-list__heading,
.zza-list--unavailable .zza-list__heading { padding-left: 0; min-height: 0; }
.zza-list--karantena .zza-list__heading::before,
.zza-list--poskusna-oddaja .zza-list__heading::before,
.zza-list--unavailable .zza-list__heading::before { content: none; }

/* Homepage teasers: 4 random animals, 3 shown in the desktop row, 2×2 below that */
@media (min-width: 961px) {
	.zza-list--teaser .zza-grid--3 > :nth-child(n+4) { display: none; }
}
@media (min-width: 601px) and (max-width: 960px) {
	.zza-list--teaser .zza-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Trenutno niso na voljo" (status="karantena,rezerviran,poskusna-oddaja", class="zza-list--unavailable"):
   one band for all, each card's badge tells which. Separate quarantine / trial lists still work. */
.zza-list--karantena,
.zza-list--poskusna-oddaja,
.zza-list--unavailable {
	margin-top: 40px;
	padding: 32px 28px 4px;
	border-radius: var(--zz-radius);
	background: var(--zz-quarantine-soft);
}
.zza-list--poskusna-oddaja { background: var(--zz-sky-soft); }
.zza-list--unavailable { background: linear-gradient(120deg, var(--zz-quarantine-soft), var(--zz-reserved-soft), var(--zz-sky-soft)); }
.zza-list--karantena .zza-list__title::before,
.zza-list--poskusna-oddaja .zza-list__title::before,
.zza-list--unavailable .zza-list__title::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--zz-quarantine-ink);
	vertical-align: middle;
}
.zza-list--poskusna-oddaja .zza-list__title::before { background: var(--zz-sky-deep); }
.zza-list--unavailable .zza-list__title::before { background: conic-gradient(var(--zz-quarantine-ink) 0 120deg, var(--zz-reserved-ink) 0 240deg, var(--zz-sky-deep) 0); }
.zza-list--karantena .zza-grid,
.zza-list--poskusna-oddaja .zza-grid,
.zza-list--unavailable .zza-grid { margin-bottom: 28px; }
@media (max-width: 600px) {
	.zza-list--karantena,
	.zza-list--poskusna-oddaja,
	.zza-list--unavailable { padding: 22px 14px 2px; }
}

.animal__note--trial { background: var(--zz-sky); color: var(--zz-sky-deep); }
.animal__note--foster { background: var(--zz-rose); color: var(--zz-rose-deep); }
.animal__note--reserved { background: var(--zz-reserved); color: var(--zz-reserved-ink); }

/* Round portraits: [zonzani_animals layout="round"] (adopted animals on the homepage) */
.zza-grid--round { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.zza-round a { color: inherit; text-decoration: none; }
.zza-round__photo { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid var(--zz-white); box-shadow: var(--zz-shadow); background: var(--zz-mint); }
.zza-round .zza-round__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.zza-round a:hover .zza-round__photo img { transform: scale(1.05); }
.zza-round__name { margin: 12px 0 0; font-size: 1.3rem; }
.zza-round__status { color: var(--zz-mint-deep); font-weight: 800; font-size: 0.9rem; }
.zza-round__status::after { content: " ♥"; }
@media (max-width: 760px) {
	.zza-grid--round { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* Counters: [zonzani_stats] */
.zza-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin-top: 12px;
	padding-top: 24px;
	border-top: 1px dashed rgba(117, 89, 138, 0.3);
	color: var(--zz-ink-soft);
	font-size: 0.95rem;
	line-height: 1.4;
}
.zza-stats__item b { display: block; font: 800 1.6rem/1.1 var(--zz-font-heading); color: var(--zz-lavender-deep); }

/* Icon left of each counter, in a white circle: paw (looking for a home), house with a
   heart (found a home), clock (phone hours), phone (24/7 emergencies). */
.zza-stats__item {
	display: grid;
	grid-template-columns: 44px auto;
	column-gap: 12px;
	align-items: center;
	text-align: left;
}
.zza-stats__item::before {
	content: "";
	grid-row: span 2;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--zz-white) center / 22px no-repeat;
	box-shadow: 0 2px 8px rgba(117, 89, 138, 0.12);
}
.zza-stats__item--waiting::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2375598a'%3E%3Cellipse cx='12' cy='16.5' rx='5' ry='4.2'/%3E%3Ccircle cx='5.2' cy='10.2' r='2.2'/%3E%3Ccircle cx='9.4' cy='5.8' r='2.2'/%3E%3Ccircle cx='14.6' cy='5.8' r='2.2'/%3E%3Ccircle cx='18.8' cy='10.2' r='2.2'/%3E%3C/svg%3E"); }
.zza-stats__item--adopted::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375598a' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 11 12 3.5l9 7.5'/%3E%3Cpath d='M5.5 9.5V20.5h13V9.5'/%3E%3Cpath d='M12 18s-3.3-2-3.3-4.2a1.8 1.8 0 0 1 3.3-1 1.8 1.8 0 0 1 3.3 1C15.3 16 12 18 12 18z' fill='%2375598a' stroke-width='1'/%3E%3C/svg%3E"); }
.zza-stats__item--hours::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375598a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); }
.zza-stats__item--extra::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238f4127'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.zza-stats__item--extra b { color: var(--zz-peach-deep); }
@media (max-width: 720px) {
	/* Two columns of icon + number on phones, left-aligned inside the centred hero */
	.zza-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.zza-stats__item { grid-template-columns: 38px auto; column-gap: 10px; }
	.zza-stats__item::before { width: 38px; height: 38px; background-size: 19px; }
	.zza-stats__item b { font-size: 1.35rem; }
	.zza-stats__item span { font-size: 0.85rem; }
}

/* Phones: two animals per row instead of one huge photo each
   ========================================================================== */

@media (max-width: 600px) {
	.animal-grid,
	.zza-grid,
	.zza-grid--2,
	.zza-grid--3,
	.zza-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.card { padding: 6px; border-radius: 18px; }
	.card__media { border-radius: 13px; }
	.card__body { padding: 10px 6px 4px; }
	.card__title { font-size: 1.15rem; }
	.card__meta { font-size: 0.8rem; line-height: 1.4; }
	.chip { font-size: 0.72rem; }
	.card__go { display: none; }
	.card__media .badges { top: 8px; left: 8px; right: 8px; gap: 4px; }
	.card__media .badge { font-size: 0.7rem; padding: 0.25em 0.7em; }
	.zza-list--pes .zza-list__heading,
	.zza-list--macka .zza-list__heading { padding-left: 94px; min-height: 80px; }
	.zza-list--pes .zza-list__heading::before,
	.zza-list--macka .zza-list__heading::before { width: 80px; height: 80px; border-radius: 20px; }
	.zza-list--karantena .zza-list__heading,
	.zza-list--poskusna-oddaja .zza-list__heading,
	.zza-list--unavailable .zza-list__heading { padding-left: 0; min-height: 0; }
	.zza-list__count { font-size: 0.8rem; }
}

/* Inner pages: Elementor's boxed sections are set to 1200 px, wider than the header and the
   homepage (the content column, 1136 px); cap them so all edges line up. Narrower ones stay. */
.elementor-page .e-con > .e-con-inner { max-width: min(var(--content-width), calc(var(--zz-container) - 2 * var(--zz-gutter))); }

/* Inner pages: the top section (lavender gradient, set in Elementor to run edge to edge
   with only the bottom corners rounded) is a panel like the homepage hero. */
.elementor-page .elementor > .e-con:first-child:not([class*="zz-"]) {
	--width: var(--zz-panel-width);
	--margin-top: 8px;
	--margin-left: auto;
	--margin-right: auto;
	--padding-left: var(--zz-panel-pad);
	--padding-right: var(--zz-panel-pad);
	width: var(--zz-panel-width);
	border-radius: 40px;
}
@media (max-width: 600px) {
	/* The widgets inside already have their own spacing: a smaller panel padding keeps the text wide */
	.elementor-page .elementor > .e-con:first-child:not([class*="zz-"]) { --padding-left: 6px; --padding-right: 6px; border-radius: 28px; }
}

/* Inner pages (Psi, Mačke, O nas, Kontakt, …): the illustration in the top section was
   set to 60% on phones in Elementor and the files are only ~330 px wide, so it ended
   up tiny under the button. Same 85% as on desktop; the homepage hero has its own rules. */
@media (max-width: 1024px) {
	.elementor-page .elementor > .e-con:first-child:not(.zz-hero) .elementor-widget-image img { width: auto; max-width: min(85vw, 560px); max-height: 300px; }
}

/* Homepage (Elementor page "Domov", built from these classes)
   ========================================================================== */

/* Elementor containers: our classes set the layout through Elementor's own
   variables (--width, --margin-*, --padding-*), which its logical margin/padding
   rules read. `.e-con.zz-…` has the same weight as Elementor's per-element CSS. */
.elementor .e-con[class*="zz-"] { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.elementor .e-con.zz-hero__text { --gap: 0px; --row-gap: 0px; }

/* Primary / outline buttons (Elementor button widgets with these classes) */
.elementor .zz-btn .elementor-button {
	padding: 0.8em 1.6em;
	border-radius: 999px;
	font: 800 1rem/1.2 var(--zz-font-body);
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.elementor .zz-btn .elementor-button:hover { transform: translateY(-2px); }
/* :focus is listed because Elementor's global button style turns a clicked (focused) button butter. */
.elementor .zz-btn .elementor-button:focus-visible { outline: 3px solid var(--zz-plum); outline-offset: 2px; }
.elementor .zz-btn--primary .elementor-button,
.elementor .zz-btn--primary .elementor-button:focus { background: var(--zz-lavender-deep); color: var(--zz-white); }
.elementor .zz-btn--primary .elementor-button:hover { background: var(--zz-plum); color: var(--zz-white); box-shadow: 0 6px 16px rgba(79, 58, 96, 0.22); }
/* Homepage hero: dogs purple, cats yellow, like the animal cards. */
.elementor .zz-hero__buttons .elementor-button[href$="/macke/"],
.elementor .zz-hero__buttons .elementor-button[href$="/macke/"]:focus { background: var(--zz-butter); color: var(--zz-ink); }
.elementor .zz-hero__buttons .elementor-button[href$="/macke/"]:hover { background: #f5cf85; color: var(--zz-ink); box-shadow: 0 6px 16px rgba(138, 90, 18, 0.22); }
.elementor .zz-btn--ghost .elementor-button,
.elementor .zz-btn--ghost .elementor-button:focus { background: var(--zz-white); color: var(--zz-ink); box-shadow: inset 0 0 0 2px var(--zz-lavender); }
.elementor .zz-btn--ghost .elementor-button:hover { background: var(--zz-white); color: var(--zz-ink); }

/* Hero: rounded gradient panel, text left, Zon & Zani on a white blob right */
.elementor .e-con.zz-hero {
	--width: var(--zz-panel-width);
	--margin-top: 8px;
	--margin-left: auto;
	--margin-right: auto;
	--padding-top: 64px;
	--padding-bottom: 64px;
	--padding-left: var(--zz-panel-pad);
	--padding-right: var(--zz-panel-pad);
	--gap: 40px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	border-radius: 40px;
	background: linear-gradient(120deg, var(--zz-lavender-soft), var(--zz-butter-soft));
}
.elementor .zz-hero__tag,
.elementor .zz-hero__tag p { margin: 0; color: var(--zz-butter-deep); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.elementor .zz-hero__title .elementor-heading-title { margin: 0.3em 0 0.4em; font-family: var(--zz-font-heading); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; color: var(--zz-plum); }
.elementor .zz-hero__lead { max-width: 36ch; font-size: 1.2rem; color: var(--zz-ink-soft); }
.elementor .zz-hero__lead p { margin: 0; }
/* "Ogled živali je možen samo po predhodnem dogovoru" under the buttons */
.elementor .zz-hero__note p {
	display: inline-block;
	margin: 0 0 20px;
	padding: 10px 16px 10px 44px;
	border-radius: var(--zz-radius-sm);
	background: rgba(255, 255, 255, 0.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2375598a'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") 14px center / 20px no-repeat;
	color: var(--zz-ink);
	font-size: 0.98rem;
	line-height: 1.45;
}
.elementor .zz-hero__note a { font-weight: 800; white-space: nowrap; }
.elementor .e-con.zz-hero__buttons { --gap: 12px; --margin-top: 24px; --margin-bottom: 24px; --margin-left: 0px; --margin-right: 0px; flex-direction: row; flex-wrap: wrap; }
.elementor .zz-hero__buttons > .elementor-widget { width: auto; }
.elementor .e-con.zz-hero__art { --width: min(100%, 420px); position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; }
.elementor .zz-hero__art::before {
	content: "";
	position: absolute;
	inset: 4%;
	background: var(--zz-white);
	border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
	box-shadow: var(--zz-shadow);
}
.elementor .zz-hero__art .elementor-widget-image { position: relative; width: 82%; }
.elementor .zz-hero__art img { width: 100%; height: auto; }

/* Help tiles: colour-filled, illustration out of the bottom-right corner */
.elementor .e-con.zz-tiles,
.elementor .e-con.zz-section {
	--width: min(100%, var(--zz-container));
	--margin-top: 32px;
	--padding-left: var(--zz-gutter);
	--padding-right: var(--zz-gutter);
}
.elementor .e-con.zz-tiles {
	--gap: 20px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.elementor .e-con.zz-tile {
	--gap: 0px;
	--row-gap: 0px;
	--padding-top: 22px;
	--padding-left: 22px;
	--padding-right: 22px;
	position: relative;
	display: block;
	min-height: 230px;
	border-radius: var(--zz-radius);
	overflow: hidden;
	color: var(--zz-ink);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.elementor .zz-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(79, 58, 96, 0.15); }
.elementor .zz-tile--peach { background: var(--zz-peach); }
.elementor .zz-tile--butter { background: var(--zz-butter); }
.elementor .zz-tile--lavender { background: var(--zz-lavender); }
.elementor .zz-tile--mint { background: var(--zz-mint); }
.elementor .zz-tile__title { position: relative; z-index: 1; max-width: 10ch; }
.elementor .zz-tile__title .elementor-heading-title { margin: 0; font-family: var(--zz-font-heading); font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: var(--zz-ink); }
/* The drawing sits in the bottom-right corner, but whole: it is fitted into a corner box
   inside the tile (wide drawings fill its width, tall ones its height), never pushed out. */
.elementor .zz-tile__img {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 80%;
	height: 60%;
}
.elementor .zz-tile .zz-tile__img img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transform-origin: bottom right;
	transition: transform 0.25s ease;
}
.elementor .zz-tile:hover .zz-tile__img img { transform: rotate(-3deg) scale(1.05); }

/* Animal sections */
.elementor .e-con.zz-section { --margin-top: 72px; display: block; }
.elementor .e-con.zz-section + .zz-section { --margin-top: 56px; }
.elementor .e-con.zz-band {
	--width: var(--zz-panel-width);
	--margin-top: 72px;
	--margin-left: auto;
	--margin-right: auto;
	--padding-top: 56px;
	--padding-bottom: 72px;
	--padding-left: var(--zz-panel-pad);
	--padding-right: var(--zz-panel-pad);
	display: block;
	border-radius: 48px;
	background: var(--zz-mint-soft);
}

@media (max-width: 960px) {
	.elementor .e-con.zz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.elementor .e-con.zz-hero { --gap: 8px; --padding-top: 32px; --padding-bottom: 40px; grid-template-columns: 1fr; text-align: center; }
	.elementor .e-con.zz-hero__art { --width: 78%; order: -1; }
	.elementor .zz-hero__lead { margin-inline: auto; }
	.elementor .e-con.zz-hero__buttons,
	.elementor .zz-hero .zza-stats { justify-content: center; }
}
@media (max-width: 600px) {
	.elementor .e-con.zz-tiles { --gap: 12px; }
	.elementor .e-con.zz-tile { --padding-top: 14px; --padding-left: 14px; --padding-right: 14px; min-height: 175px; border-radius: 18px; }
	.elementor .zz-tile__title .elementor-heading-title { font-size: 1.1rem; }
	.elementor .zz-tile__img { right: 10px; bottom: 10px; width: 84%; height: 58%; }
	.elementor .e-con.zz-band { border-radius: 32px; }
}

/* Animal profile: "how to adopt" box for adoptable animals */
.animal__adopt {
	margin-top: 20px;
	padding: 20px 22px;
	border-radius: var(--zz-radius);
	background: var(--zz-white);
	box-shadow: var(--zz-shadow);
}
.animal__adopt p { margin: 0 0 0.8em; }
.animal__adopt-title { font: 700 1.3rem/1.2 var(--zz-font-heading); }
.animal__adopt .animal__cta { margin: 14px 0 0; }

/* "Deli" button on animal profiles and its fallback menu (desktop browsers without a share sheet) */
.share { position: relative; display: inline-block; margin-top: 16px; }
.share__toggle::before {
	content: "";
	width: 16px; height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b3740' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.share__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	left: 0;
	display: grid;
	min-width: 200px;
	padding: 8px;
	border-radius: var(--zz-radius-sm);
	background: var(--zz-white);
	box-shadow: var(--zz-shadow);
}
.share__menu[hidden] { display: none; }
.share__menu a,
.share__menu button {
	display: block;
	width: 100%;
	padding: 0.55em 0.9em;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--zz-ink);
	font: 700 0.95rem/1.3 var(--zz-font-body);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.share__menu a:hover,
.share__menu button:hover { background: var(--zz-lavender-soft); }

/* Images can't be dragged out or long-pressed to save on iOS (together with the
   right-click block in main.js). A mild deterrent, not protection. */
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }

/* Phones: a calmer page (theme 1.7.0)
   Less repeated contact info, the animals higher up, fewer boxes and badges.
   Desktop is unchanged.
   ========================================================================== */

/* Homepage hero: only the animal counters (17 looking for a home, 400+ adopted). The phone
   hours and 24/7 items are already in the info bar and footer (the user asked, also for desktop). */
.zz-hero .zza-stats__item--hours,
.zz-hero .zza-stats__item--extra { display: none; }

@media (max-width: 600px) {
	/* Info bar: phone number, one line of hours, then "Ogled živali: samo po predhodnem dogovoru"
	   on its own line (the user: walk-ins without an appointment are a real problem) */
	.info-bar__visits { display: block; font-size: 0.85rem; }
	.info-bar__visits .info-bar__dot { display: none; }

	/* Hero: small mascots, one main button, the outline button as a plain link,
	   no phone note (the bar has the phone), only the two animal counters. */
	.elementor .e-con.zz-hero { --padding-top: 20px; --padding-bottom: 28px; }
	.elementor .e-con.zz-hero__art { --width: 46%; width: 46%; }
	.elementor .zz-hero__title .elementor-heading-title { font-size: 2rem; margin: 0.25em 0 0.35em; }
	.elementor .zz-hero__lead { font-size: 1.02rem; }
	.elementor .e-con.zz-hero__buttons { --gap: 4px; --margin-top: 18px; --margin-bottom: 20px; flex-direction: column; align-items: center; }
	.elementor .zz-btn--ghost .elementor-button { padding: 0.5em 0.8em; background: none; box-shadow: none; color: var(--zz-lavender-deep); text-decoration: underline; text-underline-offset: 3px; }
	.elementor .zz-btn--ghost .elementor-button:hover { transform: none; }
	.elementor .zz-hero__note p { margin-bottom: 12px; text-align: left; }
	.zz-hero .zza-stats { margin-top: 4px; padding-top: 16px; }

	/* Help tiles: slim rows (title left, small drawing right) instead of four big squares */
	.elementor .e-con.zz-tiles { --gap: 8px; grid-template-columns: 1fr; }
	.elementor .e-con.zz-tile { --padding-top: 0px; --padding-left: 18px; --padding-right: 18px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; min-height: 68px; border-radius: 16px; text-align: left; }
	.elementor .zz-tile__title { max-width: 60%; margin: 0; }
	.elementor .zz-tile__title .elementor-heading-title { font-size: 1.15rem; }
	.elementor .zz-tile__img { right: 12px; bottom: 6px; top: 6px; width: 34%; height: auto; }

	/* Homepage dog / cat teasers: no "Klikni na sliko" line, smaller mascot,
	   "Vsi psi →" as a button under the cards (where you end up after looking at them). */
	.elementor .e-con.zz-section,
	.elementor .e-con.zz-section + .zz-section { --margin-top: 44px; }
	.zza-list--teaser { display: flex; flex-direction: column; }
	.zza-list--teaser .zza-list__head { display: contents; }
	.zza-list--teaser .zza-list__heading { margin-bottom: 16px; }
	.zza-list--teaser .zza-grid { margin-bottom: 16px; }
	.zza-list--teaser .zza-list__intro { display: none; }
	.zza-list--teaser .zza-list__more {
		order: 3;
		align-self: center;
		padding: 0.6em 1.4em;
		border-radius: 999px;
		background: var(--zz-white);
		box-shadow: inset 0 0 0 2px var(--zz-lavender);
		color: var(--zz-ink);
	}
	.zza-list--pes .zza-list__heading,
	.zza-list--macka .zza-list__heading { padding-left: 68px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; }
	.zza-list--pes .zza-list__heading::before,
	.zza-list--macka .zza-list__heading::before { width: 56px; height: 56px; border-radius: 14px; }
	/* "Trenutno niso na voljo" is also a dog/cat list but has no mascot: no room for it */
	.zza-list--karantena .zza-list__heading,
	.zza-list--poskusna-oddaja .zza-list__heading,
	.zza-list--unavailable .zza-list__heading { padding-left: 0; min-height: 0; }
	.zza-list__title { font-size: 1.55rem; }

	/* Cards: no "Išče dom" badge in lists that only hold adoptable animals (the heading says it);
	   other statuses (foster carer, quarantine, …) keep theirs. Details as one quiet line,
	   without the species where the whole list is one species. */
	.card .badge--isce-dom { display: none; }
	.card__chips { gap: 0; }
	.chip { padding: 0; background: none; font-size: 0.85rem; font-weight: 600; }
	.chip + .chip::before { content: "\00a0·\00a0"; }
	.chip.chip--care { flex-basis: 100%; }
	.chip.chip--care::before { content: none; }
	:is(.zza-list--pes, .zza-list--macka, .zza-list--ostalo, .tax-animal_species) .chip--species { display: none; }
	:is(.zza-list--pes, .zza-list--macka, .zza-list--ostalo, .tax-animal_species) .chip--species + .chip::before { content: none; }

	/* Inner pages (Psi, Mačke, Kontakt, …): the top illustration smaller, it came after the text
	   and button at nearly full width */
	/* Sized from the screen, not in %: the widget shrink-wraps the image, so a % width was a loop
	   the browser resolved with the widget shorter than the drawing, which then hung out of the
	   top section. */
	/* Capped by height, so a wide drawing (Donacije, Kako do nas) is as big as a tall one rather
	   than squeezed into the same narrow width. */
	.elementor-page .elementor > .e-con:first-child:not(.zz-hero) .elementor-widget-image img { width: auto; max-width: 88vw; max-height: 180px; }

	/* Tighter vertical rhythm. Elementor's sections keep their desktop-sized padding (48 px top
	   and bottom on Psi/Mačke) and 20 px gaps; with the grid's margin and the footer's 120 px on
	   top, sections were separated by 100+ px of empty cream. :not([class*="zz-"]) leaves the
	   homepage's own sections to their rules; the attribute selector also outranks Elementor's
	   per-element CSS. */
	.elementor-page .elementor > .e-con:not([class*="zz-"]) { --gap: 12px; --row-gap: 12px; }
	.elementor-page .elementor > .e-con:first-child:not([class*="zz-"]) { --padding-top: 24px; --padding-bottom: 28px; }
	.elementor-page .elementor > .e-con:not(:first-child):not([class*="zz-"]) { --padding-top: 28px; --padding-bottom: 16px; }
	/* Side-by-side columns (text + drawing, form + contact card) stack on phones but kept
	   their 40–48 px desktop gap. Boxed sections wrap their children in .e-con-inner. */
	.elementor-page .elementor > .e-con:not([class*="zz-"]) > .e-con,
	.elementor-page .elementor > .e-con:not([class*="zz-"]) > .e-con-inner > .e-con { --gap: 24px; --row-gap: 24px; }
	/* Inner pages: every widget also gets Elementor's 20 px "widget spacing" margin on top of the
	   container gap, so text → button → drawing came out ~70 px apart. Halved on phones.
	   (The homepage is tuned through its zz-* classes and is left out.) */
	.elementor-page:not(.home) .elementor .e-con:not([class*="zz-"]) .e-con:not([class*="zz-"]) { --gap: 12px; --row-gap: 12px; }
	.elementor-page:not(.home) .elementor-widget:not(:last-child) { --kit-widget-spacing: 10px; }
	/* Every nested container also has Elementor's default 10 px top and bottom padding; pages nest
	   3–4 deep, which stacked 30–40 px of invisible padding into each gap. Containers with their
	   own padding (white cards) set --padding-* themselves and keep it. */
	.elementor-page:not(.home) .elementor { --container-default-padding-top: 0px; --container-default-padding-bottom: 0px; }
	.animal-grid,
	.zza-grid { margin-bottom: 16px; }
	.zza-list--karantena,
	.zza-list--poskusna-oddaja,
	.zza-list--unavailable { margin-top: 28px; }
	.elementor .e-con.zz-band { --margin-top: 44px; --padding-top: 36px; --padding-bottom: 36px; }
	.site-footer { margin-top: 84px; }

	/* Footer: no mascot, smaller company details */
	.site-footer__mascot { display: none; }
	.site-footer__brand { display: block; }
	.site-footer__widgets > .footer-widget:nth-child(2) .textwidget { font-size: 0.88rem; }

	/* Profile spacing: the header kept 56 px + 40 px below it, and the footer link 64 px */
	.animal__header { padding-block: 24px 28px; margin-bottom: 16px; }
	.animal__adopt { margin-top: 12px; }
	.animal__content:not(:has(> *)) { display: none; }
	.animal__footer { margin-bottom: 24px; }
	/* The box's own call button would sit right above the bar: keep only "Postopek posvojitve" */
	.animal__adopt .animal__cta .button:not(.button--ghost) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}