/**
 * Župa Polog — vizualni identitet
 * ---------------------------------------------------------------------------
 * Vapnenac, prigušeno zlato, motiv luka. Obični CSS, bez alata za građenje.
 *
 * SADRŽAJ
 *   1. Fontovi
 *   2. Tokeni
 *   3. Osnove
 *   4. Raspored
 *   5. Zaglavlje
 *   6. Sastavnice — gumbi, kartice, luk
 *   7. Blokovi
 *   8. Podnožje i mobilna traka
 *   9. Gibanje
 *  10. Ispis
 *
 * Kontrast je provjeren prema WCAG 2.1 AA. Zlatna je namjerno podijeljena na
 * TRI tokena, jer jedna boja ne može pokriti sve podloge:
 *   --zp-gold        samo ukras — pada kao tekst (3,63) i kao ispuna gumba (3,85)
 *   --zp-gold-ink    tekst na svijetlom: linkovi, gumbi (5,57)
 *   --zp-gold-light  tekst na tamnom: podnožje, hero, staklo (7,93)
 *
 * Prije nego što negdje upišeš --zp-gold kao boju teksta: ne. Zato i postoji
 * ostalih dvoje.
 */

/* ═══ 1 · FONTOVI ═══════════════════════════════════════════════════════ */

/* Namjerno bez @layer. Blocksyjev main.min.css nije ni u jednom sloju, a u
   kaskadi nesloženi CSS pobjeđuje slojeviti bez obzira na specifičnost — pa
   bi nas slojevi samo koštali. Naš se stil učitava nakon Blocksyjeva. */


@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin-ext.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2000-206F,
		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-ext.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2000-206F,
		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ 2 · TOKENI ════════════════════════════════════════════════════════ */


