/* ==========================================================================
   Mega menu AVUERRA, wylacznie rozwijane podmenu

   DWIE ZASADY, ktore trzeba tu trzymac, bo kazda zostala juz raz zlamana
   i za kazdym razem widac to od razu na stronie.

   1. SPECYFICZNOSC.
      Kadence wypisuje wyglad podmenu jako dynamiczny CSS z Personalizacji,
      selektorami w rodzaju
      .header-navigation .header-menu-container ul ul.sub-menu.
      To mocniej niz pojedyncza klasa, wiec klasa jest tu podwojona
      (.av-submega.av-submega), a wlasciwosci ustawiane z Personalizacji maja
      !important. Bez tego zostaje ciemne tlo Kadence i jego szerokosci.

   2. NIE DOTYKAMY WLASCIWOSCI DISPLAY NA LISCIE PODMENU.
      Kadence chowa i pokazuje podmenu wlasnie przez display. Nadpisanie go
      przez display: grid !important zostawialo panel otwarty na stale,
      niezaleznie od tego, gdzie byla mysz.
      Dlatego uklad robimy na samych pozycjach, przez inline-block, a lista
      zachowuje display taki, jaki ustawia Kadence. Chowanie zostaje w
      calosci po jego stronie.

   Zakres jest waski: kazdy selektor zaczyna sie od .av-submega, czyli od
   klasy, ktora motyw doklada sam. Menu pierwszego poziomu i Twoj wlasny CSS
   pozostaja nietkniete.
   ========================================================================== */

/* ==========================================================================
   1. Panel

   Celowo nie ma tu ani jednej wlasciwosci display, visibility czy opacity.
   ========================================================================== */

.av-submega.av-submega{
	box-sizing: border-box;
	padding: 14px 14px 6px !important;
	background: var(--av-paper, #FBF7F4) !important;
	border: 1px solid var(--av-linia-lekka, #F3E9E4) !important;
	border-radius: 4px !important;
	list-style: none !important;
	font-size: 0;            /* kasuje odstepy miedzy kafelkami inline-block */
}

/*
 * Zerujemy chrom, ktory Kadence rysuje na pozycjach podmenu: szerokosci,
 * linie rozdzielajace, wlasne tla. Bez tego kafelki zostaja w waskiej
 * kolumnie i maja pod soba kreske.
 */
.av-submega.av-submega > li{
	display: inline-block !important;
	vertical-align: top;
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 15px;         /* przywracamy rozmiar skasowany na liscie */
}

/* Odnosnik w srodku: Kadence daje mu wlasne odstepy, kolor, wysokosc
   i wersaliki, ktore niszcza uklad kafelka. */
.av-submega.av-submega > li > a.av-submega__kafel{
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
	padding: 13px 14px !important;
	background: #fff !important;
	border: 1px solid var(--av-linia-lekka, #F3E9E4) !important;
	border-radius: 4px;
	font-family: var(--av-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0 !important;
	text-align: left;
	text-transform: none !important;
	text-decoration: none !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.av-submega.av-submega > li > a.av-submega__kafel:hover,
.av-submega.av-submega > li > a.av-submega__kafel:focus-visible{
	background: #fff !important;
	border-color: var(--av-red, #D30000) !important;
	box-shadow: 0 4px 16px -10px rgba(46, 33, 26, .5);
}

/* ==========================================================================
   2. Duzy ekran: panel zamiast waskiej kolumny
   ========================================================================== */

@media (min-width: 1025px){

	.av-submega.av-submega{
		width: min(760px, calc(100vw - 40px)) !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 18px 18px 10px !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		box-shadow: 0 24px 50px -28px rgba(46, 33, 26, .55) !important;
	}

	/* Trzy kolumny, odstep 10 px wliczony w szerokosc pozycji. */
	.av-submega.av-submega > li{
		width: calc((100% - 20px) / 3) !important;
		margin: 0 10px 10px 0 !important;
	}

	.av-submega.av-submega > li:nth-child(3n){ margin-right: 0 !important; }

	/*
	 * Panel dopasowuje szerokosc i liczbe kolumn do liczby pozycji. Dwa
	 * odnosniki nie maja po co rozciagac sie na 760 px.
	 * :has nie dziala w starszych przegladarkach. Wtedy zostaje uklad
	 * trzykolumnowy, czyli degradacja jest lagodna.
	 */
	.av-submega.av-submega:has(> li:only-child){ width: min(300px, calc(100vw - 40px)) !important; }
	.av-submega.av-submega:has(> li:only-child) > li{ width: 100% !important; margin-right: 0 !important; }

	.av-submega.av-submega:has(> li:last-child:nth-child(2)){ width: min(524px, calc(100vw - 40px)) !important; }
	.av-submega.av-submega:has(> li:last-child:nth-child(2)) > li{ width: calc((100% - 10px) / 2) !important; }
	.av-submega.av-submega:has(> li:last-child:nth-child(2)) > li:nth-child(2n){ margin-right: 0 !important; }
}

/* ==========================================================================
   3. Wnetrze kafelka
   ========================================================================== */

.av-submega__ikona{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 3px;
	background: var(--av-blush, #FCE8E5);
	color: var(--av-red, #D30000);
}

.av-submega__ikona svg{ width: 19px; height: 19px; display: block; }

.av-submega__tresc{ display: block; min-width: 0; }

.av-submega__tytul{
	display: block;
	font-family: var(--av-font-head, Georgia, serif);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--av-ink, #2E211A);
	transition: color .2s ease;
}

.av-submega__kafel:hover .av-submega__tytul,
.av-submega__kafel:focus-visible .av-submega__tytul{ color: var(--av-red, #D30000); }

.av-submega__opis{
	display: block;
	margin-top: 3px;
	font-family: var(--av-font-body, sans-serif);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--av-ink-soft, #7D6650);
	text-transform: none;
	letter-spacing: 0;
}

/* Strona, na ktorej wlasnie jestesmy. */
.av-submega.av-submega > li.current-menu-item > a.av-submega__kafel{
	border-color: var(--av-sand-soft, #E3D4C4) !important;
	background: var(--av-karta, #FDF9F7) !important;
}

/* ==========================================================================
   4. Maly ekran

   Podmenu rozwija sie w pionie wewnatrz menu Kadence, wiec zdejmujemy
   srodkowanie i szerokosc, ktore na duzym ekranie wysuwaja panel na boki.
   Tlo panelu tez schodzi, bo kafelki leza juz na tle otwartego menu.
   ========================================================================== */

@media (max-width: 1024px){

	.av-submega.av-submega{
		width: auto !important;
		padding: 10px 10px 2px !important;
		left: auto !important;
		transform: none !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.av-submega.av-submega > li{
		width: 100% !important;
		margin: 0 0 8px !important;
	}

	.av-submega.av-submega > li > a.av-submega__kafel{ padding: 12px 13px !important; }

	.av-submega__ikona{ width: 30px; height: 30px; }
	.av-submega__ikona svg{ width: 17px; height: 17px; }
}

/* ==========================================================================
   5. Ruch wylaczony w ustawieniach systemu
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
	.av-submega__kafel,
	.av-submega__tytul{ transition: none; }
}