/* =========================================================================
 * IRA — rail (stały pasek po prawej) w kolorach IRA (czerwony)
 * Działa identycznie w dark i light — wszystkie ikony są czerwone (#dc2626).
 * ====================================================================== */

#ira-rail {
	background: transparent;
}

/* Wszystkie ikony i przyciski w rail → czerwone */
#ira-rail #ira-menu-open,
#ira-rail #ira-theme-toggle,
#ira-rail a[aria-label],
#ira-rail ul a {
	color: #dc2626 !important;
	border-color: #dc2626 !important;
	transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.05s;
}

/* Hover — odwrócenie: pełne czerwone tło + białe ikony */
#ira-rail #ira-menu-open:hover,
#ira-rail #ira-theme-toggle:hover,
#ira-rail a[aria-label]:hover,
#ira-rail ul a:hover {
	background: #dc2626 !important;
	color: #fff !important;
	border-color: #dc2626 !important;
}

/* Active state (fan z bg-white) — wymuszamy czerwone tło + białą ikonę */
#ira-rail a[aria-label].bg-white {
	background: #dc2626 !important;
	color: #fff !important;
	border-color: #dc2626 !important;
}
#ira-rail a[aria-label].bg-white:hover {
	background: transparent !important;
	color: #dc2626 !important;
}

/* Pulse subtle dla ikony account gdy zalogowany fan (border-2) */
#ira-rail a[aria-label].border-2 {
	box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
	animation: ira-rail-pulse 2.2s ease-in-out infinite;
}
@keyframes ira-rail-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
	50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* Override: „Moje konto" + theme-toggle + social — czerwone, BEZ tła */
#ira-rail #ira-account-rail,
#ira-rail #ira-theme-toggle,
#ira-rail ul a[aria-label] {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	animation: none !important;
}
/* Hover: dark → biały, light → czarny; nadal bez tła (specyficzność bije globalną regułę #ira-rail a[aria-label]:hover) */
#ira-rail #ira-account-rail:hover,
#ira-rail #ira-theme-toggle:hover,
#ira-rail ul a[aria-label]:hover {
	background: transparent !important;
	border-color: transparent !important;
	color: #fff !important;
}
html.light #ira-rail #ira-account-rail:hover,
html.light #ira-rail #ira-theme-toggle:hover,
html.light #ira-rail ul a[aria-label]:hover {
	color: #000 !important;
}

/* =========================================================================
 * IRA — MENU BOCZNE (panel wysuwany z prawej, w #ira-menu)
 * Walker: Ira_Menu_Walker. Klasy: .ira-menu, .ira-menu-list, .ira-menu-item
 * Funkcjonalności: ikony per item, CTA highlight (klasa .cta), submenu (depth 2)
 * ====================================================================== */