:root {
	--zp-stone-50: #faf8f5;
	--zp-stone-100: #f2eee8;
	--zp-stone-200: #e4ded4;
	--zp-stone-300: #d3c9ba;

	--zp-ink: #1c1917;
	--zp-ink-70: #57534e;
	--zp-ink-45: #8a827a;

	/* Zlatna postoji u tri jačine jer jedna ne može poslužiti svemu:
	   ista boja koja lijepo stoji kao rub na vapnencu pada kao tekst, a ona
	   koja prolazi na svijetlom nestaje na tamnom. */
	--zp-gold: #a17c3a;       /* SAMO ukras: rubovi, oznake. Pada AA za tekst. */
	--zp-gold-ink: #7e5f2a;   /* tekst NA SVIJETLOM: linkovi, ispuna gumba (5,57) */
	--zp-gold-light: #e8c583; /* tekst NA TAMNOM: podnožje, hero, staklo (7,93) */
	--zp-gold-deep: #6f5325;  /* prijelaz mišem */
	--zp-gold-wash: #f0e7d8;

	--zp-sacral: #2c4a52;      /* zadržano za rijetke naglaske */
	--zp-sacral-deep: #1e343a;

	/* Podnožje je toplo ugljeno, ne tirkizno. Kad su i kontakt i podnožje
	   bili u dvije nijanse iste tirkizne, razlika među njima bila je 1,37:1
	   pa su se stapali. Sada je kontakt svijetao, podnožje tamno: 13,99:1. */
	--zp-char: #232020;
	--zp-char-text: #bdb6ae;
	--zp-char-muted: #948c84;

	--zp-white: #fff;

	--zp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--zp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--zp-text-display: clamp(2.6rem, 7vw, 5.5rem);
	--zp-text-h2: clamp(2rem, 4vw, 3rem);
	--zp-text-h3: clamp(1.375rem, 2vw, 1.75rem);
	--zp-text-lede: 1.1875rem;
	--zp-text-body: 1.0625rem;
	--zp-text-sm: 0.9375rem;
	--zp-text-eyebrow: 0.8125rem;

	--zp-radius-sm: 6px;
	--zp-radius-md: 12px;
	--zp-radius-lg: 20px;
	--zp-radius-full: 999px;

	/* Luk. Jedini element koji kaže „crkva” bez križa i golubice.
	   Dvaput po stranici — više i postaje trik. */
	--zp-arch: 50% 50% var(--zp-radius-lg) var(--zp-radius-lg) /
		22% 22% var(--zp-radius-lg) var(--zp-radius-lg);

	--zp-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
	--zp-shadow-md: 0 4px 16px rgba(28, 25, 23, 0.07);
	--zp-shadow-lg: 0 16px 48px rgba(28, 25, 23, 0.1);
	--zp-shadow-xl: 0 28px 70px rgba(28, 25, 23, 0.16);

	--zp-section-pad: clamp(4rem, 9vw, 10rem);
	--zp-gutter: clamp(1.25rem, 5vw, 3rem);
	--zp-container: 1240px;

	/* Stupac teksta na podstranicama. Vrijedi i za naslov, jer naslov i tekst
	   moraju početi na istoj crti — vidi 3 · OSNOVE. */
	--zp-column: 780px;

	--zp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ═══ 3 · OSNOVE ════════════════════════════════════════════════════════ */


body.zp-theme {
	background: var(--zp-stone-50);
	color: var(--zp-ink-70);
	font-family: var(--zp-font-body);
	font-size: var(--zp-text-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.zp-theme h1,
.zp-theme h2,
.zp-theme h3,
.zp-theme h4,
.zp-theme h5 {
	font-family: var(--zp-font-display);
	font-weight: 600;
	color: var(--zp-ink);
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-wrap: balance;
}

/* Fraunces ima optičku os — koristimo je. Veliko dobiva jak kontrast i
   tanke spojeve, sitno dobiva čvršće oblike. Ne vidi se svjesno, osjeti se. */
.zp-theme h1 { font-variation-settings: "opsz" 144; font-size: var(--zp-text-display); line-height: 1.03; letter-spacing: -0.025em; }
.zp-theme h2 { font-variation-settings: "opsz" 72; font-size: var(--zp-text-h2); }
.zp-theme h3 { font-variation-settings: "opsz" 24; font-size: var(--zp-text-h3); letter-spacing: -0.01em; line-height: 1.25; }
.zp-theme h4 { font-variation-settings: "opsz" 18; font-size: 1.125rem; line-height: 1.35; }

.zp-theme p { max-width: 68ch; }

/* ── Podstranice: jedan stupac ────────────────────────────────────────────
   WordPressov „constrained” raspored svakoj djeci dodaje
   margin-left/right:auto **s !important**, pa se uži element sam centrira
   unutar šireg spremnika. Naslov (bez ograničenja) ostaje pun, odlomak
   (68ch) se povuče prema sredini, i nastanu dvije različite lijeve linije.

   Nadjačavati tuđi !important je gubitnička igra. Umjesto toga cijeli
   stupac dobiva istu širinu: kad su svi elementi jednako široki, njihovo
   automatsko centriranje daje isti lijevi rub. Pune širine ostaju pune. */
.zp-theme:not(.home) .entry-content > * {
	max-width: var(--zp-column);
}
.zp-theme:not(.home) .entry-content > p,
.zp-theme:not(.home) .entry-content > ul,
.zp-theme:not(.home) .entry-content > ol {
	max-width: var(--zp-column);
}
.zp-theme:not(.home) .entry-content > .alignfull,
.zp-theme:not(.home) .entry-content > .alignwide,
.zp-theme:not(.home) .entry-content > .zp-section {
	max-width: none;
}

/* Naslov stranice nije u .entry-content — Blocksy ga ispisuje iznad članka, u
   vlastitom spremniku (1290 px na stranicama, 750 px na objavama). Zato ga
   gornje pravilo nije hvatalo: tekst je počinjao na 780, a naslov je visio
   dvjesto piksela ulijevo, kao da pripada drugoj stranici.

   Spremnik ima automatske margine, pa je dovoljno izjednačiti širinu — obje
   se onda centriraju na istu lijevu crtu. Arhive i pojedinačni događaji imaju
   vlastite predloške bez .hero-section i ovo ih ne dira. */
.zp-theme:not(.home) .hero-section.is-width-constrained {
	max-width: var(--zp-column);
}

.zp-theme a { color: var(--zp-gold-ink); text-underline-offset: 0.18em; }
.zp-theme a:hover { color: var(--zp-ink); }

.zp-theme :focus-visible {
	outline: 2px solid var(--zp-sacral);
	outline-offset: 2px;
	border-radius: 2px;
}

.zp-theme ::selection { background: var(--zp-gold-wash); color: var(--zp-ink); }

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

.zp-theme table { font-variant-numeric: tabular-nums; }


/* ═══ 4 · RASPORED ══════════════════════════════════════════════════════ */


/* Sekcije se dodiruju. WordPress između blokova ubacuje --wp--style--block-gap,
   što je između obojenih ploha ostavljalo svijetle pruge. Sekcije razmak nose
   u vlastitom paddingu, pa im vanjski ne treba. */
.zp-theme .entry-content > .zp-section,
.zp-theme .entry-content > .wp-block-cover { margin-block: 0; }

.zp-section { padding-block: var(--zp-section-pad); }
.zp-section--alt { background: var(--zp-stone-100); }
.zp-section--dark { background: var(--zp-sacral); color: #e8eeef; }
.zp-section--dark h2,
.zp-section--dark h3 { color: #fff; }

/* Jedna tamna ploha po stranici. Bez nje je sve poslije hero sekcije jednako
   svijetlo i stranica se stopi u jednu dugu plohu; s njom oko dobije oslonac
   na sredini. Ista ugljena boja kao podnožje, pa je i dalje samo jedna. */
.zp-section--deep {
	background: var(--zp-char);
	color: var(--zp-char-text);
}
.zp-section--deep h2,
.zp-section--deep h3 { color: #fff; }
.zp-section--deep .zp-eyebrow { color: var(--zp-gold-light); }
.zp-section--deep .zp-muted { color: var(--zp-char-muted); }
.zp-section--deep .zp-btn--secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
}
.zp-section--deep .zp-btn--secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.zp-section--deep .wp-block-button.zp-btn--secondary > .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
}
.zp-section--deep .wp-block-button.zp-btn--secondary > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.zp-wrap {
	max-width: var(--zp-container);
	margin-inline: auto;
	padding-inline: var(--zp-gutter);
}

.zp-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3.25rem; }
.zp-head--row {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.zp-eyebrow {
	display: block;
	font-family: var(--zp-font-body);
	font-size: var(--zp-text-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zp-ink-70);
	margin-bottom: 0.9rem;
}
/* Na tamnom --zp-gold daje 3,40:1 i jedva se nazire — ide svjetlija. */
.zp-section--dark .zp-eyebrow,
.zp-eyebrow--on-dark { color: var(--zp-gold-light); }

/* Dvotonski naslov: prva rečenica tamna, druga prigušena. Hijerarhija
   unutar jednog retka — skupo izgleda, ništa ne košta. */
.zp-muted { color: var(--zp-ink-45); }
.zp-section--dark .zp-muted { color: rgba(255, 255, 255, 0.6); }

.zp-lede { font-size: var(--zp-text-lede); color: var(--zp-ink-70); }

/* ── Uvod sekcije ────────────────────────────────────────────────────────
   Nadnaslov, naslov i uvodni tekst dijele jednu os i stoje po sredini.

   Prije su ispadali na tri različite lijeve linije, i to ne slučajno:
   WordPressov „constrained” raspored svakoj djeci dodaje margin-inline:auto,
   pa se odlomci — koje naše osnovno pravilo drži na max-width:68ch — sami
   centriraju unutar te širine, dok naslov bez ograničenja ostaje pun 1240px.
   Rezultat je bio uvučen nadnaslov, naslov skroz lijevo i uvodni tekst
   negdje između.

   Selektor gleda samo izravnu djecu .zp-wrap, pa tekst u dvostupčanim
   sekcijama (riječ župnika, povijest) ostaje lijevo poravnat kako i treba. */
.zp-section > .zp-wrap > .zp-eyebrow,
.zp-section > .zp-wrap > h2,
.zp-section > .zp-wrap > .zp-lede,
.zp-section > .zp-wrap > .wp-block-buttons {
	text-align: center;
	justify-content: center;
}

.zp-section > .zp-wrap > .zp-lede {
	max-width: 62ch;
	margin-inline: auto;
}

/* Naslov smije biti širok, ali ne preko cijele mreže — inače se u dva-tri
   retka razlomi na neujednačene duljine. */
.zp-section > .zp-wrap > h2 {
	max-width: 30ch;
	margin-inline: auto;
}


/* ═══ 5 · ZAGLAVLJE ═════════════════════════════════════════════════════ */

/* Zaglavlje je uvijek na vrhu zaslona. Na naslovnici lebdi preko fotografije
   kao pilula; čim se krene listati, pilula se slegne u punu, čvrstu traku i
   malo se snizi. Na ostalim stranicama je čvrsto od početka i priljubljeno uz
   vrh — bez ijednog piksela praznine iznad. */

.zp-theme #header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ── Blocksyjevi gumbi s ikonom ──────────────────────────────────────────
   Hamburger, povećalo, strelice podizbornika i „zatvori” dijele klasu
   ct-toggle, a Blocksy im veličinu, rub, radijus i pozadinu piše preko
   vlastitih varijabli s !important:

     [class*=ct-toggle] { border-radius: var(--toggle-button-radius) !important; … }

   Zato `border`, `background` ili `border-radius` napisani ovdje ne bi
   učinili ništa — pišu se u njegove varijable.

   Ikone su SVG i boju uzimaju iz --theme-icon-color, ne iz `color`. Bez
   ovoga ostaju Blocksyjeve zadane, škriljasto plave (#3A4F66) — jedina
   plava na stranici. */
.zp-theme #header,
.zp-theme #offcanvas {
	--theme-icon-color: var(--zp-ink-70);
	--theme-icon-hover-color: var(--zp-gold-ink);
	--theme-icon-active-color: var(--zp-gold-ink);
	--theme-link-hover-color: var(--zp-gold-ink);
	--theme-link-active-color: var(--zp-gold-ink);
}

/* Strelica podizbornika ne slijedi --theme-icon-color nego boju poveznice
   (nav[class*=menu] .ct-menu-link { --theme-icon-color: var(--theme-link-initial-color) }),
   a tu boju Blocksy ispisuje inline, izravno na <a> i na mobilni izbornik —
   nasljeđivanjem se ne može preskočiti, mora se prepisati na istom mjestu.
   U mobilnom je bila #ffffff: bijela strelica na vapnencu. */
.zp-theme #header [data-id="menu"] > ul > li > .ct-menu-link {
	--theme-link-initial-color: var(--zp-ink-70);
}
.zp-theme #offcanvas [data-id="mobile-menu"] {
	--theme-link-initial-color: var(--zp-ink);
}

/* Hamburger. Blocksy ga ostavlja kao golu ikonu 18×18 — meta premala za
   prst (WCAG 2.5.8 traži 24, praksa 44) i uz sam rub zaslona, pa se često
   promaši i izgleda kao da izbornik ne radi. */
.zp-theme #header .ct-header-trigger {
	--toggle-button-size: 44px;
	--toggle-button-padding: 0px;
	--toggle-button-radius: 50%;
	--toggle-button-border-width: 1px;
	--toggle-button-border-color: var(--zp-stone-200);
	--toggle-button-background: var(--zp-stone-100);
	--theme-icon-color: var(--zp-ink);
}
.zp-theme #header .ct-header-trigger:hover,
.zp-theme #header .ct-header-trigger[aria-expanded="true"] {
	--toggle-button-background: var(--zp-gold-wash);
	--toggle-button-border-color: var(--zp-gold);
	--theme-icon-color: var(--zp-gold-deep);
}

