/**
 * Tema Zmontiram — oblikovanje, ki ga theme.json ne pokrije.
 *
 * Barve in velikosti pisav so v theme.json in so tu dosegljive kot
 * spremenljivke --wp--preset--*. Tu so le stvari, ki jih theme.json ne zna:
 * lepljiva glava, oblika kartic, pisava ikon in razpirajoče se kategorije cenika.
 */

/* --------------------------------------------------- zascita pred prelivom

   Na telefonu ne sme nic silit cez rob zaslona. Ce en sam element preseze
   sirino, se vodoravno premakne cela stran in besedilo se odreze na desni. */

img,
figure,
table,
iframe {
	max-width: 100%;
}

.zm-glava,
.zm-noga {
	max-width: 100%;
}

/* Stolpec je prozen element in ima privzeto min-width:auto — to pomeni, da
   se ne more skrciti pod naravno sirino svoje vsebine. Slika sirine 800 px
   tako razpotegne stolpec cez rob zaslona, z njim celo stran, gumb za meni
   pa konca onkraj desnega roba. */
.wp-block-column {
	min-width: 0;
}

.wp-block-columns {
	max-width: 100%;
}

/* ---------------------------------------------------------------- ikone */

.zm-ikona {
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	vertical-align: middle;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.zm-ikona-polje {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	margin: 0;
	border-radius: 8px;
	background-color: var(--wp--preset--color--povrsina);
	color: var(--wp--preset--color--poudarek);
}

.zm-ikona-velika .zm-ikona {
	font-size: 40px;
	color: var(--wp--preset--color--poudarek);
}

/* ----------------------------------------------------------------- glava */

/* Postavitev glave in navigacije je tu izrecna. Blok Navigacija svoje razrede
   postavitve (is-layout-flex) ob urejanju menija zna izgubiti, kar nogo in
   glavo razsuje v navpicen seznam s pikami. */
.zm-glava {
	position: sticky;
	top: 0;
	z-index: 50;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 12px;
	background-color: rgba(22, 19, 17, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Skupina z logotipom in imenom se sme skrciti; gumb za meni se ne.
   Brez min-width:0 dolgo ime mesta razpotegne glavo in potisne gumb
   za meni z zaslona — na telefonu meni takrat izgine. */
.zm-glava > .wp-block-group {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 0 1 auto;
}

.zm-glava > .wp-block-navigation {
	flex: 0 0 auto;
}

.zm-glava .wp-block-site-logo img {
	display: block;
}

.zm-glava .wp-block-site-title {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Gumb za odpiranje menija na telefonu. */
.zm-glava .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--poudarek);
	padding: 8px;
}

/* Navigacija nikjer ni oznaceni seznam. */
.wp-block-navigation ul,
.wp-block-navigation .wp-block-navigation__container {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Ime mesta "Montaza pohistva in hisna popravila" je dolgo 289 px. Na ozjih
   zaslonih pojé ves prostor v glavi in potisne meni cez rob. Do 900 px ga
   zato skrijemo — logotip zadostuje za prepoznavo, klik nanj pelje domov. */
@media (max-width: 900px) {
	.zm-glava .wp-block-site-title {
		display: none;
	}
}

@media (max-width: 599px) {
	.zm-glava {
		min-height: 64px;
	}

	.zm-glava .wp-block-site-logo img {
		width: 36px;
		height: 36px;
	}
}

/* Meni je viden kot vrstica pri VSEH sirinah, tudi na telefonu — brez
   gumba s tremi crtami. Da vse stiri postavke gredo na 393 px, se na ozkih
   zaslonih zmanjsa logotip, skrije ime mesta ter zozita pisava in razmik.
   Racun za 393 px: 393 - 32 robov - 32 logotip - 8 razmik = 321 px na voljo,
   postavke pri 13 px merijo okoli 182 px + 3 razmiki po 14 px = 224 px. */
@media (max-width: 900px) {
	.zm-glava .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	.zm-glava .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		position: relative;
		width: auto;
		background-color: transparent;
		padding: 0;
	}

	.zm-glava .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	/* Krizec za zapiranje sodi k prekrivnemu meniju; ko je meni vrstica,
	   nima kaj zapirati. */
	.zm-glava .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}

	.zm-glava .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
		padding: 0;
	}

	.zm-glava .wp-block-navigation {
		font-size: 13px;
	}

	.zm-glava .wp-block-site-logo img {
		width: 32px;
		height: 32px;
	}

	.zm-glava {
		min-height: 56px;
		gap: 8px;
	}
}

