/* Sremske Nekretnine V2 - header.css
   Mobile-first navigacija: hamburger + puno-ekransko off-canvas na mobilnom,
   dvoredni tamni header (jamesedition.com referenca) od 1024px navise. */

.sn-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--sn-primary-darker);
	transition: background-color .25s ease, border-color .25s ease;
}

/* Homepage: providan header preko hero fotografije, postaje pun kad se skroluje (JS: nav.js) */
.sn-header--overlay {
	position: fixed; left: 0; right: 0;
	background: transparent;
}

.sn-header--overlay.is-scrolled { background: rgba(0,0,0,.87); }
.sn-header--overlay.is-scrolled .sn-header__row2 { border-bottom: 1px solid rgba(255,255,255,.2); }


/* --- Red 1: hamburger + logo + auth/CTA dugmad --- */
.sn-header__row1 {
	height: 64px;
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sn-space-3);
}
.sn-header__brand { display: flex; align-items: center; gap: 12px; }
.sn-logo { display: inline-flex; align-items: center; }
.sn-logo img { height: 36px; width: auto; display: block; }
.sn-header__row1-actions { display: flex; align-items: center; gap: var(--sn-space-2); flex-shrink: 0; }
.sn-header__pill {
	display: none; /* na mobilnom sakriveno, zivi u off-canvas meniju */
}
.sn-header__cta { padding-inline: var(--sn-space-3); font-size: var(--sn-text-sm); white-space: nowrap; }

/* Runda 2026-09-11: na mobilnom (ispod 1024px) 'Postavi oglas' dugme se uklanja iz
   header-a - vec postoji uvek vidljivo u donjoj mobilnoj navigacionoj traci (FAB),
   pa je duplirano. Logo se centrira u header redu na njegovo mesto (position:absolute,
   nezavisno od hamburger dugmeta i (sada praznog) actions bloka). */
.sn-header__cta { display: none; }
.sn-header__row1 { position: relative; }
.sn-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.sn-header .sn-btn--outline.sn-header__pill { color: var(--sn-white); }
.sn-header .sn-btn--outline.sn-header__pill:hover { background: var(--sn-white); color: var(--sn-primary-darker); border-color: var(--sn-white); }
.sn-icon { flex-shrink: 0; }
.sn-btn .sn-icon { margin-right: 2px; }

.sn-header__user-summary {
	display: flex; align-items: center; gap: var(--sn-space-2);
	border: var(--sn-border-width) solid var(--sn-primary);
	color: var(--sn-white);
	padding: 6px 28px;
	min-height: 44px;
	white-space: nowrap;
	text-transform: none; letter-spacing: normal; font-size: var(--sn-text-sm);
}
.sn-header__user-summary:hover { border-color: var(--sn-white); color: var(--sn-white); }
.sn-header__avatar { display: inline-flex; flex-shrink: 0; }
.sn-header__avatar img { width: 24px; height: 24px; border-radius: var(--sn-radius-accent); display: block; }
.sn-header__username { white-space: nowrap; }
.sn-nav-drop__panel--right { left: auto; right: 0; }
.sn-nav-drop__panel--right li a { white-space: nowrap; }
.sn-nav-drop__panel .sn-icon { margin-right: var(--sn-space-1); color: var(--sn-ink-500); }

/* Hamburger dugme - vidljivo do 1024px, prilagodjeno tamnoj pozadini */
.sn-nav-toggle {
	display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
	width: 44px; height: 44px; padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}
.sn-nav-toggle span { display: block; width: 20px; height: 1.6px; background: var(--sn-white); transition: transform .2s ease, opacity .2s ease; }
.sn-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sn-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sn-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Red 2: glavna navigacija ---
   Na mobilnom row2 NE sme da bude display:none - njegovo jedino dete (nav) je
   position:fixed off-canvas panel, a display:none na pretku bi ga sakrio uprkos
   fixed pozicioniranju. Umesto toga, row2/container prirodno kolabiraju na 0 visine
   jer im je jedino dete van toka (fixed), pa nema potrebe za display:none. */
/* Bez border linija na mobilnom (samo desktop dvoredni izgled ima granice - vidi 1024px+ dole). */