/* Povećalo ostaje golo — samo mu treba prostora za prst. */
.zp-theme #header .ct-header-search {
	--toggle-button-size: 40px;
	--toggle-button-padding: 0px;
}

/* Tipkovnica mora vidjeti gdje je. */
.zp-theme #header [class*="ct-toggle"]:focus-visible,
.zp-theme #offcanvas [class*="ct-toggle"]:focus-visible {
	outline: 2px solid var(--zp-gold-ink);
	outline-offset: 3px;
}

.zp-transparent-header #header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	background: transparent;
}
.zp-transparent-header #header [data-row] { background: transparent; }

/* Visina i sužavanje. Blocksy čita --height, a --shrink-height ga nadjačava,
   pa je dovoljno postaviti drugu varijablu kad se lista. */
.zp-theme #header [data-row="middle"] { --height: 80px; }
.zp-theme #header [data-row="middle"] > div {
	transition: min-height 260ms var(--zp-ease);
}

@media (min-width: 1000px) {
	.zp-theme.zp-scrolled #header [data-row="middle"] { --shrink-height: 62px; }
}

/* Traka u mirnom stanju: puna širina, čvrsta, priljubljena uz vrh. */
.zp-theme #header [data-row="middle"] {
	background: rgba(250, 248, 245, 0.94);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--zp-stone-200);
	transition: background-color 250ms var(--zp-ease), border-color 250ms var(--zp-ease);
}

.zp-theme #header [data-row="middle"] > .ct-container,
.zp-theme #header [data-row="middle"] > .ct-container-fluid {
	background: none;
	border-radius: 0;
	box-shadow: none;
	margin-top: 0;
	transition: margin 260ms var(--zp-ease), padding 260ms var(--zp-ease),
		border-radius 260ms var(--zp-ease), box-shadow 260ms var(--zp-ease),
		background-color 260ms var(--zp-ease);
}

/* Naslovnica, prije listanja: lebdeća pilula preko fotografije. */
.zp-transparent-header:not(.zp-scrolled) #header [data-row="middle"] {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: transparent;
}

.zp-transparent-header:not(.zp-scrolled) #header [data-row="middle"] > .ct-container {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-radius: var(--zp-radius-full);
	box-shadow: var(--zp-shadow-lg);
	margin-top: 1.25rem;
	padding-inline: 1.75rem;
}

/* Naslovnica počinje fotografijom preko cijele širine, pa mora krenuti od
   samog vrha. Blocksy sadržaju dodaje razmak na vrhu
   (data-vertical-spacing="top:bottom" → padding-top), što ostavlja bijelu
   prugu iznad hero sekcije i ispod lebdeće pilule. Ovdje ga poništavamo;
   razmak na dnu ostaje jer ondje ima smisla. */
.zp-transparent-header #main [data-vertical-spacing*="top"] { padding-top: 0; }
.zp-transparent-header #main > [data-vertical-spacing] { padding-top: 0; }

/* I sve što bi hero moglo odgurnuti od vrha. */
.zp-transparent-header #main,
.zp-transparent-header #main > .ct-container-full,
.zp-transparent-header #main article,
.zp-transparent-header #main .entry-content { margin-top: 0; }

.zp-transparent-header #main .entry-content > .zp-hero:first-child {
	margin-top: 0;
	margin-block-start: 0;
}

/* ── Hero fotografija ────────────────────────────────────────────────── */

/* Snimka je svijetla i zelena, a naslov bijel i velik. Ravnomjerno
   zatamnjenje ubilo bi sliku, pa idu dva preljeva: jedan slijeva, ispod
   samog teksta, i jedan odozdo. Zvonik i krajolik zadržavaju boju.

   !important je ovdje nužan, ne nemar: jezgrin cover blok boju preljeva
   upisuje u style atribut same trake, a inline stil se drukčije ne nadjačava. */
.zp-hero .wp-block-cover__background {
	background:
		linear-gradient(90deg, rgba(28, 25, 23, 0.78) 0%, rgba(28, 25, 23, 0.46) 34%,
			rgba(28, 25, 23, 0.08) 66%, rgba(28, 25, 23, 0) 100%),
		linear-gradient(180deg, rgba(28, 25, 23, 0.20) 0%, rgba(28, 25, 23, 0.10) 30%,
			rgba(28, 25, 23, 0.42) 70%, rgba(28, 25, 23, 0.80) 100%) !important;
	opacity: 1 !important;
}

.zp-hero .wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 782px) {
	/* Na uskom zaslonu tekst zauzima cijelu širinu, pa preljev slijeva nema
	   smisla — treba ravnomjernije zatamnjenje odozdo. */
	.zp-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(28, 25, 23, 0.30) 0%, rgba(28, 25, 23, 0.24) 28%,
			rgba(28, 25, 23, 0.62) 66%, rgba(28, 25, 23, 0.88) 100%) !important;
	}
}

/* Ime župe. */
.zp-theme #header .site-title,
.zp-theme #header .site-title a {
	font-family: var(--zp-font-display);
	font-variation-settings: "opsz" 18;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--zp-ink);
	text-decoration: none;
}
.zp-transparent-header:not(.zp-scrolled) #header .site-title a { color: var(--zp-ink); }

/* ── Stavke izbornika ────────────────────────────────────────────────── */

.zp-theme #header .menu > li > .ct-menu-link {
	font-family: var(--zp-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zp-ink-70);
	text-decoration: none;
	transition: color 200ms;
}
.zp-theme #header .menu > li > .ct-menu-link:hover,
.zp-theme #header .menu > li.current-menu-item > .ct-menu-link,
.zp-theme #header .menu > li.current-menu-ancestor > .ct-menu-link {
	color: var(--zp-gold-ink);
}

/* Tanka zlatna crta ispod aktivne stavke — dovoljno da se vidi gdje si,
   premalo da viče. */
