/**
 * Dark Editorial Commerce – nawigacja główna (header).
 *
 * Ładowany ZAWSZE (patrz inc/enqueue.php) – w przeciwieństwie do reszty
 * plików CSS w tym motywie, header jest widoczny na każdej stronie
 * serwisu, nie tylko na widokach objętych dotychczasowym etapowym
 * rebrandingiem.
 *
 * Selektory dobrane na podstawie REALNEGO markupu ze strony produkcyjnej
 * (sprawdzone 2026-09-14, kliknijwmarketing.pl):
 *   #primary-menu          – <ul> głównego menu (id nadaje sam Kadence)
 *   .menu-item-has-children – pozycja z dziećmi (dziś: tylko "kursy")
 *   .sub-menu               – panel rozwijany; dla "kursy" to realne
 *                             Mega Menu Kadence (blok Row Layout z Info Box),
 *                             nie prosta lista linków
 *   .kt-blocks-info-box-*   – standardowe klasy Kadence Blocks Info Box,
 *                             używane już dziś w treści Mega Menu
 *
 * Celowo NIE ruszamy: pozycjonowania/display .sub-menu i #mobile-drawer
 * (odpowiada za to JS Kadence – zmiana position/display mogłaby zepsuć
 * samo pokazywanie/chowanie menu).
 *
 * Ikony w Mega Menu (WordPress, monitor itd.) zarządzane są PRZEZ WP ADMIN
 * (Wygląd → Menu → "kursy" → zawartość Mega Menu → bloki Info Box), nie
 * przez ten plik – tu tylko przemalowujemy to, co tam ustawisz.
 *
 * UWAGA o logo: logo (obrazek, nie tekst) ma ciemny napis na przezroczystym
 * tle. Po przyciemnieniu nagłówka będzie mało czytelne, dopóki nie wgrasz
 * jasnej wersji logo w WP Admin → Personalizacja → Identyfikacja strony
 * (podmiana głównego pliku logo na wariant zaprojektowany pod ciemne tło –
 * nagłówek jest teraz zawsze ciemny, więc nie trzeba osobnego "logo dla
 * przezroczystego nagłówka", wystarczy jeden, nowy plik).
 */

/* ── TŁO NAGŁÓWKA (desktop + górny pasek mobile) ──
 * Kilka selektorów na różnych poziomach zagnieżdżenia naraz – Kadence
 * potrafi ustawiać tło na różnych wewnętrznych wrapperach w zależności od
 * wersji/ustawień, więc bezpieczniej pokryć wszystkie możliwe warstwy.
 */
#masthead,
#masthead .site-header-wrap,
#main-header,
.site-main-header-wrap,
.site-header-row-container-inner,
#mobile-header,
.site-mobile-header-wrap {
	background-color: #121212 !important;
}

/* ── GÓRNY POZIOM MENU: wariant D (pastylka w kolorze marki, z lewej do prawej) ──
 * Zatwierdzony wariant z ../../prototyp-naglowek-warianty.html (zmiana z
 * wariantu C — decyzja 2026-09-14). Pastylka to ::before pod treścią <a>
 * (nie background wprost na <a>), żeby dało się animować scaleX zamiast
 * migać kolorem od razu — 1:1 mechanizm z prototypu (.nav-d .nav-link).
 * Domyślny tekst musi się zmienić razem z tłem headera (był ciemny na
 * jasnym tle – na ciemnym tle byłby nieczytelny), hover/aktywna pozycja
 * to mosiądz.
 */
#primary-menu > li {
	/* Odpowiednik `.nav-demo__list { gap: 4px }` z prototypu – bez tego
	   sąsiednie pastylki (hover + aktywna pozycja naraz) stykałyby się
	   krawędziami i wyglądały jak jedna zlana pastylka. */
	margin: 0 2px;
}
#primary-menu > li > a {
	display: inline-flex;
	align-items: center;
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 10px 18px;
	border-radius: 999px;
	color: #a8a196 !important;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
#primary-menu > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(201, 161, 90, 0.14);
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
	z-index: -1;
}
#primary-menu > li > a:hover::before,
#primary-menu > li > a:focus-visible::before,
#primary-menu > li.current-menu-item > a::before,
#primary-menu > li.current_page_item > a::before {
	transform: scaleX(1);
}
#primary-menu > li > a:hover,
#primary-menu > li > a:focus-visible,
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a {
	color: #c9a15a !important;
}

