/* Site header - template-parts/site-header.php, mobile-menu-part.php and
   search-form-part.php. Design: Figma "Nawigacja" (12775:4587) and
   "Nawigacja | Mobile" (12775:6820, 12775:6949). Behaviour: js/header.js.

   The search field opens from its button on every breakpoint; the design
   shows the open state. Mobile, below 992px: menu button, the field drops
   below the logo row. Desktop: inline menu; from 1280px the field keeps its
   place in the row, so opening it moves nothing and lines up with the design,
   below that it opens over the menu. */

:root {
	/* The sticky header's height, kept in sync by js/header.js; these are
	   the fallbacks before it runs. */
	--header-height: 6.375rem;

	/* How much shorter the header gets once scrolled - the difference
	   between the resting and the .is-scrolled padding below. */
	--header-shrink: 1.5rem;
	--header-transition: 0.3s ease;
}

@media (max-width: 991.98px) {
	:root {
		--header-height: 3.125rem;
		--header-shrink: 0.5rem;
	}
}

/* Anchors and focused elements stop below the sticky header instead of
   under it (WCAG 2.4.11). */
html {
	scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
}

/* ------------------------------------------------------------------ Shell */

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1020;
	background: var(--sl-white);
	font-family: var(--theme-font);
	transition: box-shadow var(--header-transition);
}

/* Below 601px WordPress stops fixing the admin bar, so it scrolls away. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-areas: "logo nav search actions";
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 2.5rem;
	max-width: calc(var(--grid-max-width) + 2 * var(--grid-margin));
	margin-inline: auto;
	padding: 1.5rem var(--grid-margin) 2rem;
	transition: padding var(--header-transition);
}

/* Scrolled: js/header.js adds .is-scrolled once the promo bar is gone and the
   header is stuck. It loses --header-shrink of padding, and the skip link
   anchor right below it (header.php) grows by the same amount, at the same
   pace - the header sits in the flow, so the page would otherwise be pulled
   up mid-scroll. */
.site-header.is-scrolled {
	box-shadow: 0 1px 0 var(--sl-grey-200);
}

.site-header.is-scrolled .site-header__inner {
	padding-block: 1rem;
}

.site-header ~ #content {
	height: 0;
	transition: height var(--header-transition);
}

.site-header.is-scrolled ~ #content {
	height: var(--header-shrink);
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__inner,
	.site-header__logo img,
	.site-header ~ #content {
		transition: none;
	}
}

.site-header :is(a, button):focus-visible,
.mobile-menu :is(a, button):focus-visible {
	outline: 2px solid var(--sl-grey-900);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- Logo */

.site-header__logo {
	grid-area: logo;
	display: block;
}

.site-header__logo img {
	display: block;
	width: 15.7125rem;
	height: auto;
	transition: width var(--header-transition);
}

/* Shorter than the 44px search field, so it never changes the row height. */
.site-header.is-scrolled .site-header__logo img {
	width: 12.5rem;
}

/* -------------------------------------------------------------------- Nav */

.site-header__nav {
	grid-area: nav;
	justify-self: center;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: block;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sl-grey-900);
}

.site-nav a:hover {
	color: var(--sl-grey-900);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---------------------------------------------------------------- Actions */

.site-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-action {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	min-height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sl-grey-900);
}

.header-action:hover {
	opacity: 0.7;
}

.header-action__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* Item count on the cart and wishlist, in the promo bar's colour. */
.header-action__badge {
	position: absolute;
	top: -0.375rem;
	left: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0.875rem;
	height: 0.875rem;
	padding-inline: 0.1875rem;
	border-radius: 0.4375rem;
	background: var(--header-accent);
	font-family: var(--sl-font-ui);
	font-size: 0.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--sl-white);
}

.header-action__badge[hidden] {
	display: none;
}

.site-header__menu-toggle {
	grid-area: toggle;
	display: none;
}

/* ----------------------------------------------------------------- Search */

.site-header__search {
	grid-area: search;
}

.search-field {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding: calc(0.75rem - 1px) 1rem;
	border: 1px solid var(--sl-grey-300);
	border-radius: var(--sl-radius-md);
	background: var(--sl-white);
}

.search-field:focus-within {
	border-color: var(--sl-grey-900);
	box-shadow: 0 0 0 1px var(--sl-grey-900);
}

/* A 24px target around the 14px icon; the negative margin keeps the icon
   where the design puts it (WCAG 2.5.8). */
.search-field__submit {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin: -0.3125rem;
	padding: 0;
	border: 0;
	background: none;
}

.search-field__submit img {
	display: block;
}

