/*
Theme Name:   Enlite Kadence Child
Description:  Ignition Grid brand layer for enlitenetworks.com. Colors and
              fonts are set in functions.php; this file holds the CSS that
              Kadence's settings cannot express.
Template:     kadence
Version:      0.1.0
Text Domain:  enlite-kadence-child
*/

/* Tokens ----------------------------------------------------------------
 *
 * Brand colors live in Kadence's global palette (functions.php) so they show
 * up in the block editor's color pickers. These names point at the palette,
 * so CSS here can say what it means rather than "palette2".
 *
 * Contrast (checked): dark amber on cream 5.8:1, muted on cream 6.4:1,
 * subtle on cream 4.6:1, onyx on amber 7.6:1. Amber on cream is 1.9:1 —
 * never use it for text on a light background.
 */
:root {
	--enlite-amber:      var(--global-palette1); /* fills, rules, icons, large display */
	--enlite-amber-dark: var(--global-palette2); /* links and small amber text on light */
	--enlite-onyx:       var(--global-palette3);
	--enlite-muted:      var(--global-palette5); /* secondary text */
	--enlite-subtle:     var(--global-palette6); /* form field borders, hints */
	--enlite-stone:      var(--global-palette7); /* dividers, table borders */
	--enlite-surface:    var(--global-palette8); /* panels on a cream page */
	--enlite-cream:      var(--global-palette9);

	--enlite-font-display: "Orbitron", sans-serif;
	--enlite-font-body:    "IBM Plex Sans", sans-serif;
	--enlite-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

	/* Two colours that must NOT follow the theme.
	   The footer is onyx in both themes, and the hero panel sits over a
	   photograph, so both need light text whatever the page is doing.
	   --enlite-onyx and --enlite-cream mean "ink" and "ground" and swap with
	   the theme; these two are literal. */
	--enlite-ink-fixed:   #202124;
	--enlite-light-fixed: #F5F2EB;
	--enlite-quiet-fixed: #C9C4BC; /* Secondary text on the footer: 9:1 there */

	/* Minimum touch target: installers may be wearing gloves. */
	--enlite-tap: 48px;
}

/* Dark theme ------------------------------------------------------------
 *
 * Brian and his team prefer a dark site (2026-09-24), which overrides the
 * cream ground the brief fixed. The toggle sits in the header; the choice
 * is remembered, and a visitor who has expressed none follows their
 * system.
 *
 * The brand reads BETTER inverted, and there is a measurable reason:
 * amber on onyx is about 7.6:1, so in dark mode amber is usable for links
 * and small text. On cream it is 1.9:1, which is why the light theme has
 * to fall back to the muddy dark amber for every link.
 *
 * These override the Kadence palette variables rather than the enlite-*
 * tokens alone, so Kadence's own components - header, footer, buttons,
 * form fields - follow without being restyled one by one. The enlite-tools
 * plugin reads the same variables, so the tools follow too.
 */
:root[data-theme="dark"] {
	--global-palette1:  #FD9B1E; /* Amber: now safe for text as well as fills */
	--global-palette2:  #FFB454; /* Lifted amber for links, brighter than the fill */
	--global-palette3:  #F5F2EB; /* "Onyx" slot carries the light value: headings */
	--global-palette4:  #E8E4DB; /* Body text */
	--global-palette5:  #A9A49B; /* Secondary text (6.0:1 on the ground) */
	--global-palette6:  #6E6A63; /* Field borders, hints */
	--global-palette7:  #3A3D42; /* Dividers and table borders */
	--global-palette8:  #26292E; /* Panels, lifted off the ground */
	--global-palette9:  #17181B; /* The page itself */
	--global-palette10: #0F1012;

	--enlite-amber:      var(--global-palette1);
	--enlite-amber-dark: var(--global-palette2); /* Lifted, not darkened */
	--enlite-onyx:       var(--global-palette3); /* Reads as "ink", whatever the theme */
	--enlite-muted:      var(--global-palette5);
	--enlite-subtle:     var(--global-palette6);
	--enlite-stone:      var(--global-palette7);
	--enlite-surface:    var(--global-palette8);
	--enlite-cream:      var(--global-palette9); /* Reads as "ground" */

	color-scheme: dark;
}

/* Kadence paints these from its own settings, which are PHP defaults and
   cannot see the toggle, so they are set here. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .content-bg,
:root[data-theme="dark"] .entry-content-wrap,
:root[data-theme="dark"] .site-container,
:root[data-theme="dark"] .content-container,
:root[data-theme="dark"] .site-header-row,
:root[data-theme="dark"] .site-main {
	background-color: var(--enlite-cream);
	color: var(--global-palette4);
}

:root[data-theme="dark"] .site-header-wrap,
:root[data-theme="dark"] .site-header-row-container-inner,
:root[data-theme="dark"] .kadence-sticky-header {
	background: var(--enlite-cream);
	border-bottom: 1px solid var(--enlite-stone);
}

/* The footer is already onyx in the light theme; in the dark one it has to
   separate from the page rather than merge into it. */
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .site-footer-row-container-inner {
	background: var(--global-palette10);
}

/* Kadence puts a .site-container inside the footer as well as around the
   page, and the rule above that grounds the page was painting it: a band
   of page colour down the middle of the footer, with the footer's own
   colour showing at the edges. Inside the footer, the container carries
   no colour of its own. */
:root[data-theme="dark"] .site-footer .site-container,
:root[data-theme="dark"] .site-footer .content-container {
	background: transparent;
}

:root[data-theme="dark"] a {
	color: var(--enlite-amber-dark);
}

/* The FILLED amber button keeps onyx text: that pairing is 7.6:1 either
   way. Outlined buttons are not filled, so they must follow the theme or
   they end up dark text on a dark page. */
:root[data-theme="dark"] .wp-element-button,
:root[data-theme="dark"] .button {
	color: var(--enlite-ink-fixed);
}

