/**
 * Commerce7 header controls — LOG IN / CART.
 *
 * Ported from the source site's own Commerce7 overrides. Two adjustments were required; both are
 * marked inline:
 *
 *   1. The source sets `html { font-size: 62.5% }`, so its `font-size: 1rem` means 10px. WordPress
 *      has no such rule, where 1rem is 16px. Every rem here is therefore written as its resolved
 *      pixel value — importing the 62.5% hack would resize the entire rebuild.
 *   2. The source's cart inherits Montserrat, white and its letter-spacing from
 *      `header .header-section .uk-navbar-container .uk-navbar-nav > li > a`. Our header has no
 *      equivalent: the Elementor header styles `.div-utility a`, and Commerce7 renders the cart as
 *      a <button>, which that selector cannot reach. The typography block below supplies what the
 *      source inherited, using the values the rebuild already measured for the sibling LOG IN link
 *      so the two controls match exactly.
 *
 * Scoped to `.div-utility` — the header wrapper holding Commerce7's #c7-account and #c7-cart
 * mounts — rather than left global as on the source, so these never reach a Commerce7 nav
 * rendered elsewhere.
 */

/* ---- the source's own Commerce7 overrides, rem resolved to px ---- */

.div-utility .c7-user-nav__account { line-height: 1; }

