/*
 * The header stays Blocksy's — this only repaints it. Selectors target
 * Blocksy's own markup, so keep them shallow: a deep chain would break on a
 * theme update, and the breakage would be silent.
 *
 * The hook is header.ct-header. Blocksy renders <header id="header"
 * class="ct-header" data-id="type-1"> — there is no data-header attribute,
 * so a rule written against one matches nothing and repaints nothing.
 *
 * The header is linen, the page's own colour, as in the mock-up. What sets it
 * apart is a soft shadow, not a rule: the shop menu's panel slides out of the
 * bar (inc/menu.php) in the same linen, so bar and panel read as one surface
 * with nothing drawn between them. Chalk, a darker linen, denim, ink and sage
 * were all tried side by side; every colour that parted from the linen looked
 * pasted on.
 */

/*
 * Blocksy paints the header's rows, not the <header> element, from the
 * Customizer's palette — an inline rule roughly like
 * `[data-header*="type-1"] .ct-header [data-row*="middle"] { background-color: var(--theme-palette-color-8) }`,
 * which is three attributes/classes of specificity, so the rows have to be named
 * too. Adding [data-id] (which the header always carries) buys the specificity
 * without reaching any deeper into the markup.
 */
header.ct-header,
header.ct-header[data-id] [data-row] {
	background-color: var( --haft-len );
	background-image: none;
}

/*
 * The header travels with the reader, as in the mock-up.
 *
 * The bar used to be translucent, which is what made sticky worth having in
 * the mock-up; it is opaque now and stays sticky, so the menu and the
 * cart are always a move of the mouse away.
 *
 * `header#header`, because Blocksy sets `#header { position: relative }` — an id
 * against our class, which no amount of document order overcomes. Naming the id
 * and the element outweighs it.
 *
 * z-index is deliberately not set. Blocksy already gives the header 50, which
 * clears everything we draw, and its own overlays — the mobile drawer, the
 * search modal — are stacked against that number by the theme. Inventing a
 * higher one here would put the bar on top of the panels that are supposed to
 * cover it.
 *
 * Sticky survives `#main-container { overflow: clip }` and `body { overflow-x:
 * hidden }`, both Blocksy's: `clip` establishes no scroll container, so the
 * viewport stays the one that counts. Verified on the home page, the shop
 * archive and a product page rather than assumed.
 */
header.ct-header {
	box-shadow: 0 8px 20px -14px rgba( 23, 26, 33, 0.45 );

	/*
	 * Link and icon colours are set by feeding Blocksy's own variables rather
	 * than by out-specifying its rules. Its menu CSS reads
	 * `nav[class*="menu"] .ct-menu-link { color: var(--theme-link-initial-color) }`,
	 * and the current page's item is coloured by a separate, heavier selector. A
	 * plain `color:` override would tie with the first and lose to the second,
	 * leaving the active item off-palette. Reassigning the variables scoped to
	 * the header lets Blocksy's own cascade apply our colours to every state,
	 * including ones we would forget to enumerate.
	 */
	--theme-link-initial-color: var( --haft-atrament );
	--theme-link-hover-color: var( --haft-mulina );
	--theme-link-active-color: var( --haft-mulina );
	--theme-icon-color: var( --haft-atrament );
	--theme-icon-hover-color: var( --haft-mulina );
	--theme-text-color: var( --haft-atrament );
	--theme-headings-color: var( --haft-atrament );
}

/*
 * The site title is a <span class="site-title"> wrapping its own <a>, and the
 * anchor takes its colour from Blocksy's logo settings — outside the link
 * variables above. It needs naming directly. Scoped to .site-title a, not
 * header a: a blanket anchor rule would also flatten the menu's active state
 * back off the palette we just handed Blocksy.
 */
header.ct-header .site-title,
header.ct-header .site-title a {
	color: var( --haft-atrament );
	font-family: var( --haft-font-display );
	font-weight: 800;
	letter-spacing: -0.03em;
}

header.ct-header .site-title a:hover,
header.ct-header .site-title a:focus-visible {
	color: var( --haft-mulina );
}