.zp-theme #header .menu > li > .ct-menu-link::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 0.35rem;
	background: var(--zp-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms var(--zp-ease);
}
.zp-theme #header .menu > li:hover > .ct-menu-link::after,
.zp-theme #header .menu > li.current-menu-item > .ct-menu-link::after,
.zp-theme #header .menu > li.current-menu-ancestor > .ct-menu-link::after {
	transform: scaleX(1);
}

/* ── Padajući izbornik ───────────────────────────────────────────────── */

.zp-theme #header .sub-menu {
	min-width: 236px;
	padding: 0.5rem;
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-radius: var(--zp-radius-md);
	box-shadow: var(--zp-shadow-lg);
}

.zp-theme #header .sub-menu li { width: 100%; }

.zp-theme #header .sub-menu .ct-menu-link {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: var(--zp-radius-sm);
	font-family: var(--zp-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--zp-ink-70);
	text-decoration: none;
	transition: background-color 180ms, color 180ms;
}
.zp-theme #header .sub-menu .ct-menu-link::after { content: none; }

.zp-theme #header .sub-menu .ct-menu-link:hover,
.zp-theme #header .sub-menu .current-menu-item > .ct-menu-link {
	background: var(--zp-gold-wash);
	color: var(--zp-gold-deep);
}

/* ── Mobilni izbornik ────────────────────────────────────────────────────
   Blocksyjev zadani panel je taman, a stranica je svijetla, pa je izbornik
   izgledao kao da pripada drugoj stranici. Uz to <ul> u panelu nema klasu
   .menu (Blocksy je ispisuje praznu), pa raniji selektori nisu ni hvatali. */

/* Blocksy pozadinu panela ispisuje inline u <head> (#offcanvas .ct-panel-inner
   {background-color:rgba(18,21,25,.98)}), i to NAKON naše datoteke. Naš je
   selektor specifičniji, ali taj se inline blok pregenerira iz postavki teme
   pa se na tu razliku nije pametno oslanjati. Zato !important i literalna
   boja: panel mora biti svijetao bez obzira što Blocksy ispiše. */
.zp-theme #offcanvas .ct-panel-inner,
#offcanvas .ct-panel-inner {
	background-color: #faf8f5 !important;
	background-image: none !important;
	color: var(--zp-ink);
}

/* Zatamnjenje iza panela, da se sadržaj stranice ne miješa s izbornikom. */
.zp-theme #offcanvas::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 25, 23, 0.45);
	pointer-events: none;
}

.zp-theme #offcanvas .ct-panel-actions {
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--zp-stone-200);
}

/* Blocksy panelu zadaje --theme-icon-color: rgba(255,255,255,.7), jer je
   njegov panel taman. Naš je svijetao, pa je „zatvori” bio bijeli križić na
   vapnencu — nevidljiv. */
.zp-theme #offcanvas .ct-toggle-close {
	--toggle-button-size: 44px;
	--toggle-button-padding: 0px;
	--toggle-button-margin-block: 0px;
	--toggle-button-margin-end: 0px;
	--toggle-button-radius: 50%;
	--toggle-button-border-width: 1px;
	--toggle-button-border-color: var(--zp-stone-200);
	--toggle-button-background: var(--zp-white);
	--theme-icon-size: 12px;
	--theme-icon-color: var(--zp-ink);
}
.zp-theme #offcanvas .ct-toggle-close:hover {
	--toggle-button-background: var(--zp-stone-100);
	--theme-icon-color: var(--zp-gold-ink);
}

.zp-theme #offcanvas .ct-panel-content { padding: 0.5rem 0 2rem; }

.zp-theme #offcanvas .mobile-menu ul { list-style: none; margin: 0; padding: 0; }

.zp-theme #offcanvas .mobile-menu > ul > li {
	border-bottom: 1px solid var(--zp-stone-200);
}

/* Glavne stavke: krupno, mirno, s dovoljno prostora za palac. */
.zp-theme #offcanvas .mobile-menu > ul > li > .ct-menu-link,
.zp-theme #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0.5rem 1.5rem;
	font-family: var(--zp-font-display);
	font-variation-settings: "opsz" 24;
	font-weight: 600;
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--zp-ink);
	text-decoration: none;
}

.zp-theme #offcanvas .ct-sub-menu-parent {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.zp-theme #offcanvas .ct-sub-menu-parent > .ct-menu-link { flex: 1; }

/* Gumb za otvaranje podizbornika mora biti stvarna meta za prst — i mora se
   vidjeti. Bio je bijela strelica na vapnencu, pa se nije ni naslućivalo da
   „O župi” i „Sakramenti” imaju podstranice. */
.zp-theme #offcanvas .ct-toggle-dropdown-mobile {
	--toggle-button-size: 48px;
	--toggle-button-padding: 0px;
	--toggle-button-margin-start: auto;
	--toggle-button-margin-end: 1rem;
	--toggle-button-radius: 50%;
	--toggle-button-border-width: 1px;
	--toggle-button-border-color: var(--zp-stone-200);
	--toggle-button-background: var(--zp-white);
	--theme-icon-size: 14px;
	--theme-icon-color: var(--zp-ink-70);
}
.zp-theme #offcanvas .ct-toggle-dropdown-mobile[aria-expanded="true"] {
	--toggle-button-background: var(--zp-gold-wash);
	--toggle-button-border-color: var(--zp-gold);
	--theme-icon-color: var(--zp-gold-deep);
	/* Blocksy strelicu vrti preko svoje varijable; rotacija na samom gumbu
	   vrtjela bi i rub. */
	--toggle-icon-transform: rotate(180deg);
}

/* Podizbornik: uvučen, tiši, u tekstualnom fontu, da se hijerarhija vidi. */
.zp-theme #offcanvas .sub-menu {
	background: var(--zp-stone-100);
	padding: 0.35rem 0 0.6rem;
}
.zp-theme #offcanvas .sub-menu .ct-menu-link {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0.4rem 1.5rem 0.4rem 2.5rem;
	font-family: var(--zp-font-body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--zp-ink-70);
	text-decoration: none;
}
.zp-theme #offcanvas .sub-menu .ct-menu-link:hover,
.zp-theme #offcanvas .sub-menu .current-menu-item > .ct-menu-link { color: var(--zp-gold-ink); }

/* Trenutna stranica: tanka zlatna crta uz rub, bez vike. */
.zp-theme #offcanvas .current-menu-item > .ct-menu-link,
.zp-theme #offcanvas .current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link {
	box-shadow: inset 3px 0 0 var(--zp-gold);
	color: var(--zp-gold-ink);
}

/* ═══ 6 · SASTAVNICE ════════════════════════════════════════════════════ */

/* Gutenbergov blok stavlja klasu na omotač <div class="wp-block-button">, a
   ne na samu poveznicu. Ako se izgled napiše na omotač, unutarnji <a> zadrži
   Blocksyjev zadani gumb — i dobije se gumb unutar gumba. Zato izgled ide na
   .wp-block-button__link, a omotač ostaje samo element rasporeda. */
a.zp-btn,
button.zp-btn,
.wp-block-button.zp-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	font-family: var(--zp-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	min-height: auto;
	padding: 0.9rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--zp-radius-full);
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transform: none;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}

