/* ==========================================================================
   Site header — navy nav bar + trust strip, per "HD x Billi HP" design PDF.
   Enqueued after desktop.css/responsive.css so it overrides the legacy
   white-header rules. Colours: Billi navy #181D46, action blue #0079C9,
   Trustpilot green #00B67A, trust strip #F5F5F5.
   ========================================================================== */

:root {
	--header-navy: #181D46;
	/* Billi Light Blue. Was the design PDF's azure #0079C9 until Sep 2026,
	   when the client asked for every mid-blue CTA to become light blue
	   (feedback item 9). Anything on this colour takes navy text: white on
	   #90CDEB is 1.9:1. */
	--header-blue: #90CDEB;
	--header-hover: #90CDEB;
	--header-bar-h: 74px;
	--trust-bar-h: 46px;

}

/* The announcement bar is optional, so its height is a variable that is zero
   unless body.has-announce says otherwise. Everything that has to clear the
   fixed header measures --header-chrome-h, never --header-bar-h, so adding or
   removing the bar cannot leave an overlay in the wrong place.

   Both are declared on `body`, not on `:root`. A var() inside a custom
   property resolves against the element the property is DECLARED on, so a
   --header-chrome-h on :root would read --announce-h from :root — where it is
   always 0 — and never see the body override at all. That put the search
   overlay 36px too high. */
body {
	--announce-h: 0px;
	--header-chrome-h: calc(var(--announce-h) + var(--header-bar-h));
}

body.has-announce { --announce-h: 36px; }

/* ==========================================================================
   Announcement bar — the brand statement, site-wide (Sep 2026).

   Keeps the colours the client specified for it as a homepage band: centred
   DM Serif Display in Billi Blue on #EAEAEA. The serif family comes from
   css/typography.css, which lists .announce__text with the H1s.
   ========================================================================== */