.div-utility .c7-user-nav__account > a,
.div-utility .c7-user-nav__cart > button { color: #fff; }

.div-utility .c7-user-nav__account a {
	font-size: 10px;          /* source: 1rem @ 62.5% */
	padding: 0 5px;
	min-height: auto;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
}

.div-utility .c7-user-nav__account a:hover { text-decoration: none; }

.div-utility .c7-user-nav__cart > button {
	display: flex;
	align-items: center;
	padding: 0;
	/* Not in the source's overrides — the source's own theme reset native buttons, ours does not,
	   so Commerce7's button arrived with a border and a hover background of its own. */
	background: none;
	border: 0;
	box-shadow: none;
}

.div-utility .c7-user-nav__cart .c7-user-nav__cart__title { display: flex; }

/* The source hides Commerce7's cart glyph and shows the word instead. */
.div-utility .c7-user-nav__cart .c7-user-nav__cart__title svg { display: none; }

/* Commerce7 ships the word "Cart" as a screen-reader-only span behind that glyph. Unclipping it
   is what produces the source's "CART 0" text label. */
.div-utility .c7-user-nav__cart .c7-user-nav__cart__title span {
	color: #fff;
	font-size: 10px;          /* source: 1rem @ 62.5% */
	clip: initial;
	-webkit-clip-path: none;
	clip-path: none;
	height: auto;
	width: auto;
	position: relative;
	text-transform: uppercase;
	font-weight: 600;
}

/* Drop Commerce7's count pill; the source shows a bare number. */
.div-utility .c7-user-nav__cart .c7-user-nav__cart__count {
	background: none;
	font-size: 10px;          /* source: 1rem @ 62.5% */
}

/* ---- what the source inherited and our header must state outright ---- */

.div-utility .c7-user-nav__account a,
.div-utility .c7-user-nav__cart > button,
.div-utility .c7-user-nav__cart__title span,
.div-utility .c7-user-nav__cart__count {
	font-family: Montserrat, sans-serif;
	letter-spacing: 1.73px;
	line-height: 13px;
	white-space: nowrap;
}

/* LOG IN and CART both keep their resting white on hover.
 *
 * A deliberate divergence from the source, where LOG IN *does* shift colour and CART does not.
 * Holding both static is a decision, not an oversight — do not "restore fidelity" by re-adding a
 * colour here (it was #DBE4C4) without asking first.
 *
 * Pinned rather than simply left undeclared. The Elementor header carries its own hover colour,
 *
 *     .elementor-249 .elementor-element.elementor-element-fc4eeda .div-utility a:hover
 *
 * which is what tinted LOG IN in the first place. It lives in the database, not in this repo, so
 * deleting our rule would just hand the hover straight back to it.
 *
 * That selector is 0-5-1, so a class-only override here loses. The mounts are used instead:
 * `#c7-account` and `#c7-cart` are Commerce7's own ids, and one id outranks any number of classes
 * (1-2-1 vs 0-5-1) — the same tactic, and the same reasoning, as the `#c7-cart` margin rule at the
 * foot of this file. Deliberately NOT matching Elementor's own selector: `.elementor-249` is a
 * post id and `fc4eeda` a widget id, both of which change if the header template is re-imported.
 * No `!important` needed.
 *
 * CART is belt-and-braces: its visible word sits in a <span> with an explicit white `color` at
 * higher specificity, so nothing reaches the button anyway. Listed to state the intent.
 *
 * `#c7-cart` contains more than the CART control: Commerce7 mounts the whole slide-out panel
 * inside it, so a bare `#c7-cart button` also matched the side cart's close button. The toggle is
 * a direct child of `.c7-user-nav__cart`, and the panel is a sibling `<section>`, so the child
 * combinator separates them. */
.div-utility #c7-account a:hover,
.div-utility #c7-cart .c7-user-nav__cart > button:hover { color: #fff; }

/* Only the text colour shifts on hover — no background, matching the LOG IN link beside it. */
.div-utility .c7-user-nav__cart > button:hover,
.div-utility .c7-user-nav__cart > button:focus,
.div-utility .c7-user-nav__cart > button:active {
	background: none;
	border: 0;
	box-shadow: none;
}

/* ---- spacing between LOG IN and CART ---- */

/**
 * The Elementor header sets `gap: 0` on `.div-utility` from a selector carrying two element
 * classes, so a plain `.div-utility { gap: … }` here would lose on specificity. `#c7-cart` is an
 * id, which outranks it comfortably — and it is Commerce7's own mount point, so it is stable.
 *
 * The source spaces these with 5px of padding on each item (10px apart). This adds to the 5px
 * already on the LOG IN link. Tune this single value.
 */
.div-utility #c7-cart { margin-left: 10px; }

/* ---- stacking: keep LOG IN / CART above the main nav ---- */

/**
 * Elementor gives BOTH the utility row and the nav `z-index: 2`:
 *
 *     .div-utility-w      z=2  position:absolute   (this row)
 *     ul.elementor-nav-menu  z=2  position:relative   (main nav)
 *
 * They share a stacking context, so the tie is broken by DOM order — and the nav comes later in
 * the header. It therefore painted over LOG IN and CART, and `document.elementFromPoint` at the
 * centre of each returned `a.elementor-item`, not the link: every click landed on the menu.
 *
 * Verified in the browser: at z-index 2 both controls report BLOCKED, at 3 both report CLICKABLE.
 *
 * `#div-header` is an id, so this outranks Elementor's three-class selector without !important,
 * and it applies to all three header templates rather than one template's generated class.
 */
#div-header .div-utility-w { z-index: 3; }

/* ---- no focus ring on the cart count ---- */

/**
 * commerce7.css grows a 2px ring on the count when the cart is hovered:
 *
 *     .c7-user-nav__cart__count            { box-shadow: 0 0 0 0 var(--c7-cart-count-bg-focus);
 *                                            transition: box-shadow .2s ease }
 *     .c7-user-nav__cart > .c7-link:hover
 *         .c7-user-nav__cart__count        { box-shadow: 0 0 0 2px var(--c7-cart-count-bg-focus) }
 *
 * The source's count is a bare number with no pill and no ring, so the ring is removed in every
 * state — including the collapsed one at rest, which otherwise leaves the transition to animate.
 *
 * Commerce7's selector is four classes deep; prefixing with `.div-utility` outranks it, so no
 * !important is needed. `.c7-link` is the class Commerce7 puts on the cart <button>.
 */
.div-utility .c7-user-nav__cart__count,
.div-utility .c7-user-nav__cart > .c7-link:hover .c7-user-nav__cart__count,
.div-utility .c7-user-nav__cart > .c7-link:focus .c7-user-nav__cart__count,
.div-utility .c7-user-nav__cart > .c7-link:active .c7-user-nav__cart__count {
	box-shadow: none;
}