/* =============================================================================
 * csc-header — utility bar, search row, navigation
 *
 * Measured from prototype 26f20fb8 v10 at 1440. Three full-bleed grounds, each
 * with a 1200 band inside, each closed by a 1px --csc-rule hairline:
 *
 *   row 1  37  --csc-bg   phone · email · hours | social · account · cart
 *   row 2  89  #FFFFFF    logo · search · actions
 *   row 3  49  #FFFFFF    the WordPress menu
 *
 * ⚠ NOTHING HERE IS STICKY, and that is deliberate. Sticky belongs to
 * Elementor's Motion Effects on the Theme Builder container, which is how the
 * live site already does it — an `e-con` goes position: fixed, top: 0,
 * z-index: 99 on scroll. A widget that pins itself skips Elementor's
 * placeholder, so the page jumps by the header's height the moment it engages,
 * and it fails outright if any ancestor sets `overflow`.
 *
 * What this file does instead is make the header safe to pin: every row paints
 * an opaque ground, so nothing shows through once it is fixed. All three rows
 * total 175, against the 176 the live site pins today.
 *
 * Heights are min-heights on the band, so a row grows rather than clips if its
 * content wraps — a header that hides a menu item is worse than a header a few
 * pixels taller than drawn.
 * ========================================================================== */

.csc-header__pad   { padding-inline: var(--csc-gutter); }

.csc-header__band {
	display: flex;
	align-items: center;
	gap: var(--csc-space-5);
	max-width: var(--csc-band);
	margin-inline: auto;
}

.csc-header__sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Row 1: utility ------------------------------------------------------- */

.csc-header__utility {
	background: var(--csc-bg);
	border-bottom: var(--csc-hairline);
}

.csc-header__utility-band {
	justify-content: space-between;
	min-height: 36px;
	font-size: var(--csc-fs-label);
}

.csc-header__contact,
.csc-header__utility-right,
.csc-header__social,
.csc-header__account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--csc-space-4);
	min-width: 0;
}

.csc-header__utility a,
.csc-header__hours {
	color: var(--csc-ink-3);
	text-decoration: none;
	transition: color 120ms ease;
}

.csc-header__utility a:hover {
	color: var(--csc-blue-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.csc-header__phone { font-weight: 700; color: var(--csc-ink-2); }

.csc-header__cart {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 700;
}

/* The count is a figure, so it is mono and tabular — a cart going 9 to 10 must
 * not shift the word beside it. */
.csc-header__cart-count {
	min-width: 1.4em;
	padding-inline: 5px;
	background: var(--csc-bg-2);
	border-radius: var(--csc-radius);
	text-align: center;
	color: var(--csc-ink-2);
}

/* --- Row 2: logo, search, actions ----------------------------------------- */

.csc-header__main {
	background: #FFFFFF;
	border-bottom: var(--csc-hairline);
}

.csc-header__main-band {
	gap: var(--csc-space-8);
	min-height: 88px;
}

.csc-header__logo { flex: none; display: inline-flex; align-items: center; }

/* ⚠ max-width on the image alone does nothing: it resolves against this
 * anchor, which is sized by the image, so the constraint is circular. The
 * anchor has to be capped too — without this the 471px logo rendered at full
 * width inside a 358px band at phone width. */
.csc-header__logo { max-width: 100%; min-width: 0; }

/* Capped by height so a replacement logo of any width drops in without
 * relayout. The current file is 471 x 45 and has no headroom above 1x. */
.csc-header__logo img {
	display: block;
	max-height: 45px;
	width: auto;
	max-width: 100%;
}

.csc-header__wordmark {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--csc-ink);
}

.csc-header__search {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 0;
}

.csc-header__search-row { display: flex; gap: var(--csc-space-2); min-width: 0; }

.csc-header__field {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--csc-field-h);
	padding-inline: var(--csc-space-3);
	background: #FFFFFF;
	border: 1px solid var(--csc-rule-strong);
	border-radius: var(--csc-radius-btn);
	font-family: inherit;
	font-size: var(--csc-fs-ui);
	color: var(--csc-ink);
}

.csc-header__field::placeholder { color: var(--csc-ink-3); }

