/*
 * Appearance → Customize → Header (inc/customize-header.php). The header
 * template part gets classes and CSS variables; each rule only applies
 * when its option is set, so an untouched header keeps the Site Editor's
 * look. The outer group is the header's band, the alignwide group inside
 * it holds the logo group and the menu + icons group.
 */

/* Stays at the top while scrolling (below the admin bar when shown). */
.bookshelf-header--sticky {
	position: sticky;
	inset-block-start: 0;

	/* Above the sticky "Buy now" bar (90): menu and cart drawer cover it. */
	z-index: 100;
	background: var(--bookshelf-header-bg, var(--wp--preset--color--base, #fff));
}

.admin-bar .bookshelf-header--sticky {
	inset-block-start: 32px;
}

@media (max-width: 782px) {

	.admin-bar .bookshelf-header--sticky {
		inset-block-start: 46px;
	}
}

/* The admin bar scrolls away on phones (WordPress makes it absolute). */
@media (max-width: 600px) {

	.admin-bar .bookshelf-header--sticky {
		inset-block-start: 0;
	}
}

/*
 * Below a sticky header: the product gallery sticks under it, and anchors
 * and keyboard focus scroll clear of it. --bookshelf-header-height is
 * measured by a small script printed with the sticky option.
 */
html:has(.bookshelf-header--sticky) {
	scroll-padding-block-start: calc(var(--bookshelf-header-height, 80px) + var(--wp--preset--spacing--20));
}

body:has(.bookshelf-header--sticky) .bookshelf-sticky-gallery {
	inset-block-start: calc(var(--bookshelf-header-height, 80px) + var(--wp--preset--spacing--40));
}

@media (min-width: 783px) {

	.admin-bar:has(.bookshelf-header--sticky) .bookshelf-sticky-gallery {
		inset-block-start: calc(var(--bookshelf-header-height, 80px) + 32px + var(--wp--preset--spacing--40));
	}
}

/* Colours. */
.bookshelf-header--colors > .wp-block-group {
	background: var(--bookshelf-header-bg);
	color: var(--bookshelf-header-text);
}

/*
 * Texts and icons take the header's text colour. !important beats the
 * search and cart buttons' own colour rules; the open phone menu (a light
 * overlay) keeps its own colours.
 */
.bookshelf-header--colors :is(.wp-block-site-title a, .wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button, .wp-block-woocommerce-customer-account a, .wp-block-search__button),
.bookshelf-header--colors .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	color: var(--bookshelf-header-text) !important;
}

.bookshelf-header--colors .wp-block-search__button:not(:hover) {
	background: transparent !important;
}

/* Height (vertical padding of the band). */
.bookshelf-header--height > .wp-block-group {
	padding-block: var(--bookshelf-header-pad) !important;
}

/* Line under the header. */
.bookshelf-header--border-hide > .wp-block-group {
	border-block-end: 0 !important;
}

.bookshelf-header--border-show > .wp-block-group {
	border-block-end: 1px solid var(--wp--preset--color--border, #e6e6e6) !important;
}

/* Content width. */
.bookshelf-header--width-full > .wp-block-group > .alignwide {
	max-inline-size: none;
}

/* Logo width. */
.bookshelf-header--logo-width .wp-block-site-logo img {
	inline-size: var(--bookshelf-header-logo);
	max-inline-size: none;
	block-size: auto;
}

@media (max-width: 600px) {

	.bookshelf-header--logo-width-phone .wp-block-site-logo img {
		inline-size: var(--bookshelf-header-logo-phone);
		max-inline-size: none;
	}
}

/* Site title next to the logo. */
.bookshelf-header--title-auto .wp-block-site-logo + .wp-block-site-title,
.bookshelf-header--title-hide .wp-block-site-title {
	display: none;
}

@media (max-width: 600px) {

	.bookshelf-header--title-show .wp-block-site-logo + .wp-block-site-title {
		display: block;
	}
}

/* Menu in the middle: the menu + icons group takes the free space. */
@media (min-width: 601px) {

	.bookshelf-header--menu-align-center > .wp-block-group > .alignwide > .wp-block-group:last-child {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.bookshelf-header--menu-align-center .wp-block-navigation {
		margin-inline: auto;
	}
}

/* Space between menu items, and between the icons. */
.bookshelf-header--menu-gap .wp-block-navigation__container {
	gap: var(--bookshelf-header-menu-gap);
}

.bookshelf-header--icon-gap > .wp-block-group > .alignwide > .wp-block-group:last-child {
	gap: var(--bookshelf-header-icon-gap);
}

/* Icon size and colour (search, menu button, account, cart). */
.bookshelf-header--icon-size :is(.wp-block-search__button svg, .wp-block-navigation__responsive-container-open svg, .wp-block-woocommerce-customer-account svg, .wc-block-mini-cart__icon) {
	inline-size: var(--bookshelf-header-icon);
	block-size: var(--bookshelf-header-icon);
}

/* Doubled class: wins over the header text colour above. */
.bookshelf-header.bookshelf-header--icon-color :is(.wp-block-search__button, .wp-block-navigation__responsive-container-open, .wp-block-woocommerce-customer-account a, .wc-block-mini-cart__button) {
	color: var(--bookshelf-header-icon-color) !important;
}

.bookshelf-header--icon-color :is(.wp-block-search__button svg, .wp-block-navigation__responsive-container-open svg, .wp-block-woocommerce-customer-account svg, .wc-block-mini-cart__icon) {
	fill: currentcolor;
}