/*
 * Nav links, matched to the mock-up: 0.88rem, weight 500, mixed case. Blocksy
 * ships them at 12px uppercase, which is its own house style, not ours.
 */
header.ct-header .ct-menu-link {
	font-family: var( --haft-font-display );
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;

	/*
	 * The hover rule is a dashed stitch tucked under the words, and it has to be
	 * text-decoration rather than the mock-up's border-bottom. Blocksy makes each
	 * link a flex box the full height of the header row — 120px — so a
	 * border-bottom draws at the bottom of that box, a long way beneath the text,
	 * which is exactly where it was landing. An underline follows the text
	 * itself, so the offset stays 4px whatever height the row grows to.
	 */
	text-decoration: underline dashed transparent 1.5px;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.15s;
}

header.ct-header .ct-menu-link:hover,
header.ct-header .ct-menu-link:focus-visible,
header.ct-header .current-menu-item > .ct-menu-link,
header.ct-header .current-menu-ancestor > .ct-menu-link {
	text-decoration-color: var( --haft-mulina );
}

@media ( prefers-reduced-motion: reduce ) {
	header.ct-header .ct-menu-link {
		transition: none;
	}
}

/*
 * The cart button.
 *
 * Absolutely positioned inside the header rather than placed in the flow:
 * inc/cart.php appends it after Blocksy's rows instead of splicing it into
 * them, so it arrives as a sibling of the bar's contents, not a child of the
 * row that holds the menu.
 *
 * This block also carries the sticky rule, which used to sit on its own further
 * up the file. The two belong together: `position: absolute` needs a positioned
 * ancestor, and this is the declaration that provides it.
 *
 * `header#header`, because Blocksy sets `#header { position: relative }` — an id
 * against our class, which no amount of document order overcomes. Naming the id
 * and the element outweighs it.
 *
 * z-index is deliberately not set on the header. Blocksy already gives it 50,
 * which clears everything we draw, and its own overlays — the mobile drawer, the
 * search modal — are stacked against that number by the theme. Inventing a
 * higher one here would put the bar on top of the panels that are supposed to
 * cover it.
 *
 * Sticky survives `#main-container { overflow: clip }` and `body { overflow-x:
 * hidden }`, both Blocksy's: `clip` establishes no scroll container, so the
 * viewport stays the one that counts. Verified on the home page, the shop
 * archive and a product page rather than assumed.
 */
header#header.ct-header {
	position: sticky;
	top: 0;

	/*
	 * Width the button claims at the end of the bar, gap included.
	 *
	 * Absolute positioning takes the button out of the flow, so Blocksy lays its
	 * own row out as if the space were free and runs the menu and the search icon
	 * straight underneath it. Measured at 1440px before this rule: the button
	 * covered 51px of the last menu link and all of the search icon.
	 *
	 * The row's container gets this as padding-right, which is the one place that
	 * shortens every item in the end column at once — padding the items instead
	 * would have to enumerate them, and the owner can add more from the
	 * Customizer at any time.
	 */
	--haft-koszyk-slot: 175px;
}

header#header [data-row] > .ct-container {
	padding-right: var( --haft-koszyk-slot );
}

/*
 * A lower bar. Blocksy sizes the row from its own `--height`, 120px by
 * default, and a sticky bar that tall follows the reader around taking a
 * seventh of the window. The Customizer would set it too, but that lives in
 * the database and is deliberately not seeded (docs/wdrozenie.md); the CSS is
 * in git. Desktop only — below 1000px Blocksy already drops to 70px, and the
 * media query keeps this rule from outranking that one.
 */
@media ( min-width: 1000px ) {
	header.ct-header[data-id] [data-row*="middle"] {
		--height: 84px;
	}
}

/*
 * The desktop bar's layout: the menu on the left, the shop's name in the
 * middle, the search field and the cart on the right.
 *
 * Blocksy's layout lives in the Customizer, which is not seeded
 * (docs/wdrozenie.md), and renders the row as a start column (the name) and an
 * end column (the menu and the search icon). The row's container becomes a
 * three-track grid and the columns step aside (display: contents), so their
 * item groups sit in the tracks directly: the end column's in the first, the
 * start column's in the middle. The third track stays empty for the actions
 * group, which is placed absolutely at the bar's edge — so the slot that pads
 * the container for it on narrower screens goes to zero here.
 *
 * Blocksy's search icon goes: the field replaces it (inc/search.php).
 */