/* Omotač ne crta ništa. */
.wp-block-button.zp-btn {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

a.zp-btn svg,
.wp-block-button.zp-btn > .wp-block-button__link svg {
	width: 0.85rem;
	height: 0.85rem;
	transition: transform 200ms;
}
a.zp-btn:hover svg,
.wp-block-button.zp-btn:hover > .wp-block-button__link svg { transform: translateX(3px); }

/* Zlatna ispuna je --zp-gold-ink, nikad --zp-gold: bijeli natpis na svjetlijoj
   zlatnoj daje 3,85:1 i pada WCAG AA. Ovako je 5,90:1. */
a.zp-btn--primary,
button.zp-btn--primary,
.wp-block-button.zp-btn--primary > .wp-block-button__link {
	background: var(--zp-gold-ink);
	color: #fff;
	border-color: transparent;
}
a.zp-btn--primary:hover,
button.zp-btn--primary:hover,
.wp-block-button.zp-btn--primary > .wp-block-button__link:hover {
	background: var(--zp-gold-deep);
	color: #fff;
}

a.zp-btn--secondary,
button.zp-btn--secondary,
.wp-block-button.zp-btn--secondary > .wp-block-button__link {
	background: transparent;
	color: var(--zp-ink);
	border-color: var(--zp-stone-300);
}
a.zp-btn--secondary:hover,
button.zp-btn--secondary:hover,
.wp-block-button.zp-btn--secondary > .wp-block-button__link:hover {
	background: var(--zp-stone-100);
	color: var(--zp-ink);
}

a.zp-btn--light,
.wp-block-button.zp-btn--light > .wp-block-button__link {
	background: #fff;
	color: var(--zp-ink);
	border-color: transparent;
}
a.zp-btn--light:hover,
.wp-block-button.zp-btn--light > .wp-block-button__link:hover {
	background: var(--zp-stone-100);
	color: var(--zp-ink);
}

a.zp-btn--ghost,
.wp-block-button.zp-btn--ghost > .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
a.zp-btn--ghost:hover,
.wp-block-button.zp-btn--ghost > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* .zp-theme (0,2,0) namjerno: bez njega .zp-theme a (0,1,1) nadjača ovo
   pravilo (0,1,0). Trenutno postavljaju istu boju pa se ne vidi, ali čim se
   boja linka promijeni, poveznica bi tiho odlutala. */
.zp-theme .zp-tlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 500;
	font-size: var(--zp-text-sm);
	color: var(--zp-gold-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms;
}
.zp-tlink::after { content: "→"; transition: transform 200ms; }
.zp-tlink:hover { border-bottom-color: var(--zp-gold-ink); color: var(--zp-gold-ink); }
.zp-tlink:hover::after { transform: translateX(3px); }
.zp-tlink--pdf::after,
.zp-tlink--ics::after { content: "↓"; }
.zp-tlink--pdf:hover::after,
.zp-tlink--ics:hover::after { transform: translateY(2px); }

.zp-chip {
	align-self: flex-start;
	display: inline-block;
	background: var(--zp-gold-wash);
	color: var(--zp-gold-deep);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: var(--zp-radius-full);
}

/* Luk — na fotografiji župnika, na jednoj slici u galeriji, na ikonama
   sakramenata. Ne više od toga. */
.zp-arch,
.zp-arch img { border-radius: var(--zp-arch); overflow: hidden; }

/* Fotografija župnika. Blok je <figure> bez vlastite širine, pa mu treba
   reći da ispuni stupac — inače slika stoji u svojoj prirodnoj veličini i u
   uskom stupcu izgleda kao da je zaboravljena. */
.zp-foto { margin: 0; }
.zp-foto__img {
	display: block;
	width: 100%;
	height: auto;
}
.zp-foto--meko img { border-radius: var(--zp-radius-lg); }

/* Potpis ispod fotografije: ime u istom pismu kao naslovi, služba tiho ispod.
   Poravnat je s tekstom, ne sa sredinom slike — pod lukom bi centriran natpis
   izgledao kao natpis na nadgrobnoj ploči. */
/* Blocksy svaki figcaption u sadržaju centrira i steže razmak
   (.entry-content figcaption { text-align:center; margin-block:.5em 0 }).
   Ovo je potpis, ne opis slike — pripada uz lijevi rub fotografije, kao
   potpis ispod pisma. Selektor mora biti specifičniji od njegova. */
.zp-foto__potpis,
.zp-theme .entry-content .zp-foto__potpis {
	margin-block: 1rem 0;
	display: grid;
	gap: 0.15rem;
	text-align: start;
}
.zp-foto__ime {
	font-family: var(--zp-font-display);
	font-variation-settings: "opsz" 24;
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	color: var(--zp-ink);
}
.zp-foto__sluzba {
	font-size: var(--zp-text-sm);
	color: var(--zp-ink-45);
}

.zp-card-base {
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-radius: var(--zp-radius-lg);
	box-shadow: var(--zp-shadow-sm);
	transition: transform 250ms var(--zp-ease), box-shadow 250ms var(--zp-ease),
		border-color 250ms var(--zp-ease);
}


/* ═══ 7 · BLOKOVI ═══════════════════════════════════════════════════════ */


/* ── Raspored misa ───────────────────────────────────────────────────── */

.zp-mass__title { margin-bottom: 2rem; }

/* Bez okvira oko svake ćelije. Prije je izgledalo kao proračunska tablica;
   ovo je popis, a popisu trebaju samo crte između redaka. */
.zp-mass__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	/* Blocksy svakoj tablici crta okvir u hladnoj plavosivoj (#e1e8ed).
	   Jedina hladna crta na cijeloj stranici, i to oko popisa koji okvir
	   ionako ne treba. */
	border: 0;
}

.zp-mass__row + .zp-mass__row > * { border-top: 1px solid var(--zp-stone-200); }

.zp-mass__table th,
.zp-mass__table td {
	padding: 1.15rem 0;
	text-align: left;
	vertical-align: baseline;
	border: 0;
}

.zp-mass__table th {
	font-family: var(--zp-font-body);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--zp-ink);
	white-space: nowrap;
}

.zp-mass__day { display: inline; }

/* Sljedeći termin: jedna tiha oznaka umjesto bojanja cijelog retka. */
.zp-mass__badge {
	display: inline-block;
	margin-left: 0.6rem;
	padding: 0.15rem 0.55rem;
	border-radius: var(--zp-radius-full);
	background: var(--zp-gold-wash);
	color: var(--zp-gold-deep);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: 0.15em;
}

.zp-mass__row.is-next th { color: var(--zp-ink); }

.zp-mass__place {
	color: var(--zp-ink-45);
	font-size: var(--zp-text-sm);
}

.zp-mass__times {
	text-align: right;
	white-space: nowrap;
	display: flex;
	justify-content: flex-end;
	gap: 1.4rem;
}

