/**
 * Kontakt blok na naslovnoj strani.
 *
 * Prati tamnu paletu teme (#1d1d1d podloga, #3bc492 akcenat).
 * Telefoni su najkrupniji element bloka namerno — to je razlog zbog kog
 * neko otvara ovaj sajt, često noću i sa telefona.
 */

.sk-kontakt {
	--sk-podloga: #1d1d1d;
	--sk-povrsina: #262626;
	--sk-linija: #3a3a3a;
	--sk-tekst: #f2f0ed;
	--sk-prigusen: #a8a39c;
	--sk-akcenat: #3bc492;
	--sk-fokus: #7fd8f7;

	/* Providno: slika u zaglavlju i njen gradijent ostaju vidljivi iza bloka,
	   kao što je stari naslov sajta i stajao preko slike. Ispod slike se
	   nastavlja ista boja sa <body>, pa prelaz nema šav. */
	background: transparent;
	/* Razmak zamenjuje margin:190px koji je nosio uklonjeni .header blok.
	   Mora margin, ne padding: padding bi ostao deo kutije sekcije i
	   presretao bi klikove na SR/HU dugmad iznad, iako je providan. */
	margin-top: clamp(150px, 20vh, 230px);
	padding: 0 24px 72px;
	color: var(--sk-tekst);
	/* Centabel je font teme (@font-face u style.css). */
	font-family: Centabel, Georgia, "Times New Roman", serif;

	/* .header-image i njegov :after su position:absolute sa z-index 1 i 2,
	   pa bi inače prekrili vrh ovog bloka. */
	position: relative;
	z-index: 3;
}

/* Prebacivač jezika je position:absolute sa z-index:2 i stoji iznad ovog
   bloka na strani — mora i u slojevima, inače ga blok prekrije.
   Selektor je sa `body` namerno: ovaj fajl se učitava pre style.css teme,
   pa bi goli #category-menu izgubio od temine deklaracije. */
body #category-menu {
	z-index: 4;
}

.sk-kontakt__unutra {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

/* -------------------------------------------------- Zaglavlje */

.sk-kontakt__zaglavlje {
	margin-bottom: 40px;
}

.sk-kontakt__naziv {
	margin: 0;
	font-size: clamp(22px, 1rem + 2.2vw, 34px);
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sk-tekst);
	/* Tekst stoji preko slike u zaglavlju — senka čuva čitljivost. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.sk-kontakt__slogan {
	margin: 14px auto 0;
	max-width: 36em;
	font-size: clamp(14px, 0.9rem + 0.3vw, 17px);
	line-height: 1.5;
	color: var(--sk-tekst);
	opacity: 0.85;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* -------------------------------------------------- Telefoni */

.sk-kontakt__telefoni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-bottom: 30px;
}

.sk-telefon {
	flex: 1 1 280px;
	max-width: 360px;
	background: var(--sk-povrsina);
	border: 1px solid var(--sk-linija);
	padding: 20px 18px 16px;
}

.sk-telefon__broj {
	display: block;
	font-size: clamp(21px, 1rem + 1.6vw, 28px);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sk-tekst);
	text-decoration: none;
	/* Velika dodirna površina — blok se koristi uglavnom sa telefona. */
	padding: 10px 6px;
	transition: color 160ms ease;
}

.sk-telefon__broj:hover,
.sk-telefon__broj:focus-visible {
	color: var(--sk-akcenat);
}

.sk-telefon__broj:focus-visible {
	outline: 2px solid var(--sk-fokus);
	outline-offset: 3px;
}

.sk-telefon__ikona {
	margin-right: 8px;
	color: var(--sk-akcenat);
	font-size: 0.8em;
}

.sk-telefon__kanali {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--sk-linija);
}

.sk-telefon__kanali a {
	display: inline-block;
	padding: 7px 14px;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sk-prigusen);
	border: 1px solid var(--sk-linija);
	transition: color 160ms ease, border-color 160ms ease;
}

.sk-telefon__kanali a:hover,
.sk-telefon__kanali a:focus-visible {
	color: var(--sk-akcenat);
	border-color: var(--sk-akcenat);
}

.sk-telefon__kanali a:focus-visible {
	outline: 2px solid var(--sk-fokus);
	outline-offset: 2px;
}

/* -------------------------------------------------- Mail */

.sk-kontakt__mail {
	margin: 0 0 44px;
	font-size: 15px;
}

.sk-oznaka {
	display: inline-block;
	margin-right: 8px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sk-prigusen);
}

.sk-kontakt__mail a {
	color: var(--sk-tekst);
	text-decoration: none;
	border-bottom: 1px solid var(--sk-linija);
	padding-bottom: 2px;
}

.sk-kontakt__mail a:hover,
.sk-kontakt__mail a:focus-visible {
	color: var(--sk-akcenat);
	border-bottom-color: var(--sk-akcenat);
}

/* -------------------------------------------------- Radno vreme */

.sk-kontakt__vreme {
	padding-top: 34px;
	border-top: 1px solid var(--sk-linija);
}

.sk-kontakt__podnaslov {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sk-prigusen);
}

.sk-vreme {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 44px;
	margin: 0;
}

.sk-vreme__red {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.sk-vreme dt {
	font-size: 14px;
	color: var(--sk-prigusen);
}

.sk-vreme dd {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--sk-tekst);
}

/* -------------------------------------------------- Dežurstvo */

/* Izdvojeno od radnog vremena: ovo je poziv na akciju, ne informacija. */
.sk-kontakt__dezurstvo {
	margin: 34px auto 0;
	max-width: 46em;
	padding: 18px 22px;
	background: rgba(59, 196, 146, 0.08);
	border: 1px solid var(--sk-akcenat);
	font-size: clamp(14px, 0.9rem + 0.35vw, 17px);
	line-height: 1.5;
	color: var(--sk-tekst);
}

/* -------------------------------------------------- Responsive */

@media screen and (max-width: 600px) {
	.sk-kontakt {
		/* Na telefonu su SR/HU dugmad manja i niže, pa treba manji razmak. */
		margin-top: clamp(120px, 17vh, 175px);
		padding: 0 18px 52px;
	}

	.sk-kontakt__telefoni {
		gap: 14px;
	}

	.sk-telefon {
		flex: 1 1 100%;
		max-width: none;
	}

	.sk-vreme {
		gap: 10px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-telefon__broj,
	.sk-telefon__kanali a {
		transition: none;
	}
}

/* Tema nema garantovano .screen-reader-text. */
.sk-kontakt .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}