/* Primarni meni - MOBILE-FIRST default: puno-ekranski off-canvas panel, skriven */
.sn-primary-nav {
	position: fixed; inset: var(--sn-header-height) 0 0 0;
	background: var(--sn-white);
	transform: translateX(100%);
	transition: transform .25s ease;
	overflow-y: auto;
	padding: var(--sn-space-4) var(--sn-space-3);
	z-index: 99;
}
.sn-primary-nav.is-open { transform: translateX(0); }
.sn-primary-nav__desktop { display: none; } /* na mobilnom se prikazuje .sn-mobile-drawer umesto ovoga */
.sn-primary-nav__desktop > ul { display: flex; flex-direction: column; gap: 0; }
.sn-primary-nav__desktop > ul > li { border-bottom: var(--sn-border-width) solid var(--sn-border-color); }
.sn-primary-nav__desktop > ul > li > a {
	display: block; padding: var(--sn-space-3) var(--sn-space-1);
	font-size: var(--sn-text-lg);
	min-height: 44px;
}
.sn-primary-nav a:hover, .sn-primary-nav a:focus-visible { color: var(--sn-primary); }

body.sn-nav-open { overflow: hidden; } /* zakljucaj scroll iza off-canvas menija */

/* Padajuci podmeniji (Oglasi/E-novosti/Usluge) - <details>/<summary>, radi i mobilno i desktop */
.sn-nav-drop summary {
	list-style: none;
	cursor: pointer;
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--sn-space-3) var(--sn-space-1);
	font-size: var(--sn-text-lg);
	min-height: 44px;
}
.sn-nav-drop summary::-webkit-details-marker { display: none; }
.sn-nav-drop summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: var(--sn-space-2);
	transition: transform .2s ease;
	flex-shrink: 0;
}
.sn-nav-drop details[open] summary::after { transform: rotate(-135deg); }
.sn-nav-drop__panel { padding: 0 0 var(--sn-space-2) var(--sn-space-3); }
.sn-nav-drop__panel li a {
	display: block; padding: var(--sn-space-2) var(--sn-space-1);
	font-size: var(--sn-text-base); color: var(--sn-ink-500);
	min-height: 44px; display: flex; align-items: center;
}
.sn-nav-drop__panel li a:hover { color: var(--sn-primary); }

/* --- Mobilni JE-stil drawer meni (jamesedition.com referenca) --- */
.sn-mobile-drawer { display: block; padding-bottom: var(--sn-space-4); }

.sn-mobile-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: var(--sn-space-3); margin-bottom: var(--sn-space-3);
	border-bottom: var(--sn-border-width) solid var(--sn-border-color);
}
.sn-mobile-drawer__logo img { height: 44px; width: auto; display: block; }
.sn-mobile-drawer__close {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border: var(--sn-border-width) solid var(--sn-border-color);
	background: transparent; color: var(--sn-ink-700);
	cursor: pointer; flex-shrink: 0;
}
.sn-mobile-drawer__close:hover { color: var(--sn-primary); border-color: var(--sn-primary); }

.sn-mobile-drawer__greeting {
	margin: 0 0 var(--sn-space-4); padding: 0 var(--sn-space-1);
	font-family: var(--sn-font-serif); font-size: var(--sn-text-xl);
	color: var(--sn-ink-900);
}

.sn-mobile-drawer__section { margin-bottom: var(--sn-space-4); }
.sn-mobile-drawer__section:last-child { margin-bottom: 0; }
/* Diskretna zelena linija izmedju sekcija (blago bledi udesno) */
.sn-mobile-drawer__section + .sn-mobile-drawer__section { position: relative; padding-top: var(--sn-space-4); }
.sn-mobile-drawer__section + .sn-mobile-drawer__section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--sn-primary) 0%, rgba(88, 143, 112, 0.12) 100%); }
.sn-mobile-drawer__label {
	margin: 0 0 var(--sn-space-1); padding: 0 var(--sn-space-1);
	font-size: var(--sn-text-xs); font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--sn-ink-500);
}
.sn-mobile-drawer__item {
	display: flex; align-items: center; gap: var(--sn-space-2);
	padding: var(--sn-space-2) var(--sn-space-1);
	min-height: 44px;
	font-size: var(--sn-text-base); color: var(--sn-ink-700);
}
.sn-mobile-drawer__item .sn-icon { color: var(--sn-ink-500); flex-shrink: 0; }
.sn-mobile-drawer__item:hover, .sn-mobile-drawer__item:focus-visible { color: var(--sn-primary); }
.sn-mobile-drawer__item:hover .sn-icon, .sn-mobile-drawer__item:focus-visible .sn-icon { color: var(--sn-primary); }

