/*
 * header.css
 * CityPress – Nagłówek strony (slim bar, logo bar, nav bar)
 */

/* ============================================================
   SLIM BAR — najwęższy pasek na górze
   ============================================================ */
.slim-bar {
	background: var(--cp-navy);
	color: rgba(255,255,255,.8);
	font-size: var(--fs-11);
	height: var(--header-slim-h);
	display: flex;
	align-items: center;
}

.slim-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	height: 100%;
}

/* Breaking news po lewej */
.slim-bar__ticker {
	display: none; /* ukryte na mobile — ticker pojawia się w menu mobilnym */
	align-items: center;
	gap: var(--sp-3);
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.slim-bar__ticker-label {
	background: var(--cp-red);
	color: #fff;
	font-size: var(--fs-10);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.2em 0.6em;
	border-radius: var(--radius-xs);
	white-space: nowrap;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.slim-bar__ticker-track {
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.slim-bar__ticker-items {
	display: flex;
	gap: var(--sp-8);
	animation: ticker-scroll 30s linear infinite;
	white-space: nowrap;
}

.slim-bar__ticker-items:hover {
	animation-play-state: paused;
}

@keyframes ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.slim-bar__ticker-item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	white-space: nowrap;
	color: rgba(255,255,255,.85);
	cursor: pointer;
	transition: color var(--ease-base);
}

.slim-bar__ticker-item:hover {
	color: #fff;
}

.slim-bar__ticker-sep {
	color: rgba(255,255,255,.3);
	margin-inline: var(--sp-2);
}

/* Ikona pogody z pluginu (białe PNG na ciemnym tle) */
.slim-bar__weather-icon {
	display: block;
	flex-shrink: 0;
}

/* Slim bar — ticker label na czerwonym tle: ikona SVG → biała */
.slim-bar__ticker-label img {
	filter: invert(1);
}

/* A11y contrast button — ikona SVG na ciemnym tle → biała */
.a11y-btn img {
	filter: invert(1) opacity(0.8);
	transition: filter var(--ease-base);
}

.a11y-btn:hover img,
.a11y-btn:focus-visible img {
	filter: invert(1) opacity(1);
}

/* Close button w menu mobilnym — ikona SVG na ciemnym tle → biała */
.mobile-menu__close img {
	filter: invert(1) opacity(0.7);
	transition: filter var(--ease-base);
}

.mobile-menu__close:hover img,
.mobile-menu__close:focus-visible img {
	filter: invert(1) opacity(1);
}

/* Search icon w logo-bar */
.btn-icon img {
	opacity: 1;
}

/* Meta po prawej */
.slim-bar__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-shrink: 0;
	font-size: var(--fs-11);
	color: rgba(255,255,255,.7);
	width: 100%;
}

.slim-bar__meta-item {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.slim-bar__a11y {
	display: flex;
	gap: var(--sp-1);
	margin-left: auto;
	border-left: 1px solid rgba(255,255,255,.15);
	padding-left: var(--sp-2);
}

.a11y-btn {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-xs);
	color: rgba(255,255,255,.8);
	font-size: var(--fs-11);
	font-weight: 700;
	transition: background var(--ease-base), color var(--ease-base);
}

.a11y-btn:hover,
.a11y-btn:focus-visible {
	background: rgba(255,255,255,.15);
	color: #fff;
}

/* ============================================================
   LOGO BAR — logo, baner reklamowy, akcje
   ============================================================ */
.logo-bar {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	height: var(--header-logo-h);
	display: flex;
	align-items: center;
}

.logo-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	width: 100%;
}

/* Logo */
.site-logo {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-shrink: 0;
	text-decoration: none;
}

.site-logo__mark {
	width: 42px;
	height: 42px;
	background: var(--cp-navy);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: var(--fs-22);
	letter-spacing: -0.04em;
	line-height: 1;
	flex-shrink: 0;
}

.site-logo__name {
	font-family: var(--font-heading);
	font-size: var(--fs-26);
	font-weight: 900;
	color: var(--cp-navy);
	letter-spacing: -0.03em;
	line-height: 1;
}

.site-logo__name em {
	color: var(--cp-red);
	font-style: normal;
}