/* Specific enough to beat css/forms.css, whose `.woocommerce input` rules
   reach the header on shop pages (WooCommerce puts the class on <body>).
   The border and focus ring belong to .search-field, not the input. */
.search-field .search-field__input[type="search"] {
	flex: 1;
	width: auto;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: none;
	font-family: var(--theme-font);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sl-grey-900);
}

.search-field .search-field__input[type="search"]:focus-visible {
	outline: 0;
}

.search-field .search-field__input::placeholder {
	color: var(--sl-grey-500);
	opacity: 1;
}

@media (min-width: 992px) {
	/* Visible at once on opening, so js/header.js can focus the input; on
	   closing it fades out first and only then leaves the tab order. */
	.site-header__search {
		width: 19.5rem;
		transition: opacity 0.2s;
	}

	/* Only with JS (the .js class from header.php), so without it the field
	   just stays open. Hidden, it is out of the tab order and the
	   accessibility tree. */
	.js .site-header__search:not(.is-open) {
		visibility: hidden;
		opacity: 0;
		transition:
			opacity 0.2s,
			visibility 0s 0.2s;
	}
}

@media (min-width: 992px) and (max-width: 1279.98px) {
	/* Positioned, so the field below is placed against its grid area. */
	.site-header__inner {
		position: relative;
		grid-template-areas: "logo nav actions";
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 1.5rem;
	}

	.site-header__logo img {
		width: 12.5rem;
	}

	.site-nav {
		gap: 1.5rem;
	}

	/* No room for the field in the row: it opens over the menu, 2.5rem left
	   of the icons, as on wide screens. */
	.site-header__search {
		position: absolute;
		top: 50%;
		right: calc(100% + 2.5rem);
		grid-area: actions;
		translate: 0 -50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__search {
		transition: none;
	}
}

/* ----------------------------------------------------------------- Mobile */

@media (max-width: 991.98px) {
	.site-header__inner {
		grid-template-areas:
			"logo actions toggle"
			"search search search";
		grid-template-columns: minmax(0, 1fr) auto auto;
		column-gap: clamp(0.75rem, 8vw - 0.75rem, 2rem);
		padding: 1rem var(--grid-margin) 0.625rem;
	}

	.site-header.is-scrolled .site-header__inner {
		padding-block: 0.625rem 0.5rem;
	}

	/* The icons and the menu button keep their size; on narrow phones the
	   logo gives way, down to whatever is left of the row (~105px at 320px).
	   Its column is the flexible one, so the icons stay at the right edge. */
	.site-header__logo {
		justify-self: start;
		width: min(8.875rem, 100%);
	}

	.site-header__logo img,
	.site-header.is-scrolled .site-header__logo img {
		width: 100%;
	}

	.site-header__nav {
		display: none;
	}

	/* Closed, the field takes no room, so the sticky header stays one row
	   tall. Open: 14px below the logo row and 12px above the edge, as in the
	   design (the inner box already pads 10px). */
	.site-header__search {
		margin-block: 0.875rem 0.125rem;
	}

	.js .site-header__search:not(.is-open) {
		display: none;
	}

	.site-header__actions {
		gap: 0.375rem;
	}

	/* 20px icons in 24px targets: the 6px gap plus 2px each side gives the
	   design's 10px between icons. The search button is not in the mobile
	   design; it comes first, as on desktop. */
	.site-header__actions .header-action__icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.site-header__actions .header-action__badge {
		top: -0.1875rem;
		left: 0.8125rem;
		min-width: 0.75rem;
		height: 0.75rem;
		padding-inline: 0.125rem;
		font-size: 0.4375rem;
	}

	.site-header__menu-toggle {
		display: flex;
	}
}

/* ------------------------------------------------------------ Mobile menu */

.mobile-menu.offcanvas {
	--bs-offcanvas-width: 100%;

	border: 0;
	overflow-y: auto;
	padding-bottom: 2rem;
	font-family: var(--theme-font);
}

.mobile-menu__header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	height: 3.5rem;
	padding-inline: 1.5rem;
}

.mobile-menu__logo img {
	display: block;
	width: 8.875rem;
	height: auto;
}

.mobile-menu__search {
	padding: 0.25rem 1.5rem 0.75rem;
}

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

.mobile-menu__list li {
	margin-inline: 1.5rem;
	border-bottom: 1px solid var(--sl-grey-200);
}

.mobile-menu__list a {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sl-grey-900);
}

.mobile-menu__list a:hover {
	color: var(--sl-grey-900);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Two classes: css/social-links.css loads later and resets the margin. */
.mobile-menu .mobile-menu__socials {
	flex: none;
	align-self: center;
	margin-top: 1.75rem;
	color: var(--sl-black);
}