/* Kadence paints the header's Shop button from palette3, which the dark
   theme redefines as the light "ink" value - so the one amber button on
   the page came out cream on amber, 1.9:1. Onyx on amber is 7.6:1 in both
   themes and is what the brief specifies. */
:root[data-theme="dark"] #main-header .header-button,
:root[data-theme="dark"] #mobile-header .header-button,
:root[data-theme="dark"] .site-header .button {
	/* Kadence's own rule is #main-header .header-button, so this has to
	   carry an ID too or it loses on specificity rather than on merit. */
	color: var(--enlite-ink-fixed);
}

:root[data-theme="dark"] .enlite-button-secondary .wp-block-button__link,
:root[data-theme="dark"] .enlite-button-secondary.wp-block-button__link,
:root[data-theme="dark"] .enlite-btn-outline {
	color: var(--enlite-onyx);
	border-color: var(--enlite-onyx);
	background: transparent;
}

:root[data-theme="dark"] .enlite-button-secondary .wp-block-button__link:hover,
:root[data-theme="dark"] .enlite-button-secondary .wp-block-button__link:focus-visible,
:root[data-theme="dark"] .enlite-btn-outline:hover,
:root[data-theme="dark"] .enlite-btn-outline:focus-visible {
	background: var(--enlite-onyx);
	color: var(--enlite-cream);
}

/* The footer is onyx in both themes, so its links stay light rather than
   picking up the dark theme's amber link colour. */
:root[data-theme="dark"] .enlite-footer a,
:root[data-theme="dark"] .site-footer a {
	color: var(--enlite-light-fixed);
}

:root[data-theme="dark"] .enlite-footer a:hover,
:root[data-theme="dark"] .enlite-footer a:focus-visible {
	color: var(--enlite-amber);
}

/* White plates would glare. Media sits on the panel colour instead. */
:root[data-theme="dark"] .enlite-turntable,
:root[data-theme="dark"] .enlite-product__image.has-turntable {
	background: var(--enlite-surface);
}

/* STOPGAP, and it belongs to the tools repo, not here.
   The planner's "open me" card carries background:#f7f9fb as an inline
   style (enlite-tools/includes/radio-link-planner.php), so in dark mode
   the theme's light text lands on a near-white card: the heading measured
   1.2:1. An inline style cannot be overridden except by keying off it,
   which is what this does.

   It fails safe: if they change that hex, or set a colour of their own,
   this simply stops matching. Remove it once the plugin handles the theme
   (docs/TOOLS-THEME-HANDOFF.md). */
:root[data-theme="dark"] [style*="f7f9fb"],
:root[data-theme="dark"] [style*="f7f9fb"] * {
	color: var(--enlite-ink-fixed);
}

/* Diagrams are still light-background SVGs. Until the final artwork
   arrives with transparency, they get a light plate so they are legible
   rather than a bright rectangle with dark edges. */
:root[data-theme="dark"] .enlite-graphic img,
:root[data-theme="dark"] .enlite-product__image img:not(.enlite-turntable__frame) {
	background: #F5F2EB;
	border-radius: 2px;
}

/* Type -------------------------------------------------------------------
 *
 * Orbitron is for headlines only and loses legibility under 18px, so it is
 * limited to h1 and h2. Everything smaller uses Plex Sans (set in
 * functions.php).
 */
h1, h2,
.enlite-display {
	font-family: var(--enlite-font-display);
	letter-spacing: 0.01em;
}

/* Specification values, URLs, coordinates, figures in tables. */
code, kbd, samp,
.enlite-mono {
	font-family: var(--enlite-font-mono);
}

/* Forms ------------------------------------------------------------------
 * Stone Mist is too faint for field borders (1.6:1); fields need 3:1.
 */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
	border-color: var(--enlite-subtle);
	min-height: var(--enlite-tap);
}

/* Secondary button: outlined. Only one amber button per screen, and on most
 * pages that is the header's Shop button. */
.enlite-button-secondary .wp-block-button__link,
.enlite-button-secondary.wp-block-button__link {
	background: transparent;
	color: var(--enlite-onyx);
	border: 2px solid var(--enlite-onyx);
	font-weight: 600;
}

.enlite-button-secondary .wp-block-button__link:hover,
.enlite-button-secondary .wp-block-button__link:focus-visible {
	/* Inverts with the theme: the hover has to contrast with the page it
	   sits on, not with a fixed colour. */
	background: var(--enlite-onyx);
	color: var(--enlite-cream);
}

/* Header actions: cart and account ---------------------------------------- */
.enlite-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.enlite-actions__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--enlite-tap);
	height: var(--enlite-tap);
	color: var(--enlite-onyx);
}

.enlite-actions__link:hover,
.enlite-actions__link:focus-visible {
	color: var(--enlite-amber-dark);
}

.enlite-actions__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 1.15rem;
	padding: 0 0.2rem;
	border-radius: 999px;
	background: var(--enlite-amber);
	color: var(--enlite-onyx);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}

/* Theme switch, beside the cart and account. One glyph shows at a time:
   the sun while the dark theme is on (press it to go light) and the moon
   while the light one is. */
.enlite-theme-switch {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.enlite-theme-switch__sun {
	display: none;
}

:root[data-theme="dark"] .enlite-theme-switch__sun {
	display: block;
}

:root[data-theme="dark"] .enlite-theme-switch__moon {
	display: none;
}

/* Footer: onyx ground, cream text, amber rules ---------------------------- */
.site-footer,
.site-footer-row-container-inner {
	background: var(--enlite-ink-fixed);
	color: var(--enlite-light-fixed);
}

.enlite-footer {
	padding: 1rem 0;
	color: var(--enlite-light-fixed);
}

.enlite-footer a {
	color: var(--enlite-light-fixed);
	text-decoration: none;
}

.enlite-footer a:hover,
.enlite-footer a:focus-visible {
	color: var(--enlite-amber);
	text-decoration: underline;
}

.enlite-footer__logo {
	display: inline-block;
	margin-bottom: 1.5rem;
}

.enlite-footer__logo img {
	display: block;
	width: 180px;
	height: auto;
}

.enlite-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.5rem 2rem;
}