@media ( min-width: 1000px ) {
	header#header.ct-header {
		--haft-koszyk-slot: 0px;
	}

	/*
	 * Stretch, not centre: Blocksy makes each menu link the full height of the
	 * row, which is what lets the mouse travel from „Sklep” straight into the
	 * panel under the bar. Centred, the link shrank to its text, and the strip
	 * of bar between it and the panel closed the menu on the way down.
	 */
	#header [data-device="desktop"] [data-row] > .ct-container {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: stretch;
	}

	#header [data-device="desktop"] [data-row] [data-column] {
		display: contents;
	}

	/* Blocksy pushes the end column's items to its right edge; here it is the left. */
	#header [data-device="desktop"] [data-column="end"] > [data-items] {
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
	}

	#header [data-device="desktop"] [data-column="start"] > [data-items] {
		grid-column: 2;
		grid-row: 1;
	}

	#header [data-device="desktop"] [data-id="search"] {
		display: none;
	}

	/*
	 * Blocksy pads every menu link on both sides and gives the menu a margin
	 * of its own; both would start „Sklep” a gap to the right of the page's
	 * edge, and of the panel's first column under it.
	 */
	#header [data-device="desktop"] nav[data-id="menu"] {
		margin-inline-start: 0;
	}

	#header [data-device="desktop"] nav[data-id="menu"] > ul > li:first-child > .ct-menu-link {
		padding-inline-start: 0;
	}
}

/*
 * The right-hand end of the bar: the search field (desktop only) and the cart
 * button, one group from inc/cart.php, placed at the bar's edge.
 */
.haft-naglowek-akcje {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
}

/*
 * The search field: the cart button's outline and height, so the two read as
 * one pair of controls. The magnifier is the submit button, inside the field
 * at its left; the placeholder says what the field is for. Folded, the border
 * takes the text's transparent colour with it and only the magnifier shows.
 */
.haft-szukaj form {
	position: relative;
	margin: 0;
}

.haft-szukaj input[type="search"] {
	width: 240px;
	height: 42px;
	margin: 0;
	padding: 0 14px 0 38px;
	border: 1.5px solid currentColor;
	border-radius: var( --haft-radius );
	background: transparent;
	color: inherit;
	font-family: var( --haft-font-body );
	font-size: 0.88rem;
	box-shadow: none;
}

.haft-szukaj input[type="search"]::placeholder {
	color: inherit;
	opacity: 0.6;
}

/*
 * An unfolded field, and a focused one, has a red border — the magnifier
 * opening into a box the colour of the shop's accent. Blocksy's own focus
 * border reads the same variable, so the two agree instead of stacking.
 */
.haft-szukaj {
	--theme-form-field-border-focus-color: var( --haft-mulina );
}

.haft-szukaj--otwarte input[type="search"],
.haft-szukaj input[type="search"]:focus {
	outline: none;
	border-color: var( --haft-mulina );
}

.haft-szukaj button {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/*
 * Under the cursor the magnifier turns red and gets the menu's dashed stitch
 * under it — never a filled box. Blocksy paints every button's hover with an
 * ink background, which here read as a black square in the bar.
 */
.haft-szukaj button:hover,
.haft-szukaj button:focus-visible {
	background: none;
	color: var( --haft-mulina );
}

.haft-szukaj button::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 18px;
	transform: translateX( -50% );
	border-bottom: 1.5px dashed transparent;
	transition: border-color 0.15s;
}

.haft-szukaj--zwijane:not( .haft-szukaj--otwarte ) button:hover::after,
.haft-szukaj--zwijane:not( .haft-szukaj--otwarte ) button:focus-visible::after {
	border-bottom-color: var( --haft-mulina );
}

@media ( max-width: 1199px ) {
	.haft-szukaj input[type="search"] {
		width: 200px;
	}
}

