/* Zaglavlje: Site Header.dc.html. Mobitel do 1023 px, desktop od 1024 px. */

.hr-header { background: var(--c-bg); line-height: normal; } /* predložak ne postavlja prored */

.hr-ikonica {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-ink);
	text-decoration: none;
	cursor: pointer;
}

/* ---------- mobitel ---------- */

.hr-topbar,
.hr-nav,
.hr-header__jezik,
.hr-header__tekst,
.hr-trazilica__gumb,
.hr-brojcanik--desk { display: none; }

.hr-header__glavni {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 80px; /* predložak: logo u sredini između izbornika i ikona, ne ekrana */
	grid-template-areas: "izbornik logo akcije" "trazi trazi trazi";
	align-items: center;
	padding: 6px 8px 0;
}

.hr-header__izbornik { grid-area: izbornik; width: 44px; height: 44px; }

.hr-logo {
	grid-area: logo;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	color: var(--c-ink);
	text-align: center;
	text-decoration: none;
}
.hr-logo__ime {
	font-family: var(--f-display);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -.01em;
}
.hr-logo__podnaslov {
	margin-top: 4px;
	font-size: 8.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-ink-2);
}

.hr-header__akcije {
	grid-area: akcije;
	display: flex;
	justify-content: flex-end;
}
.hr-header__veza { position: relative; width: 40px; height: 44px; }