.enlite-footer__heading {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--enlite-amber);
	font-family: var(--enlite-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--enlite-light-fixed);
}

.enlite-footer__column ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.enlite-footer__column li {
	margin-bottom: 0.125rem;
	font-size: 0.9375rem;
}

/* Glove-sized tap targets, as everywhere else on the site. */
.enlite-footer__column a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

.enlite-footer__legal {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(245, 242, 235, 0.25);
	font-size: 0.8125rem;
	/* Fixed, not themed: the footer is onyx in both themes, and the map and
	   terrain credit here is a licence requirement. At --enlite-stone it
	   measured 1.75:1 on the dark footer, which is a credit nobody can read. */
	color: var(--enlite-quiet-fixed);
}

.enlite-footer__credit,
.enlite-footer__copyright {
	margin: 0 0 0.25rem;
}

.enlite-footer__legal a {
	color: var(--enlite-quiet-fixed);
	text-decoration: underline;
}

/* Product page -----------------------------------------------------------
 * woocommerce/content-single-product.php. Phone first: one column, then
 * gallery | summary from 900px. Sections follow brief 6.5.
 */
.enlite-product {
	--enlite-gap: clamp(1.25rem, 3vw, 2.5rem);
}

.enlite-product__top {
	display: grid;
	gap: var(--enlite-gap);
	margin-bottom: var(--enlite-gap);
}

@media (min-width: 900px) {
	.enlite-product__top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
	}
	.enlite-product__gallery {
		position: sticky;
		top: 1.5rem;
	}
}

.enlite-product__image {
	margin: 0;
	background: var(--enlite-surface);
	border-top: 4px solid var(--enlite-amber);
}

.enlite-product__image img {
	display: block;
	width: 100%;
	/* Contained, like the cards: a tall crop and a wide one sit in the same
	   frame, so the page does not reflow around whichever photo arrives. */
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 0.75rem;
}

/* The gallery frame is 4:3 for photographs; a turntable is square and
   fills its own frame, so it overrides both here rather than fighting the
   generic rule on specificity. */
.enlite-product__image.has-turntable {
	background: var(--enlite-surface);
}

.enlite-product__image.has-turntable img {
	aspect-ratio: 1 / 1;
	padding: 0;
}

/* The version question, on a product that has versions and no price yet.
   A plain GET form: the chosen model travels to the contact page as
   ?enquiry=, with no JavaScript. */
.enlite-buy__versions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.enlite-buy__versions label {
	flex: 1 0 100%;
	font-size: 0.875rem;
	font-weight: 600;
}

.enlite-buy__versions select {
	flex: 1 1 12rem;
	min-height: var(--enlite-tap);
	padding: 0 0.5rem;
	border: 1px solid var(--enlite-subtle);
	background: #fff;
	font: inherit;
}

/* Shop and category archives. The breadcrumb on a product page lands here,
   so it uses the same cards as every family page rather than WooCommerce's
   default grid. */
.enlite-archive {
	max-width: 72rem;
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}

.enlite-archive__head {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--enlite-amber);
}

.enlite-archive__title {
	margin: 0;
}

.enlite-archive__intro {
	margin: 0.5rem 0 0;
	max-width: 42rem;
}

.enlite-archive__empty,
.enlite-archive__more {
	margin: 1.5rem 0 0;
}

/* 360 turntable. Frame one is in the markup and the rest arrive on the
   first drag, so the page costs 8 KB until someone actually turns it. */
.enlite-turntable {
	position: relative;
	/* The frames are keyed out, so the product sits on the page's own
	   surface. A white plate inside a cream card was two neutrals fighting. */
	background: transparent;
	touch-action: pan-y; /* Vertical scroll still works; horizontal is ours. */
}

.enlite-turntable__frame {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	-webkit-user-select: none;
	user-select: none;
}

.enlite-turntable.is-enhanced {
	cursor: grab;
}

.enlite-turntable.is-dragging {
	cursor: grabbing;
}

.enlite-turntable__frame:focus-visible {
	outline: 3px solid var(--enlite-amber);
	outline-offset: 2px;
}

/* Controls sit over the foot of the frame: the render has empty space
   there, and an installer in gloves gets a real target either side. */
.enlite-turntable__controls {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	position: absolute;
	inset: auto 0 0.5rem;
}

.enlite-turntable.is-enhanced .enlite-turntable__controls {
	display: flex;
}

.enlite-turntable__step {
	min-width: 48px;
	min-height: 48px;
	border: 1px solid var(--enlite-stone);
	border-radius: 50%;
	background: var(--enlite-cream);
	color: var(--enlite-onyx);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

.enlite-turntable__step:hover,
.enlite-turntable__step:focus-visible {
	background: var(--enlite-amber);
}

.enlite-turntable__hint {
	margin: 0;
	padding: 0.25rem 0.625rem;
	background: var(--enlite-cream);
	border: 1px solid var(--enlite-stone);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--enlite-onyx);
}

.enlite-turntable__status {
	margin: 0;
	position: absolute;
	inset: 0.5rem 0.5rem auto auto;
	font-size: 0.75rem;
	opacity: 0.7;
}

.enlite-turntable.is-loading .enlite-turntable__frame {
	opacity: 0.85;
}

/* Someone who has asked for less motion still gets the buttons, which move
   one frame at a time on purpose. */
@media (prefers-reduced-motion: reduce) {
	.enlite-turntable__hint {
		text-transform: none;
	}
}

/* Port layout strip, under the photo. Drawn from the same port data as the
   specification table, so it cannot drift out of step with it. A schematic,
   not a faceplate: the specification says how many ports and of what type,
   never where they sit on the unit. */
.enlite-ports {
	margin: 0.75rem 0 0;
	padding: 0.875rem 1rem 0.75rem;
	border: 1px solid var(--enlite-stone);
	background: var(--enlite-cream);
}

.enlite-ports__title {
	margin: 0 0 0.625rem;
	font-family: var(--enlite-font-mono, inherit);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--enlite-amber-dark);
}