/* 46, matching the CTA beside it. The artboard draws the submit at 42 and at
 * radius 0 while every other control is 2 — production specs §3.5 treats both
 * as slips rather than intent. Buttons are 4px since 2 Oct (CSC). */
.csc-header__submit {
	flex: none;
	height: var(--csc-control-md);
	padding-inline: var(--csc-space-5);
	background: var(--csc-ink);
	border: 1px solid var(--csc-ink);
	border-radius: var(--csc-radius-btn);
	color: #FFFFFF;
	font-family: inherit;
	font-size: var(--csc-fs-ui);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

/* :focus as well as :hover. Hello Elementor's reset.css ships
 *     button:focus, button:hover { background-color: #CC3366; color: #FFF }
 * at specificity 0,1,1. The rest state above is 0,1,0, so it LOSES to the
 * reset on focus: tabbing to this button turned it crimson, a colour that is
 * not in CSC's palette. Hover was already covered only because this rule
 * matches at the same specificity and ships after reset.css in source order.
 * Every <button> in this file now declares hover AND focus for that reason. */
.csc-header__submit:hover,
.csc-header__submit:focus { background: var(--csc-ink-2); border-color: var(--csc-ink-2); }

.csc-header__submit:focus-visible { outline: 2px solid var(--csc-blue); outline-offset: 2px; }

.csc-header__hint {
	font-size: var(--csc-fs-spec);
	line-height: 1.3;
	color: var(--csc-ink-3);
}

.csc-header__actions { display: flex; align-items: center; gap: var(--csc-space-3); flex: none; }

.csc-header__quick,
.csc-header__cta {
	display: inline-flex;
	align-items: center;
	height: var(--csc-control-md);
	padding-inline: var(--csc-space-5);
	border-radius: var(--csc-radius-btn);
	font-size: var(--csc-fs-ui);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.csc-header__quick {
	background: transparent;
	border: 1px solid var(--csc-rule-strong);
	color: var(--csc-ink-2);
}

.csc-header__quick:hover { border-color: var(--csc-ink-3); color: var(--csc-ink); }

/* Label is --csc-on-green, CSC's decision of 21 Sep. See the note beside the
 * green tokens in csc-shared.css. */
.csc-header__cta {
	background: var(--csc-green-btn);
	border: 1px solid var(--csc-green-btn);
	color: var(--csc-on-green);
}

.csc-header__cta:hover {
	background: var(--csc-green-hover);
	border-color: var(--csc-green-hover);
	color: var(--csc-on-green);
}

.csc-header__cta:active { background: var(--csc-green-press); border-color: var(--csc-green-press); }

/* --- Row 3: the menu ------------------------------------------------------ */

.csc-header__nav {
	background: #FFFFFF;
	border-bottom: var(--csc-hairline);
}

.csc-header__nav-band { min-height: 48px; }

.csc-header__toggle { display: none; }

.csc-header__menu { min-width: 0; }

/* WordPress supplies the markup, so these selectors have to survive whatever
 * classes it and the Studio plugin put on the items. Nothing here assumes an
 * item count or an order. */
.csc-header__menu-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--csc-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.csc-header__menu-list li { position: relative; }

/* Hover and focus-within open the branches on a pointer device, so the button
 * the script injects is not needed here. It is display:none rather than absent
 * so the markup is identical at every width. */
.csc-header__branch { display: none; }

.csc-header__menu-list a {
	display: inline-block;
	padding-block: var(--csc-space-3);
	font-size: var(--csc-fs-ui);
	font-weight: 500;
	color: var(--csc-ink-2);
	text-decoration: none;
	transition: color 120ms ease;
}

.csc-header__menu-list a:hover,
.csc-header__menu-list .current-menu-item > a,
.csc-header__menu-list .current-menu-ancestor > a {
	color: var(--csc-link);
}

/* Submenus stay closed until hover or focus. The first opens below its parent,
 * the second beside it — the live Products menu runs three levels and the
 * third is where the products actually are. A mega-menu is Phase 2 and
 * unauthorised; this is the plain flyout the existing menu already needs. */
.csc-header__menu-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 220px;
	margin: 0;
	padding: var(--csc-space-2) 0;
	background: #FFFFFF;
	border: var(--csc-hairline);
	border-radius: var(--csc-radius);
	list-style: none;
}

.csc-header__menu-list li:hover > .sub-menu,
.csc-header__menu-list li:focus-within > .sub-menu {
	display: flex;
}

/* Escape, or Enter/Space on the open item, closes a submenu that focus-within
 * would otherwise hold open. Desktop only: the phone accordion runs on is-open. */
@media (min-width: 768px) {
	.csc-header__menu-list > li.is-dismissed > .sub-menu { display: none; }
}

/* An <a> with no href gets no default focus ring in some browsers. */
.csc-header__menu-list > li > a[tabindex]:focus-visible {
	outline: 2px solid var(--csc-blue);
	outline-offset: 2px;
}

/* Flex, not block, so the child marker sits on the label's line however long
 * the label runs. "Specialty Fittings & Adaptors" fills the 220px column, and
 * a floated marker after a full line wraps to the next one. */
.csc-header__menu-list .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--csc-space-2);
	padding: var(--csc-space-2) var(--csc-space-4);
	font-weight: 400;
}