/* Na najozjih telefonih se postavke se malo stisnejo. */
@media (max-width: 420px) {
	.zm-glava .wp-block-navigation {
		font-size: 12px;
	}

	.zm-glava .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		gap: 10px;
	}
}

@media (min-width: 901px) {
	.zm-glava .wp-block-navigation,
	.zm-glava .wp-block-navigation .wp-block-navigation__container {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}
}

/* Odprt meni na telefonu: postavke pod seboj, na sredini. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.zm-ime a,
.zm-ime {
	color: var(--wp--preset--color--poudarek);
	text-decoration: none;
}

/* Označi trenutno stran v meniju. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a {
	color: var(--wp--preset--color--poudarek);
	font-weight: 700;
}

/* ------------------------------------------------------------------ hero */

.zm-hero-slika img {
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--delavnica);
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------- prednosti */

/* display:flex je tu izrecen namenoma. Postavitev bi sicer prisla iz
   WordPressovega razreda is-layout-flex, ki pa ga urejevalnik ob spremembi
   postavitve lahko odstrani — takrat bi se kartica razsula. */
.zm-prednost {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	align-items: center;
}

.zm-prednost h3 {
	margin: 0;
}

.zm-prednost p {
	margin: 0;
}

/* --------------------------------------------------------------- kartice */

.zm-kartica {
	background-color: var(--wp--preset--color--povrsina-nizka);
	border: 1px solid rgba(238, 189, 142, 0.2);
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
	transition: border-color 0.2s ease;
}

.zm-kartica:hover {
	border-color: rgba(238, 189, 142, 0.5);
}

.zm-kartica > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.zm-kartica-slika {
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--povrsina);
}

.zm-kartica-slika img {
	display: block;
	width: 100%;
	height: 256px;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.zm-kartica:hover .zm-kartica-slika img {
	transform: scale(1.05);
}

.zm-kartica-noga {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px;
	border-top: 1px solid rgba(238, 189, 142, 0.1);
	gap: 16px;
}

.zm-kartica-noga h3 {
	margin: 0;
}

.zm-kartica-noga h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--besedilo);
}

.zm-kartica-noga h3 a:hover {
	color: var(--wp--preset--color--poudarek);
	text-decoration: none;
}

.zm-kartica-noga p {
	margin: 0;
	color: var(--wp--preset--color--poudarek);
}

.zm-kartica:hover .zm-kartica-noga > p .zm-ikona {
	transform: translateX(4px);
}

.zm-kartica-noga .zm-ikona {
	transition: transform 0.2s ease;
	font-size: 24px;
}

/* ------------------------------------------------------- cenik (details) */

/* Kategorije stojijo ena pod drugo, vsaka cez celo sirino strani.
   Visina je samodejna: zaprta je visoka toliko kot njen naslov, odprta zraste. */
.zm-cenik-kategorija {
	height: auto;
	margin: 0;
}

.wp-block-columns .wp-block-column > .zm-cenik-kategorija {
	align-self: flex-start;
}


.zm-cenik-kategorija {
	padding: 32px;
}

.zm-cenik-kategorija > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: var(--wp--preset--font-size--naslov);
	font-weight: 600;
	color: var(--wp--preset--color--besedilo);
}

.zm-cenik-kategorija > summary::-webkit-details-marker {
	display: none;
}

.zm-cenik-kategorija > summary::after {
	content: "expand_more";
	font-family: "Material Symbols Outlined";
	font-size: 24px;
	margin-inline-start: auto;
	color: var(--wp--preset--color--modra);
	transition: transform 0.2s ease;
}

.zm-cenik-kategorija[open] > summary::after {
	transform: rotate(180deg);
}