/* ── GRUPA MENU: subtelna ramka oddzielająca od tła headera ──
 * Zgłoszenie 2026-09-15: menu wygląda "identycznie jak reszta paska" –
 * dobre samo w sobie, ale warto delikatnie oddzielić całą grupę od tła.
 * Cienka linia w tym samym odcieniu co .sub-menu (rgba(243,240,235,.14),
 * "line-on-dark" ze stylebook.md) + pełne zaokrąglenie – spójne z kształtem
 * pojedynczych pastylek (wariant D), tworzy jedną "grupę pigułek" zamiast
 * pojedynczych, niczym nieobramowanych pozycji.
 */
#masthead .primary-menu-container {
	border: 1px solid rgba(243, 240, 235, 0.14);
	border-radius: 999px;
	padding: 4px 8px;
}

/* ── WYRÓWNANIE PIONOWE: logo vs menu ──
 * Zgłoszenie 2026-09-15: menu wygląda wyżej niż logo. Kadence centruje oba
 * (.site-header-item{display:flex;align-items:center}) w tym samym
 * gridowym wierszu (.site-main-header-inner-wrap{display:grid}) – to jawne
 * wzmocnienie tego centrowania na poziomie wiersza, żeby nie polegać na
 * domyślnym align-items:stretch grida przy dowolnej wysokości zawartości
 * (np. po dodaniu ramki/paddingu wyżej).
 */
#masthead .site-main-header-inner-wrap {
	align-items: center;
}

/* Strzałka "Rozwiń" przy "kursy" i przycisk hamburgera – SVG rysowane przez
   currentColor, więc wystarczy kolor na ikonie/przycisku. */
#primary-menu .kadence-svg-iconset,
#mobile-toggle,
#mobile-toggle .kadence-svg-iconset {
	color: #f3f0eb !important;
}

/* Odstępy ikona/strzałka ↔ tekst pozycji menu z ikoną (dziś: "kursy").
   Realny markup (sprawdzone 2026-09-14): <span class="menu-label-icon-wrap">
   i <span class="dropdown-nav-toggle"> stykają się bezpośrednio z tekstem –
   Kadence nie ma tu ŻADNEGO pola w panelu na odstęp (ani w ustawieniach
   pozycji menu, ani w Customizerze), więc jedyny sposób to CSS. Dotyczy
   też #mobile-menu – ten sam markup w drawer'ze mobilnym. */
.menu-label-icon-wrap {
	margin-right: 8px;
}
.dropdown-nav-toggle {
	margin-left: 6px;
}

/* ── PANEL ROZWIJANY (.sub-menu) ──
 * Dziś dotyczy tylko "kursy" (Mega Menu), ale reguły są ogólne – zadziałają
 * tak samo, jeśli w przyszłości dodasz Mega Menu do innej pozycji.
 */
#primary-menu .sub-menu {
	background: #1c1a17 !important;
	border: 1px solid rgba(243, 240, 235, 0.12) !important;
	padding: 20px !important;
}

/* Tytuł i opis pozycji Info Box wewnątrz Mega Menu */
#primary-menu .sub-menu .kt-blocks-info-box-title {
	font-family: 'Fraunces', serif !important;
	font-optical-sizing: auto;
	font-weight: 540 !important;
	color: #f3f0eb !important;
	letter-spacing: -0.01em;
}
#primary-menu .sub-menu .kt-blocks-info-box-text {
	font-family: 'Inter', sans-serif !important;
	color: #a8a196 !important;
}

/* Ikona Info Box – SVG rysowane przez currentColor, więc wystarczy kolor
   na kontenerze; dotyczy zarówno ikon z biblioteki Kadence (stroke), jak
   i wgranych jako pełne kształty (fill), np. logo WordPressa użyte dziś. */
#primary-menu .sub-menu .kadence-info-box-icon-container {
	color: #c9a15a !important;
}

/* Link całej karty Info Box – bez podkreślenia, hover przez lekkie tło,
   spójnie z resztą marki (cienka linia zamiast ciężkiego cienia). */
#primary-menu .sub-menu .kt-blocks-info-box-link-wrap {
	border-radius: 4px;
	transition: background-color 0.2s ease;
}
#primary-menu .sub-menu .kt-blocks-info-box-link-wrap:hover {
	background-color: rgba(243, 240, 235, 0.04);
}