.announce {
	background: #EAEAEA;
	height: var(--announce-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	overflow: hidden;
}

.announce__text {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: #181D46;
	text-align: center;
	white-space: nowrap;
	/* The line is short by design, but a longer one typed into the field
	   should trail off rather than push the bar out of shape. */
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

a.announce__text {
	text-decoration: none;
	opacity: 1;
}

a.announce__text:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.announce__text:focus-visible {
	outline: 2px solid #181D46;
	outline-offset: 2px;
}

header.container {
	height: auto;
	line-height: normal;
	max-width: 100%;
	background: var(--header-navy);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Nav bar + trust strip, plus the announcement bar when there is one. */
#wrapper {
	padding-top: calc(var(--header-chrome-h) + var(--trust-bar-h));
}

/* Same width as the homepage sections (.hp-container in home.css):
   1356px content + 2 × 40px gutter. */
.header-inner {
	max-width: 1436px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
}

.header-bar .header-inner {
	height: var(--header-bar-h);
}

/* Logo — legacy black PNG rendered white on the navy bar */
header .logo {
	float: none;
	height: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin-right: 56px;
}

header .logo img {
	margin: 0;
	filter: brightness(0) invert(1);
}

/* Right-hand cluster: search / account / basket / Get a Quote / burger */
.header-actions {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.header-actions .account-info {
	float: none;
	margin-left: 26px;
}

.header-actions .account-info:first-child {
	margin-left: 0;
}

/* Block-level flex, not inline-flex: an inline-flex link sits on its
   parent's baseline and inherits that line box's descender space. Under the
   phone that is 4px (its baseline is the bottom edge of the SVG) and under
   the search icon none, which left the handset sitting 2px high against the
   rest of the row on mobile. A block box has no baseline to sit on. */
.header-actions .account-info a {
	width: auto !important;
	height: auto;
	line-height: 0;
	display: flex;
	align-items: center;
	color: #fff;
}

.header-actions .account-info a:hover {
	opacity: 1;
	color: var(--header-hover);
}

.header-actions svg {
	width: 21px;
	height: 21px;
	display: block;
}

.site-search .fa {
	font-size: 19px;
	line-height: 1;
}

/* Get a quote button, 2px corners (sharper-corner direction, Aug 2026), now
   Billi Light Blue with navy text (client feedback item 9). It still has to
   carry against the navy bar, which a Billi Blue button would not.

   Hover can no longer go to light blue — that is the resting state — so it
   goes to white. Same family, still clearly a change of state. */
.header-actions .account-info.request-service {
	margin-left: 30px;
}

.account-info.request-service a {
	background: var(--header-blue);
	border-radius: 2px;
	padding: 13px 28px;
	font-size: 16px;
	font-weight: 400;
	color: var(--header-navy);
	line-height: 1.2;
	top: 0;
	margin: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.account-info.request-service a:hover {
	background: #fff;
	color: var(--header-navy) !important;
}

/* ---- Phone (client feedback item 3) --------------------------------- */

.header-actions .account-info.header-phone a {
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.header-phone svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

/* Search + burger toggles inherit the bar colours */
.menu-trigger,
.menu-trigger .fa {
	color: #fff;
}

.search-active .site-search .fa-search:before,
.menu-active .menu-trigger .fa-bars:before {
	color: var(--header-hover);
}

/* Search overlay opens below the navy bar, and below the announcement bar
   above it when there is one. */
.site-search-holder {
	top: var(--header-chrome-h);
	height: calc(100vh - var(--header-chrome-h));
}

.site-search-holder .search-area {
	background: var(--header-navy);
}

/* ==========================================================================
   Trust strip — rebuilt Sep 2026 (client feedback item 13).

   Smaller, quieter and more even than the first version: 46px tall, 13px DIN
   rather than 15px, navy on light grey, three items on a fixed third of the
   bar each so the middle one is genuinely centred, and hairline dividers
   between them. Green survives only on the Trustpilot stars.
   ========================================================================== */

.header-trust {
	background: #F5F5F5;
}

.header-trust .header-inner {
	height: var(--trust-bar-h);
}

/* Thirds, not space-between: with items of different widths space-between
   leaves the middle one visibly off centre, which is the thing that made the
   old strip look unresolved. */
.trust-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--header-navy); /* Billi Blue, per brand palette */
	text-decoration: none;
	position: relative;
}

/* Hairlines between the items rather than around them, so the strip still
   reads as one band. */
.trust-item + .trust-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: #DCDCDC;
}

.trust-item > svg {
	width: 18px;
	height: 18px;
	display: block;
	flex: 0 0 auto;
}

/* The Trustpilot item is a link to the profile (client feedback item 13).
   framework.css kills focus outlines sitewide with no replacement, so it
   brings its own — navy, because #90CDEB on this grey is 1.6:1, under the
   3:1 WCAG needs for a focus indicator. */
a.trust-item:hover {
	opacity: 1;
	color: var(--header-navy);
}

a.trust-item:hover span:not(.stars) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.trust-item:focus-visible {
	outline: 2px solid var(--header-navy);
	outline-offset: 3px;
}

.trust-stars .stars {
	display: flex;
	gap: 2px;
	flex: 0 0 auto;
}

/* Trustpilot's own green, and the only green on the strip. */
.trust-stars .stars > span {
	width: 17px;
	height: 17px;
	background: #00B67A;
	display: flex;
	align-items: center;
	justify-content: center;
}

.trust-stars .stars svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* ==========================================================================
   Desktop nav (mobile overlay behaviour in responsive.css stays untouched)
   ========================================================================== */

/* ==========================================================================
   Products mega menu (client feedback item 1, Sep 2026).

   Markup comes from functions/mega-menu.php, injected into the Products <li>
   so the mobile accordion and current-page classes keep working unchanged.

   The panel is full-bleed. That works because header.container is
   position: fixed at 100% width and everything between it and the panel is
   static, so `left: 0; right: 0` resolves against the viewport — apart from
   the <li>, which the legacy sub-menu rules make position: relative and which
   is therefore pinned back to static below.
   ========================================================================== */

.mega {
	display: none;
}

@media only screen and (min-width: 992px) {

	.menu-main-menu-container > ul > li.has-mega {
		position: static;
	}

	/* Positioning context for the panel. Measuring from the header itself
	   meant the panel's offset had to know whether an announcement bar was
	   above it; against the nav bar, `top: 100%` is true either way. */
	.header-bar {
		position: relative;
	}

	.mega {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		box-shadow: 0 14px 28px rgba(24, 29, 70, 0.12);
		border-top: 1px solid rgba(24, 29, 70, 0.08);
		z-index: 98;
		line-height: 1.4;
		text-align: left;
	}

	/* focus-within keeps the panel open for keyboard users, who cannot hover. */
	.menu-main-menu-container > ul > li.has-mega:hover > .mega,
	.menu-main-menu-container > ul > li.has-mega:focus-within > .mega {
		display: block;
	}

	/* Grid, not flex. Two intrinsically-sized columns and a promo pushed right
	   with `margin-left: auto` left ~500px of nothing between them at the
	   container's full 1436px. Explicit tracks make the ranges column absorb
	   that width instead. */
	.mega__inner {
		max-width: 1436px;
		margin: 0 auto;
		padding: 32px 40px 20px;
		display: grid;
		grid-template-columns: minmax(190px, 0.85fr) minmax(0, 2fr);
		align-items: start;
		gap: 18px 56px;
	}

	/* The promo is optional — the class comes from PHP rather than :has() so
	   the track only exists when there is something to put in it. */
	.mega--has-promo .mega__inner {
		grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.6fr) 340px;
	}

	.mega__col {
		min-width: 0;
	}

	/* responsive.css:72 sets `.menu-main-menu-container ul { margin-left: 50px }`
	   at (0,1,1) below 1140px, which indented both mega columns away from their
	   own headings between 992 and 1140. */
	.header-bar .menu-main-menu-container .mega__list {
		margin: 0;
		padding: 0;
		max-width: none;
	}

	/* Six ranges in two columns rather than one. It fills the width the grid
	   now gives this column and halves the panel's height, which was six
	   thumbnail rows deep for no reason. */
	.mega__col--ranges .mega__list--thumbs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 40px;
	}

	.mega__foot {
		grid-column: 1 / -1;
		border-top: 1px solid #EAEAEA;
		margin-top: 6px;
		padding-top: 18px;
		display: flex;
		gap: 40px;
	}
}

