/*
 * Nagłówek (pasek komunikatu, logo, wyszukiwarka, język, konto, koszyk, menu) i stopka. Układ z makiety nosidla-wp.
 * Progi jak w Tailwindzie makiety: sm 640px, md 768px, lg 1024px.
 */

/* Stopka zawsze na dole, także na krótkich stronach */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.site-main { flex: 1 0 auto; }

/* Pasek komunikatu */
.notice-bar { background: var(--c-accent); color: #FFFFFF; font-size: 14px; font-weight: 600; }
.notice-bar__text { padding: 10px 0; text-align: center; }

/* Nagłówek przyklejony do góry, pod paskiem administracyjnym WordPressa */
.site-header { position: sticky; top: var(--admin-bar); z-index: 30; }
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}
.site-header__bar { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.site-header__inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }

.site-logo {
	min-width: 0;
	max-width: 11em;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.05;
	color: var(--c-accent);
	text-decoration: none;
	text-wrap: balance;
}
.site-logo--image { flex-shrink: 0; max-width: none; }
.site-logo--image img { display: block; width: auto; max-height: 48px; }

.search-pill--header { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }

/* Przełącznik języka */
.lang-switch {
	display: inline-flex;
	align-items: center;
	padding: 2px;
	border: 1px solid var(--c-ink-20);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
}
.lang-switch a {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	color: var(--c-muted);
	text-decoration: none;
	text-transform: uppercase;
}
.lang-switch a:hover { color: var(--c-ink); }
.lang-switch a.is-active { background: var(--c-ink); color: #FFFFFF; }
.lang-switch--header { display: none; margin-right: 4px; }
.lang-switch--menu { align-self: flex-start; }

/* „Jak to działa” jako pigułka z pytajnikiem */
.help-pill {
	display: none;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--c-ink-25);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.help-pill:hover { border-color: var(--c-accent); }
.help-pill__badge {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: #FFFFFF;
	font-size: 12px;
	letter-spacing: 0;
}

/* Ikony konta, koszyka i menu */
.icon-button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-ink);
	text-decoration: none;
}
.icon-button:hover { background: var(--c-card); }
.cart-link__count {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* Menu: na telefonie rozwijany panel, na komputerze pasek kategorii pod nagłówkiem */
.site-menu {
	display: none;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
	padding-bottom: 16px;
	background: var(--c-card);
	border-bottom: 1px solid var(--c-line);
	max-height: calc(100vh - var(--header-h) - var(--admin-bar));
	overflow-y: auto;
}
.search-pill--menu { background: var(--c-paper); }
.primary-nav__list { display: flex; flex-direction: column; gap: 4px; }
.primary-nav__list a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 0;
	font-weight: 600;
	text-decoration: none;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a { color: var(--c-accent); }
.primary-nav .sub-menu { padding-left: 16px; }

@media (max-width: 1023.98px) {
	.site-menu.is-open,
	.no-js .site-menu { display: flex; }
}

@media (min-width: 640px) {
	.site-header__actions { gap: 8px; }
	.lang-switch--header { display: inline-flex; }
	.lang-switch--menu { display: none; }
}

@media (min-width: 768px) {
	.site-logo { font-size: 26px; max-width: 9em; }
	.search-pill--header { display: flex; flex: 1; max-width: 36rem; margin-inline: auto; }
	.search-pill--menu { display: none; }
	.site-header__actions { margin-left: 0; }
}

@media (min-width: 1024px) {
	.site-header__inner { gap: 32px; }
	.site-logo { font-size: 30px; max-width: 9em; }
	.help-pill { display: inline-flex; }
	.menu-toggle { display: none; }

	.site-menu { display: block; padding-top: 0; padding-bottom: 0; max-height: none; overflow: visible; }
	.primary-nav__list { flex-direction: row; justify-content: center; align-items: center; gap: 48px; height: var(--nav-h); }
	.primary-nav__list > li { position: relative; }
	.primary-nav__list a { padding: 0; }
	.primary-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: -16px;
		z-index: 40;
		min-width: 240px;
		padding: 8px;
		background: var(--c-card);
		border: 1px solid var(--c-line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
	}
	.primary-nav li:hover > .sub-menu,
	.primary-nav li:focus-within > .sub-menu { display: block; }
	.primary-nav .sub-menu a { padding: 8px 12px; border-radius: var(--radius-sm); }
	.primary-nav .sub-menu a:hover { background: var(--c-accent-faint); }
}

@media (min-width: 1280px) {
	.site-logo { max-width: none; flex-shrink: 0; }
}

/* Stopka */
.site-footer { margin-top: 96px; background: var(--c-ink); color: #FFFFFF; }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 56px 0; }
.site-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; max-width: 24rem; min-width: 0; }
.site-footer__name { font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: #FFFFFF; text-decoration: none; }
.site-footer__text { color: rgba(255, 255, 255, .75); }

.newsletter { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.newsletter__input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .1);
	color: #FFFFFF;
	outline: none;
}
.newsletter__input::placeholder { color: rgba(255, 255, 255, .55); opacity: 1; }
.newsletter__input:focus { border-color: rgba(255, 255, 255, .6); }
.newsletter__button {
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: #FFFFFF;
	font-weight: 600;
}
.newsletter__button:hover { background: var(--c-accent-dark); }
.newsletter__note { flex-basis: 100%; font-size: 14px; color: rgba(255, 255, 255, .8); }

.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.footer-col__title { font-weight: 600; color: #FFFFFF; }
.footer-col__list { display: flex; flex-direction: column; gap: 10px; }
.footer-col__list a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.footer-col__list a:hover { color: #FFFFFF; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
}
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; }

@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
	.site-footer__brand { grid-column: auto; }
}