/* =========================================================================
 * B2 — Pretraga: header trigger + dropdown forma + stranica rezultata
 * Brand zelena #316747; kohezivno s bijelim izbornikom u tamnom headeru.
 * ========================================================================= */

/* ------- Header: stavka + ikona toggle ------- */
.blato-b02.menu-item {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.blato-b02-toggle {
	color: #ffffff !important;
	cursor: pointer;
}
.blato-b02-toggle .fa {
	font-size: 18px;
	line-height: 1;
}
.blato-b02-toggle:hover,
.blato-b02-toggle:focus {
	color: #316747 !important;
	background: transparent !important;
}

/* ------- Desktop/tablet: panel kao dropdown ispod ikone ------- */
.blato-b02-panel {
	display: none;
	position: absolute;
	right: -6px;
	top: calc(100% + 14px);
	z-index: 99999;
	width: 320px;
	max-width: 88vw;
	padding: 14px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
/* mali caret koji "izlazi" iz ikone prema panelu */
.blato-b02-panel::before {
	content: "";
	position: absolute;
	right: 18px;
	top: -7px;
	width: 14px;
	height: 14px;
	background: #ffffff;
	transform: rotate(45deg);
	box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.05);
}
.blato-b02-search.blato-b02-open .blato-b02-panel {
	display: block;
}

/* ------- Forma: input + gumb kao JEDNA zaobljena cjelina ------- */
.blato-b02-searchform {
	display: flex;
	align-items: stretch;
	margin: 0;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	overflow: hidden;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.blato-b02-searchform:focus-within {
	border-color: #316747;
	box-shadow: 0 0 0 3px rgba(49, 103, 71, 0.15);
}
/* dupla klasa = viša specifičnost (nadjačava theme input[type=search]) */
.blato-b02-input.blato-b02-input {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 8px 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #222222;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.blato-b02-input.blato-b02-input:focus {
	outline: none;
	box-shadow: none;
}
.blato-b02-input::-webkit-input-placeholder { color: #9a9a9a; }
.blato-b02-input::placeholder { color: #9a9a9a; opacity: 1; }
.blato-b02-submit {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 48px;
	height: 44px;
	padding: 0;
	font-size: 15px;
	color: #ffffff;
	background: #316747;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}
.blato-b02-submit:hover,
.blato-b02-submit:focus {
	background: #274f37;
	outline: none;
}

/* ------- Stranica rezultata: čisti popis naslova + linkova ------- */
.blato-b02-results {
	list-style: none;
	margin: 30px 0;
	padding: 0;
}
.blato-b02-results li {
	margin: 0 0 14px;
	padding: 0 0 14px;
	font-size: 18px;
	border-bottom: 1px solid #ececec;
}
.blato-b02-results li a {
	color: #316747;
	text-decoration: none;
}
.blato-b02-results li a:hover,
.blato-b02-results li a:focus {
	text-decoration: underline;
}
.blato-b02-noresults {
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 20px;
	text-align: center;
}
.blato-b02-noresults__icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 22px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	background: #eef3ef;
	color: #316747;
	font-size: 34px;
}
.blato-b02-noresults__title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.2;
	color: #222222;
}
.blato-b02-noresults p {
	margin: 0 auto 26px;
	max-width: 440px;
	font-size: 16px;
	line-height: 1.6;
	color: #666666;
}
.blato-b02-noresults .blato-b02-searchform {
	max-width: 420px;
	margin: 0 auto 22px;
}
.blato-b02-noresults__home {
	display: inline-block;
	color: #316747;
	font-weight: 600;
	text-decoration: none;
}
.blato-b02-noresults__home:hover,
.blato-b02-noresults__home:focus {
	text-decoration: underline;
}
/* Vertikalno centriranje poruke na praznoj pretrazi — više zraka. */
body.search-no-results .site-main {
	min-height: 52vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 40px 0;
}

/* Stranica rezultata nema sidebar (search.php ga ne zove), ali tema i dalje
   stavlja body.right-sidebar pa je #primary 69.5% sa ~30% praznine desno.
   Tema ima override za .error404 ali NE i za .search -> dodajemo ga. */
body.search #primary,
body.search-results #primary,
body.search-no-results #primary {
	width: 100%;
	float: none;
}

/* ------------------------------------------------------------------ *
 * TABLET 768–1023
 * ------------------------------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.blato-b02-toggle .fa {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------ *
 * MOBITEL ≤767: forma inline u otvorenom izborniku. Moderno, zaobljeno
 * translucent polje uklopljeno u tamni meni; bez toggle ikone i bez
 * desktop careta. Tap meta ≥48px, font ≥16px (bez iOS zooma).
 * ------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
	.blato-b02.menu-item {
		display: block;
	}
	/* Meni je već otvoren -> polje je uvijek vidljivo; ikona toggle nije
	   potrebna. (Nadjačaj theme pravilo koje forsira display na <a>.) */
	.blato-b02.menu-item .blato-b02-toggle {
		display: none !important;
	}
	/* Desktop caret (bijeli romb) ne pripada inline mobilnom panelu. */
	.blato-b02-panel::before {
		content: none;
		display: none;
	}
	.blato-b02-panel {
		display: block !important;
		position: static;
		width: auto;
		max-width: none;
		padding: 20px 16px;
		background: transparent;
		box-shadow: none;
	}
	/* Polje: suptilno translucent, zaobljeno, uklopljeno u tamni meni.
	   VAŽNO: scoped na .blato-b02-panel (header meni) da NE utječe na formu
	   pretrage na stranici rezultata / 404 (svijetla podloga -> bijeli tekst
	   bi tamo nestao). Tamo se koristi zadani (desktop) izgled forme. */
	.blato-b02-panel .blato-b02-searchform {
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 12px;
	}
	.blato-b02-panel .blato-b02-searchform:focus-within {
		border-color: #4e9e6f;
		background: rgba(255, 255, 255, 0.10);
		box-shadow: 0 0 0 3px rgba(78, 158, 111, 0.28);
	}
	.blato-b02-panel .blato-b02-input.blato-b02-input {
		height: 48px;
		padding: 8px 16px;
		font-size: 16px;
		color: #ffffff;
		background: transparent;
	}
	.blato-b02-panel .blato-b02-input.blato-b02-input::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.55);
	}
	.blato-b02-panel .blato-b02-input.blato-b02-input::placeholder {
		color: rgba(255, 255, 255, 0.55);
		opacity: 1;
	}
	.blato-b02-panel .blato-b02-submit {
		width: 52px;
		height: 48px;
		font-size: 16px;
		background: #316747;
	}
	.blato-b02-panel .blato-b02-submit:hover,
	.blato-b02-panel .blato-b02-submit:focus {
		background: #274f37;
	}
}