/* Third level: beside its parent rather than below it, which is what the live
 * menu does and the only arrangement that fits on screen. */
.csc-header__menu-list .sub-menu .sub-menu {
	top: -1px;
	left: 100%;
}

/* A parent that has children says so. The marker is drawn rather than an
 * image so it inherits the link's colour in every state. */
.csc-header__menu-list .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	margin-left: 7px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	vertical-align: middle;
}

/* Pointing right, because the next level opens to the right. flex: none keeps
 * it from being squeezed by a long label; no float, for the reason above. */
.csc-header__menu-list .sub-menu .menu-item-has-children > a::after {
	flex: none;
	margin-left: 0;
	border: 4px solid transparent;
	border-left-color: currentColor;
}

/* --- The autocomplete ------------------------------------------------------
 *
 * The field is IFE - Search's [ife_search_autocomplete], the same control the
 * live header uses. Its CSS declares --ife-ac-* on :root and ships a pill: a
 * 999px radius, #e6e6eb borders, a grey submit and a #2b6cb0 focus. None of
 * that is CSC's.
 *
 * Remapping the variables inside .csc-header, rather than overriding rule by
 * rule, means the dropdown panel follows for free — it reads the same tokens.
 * Declared on .csc-header, never on :root, so nothing leaks past this header
 * into the rest of the page (CLAUDE.md §2.10).
 * ------------------------------------------------------------------------- */

.csc-header {
	--ife-ac-bg:    #FFFFFF;
	--ife-ac-br:    var(--csc-rule-strong);
	--ife-ac-txt:   var(--csc-ink);
	--ife-ac-dim:   var(--csc-ink-3);
	--ife-ac-hover: var(--csc-bg);
	--ife-ac-focus: var(--csc-blue);
	--ife-ac-input-height: var(--csc-control-md);
}

/* The wrapper still carries the row's layout — order and flex-basis are set on
 * .csc-header__search at the breakpoints below. */
.csc-header__ac { width: 100%; }

/* 999px is the plugin's shape; ours is the button radius, field and submit reading as one control. Everything else about the field
 * already follows from the variables above. */
.csc-header__ac .ife-ac__form,
.csc-header__ac .ife-ac__submit {
	border-radius: var(--csc-radius-btn);
}

.csc-header__ac .ife-ac__form {
	min-height: var(--csc-control-md);
	padding: 0 0 0 var(--csc-space-4);
}

.csc-header__ac .ife-ac__input {
	font-family: var(--csc-font);  /* not inherit: the plugin's form sets a system stack (ui-sans-serif), HP-090 */
	font-size: var(--csc-fs-ui);
}

/* The navy submit, matching every other control in this header. The plugin
 * paints its own hover from --e-global-color-accent, an Elementor kit colour
 * we do not control, so both states are named here. */
.csc-header__ac .ife-ac__submit {
	align-self: stretch;
	margin: 0;
	padding-inline: var(--csc-space-5);
	background: var(--csc-ink);
	border: 1px solid var(--csc-ink);
	color: #FFFFFF;
	font-family: var(--csc-font);  /* not inherit: see the field above (HP-090) */
	font-size: var(--csc-fs-ui);
	font-weight: 700;
}