.site-logo__tagline {
	display: none;
	font-size: var(--fs-11);
	color: var(--color-text-faint);
	font-family: var(--font-body);
	font-weight: 400;
	margin-top: 2px;
	letter-spacing: 0.02em;
}

/* Baner reklamowy (leaderboard) */
.logo-bar__ad {
	flex: 1;
	max-width: 728px;
	height: 50px;
}

/* Akcje nagłówka */
.logo-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-shrink: 0;
}

.btn-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	transition: background var(--ease-base), color var(--ease-base);
}

.btn-icon:hover,
.btn-icon:focus-visible {
	background: var(--color-surface-alt);
	color: var(--color-text);
}

.btn-hamburger {
	width: 38px;
	height: 38px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	transition: background var(--ease-base);
}

.btn-hamburger:hover {
	background: var(--color-surface-alt);
}

.btn-hamburger__bar {
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transform-origin: center;
	transition: transform var(--ease-med), opacity var(--ease-base), width var(--ease-base);
}

.btn-hamburger[aria-expanded="true"] .btn-hamburger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.btn-hamburger[aria-expanded="true"] .btn-hamburger__bar:nth-child(2) {
	opacity: 0;
	width: 0;
}

.btn-hamburger[aria-expanded="true"] .btn-hamburger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   NAV BAR — pasek kategorii
   ============================================================ */
.site-nav-bar {
	background: var(--cp-navy);
	height: var(--header-nav-h);
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-nav {
	display: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0;
	height: var(--header-nav-h);
}

.site-nav__item,
.site-nav__list > .menu-item {
	height: 100%;
	display: flex;
	position: relative;
}

.site-nav__link,
.site-nav__list > .menu-item > a {
	display: flex;
	align-items: center;
	padding: 0 var(--sp-4);
	font-size: var(--fs-16);
	font-weight: 600;
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,.75);
	height: 100%;
	position: relative;
	white-space: nowrap;
	transition: color var(--ease-base), background var(--ease-base);
	text-decoration: none;
}

.site-nav__link::after,
.site-nav__list > .menu-item > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: var(--sp-4);
	right: var(--sp-4);
	height: 2px;
	background: var(--cp-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ease-med);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"],
.site-nav__list > .menu-item > a:hover,
.site-nav__list > .menu-item.current-menu-item > a,
.site-nav__list > .menu-item.current-menu-ancestor > a {
	color: #fff;
	background: rgba(255,255,255,.07);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after,
.site-nav__list > .menu-item > a:hover::after,
.site-nav__list > .menu-item.current-menu-item > a::after,
.site-nav__list > .menu-item.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Akcje w navbarze (mobile) */
.site-nav-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
}

.site-nav-bar__actions .btn-icon {
	color: rgba(255,255,255,.7);
}

.site-nav-bar__actions .btn-icon:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}

.site-nav-bar__actions .btn-hamburger {
	color: rgba(255,255,255,.8);
}

.site-nav-bar__actions .btn-hamburger:hover {
	background: rgba(255,255,255,.1);
}

/* ============================================================
   MENU MOBILNE
   ============================================================ */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--cp-navy);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}

.mobile-menu[aria-hidden="false"] {
	transform: translateX(0);
}

/* ---- Głowa menu: logo + zamknij ---- */
.mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--sp-5);
	height: calc(var(--header-slim-h) + var(--header-logo-h) + var(--header-nav-h));
	flex-shrink: 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
}

.mobile-menu__logo {
	font-family: var(--font-heading);
	font-size: var(--fs-26);
	font-weight: 900;
	color: #fff;
	letter-spacing: -0.03em;
	line-height: 1;
	text-decoration: none;
}

.mobile-menu__logo em {
	color: rgba(255,255,255,.45);
	font-style: normal;
}

.mobile-menu__close {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	color: rgba(255,255,255,.7);
	flex-shrink: 0;
	transition: background var(--ease-base), color var(--ease-base);
}

.mobile-menu__close:hover,
.mobile-menu__close:focus-visible {
	background: rgba(255,255,255,.1);
	color: #fff;
}

/* ---- Linki nawigacyjne ---- */
.mobile-menu__nav {
	flex: 1;
	padding: var(--sp-4) 0;
}

