/**
 * KWM Course Commerce – główny plik CSS
 *
 * Ładowany na każdej stronie frontendowej.
 * Zawiera: tokeny, minimalne globalne korekty.
 *
 * Zasada: stylizujemy przez własne klasy .kwm-*.
 * Nie nadpisujemy globalnych klas Kadence, WooCommerce ani Greenshift
 * bez świadomej, opisanej decyzji.
 *
 * Kolejne sekcje dodawać tutaj w miarę potrzeb projektu.
 */

/* =============================================================================
   TOKENY GLOBALNE
   Źródło: docs/DESIGN_SYSTEM.md
   ============================================================================= */

:root {
	/* Typografia */
	--kwm-font-base:      system-ui, -apple-system, "Segoe UI", sans-serif;
	--kwm-font-heading:   var(--kwm-font-base);
	--kwm-font-size-base: 1rem;
	--kwm-line-height:    1.65;

	/* Kolory podstawowe */
	--kwm-color-primary:       #2F2147; /* głęboki śliwkowy */
	--kwm-color-primary-hover: #241937; /* hover / ciemniejszy */
	--kwm-color-text:          #2B2B33; /* grafit */
	--kwm-color-muted:         #6F7282; /* szary pomocniczy */
	--kwm-color-border:        #E6E6EC; /* jasny szary */

	/* Kolory uzupełniające */
	--kwm-color-accent:             #C7A96B; /* elegancki złoty – ikony, aktywne menu, focus rings */
	--kwm-color-sage:               #87A89A; /* chłodny szałwiowy – zaufanie, spokój */
	--kwm-color-sage-dark:          #7D9C93;

	/* Tła */
	--kwm-color-bg:                 #FFFFFF;
	--kwm-color-bg-subtle:          #F8F7FB; /* lawendowa biel */
	--kwm-color-bg-alt:             #FAFAFC; /* prawie biały */
	--kwm-color-secondary-hover-bg: #F4F1FA; /* hover na przycisku secondary */

	/* Spacing */
	--kwm-space-xs:  0.25rem;
	--kwm-space-sm:  0.5rem;
	--kwm-space-md:  1rem;
	--kwm-space-lg:  1.5rem;
	--kwm-space-xl:  2rem;
	--kwm-space-2xl: 3rem;

	/* Maksymalna szerokość treści */
	--kwm-content-width: 1200px;
}

/* =============================================================================
   MINIMALNE KOREKTY GLOBALNE
   Tylko to, czego Kadence domyślnie nie robi, a projekt tego wymaga.
   ============================================================================= */

/*
 * Płynna typografia dla nagłówków – przykład.
 * Odkomentuj i dostosuj gdy zostanie ustalona skala typograficzna projektu.
 *
 * h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
 * h2 { font-size: clamp(1.375rem, 3vw, 2rem); }
 * h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
 */

/* Fokus – dostępność */
:focus-visible {
	outline: 2px solid var(--kwm-color-primary);
	outline-offset: 3px;
}

/* =============================================================================
   NAGŁÓWEK — WARIANT B "PREMIUM CIEMNA GŁĘBIA" (Kadence Classic Header)
   Decyzja świadoma: nadpisujemy klasy Kadence, bo Customizer nie pozwala
   uzyskać tego układu (pasek ogłoszeń + wersaliki + CTA typu outline).
   Wybrany wariant z: design-demos/header-dark-variants.html (wariant "B").
   Selektory zweryfikowane 1:1 ze źródła motywu kadence/inc/template-functions/
   header-functions.php – #masthead, .site-*-header-wrap, .main-navigation,
   #primary-menu, .header-button-wrap, #mobile-drawer są nazwami rdzenia
   Kadence, nie naszymi.
   Klasy .site-top-header-wrap / .site-main-header-wrap są współdzielone
   między #main-header (desktop) i #mobile-header (mobile) – jedna reguła
   pokrywa oba warianty.
   ============================================================================= */

/* Cała ramka headera + cienka złota linia u dołu całości */
#masthead.site-header {
	border-bottom: 1px solid rgba(199, 169, 107, 0.28);
}