.hr-brojcanik[hidden] { display: none !important; }
.hr-brojcanik--mob {
	position: absolute;
	top: 6px;
	right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--c-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.hr-trazilica {
	grid-area: trazi;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px; /* 46 + okvir: predložak crta content-box */
	margin: 8px 8px 12px; /* s paddingom reda daje 16 px sa strane */
	padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-field);
	background: var(--c-bg-warm);
}
.hr-trazilica__ikona { flex: none; width: 20px; height: 20px; color: var(--c-ink); }
.hr-trazilica__polje {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 15px;
	color: var(--c-ink);
}
.hr-trazilica__polje::placeholder { color: var(--c-ink-2); opacity: 1; }
.hr-trazilica:focus-within { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* mobilni izbornik (dizajn ga ne crta: panel slijeva, isti stil kao filteri) */
.hr-mob-izbornik {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(43, 37, 34, .45);
}
.hr-mob-izbornik[hidden] { display: none; }
.hr-mob-izbornik__panel {
	width: min(88vw, 360px);
	height: 100%;
	overflow-y: auto;
	padding: 8px 16px 24px;
	background: var(--c-bg);
	border-radius: 0 24px 24px 0;
}
.hr-mob-izbornik__zatvori { width: 44px; height: 44px; margin-left: -8px; }
.hr-mob-izbornik__grupa { margin-top: 16px; }
.hr-mob-izbornik__naslov {
	margin: 0 0 4px;
	font-family: var(--f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-ink-2);
}
.hr-mob-izbornik__lista { margin: 0; padding: 0; list-style: none; }
.hr-mob-izbornik__lista a {
	display: flex;
	align-items: center;
	min-height: 48px;
	border-bottom: 1px solid var(--c-hairline);
	font-size: 16px;
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
}
.hr-mob-izbornik__pod a { min-height: 40px; padding-left: 16px; font-size: 15px; font-weight: 400; color: var(--c-ink-2); }
.hr-mob-izbornik__grupa--akcije .hr-mob-izbornik__lista > li:first-child a { color: var(--c-accent); font-weight: 600; }

/* ---------- desktop ---------- */

@media (min-width: 1024px) {
	.hr-topbar { display: block; background: var(--c-ink); color: #fff; }
	.hr-topbar__red {
		display: flex;
		justify-content: space-between;
		padding-block: 10px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.35;
	}

	.hr-header__izbornik { display: none; }

	.hr-header__glavni {
		grid-template-columns: 300px minmax(0, 1fr) 300px;
		grid-template-areas: "logo trazi akcije";
		gap: 40px;
		padding: 22px var(--gutter);
	}

	.hr-logo { align-items: flex-start; text-align: left; }
	.hr-logo__ime { font-size: 26px; }
	.hr-logo__podnaslov { margin-top: 6px; font-size: 10px; letter-spacing: .2em; }

	.hr-trazilica {
		gap: 12px;
		height: 56px; /* 54 + okvir */
		margin: 0;
		padding: 0 8px 0 18px;
		border-radius: 14px;
	}
	.hr-trazilica__ikona { width: 22px; height: 22px; }
	.hr-trazilica__polje { font-size: 16px; }
	.hr-trazilica__gumb {
		display: flex;
		align-items: center;
		height: 40px;
		padding: 0 18px;
		border: 0;
		border-radius: var(--r-btn);
		background: var(--c-ink);
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.hr-header__akcije {
		align-items: center;
		gap: 22px;
		font-size: 14px;
		font-weight: 500;
	}
	.hr-header__jezik { display: flex; align-items: center; gap: 6px; }
	.hr-header__veza { width: auto; height: auto; gap: 8px; }
	.hr-header__tekst { display: inline; }
	.hr-brojcanik--mob { display: none; }
	.hr-brojcanik--desk {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: 10px;
		background: var(--c-ink);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
	}

	.hr-nav { position: relative; z-index: 40; display: block; border-bottom: 1px solid var(--c-hairline); }
	.hr-nav__red {
		display: flex;
		align-items: flex-start;
		gap: 32px;
		padding-bottom: 16px;
		font-size: 14px;
		font-weight: 500;
	}
	.hr-nav__lista { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
	/* grupa se proteže do donjeg ruba navigacije, da panel ne nestane dok miš prelazi razmak */
	.hr-nav__grupa { padding-bottom: 16px; margin-bottom: -16px; }
	.hr-nav__veza,
	.hr-nav__akcije {
		display: flex;
		align-items: center;
		padding: 6px 0;
		color: var(--c-ink);
		text-decoration: none;
		transition: box-shadow var(--t-color);
	}
	/* podcrtavanje 2 px bez dodatne visine retka (predložak: nav 48 px) */
	.hr-nav__grupa:hover > .hr-nav__veza,
	.hr-nav__grupa:focus-within > .hr-nav__veza,
	.hr-nav__grupa.current-menu-item > .hr-nav__veza { box-shadow: inset 0 -2px 0 var(--c-ink); }
	.hr-nav__grupa--akcije { margin-left: auto; }
	.hr-nav__akcije { color: var(--c-accent); font-weight: 600; }
	.hr-nav__grupa--akcije:hover > .hr-nav__akcije,
	.hr-nav__grupa--akcije:focus-within > .hr-nav__akcije { box-shadow: inset 0 -2px 0 var(--c-accent); }

	/* panel grupe: puna širina ispod navigacije (dizajn ga ne crta; tokeni iz handouta) */
	.hr-nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		visibility: hidden;
		opacity: 0;
		border-bottom: 1px solid var(--c-hairline);
		background: var(--c-bg);
		box-shadow: var(--sh-card-hover);
		transition: opacity var(--t-color), visibility 0s linear .15s;
	}
	.hr-nav__grupa:hover > .hr-nav__panel,
	.hr-nav__grupa:focus-within > .hr-nav__panel {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}
	.hr-nav__panel-red {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 24px 32px;
		padding-block: 24px 32px;
	}
	.hr-nav__kategorija {
		display: inline-block;
		margin-bottom: 8px;
		color: var(--c-ink);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}
	.hr-nav__podkategorije { margin: 0; padding: 0; list-style: none; }
	.hr-nav__podkategorije a {
		display: block;
		padding: 4px 0;
		color: var(--c-ink-2);
		font-size: 14px;
		font-weight: 400;
		text-decoration: none;
	}
	.hr-nav__kategorija:hover,
	.hr-nav__podkategorije a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
}