.csc-header__ac .ife-ac__submit:hover,
.csc-header__ac .ife-ac__submit:active,
.csc-header__ac .ife-ac__submit:focus,
.csc-header__ac .ife-ac__submit:focus-visible {
	background: var(--csc-ink-2);
	border-color: var(--csc-ink-2);
	color: #FFFFFF;
}

/* The wrapper ships with ife-ac--collapsed whenever the field is not
 * prefilled, and that rule hides the form at EVERY width — the magnifier is
 * the plugin's default, not a mobile behaviour. ife-ac--desktop-open removes
 * the toggle; this removes the collapse. Three classes beat the plugin's two,
 * so no !important is needed. The field stays visible on a phone by decision,
 * not by oversight: see the mobile header budget below. */
.csc-header .ife-ac--collapsed .ife-ac__form { display: flex; }

/* One focus ring, not two. Clicking into the field drew BOTH of these:
 *
 *   the plugin's  .ife-ac__form:focus-within { box-shadow: 0 0 0 2px inset }
 *   reset.css     input:focus-visible { outline: 2px solid; outline-offset: 2px;
 *                                       box-shadow: 0 0 0 4px #fff }
 *
 * The second sat 2px OUTSIDE the input with a 3px radius, so it did not line
 * up with the square field, ran into the Search button, and carried a white
 * halo. Text inputs match :focus-visible on a mouse click too, so every click
 * showed it.
 *
 * The indicator now lives on the form alone, as the field's own border: blue,
 * 2px, square, flush with the button, so field and button read as one control.
 * Blue because the approved spec makes focus rings #2D80C3 (production specs
 * §colour, measured 4.21:1 on white, past the 3:1 a focus indicator needs).
 *
 * The input's outline is removed ONLY because the form's ring replaces it.
 * Delete the rule below and the one after it together, never the first alone,
 * or keyboard users lose their focus indicator entirely. */
.csc-header__ac .ife-ac__form:focus-within {
	border-color: var(--csc-blue);
	box-shadow: inset 0 0 0 1px var(--csc-blue);
}

.csc-header__ac .ife-ac__input:focus,
.csc-header__ac .ife-ac__input:focus-visible {
	outline: none;
	box-shadow: none;
}

/* The suggestions panel, which is NOT inside this header.
 *
 * On init the plugin runs, with no condition and no class carried over:
 *
 *   panel.classList.add('ife-ac__panel--floating');
 *   document.body.appendChild(panel);
 *
 * so the panel is a direct child of <body>. .csc-header__ac .ife-ac__panel
 * never matched it, and the --ife-ac-* remap above never reached it either:
 * it was still drawing a 14px radius and #e6e6eb borders against a 2px field.
 * The widget names the wrapper so the plugin names the panel "<id>-list",
 * which is the only stable handle on it.
 *
 * The values are literal because the panel is outside .csc-widget too, so
 * var(--csc-rule-strong) would not resolve there. They are, in order:
 * --csc-rule-strong, --csc-ink, --csc-ink-3, --csc-bg, --csc-radius. Change
 * one in csc-shared.css and it has to be changed here as well — the
 * duplication is the cost of the plugin moving the element out of scope. */
[id^="csc-header-ac-"][id$="-list"] {
	--ife-ac-br:    #B9C5D3;
	--ife-ac-txt:   #0E1A2A;
	--ife-ac-dim:   #5C6B7E;
	--ife-ac-hover: #F4F7FB;
	border-color: #B9C5D3;
	border-radius: 2px;
	font-family: inherit;
}

/* --- The side cart --------------------------------------------------------
 *
 * Elementor Pro's Menu Cart, rendered inside this widget — see
 * render_side_cart(). Its toggle ships as an .elementor-button, which picks up
 * the Elementor kit's button colours, so it is restated here in the utility
 * row's own terms: a link, not a button.
 *
 * The panel itself is left to Pro's stylesheet. It is a WooCommerce surface
 * shared with the rest of the store, and restyling it from a header widget
 * would change it everywhere the Menu Cart is used.
 * ------------------------------------------------------------------------- */