/*
 * Folded (assets/js/search.js): the field shrinks to a square the size of its
 * magnifier and unfolds leftwards — the group is anchored at the bar's right
 * edge, so a wider field grows towards the name, not off the screen. Without
 * the script neither class is set and the field stays open.
 *
 * The transition waits for --ruchome, which the script sets only after the
 * first fold: otherwise every page load would show the open field shrinking.
 */
.haft-szukaj--ruchome input[type="search"] {
	transition: width 0.25s ease, padding 0.25s ease;
}

.haft-szukaj--zwijane:not( .haft-szukaj--otwarte ) input[type="search"] {
	width: 42px;
	padding: 0;
	color: transparent;
	caret-color: transparent;
	cursor: pointer;
}

.haft-szukaj--zwijane:not( .haft-szukaj--otwarte ) input[type="search"]::placeholder {
	opacity: 0;
}

.haft-szukaj--zwijane:not( .haft-szukaj--otwarte ) button {
	width: 42px;
}

@media ( prefers-reduced-motion: reduce ) {
	.haft-szukaj--ruchome input[type="search"] {
		transition: none;
	}
}

.haft-naglowek-akcje {
	color: var( --haft-atrament );
}

.haft-koszyk {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1.5px solid var( --haft-atrament );
	border-radius: var( --haft-radius );
	font-family: var( --haft-font-display );
	font-weight: 700;
	font-size: 0.88rem;
	color: var( --haft-atrament );
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.haft-koszyk:hover,
.haft-koszyk:focus-visible {
	background: var( --haft-atrament );
	color: var( --haft-len );
}

/* The mock-up's red pill. */
.haft-koszyk__licznik {
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var( --haft-mulina );
	color: var( --haft-kreda );
	font-family: var( --haft-font-kod );
	font-size: 0.7rem;
	line-height: 20px;
	text-align: center;
}

/*
 * Below 780px the word goes and the icon stays, as in the mock-up, and the
 * button tucks into the gap between the site title and the burger.
 *
 * The slot goes to zero there, which looks backwards but is not: the slot works
 * by shortening the row's end column, and on a phone that column holds the
 * burger — padding it would drag the burger inwards, away from the edge it
 * belongs on, and towards the button rather than away from it. The gap is real
 * estate the collapsed header already has spare.
 */
@media ( max-width: 780px ) {
	header#header.ct-header {
		--haft-koszyk-slot: 0px;
	}

	.haft-naglowek-akcje {
		right: 64px;
	}

	.haft-koszyk {
		padding: 8px 10px;
		gap: 6px;
	}

	.haft-koszyk__tekst {
		display: none;
	}
}

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

/*
 * The shop menu (inc/menu.php): on desktop, a panel of columns — one per line,
 * the line's name as its heading, its subcategories under it — instead of
 * Blocksy's 200px dark dropdown with a flyout per line. Everything is on
 * screen after one hover.
 *
 * Built on Blocksy's own submenu, which it shows and hides with .ct-active, so
 * hover, focus and the delay stay Blocksy's. Scoped to #header, not
 * .ct-header: the mobile drawer carries that class too, and it renders the
 * same menu as an accordion and keeps it. The id also outweighs Blocksy's
 * dropdown rules without a pile of selectors.
 *
 * The item goes static so the panel positions against the header, not under
 * the word „Sklep”: it spans the window, like the bar it slides out of, and
 * its columns line up with the site's container through the padding. No
 * rule between them: bar and panel are one surface.
 *
 * It slides down rather than fading in place: a clip-path that opens from the
 * top edge. The bottom inset goes negative when open so the shadow is not cut
 * off. Blocksy's own 10px drop is switched off — the slide replaces it.
 */
#header .haft-menu-sklep[data-submenu] {
	position: static;
}