/* Below 1280 a 340px promo is taller than both lists put together and ends up
   driving the panel's height. Narrower here so the lists stay the subject. */
@media only screen and (min-width: 992px) and (max-width: 1279px) {
	.mega--has-promo .mega__inner {
		grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.5fr) 250px;
		gap: 18px 40px;
	}
}

.header-bar .mega__title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #75757B;
}

.mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-bar .menu-main-menu-container .mega__list li {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.4;
}

.header-bar .menu-main-menu-container .mega__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--header-navy);
	text-decoration: none;
	/* desktop.css:349 fades every link on the site to 0.7 on hover. */
	opacity: 1;
}

.header-bar .menu-main-menu-container .mega__list a:hover,
.header-bar .menu-main-menu-container .mega__list a:focus-visible {
	opacity: 1;
	color: var(--header-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Product imagery in the range column — the client asked to explore it, and a
   48px thumbnail is the version that survives a six-item list without turning
   the menu into a grid. The tile is always drawn, so a range with no image
   does not shorten its row and break the rhythm. */
.mega__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid #EAEAEA;
	border-radius: 2px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply; /* product shots are on near-white, not transparent */
}

.mega__list--thumbs a {
	padding: 4px 0;
}

.header-bar .mega__promo-link {
	display: block;
	text-decoration: none;
	color: var(--header-navy);
	opacity: 1;
}

.header-bar .mega__promo-link:hover {
	opacity: 1;
}

.mega__promo-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	margin-bottom: 12px;
}