/* Vrijeme je jedini podatak zbog kojeg je netko došao, pa je i najkrupnije. */
.zp-mass__slot { display: inline-flex; flex-direction: column; align-items: flex-end; }
.zp-mass__slot time {
	font-family: var(--zp-font-display);
	font-variation-settings: "opsz" 36;
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--zp-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.zp-mass__slot small {
	margin-top: 0.15rem;
	font-size: 0.75rem;
	color: var(--zp-ink-45);
	white-space: normal;
	text-align: right;
}

.zp-mass__foot { margin-top: 1.5rem; display: grid; gap: 1.25rem; }

.zp-mass__note {
	margin: 0;
	font-size: var(--zp-text-sm);
	color: var(--zp-ink-45);
}
.zp-mass__note span {
	font-weight: 600;
	color: var(--zp-ink-70);
}

.zp-mass__special {
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-radius: var(--zp-radius-md);
	padding: 1.25rem 1.5rem;
}
.zp-mass__special-title {
	margin: 0 0 0.85rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zp-ink-45);
}
.zp-mass__special ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.zp-mass__special li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.zp-mass__special-name { font-weight: 600; color: var(--zp-ink); }
.zp-mass__special-when { color: var(--zp-ink-70); font-variant-numeric: tabular-nums; }

/* ── Sljedeća misa ───────────────────────────────────────────────── */
.zp-next { border-radius: var(--zp-radius-lg); padding: 1.5rem 1.75rem; }

/* Kartica leži nad fotografijom čija se svjetlina ne može predvidjeti — a
   baš ovdje, nad nebom i selom, bila je najsvjetlija. Sa svijetlim staklom
   (bijela 11 %) bijeli je tekst davao 1,00:1, dakle bio je nevidljiv.
   Zato tamno staklo: nad najsvjetlijim mogućim dijelom slike sve prolazi
   AA — bijelo 8,55, zlatna 5,19, mjesto 6,39. */
.zp-next--glass {
	background: rgba(28, 25, 23, 0.78);
	backdrop-filter: blur(18px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	box-shadow: var(--zp-shadow-xl);
}
.zp-next--glass .zp-eyebrow { color: var(--zp-gold-light); }
.zp-next--glass .zp-next__when { color: #fff; }
.zp-next--glass .zp-next__where { color: var(--zp-stone-200); }
.zp-next--glass .zp-next__note { color: #c9c2ba; }
.zp-next--glass .zp-next__list dt { color: var(--zp-stone-200); opacity: 1; }
.zp-next--glass .zp-next__list dd { color: #fff; }

.zp-next--card {
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	box-shadow: var(--zp-shadow-md);
}
.zp-next--card .zp-next__when { color: var(--zp-ink); }
.zp-next--card .zp-next__where,
.zp-next--card .zp-next__note { color: var(--zp-ink-45); }

.zp-next__when {
	font-family: var(--zp-font-display);
	font-variation-settings: "opsz" 48;
	font-weight: 600;
	font-size: 1.65rem;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.zp-next__where { margin: 0.4rem 0 0; font-size: var(--zp-text-sm); }
.zp-next__note { margin: 0.25rem 0 0; font-size: 0.8125rem; font-style: italic; }
.zp-next__rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 1.1rem 0; }
.zp-next--card .zp-next__rule { border-top-color: var(--zp-stone-200); }
.zp-next__list { margin: 0; display: grid; gap: 0.5rem; font-size: var(--zp-text-sm); }
.zp-next__list div { display: flex; justify-content: space-between; gap: 1rem; }
.zp-next__list dt { color: inherit; opacity: 0.8; }
.zp-next__list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Kartice (obavijesti) ────────────────────────────────────────── */
.zp-cards { display: grid; gap: 1.5rem; }
.zp-cards--3 { grid-template-columns: repeat(3, 1fr); }
.zp-cards--2 { grid-template-columns: repeat(2, 1fr); }

.zp-card {
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-radius: var(--zp-radius-lg);
	box-shadow: var(--zp-shadow-sm);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	transition: transform 250ms var(--zp-ease), box-shadow 250ms var(--zp-ease),
		border-color 250ms var(--zp-ease);
}
.zp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--zp-shadow-md);
	border-color: var(--zp-stone-300);
}
.zp-card__title { margin: 0; }
.zp-card__title a { color: var(--zp-ink); text-decoration: none; }
.zp-card__title a:hover { color: var(--zp-gold-ink); }
.zp-card__text { margin: 0; font-size: var(--zp-text-sm); color: var(--zp-ink-70); }
.zp-card__foot {
	margin: auto 0 0;
	padding-top: 0.5rem;
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* ── Događaji ────────────────────────────────────────────────────── */
.zp-events { display: flex; flex-direction: column; gap: 1rem; }

.zp-ev {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.75rem;
	align-items: center;
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-radius: var(--zp-radius-lg);
	padding: 1.4rem 1.75rem;
	transition: border-color 250ms var(--zp-ease), box-shadow 250ms var(--zp-ease);
}
.zp-ev:hover { border-color: var(--zp-gold); box-shadow: var(--zp-shadow-md); }

.zp-ev--feast {
	border-color: var(--zp-gold);
	background: linear-gradient(180deg, var(--zp-gold-wash), var(--zp-white) 55%);
}

.zp-ev__date {
	margin: 0;
	text-align: center;
	width: 72px;
	border-right: 1px solid var(--zp-stone-200);
	padding-right: 1.5rem;
}
.zp-ev__date b {
	display: block;
	font-family: var(--zp-font-display);
	font-variation-settings: "opsz" 48;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1;
	color: var(--zp-ink);
	font-variant-numeric: tabular-nums;
}
.zp-ev__date span {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zp-ink-45);
}
.zp-ev--feast .zp-ev__date b,
.zp-ev--feast .zp-ev__date span { color: var(--zp-gold-deep); }

.zp-ev__title { margin: 0; font-size: 1.125rem; }
.zp-ev__title a { color: var(--zp-ink); text-decoration: none; }
.zp-ev__title a:hover { color: var(--zp-gold-ink); }
.zp-ev__text { margin: 0.25rem 0 0; font-size: var(--zp-text-sm); color: var(--zp-ink-70); }
.zp-ev__meta {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
	font-size: var(--zp-text-sm);
	color: var(--zp-ink-45);
	white-space: nowrap;
}
.zp-ev__time { font-weight: 600; color: var(--zp-ink); font-variant-numeric: tabular-nums; }

/* ── Sakramenti ──────────────────────────────────────────────────── */
.zp-sacs { display: grid; gap: 1rem; }
.zp-sacs--4 { grid-template-columns: repeat(4, 1fr); }
.zp-sacs--3 { grid-template-columns: repeat(3, 1fr); }
.zp-sacs--2 { grid-template-columns: repeat(2, 1fr); }

.zp-sac {
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-radius: var(--zp-radius-lg);
	padding: 1.6rem;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: transform 250ms var(--zp-ease), box-shadow 250ms var(--zp-ease),
		border-color 250ms var(--zp-ease);
}
.zp-sac:hover {
	transform: translateY(-3px);
	box-shadow: var(--zp-shadow-md);
	border-color: var(--zp-stone-300);
}
.zp-sac__icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--zp-gold-wash);
	color: var(--zp-gold-deep);
	border-radius: var(--zp-arch);
	margin-bottom: 0.4rem;
}
.zp-sac__icon svg { width: 19px; height: 19px; }
.zp-sac__title { margin: 0; font-size: 1.0625rem; }
.zp-sac__text { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--zp-ink-45); }

/* ── Galerija ────────────────────────────────────────────────────── */
.zp-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 1.1rem; }
.zp-bento--even { grid-auto-rows: 220px; }
.zp-bento--even .zp-bento__item { grid-column: span 1; grid-row: span 1; }