#header .haft-menu-sklep > .sub-menu {
	left: 0;
	right: 0;
	width: auto;
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	row-gap: 20px;
	padding: 28px max( 40px, calc( ( 100% - var( --theme-normal-container-max-width, 1290px ) ) / 2 ) ) 24px;
	background: var( --haft-len );
	border-radius: 0;
	box-shadow: 0 18px 30px -12px rgba( 23, 26, 33, 0.25 );
	transform: none;
	clip-path: inset( 0 0 100% 0 );
	/* Opaque almost at once, so what the eye follows is the slide, not a fade. */
	transition: clip-path 0.25s ease, opacity 0.08s linear, visibility 0.25s;
}

#header .haft-menu-sklep.ct-active > .sub-menu {
	transform: none;
	clip-path: inset( 0 0 -60px 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	#header .haft-menu-sklep > .sub-menu {
		transition: none;
	}
}

/*
 * A column, not a row: Blocksy lays menu items out as flex rows. The space
 * between columns is padding rather than a gap, so the seam above the closing
 * links runs unbroken across the panel.
 */
#header .haft-menu-sklep > .sub-menu > li {
	display: block;
	padding-right: 32px;
	border: 0;
}

/* Blocksy draws a rule between dropdown items; columns do not need one. */
#header .haft-menu-sklep .sub-menu li {
	border: 0;
}

#header .haft-menu-sklep .sub-menu .ct-menu-link {
	margin: 0;
	padding: 5px 0;
	color: var( --haft-atrament );
	font-size: 0.88rem;
}

#header .haft-menu-sklep .sub-menu .ct-menu-link:hover,
#header .haft-menu-sklep .sub-menu .ct-menu-link:focus-visible,
#header .haft-menu-sklep .sub-menu .current-menu-item > .ct-menu-link {
	color: var( --haft-mulina );
}

/* The line's name heads its column. */
#header .haft-menu-linia > .ct-menu-link {
	margin-bottom: 4px;
	font-weight: 700;
	font-size: 1rem;
}

/* Subcategories stand under their line, always open; no flyout, no arrow. */
#header .haft-menu-linia > .sub-menu {
	position: static;
	width: auto;
	margin: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	background: none;
	box-shadow: none;
}

#header .haft-menu-linia .ct-toggle-dropdown-desktop,
#header .haft-menu-linia .ct-toggle-dropdown-desktop-ghost {
	display: none;
}

/*
 * „Z Twoim napisem →” and „Cały sklep →” close the panel, under a seam: the
 * first spans every column but the last, the second takes the last. Named
 * column lines, not a row number — with auto-fill the columns are explicit,
 * so -2 and -1 are always the panel's last column, however many lines there
 * are.
 */
#header .haft-menu-sklep > .sub-menu > .haft-menu-stopka {
	grid-column: 1 / -2;
	padding-top: 14px;
	border-top: 1px dashed var( --haft-szew );
}

#header .haft-menu-sklep > .sub-menu > .haft-menu-stopka + .haft-menu-stopka {
	grid-column: -2 / -1;
	padding-right: 0;
}

/* Blocksy's link is a flex box, so text-align would not move it. */
#header .haft-menu-stopka + .haft-menu-stopka > .ct-menu-link {
	justify-content: flex-end;
}

#header .haft-menu-stopka > .ct-menu-link {
	font-weight: 700;
}

/*
 * The mobile drawer: three links do not need Blocksy's 500px. A panel that
 * takes most of the screen for three words reads as a page, not a menu; at
 * 300px the page it covers stays in view behind it. `html` for the win over
 * Blocksy's own rule, as with the palette in style.css.
 */
html #offcanvas {
	--side-panel-width: 300px;

	/*
	 * Blocksy sets only the drawer's resting link colour (white). Hovered,
	 * current and expanded links fall back to the palette's accent-hovered
	 * colour, which is our ink — invisible on the drawer's near-black. The
	 * shop's red is no better there (about 2:1), so links stay white in every
	 * state and the current page carries the stitch the desktop menu shows on
	 * hover.
	 */
	--theme-link-hover-color: #ffffff;
	--theme-link-active-color: #ffffff;
}

#offcanvas .current-menu-item > .ct-menu-link,
#offcanvas .current-menu-item > .ct-sub-menu-parent > .ct-menu-link {
	text-decoration: underline dashed var( --haft-mulina ) 1.5px;
	text-underline-offset: 5px;
}