/*
 * Menu w nagłówku, wersja na komputer: rozwijana karta z opisami.
 *
 * Wszystkie selektory zaczynają się od #g1-primary-nav-menu, czyli od menu
 * desktopowego. To celowe z dwóch powodów: identyfikator daje wagę wyższą niż
 * reguły motywu (nie potrzeba !important) i nie dotyka menu w panelu mobilnym,
 * które ma inny identyfikator i własny mechanizm rozwijania
 * (assets/mobile-submenu.js).
 *
 * Kolory: granat #001470, złoto #c9a14a i #b88a3a, krem #fbf7ef i #f4ecd8,
 * beżowa ramka #ece5d6, tekst drugoplanowy #66638a (kanon serwisu).
 */

/* ===== Strzałka przy kategorii =====
   Motyw rysuje ją glifem \e000 z własnego fontu ikon (gruby trójkąt).
   Zastępujemy cienkim daszkiem z maski SVG, który obraca się przy rozwinięciu.
   Maska zamiast tła, żeby daszek dziedziczył kolor tekstu, także w stanie
   złotym po najechaniu. */
#g1-primary-nav-menu > .menu-item-has-children > a:after {
	content: "";
	width: 9px;
	height: 9px;
	margin-top: -4px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3.6 5 7.2 9 3.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3.6 5 7.2 9 3.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
	transition: transform .22s ease;
}

#g1-primary-nav-menu > .menu-item-has-children:hover > a:after {
	transform: rotate(180deg);
}

/* ===== Karta podmenu =====
   Motyw przełącza podmenu przez display (none na block), czego nie da się
   animować. Zostawiamy display: block na stałe i sterujemy widocznością,
   dzięki czemu karta może wjechać płynnie.
   Karta przylega do paska (top: 100%), bo każda przerwa między pozycją a kartą
   powoduje, że menu zamyka się, gdy mysz jedzie w dół. */
#g1-primary-nav-menu .menu-item-has-children > .sub-menu {
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .22s ease, visibility .22s;
	box-sizing: border-box;
	width: 392px;
	left: 6px;
	right: auto;
	top: 100%;
	padding: 8px 0 0;
	background: #fff;
	border: 1px solid #ece5d6;
	border-top: 2px solid #c9a14a;
	border-radius: 0;
	box-shadow: 0 22px 48px rgba(0, 20, 112, .12);
}

#g1-primary-nav-menu .menu-item-has-children:hover > .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* ===== Pojedyncza pozycja =====
   Motyw pisze pozycje podmenu wersalikami 13 px. Wracamy do zwykłego zapisu,
   bo pod nazwą stoi teraz zdanie opisu i wersaliki robiły się nieczytelne. */
#g1-primary-nav-menu .sub-menu > .menu-item > a {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: #001470;
	transition: background .18s ease;
}

#g1-primary-nav-menu .sub-menu > .menu-item > a:hover {
	background: #fbf7ef;
}

/* Kolorowy rysunek pozycji.
   Bez kremowego kwadratu pod spodem: ikony mają w palecie krem i brzoskwinię,
   które na kremowym tle po prostu znikały. Na bieli karty kolory grają.
   Rysunek lekko rośnie po najechaniu, zamiast zmieniać kolor tła. */
#g1-primary-nav-menu .ww-sub-ico {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	color: #9c7d22;
	font-size: 16px;
	line-height: 1;
}

#g1-primary-nav-menu .ww-sub-ico img {
	display: block;
	width: 28px;
	height: 28px;
	transition: transform .2s ease;
}

#g1-primary-nav-menu .sub-menu > .menu-item > a:hover .ww-sub-ico img {
	transform: scale(1.09);
}

#g1-primary-nav-menu .ww-sub-tx {
	display: block;
	min-width: 0;
}

#g1-primary-nav-menu .ww-sub-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #001470;
	transition: color .18s ease;
}

#g1-primary-nav-menu .sub-menu > .menu-item > a:hover .ww-sub-name {
	color: #0d1240;
}

#g1-primary-nav-menu .ww-sub-desc {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: #66638a;
	text-transform: none;
	letter-spacing: 0;
}

/* ===== Wejście do całej kategorii (ostatni wiersz karty) ===== */
#g1-primary-nav-menu .sub-menu > .ww-sub-all {
	margin-top: 8px;
	border-top: 1px solid #ece5d6;
	background: #fbf7ef;
}

#g1-primary-nav-menu .sub-menu > .ww-sub-all > a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #001470;
	transition: background .18s ease, color .18s ease;
}

#g1-primary-nav-menu .sub-menu > .ww-sub-all > a:hover {
	background: #f4ecd8;
	color: #0d1240;
}

#g1-primary-nav-menu .ww-sub-all-arr {
	flex: none;
	width: 15px;
	height: 8px;
	transition: transform .2s ease;
}

#g1-primary-nav-menu .sub-menu > .ww-sub-all > a:hover .ww-sub-all-arr {
	transform: translateX(3px);
}

/* Pozycja podrzędna nie potrzebuje strzałki motywu (rysuje ją tylko wtedy,
   gdy sama ma dzieci; u nas nie ma, ale reguła zabezpiecza na przyszłość). */
#g1-primary-nav-menu .sub-menu .menu-item-has-children > a:after {
	display: none;
}