.enlite-ports__groups {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
}

/* Each group is its own column so its count sits under its own ports. */
.enlite-ports__group {
	min-width: 0;
}

.enlite-ports__row {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	max-width: 15rem;
	color: var(--enlite-onyx);
}

/* PoE ports carry the amber: it is the difference a buyer is looking for
   between two otherwise identical part numbers. */
.enlite-ports__group.is-poe .enlite-ports__row {
	color: var(--enlite-amber-dark);
}

.enlite-ports__port svg {
	display: block;
	width: 22px;
	height: 22px;
}

.enlite-ports__group--sfp .enlite-ports__port svg {
	/* An SFP cage is wider than it is tall; keep the shape honest. */
	width: 26px;
	height: 18px;
	margin-top: 2px;
}

.enlite-ports__label {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.35;
}

.enlite-ports__label strong {
	display: block;
	font-weight: 700;
}

.enlite-ports__label span {
	opacity: 0.75;
}

.enlite-ports__note {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	opacity: 0.65;
}

/* Says whose photo this is when it is not this exact model. Kept quiet:
   it is a caption, not a disclaimer banner. */
.enlite-product__photo-note {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--enlite-onyx);
	opacity: 0.75;
}

.enlite-product__thumbs {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.enlite-product__thumbs li {
	width: 88px;
	border: 1px solid var(--enlite-stone);
}

.enlite-product__thumbs img {
	display: block;
	width: 100%;
	height: auto;
}

.enlite-product__eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--enlite-muted);
}

.enlite-product__eyebrow .enlite-mono {
	color: var(--enlite-amber-dark);
}

.enlite-product__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
}

.enlite-product__tagline {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	color: var(--enlite-muted);
}

.enlite-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.enlite-badges li {
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--enlite-stone);
	border-radius: 2px;
	font-family: var(--enlite-font-mono);
	font-size: 0.8125rem;
}

.enlite-provisional {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.25rem 0.625rem;
	background: var(--enlite-stone);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Buy area: one footprint for both states, so switching a product from
 * quote to cart never moves anything else on the page. */
.enlite-buy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	min-height: 11rem;
	margin: 0 0 1.25rem;
	padding: 1.25rem;
	background: var(--enlite-surface);
	border-left: 4px solid var(--enlite-amber);
}

.enlite-buy__price {
	margin: 0;
	font-family: var(--enlite-font-mono);
	font-size: 1.5rem;
	font-weight: 500;
}

/* Out of stock: the state that says "call us", not a dead end. */
.enlite-buy__stock {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 0.125rem 0.5rem;
	background: var(--enlite-onyx);
	color: var(--enlite-cream);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.enlite-buy--call .enlite-buy__price {
	font-size: 1.25rem;
	color: var(--enlite-muted);
}

.enlite-buy__note {
	margin: 0;
	color: var(--enlite-muted);
}

.enlite-buy__secondary {
	font-size: 0.9375rem;
	font-weight: 600;
}

.enlite-buy__help {
	margin: -0.75rem 0 1.25rem;
	font-size: 0.9375rem;
}

.enlite-buy__help a {
	display: inline-flex;
	align-items: center;
	min-height: var(--enlite-tap);
	font-weight: 600;
}

.enlite-buy .button,
.enlite-buy button[type="submit"] {
	align-self: flex-start;
	min-height: var(--enlite-tap);
	padding: 0.75rem 1.5rem;
	font-weight: 600;
}

/* Choose between (EN3S / EN3L). */
.enlite-choose {
	padding: 1rem 1.25rem;
	border: 1px solid var(--enlite-stone);
}

.enlite-choose__title {
	margin: 0 0 0.75rem;
	font-weight: 700;
}

.enlite-choose__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 0 0 0.75rem;
}

.enlite-choose__grid dt {
	font-weight: 600;
}

.enlite-choose__grid dt span {
	font-weight: 400;
	color: var(--enlite-muted);
}

.enlite-choose__grid dt a {
	display: inline-flex;
	align-items: center;
	min-height: var(--enlite-tap);
}

.enlite-choose__grid dd {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
}

.enlite-choose__plan {
	margin: 0;
	font-size: 0.875rem;
	color: var(--enlite-muted);
}

/* Sections. */
.enlite-section {
	margin: 0 0 var(--enlite-gap);
}

.enlite-section__title {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--enlite-amber);
	font-family: var(--enlite-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.enlite-overview__text {
	max-width: 65ch;
	font-size: 1.125rem;
}

.enlite-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.enlite-feature__icon img {
	width: 40px;
	height: 40px;
}

.enlite-feature__title {
	margin: 0.5rem 0 0.25rem;
	font-size: 1rem;
}

.enlite-feature__line {
	margin: 0;
	color: var(--enlite-muted);
}

.enlite-goodfor {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.enlite-goodfor a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--enlite-tap);
	padding: 0.25rem 0.75rem 0.25rem 0.25rem;
	border: 1px solid var(--enlite-stone);
	text-decoration: none;
}

.enlite-goodfor img {
	width: 40px;
	height: 40px;
}

/* Datasheet and Manual at the top: outlined, never amber (the buy button
 * owns the page's one amber button), glove-sized. */
.enlite-top-docs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.enlite-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--enlite-tap);
	padding: 0.5rem 1rem;
	border: 2px solid var(--enlite-onyx);
	color: var(--enlite-onyx);
	font-weight: 600;
	text-decoration: none;
}

.enlite-btn-outline:hover,
.enlite-btn-outline:focus-visible {
	background: var(--enlite-onyx);
	color: var(--enlite-cream);
}

.enlite-top-docs__type {
	font-size: 0.75rem;
	font-weight: 500;
}

/* Section bar: sticks under the top of the screen; one swipeable row on
 * phones rather than wrapping into a block. */
.enlite-section-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	margin: 0 0 var(--enlite-gap);
	background: var(--enlite-cream);
	border-bottom: 1px solid var(--enlite-stone);
}

