/* HPD Header - sticky: na scroll logo -> tekst "HPD BILOGORA", smanjena visina.
   Prijelazi (fade + kolaps loga, fade-in teksta, animacija paddinga) da nema
   skokova iz jednog izgleda u drugi. */

.site-header {
	transition: padding 0.35s ease;
}

/* Sentinel (tema ga postavlja na visinu headera) prati header bez vlastite
   tranzicije - header.js ga pise sinkrono/pollingom pa fiksni header nikad
   ne prekrije sadrzaj tokom prijelaza. */

/* Logo: glatko se gubi i kolabira kad header postane "stuck". */
.site-branding img,
.site-branding .custom-logo-wrapper img {
	transition: max-height 0.35s ease, opacity 0.25s ease;
}

.site-branding a {
	position: relative;
	display: inline-block;
}

/* Tekst je uvijek prisutan (absolute, bez utjecaja na layout), ali nevidljiv
   dok header nije "stuck" - fade-in umjesto skoka. */
.site-branding a::after {
	content: "HPD BILOGORA";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.35s ease;
	font-family: Montserrat, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	color: #2d2d2d;
	white-space: nowrap;
	pointer-events: none;
}

/* Kad je header "stuck" (tema dodaje klasu .stuck cim se scrolla):
   logo se sklopi na 0 i postane nevidljiv, tekst se pojavi. */
.site-header.stuck .site-branding img,
.site-header.stuck .site-branding .custom-logo-wrapper img {
	max-height: 0 !important;
	opacity: 0 !important;
}
.site-header.stuck .site-branding a::after {
	opacity: 1;
}

/* Smanji visinu headera u stuck stanju (tema inline postavlja padding;
   !important pobjedjuje inline style). */
.site-header.stuck {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Desktop: na vrhu smanji logo za ~1/3 (header 317 -> ~211px). */
@media (min-width: 781px) {
	.site-header:not(.stuck) .site-branding img,
	.site-header:not(.stuck) .site-branding .custom-logo-wrapper img {
		max-height: 160px;
		width: auto !important;
	}
}

/* Mobilni: manji tekst i jos nizi header. */
@media (max-width: 780px) {
	.site-branding a::after {
		font-size: 18px;
	}
	.site-header.stuck {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}

	/* Na vrhu (jos nije sticky) smanji logo i padding da header ne
	   pojede ekran na mobitelu. */
	.site-header:not(.stuck) {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	.site-header:not(.stuck) .site-branding img,
	.site-header:not(.stuck) .site-branding .custom-logo-wrapper img {
		max-height: 80px;
		width: auto !important;
	}
}