.ira-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ira-menu-list--primary {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.ira-menu-list--secondary {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ira-menu-item { margin: 0; }
.ira-menu-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	color: #f4f4f5;
	text-decoration: none !important;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: color 0.2s, transform 0.05s, padding 0.2s;
}
.ira-menu-link:hover { color: #dc2626; transform: translateX(4px); }
.ira-menu-link:active { transform: translateX(2px); }

@media (min-width: 640px) {
	.ira-menu-link { font-size: 2rem; }
}

.ira-menu-icon {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85em;
	line-height: 1;
}
.ira-menu-icon.dashicons { color: #dc2626; }

.ira-menu-label { flex: 1; min-width: 0; }
.ira-menu-chev { opacity: 0.5; transition: transform 0.2s, opacity 0.2s; }
.ira-menu-item:hover > .ira-menu-link .ira-menu-chev { opacity: 1; transform: rotate(-90deg); }

/* CTA — wyróżniony pasek z czerwonym tłem */
.ira-menu-item--cta { margin: 0.5rem 0; }
.ira-menu-item--cta > .ira-menu-link {
	background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
	color: #fff !important;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.5);
	font-size: 1.15rem;
}
.ira-menu-item--cta > .ira-menu-link:hover {
	background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -8px rgba(220, 38, 38, 0.7);
}
.ira-menu-item--cta .ira-menu-icon { color: #fff; }
.ira-menu-item--cta .ira-menu-icon.dashicons { color: #fff; }

/* Submenu (depth 2) — wcięcie + mniejsza czcionka */
.ira-menu-submenu {
	list-style: none;
	margin: 0.5rem 0 0.75rem 1.5rem;
	padding: 0 0 0 1rem;
	border-left: 1px solid rgba(255,255,255,0.1);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.ira-menu-submenu .ira-menu-link {
	font-size: 1.1rem;
	font-weight: 500;
	padding: 0.35rem 0;
	color: #d4d4d8;
	text-transform: none;
	letter-spacing: 0;
}
.ira-menu-submenu .ira-menu-link:hover { color: #ef4444; }

/* Secondary menu — mniejsze, subtelne */
.ira-menu-list--secondary .ira-menu-link {
	font-size: 0.85rem;
	font-weight: 500;
	color: #a1a1aa;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.3rem 0;
}
.ira-menu-list--secondary .ira-menu-link:hover { color: #fff; }
.ira-menu-list--secondary .ira-menu-icon { color: #71717a; }
.ira-menu-list--secondary .ira-menu-icon.dashicons { color: #dc2626; }

/* =========================================================================
 * IRA — MENU DRAWER: wymuszone kolory niezaleznie od trybu jasny/ciemny.
 * Panel #ira-menu zawsze ma tlo ciemne (klasa .ira-force-dark + bg-neutral-950).
 * Linki musza pozostac jasne nawet w trybie light, gdzie globalne reguly
 * (html.light body, html.light .text-neutral-100) probuja je sciemnic.
 * ====================================================================== */
#ira-menu .ira-menu-link,
html.light #ira-menu .ira-menu-link {
	color: #f4f4f5;
}
#ira-menu .ira-menu-link:hover,
html.light #ira-menu .ira-menu-link:hover {
	color: #dc2626;
}
#ira-menu .ira-menu-submenu .ira-menu-link,
html.light #ira-menu .ira-menu-submenu .ira-menu-link {
	color: #d4d4d8;
}
#ira-menu .ira-menu-submenu .ira-menu-link:hover,
html.light #ira-menu .ira-menu-submenu .ira-menu-link:hover {
	color: #ef4444;
}
#ira-menu .ira-menu-list--secondary .ira-menu-link,
html.light #ira-menu .ira-menu-list--secondary .ira-menu-link {
	color: #a1a1aa;
}
#ira-menu .ira-menu-list--secondary .ira-menu-link:hover,
html.light #ira-menu .ira-menu-list--secondary .ira-menu-link:hover {
	color: #ffffff;
}
/* CTA (np. konto, kup bilety) — bialy napis na czerwonym tle, niezaleznie od trybu */
#ira-menu .ira-menu-item--cta > .ira-menu-link,
html.light #ira-menu .ira-menu-item--cta > .ira-menu-link {
	color: #ffffff;
}

/* =====================================================================
 * Rail responsywny + scroll panelu menu (niskie / zminimalizowane okno)
 * ===================================================================== */

/* Gdy wyśrodkowany blok raila nie mieści się nad logo IRA — chowamy social.
   Pozostają: menu, konto, theme-toggle. Social są dostępne w panelu menu. */
#ira-rail.ira-rail-compact .ira-rail-social {
	display: none;
}

/* Scrollowalna część panelu menu — logo + przycisk zamknięcia zostają przypięte
   u góry, a nawigacja / konto / social scrollują się na niskich ekranach. */
.ira-menu-scroll {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.ira-menu-scroll::-webkit-scrollbar {
	width: 6px;
}
.ira-menu-scroll::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 3px;
}
.ira-menu-scroll::-webkit-scrollbar-track {
	background: transparent;
}