.admin-bar .enlite-section-nav {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.enlite-section-nav ul {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.enlite-section-nav ul::-webkit-scrollbar {
	display: none;
}

.enlite-section-nav a {
	display: flex;
	align-items: center;
	min-height: var(--enlite-tap);
	padding: 0 0.75rem;
	border-bottom: 3px solid transparent;
	color: var(--enlite-onyx);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.enlite-section-nav a:hover,
.enlite-section-nav a:focus-visible {
	border-bottom-color: var(--enlite-amber);
}

/* In-page links land below the sticky bar, not under it. */
.enlite-section__title {
	scroll-margin-top: 4.5rem;
}

.admin-bar .enlite-section__title {
	scroll-margin-top: calc(4.5rem + 32px);
}

.enlite-application__diagram,
.enlite-dimensions__drawing {
	margin: 0 0 1rem;
	background: var(--enlite-surface);
}

.enlite-application__diagram {
	max-width: 56rem;
}

.enlite-order-table td.enlite-mono {
	white-space: nowrap;
}

.enlite-application__diagram img,
.enlite-dimensions__drawing img {
	display: block;
	width: 100%;
	height: auto;
}

.enlite-application__label,
.enlite-ordering__sub {
	margin: 1rem 0 0.5rem;
	font-family: var(--enlite-font-body);
	font-size: 1rem;
	font-weight: 700;
}

.enlite-also {
	margin-top: 1rem;
}

.enlite-dimensions__grid {
	display: grid;
	gap: 0 var(--enlite-gap);
}

@media (min-width: 900px) {
	.enlite-dimensions__grid {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}
}

.enlite-software__links {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
}

.enlite-order-table {
	width: 100%;
	border-collapse: collapse;
}

.enlite-order-table th,
.enlite-order-table td {
	padding: 0.5rem 1rem 0.5rem 0;
	border-bottom: 1px solid var(--enlite-stone);
	text-align: left;
	vertical-align: top;
}

.enlite-order-table th {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--enlite-muted);
}

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

.enlite-box__list li {
	display: grid;
	grid-template-columns: 3rem 1fr;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--enlite-stone);
}

.enlite-box__qty {
	color: var(--enlite-muted);
}

.enlite-box__only {
	margin-left: 0.5rem;
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--enlite-amber-dark);
}

/* Document rows: sized for a gloved thumb. */
.enlite-docs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.enlite-doc {
	display: grid;
	grid-template-columns: 3.5rem 1fr auto;
	align-items: center;
	gap: 0.75rem;
	min-height: 56px;
	padding: 0 0.75rem;
	border: 1px solid var(--enlite-stone);
	margin-bottom: 0.5rem;
	color: var(--enlite-onyx);
	text-decoration: none;
}

.enlite-doc__type {
	padding: 0.125rem 0.375rem;
	background: var(--enlite-onyx);
	color: var(--enlite-cream);
	font-size: 0.75rem;
	text-align: center;
}

.enlite-doc__title {
	font-weight: 600;
}

.enlite-doc__meta {
	font-size: 0.8125rem;
	color: var(--enlite-muted);
}

/* Specification tables: label | value, grouped. Two columns of groups on
 * wide screens; no sideways scrolling on a phone. */
.enlite-specs__note {
	margin: -0.5rem 0 1rem;
	font-size: 0.875rem;
	color: var(--enlite-muted);
}

.enlite-specs__groups {
	columns: 1;
	column-gap: var(--enlite-gap);
}

@media (min-width: 900px) {
	.enlite-specs__groups {
		columns: 2;
	}
}

.enlite-spec-table {
	width: 100%;
	margin: 0 0 1.25rem;
	border-collapse: collapse;
	break-inside: avoid;
}

.enlite-spec-table caption {
	padding: 0 0 0.375rem;
	font-weight: 700;
	text-align: left;
}

.enlite-spec-table th,
.enlite-spec-table td {
	padding: 0.5rem 0;
	border-top: 1px solid var(--enlite-stone);
	vertical-align: top;
	text-align: left;
}

.enlite-spec-table th {
	width: 45%;
	padding-right: 1rem;
	font-weight: 400;
	color: var(--enlite-muted);
}

.enlite-spec-table td {
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.enlite-description {
	max-width: 70ch;
}

.enlite-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.enlite-also {
	display: grid;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	background: var(--enlite-surface);
}

@media (min-width: 700px) {
	.enlite-also {
		grid-template-columns: 16rem 1fr;
	}
}

.enlite-also__label {
	margin: 0;
	font-weight: 700;
	text-transform: capitalize;
}

/* Home banner ([enlite_hero]) ---------------------------------------------
 * Text sits on the image so the first look says what Enlite does. The scrim
 * is what makes that text legible over any photograph, so it is not
 * decoration: cream on onyx at 14:1 where the text sits.
 *
 * Without JavaScript every slide is visible and stacked; the script adds
 * .is-interactive and shows one at a time.
 */
.enlite-hero-banner {
	position: relative;
	margin-bottom: 2.5rem;
	background: var(--enlite-ink-fixed);
	/* Width comes from the full-width group the shortcode sits in (see
	 * content/pages/home.html): a viewport-width trick cannot escape the
	 * wrappers Kadence clips content with. */
}

/* The image fills the window; the text still lines up with the page's
 * content column rather than the window edge. */
@media (min-width: 900px) {
	.enlite-hero-banner__text {
		margin-left: max(1rem, calc((100vw - var(--global-content-width, 1290px)) / 2));
	}
}

/* The banner sits flush at the top of the page, so it cancels the padding
 * of the wrapper it starts in. */
.home .enlite-hero-full {
	margin-top: -2rem;
}

/* The banner is the top of the page: no gap above it. Kadence pads several
 * nested wrappers, so each one is cleared on the front page only. */
.home .content-area,
.home .site-container,
.home .entry-content,
.home .entry-content-wrap,
.home .content-wrap {
	padding-top: 0;
}

.home .entry-content > .enlite-hero-banner:first-child {
	margin-top: 0;
}

/* Specific enough to beat the theme's list and content rules, which would
 * otherwise inset the slides inside the full-width banner. */
.enlite-hero-banner .enlite-hero-banner__slides,
.enlite-hero-banner .enlite-hero-banner__slide {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.enlite-hero-banner .enlite-hero-banner__image {
	max-width: none;
}

.enlite-hero-banner__slide {
	position: relative;
	display: grid;
}

.enlite-hero-banner.is-interactive .enlite-hero-banner__slide {
	display: none;
}

.enlite-hero-banner.is-interactive .enlite-hero-banner__slide.is-current {
	display: grid;
}

.enlite-hero-banner__image {
	grid-area: 1 / 1;
	width: 100%;
	height: clamp(20rem, 52vw, 34rem);
	object-fit: cover;
	object-position: center;
}

.enlite-hero-banner__text {
	grid-area: 1 / 1;
	align-self: end;
	position: relative;
	padding: clamp(1.25rem, 4vw, 3rem);
	padding-top: 6rem;
	color: var(--enlite-light-fixed);
	background: linear-gradient(to top, rgba(32, 33, 36, 0.92) 0%, rgba(32, 33, 36, 0.82) 45%, rgba(32, 33, 36, 0) 100%);
}

@media (min-width: 900px) {
	.enlite-hero-banner__text {
		align-self: center;
		max-width: 34rem;
		margin: 0 0 0 clamp(1rem, 4vw, 3rem);
		padding: 2rem;
		background: rgba(32, 33, 36, 0.86);
		border-left: 4px solid var(--enlite-amber);
	}
}

.enlite-hero-banner__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--enlite-amber);
}