/* ═══════════════════════════════════════
   MENU MOBILNE (#mobile-drawer)
   Realny markup (sprawdzone 2026-09-14):
     #mobile-toggle          – przycisk-hamburger otwierający panel
     #mobile-drawer          – panel wysuwany z prawej (popup-drawer)
       .drawer-overlay       – półprzezroczyste tło za panelem
       .drawer-inner         – właściwy panel (tu ustawiamy tło)
       .drawer-header        – pasek z przyciskiem zamknięcia (X)
       #mobile-menu           – <ul> pozycji menu
         .drawer-nav-drop-wrap – wrapper <a> + przycisk rozwijania (dla "kursy")
         .drawer-sub-toggle    – przycisk rozwijający .sub-menu (akordeon)
   .sub-menu wewnątrz drawer'a to ta sama zawartość Mega Menu co na
   desktopie (Kadence Blocks Info Box) – style z sekcji wyżej
   (.kt-blocks-info-box-*) obowiązują też tutaj, nie trzeba ich powtarzać.
═══════════════════════════════════════ */

.popup-drawer .drawer-inner {
	background: #121212 !important;
}
.popup-drawer .drawer-overlay {
	background: rgba(18, 18, 18, 0.7) !important;
}

/* Przycisk zamknięcia (X) w nagłówku panelu */
.popup-drawer .drawer-header {
	border-bottom: 1px solid rgba(243, 240, 235, 0.12);
}
.popup-drawer .menu-toggle-close .toggle-close-bar {
	background-color: #f3f0eb !important;
}

/* Pozycje menu – ta sama zasada co na desktopie: wyciszony domyślny
   kolor, mosiądz na aktywnej/otwartej pozycji. */
#mobile-menu {
	padding: 8px 0;
}
#mobile-menu > li {
	border-bottom: 1px solid rgba(243, 240, 235, 0.1);
}
#mobile-menu .drawer-nav-drop-wrap > a,
#mobile-menu > li > a {
	display: block;
	padding: 16px 24px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #f3f0eb !important;
}
#mobile-menu > li.current-menu-item > a,
#mobile-menu > li.current_page_item > a {
	color: #c9a15a !important;
}

/* Przycisk rozwijania podmenu (akordeon) – strzałka w kółku po prawej */
#mobile-menu .drawer-sub-toggle {
	color: #a8a196;
	transition: color 0.2s ease, transform 0.2s ease;
}
#mobile-menu .drawer-sub-toggle[aria-expanded='true'] {
	color: #c9a15a;
	transform: rotate(180deg);
}

/* Mega Menu wewnątrz akordeonu mobilnego – ten sam panel co desktop,
   tylko bez własnej ramki/tła (już jest na ciemnym tle całego drawer'a)
   i z odrobiną wcięcia, żeby było widać, że to zawartość "kursy". */
#mobile-menu .sub-menu {
	background: transparent !important;
	border: none !important;
	border-top: 1px solid rgba(243, 240, 235, 0.1) !important;
	border-radius: 0;
	padding: 12px 24px 16px !important;
}

/* ═══════════════════════════════════════
   KOMUNIKATY WOOCOMMERCE (.woocommerce-message)
   Zgłoszenie 2026-09-14: domyślny styl Kadence to tło
   var(--global-palette7) (#a8a196 – wyciszony szaro-piaskowy), a link akcji
   ("Cofnij", klasa .wc-forward) dziedziczy var(--global-palette-highlight)
   (#c9a15a) – oba kolory mają niemal identyczną jasność, więc link ginie
   w tle. Globalne (nie w cart.css), bo te komunikaty pojawiają się na
   dowolnej stronie sklepu (dodano/usunięto z koszyka, zastosowano kupon
   itd.), nie tylko na koszyku – header.css to jedyny plik ładowany zawsze.
   Kolor: bardziej nasycony, "ostrzegawczy" bursztyn/żółć niż stonowany
   mosiądz reszty marki (#c9a15a) – celowo, żeby ten konkretny komunikat
   przebijał się mocniej niż zwykłe akcenty UI.
═══════════════════════════════════════ */
.woocommerce-message {
	background-color: #f0b429 !important;
	border-left-color: #a9813f !important;
	color: #1c1a17 !important;
}
.woocommerce-message a.wc-forward {
	color: #1c1a17 !important;
	font-weight: 700;
	text-decoration: underline;
}
.woocommerce-message a.wc-forward:hover {
	color: #000000 !important;
}