/*
 * PD Cjenici: javna stranica (shortcode [pd_cjenici] i blok "Cjenici poslovnica").
 *
 * Načela:
 * - Font, boje poveznica i tipografiju odlomaka preuzima od teme. Odlomci (p) i stavke popisa (li)
 *   ostaju elementi koje tema stilizira; sitni tekst je <span class="pd-cjenici__sitno"> unutar njih.
 * - Veličine u em, ne rem (teme često postavljaju html na 10px ili 62.5%).
 * - Selektori koji postavljaju razmake na p, ul, li i a imaju barem tri klase, da nadjačaju pravila
 *   teme tipa ".content.page ul li" (0,2,2).
 * - Obrubi i prigušeni tekst iz currentColor (color-mix, s rgba rezervom), pa radi i na tamnim temama.
 * - Prijelomna točka je container query na komponenti, ne širina prozora.
 */

.pd-cjenici {
	--pdc-rub: rgba(127, 127, 127, 0.3);
	--pdc-prigusen: inherit;
	--pdc-pozadina-gumba: rgba(127, 127, 127, 0.12);
	--pdc-radius: 6px;
	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	max-width: 50em;
	margin: 0 0 2em;
	overflow-wrap: break-word;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.pd-cjenici {
		--pdc-rub: color-mix(in srgb, currentColor 16%, transparent);
		--pdc-prigusen: color-mix(in srgb, currentColor 65%, transparent);
		--pdc-pozadina-gumba: color-mix(in srgb, currentColor 8%, transparent);
	}
}

.pd-cjenici .pd-cjenici__sitno {
	font-size: 0.8em;
	line-height: 1.5;
	color: var(--pdc-prigusen);
}

.pd-cjenici .pd-cjenici__obveznik.pd-cjenici__obveznik {
	margin: 0 0 1.75em;
}

/* Skokovi na poslovnice (kad ih je više) */
.pd-cjenici .pd-cjenici__sadrzaj .pd-cjenici__skokovi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.25em;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.pd-cjenici .pd-cjenici__skokovi .pd-cjenici__skok {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd-cjenici .pd-cjenici__skokovi .pd-cjenici__skok::before {
	content: none;
}

/* Poslovnica */
.pd-cjenici .pd-cjenici__poslovnica {
	margin: 0 0 2.25em;
	padding: 0;
	border: 0;
}

.pd-cjenici .pd-cjenici__naslov.pd-cjenici__naslov {
	margin: 0 0 0.1em;
}

.pd-cjenici .pd-cjenici__adresa.pd-cjenici__adresa {
	margin: 0 0 1em;
}

.pd-cjenici .pd-cjenici__zatvoreno.pd-cjenici__zatvoreno {
	margin: 0 0 1em;
	font-weight: 600;
}

.pd-cjenici .pd-cjenici__prazno.pd-cjenici__prazno {
	margin: 0 0 1em;
}

/* Važeći cjenik */
.pd-cjenici .pd-cjenici__kartica {
	margin: 0 0 1.75em;
	padding: 1.1em 1.25em 1.25em;
	border: 1px solid var(--pdc-rub);
	border-radius: var(--pdc-radius);
}

/* Vlastita veličina: h3 teme zna biti veći od h2. */
.pd-cjenici .pd-cjenici__podnaslov.pd-cjenici__podnaslov {
	margin: 0 0 0.2em;
	font-size: 1.45em;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
}

.pd-cjenici .pd-cjenici__kartica .pd-cjenici__meta {
	margin: 0 0 0.9em;
}

.pd-cjenici .pd-cjenici__kartica .pd-cjenici__gumb {
	display: inline-block;
	padding: 0.65em 1.4em;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s;
}

.pd-cjenici .pd-cjenici__kartica .pd-cjenici__gumb:hover,
.pd-cjenici .pd-cjenici__kartica .pd-cjenici__gumb:focus-visible {
	background: var(--pdc-pozadina-gumba);
	text-decoration: none;
}

/* Arhiva */
.pd-cjenici .pd-cjenici__napomena.pd-cjenici__napomena {
	margin: 0 0 0.8em;
}

.pd-cjenici .pd-cjenici__popis.pd-cjenici__popis {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--pdc-rub);
	border-radius: var(--pdc-radius);
}

/* Opis se po potrebi lomi u svom stupcu, a poveznica ostaje desno u prvom retku. */
.pd-cjenici .pd-cjenici__popis .pd-cjenici__red {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	margin: 0;
	padding: 0.7em 1.25em;
	list-style: none;
	border-top: 1px solid var(--pdc-rub);
}

.pd-cjenici .pd-cjenici__popis .pd-cjenici__red:first-child {
	border-top: 0;
}

.pd-cjenici .pd-cjenici__popis .pd-cjenici__red::before {
	content: none;
}

.pd-cjenici .pd-cjenici__popis .pd-cjenici__opis {
	flex: 1 1 auto;
	min-width: 0;
}

.pd-cjenici .pd-cjenici__popis .pd-cjenici__red a {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
	text-decoration: none;
}

.pd-cjenici .pd-cjenici__popis .pd-cjenici__red a:hover,
.pd-cjenici .pd-cjenici__popis .pd-cjenici__red a:focus-visible {
	text-decoration: underline;
}

.pd-cjenici .pd-cjenici__strojno.pd-cjenici__strojno {
	margin: 1.5em 0 0;
}

/* Usko: 34 em (kao u prijedlogu, za temu s fontom 14 px to je 476 px), ali najviše 480 px, da teme s
   velikim fontom (npr. 22 px) ne dobiju gumb preko cijele širine i na računalu. */
@container (max-width: 34em) and (max-width: 480px) {
	.pd-cjenici .pd-cjenici__kartica,
	.pd-cjenici .pd-cjenici__popis .pd-cjenici__red {
		padding-left: 1em;
		padding-right: 1em;
	}

	.pd-cjenici .pd-cjenici__kartica .pd-cjenici__gumb {
		display: block;
		text-align: center;
	}
}

/* Napomena administratoru dok nisu upisani tvrtka i OIB (vide je samo administratori). */
.pd-cjenici-napomena {
	padding: 0.75em 1em;
	border-left: 4px solid #d63638;
	background: rgba(214, 54, 56, 0.08);
}