.enlite-hero-banner__headline {
	margin: 0 0 0.75rem;
	font-family: var(--enlite-font-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--enlite-light-fixed);
}

.enlite-hero-banner__subhead {
	margin: 0 0 1.25rem;
	max-width: 42ch;
	font-size: 1.0625rem;
	color: var(--enlite-light-fixed);
}

/* The page's one amber button. */
.enlite-hero-banner__button {
	display: inline-flex;
	align-items: center;
	min-height: var(--enlite-tap);
	padding: 0.75rem 1.5rem;
	background: var(--enlite-amber);
	color: var(--enlite-ink-fixed);
	font-weight: 700;
	text-decoration: none;
}

.enlite-hero-banner__button:hover,
.enlite-hero-banner__button:focus-visible {
	background: var(--enlite-light-fixed);
	color: var(--enlite-ink-fixed);
}

.enlite-hero-banner__controls {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem clamp(0.5rem, 2vw, 1rem);
	background: var(--enlite-ink-fixed);
}

.enlite-hero-banner__arrow,
.enlite-hero-banner__pause {
	min-width: var(--enlite-tap);
	min-height: var(--enlite-tap);
	padding: 0 0.75rem;
	border: 0;
	background: transparent;
	color: var(--enlite-light-fixed);
	font-size: 1.25rem;
	cursor: pointer;
}

.enlite-hero-banner__pause {
	margin-left: auto;
	font-size: 0.875rem;
	font-weight: 600;
}

.enlite-hero-banner__arrow:hover,
.enlite-hero-banner__pause:hover,
.enlite-hero-banner__arrow:focus-visible,
.enlite-hero-banner__pause:focus-visible {
	color: var(--enlite-amber);
}

.enlite-hero-banner__dots {
	display: flex;
	gap: 0.5rem;
}

.enlite-hero-banner__dots button {
	width: 44px;
	height: var(--enlite-tap);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.enlite-hero-banner__dots button::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: var(--enlite-muted);
}

.enlite-hero-banner__dots button[aria-selected="true"]::before {
	background: var(--enlite-amber);
}

/* Home page --------------------------------------------------------------- */

/* The front page opens with the hero, not a "Home" title band. */
.home .entry-hero-container,
.home .page-hero-section,
.home .entry-hero {
	display: none;
}

/* One plain sentence under the banner: what Enlite does, for a visitor who
 * arrived mid-rotation. */
.enlite-strapline {
	max-width: 62ch;
	margin: 0 0 2.5rem;
	font-size: 1.125rem;
	color: var(--enlite-muted);
}

.enlite-hero {
	margin-bottom: 3rem;
}

.enlite-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}

.enlite-hero__headline {
	margin: 1.5rem 0 0.75rem;
	font-size: clamp(1.875rem, 5vw, 3rem);
	line-height: 1.1;
}

.enlite-hero__subhead {
	max-width: 46ch;
	font-size: 1.125rem;
	color: var(--enlite-muted);
}

/* Cards: solutions and products. Six across on a wide screen, stacking to
 * one on a phone, all six reachable without a carousel. */
.enlite-cards--solutions,
.enlite-cards--products,
.enlite-cards--tools {
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 600px) {
	.enlite-cards--solutions,
	.enlite-cards--products,
	.enlite-cards--tools {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Three across, so six cards read as two tidy rows rather than five and one. */
@media (min-width: 900px) {
	.enlite-cards--solutions,
	.enlite-cards--products,
	.enlite-cards--tools {
		grid-template-columns: repeat(3, 1fr);
	}
}

.enlite-card--tool,
.enlite-families .wp-block-column {
	border: 1px solid var(--enlite-stone);
}

.enlite-card--tool a {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1rem 0;
	color: var(--enlite-onyx);
	text-decoration: none;
}

.enlite-card--tool img {
	width: 100%;
	height: auto;
	background: var(--enlite-surface);
}

.enlite-families .wp-block-column {
	padding: 1rem;
}

.enlite-families h3 {
	margin-top: 0;
	font-size: 1.0625rem;
}

.enlite-card--solution,
.enlite-card--product {
	border: 1px solid var(--enlite-stone);
	background: var(--enlite-cream);
}

.enlite-card--solution a,
.enlite-card--product a {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	color: var(--enlite-onyx);
	text-decoration: none;
}

.enlite-card--solution a:hover,
.enlite-card--solution a:focus-visible,
.enlite-card--product a:hover,
.enlite-card--product a:focus-visible {
	background: var(--enlite-surface);
}

.enlite-card__icon {
	width: 48px;
	height: 48px;
}

/* One frame for every product, whatever shape the photo arrives in.
   The manufacturer's shots are cropped differently from each other - one
   741x1024, its sibling 800x900 - so scaling them to the card width made
   the same size switch look bigger in one card than the next. A fixed box
   with the image contained inside it keeps the row honest. */
.enlite-card--product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--enlite-surface);
	padding: 0.5rem;
}