/* Wiersz główny (logo + menu + akcje) */
#masthead .site-main-header-wrap {
	background-color: var(--kwm-color-primary-hover) !important;
}

/* Górny pasek ogłoszeń (wiersz "top" w Customizer → Header → Top Row) */
#masthead .site-top-header-wrap {
	background-color: #1a1329 !important;
}
#masthead .site-top-header-wrap,
#masthead .site-top-header-wrap a {
	color: rgba(255, 255, 255, 0.55);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
#masthead .site-top-header-wrap strong {
	color: var(--kwm-color-accent);
	font-weight: 600;
}

/*
 * Logo — wordmark tekstowy w kursywie serif (patrz założenia w prototypie:
 * brak pliku graficznego logo w projekcie). Dla dokładnego dopasowania do
 * fontu z prototypu (Fraunces) zarejestruj i wczytaj go w inc/enqueue.php –
 * tu zostawiamy bezpieczny fallback systemowy, bez ładowania zewnętrznego
 * fontu bez świadomej decyzji (Google Fonts = zapytania do zewnętrznego hosta).
 */
#masthead .site-branding .brand,
#masthead .site-branding .site-title,
#masthead .site-branding .site-title a {
	color: #ffffff;
}
#masthead .site-branding .site-title {
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/*
 * Menu główne (desktop) — wersaliki, biały tekst na przezroczystym tle.
 * font-weight ustawiony jawnie: domyślny font motywu w tym miejscu jest
 * zbyt cienki na ciemnym tle przy tym letter-spacingu (zgłoszenie: "litery
 * słabsze" na zrzucie z panelu vs prototyp).
 */
#masthead .main-navigation .primary-menu-container > #primary-menu > li > a {
	color: rgba(255, 255, 255, 0.82);
	text-transform: uppercase;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
}
#masthead .main-navigation .primary-menu-container > #primary-menu > li > a:hover {
	color: #ffffff;
}
#masthead .main-navigation .primary-menu-container > #primary-menu > li.current-menu-item > a,
#masthead .main-navigation .primary-menu-container > #primary-menu > li.current-menu-ancestor > a {
	color: #ffffff;
	box-shadow: inset 0 -2px 0 var(--kwm-color-accent);
}

/*
 * Podmenu (dropdown, np. "Sklep") — Kadence domyślnie koloruje .sub-menu
 * fioletem z Global Palette (customizer), nie z naszej palety. Nadpisujemy
 * na jasną, "szklaną" kartę (glassmorphism, delikatne odcięcie od tła
 * zamiast mocnego białego boxa), spójną z prototypem
 * (design-demos/header-dark-variants.html), doprecyzowaną po feedbacku
 * (zbite pozycje, zbyt szary hover, brak wyróżnienia aktywnej pozycji).
 * !important konieczne — dynamiczny CSS Customizera ma tu pierwszeństwo.
 */
#masthead .main-navigation .sub-menu,
#masthead .main-navigation .submenu {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(230, 230, 236, 0.9);
	border-radius: 18px !important; /* mniej "balonowe" niż 24px */
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(47, 33, 71, 0.12) !important;
}
/*
 * letter-spacing: dodatnie zamiast ujemnego. Ujemny tracking (-0.01em)
 * pasuje do dużych, display'owych nagłówków — na tekście body-size (1rem),
 * pisanym mixed-case, robi się gęsto i "urzędowo". Lekko dodatni tracking
 * (+0.01em) na tej skali daje bardziej przewiewny, considered / premium
 * odbiór, bez ryzyka że zacznie wyglądać na "rozjechane" (to zaczyna się
 * dopiero od ok. +0.03-0.04em na tekście mixed-case).
 */
