/*
 * Fixes from the 2026-08-06 design audit.
 *
 * A separate file rather than edits to css/styles.css: that bundle is compiled
 * webpack output with no source in this repo, so anything written into it is
 * discarded by the next real build.
 *
 * Every selector below was read off the served markup, not guessed — a first
 * draft of this file targeted .section-benefits, .top-header and .item-subtitle,
 * none of which exist on this site. Every colour is a value the site already
 * uses elsewhere, so this is a correction rather than a re-skin.
 */

/* --------------------------------------------------------------------------
 * 1. Product-card contrast
 *
 * Card markup, verbatim:
 *     <div class="item">
 *       <a class="item-body">
 *         <h3 class="item-title">F1020 AuO</h3>
 *         <p>+86F to -11F</p>        <- the temperature range
 *         <div class="item-img">…
 *         <div class="item-footer">36.1ft³ · 3 versions · Product Info
 *
 * That <p> is the single number a cold-chain buyer scans for, and it renders at
 * rgb(164,171,193): 2.29:1 on white, 2.08:1 on the light-blue section. AA wants
 * 4.5:1. #0b6e9b is the blue the product spec tables already use and measures
 * 5.65:1 — it also reads as data rather than as caption text.
 * ----------------------------------------------------------------------- */
.section-product .item .item-body > p {
	color: #0b6e9b;
}

/* "36.1ft³ · 3 versions · Product Info" — same failing grey, but this is
   supporting text, so it takes the body slate at 9.56:1 rather than the blue. */
.section-product .item .item-footer,
.section-product .item .item-footer * {
	color: #40454f;
}

/* --------------------------------------------------------------------------
 * 2. Body typography
 *
 * 610 of the sampled text elements resolve to Arial, and 181 menu items declare
 * Roboto. Barlow is already loaded in seven weights for headings, so moving body
 * copy onto it costs zero additional bytes and makes the page one typeface
 * family instead of three.
 *
 * Headings are left alone — they already resolve to Barlow.
 * ----------------------------------------------------------------------- */
body,
p,
li,
td,
th,
dd,
dt,
blockquote,
figcaption,
label,
input,
select,
textarea,
button {
	font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
 * 3. The blue band's optional call to action
 *
 * "Have Any Questions? Let's talk!" sits on all seven application pages and,
 * until the `button` field was added to FC: Blue, offered nothing to click.
 * Those pages are where organic search lands, so the question was the end of
 * the road.
 * ----------------------------------------------------------------------- */
.section-blue .section-blue__cta {
	margin-top: 22px;
}

.section-blue .section-blue__cta .btn {
	display: inline-block;
}

/* --------------------------------------------------------------------------
 * 4. Mobile menu
 *
 * Measured at 390px: the close control is 14 × 14px — WCAG 2.2 asks for 24 and
 * comfortable is 44 — and the 255px drawer opens with no scrim, so the hero copy
 * and CTAs stay at full contrast behind it and two layers compete for the eye.
 *
 * The scrim is done with a spread box-shadow rather than an overlay element,
 * because the markup comes from the compiled bundle and cannot gain a new node.
 * ----------------------------------------------------------------------- */
.menu-wrap .close-button {
	min-width: 44px;
	min-height: 44px;
}

@media (max-width: 992px) {
	body.show-menu .menu-wrap {
		box-shadow: 0 0 0 100vmax rgba(24, 23, 38, 0.55);
		clip-path: inset(0 -100vmax 0 -100vmax);
	}
}

/* --------------------------------------------------------------------------
 * 5. A robustness fallback, not a design change
 *
 * .section-blue-product paints its cyan with an inline background-image
 * (bg-blue-product.png) and nothing else. If that image 404s or is slow, white
 * text lands on white and the section is unreadable. The colour here MATCHES the
 * artwork, so nothing looks different when the image loads.
 *
 * NOTE: white on this cyan measures 2.58:1, which fails. Fixing that properly
 * means changing the band's colour, which is a brand decision and is left in the
 * design audit's "bigger bets" rather than made here.
 * ----------------------------------------------------------------------- */
.section-blue-product {
	background-color: #15a7de;
}

/* --------------------------------------------------------------------------
 * 6. Product-page heading scale
 *
 * The product name renders at 35px while the section titles below it render at
 * 40px — so "Available versions" visually outranks "F1020". Bringing the H1 up
 * to 46px restores the order without touching the H2s.
 * ----------------------------------------------------------------------- */
@media (min-width: 993px) {
	.section-product-detail h1.section-title {
		font-size: 46px;
		line-height: 1.12;
	}
}

/* --------------------------------------------------------------------------
 * 7. Tap targets on the product page's sticky bar
 *
 * Measured at 390px: the in-page anchor links are 77×15, 51×15 and 88×15px.
 * The buttons beside them are fine at 45px. WCAG 2.2 AA asks for 24×24; Apple
 * and Google both say 44/48. Padding is the whole fix — nothing moves, the
 * targets just stop being 15px tall.
 * ----------------------------------------------------------------------- */
@media (max-width: 992px) {
	.fixed-bottom a:not(.btn):not(.btn-outline) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-top: 6px;
		padding-bottom: 6px;
	}
}

/* --------------------------------------------------------------------------
 * 8. Section rhythm
 *
 * The homepage four-block sits on 29px of padding against the page's own
 * 97–100px rhythm, and the testimonials block is asymmetric (56px top, 96px
 * bottom). Both read as mistakes rather than as emphasis.
 * ----------------------------------------------------------------------- */
@media (min-width: 993px) {
	.section-four-block {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	.section-testimonials {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

/* --------------------------------------------------------------------------
 * 9. Tablet gutter
 *
 * At 768px the product card rows start at x=2 — effectively flush to the screen
 * edge. Every other breakpoint has a gutter.
 * ----------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 992px) {
	.section-product .inner,
	.search-product .inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}