/* A keyed-out render needs no plate of its own: it sits on the card. */
.enlite-card--product img[src*="enlite-turntable"] {
	background: transparent;
}

.enlite-card__model {
	font-size: 0.8125rem;
	color: var(--enlite-amber-dark);
}

.enlite-card__title {
	font-weight: 700;
	line-height: 1.25;
}

/* The port mix on a card. Quiet enough to sit under the heading without
   competing with it, specific enough to tell two cards apart when they
   share a family photo. */
.enlite-card__ports {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--enlite-onyx);
	opacity: 0.8;
}

.enlite-card__line {
	margin: 0;
	padding: 0 1rem 1rem;
	font-size: 0.9375rem;
	color: var(--enlite-muted);
}

/* Three claims: a number, then a short line. */
.enlite-claims {
	margin-bottom: 2.5rem;
}

.enlite-claim__figure {
	margin: 0 0 0.25rem;
	font-family: var(--enlite-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--enlite-amber-dark);
}

.enlite-waypoint img,
.enlite-buy-or-ask {
	margin-bottom: 2rem;
}

.enlite-graphic {
	margin: 0 0 1rem;
}

.enlite-graphic img {
	display: block;
	width: 100%;
	height: auto;
}

/* Quote / contact form ([enlite_quote_form]) -------------------------------
 * Short, and works one-handed on a phone (brief 5): one field per line, big
 * targets, real labels rather than placeholder text.
 */
.enlite-form {
	max-width: 36rem;
	margin: 0 0 2rem;
	padding: clamp(1rem, 3vw, 1.75rem);
	background: var(--enlite-surface);
	border-left: 4px solid var(--enlite-amber);
}

.enlite-form__field {
	margin: 0 0 1rem;
}

.enlite-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.enlite-form__required {
	color: var(--enlite-amber-dark);
}

.enlite-form__help {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	color: var(--enlite-muted);
}

.enlite-form input[type="text"],
.enlite-form input[type="email"],
.enlite-form input[type="tel"],
.enlite-form input[type="url"],
.enlite-form textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--enlite-subtle);
	background: var(--enlite-cream);
	font-size: 1rem; /* 16px, so phones do not zoom on focus. */
}

.enlite-form input:focus-visible,
.enlite-form textarea:focus-visible {
	outline: 3px solid var(--enlite-amber-dark);
	outline-offset: 1px;
}

.enlite-form__field.has-error input,
.enlite-form__field.has-error textarea {
	border-color: var(--enlite-alert, #b32d2e);
	border-width: 2px;
}

.enlite-form__error {
	padding: 0.75rem 1rem;
	border-left: 4px solid #b32d2e;
	background: var(--enlite-cream);
	font-weight: 600;
}

.enlite-form__about {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

.enlite-form__privacy {
	font-size: 0.875rem;
	color: var(--enlite-muted);
}

.enlite-form__submit {
	min-height: var(--enlite-tap);
	padding: 0.75rem 1.5rem;
	background: var(--enlite-amber);
	border: 0;
	color: var(--enlite-onyx);
	font-weight: 700;
	cursor: pointer;
}

.enlite-form__submit:hover,
.enlite-form__submit:focus-visible {
	background: var(--enlite-amber-dark);
	color: var(--enlite-cream);
}

/* The spam trap: away from everyone, including screen readers. */
.enlite-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.enlite-form__sent {
	max-width: 36rem;
	margin: 0 0 2rem;
	padding: 1.25rem;
	background: var(--enlite-surface);
	border-left: 4px solid var(--enlite-amber);
}

/* Tool frame --------------------------------------------------------------
 * The container a planning tool sits in when it shares a page. A tool is
 * never assumed to own the viewport: this works from a phone to a wide
 * column beside text (brief 5, and 6.3 "Fixed"). Container queries let the
 * tool's own layout respond to the frame rather than the window.
 */
.enlite-tool-frame {
	container-type: inline-size;
	margin: 0 0 var(--enlite-gap, 2rem);
	padding: clamp(0.75rem, 2vw, 1.5rem);
	background: var(--enlite-surface);
	border-top: 4px solid var(--enlite-amber);
}

.enlite-tool-frame > * {
	max-width: 100%;
}

/* Nothing inside a tool may force the page sideways. */
.enlite-tool-frame img,
.enlite-tool-frame canvas,
.enlite-tool-frame table {
	max-width: 100%;
}

/* Collapsible questions: tap to open, never hover (brief 6.3). */
/* Documentation table. Every document Enlite publishes, read off the
   products themselves, so it cannot go stale. The filter box is hidden
   until the script that drives it has run. */
.enlite-documents__filter {
	display: none;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 22rem;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
}

.enlite-documents.is-filterable .enlite-documents__filter {
	display: flex;
}

.enlite-documents__filter input {
	min-height: 48px; /* Tap target, brief section 5. */
	padding: 0 0.75rem;
	border: 1px solid var(--enlite-stone);
	background: #fff;
	font: inherit;
}

.enlite-documents__count {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.enlite-documents__table {
	width: 100%;
	border-collapse: collapse;
}

.enlite-documents__table th,
.enlite-documents__table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--enlite-stone);
	text-align: left;
	vertical-align: top;
}

.enlite-documents__table th {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--enlite-amber-dark);
}

.enlite-documents__name {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.75;
}

.enlite-documents__table a {
	display: inline-block;
	min-height: 44px;
	line-height: 1.6;
}

