/*
 * The site header: wordmark, navigation, submenus and the account link.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* --------------------------------------------------------------------- header */

/* The nav is links, not prose: no underline until it is worth one. */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--navy-deep);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * The way back into a customer's own account.
 *
 * On a wide screen it sits beside the call to action rather than inside the
 * navigation, because it is not a section of the site: the nav is what we sell,
 * this is what somebody already bought. Quieter than the button next to it, so
 * the header still has only one primary action.
 *
 * The label does not change with sign in state. The page serves both, so the
 * header stays the same HTML for everybody, which keeps it cacheable and means
 * it can never end up telling somebody already signed in to sign in.
 *
 * Below 600px, where the navigation becomes a hamburger, it is the nav item
 * instead. Both at once fits, but only by wrapping the header onto a second row
 * and spending 45px of a phone screen on every page of the store. 600px is not a
 * guess: it is the width core switches the navigation block at, so the two
 * always trade places and never both appear or both vanish.
 */
.ghizo-account-link {
	display: none;
	align-items: center;
	/* 44px, the smallest comfortable touch target, and the header is where
	 * thumbs land first. */
	min-height: 44px;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ghizo-account-link:hover,
.ghizo-account-link:focus {
	color: var(--wp--preset--color--navy-deep);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ghizo-account-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (min-width: 600px) {
	.ghizo-account-link {
		display: inline-flex;
	}

	/* Core sets the navigation item to display: flex through two classes, so a
	 * single class here loses and both links show at once. The element in the
	 * selector is what wins it, whatever order the stylesheets load in. */
	.wp-block-navigation li.ghizo-nav-account {
		display: none;
	}
}

/* ------------------------------------------------------------ sticky header */

/*
 * The header follows you down the page, which is what keeps the pricing link
 * one click away from the bottom of a long product page. Solid rather than
 * translucent: a blur over a screenshot makes the screenshot look broken.
 */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* ------------------------------------------------------- header submenus */

/*
 * Core's navigation block draws the submenu; this only makes it look like the
 * rest of the site. The z-index has to beat the sticky header's own stacking
 * context or the panel opens behind the page.
 */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
	min-width: 15rem;
	padding: 0.4rem;
	z-index: 30;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.55rem 0.75rem;
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--navy-deep);
}

/* The current section, in the header. Core adds the class; it has never styled
   it, and a navigation that cannot say where you are is half a navigation. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy-deep);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/*
 * Bottom spacing, unless the page already ends in a full bleed band.
 *
 * Every marketing page ends with a navy closing band whose own padding is the
 * spacing, which is why main has none. A page that loses that band, or never had
 * one, was left with its last card welded to the footer. This gives main the
 * spacing back and takes it away only when a band really is the last thing.
 */
.wp-site-blocks > main {
	padding-bottom: var(--wp--preset--spacing--60);
}

.wp-site-blocks > main:has(> .entry-content > .alignfull:last-child),
.wp-site-blocks > main:has(> .alignfull:last-child) {
	padding-bottom: 0;
}

/* ------------------------------------------------------------------ wordmark */

/*
 * GHIZO in the text colour, LABS in the accent, as one word. The plugin banners
 * use exactly this, and a visitor arriving from a listing should see the same
 * mark rather than something merely similar.
 */
.ghizo-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

.ghizo-wordmark:hover,
.ghizo-wordmark:focus {
	text-decoration: none;
}

.ghizo-wordmark__ghizo {
	color: currentColor;
}

.ghizo-wordmark__labs {
	color: var(--wp--preset--color--blue);
}

/* On the navy header the accent needs to be the lighter blue to stay legible. */
.has-navy-background-color .ghizo-wordmark__labs,
.has-navy-field-gradient-background .ghizo-wordmark__labs {
	color: var(--wp--preset--color--blue-soft);
}