.csc-header__cart-mount { flex: none; }

/* Pro's toggle is styled entirely through custom properties WITH fallbacks:
 *
 *   .elementor-menu-cart__toggle .elementor-button {
 *     border-width: var(--toggle-button-border-width, 1px);
 *     color:        var(--toggle-button-text-color, #69727d);
 *     padding:      var(--toggle-icon-padding, 12px 24px);
 *   }
 *
 * which is why the first attempt failed. That selector is 0,2,0, exactly the
 * same as `.csc-header__cart-mount .elementor-menu-cart__toggle_button`, and
 * widget-woocommerce-menu-cart.min.css is stylesheet 47 where csc-header.css
 * is 23 — later, same weight, so it won on order. Measured result: a 1px
 * #69727D border and 12px/24px padding, making a 44px control in a row of
 * 18px links, which is also what pushed the mobile utility row to 43.5.
 *
 * Setting the properties rather than re-declaring the rule wins without
 * specificity games and without !important, and it is what Elementor's own
 * controls do. These are the values the editor would have written. */
.csc-header__cart-mount {
	--toggle-button-background-color:       transparent;
	--toggle-button-hover-background-color: transparent;
	--toggle-button-border-width:           0;
	--toggle-button-hover-border-color:     transparent;
	--toggle-button-text-color:             var(--csc-ink-3);
	--toggle-button-hover-text-color:       var(--csc-link);
	--toggle-button-icon-color:             var(--csc-ink-3);
	--toggle-button-icon-hover-color:       var(--csc-blue);
	--toggle-icon-padding:                  0;

	/* The count bubble defaults to #d9534f with white on it, which measured
	 * 3.96:1 at 10px — under the 4.5 that size needs, and a red in no CSC
	 * palette. White on --csc-ink is 17.4:1. */
	--items-indicator-background-color:     var(--csc-ink);
	--items-indicator-text-color:           #FFFFFF;
}

/* What the properties do not cover: the type, so the control reads as one of
 * the utility row's links rather than as a button. */
.csc-header__cart-mount .elementor-menu-cart__toggle_button {
	gap: var(--csc-space-2);
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	text-decoration: none;
	box-shadow: none;
}

.csc-header__cart-mount .elementor-menu-cart__toggle_button:focus-visible {
	outline: 2px solid var(--csc-blue);
	outline-offset: 2px;
}

/* The cart icon and its count bubble.
 *
 * Pro sizes the icon from font-size: var(--toggle-icon-size, inherit), so in
 * this row it inherited 12px. The bubble is a FIXED 16px circle (10px type at
 * 1.6em), set 0.7em up and 0.7em right of the icon — which on a 12px icon puts
 * a 16px bubble over the top-right 9 x 9 of it, covering about 56% of the
 * glyph. Reported from staging: the count was hiding the cart.
 *
 * The icon goes to 16px, which still sits inside the 18px link line so the row
 * height does not move, and the bubble moves out to the icon's corner. Pro
 * exposes only colours for the bubble, so position is a rule, scoped one class
 * heavier than Pro's five-part selector. */
.csc-header__cart-mount {
	--toggle-icon-size: 16px;
}

.csc-header__cart-mount.elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
	top: -0.8em;
	inset-inline-end: -1.1em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The subtotal. Tabular figures, because it is a number that changes in place
 * and digits that shift width make the row twitch on every add-to-cart. */
.csc-header__cart-mount .elementor-button-text {
	font-variant-numeric: tabular-nums;
}

/* --- The side cart panel --------------------------------------------------
 *
 * Pro's panel, restyled to the header. Set through Pro's own custom properties
 * on the mount, the same way as the toggle above, so there is no specificity
 * fight and no !important. The panel renders INSIDE .csc-header__cart-mount —
 * measured on staging and confirmed in the page HTML — so all of this applies
 * to this header's cart only. A Menu Cart widget placed anywhere else keeps
 * Pro's defaults.
 *
 * Measured before, on a cart holding one item:
 *
 *   quantity x price   #d5d8dc on white  1.43:1  at 14px/300 — fails AA badly;
 *                                                  this is the faint line
 *   both buttons       #69727d, 400, square       4.88:1 — passes, off-palette
 *   product name       #5C6B7E, but only because the panel sits inside the
 *                      utility row and .csc-header__utility a leaks into it
 *
 * The two buttons take the header's two button treatments: View cart is the
 * navy of the Search button, Checkout is the green of Request a Quote with the
 * navy label decided on 21 Sep (see --csc-on-green in csc-shared.css).
 * ------------------------------------------------------------------------- */
