/*
Theme Name: Twenty Eleven DE (child)
Description: Motyw potomny Twenty Eleven dla dietaewy.pl - logo DE_logo_2016.png w naglowku.
Template: twentyeleven
Version: 1.0.0
Text Domain: twentyeleven-child
*/

/* Rodzic ladowany lokalnie (ta sama instalacja). header.php linkuje style.css AKTYWNEGO motywu,
   wiec rodzica trzeba dociagnac tutaj; wlasne reguly ponizej tej linii. */
@import url("../twentyeleven/style.css");

/* --- wlasne reguly child --- */

/* --- Menu na dotyku (telefony/tablety) ---
   Tam :hover jest emulowany i znika po zdjeciu palca, wiec podmenu otwiera klasa .is-open
   (js/touch-menu.js). Podmenu wisi tuz pod kliknieta pozycja, jak w oryginale; JS tylko
   przesuwa je w lewo, gdy przy prawej krawedzi wychodziloby poza ekran. */
@media (hover: none) {
	#access ul li:hover > ul {
		display: none;
	}
	#access ul li.is-open > ul {
		display: block;
	}

	/* otwarta pozycja nadrzedna wyrozniona (jak :hover w rodzicu) ... */
	#access > div > ul > li.is-open > a {
		background: #f9f9f9;
		background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
		background: linear-gradient(#f9f9f9, #e5e5e5);
		color: #373737;
	}
	#access ul ul li.is-open > a {
		background: #efefef;
	}

	/* ... a pozostale pozycje paska przyciemnione i lekko rozmyte (zmien opacity/blur wg gustu) */
	#access > div > ul > li > a {
		transition: opacity 0.15s ease, filter 0.15s ease;
	}
	#access.has-open > div > ul > li:not(.is-open) > a {
		filter: blur(1px);
		opacity: 0.35;
	}
}

/* Waski ekran: trzeci poziom (np. Przepisy > Ryby > losos) rozwija sie POD rodzicem w ramach
   188 px podmenu, a nie w bok (w bok wychodzilby poza ekran). */
@media (max-width: 650px) {
	#access ul ul li {
		float: none;
	}
	#access ul ul ul {
		box-shadow: none;
		float: none;
		position: static;
		width: auto;
	}
	#access ul ul ul a {
		padding-left: 28px;
		width: auto;
	}
}

/* Telefon: mniejsze logo. header.php ma inline style="width:100px", stad !important.
   Zmien 56px, zeby dobrac rozmiar (desktop bez zmian). */
@media (max-width: 650px) {
	#site-title img {
		height: auto;
		width: 56px !important;
	}
}

/* Gorna sekcja ma byc po prostu biala: rodzic daje #branding szare obramowanie 2px #bbb
   (na waskich telefonach <=480px wylacza je sam, na reszcie zostaje). */
#branding {
	border-top: none;
}

/* --- Naglowek: nizszy bialy obszar z logo i wyszukiwarka ---
   Rodzic: ok. 55 px nad logo i ok. 51 px pod haslem (desktop); na telefonie 69 px / 44 px,
   bo logo jest zepchniete pod wyszukiwarke. Wyszukiwarka ma position:absolute, wiec jej
   `top` trzeba przesunac razem z paddingiem #site-title. */
#site-title {
	padding-top: 22px;
}
#site-description {
	margin-bottom: 18px;
}
#branding #searchform {
	top: 24px;
}
@media (max-width: 650px) {
	/* telefon: logo (z lewej) i wyszukiwarka (z prawej) w jednym rzedzie zamiast jedno pod drugim */
	#site-title {
		padding-top: 16px;
	}
	#site-description {
		margin-bottom: 14px;
	}
	#branding #searchform {
		top: 16px !important;
	}
}