.mobile-menu__nav li {
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.mobile-menu__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-5);
	font-size: var(--fs-18);
	font-weight: 600;
	color: rgba(255,255,255,.85);
	transition: color var(--ease-base), padding-left var(--ease-base), background var(--ease-base);
}

.mobile-menu__nav a::after {
	content: '›';
	font-size: var(--fs-20);
	color: rgba(255,255,255,.25);
	transition: color var(--ease-base), transform var(--ease-base);
}

.mobile-menu__nav a:hover {
	color: #fff;
	padding-left: var(--sp-8);
	background: rgba(255,255,255,.05);
}

.mobile-menu__nav a:hover::after {
	color: rgba(255,255,255,.6);
	transform: translateX(4px);
}

/* ---- Na sygnale w menu ---- */
.mobile-menu__alert-section {
	border-top: 1px solid rgba(255,255,255,.1);
	padding: var(--sp-5);
	margin-top: auto;
}

.mobile-menu__alert-heading {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-10);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cp-red-light);
	margin-bottom: var(--sp-3);
}

.mobile-menu__alert-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cp-red);
	flex-shrink: 0;
	animation: pulse 1.8s ease-in-out infinite;
}

.mobile-menu__alert {
	position: relative;
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: opacity var(--ease-base);
}

.mobile-menu__alert:hover {
	opacity: .85;
}

.mobile-menu__alert-img {
	width: 96px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	display: block;
}

.mobile-menu__alert-body {
	flex: 1;
	min-width: 0;
}

.mobile-menu__alert-title {
	font-size: var(--fs-13);
	font-weight: 600;
	color: rgba(255,255,255,.9);
	line-height: var(--lh-snug);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mobile-menu__alert-time {
	display: block;
	font-size: var(--fs-11);
	color: rgba(255,255,255,.45);
	margin-top: var(--sp-2);
}

/* ============================================================
   WYSZUKIWARKA — ciemny overlay, input wycentrowany
   ============================================================ */
.search-modal {
	position: fixed;
	inset: 0;
	z-index: 250;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-5);
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0s 0.22s;
}

.search-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.22s ease, visibility 0s;
}

/* Białe okienko z inputem */
.search-modal__box {
	width: min(600px, 100%);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--sp-5) var(--sp-5) var(--sp-4);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
	transform: scale(0.95) translateY(-10px);
	transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.search-modal[aria-hidden="false"] .search-modal__box {
	transform: scale(1) translateY(0);
}

/* Pole z ikoną + input */
.search-modal__field {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	border-bottom: 2px solid var(--color-border);
	padding-bottom: var(--sp-3);
	transition: border-color var(--ease-base);
}

.search-modal__field:focus-within {
	border-color: var(--cp-navy);
}

.search-modal__icon {
	flex-shrink: 0;
	opacity: 0.35;
}

.search-modal__input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 500;
	color: var(--color-text);
	padding: var(--sp-1) 0;
	min-width: 0;
}

.search-modal__input::placeholder {
	color: var(--color-text-faint);
	font-weight: 400;
}

.search-modal__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	background-color: var(--color-text);
	-webkit-mask-image: url('../icons/019-close.svg');
	mask-image: url('../icons/019-close.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 14px;
	mask-size: 14px;
	cursor: pointer;
	opacity: 0.3;
	transition: opacity var(--ease-base);
}

.search-modal__input::-webkit-search-cancel-button:hover {
	opacity: 0.8;
}

/* Podpowiedzi klawiaturowe */
.search-modal__hint {
	margin-top: var(--sp-3);
	font-size: var(--fs-11);
	color: var(--color-text-faint);
}

.search-modal__hint kbd {
	display: inline-block;
	padding: 0.12em 0.45em;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	font-family: inherit;
	font-size: 0.9em;
	color: var(--color-text-muted);
}

/* ============================================================
   DROPDOWN MENU (Static & native WP)
   ============================================================ */
.has-dropdown,
.menu-item-has-children {
	position: relative;
}

.dropdown-icon {
	margin-left: 0.3em;
	transition: transform 0.2s ease;
	width: 10px;
	height: 6px;
	display: inline-block;
	vertical-align: middle;
}