.csc-header__cart-mount {
	--cart-footer-buttons-border-radius:       var(--csc-radius-btn);
	--divider-color:                           var(--csc-rule);
	--subtotal-divider-color:                  var(--csc-rule);
	--menu-cart-subtotal-color:                var(--csc-ink);

	/* 1.43:1 -> 5.44:1 */
	--product-price-color:                     var(--csc-ink-3);

	--remove-item-button-color:                var(--csc-ink-3);
	--remove-item-button-hover-color:          var(--csc-danger);
	--cart-close-button-color:                 var(--csc-ink-3);
	--cart-close-button-hover-color:           var(--csc-ink);

	/* White on --csc-ink 17.5:1, on --csc-ink-2 10.72:1. */
	--view-cart-button-background-color:       var(--csc-ink);
	--view-cart-button-text-color:             #FFFFFF;
	--view-cart-button-hover-background-color: var(--csc-ink-2);
	--view-cart-button-hover-text-color:       #FFFFFF;

	/* Navy label on green: 6.30:1 at rest, 5.30:1 on hover. Never white — white
	 * on this green is 2.78:1, which is the decision this token records. */
	--checkout-button-background-color:        var(--csc-green-btn);
	--checkout-button-text-color:              var(--csc-on-green);
	--checkout-button-hover-background-color:  var(--csc-green-hover);
	--checkout-button-hover-text-color:        var(--csc-on-green);
}

/* No custom property colours the product name; it is a plain link. Set here on
 * purpose, rather than inherited by accident from the utility row. */
.csc-header__cart-mount .elementor-menu-cart__product-name a {
	color: var(--csc-ink);
	text-decoration: none;
}

.csc-header__cart-mount .elementor-menu-cart__product-name a:hover {
	color: var(--csc-link);
}

/* A price that changes in place wants figures of a fixed width. */
.csc-header__cart-mount .elementor-menu-cart__product-price,
.csc-header__cart-mount .elementor-menu-cart__subtotal {
	font-variant-numeric: tabular-nums;
}

/* The type the properties do not reach: weight and size, matching the header's
 * Search and Request a Quote buttons. */
.csc-header__cart-mount .elementor-menu-cart__footer-buttons .elementor-button {
	font-family: inherit;
	font-size: var(--csc-fs-ui);
	font-weight: 700;
}

.csc-header__cart-mount .elementor-menu-cart__footer-buttons .elementor-button:focus-visible {
	outline: 2px solid var(--csc-blue);
	outline-offset: 2px;
}

/* Pro has no pressed-state property. Without this the pressed Checkout button
 * shows the hover green; --csc-green-press is the step the navy label was
 * checked against (4.93:1). */
.csc-header__cart-mount .elementor-button--checkout:active {
	background-color: var(--csc-green-press);
}

/* Measured: hint 108.7-122.3, panel top 111.7. The panel is portaled to
 * <body> and positioned by the plugin against the field, so it is the hint
 * that gives way, not the panel. opacity rather than visibility or display:
 * the field's aria-describedby points here, and the other two would take it
 * out of the accessibility tree — the same mistake as the mobile hint, which
 * is why it is opacity in both places. */
.csc-header__ac.ife-ac--open ~ .csc-header__hint { opacity: 0; }