#masthead .main-navigation .sub-menu a,
#masthead .main-navigation .submenu a {
	color: var(--kwm-color-text) !important;
	text-transform: none !important;
	font-size: 1rem !important; /* spokojniejsze niż 1.1rem */
	line-height: 1.45 !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	padding: 1.05rem 1.55rem !important;
}
#masthead .main-navigation .sub-menu a:hover,
#masthead .main-navigation .submenu a:hover {
	background-color: #f8f7fb !important;
	color: var(--kwm-color-primary) !important;
	border-radius: 20px;
}
#masthead .main-navigation .sub-menu li.current-menu-item > a,
#masthead .main-navigation .submenu li.current-menu-item > a {
	background-color: rgba(199, 169, 107, 0.08) !important;
	color: var(--kwm-color-primary) !important;
	border-radius: 20px;
}

/*
 * Mini-animacja wejścia podmenu — dogrywa bardziej "premium" easing na
 * wierzchu wbudowanej animacji Kadence. WYMAGA ustawienia w Customizerze:
 * Nagłówek → Nawigacja → Dropdown Menu → Animacja = "Fade Up" (domyślnie
 * jest "Brak", wtedy podmenu i tak pojawia się bez żadnej animacji —
 * to osobny przełącznik, nie coś co da się włączyć samym CSS).
 * Selektory klas (.menu-item--toggled-on, .header-navigation-dropdown-
 * animation-fade-up) pochodzą wprost z rdzenia motywu Kadence.
 */
#masthead .header-navigation.header-navigation-dropdown-animation-fade-up .sub-menu,
#masthead .header-navigation.header-navigation-dropdown-animation-fade-up .submenu {
	transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
	transform: translate3d(0, 10px, 0) scale(0.97) !important;
}
#masthead .header-navigation.header-navigation-dropdown-animation-fade-up:not(.click-to-open) li.menu-item--toggled-on > .sub-menu,
#masthead .header-navigation.header-navigation-dropdown-animation-fade-up:not(.click-to-open) li:not(.menu-item--has-toggle):focus > .sub-menu,
#masthead .header-navigation.header-navigation-dropdown-animation-fade-up.click-to-open li.menu-item--toggled-on > .sub-menu {
	transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Ikony akcji w headerze (szukaj / koszyk) */
#masthead .search-toggle-open,
#masthead .header-cart-button {
	color: rgba(255, 255, 255, 0.85);
}
#masthead .search-toggle-open:hover,
#masthead .header-cart-button:hover {
	color: #ffffff;
}
#masthead .header-cart-total {
	background-color: var(--kwm-color-accent) !important;
	color: #241937 !important;
}

/* CTA w headerze — outline złoty, wypełnienie na hover (Customizer → Header → Button) */
#masthead .header-button-wrap .header-button {
	background-color: transparent !important;
	color: var(--kwm-color-accent) !important;
	border: 1.5px solid var(--kwm-color-accent) !important;
	border-radius: 2px;
}
#masthead .header-button-wrap .header-button:hover {
	background-color: var(--kwm-color-accent) !important;
	color: #1a1329 !important;
}

/* Przycisk hamburgera (mobile) */
#mobile-header .menu-toggle-open {
	color: #ffffff;
}

/* Panel wysuwany menu mobile (#mobile-drawer) — to samo tło co header */
#mobile-drawer .drawer-inner {
	background-color: var(--kwm-color-primary-hover);
}
#mobile-drawer .drawer-header .menu-toggle-close {
	color: #ffffff;
}
#mobile-drawer #mobile-menu > li > a {
	color: rgba(255, 255, 255, 0.88);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Aktywna pozycja w menu mobile — było #fff na ciemnym tle, prawie
   nieodróżnialne od reszty pozycji (rgba(255,255,255,.88)). Złoty akcent
   zamiast białego + lekki tint tła dla wyraźniejszego wyróżnienia. */
#mobile-drawer #mobile-menu > li.current-menu-item > a {
	color: var(--kwm-color-accent);
	background-color: rgba(199, 169, 107, 0.1);
	box-shadow: inset 2px 0 0 var(--kwm-color-accent);
}
#mobile-drawer .header-button-wrap .header-button {
	background-color: transparent !important;
	color: var(--kwm-color-accent) !important;
	border: 1.5px solid var(--kwm-color-accent) !important;
}