.enlite-documents__table td span {
	opacity: 0.7;
}

/* On a phone the table becomes stacked rows: three columns of file names
   at 390px is unreadable. */
@media (max-width: 600px) {
	.enlite-documents__table thead {
		display: none;
	}
	.enlite-documents__table tr {
		display: block;
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--enlite-stone);
	}
	.enlite-documents__table td {
		display: block;
		padding: 0.125rem 0;
		border: 0;
	}
}

.enlite-faq {
	border-bottom: 1px solid var(--enlite-stone);
}

.enlite-faq summary {
	display: flex;
	align-items: center;
	min-height: var(--enlite-tap);
	padding: 0.5rem 0;
	font-weight: 600;
	cursor: pointer;
}

.enlite-faq summary:hover,
.enlite-faq summary:focus-visible {
	color: var(--enlite-amber-dark);
}

.enlite-faq p {
	max-width: 65ch;
	color: var(--enlite-muted);
}

.enlite-lead {
	max-width: 60ch;
	font-size: 1.125rem;
}

/* Compare radios ([enlite_compare], inc/compare.php) ----------------------
 * The row labels stay put while the table scrolls sideways inside its own
 * box; the page itself never scrolls horizontally. */
.enlite-compare [hidden] {
	display: none !important;
}

.enlite-compare__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1rem;
}

.enlite-compare__controls fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.enlite-compare__pick legend {
	float: left;
	margin-right: 0.5rem;
	font-weight: 600;
}

/* Family switch: segmented, onyx when selected. */
.enlite-compare__family label,
.enlite-compare__pick label {
	position: relative;
}

.enlite-compare__family input,
.enlite-compare__pick input {
	position: absolute;
	opacity: 0;
}

.enlite-compare__family span,
.enlite-compare__pick span {
	display: inline-flex;
	align-items: center;
	min-height: var(--enlite-tap);
	padding: 0 1rem;
	border: 2px solid var(--enlite-onyx);
	cursor: pointer;
	font-weight: 600;
}

.enlite-compare__family input:checked + span {
	background: var(--enlite-onyx);
	color: var(--enlite-cream);
}

.enlite-compare__pick span {
	padding: 0 0.75rem;
	border-color: var(--enlite-stone);
	font-weight: 500;
}

.enlite-compare__pick input:checked + span {
	border-color: var(--enlite-onyx);
	background: var(--enlite-surface);
	box-shadow: inset 0 -3px 0 var(--enlite-amber);
}

.enlite-compare__family input:focus-visible + span,
.enlite-compare__pick input:focus-visible + span,
.enlite-compare__diff input:focus-visible {
	outline: 3px solid var(--enlite-amber-dark);
	outline-offset: 2px;
}

.enlite-compare__diff {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--enlite-tap);
}

.enlite-compare__diff input {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--enlite-onyx);
}

.enlite-compare__scroll {
	overflow-x: auto;
	border: 1px solid var(--enlite-stone);
}

.enlite-compare__table {
	width: 100%;
	min-width: 36rem;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
}

.enlite-compare.is-narrow .enlite-compare__table {
	min-width: 0;
}

.enlite-compare__table th,
.enlite-compare__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--enlite-stone);
	text-align: left;
	vertical-align: top;
}

.enlite-compare__table td {
	font-size: 0.875rem;
	min-width: 8rem;
}

/* Row labels pinned while the columns scroll. */
.enlite-compare__table tbody th[scope="row"],
.enlite-compare__corner {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 9rem;
	max-width: 12rem;
	background: var(--enlite-cream);
	font-weight: 400;
	color: var(--enlite-muted);
	box-shadow: 1px 0 0 var(--enlite-stone);
}

.enlite-compare__table thead th {
	vertical-align: bottom;
	background: var(--enlite-surface);
	border-bottom: 2px solid var(--enlite-amber);
}

.enlite-compare__thumb {
	display: block;
	width: 72px;
	height: auto;
	margin-bottom: 0.375rem;
}

.enlite-compare__model {
	display: block;
	font-size: 1rem;
	font-weight: 500;
}

.enlite-compare__name {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--enlite-muted);
}

.enlite-compare__group th {
	padding-top: 1rem;
	background: var(--enlite-cream);
	font-weight: 700;
	color: var(--enlite-onyx);
}

.enlite-compare__table td.is-empty {
	/* "Not published" is information, not decoration, so it has to clear
	   4.5:1. --enlite-subtle is a border colour and manages 3.3:1 on the
	   dark ground. */
	color: var(--enlite-muted);
}

/* Phones: two radios side by side must fit without scrolling. */
@media (max-width: 699px) {
	.enlite-compare__table th,
	.enlite-compare__table td {
		padding: 0.5rem 0.5rem;
		font-size: 0.8125rem;
	}
	.enlite-compare__table tbody th[scope="row"],
	.enlite-compare__corner {
		min-width: 6.5rem;
		max-width: 7.5rem;
	}
	.enlite-compare.is-narrow .enlite-compare__table td {
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.enlite-compare__thumb {
		width: 48px;
	}
}

.enlite-compare__empty {
	max-width: 42rem;
	padding: 1.25rem;
	background: var(--enlite-surface);
	border-left: 4px solid var(--enlite-amber);
}

.enlite-compare__legend {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--enlite-muted);
}

/* Layout preview (?enlite_layout=1): where copy will go. Editors only. */
.enlite-slot-empty {
	display: block;
	padding: 0.75rem 1rem;
	border: 2px dashed var(--enlite-amber);
	background: rgba(253, 155, 30, 0.08);
	color: var(--enlite-amber-dark);
	font-family: var(--enlite-font-mono);
	font-size: 0.8125rem;
	list-style: none;
}

/* Print ------------------------------------------------------------------
 * Installers print planner results. Amber disappears on a mono printer, so
 * print is onyx on white.
 */
@media print {
	:root {
		--global-palette1: #202124;
		--global-palette2: #202124;
		--global-palette8: #ffffff;
		--global-palette9: #ffffff;
	}
}