.zm-cenik-kategorija > summary .zm-ikona {
	font-size: 40px;
	color: var(--wp--preset--color--poudarek);
}

/* Ena kategorija v vrsto. Vsak zavihek zasede celo sirino in stoji sam
   v svoji vrstici. Pravilo velja tudi za ze objavljeno vsebino, kjer so
   stolpci se razporejeni po dva ali po tri.

   Polovica strani je za tabelo cen premalo: imena storitev se prelomijo v
   tri vrstice in seznam postane neberljiv. Na telefonu je bilo se slabse —
   nasa prejsnja sirina 50% je imela enako specificnost kot pravilo jedra
   WordPressa, ki stolpce pod 782 px zlozi enega pod drugega, in ker se
   dodatno.css nalozi kasneje, je zmagala nasa: kvadratki so ostali stisnjeni
   v dva stolpca tudi na zaslonu telefona. */
.wp-block-columns.zm-cenik-vrstica,
.wp-block-columns:has(> .wp-block-column > .zm-cenik-kategorija) {
	flex-wrap: wrap;
}

.wp-block-column.zm-cenik-stolpec,
.wp-block-column:has(> .zm-cenik-kategorija) {
	flex-basis: 100% !important;
	flex-grow: 1;
}

@media (max-width: 781px) {
	.zm-cenik-kategorija {
		padding: 24px;
	}

	.zm-cenik-kategorija > summary {
		font-size: var(--wp--preset--font-size--naslov-mali);
	}

	.zm-cenik-kategorija > summary .zm-ikona {
		font-size: 32px;
	}
}

.zm-cenik-kategorija[open] > summary {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--obroba-mehka);
}

/* Na ozkih telefonih stisnemo obrobe, da tabela cen dobi prostor.
   Pri sirini 360 px odvzamejo obrobe kvadratka in strani skupaj 80 px;
   tu jih 24. */
@media (max-width: 480px) {
	.zm-cenik-kategorija {
		padding: 16px;
	}

	.zm-cenik-tabela td {
		padding: 8px 0;
	}

	.zm-cenik-tabela td:last-child {
		padding-inline-start: 8px;
	}
}

/* Sidrni skok pod lepljivo glavo. */
.zm-cenik-kategorija {
	scroll-margin-top: 96px;
}

/* --------------------------------------------------------------- tabele */

.zm-cenik-tabela table,
.zm-podatki table {
	width: 100%;
	border-collapse: collapse;
}

.zm-cenik-tabela td,
.zm-podatki td {
	border: 0;
	border-bottom: 1px solid rgba(80, 69, 59, 0.4);
	padding: 8px 0;
	vertical-align: top;
	color: var(--wp--preset--color--besedilo-mehko);
}

.zm-cenik-tabela tr:last-child td,
.zm-podatki tr:last-child td {
	border-bottom: 0;
}

/* Sirini stolpcev povemo trdno. Pri samodejni razporeditvi brskalnik
   sam izracuna najmanjso sirino iz vsebine, in ce mu ta preseze zaslon,
   tabelo razsiri — jedro WP jo nato naredi drsno. S table-layout: fixed
   tega izracuna ni: tabela je natanko tako siroka kot prostor, ki ga ima,
   vsebina pa se prelomi. To je edini nacin, ki drzi ne glede na to, kako
   dolga cena se kdaj znajde v ceniku. */
.zm-cenik-tabela table {
	table-layout: fixed;
}

.zm-cenik-tabela td:first-child {
	width: 60%;
}

.zm-cenik-tabela td:last-child {
	width: 40%;
}

/* Cena se sme prelomiti, znesek in znak za evro pa ostaneta skupaj.
   Prej je bil tu nowrap. Pri kratkih cenah to ni motilo, pri dolgih —
   "130 € (dvojni umivalnik 170 €)" v kopalnicah — pa je tabela zrasla
   cez sirino zaslona in jedro WP jo je naredilo drsno, tako da je znak
   za evro odplaval iz vidnega polja. Za nedeljivi presledek med stevilko
   in evrom poskrbi zmontiram_cene_skupaj() v functions.php. */
