/* =====================================================================
   parts/header.css — Poželi želju
   Kozmetički redizajn HEADER / HERO / NAV zone. Pravac: „osveži brend".
   Zadržana narandžasto-zlatna prepoznatljivost, uglađeno i vazdušasto.

   PRAVILA:
   - Isključivo brend tokeni (--pz-*) iz child style.css :root.
     rgba() se koristi SAMO za suptilne senke/linije/overlay izvedene iz
     brenda, gde promenljiva ne može da nosi alfa kanal.
   - SAMO kozmetika (boje, borderi, radijusi, senke, tipografija, razmaci,
     hover/tranzicije). Layout struktura roditeljske teme se NE dira:
     float širine, inline-block meni, apsolutni dropdown (clip trik) i
     breakpoint 640px ostaju netaknuti.
   - Roditelj/kustomajzer neke akcente ispisuje sa !important POSLE enqueue-a;
     !important se koristi štedljivo, samo gde je nužno da nadjača.
   ===================================================================== */


/* =====================================================================
   1) TOP-BAR — UKLONJEN (korisnik: „top bar ne treba").
   Na desktopu (≥640px) cela traka i razvučena pretraga se sklanjaju.
   Na mobilnom (<640px) traka ostaje SAMO kao nosač hamburgera
   (.boton-menu-movil) — naziv i lupa se skrivaju — da mobilni meni radi.
   ===================================================================== */

@media screen and (min-width: 640px) {
	.top-bar,
	.wrapper-search-top-bar {
		display: none !important;
	}
}
@media screen and (max-width: 639px) {
	.top-bar .blog-title-wrapper,
	.top-bar .toggle-search,
	.wrapper-search-top-bar {
		display: none !important;
	}
}

/* Preostala kozmetika top-bara (važi samo za mobilni ostatak) */
.top-bar {
	/* Tamnija, toplija brend pozadina umesto sirovog #222 */
	background-color: var(--pz-header-dark);
	color: var(--pz-line-soft);
	/* Malo vazduha po horizontali; overflow:hidden iz roditelja čisti floatove */
	padding: 2px 14px;
	/* Suptilna topla donja linija (gold-derived overlay — var ne nosi alfa) */
	border-bottom: 1px solid rgba(232, 163, 61, 0.16);
	/* Umerenija tipografija (roditelj koristi 1.5rem) */
	font-size: 1.05rem;
}

/* Naziv udruženja u top-baru — blaga tipografska doterivanja */
.blog-title-wrapper {
	color: var(--pz-line-soft);
	letter-spacing: 0.01em;
}

/* --- Social ikonice --------------------------------------------------- */
.social-icon-wrapper a {
	/* Topli zlatni default, uglađen prelaz na akcenat */
	color: var(--pz-gold);
	margin-left: 0.55rem;
	transition: color 0.18s ease, transform 0.18s ease;
}
.social-icon-wrapper a:first-child {
	margin-left: 0;
}
/* Roditeljski/kustomajzer hover je već #FA4C00; dodajemo mikro-podizanje.
   !important na boji izjednačava specifičnost sa inline .social-icon-wrapper a:hover */
.social-icon-wrapper a:hover,
.social-icon-wrapper a:focus {
	color: var(--pz-accent) !important;
	transform: translateY(-1px);
}

/* --- Search toggle (lupa) --------------------------------------------- */
.toggle-search {
	/* Zlatna ikonica, zaobljena topla hover površina */
	color: var(--pz-gold);
	border-radius: var(--pz-radius-sm);
	transition: color 0.18s ease, background-color 0.18s ease;
}
.toggle-search:hover,
.toggle-search:focus {
	color: var(--pz-accent);
	background-color: rgba(250, 76, 0, 0.10); /* accent-derived overlay */
}

/* --- Razvučena search traka ispod top-bara ---------------------------- */
.wrapper-search-top-bar {
	/* Ujednačeno sa tamnom trakom umesto sivog #555 */
	background-color: var(--pz-header-dark);
	border-top: 1px solid rgba(232, 163, 61, 0.16);
	padding: 8px 14px;
}


/* =====================================================================
   2) HEADER / HERO SLIKA — PRATI ŠIRINU SAJTA (ne više full-bleed).
   Slika ostaje unutar centriranog #page.site (max-width = --pz-maxw),
   pa je uža i time PROPORCIONALNO niža (~28% manje visine nego full-bleed).
   Markup: .image-header-wrapper / .logo-header-wrapper > a > img.header-image
   ===================================================================== */

/* Sprečava eventualni horizontalni skrol. */
body {
	overflow-x: hidden;
}

.image-header-wrapper,
.logo-header-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: transparent; /* neutrališe kustomajzer podlogu */
	line-height: 0;          /* uklanja razmak ispod inline slike */
}

/* Sama slika: puna širina kontejnera, bez zaobljenja/senke/margina. */
.image-header-wrapper img.header-image,
.logo-header-wrapper img.header-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0 !important;   /* nadjačava eventualni token/roditelj */
	box-shadow: none !important;
}


/* =====================================================================
   3) NAVIGACIJA — centriran horizontalni meni (desktop ≥640px) + dropdown
   Markup: nav#site-navigation.main-navigation > ul.nav-menu > li > a
           dropdown: .main-navigation li ul (apsolutni, clip trik)
   ===================================================================== */