/* --- Pinned: the compact state (see csc-header.js, syncPinned) ------------- */
@media (max-width: 1024px) {
	/* --- Pinned ----------------------------------------------------------------
	 *
	 * Pinning is Elementor's (Motion Effects -> Sticky on the Theme Builder
	 * container); csc-header.js adds is-compact once the page has scrolled past
	 * the header. Below 1024px the search row folds away while pinned:
	 *
	 *   phone    175 -> ~113     tablet    247.6 -> ~167
	 *
	 * against 175 left pinned on desktop, where the live site pins 176.
	 *
	 * The utility row stays. It holds the side cart mount, and a fixed panel
	 * inside a display: none ancestor does not render — hiding that row would
	 * stop Add to cart opening the cart (#233) for anyone scrolled down.
	 *
	 * Every selector requires .elementor-sticky--active and excludes the
	 * spacer. Elementor clones this header as an invisible spacer before adding
	 * --active, and re-clones it on every resize; a rule that matched the clone
	 * would shrink the spacer and jump the page.
	 * ------------------------------------------------------------------------- */
	.elementor-sticky--active:not(.elementor-sticky__spacer) .csc-header.is-compact .csc-header__search {
		display: none;
	}

	/* A fixed element taller than the screen cannot be scrolled. The script
	 * caps the open menu at the room left below it; this lets it scroll there
	 * without dragging the page along. */
	.elementor-sticky--active:not(.elementor-sticky__spacer) .csc-header__menu.is-open {
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.csc-header__main-band { flex-wrap: wrap; gap: var(--csc-space-4); padding-block: var(--csc-space-4); }
	.csc-header__search    { order: 3; flex-basis: 100%; }
	.csc-header__actions   { margin-left: auto; }
	.csc-header__hours     { display: none; }
}

@media (max-width: 767px) {
	.csc-header__utility-band { gap: var(--csc-space-3); font-size: 11px; }
	.csc-header__email        { display: none; }

	.csc-header__nav-band { flex-wrap: wrap; }

	.csc-header__toggle {
		display: inline-flex;
		align-items: center;
		height: 40px;
		padding-inline: var(--csc-space-4);
		background: transparent;
		border: 1px solid var(--csc-rule-strong);
		border-radius: var(--csc-radius-btn);
		font-family: inherit;
		font-size: var(--csc-fs-ui);
		font-weight: 700;
		color: var(--csc-ink);
		cursor: pointer;
	}

	/* Hello Elementor's reset.css ships
	 *     button:focus, button:hover { background-color: #CC3366; color: #FFF }
	 * so ANY <button> we style only at rest turns crimson the moment it is
	 * touched, and a clicked button keeps focus and stays crimson. Our base
	 * rule wins at rest on class specificity; it says nothing about the other
	 * states, so the reset takes them. #CC3366 is not in CSC's palette.
	 * Every button this file ships therefore declares its own hover AND focus.
	 * See the same note on .csc-header__submit, which had hover only and so
	 * went crimson on focus. */
	.csc-header__toggle:hover,
	.csc-header__toggle:focus {
		background: var(--csc-bg-2);
		border-color: var(--csc-ink-3);
		color: var(--csc-ink);
	}

	.csc-header__toggle:focus-visible {
		outline: 2px solid var(--csc-blue);
		outline-offset: 2px;
	}

	/* Collapsed by default on a phone, opened by the toggle. Driven by a class
	 * rather than [hidden] so the menu can animate later without touching PHP. */
	.csc-header__menu { display: none; flex-basis: 100%; }
	.csc-header__menu.is-open { display: block; }

	.csc-header__menu-list { flex-direction: column; align-items: stretch; gap: 0; }
	.csc-header__menu-list > li { border-top: var(--csc-hairline); }
	.csc-header__menu-list a { padding-block: var(--csc-space-3); }

	.csc-header__logo img { max-height: 30px; }

	/* An accordion, not a flyout. Every branch is shut until it is pressed:
	 * open by default, full depth is 105 items and 4,059px on an 844px
	 * viewport, which is five screens of menu before any content. */
	.csc-header__menu-list li { display: flex; flex-wrap: wrap; align-items: center; }
	.csc-header__menu-list li > a { flex: 1 1 auto; min-width: 0; }

	.csc-header__menu-list .sub-menu,
	.csc-header__menu-list .sub-menu .sub-menu {
		position: static;
		display: none;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 var(--csc-space-2) var(--csc-space-4);
		border: 0;
	}

	.csc-header__menu-list li.is-open > .sub-menu { display: flex; }

	/* The branch control. 40px square so it clears the 24px minimum target
	 * without stealing width from a long label. */
	.csc-header__branch {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 40px;
		height: 40px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--csc-ink-3);
		cursor: pointer;
	}

	/* Same reset, same fix. The marker is currentColor, so darkening the text
	 * colour darkens the triangle and nothing else moves. */
	.csc-header__branch:hover,
	.csc-header__branch:focus {
		background: transparent;
		color: var(--csc-ink);
	}

	.csc-header__branch:focus-visible {
		outline: 2px solid var(--csc-blue);
		outline-offset: -2px;
	}

	.csc-header__branch::before {
		content: '';
		border: 5px solid transparent;
		border-top-color: currentColor;
		margin-top: 5px;
	}

	.csc-header__menu-list li.is-open > .csc-header__branch::before {
		border-top-color: transparent;
		border-bottom-color: currentColor;
		margin-top: -5px;
	}

	/* No flyout on a touch screen, so the direction markers mean nothing. */
	.csc-header__menu-list .menu-item-has-children > a::after { display: none; }

	/* --- The mobile header budget -----------------------------------------
	 *
	 * 304.6px was 36% of an 844 viewport and 4.2x the 72px bar the live site
	 * pins on a phone. The search field stays: CSC sells on part number, and
	 * that field is the one control in this header that IS the business. The
	 * live site answers the same problem with an "Open search" button and no
	 * field at all, which we are deliberately not copying.
	 *
	 * Everything around the field that already appears elsewhere on the page
	 * pays for it. Measured from the deployed build at 390:
	 *
	 *   search hint      13.6 + 5 gap   the placeholder already says it
	 *   Request a Quote  46 + 16 gap    twice more on this page
	 *   logo/menu rows   30 + 16 + 49   one row of 40 instead of two
	 *   social, account  in the footer already, and the phone was wrapping
	 * -------------------------------------------------------------------- */

	/* A desktop affordance. On a phone it is a third line of small grey text
	 * above the fold, and the placeholder carries the same information.
	 *
	 * Hidden the way .csc-header__sr is, NOT with display: none. The field
	 * carries aria-describedby pointing at this element, and display: none
	 * takes it out of the accessibility tree — a sighted user would lose one
	 * line of grey text while a screen reader user lost the sentence that
	 * says the catalogue is indexed by part number. Clipped to 1px it leaves
	 * the flow, so the 13.6px and its 5px gap both go, and it is still read. */
	.csc-header__hint {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* "Request a Quote" is on this page twice more, in the quote card and in
	 * the closing band, and the utility row above carries the phone number.
	 * Third time on one screen is not emphasis, it is 62px. */
	.csc-header__actions { display: none; }

	/* Row 1 logo and menu, row 2 search. The button renders in this band on
	 * purpose — see render_toggle() — so the two can share a line.
	 *
	 * flex-basis 0 on the logo, NOT auto. A flex line wraps on the items'
	 * hypothetical sizes and only shrinks them afterwards, within a line. At
	 * auto the logo's base is its natural 314px, so 314 + 16 + 70 = 400 did
	 * not fit a 358px band and the button wrapped to a second row — which is
	 * the layout this rule exists to remove. Basis 0 means the logo never
	 * forces a break; it takes the space the button leaves and the image
	 * scales inside it. Nothing here hardcodes the button's width, so a
	 * longer menu label just leaves the logo less room.
	 *
	 * That lands the logo at 272x26 at 390 and 242x23 at 360. Both are LARGER
	 * than the live site's own mobile logo, which measures 172.7x16.5 and
	 * 158.7x15.2 at those widths. */
	.csc-header__main-band { flex-wrap: wrap; align-items: center; }
	.csc-header__logo      { flex: 1 1 0; }
	.csc-header__toggle    { flex: none; }
	.csc-header__search    { order: 3; flex-basis: 100%; }

	/* The nav row now holds nothing but the menu, which is closed. Without
	 * this it still reserves 48px of empty white above the fold. */
	.csc-header__nav-band { min-height: 0; }

	/* Both are in the footer, and dropping them stops the phone number
	 * wrapping to a second line in a 50px row. The cart stays: it is where an
	 * order in progress lives, and nothing else on the page shows it. */
	.csc-header__social,
	.csc-header__account { display: none; }
}