.zm-cenik-tabela td:last-child {
	text-align: right;
	white-space: normal;
	padding-inline-start: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--besedilo);
}

/* Ime storitve naj se prelamlja, da cena dobi prostor, ki ga rabi. */
.zm-cenik-tabela td:first-child {
	overflow-wrap: anywhere;
}

.zm-podatki td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--poudarek);
	width: 40%;
}

/* --------------------------------------------------------------- mnenja */

.zm-mnenje {
	background-color: var(--wp--preset--color--povrsina-nizka);
	border: 1px solid var(--wp--preset--color--obroba-mehka);
	border-radius: 12px;
	padding: 24px;
	height: 100%;
	box-shadow: var(--wp--preset--shadow--kartica);
}

.zm-mnenje h3 {
	margin: 0;
	color: var(--wp--preset--color--besedilo);
}

.zm-znacka {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--povrsina);
	border: 1px solid var(--wp--preset--color--obroba-mehka);
	color: var(--wp--preset--color--besedilo-mehko);
}

.zm-ocena .zm-ikona {
	color: var(--wp--preset--color--poudarek);
	font-size: 20px;
}

/* Kartice mnenj se prelivajo po tri v vrsto. Zadnja vrstica jih ima lahko
   manj kot tri — brez tega bi se osamljena kartica raztegnila cez celo
   sirino strani in izstopala med ostalimi. */
.wp-block-columns:has(> .wp-block-column > .zm-mnenje) {
	flex-wrap: wrap;
}

.wp-block-column:has(> .zm-mnenje) {
	flex: 0 1 calc(33.333% - 16px);
	min-width: 0;
}

@media (max-width: 781px) {
	.wp-block-column:has(> .zm-mnenje) {
		flex-basis: 100%;
	}
}

/* Mnenja, prenesena z Googla. Kratka koda jih izpise sama, zato nimajo
   slogov, ki jih blokom sicer prilepi urejevalnik — razmik in prelom
   povemo tu. Po tri v vrsto, na ozjem zaslonu eno pod drugim. */
.zm-mnenja-google {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 24px;
}

.zm-mnenje h3 a {
	color: inherit;
	text-decoration: none;
}

.zm-mnenje h3 a:hover,
.zm-mnenje h3 a:focus {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.zm-mnenja-google > .wp-block-column {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------------- zaupanje */

/* Ocena z MojMojstra nad karticami mnenj. Na strani je sedem kartic,
   zadovoljnih strank pa petintrideset — to je edino mesto, kjer to pise. */
.zm-zaupanje {
	margin: 0 0 32px;
	padding: 16px 24px;
	border: 1px solid var(--wp--preset--color--obroba-mehka);
	border-radius: 12px;
	background-color: var(--wp--preset--color--povrsina-nizka);
	color: var(--wp--preset--color--besedilo-mehko);
}

.zm-zaupanje strong {
	color: var(--wp--preset--color--poudarek);
	font-size: var(--wp--preset--font-size--naslov-mali);
}

.zm-zaupanje a {
	color: var(--wp--preset--color--modra);
}

/* --------------------------------------------------------- nase delo */

/* Fotografije opravljenega dela. Na straneh po storitvah ena, v galeriji
   vse skupaj v mrezi. */
.zm-slika-dela {
	margin: 0 0 32px;
}

.zm-slika-dela img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.zm-slika-dela figcaption {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--oznaka);
	color: var(--wp--preset--color--besedilo-mehko);
	text-align: center;
}

.zm-nase-delo-vsebina {
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin-inline: auto;
}

.zm-nase-delo-mreza {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 32px;
}

.zm-nase-delo-mreza .zm-slika-dela {
	margin: 0;
}

@media (max-width: 781px) {
	.zm-nase-delo-mreza {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ storitve */

/* Kazalo storitev na dnu cenika in na straneh po storitvah. Brez tega
   te strani stojijo same in Google jih tezje najde. */
.zm-storitve-vsebina {
	max-width: 720px;
	margin-inline: auto;
}

.zm-storitve h2 {
	margin-bottom: 24px;
}

.zm-storitve-seznam {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.zm-storitve-seznam li {
	margin: 0;
}

.zm-storitve-seznam a {
	display: block;
	padding: 10px 20px;
	border: 1px solid var(--wp--preset--color--obroba-mehka);
	border-radius: 999px;
	background-color: var(--wp--preset--color--povrsina-nizka);
	color: var(--wp--preset--color--besedilo);
	text-decoration: none;
}

.zm-storitve-seznam a:hover,
.zm-storitve-seznam a:focus {
	border-color: var(--wp--preset--color--modra);
	color: var(--wp--preset--color--modra);
}

/* ------------------------------------------------------- povezava naprej */

/* Vsaka stran se konca s korakom naprej, da obiskovalec ne obtici. */
.zm-naprej {
	background-color: var(--wp--preset--color--povrsina-nizka);
	border-top: 1px solid var(--wp--preset--color--obroba-mehka);
}

.zm-naprej-vsebina {
	max-width: 640px;
	margin-inline: auto;
}

.zm-naprej h2 {
	margin-bottom: 8px;
}

.zm-naprej p {
	margin-top: 0;
}

/* ---------------------------------------------------------------- baner */

.zm-baner-slika {
	margin: 0;
}

.zm-baner-slika img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--obroba-mehka);
	box-shadow: var(--wp--preset--shadow--kartica);
}

.zm-baner h2 {
	margin-top: 8px;
}

.zm-baner .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--poudarek);
	border: 1px solid var(--wp--preset--color--poudarek);
}