.menu-item-has-children > a::after {
	content: '▼';
	font-size: 0.6em;
	margin-left: 0.4em;
	display: inline-block;
	transition: transform 0.2s ease;
	vertical-align: middle;
}

.has-dropdown:hover .dropdown-icon,
.menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
}

.dropdown-menu,
.sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: var(--color-surface);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	min-width: 200px;
	padding: var(--sp-2) 0;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 100;
	border-top: 2px solid var(--color-link);
	list-style: none; /* for WP */
	margin: 0; /* for WP */
}

.has-dropdown:hover .dropdown-menu,
.menu-item-has-children:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.dropdown-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dropdown-menu__link,
.sub-menu li a {
	display: block;
	padding: var(--sp-3) var(--sp-5);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--fs-15);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
	letter-spacing: 0.02em;
}

.dropdown-menu__link:hover,
.sub-menu li a:hover {
	color: var(--color-accent);
	background: rgba(0,0,0, 0.03);
}

[data-theme="dark"] .dropdown-menu__link:hover,
[data-theme="dark"] .sub-menu li a:hover {
	background: rgba(255,255,255, 0.05);
}

/* ============================================================
   MOBILE DROPDOWN (ACCORDION)
   ============================================================ */
.mobile-dropdown__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-5);
	font-size: var(--fs-18);
	font-weight: 600;
	color: rgba(255,255,255,.85);
	cursor: pointer;
	list-style: none; /* Ukryj domyślną strzałkę */
	transition: color var(--ease-base), background var(--ease-base);
}
.mobile-dropdown__summary::-webkit-details-marker {
	display: none;
}
.mobile-dropdown[open] .mobile-dropdown__summary {
	color: #fff;
	background: rgba(255,255,255,.05);
}
.mobile-dropdown__icon {
	font-size: 0.6em;
	transition: transform var(--ease-base);
}
.mobile-dropdown[open] .mobile-dropdown__icon {
	transform: rotate(180deg);
}
.mobile-dropdown__list {
	list-style: none;
	background: rgba(0,0,0,.2);
	padding: var(--sp-2) 0;
}
.mobile-dropdown__list a {
	padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-8);
	font-size: var(--fs-16);
}
.mobile-dropdown__list a::after {
	display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 768px) {
	.slim-bar__ticker {
		display: flex;
	}

	/* Na desktopie meta wraca do auto-szerokości obok tickera */
	.slim-bar__meta {
		width: auto;
	}

	.slim-bar__a11y {
		margin-left: var(--sp-2);
	}

	.site-logo__tagline {
		display: block;
	}

	.logo-bar__ad {
		height: 50px;
	}
}

/* ============================================================
   MOBILE DROPDOWN (sub-menu jako akordeon w menu mobilnym)
   ============================================================ */

/* Resetuj absolutne pozycjonowanie z globalnego .sub-menu */
.mobile-menu__nav .menu-item-has-children > .sub-menu {
	position: static;
	max-height: 0;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border-radius: 0;
	border-top: none;
	min-width: 0;
	z-index: auto;
	transition: max-height 0.35s ease;
	background: rgba(0,0,0,.18);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu__nav .menu-item-has-children.is-open > .sub-menu {
	max-height: 600px;
}

.mobile-menu__nav .menu-item-has-children > a::after {
	content: '›';
	display: inline-block;
	transition: transform var(--ease-base);
}

.mobile-menu__nav .menu-item-has-children.is-open > a::after {
	transform: rotate(90deg);
}

.mobile-menu__nav .sub-menu li a {
	padding-left: var(--sp-10);
	font-size: var(--fs-16);
	color: rgba(255,255,255,.65);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
	/* Ukryj przyciski powiększania/pomniejszania czcionki */
	#js-a11y-zoom-in,
	#js-a11y-zoom-out,
	#js-a11y-zoom-reset {
		display: none;
	}

	/* Przycisk kontrastu — większy dla lepszej klikalności */
	#js-a11y-contrast {
		width: 36px;
		height: 36px;
	}
}

@media (min-width: 1024px) {
	.site-nav {
		display: flex;
	}

	.site-nav-bar__actions .btn-hamburger {
		display: none;
	}

	.mobile-menu {
		display: none !important;
	}
}