/* Tamna traka menija (bazno, nezavisno od breakpointa). Kustomajzer već
   dodaje `border-top:2px solid #FA4C00` — brend, zadržavamo ga. */
.main-navigation {
	background-color: var(--pz-header-dark);
}

/* Sve što utiče na horizontalni raspored zadržavamo u ISTOM 640px
   breakpointu kao roditelj, da mobilni overlay (#menu-movil) ostane čist. */
@media screen and (min-width: 640px) {

	/* Kontejner liste: ukloni svetle roditeljske linije, suptilne brend linije */
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		background: transparent;
		border-top: 1px solid rgba(232, 163, 61, 0.18);
		border-bottom: 1px solid rgba(0, 0, 0, 0.20);
	}

	/* Stavke menija — sitno, uppercase, blagi letter-spacing, uglađen prelaz */
	.main-navigation li a {
		color: var(--pz-line-soft);
		letter-spacing: 0.06em;
		transition: color 0.18s ease, box-shadow 0.18s ease;
	}

	/* Hover / fokus / aktivna stavka: akcenat + zaobljena „podvlaka"
	   preko inset box-shadow (bez pomeranja layouta, ne dira ::after caret) */
	.main-navigation li a:hover,
	.main-navigation li a:focus,
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: var(--pz-accent);
		box-shadow: inset 0 -2px 0 var(--pz-accent);
	}

	/* --- Dropdown kao kartica ---------------------------------------- */
	/* Ne diramo position/clip/width iz roditelja — samo izgled kartice.
	   Bez margin-top (da hover most ne pukne). */
	.main-navigation li ul {
		background: var(--pz-surface);
		border: 1px solid var(--pz-line);
		border-radius: var(--pz-radius-sm);
		box-shadow: var(--pz-shadow);
	}

	/* Stavke u dropdownu: čiste, sa tankim brend delilicama.
	   VAŽNO: kustomajzer POSLE nas (inline <style> u <head>) štampa
	   `.main-navigation li ul li a { background:#222; color:#eaeaea }` sa
	   ISTOM specifičnošću (0,1,4) — u remiju pobeđuje jer je kasnije u izvoru.
	   Zato ovde dižemo specifičnost preko #site-navigation i tvrdo forsiramo
	   svetlu karticu (!important na boji/pozadini/delilici). Time i beli
	   „karton" prestaje da viri — stavke su prozirne pa se vidi bela UL. */
	#site-navigation.main-navigation li ul li a {
		background: transparent !important;
		color: var(--pz-body) !important;
		border-bottom: 1px solid var(--pz-line-soft) !important;
		/* Poništava narandžastu inset podvlaku koju nasleđuje od
		   `.main-navigation li a:hover` (podvlaka sme SAMO na top-level). */
		box-shadow: none !important;
		transition: color 0.18s ease, background-color 0.18s ease;
	}
	#site-navigation.main-navigation li ul li a:hover,
	#site-navigation.main-navigation li ul li a:focus {
		background: var(--pz-surface-2) !important;
		color: var(--pz-accent) !important;
		box-shadow: none !important;
	}

	/* Zaobljeni gornji/donji uglovi da prate karticu; poslednja bez linije */
	#site-navigation.main-navigation li ul li:first-child a {
		border-top-left-radius: var(--pz-radius-sm);
		border-top-right-radius: var(--pz-radius-sm);
	}
	#site-navigation.main-navigation li ul li:last-child a {
		border-bottom: 0 !important;
		border-bottom-left-radius: var(--pz-radius-sm);
		border-bottom-right-radius: var(--pz-radius-sm);
	}
}


/* =====================================================================
   4) MOBILNI MENI — #menu-movil overlay (ispod 640px) + hamburger
   Markup: .boton-menu-movil, #menu-movil > .menu-movil-enlaces,
           .search-form-movil, .social-icon-wrapper-movil
   ===================================================================== */

/* Hamburger dugme — zlatni akcenat na hover */
.boton-menu-movil {
	color: var(--pz-line-soft);
	transition: color 0.18s ease;
}
.boton-menu-movil:hover {
	color: var(--pz-gold);
	cursor: pointer;
}

/* Overlay panel — topla brend tamna umesto #222 */
#menu-movil {
	background-color: var(--pz-header-dark);
	color: var(--pz-line-soft);
}

/* Linije stavki: suptilne brend delilice (roditelj koristi #333).
   Boja teksta u roditelju ima !important, pa hover mora isto. */
.menu-movil-enlaces li a {
	border-bottom-color: rgba(232, 163, 61, 0.16);
}
.menu-movil-enlaces li a:hover,
.menu-movil-enlaces li a:focus {
	color: var(--pz-accent) !important;
}

/* Social ikonice u mobilnom panelu — zlatni default, akcenat na hover */
.social-icon-wrapper-movil a {
	color: var(--pz-gold);
	transition: color 0.18s ease;
}
.social-icon-wrapper-movil a:hover,
.social-icon-wrapper-movil a:focus {
	color: var(--pz-accent);
}

/* Social ikonice se prikazuju u footeru — sklonjene iz top-bara i mobilnog menija. */
.top-bar .social-icon-wrapper,
.social-icon-wrapper-movil {
	display: none !important;
}