.zm-baner .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--poudarek);
	color: var(--wp--preset--color--na-poudarku);
}

/* -------------------------------------------------------------- kontakt */

.zm-kontakt-kartica {
	background-color: var(--wp--preset--color--povrsina-nizka);
	border: 1px solid var(--wp--preset--color--obroba-mehka);
	border-radius: 12px;
	padding: 32px 24px;
	height: 100%;
}

.zm-kontakt-vrstica {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.zm-kontakt-vrstica .zm-ikona {
	font-size: 18px;
	color: var(--wp--preset--color--poudarek);
}

/* ----------------------------------------------------------------- noga */

.zm-noga {
	text-align: center;
}

.zm-noga .wp-block-columns {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Navigacija v nogi mora biti navpicna in poravnana s svojim naslovom.
   Postavitev je tu izrecna, ker blok Navigacija ob urejanju menija zna
   izgubiti razrede postavitve, ki bi jo sicer nosili. */
.zm-noga .wp-block-navigation,
.zm-noga .wp-block-navigation .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zm-noga .wp-block-navigation-item {
	margin: 0;
}

.zm-noga .wp-block-navigation a {
	color: var(--wp--preset--color--besedilo-mehko);
}

.zm-noga .wp-block-navigation a:hover {
	color: var(--wp--preset--color--modra);
}

.zm-noga .zm-kontakt-vrstica {
	justify-content: center;
}

/* Na sirsih zaslonih stolpca stojita drug ob drugem, vsebina pa je levo
   poravnana — tako kot v izvirni zasnovi. */
@media (min-width: 782px) {
	.zm-noga .wp-block-columns {
		text-align: left;
	}

	.zm-noga .wp-block-navigation,
	.zm-noga .wp-block-navigation .wp-block-navigation__container {
		align-items: flex-start;
	}

	.zm-noga .zm-kontakt-vrstica {
		justify-content: flex-start;
	}
}

.zm-naslov-noga {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--obroba);
	margin: 0 0 4px;
}

.zm-locilo {
	max-width: 96px;
	border-color: var(--wp--preset--color--obroba-mehka);
}

/* -------------------------------------------------------------- galerija */

.zm-galerija .wp-block-image img {
	border-radius: 8px;
}

/* ----------------------------------------------------------- odzivnost */

@media (max-width: 781px) {
	.zm-kartica-slika img {
		height: 200px;
	}

	.zm-glava {
		min-height: 64px;
	}

	.zm-cenik-kategorija > summary {
		font-size: var(--wp--preset--font-size--telo-veliko);
	}
}