/**
 * The theme's chrome on every page: the header, its menus, its cart and
 * account icons, and Modern Cart's floating cart button.
 *
 * Loaded site-wide by `Storefront\BrandChrome`. Colours mostly arrive through
 * the theme's palette, which now holds the tokens (`bin/content/50-design.php`):
 * menu links and icons are ink, their hover and current state accent-deep, the
 * cart's hover the accent. What the palette cannot give is here.
 *
 * Scoped to the header (`#masthead`), the theme's phone menu
 * (`#ast-mobile-popup`) and the floating button, never to bare elements.
 */

/* --- Focus ------------------------------------------------------------------- */

/*
 * The standard's ring (§5) on everything in the header. The theme gives links
 * a thin dotted outline in the text colour and leaves the rest to the browser,
 * which drew a 3px black ring flush against the text.
 */
#masthead :is( a, button, [tabindex='0'] ):focus-visible,
#ast-mobile-popup :is( a, button, [tabindex='0'] ):focus-visible {
	box-shadow: none;
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/*
 * Focus appears at once (design standard §6). The theme gives links, menu
 * links, buttons and fields `transition: all .2s`, so its own thick outline
 * faded out while ours faded in, a visible flash of ink before the ring. While
 * an element has focus it animates only these properties, never outline or
 * box-shadow. Every stylesheet of ours names its transitioned properties
 * explicitly, so hover colours and the cards' lift keep moving.
 *
 * `:root` and the focus pseudo-class give (0,2,1): enough to outrank the
 * theme's `.main-header-menu .menu-link` (0,2,0), and still less than any
 * screen's own focus rule. Not scoped to the header, because the theme's rule
 * is on every link and field of every page (the 404 search field among them).
 */
:root :is( a, button, input, select, textarea, summary ):focus {
	transition-property: color, background-color, border-color, opacity, transform;
}

/* --- Icons -------------------------------------------------------------------- */

/*
 * The account icon is an 18px link; this gives it a 40px target (§7) without
 * moving the icon: an invisible square centred on it.
 */
#masthead .ast-header-account-wrap a.ast-header-account-link {
	position: relative;
}

#masthead .ast-header-account-wrap a.ast-header-account-link::after {
	content: '';
	height: var( --pod-btn-compact-h );
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: var( --pod-btn-compact-h );
}


/*
 * The cart and account icons: ink at rest, as the theme's palette now gives
 * them, and accent-deep on hover like the menu links beside them (the theme
 * used its brighter theme colour for the cart only).
 */
#masthead .ast-site-header-cart-li:hover :is( .ast-addon-cart-wrap, .ast-woo-header-cart-info-wrap, .astra-icon ) {
	color: var( --pod-accent-deep );
}

#masthead .ast-header-account-wrap a:hover .ahfb-svg-iconset svg :is( path:not( .ast-hf-account-unfill ), circle ) {
	fill: var( --pod-accent-deep );
}

/* The cart's count: ink, with white figures, like the floating button's. */
#masthead .ast-site-header-cart .ast-addon-cart-wrap i.astra-icon::after {
	background-color: var( --pod-ink );
	box-shadow: none;
	color: var( --pod-on-ink );
}

#masthead .ast-site-header-cart .ast-site-header-cart-li:hover .ast-addon-cart-wrap i.astra-icon::after {
	background-color: var( --pod-accent-deep );
	color: var( --pod-on-ink );
}

/* The phone menu's close button: ink, not the theme's own grey. */
#ast-mobile-popup .menu-toggle-close {
	color: var( --pod-ink );
}

/*
 * CartFlows' checkout and thank-you steps: its `cartflows-normalize.css` colours
 * every link royal blue (`a { color: #4169e1 }`), with no setting. Links take
 * the accent instead. Specificity (0,0,2), one element more than CartFlows'
 * rule and less than any class, so every styled link and button keeps its own.
 */
html :where( body.cartflows_step-template ) a {
	color: var( --pod-accent );
}

/* --- The floating cart button (Modern Cart) --------------------------------------- */

/*
 * A floating action button, so it keeps its size (60px) and lifts off the page
 * with the standard's hover shadow; the colours and the round shape are the
 * tokens. `BrandChrome::cart_colours()` points the plugin's own colour
 * variables at the same tokens.
 */
#moderncart-floating-cart.pod-floating-cart button.moderncart-floating-cart-button {
	background-color: var( --pod-accent );
	border-radius: var( --pod-radius-pill );
	box-shadow: var( --pod-shadow );
	color: var( --pod-on-ink );
	transition: background-color var( --pod-fast ) var( --pod-ease );
}

#moderncart-floating-cart.pod-floating-cart button.moderncart-floating-cart-button:hover {
	background-color: var( --pod-accent-deep );
}

#moderncart-floating-cart.pod-floating-cart button.moderncart-floating-cart-button:focus-visible {
	box-shadow: var( --pod-shadow );
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

#moderncart-floating-cart.pod-floating-cart .moderncart-floating-cart-count {
	background-color: var( --pod-ink );
	border-radius: var( --pod-radius-pill );
	color: var( --pod-on-ink );
}

/* "Added to cart", beside the button. */
#moderncart-floating-cart.pod-floating-cart .moderncart-floating-cart-button-notification {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius );
	box-shadow: var( --pod-shadow-sm );
	color: var( --pod-ink );
}

/*
 * Out of the way of the product page's main action while it sits under the
 * button (`assets/js/floating-cart.js`), between tablet and desktop widths.
 */
#moderncart-floating-cart.pod-floating-cart {
	transition: opacity var( --pod-fast ) var( --pod-ease ), visibility var( --pod-fast ) var( --pod-ease );
}

#moderncart-floating-cart.pod-floating-cart.pod-floating-cart--yield {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/*
 * Hidden on phones, where the header's cart icon opens the same drawer
 * (design standard §4); from 768px up it stays.
 */
@media ( max-width: 767px ) {
	#moderncart-floating-cart.pod-floating-cart {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#moderncart-floating-cart.pod-floating-cart,
	#moderncart-floating-cart.pod-floating-cart button.moderncart-floating-cart-button {
		transition: none;
	}
}

/* --- The desktop header between 922px and 1199px ---------------------------- */

/*
 * The full menu only fits on one line from 1200px. Below that (down to Astra's
 * 922px switch to the menu button) it wrapped onto a second line, because the
 * logo, six categories, About, Contact, the cart total and the account icon
 * need about 1,030px. Tighter link padding, no cart total beside the icon (its
 * badge still counts the items), and a narrower gap between the two halves
 * keep it on one line at every width in that range. Links stay 70px tall.
 */
@media ( min-width: 922px ) and ( max-width: 1199px ) {
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: var( --pod-tight );
		padding-right: var( --pod-tight );
	}

	#ast-desktop-header .ast-woo-header-cart-info-wrap {
		display: none;
	}
}

@media ( min-width: 922px ) and ( max-width: 1023px ) {
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: calc( var( --pod-hair ) + 1px );
		padding-right: calc( var( --pod-hair ) + 1px );
	}

	#ast-desktop-header .ast-builder-grid-row {
		column-gap: var( --pod-tight );
	}

	#ast-desktop-header .site-header-primary-section-left .site-branding {
		margin-right: var( --pod-tight );
	}
}