.zp-bento__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--zp-radius-md);
	background: var(--zp-stone-200);
	text-decoration: none;
	display: block;
}
/* Nepravilno, ali strogo poravnato — tako izgleda osmišljeno, a ne šablonski. */
.zp-bento__item--1 { grid-column: span 2; grid-row: span 2; }
.zp-bento__item--2 { grid-column: span 2; }
.zp-bento__item--5 { grid-column: span 2; }
.zp-bento__item--6 { grid-column: span 2; }

.zp-bento__img,
.zp-bento__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms var(--zp-ease);
}
.zp-bento__placeholder {
	background: linear-gradient(160deg, #ede4d6, #cfc0aa);
}
.zp-bento__item:hover .zp-bento__img { transform: scale(1.03); }

.zp-bento__caption {
	position: absolute;
	inset-inline: 0.85rem;
	bottom: 0.85rem;
	background: rgba(28, 25, 23, 0.62);
	backdrop-filter: blur(8px);
	color: #fff;
	padding: 0.7rem 0.85rem;
	border-radius: var(--zp-radius-sm);
	display: grid;
	gap: 0.15rem;
}
.zp-bento__title { font-weight: 600; font-size: var(--zp-text-sm); line-height: 1.35; }
.zp-bento__date { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }

/* Blok kontakta: kartica i karta jedna uz drugu. */
.zp-kontakt {
	display: grid;
	grid-template-columns: 44fr 56fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}
.zp-kontakt--sam { grid-template-columns: 1fr; max-width: 560px; }

@media (max-width: 900px) {
	.zp-kontakt { grid-template-columns: 1fr; }
}

/* ── Kontakt ─────────────────────────────────────────────────────────── */

/* Sekcija je svijetla, a ne tamna kao prije. Kad su i ona i podnožje bili u
   dvije nijanse iste tirkizne, razlika među njima bila je 1,37:1 pa su se
   stapali u jednu plohu. Ovako je razlika 13,99:1, a stranica ima jednu
   boju manje. */
.zp-contact-card {
	height: 100%;
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-radius: var(--zp-radius-lg);
	padding: 1.9rem 2rem;
	box-shadow: var(--zp-shadow-sm);
	display: flex;
	flex-direction: column;
}

.zp-contact-list { margin: 0; display: grid; }
.zp-contact-list div {
	display: grid;
	gap: 0.2rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--zp-stone-200);
}
.zp-contact-list div:first-child { padding-top: 0; }
.zp-contact-list div:last-child { border-bottom: 0; }
.zp-contact-list dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zp-ink-45);
}
.zp-contact-list dd {
	margin: 0;
	color: var(--zp-ink);
	font-size: 1.0625rem;
	line-height: 1.6;
}
.zp-contact-list dd a { color: var(--zp-gold-ink); text-decoration: none; }
.zp-contact-list dd a:hover { text-decoration: underline; }

.zp-contact-note {
	margin: auto 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--zp-stone-200);
	font-size: var(--zp-text-sm);
	color: var(--zp-ink-70);
}

/* ── Karta ────────────────────────────────────────────────────────── */
/* Karta se učitava sama. Omjer stranica je zadan da se raspored ne pomakne
   kad okvir stigne — bez toga sadržaj ispod poskoči za visinu karte. */
.zp-map-stupac {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.zp-map-stupac .zp-map { width: 100%; }

.zp-map {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--zp-radius-lg);
	overflow: hidden;
	background: var(--zp-stone-100);
	border: 1px solid var(--zp-stone-200);
}
.zp-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Ugradnja može zakazati kod bilo kojeg pružatelja — kod nekih posjetitelja i
   zbog blokatora. Adresa mora biti dostupna u svakom slučaju. */
.zp-map__link {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--zp-text-sm);
	color: var(--zp-gold-ink);
	text-underline-offset: 0.2em;
}


/* ── Arhive i pojedinačne stranice ───────────────────────────────────── */


.zp-archive .zp-head,
.zp-single .zp-head { margin-bottom: 3rem; }

.zp-subhead {
	font-size: var(--zp-text-h3);
	margin: 0 0 1.75rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--zp-stone-200);
}
.zp-subhead--past { margin-top: 4rem; }

/* Prošli događaji su za pamćenje, ne za planiranje — pa su i tiši. */
.zp-events--past .zp-ev { opacity: 0.78; }
.zp-events--past .zp-ev:hover { opacity: 1; }

.zp-prose { max-width: 760px; }
.zp-prose > * + * { margin-top: 1.25rem; }
.zp-prose h2 { margin-top: 2.75rem; }
.zp-prose figure { margin-inline: 0; }

.zp-content > * + * { margin-top: 1.25rem; }
.zp-content ul,
.zp-content ol { padding-left: 1.25rem; }
.zp-content li + li { margin-top: 0.4rem; }

.zp-eventmeta {
	display: grid;
	gap: 0;
	margin: 2rem 0;
	padding: 0.5rem 1.5rem;
	background: var(--zp-white);
	border: 1px solid var(--zp-stone-200);
	border-left: 3px solid var(--zp-gold);
	border-radius: var(--zp-radius-md);
}
.zp-eventmeta div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--zp-stone-200);
}
.zp-eventmeta div:last-child { border-bottom: 0; }
.zp-eventmeta dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zp-ink-45);
	padding-top: 0.2rem;
}
.zp-eventmeta dd { margin: 0; color: var(--zp-ink); font-weight: 500; }

.zp-pagination,
.zp-postnav {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 3.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--zp-stone-200);
}
.zp-postnav { justify-content: space-between; }
.zp-pagination a,
.zp-pagination span,
.zp-postnav a {
	text-decoration: none;
	font-size: var(--zp-text-sm);
	font-weight: 500;
	padding: 0.5rem 0.9rem;
	border-radius: var(--zp-radius-full);
}
.zp-pagination .current { background: var(--zp-gold-ink); color: #fff; }
.zp-pagination a:hover,
.zp-postnav a:hover { background: var(--zp-stone-100); }

@media (max-width: 640px) {
	.zp-eventmeta div { grid-template-columns: 1fr; gap: 0.2rem; }
}


/* ═══ 8 · PODNOŽJE I MOBILNA TRAKA ══════════════════════════════════════ */


/* ── Podnožje ────────────────────────────────────────────────────────── */

/* Podnožje ide odmah do sadržaja, bez razmaka. Prije je ovdje bio margin-top
   koji je propuštao boju stranice — a kako je zadnja sekcija na naslovnici
   tamna, ispadala je svijetla traka između dvije tamne plohe. Razliku nose
   nijansa (sacral → sacral-deep) i tanka crta, što je dovoljno. */
.zp-footer {
	background: var(--zp-char);
	color: var(--zp-char-text);
	padding-block: clamp(4rem, 7vw, 6.5rem) 2rem;
	margin-top: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: var(--zp-text-sm);
	line-height: 1.75;
}

/* Blocksy povlači crtu sjenom na dnu <main>; ta je crta padala točno u
   razmak iznad podnožja. Podnožje ima vlastiti rub, pa sjena ide van. */
.zp-theme .site-main { box-shadow: none; }

/* Na naslovnici zadnja sekcija je tamna i mora dodirivati podnožje — donji
   razmak omotača sadržaja bi inače ostavio svijetlu prugu. Na ostalim
   stranicama taj razmak ostaje: ondje sadržaj završava tekstom i treba zraka. */
.zp-transparent-header #main [data-vertical-spacing*="bottom"] { padding-bottom: 0; }

.zp-footer a { color: var(--zp-char-text); text-decoration: none; }
.zp-footer a:hover { color: #fff; }

.zp-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}


.zp-theme .zp-footer__name {
	margin: 0;
	font-family: var(--zp-font-display);
	font-variation-settings: "opsz" 24;
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	color: #fff;
}
.zp-footer__ded {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zp-gold-light);
}
.zp-footer__note {
	margin: 1.1rem 0 0;
	max-width: 38ch;
	color: var(--zp-char-muted);
}

