/* ============================================================
   responsive.css — odzivni sloj (Raven A)
   Nalozen PO /stil.css. Namizje (sirina > 992px) ostane
   NESPREMENJENO — vsa pravila spodaj veljajo le na ozjih
   zaslonih (tablice in telefoni). Brez prepisa predlog.
   ============================================================ */

/* Gumb "hamburger" — na namizju skrit, na mobilnem ga pokaze @media spodaj. */
.menu-toggle {
	display: none;
	width: 100%;
	margin: 8px 0 0 0;
	padding: 14px 16px;
	border: 0;
	background: #6C2580;
	color: #fff;
	font: bold 18px Arial, Helvetica, sans-serif;
	text-align: left;
	cursor: pointer;
}
/* Gumb (+/-) za odpiranje podmenija (doda ga js/menu.js) — na namizju skrit. */
.submenu-toggle { display: none; }

@media (max-width: 992px) {

	/* --- osnovni model + fluidne slike (le na ozkih zaslonih) --- */
	*, *::before, *::after { box-sizing: border-box; }
	img { max-width: 100%; height: auto; }

	/* --- vsebnik in glava --- */
	#container, #navrh, #navrh_okvir { width: auto; max-width: 100%; }
	#container_glave { height: auto; background: none; padding-bottom: 8px; }
	#glava { position: static; }
	#logo {
		position: static; margin: 6px auto;
		width: 120px; height: 163px;
		background-size: contain; background-repeat: no-repeat; background-position: center;
	}
	#logo a { width: 100%; height: 100%; }

	/* --- domaca stran (vstopna): stolpca enega pod drugim --- */
	#telo { width: auto; background: none; }
	#vsebina, #logobox,
	#leva_polovica, #desna_polovica {
		float: none; width: auto; clear: both;
		margin: 0 0 16px 0; padding-left: 12px; padding-right: 12px;
	}

	/* vgrajeni video / zemljevidi naj bodo fluidni */
	.sam_video { width: auto; max-width: 100%; height: auto; }
	iframe { max-width: 100%; }

	/* --- vsebinske strani: 3 stolpci -> en stolpec --- */
	#container_vsebine { background: none; margin-top: 12px; }
	#levi_stolpec,
	#srednji_stolpec_ceztri,
	#srednji_stolpec_cezstiri,
	#desni_stolpec {
		float: none; width: auto; clear: both;
		margin: 0 0 16px 0; padding-left: 12px; padding-right: 12px;
		overflow-wrap: break-word; word-wrap: break-word;
	}

	/* --- tipografija za mobilno (vecje, levo poravnano) --- */
	body { font-size: 16px; }
	p,
	#srednji_stolpec_ceztri ul,
	#srednji_stolpec_ceztri ol {
		font-size: 16px; line-height: 1.6; text-align: left;
	}

	/* --- tabele: naj se vodoravno drsijo, ne razbijejo strani --- */
	#srednji_stolpec_ceztri table,
	#srednji_stolpec_cezstiri table,
	#vsebina table {
		display: block; width: 100%; max-width: 100%;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
	}

	/* --- galerije: fluidne, samodejno prelomljene vrste --- */
	.seznam_galerij { display: flex; flex-wrap: wrap; gap: 8px; width: auto; }
	.seznam_galerij li,
	.seznam_galerij li.margin_desno { float: none; width: auto; margin: 0; }
	.okvir_thumbnaila,
	.okvir_thumbnaila_zakljucek { width: auto; height: auto; }
	.divider_galerij { display: none; }

	/* --- levi (razdelcni) meni: polna sirina, brez fiksnega sivega okvirja --- */
	#levi_meni, #levi_meni li { width: auto; }
	#levi_meni { background: none; }
	.prvi_nivo, .prvi_nivo_selected, .prvi_nivo_prvi,
	.drugi_nivo, .drugi_nivo_selected,
	.tretji_nivo, .tretji_nivo_selected {
		width: auto; font-size: 16px; line-height: 1.4;
		padding-top: 12px; padding-bottom: 12px; min-height: 44px;
	}

	/* --- desni stolpec / rubrike (NVO Dogodki, Aktualni razpisi, Kontakti):
	   odstrani fiksni (172px) sivi okrasni pas in tab, ki sta na sirokem
	   zaslonu pustila prazne sive bloke --- */
	#rubrika_na_desni { background: none; }
	.kontakti {
		width: auto; height: auto;
		margin: 16px 0 0 0; padding: 8px 12px;
		background: #6C2580;
	}
	.kontakti span { padding: 0; }
	.pikce_spodaj { background: none; border-bottom: 1px dotted #ccd6dd; }

	/* --- vrstni red na mobilnem: NAJPREJ glavna vsebina, nato levi meni/pasice,
	   nato desne rubrike (velja za domaco IN vsebinske strani; levi razdelcni
	   meni s tem ni vec moteci nad vsebino) --- */
	#container_vsebine { display: flex; flex-direction: column; }
	#container_vsebine > #srednji_stolpec_ceztri,
	#container_vsebine > #srednji_stolpec_cezstiri { order: 1; }
	#container_vsebine > #levi_stolpec { order: 2; }
	#container_vsebine > #desni_stolpec { order: 3; }

	/* ===================== GLAVNI MENI NA DOTIK ===================== */
	.menu-toggle { display: block; }

	#sddm { position: static; width: auto; height: auto; margin: 0; }
	#sddm.zaprt { display: none; }                 /* zaprto stanje nastavi js/menu.js */
	#sddm li { float: none; width: 100%; position: relative; font-size: 16px; }
	#sddm > li > a {
		width: auto; text-align: left;
		padding: 0 52px 0 16px;                    /* desno pustimo prostor za gumb podmenija */
		height: 48px; line-height: 48px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	/* gumb (+/-) za razpiranje podmenija; doda ga js/menu.js (le ob naslovu razdelka) */
	.submenu-toggle {
		display: block; position: absolute; top: 0; right: 0;
		width: 52px; height: 48px;
		border: 0; background: rgba(0,0,0,0.15);
		color: #fff; font-size: 24px; line-height: 48px; text-align: center; cursor: pointer;
	}
	/* podmeniji: privzeto skriti, razprejo se ob tapu na gumb (li dobi .odprt) */
	#sddm > li > div { display: none; }
	#sddm > li.odprt > div {
		display: block; position: static; visibility: visible; width: auto;
	}
	#sddm > li > div a { width: auto; padding: 11px 16px 11px 28px; font-size: 15px; }
}