/* Desktop (1024px+): dvoredni tamni header, horizontalni meni sa padajucim panelima */
@media (min-width: 1024px) {
	.sn-header__pill { display: inline-flex; }
	.sn-header__cta { display: inline-flex; }
	.sn-logo { position: static; left: auto; top: auto; transform: none; }

	.sn-header__row1 { height: 56px; }
	.sn-logo img { height: 28px; }
	.sn-logo { transform: translateY(6px); }
	/* Hamburger je iskljucivo mobilni off-canvas okidac - primarni meni je na desktopu
	   uvek vidljiv inline u row2, pa dugme na klik nema nikakav efekat (samo se ikonica
	   animira u X bez ikakve promene menija), sto deluje kao pokvareno dugme. Sakrivamo
	   ga od 1024px navise (JE referenca takodje nema hamburger na desktopu). */
	.sn-nav-toggle { display: none; }
	.sn-header__brand { gap: 8px; }
	.sn-header__row2 {
		display: block;
		border-top: 1px solid rgba(255,255,255,.2);
		border-bottom: 1px solid rgba(255,255,255,.2);
	}

	.sn-primary-nav {
		position: static; inset: auto; transform: none; overflow: visible;
		padding: 0; background: transparent;
	}
	.sn-primary-nav__desktop { display: block; }
	.sn-mobile-drawer { display: none; }

	.sn-primary-nav__desktop > ul { flex-direction: row; align-items: stretch; gap: var(--sn-space-4); }
	.sn-primary-nav__desktop > ul > li { border-bottom: none; display: flex; align-items: center; }
	.sn-primary-nav__desktop > ul > li > a {
		padding: var(--sn-space-2) 0; min-height: auto;
		font-size: var(--sn-text-sm);
		color: rgba(255,255,255,.85);
	}
	.sn-primary-nav__desktop > ul > li > a:hover { color: var(--sn-white); }

	.sn-nav-drop { position: relative; }
	.sn-nav-drop summary {
		padding: var(--sn-space-2) 0; min-height: auto;
		font-size: var(--sn-text-sm);
		color: rgba(255,255,255,.85);
	}
	.sn-nav-drop details[open] summary,
	.sn-nav-drop summary:hover { color: var(--sn-white); }
	.sn-nav-drop__panel {
		position: absolute; top: 100%; left: 0; z-index: 110;
		min-width: 220px;
		background: var(--sn-white);
		border: none;
		box-shadow: 0 12px 32px rgba(15,23,42,.16);
		padding: var(--sn-space-2) 0;
		margin-top: var(--sn-space-2);
	}
	.sn-nav-drop__panel li a { color: var(--sn-ink-700); font-size: var(--sn-text-sm); text-transform: none; letter-spacing: normal; padding: var(--sn-space-2) var(--sn-space-3); }
	.sn-nav-drop__panel li a:hover { color: var(--sn-primary); background: var(--sn-primary-tint-light); }

}

/* Override specificnosti '.sn-nav-drop summary' (padding:var(--sn-space-2) 0) - login pill mora biti sirok bez obzira na generalna dropdown pravila. */
.sn-header .sn-header__user-summary { padding: 6px 28px; }
@media (min-width: 1024px) { .sn-header .sn-header__user-summary { padding: 6px 28px; } }

/* Poruke: ikonica + badge nepročitanih */
.sn-msg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 600; line-height: 1; }
.sn-msg-badge[hidden] { display: none; }
.sn-header__msgs { display: none; position: relative; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--sn-white); }
.sn-header__msgs .sn-msg-badge { position: absolute; top: 2px; right: 0; }
.sn-nav-drop__panel .sn-msg-badge, .sn-mobile-drawer__item .sn-msg-badge { margin-left: auto; }
.sn-bn-item__icon { position: relative; }
.sn-bn-item__icon .sn-msg-badge--dot { position: absolute; top: -6px; right: -10px; }
@media (min-width: 1024px) { .sn-header__msgs { display: inline-flex; } }

.sn-header__favs { display: none; position: relative; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--sn-white); }
@media (min-width: 1024px) { .sn-header__favs { display: inline-flex; } }


/* Runda 2026-10-12: na mobilnom 'Postavi oglas' ponovo u headeru (desno od logotipa), cetvrtasto kao na desktopu; iz donje trake je uklonjeno. */
@media (max-width: 1023px) {
	.sn-header .sn-header__cta { display: inline-flex; padding: 8px 14px; font-size: 13px; line-height: 1.2; }
	.sn-header .sn-logo { position: static; left: auto; top: auto; transform: none; }
}

/* Tacka za nepročitane poruke na hamburger dugmetu (mobilni/tablet) */
.sn-nav-toggle{position:relative}
.sn-nav-toggle .sn-nav-toggle__dot{position:absolute;top:2px;right:0;min-width:11px;width:11px;height:11px;padding:0;font-size:0;border:2px solid var(--sn-primary-darker,#1f2d27);box-sizing:content-box;display:block}
.sn-nav-toggle .sn-nav-toggle__dot[hidden]{display:none}
@media (min-width:1024px){.sn-nav-toggle .sn-nav-toggle__dot{display:none}}