.zp-theme .zp-footer__heading {
	margin: 0 0 1.15rem;
	font-family: var(--zp-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.zp-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.zp-footer__contact address {
	font-style: normal;
	margin-bottom: 0.7rem;
	color: var(--zp-char-muted);
}
.zp-footer__contact p { margin: 0 0 0.4rem; }
.zp-footer__hours { color: var(--zp-char-muted); }

.zp-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.9rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--zp-radius-full);
	font-weight: 500;
	transition: background-color 200ms, border-color 200ms;
}
.zp-footer__cta:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.45);
}

.zp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: 1.75rem;
	font-size: 0.8125rem;
	color: var(--zp-char-muted);
}
.zp-footer__copy { margin: 0; }

.zp-footer__by {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}
.zp-footer__by span { color: var(--zp-char-muted); }
.zp-footer__by a {
	display: inline-flex;
	align-items: center;
	opacity: 0.72;
	transition: opacity 200ms;
}
.zp-footer__by a:hover { opacity: 1; }

/* Logo je wordmark 754×63 — visina se zadaje, širina se računa sama. */
.zp-footer__by img {
	height: 15px;
	width: auto;
	display: block;
}

@media (max-width: 900px) {
	.zp-footer__grid { grid-template-columns: 1fr 1fr; }
	.zp-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.zp-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.zp-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Dva najčešća zadatka na mobitelu, uvijek nadohvat palca.
   Ovo je najvrjednija pojedinačna odluka za mobilni prikaz. */
.zp-actionbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
	background: rgba(250, 248, 245, 0.94);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--zp-stone-200);
	transform: translateY(100%);
	transition: transform 250ms var(--zp-ease);
}
.zp-actionbar.is-visible { transform: none; }
.zp-actionbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 48px;
	padding: 0.8rem;
	border-radius: var(--zp-radius-full);
	font-size: var(--zp-text-sm);
	font-weight: 600;
	text-decoration: none;
}
/* .zp-theme a je (0,1,1) i tukao je .zp-actionbar__primary (0,1,0), pa je
   natpis dobivao zlatnu boju linka na zlatnoj podlozi i bio nevidljiv.
   Zato .zp-theme ispred: (0,2,0) pobjeđuje. */
.zp-theme .zp-actionbar__primary,
.zp-theme .zp-actionbar__primary:hover {
	background: var(--zp-gold-ink);
	color: #fff;
}
.zp-theme .zp-actionbar__secondary,
.zp-theme .zp-actionbar__secondary:hover {
	background: var(--zp-white);
	color: var(--zp-ink);
	border: 1px solid var(--zp-stone-300);
}
.zp-theme .zp-actionbar__secondary svg { color: var(--zp-gold-ink); }
.zp-actionbar svg { width: 0.85rem; height: 0.85rem; }

@media (max-width: 768px) {
	.zp-actionbar { display: grid; }
	.zp-theme { padding-bottom: 4.5rem; }
}


/* ═══ 9 · GIBANJE ═══════════════════════════════════════════════════════ */


/* Dostojanstveno i gotovo nevidljivo. Najčešći način da župna stranica
   postane jeftina jest previše gibanja. */
.zp-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 500ms var(--zp-ease), transform 500ms var(--zp-ease);
}
.zp-reveal.is-visible { opacity: 1; transform: none; }

.zp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.zp-theme *,
	.zp-theme *::before,
	.zp-theme *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.zp-reveal { opacity: 1; transform: none; }
}


/* ── Prilagodba manjim zaslonima ─────────────────────────────────────── */


@media (max-width: 1000px) {
	.zp-cards--3 { grid-template-columns: repeat(2, 1fr); }
	.zp-sacs--4,
	.zp-sacs--3 { grid-template-columns: repeat(2, 1fr); }
	.zp-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
	.zp-bento__item--1,
	.zp-bento__item--2,
	.zp-bento__item--5,
	.zp-bento__item--6 { grid-column: span 2; }
	.zp-bento__item--1 { grid-row: span 1; }
}

@media (max-width: 640px) {
	.zp-cards--3,
	.zp-cards--2,
	.zp-sacs--4,
	.zp-sacs--3,
	.zp-sacs--2 { grid-template-columns: 1fr; }

	.zp-bento { grid-template-columns: 1fr; grid-auto-rows: 200px; }
	.zp-bento__item { grid-column: span 1 !important; grid-row: span 1 !important; }

	/* Staklo preko fotografije na 360 px nije čitljivo — natpis ide ispod. */
	.zp-bento__item { display: grid; grid-template-rows: 1fr auto; }
	.zp-bento__caption {
		position: static;
		background: var(--zp-white);
		color: var(--zp-ink);
		backdrop-filter: none;
		border-radius: 0;
	}
	.zp-bento__date { color: var(--zp-ink-45); }

	.zp-ev { grid-template-columns: auto 1fr; gap: 1.1rem; }
	.zp-ev__meta { grid-column: 2; align-items: flex-start; }

	/* Tablica misa ostaje čitljiva — publika je starija, sitan tekst je
	   stvarna prepreka, ne estetsko pitanje. */
	.zp-mass__table th { font-size: 1.0625rem; }
	.zp-mass__place { display: none; }

	/* „Ponedjeljak do petka” + oznaka „sljedeća” + dva vremena ne stanu u
	   jedan redak na 390 px. S nowrap tablica dobije minimalnu širinu veću od
	   zaslona i cijela se stranica počne micati ustranu, a desni stupac se
	   odreže — „10:00” se ne vidi. Ovdje se sve smije prelomiti.

	   Tablica ostaje tablica (bez display:block), jer čitač zaslona inače
	   izgubi vezu između dana i vremena. */
	.zp-mass__table th { white-space: normal; }
	.zp-mass__badge { margin-left: 0; margin-top: 0.35rem; display: table; }

	.zp-mass__times {
		white-space: normal;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		padding-left: 0.75rem;
	}
	.zp-mass__slot time { font-size: 1.25rem; }
	.zp-mass__slot small { max-width: 8rem; }
}


/* ═══ 10 · ISPIS ════════════════════════════════════════════════════════ */

@media print {
	/* Župa raspored često objesi na oglasnu ploču. */
	.zp-actionbar,
	#header,
	#footer,
	.zp-btn,
	.zp-tlink { display: none !important; }

	body.zp-theme { background: #fff; color: #000; font-size: 12pt; }
	.zp-mass__table { page-break-inside: avoid; }
	.zp-mass__table th,
	.zp-mass__times { color: #000; }
	.zp-reveal { opacity: 1 !important; transform: none !important; }
}