.mega__promo-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mega__promo-link:hover .mega__promo-media img {
	transform: scale(1.04);
}

.header-bar .mega__promo-title {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--header-navy);
}

.header-bar .mega__promo-text {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	color: #75757B;
}

.header-bar .mega__cta {
	font-size: 15px;
	font-weight: 600;
	color: var(--header-navy);
	text-decoration: none;
	opacity: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.header-bar .mega__cta:hover {
	opacity: 1;
	color: var(--header-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mega__arrow {
	transition: transform 0.2s ease;
}

.mega__cta:hover .mega__arrow {
	transform: translateX(3px);
}

/* ---- Mega menu inside the mobile drawer ------------------------------ */

@media only screen and (max-width: 991px) {

	/* The drawer's accordion opens .sub-menu; the panel is not one, so it
	   needs the same treatment explicitly. */
	li.submenu-open > .mega {
		display: block;
	}

	.mega__inner {
		padding: 0 0 18px;
	}

	/* The drawer's `.menu-main-menu-container ul` rule (0,1,1) sets
	   `padding: 10px 24px 80px` on every list inside it, which put 80px of
	   dead space under each mega column. Reset here with the container in the
	   selector so it actually wins, and keep a deliberate indent so the links
	   still read as children of "Products". */
	.header-bar .menu-main-menu-container .mega__list {
		max-width: none;
		margin: 0;
		padding: 0 0 0 14px;
	}

	.header-bar .mega__title {
		margin: 14px 0 6px;
		color: rgba(255, 255, 255, 0.55);
	}

	.header-bar .menu-main-menu-container .mega__list a {
		font-size: 16px;
		font-weight: 300;
		padding: 9px 0;
		color: rgba(255, 255, 255, 0.85);
	}

	.header-bar .menu-main-menu-container .mega__list a:hover {
		color: #fff;
	}

	/* Thumbnails and the promo are dropped in the drawer: at this width they
	   turn a five-tap menu into a page of scrolling. */
	.mega__thumb,
	.mega__promo {
		display: none;
	}

	.mega__foot {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 12px;
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.header-bar .mega__cta {
		color: #fff;
		font-size: 16px;
	}

	.header-bar .mega__cta:hover {
		color: #fff;
	}
}

/* ==========================================================================
   Centred-logo prototype (client feedback, Aug 2026).

   Enabled per page with ?nav=centred, or sitewide from Options > Header
   layout. See functions/header-layout.php — the markup is identical either
   way, so sub-menus and current-page states are untouched and the mobile
   header below 992px is unaffected.

   The six top-level items are split three and three with flex `order`, and
   the logo is absolutely centred in the gap left between them.
   ========================================================================== */

/* The split halves need 1360px to hold six items, the mark and the action
   cluster without the icons landing on top of the last nav item — measured,
   not guessed: at 1200px the search icon sits over "Contact".

   Below that the halves are hidden and the full menu (rendered for the mobile
   drawer) takes over, which gives exactly the standard left-aligned header.
   So the centred treatment applies on large screens, and everything narrower
   falls back to the layout the site already has. */
@media only screen and (max-width: 1359px) {
	.header-layout-centred .menu-half { display: none !important; }
}

@media only screen and (min-width: 1360px) {

	.header-layout-centred .menu-mobile-only { display: none !important; }

	.header-layout-centred .header-bar .header-inner { position: relative; }

	/* Each half takes exactly half the bar and flushes toward the middle, so
	   the logo sits dead centre regardless of how wide the items happen to be
	   on either side. */
	.header-layout-centred .menu-half {
		flex: 1 1 0;
		min-width: 0;
		position: static;
		width: auto;
		transform: none;
		/* Border-box matters here: the right half reserves room for the actions
		   with padding, and on content-box that padding sits outside the
		   flex-basis, making that half wider than the left one and shoving the
		   logo off centre by half the padding. */
		box-sizing: border-box;
	}

	.header-layout-centred .menu-half > ul {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	.header-layout-centred .menu-half--left > ul { justify-content: flex-end; }
	.header-layout-centred .menu-half--right > ul { justify-content: flex-start; }

	/* nowrap: the halves are constrained, and a nav item breaking onto two
	   lines is worse than a slightly tighter bar. */
	.header-layout-centred .menu-half > ul > li { margin: 0 13px; white-space: nowrap; }

	/* Breathing room either side of the mark. */
	.header-layout-centred .menu-half--left > ul > li:last-child { margin-right: 44px; }
	.header-layout-centred .menu-half--right > ul > li:first-child { margin-left: 44px; }

	.header-layout-centred .menu-half > ul > li > a { font-size: 15px; }

	.header-layout-centred header .logo {
		flex: 0 0 auto;
		margin: 0;
		z-index: 2;
	}

	/* More prominence for the brand is the point of the exercise. */
	.header-layout-centred header .logo img { width: 88px; height: auto; }

	/* Out of the flow so the two halves stay exactly half the bar each; the
	   right-hand half is padded to clear it. */
	.header-layout-centred .header-actions {
		position: absolute;
		right: 40px;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0;
	}

	/* Room for search / account / basket / Get a quote, so the last nav item
	   cannot slide underneath them.

	   On the inner list, not on the half itself: with flex-basis 0, padding on
	   a flex item still counts toward its base size, so padding the half made
	   it 300px wider than its partner and shifted the logo off centre by half
	   of that. Padding the list leaves the two halves exactly equal. */
	.header-layout-centred .menu-half--right > ul { padding-right: 268px; }

	/* No wider-screen variant: .header-inner is capped at 1436px, so a 2560px
	   monitor gives the bar no more room than a 1500px one. The spacing above
	   is what fits, full stop.

	   That cap is the real constraint on a centred header here. Six items, the
	   mark and an action cluster carrying search, account, basket and Get a
	   quote leave each side of the logo about 350px — roughly half what a
	   purely editorial site has to play with, and why the items sit closer
	   together and a size smaller than in the current header. */
}

@media only screen and (min-width: 992px) {

	.menu-main-menu-container {
		position: static;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}

	/* 44px rather than 38px (client feedback item 1: "slightly more spacing
	   between items"). Affordable now that Contact has left the bar and the
	   two longest labels shortened to Products and Sectors. */
	.menu-main-menu-container > ul > li {
		margin: 0 44px 0 0;
		line-height: var(--header-bar-h);
	}

	/* DIN Demi at 16px. Sentence case is in the menu labels themselves, not a
	   text-transform — see scripts/nav-restructure-2026-09.php. */
	.menu-main-menu-container > ul > li > a {
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		display: inline-block;
		line-height: var(--header-bar-h);
		position: relative;
	}

	/* ---- Hover underline (client feedback item 11) -------------------- */
	/* 2px of Billi light blue growing out from the centre in 220ms, with the
	   text colour left alone — the old rule turned the label light blue, which
	   is what the underline now does instead.

	   Animated with left/right rather than transform: scaleX because the
	   pseudo-element is 2px tall, and scaling a 2px box on the compositor
	   leaves a visibly soft edge on non-retina displays. Both properties are
	   cheap enough here (five items, hover only). */
	.menu-main-menu-container > ul > li > a::after {
		content: '';
		position: absolute;
		left: 50%;
		right: 50%;
		bottom: 24px;
		height: 2px;
		background: var(--header-hover);
		transition: left 0.22s ease, right 0.22s ease;
		pointer-events: none;
	}

	.menu-main-menu-container > ul > li:hover > a::after,
	.menu-main-menu-container > ul > li > a:focus-visible::after {
		left: 0;
		right: 0;
	}

	/* The current page keeps a full underline, so the bar always says where
	   you are. No transition: it should be there on load, not draw itself in. */
	.menu-main-menu-container > ul > li.current-menu-item > a::after,
	.menu-main-menu-container > ul > li.current-menu-ancestor > a::after,
	.menu-main-menu-container > ul > li.current-menu-parent > a::after,
	.menu-main-menu-container > ul > li.current_page_item > a::after,
	.menu-main-menu-container > ul > li.current_page_ancestor > a::after {
		left: 0;
		right: 0;
		transition: none;
	}

	.menu-main-menu-container > ul > li > a:focus-visible {
		outline: 2px solid var(--header-hover);
		outline-offset: -6px;
	}

	/* desktop.css:486 — `.menu-main-menu-container > ul li:hover a` at (0,2,3)
	   — repaints EVERY link inside a hovered item legacy cyan #00aeef. That is
	   the whole mega panel, and the top-level label itself, which item 11 says
	   must keep its colour. Neutralised for the header bar; each part then
	   states the colour it actually wants. */
	.header-bar .menu-main-menu-container > ul li:hover > a {
		color: #fff;
	}

	.header-bar .menu-main-menu-container > ul li:hover .mega a {
		color: var(--header-navy);
	}

	.header-bar .menu-main-menu-container > ul li:hover .mega__promo-text {
		color: #75757B;
	}

	/* Sub-menu links keep the colour change — they have no underline of their
	   own, and this is the only affordance they get. Higher specificity than
	   the neutraliser above, so it still lands. */
	.header-bar .menu-main-menu-container ul.sub-menu li:hover > a {
		color: var(--header-hover);
	}

	.menu-main-menu-container ul.sub-menu {
		top: var(--header-bar-h);
		line-height: 1.2;
	}

	.header-bar .menu-main-menu-container ul.sub-menu a {
		color: var(--header-navy);
		font-weight: 400;
	}

	.header-bar .menu-main-menu-container > ul li:hover .sub-menu a:hover {
		color: var(--header-blue);
	}

	/* Mobile accordion chevrons (js/header.js) play no part on desktop */
	.submenu-toggle {
		display: none;
	}

}

/* ==========================================================================
   Mobile / tablet
   ========================================================================== */

@media only screen and (max-width: 991px) {

	:root {
		--header-bar-h: 60px;
		--trust-bar-h: 42px;
	}

	body.has-announce { --announce-h: 32px; }

	.announce__text { font-size: 14px; }

	.header-inner {
		padding: 0 20px;
	}

	.menu-trigger {
		float: none;
		margin: 0 0 0 22px;
		line-height: 1;
		font-size: 20px;
	}

	/* ---- Full-screen menu overlay ----------------------------------- */
	/* Brand navy instead of the legacy cyan, with collapsed accordion
	   sub-menus (toggled by js/header.js) replacing the old wall of
	   permanently-expanded links. */

	.menu-main-menu-container {
		background: var(--header-navy);
		padding: 0;
	}

	html.menu-active .menu-main-menu-container {
		animation: header-menu-in 0.22s ease;
	}

	@keyframes header-menu-in {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
	}

	.menu-main-menu-container ul {
		max-width: 560px;
		margin: 0 auto;
		padding: 10px 24px 80px;
	}

	.menu-main-menu-container > ul > li,
	.menu-main-menu-container ul li.menu-item-has-children {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.menu-main-menu-container > ul > li:last-child {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* Legacy special-casing of one menu item (responsive.css #menu-item-22)
	   broke the even row rhythm */
	.menu-main-menu-container ul li#menu-item-22 {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.menu-main-menu-container > ul > li > a {
		display: block;
		width: auto;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		padding: 17px 52px 17px 0;
	}

	/* Chevron toggle injected by js/header.js */
	.submenu-toggle {
		position: absolute;
		top: 6px;
		right: -10px;
		width: 46px;
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		padding: 0;
		color: rgba(255, 255, 255, 0.85);
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.submenu-toggle svg {
		width: 17px;
		height: 17px;
		display: block;
	}

	li.submenu-open > .submenu-toggle {
		transform: rotate(180deg);
	}

	/* Sub-menus: collapsed until toggled */
	.menu-main-menu-container ul.sub-menu {
		display: none;
		margin: 0;
		padding: 0 0 16px;
	}

	li.submenu-open > ul.sub-menu {
		display: block;
	}

	.menu-main-menu-container ul.sub-menu li {
		border-bottom: 0;
		margin: 0;
	}

	.menu-main-menu-container ul.sub-menu li a {
		display: block;
		font-size: 16px;
		font-weight: 300;
		line-height: 1.4;
		padding: 9px 0;
		color: rgba(255, 255, 255, 0.85) !important;
	}

	/* Burger becomes a plain white X while the menu is open */
	.menu-active .menu-trigger .fa-bars:before {
		content: '\f00d';
		color: #fff;
	}

	header .logo img {
		margin: 0;
	}

	.account-info.request-service a {
		padding: 11px 18px;
		font-size: 14px;
	}

	.header-phone__num { display: none; }

	.trust-item {
		font-size: 13px;
		gap: 8px;
	}

	.trust-item > svg {
		width: 18px;
		height: 18px;
	}

	.trust-stars .stars > span {
		width: 16px;
		height: 16px;
	}

	.trust-stars .stars svg {
		width: 11px;
		height: 11px;
	}

}

@media only screen and (max-width: 640px) {

	.trust-award,
	.trust-support {
		display: none;
	}

	.trust-item {
		flex: 1 1 auto;
	}

	.trust-item + .trust-item::before {
		display: none;
	}

}

/* ==========================================================================
   Narrow desktop (992–1359px) — pre-existing overflow fix.

   The bar needs 1238px to hold the logo, six menu items at their normal 38px
   spacing and the 280px action cluster on one line, but the burger does not
   take over until 991px. Everything in between wrapped the menu onto a second
   line behind the trust strip, with the search and account icons landing on
   top of "Support" and "Contact". This is the live header, not just the
   centred prototype: 1024 (tablet landscape), 1152 and 1280 all sit inside
   the broken range.

   Tightening the spacing and the type here brings the requirement down to
   about 990px, which clears the burger breakpoint.

   Last in the file on purpose: the desktop rules above are min-width 992 at
   the same specificity, so an earlier block would lose on source order.
   ========================================================================== */

@media only screen and (min-width: 992px) and (max-width: 1359px) {

	header .logo { margin-right: 22px; }

	.menu-main-menu-container > ul > li {
		margin: 0 20px 0 0;
		white-space: nowrap;
	}

	.menu-main-menu-container > ul > li > a { font-size: 15px; }

	.header-actions .account-info { margin-left: 15px; }

	.account-info.request-service a { padding: 13px 18px; font-size: 15px; }

	/* The digits are the first thing to go: the icon still calls, and the
	   number is repeated in the footer and on every contact route. Keeping
	   them here is what would push the menu onto a second line again. */
	.header-phone__num { display: none; }
}

/* The bottom of that band is tighter still: at 992px the six items only just
   miss fitting, and "Contact" drops to a second line. */
@media only screen and (min-width: 992px) and (max-width: 1079px) {

	header .logo { margin-right: 16px; }

	.menu-main-menu-container > ul > li { margin-right: 14px; }

	.header-actions .account-info { margin-left: 12px; }

	.account-info.request-service a { padding: 13px 14px; }

	/* A size down rather than dropping a control: at the very bottom of the
	   range the six items still overrun by about 30px, and losing the account
	   or basket icon would cost more than a point of type does. */
	.menu-main-menu-container > ul > li > a { font-size: 14px; }
}