/* Galaxi — components WordPress needs that the static handoff did not have.
   Loads after both handoff stylesheets, before fixes.css.

   Deliberately small. The previous build's equivalent file grew to 1,896 lines
   because it re-declared components the handoff already owned, and those
   duplicate declarations were the direct cause of several layout regressions
   (a collapsed nested grid, a 700px-tall tick icon, labels stacked inside
   their inputs). Nothing here re-styles a handoff component. It covers only
   what has no handoff equivalent:

     - prose rendered by the_content(): legal pages and editor-authored pages
     - breadcrumbs, archive pagination, the 404 view, single posts
     - the solution / buyer-type / brand detail pages, assembled from handoff
       components with only the gaps filled in
     - image placeholders, for a fresh install with nothing uploaded yet
     - the admin bar's effect on a fixed header
*/

/* ---------------------------------------------------------------- Layout */
.gx-main { display: block; }
.gx-main:focus { outline: none; }

/* The header is fixed, so the admin bar would sit on top of it. */
body.admin-bar .gx-nav { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .gx-nav { top: 46px; }
}

/* --------------------------------------------------------- Image fallback
   The handoff shows photos as striped placeholder divs. On a real install a
   photo is either uploaded or it is not, so both states need to look
   deliberate. .gx-ph is the "nothing uploaded yet" state: a flat tinted panel
   with a label, never a broken image icon or a collapsed box. */
.gx-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 220px;
	padding: 24px;
	background:
		repeating-linear-gradient(
			135deg,
			var(--gx-violet-50) 0 12px,
			var(--gx-haze) 12px 24px
		);
	color: var(--gx-muted);
	font: 500 12px/1.4 var(--gx-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

/* ---------------------------------------------------------- Banner variant
   The handoff's .gx-phero holds its body to 45% of the width, because every
   designed page puts a photograph in the other 55%. The views WordPress
   generates — legal documents, posts, archives, 404 — have no photograph
   unless someone sets a banner image, so on those the text is the whole band
   and 45% would leave half the banner empty. This is the only thing that
   changes; the padding, colours and focus treatment stay as the handoff set
   them. */
.gx-phero--plain .gx-phero__body { max-width: 68ch; }

/* ------------------------------------------------------------ Breadcrumbs */
.gx-crumbs {
	padding: 20px 0 0;
	font-size: var(--gx-fs-small);
	color: var(--gx-muted);
}

.gx-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gx-crumbs__item { display: flex; align-items: center; gap: 10px; }

.gx-crumbs__item + .gx-crumbs__item::before {
	content: "/";
	color: var(--gx-border-input);
	/* Decorative, and the list is already a <nav> with an accessible name. */
}

.gx-crumbs a { color: var(--gx-indigo); text-decoration: none; }
.gx-crumbs a:hover { text-decoration: underline; }
.gx-crumbs [aria-current="page"] { color: var(--gx-ink); }

/* ------------------------------------------------------------------ Prose
   Everything the block editor and the legal pages emit. Scoped to .gx-prose
   so it can never reach a template-driven section. */
.gx-prose {
	max-width: 74ch;
	color: var(--gx-slate);
	font-size: var(--gx-fs-body);
	line-height: 1.7;
}

.gx-prose > * + * { margin-top: 1.1em; }

.gx-prose h2,
.gx-prose h3,
.gx-prose h4 {
	margin-top: 2em;
	color: var(--gx-ink);
	font-family: var(--gx-font-display);
	font-weight: 400;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.gx-prose h2 { font-size: 30px; }
.gx-prose h3 { font-size: var(--gx-fs-h3); }
.gx-prose h4 { font-size: 17px; font-weight: 500; }

.gx-prose h2:first-child,
.gx-prose h3:first-child { margin-top: 0; }

.gx-prose a {
	color: var(--gx-indigo);
	text-underline-offset: 3px;
}

.gx-prose a:hover { text-decoration-thickness: 2px; }

.gx-prose ul,
.gx-prose ol { padding-left: 1.4em; }
.gx-prose li + li { margin-top: 0.5em; }

.gx-prose strong { color: var(--gx-ink); font-weight: 600; }

.gx-prose blockquote {
	margin-left: 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--gx-violet);
	color: var(--gx-ink);
	font-style: normal;
}

.gx-prose code,
.gx-prose kbd {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--gx-haze);
	font-family: var(--gx-font-mono);
	font-size: 0.9em;
}

.gx-prose pre {
	padding: 20px;
	overflow-x: auto;
	border-radius: var(--gx-radius-card);
	background: var(--gx-space);
	color: var(--gx-space-body, #9BA3B8);
}

.gx-prose pre code { padding: 0; background: none; color: inherit; }

.gx-prose hr {
	height: 1px;
	margin: 2.4em 0;
	border: 0;
	background: var(--gx-border);
}

/* Tables in prose: the legal pages use them, and they must not force the
   page sideways on a phone. */
.gx-prose .gx-table-wrap { overflow-x: auto; }

.gx-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--gx-fs-small);
}

.gx-prose th,
.gx-prose td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--gx-border);
	text-align: left;
	vertical-align: top;
}

.gx-prose th {
	color: var(--gx-ink);
	font-family: var(--gx-font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gx-prose img,
.gx-prose iframe { max-width: 100%; border-radius: var(--gx-radius-card); }
.gx-prose img { height: auto; }

.gx-prose figure { margin: 2em 0; }

.gx-prose figcaption {
	margin-top: 10px;
	color: var(--gx-muted);
	font-size: var(--gx-fs-small);
}

/* Block editor alignment classes. */
.gx-prose .aligncenter { display: block; margin-inline: auto; text-align: center; }
.gx-prose .alignleft { float: left; margin: 0 24px 16px 0; }
.gx-prose .alignright { float: right; margin: 0 0 16px 24px; }
.gx-prose .alignwide { max-width: min(100%, 1040px); }
.gx-prose .alignfull { max-width: none; }

@media (max-width: 600px) {
	.gx-prose .alignleft,
	.gx-prose .alignright { float: none; margin: 1.1em 0; }
}

/* A boxed aside used by the legal pages for "last updated" and contact notes. */
.gx-note {
	margin: 0 0 40px;
	padding: 20px 24px;
	border: 1px solid var(--gx-border);
	border-left: 3px solid var(--gx-violet);
	border-radius: var(--gx-radius-card);
	background: var(--gx-haze);
	color: var(--gx-slate);
	font-size: var(--gx-fs-small);
}

.gx-note :first-child { margin-top: 0; }
.gx-note :last-child { margin-bottom: 0; }

/* ------------------------------------------------- Detail page: shared bits
   The solution, buyer-type and brand detail pages are built from handoff
   components (.gx-phero, .gx-split, .gx-ticks, .gx-section, .gx-cta). Only
   these three pieces have no handoff equivalent. */

/* A two-column list of short facts, used for specifications and terms. */
.gx-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 40px;
	margin: 0;
	padding: 0;
}

.gx-facts__row { min-width: 0; }

.gx-facts__key {
	margin: 0 0 4px;
	color: var(--gx-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gx-facts__val {
	margin: 0;
	color: var(--gx-ink);
	font-size: var(--gx-fs-body);
}

@media (max-width: 600px) {
	.gx-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* The brands index: the same tile as the scrolling wall, laid out as a static
   grid. The handoff only ever draws brand tiles inside a marquee row, which is
   a flex track of fixed-width tiles — no use at all for an A-to-Z index page.
   The tile itself (.gx-brand, its border, its logo sizing) is still the
   handoff's; this only arranges them and lets a tile fill its column. */
.gx-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gx-brand-grid .gx-brand { width: 100%; }

/* A row of sibling links at the foot of a detail page. */
.gx-siblings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gx-sibling {
	position: relative;
	display: block;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-radius-card);
	background: var(--gx-white);
	color: var(--gx-ink);
	text-decoration: none;
	transition: transform var(--gx-dur-sm) var(--gx-ease),
		box-shadow var(--gx-dur-sm) var(--gx-ease);
}

.gx-sibling:hover {
	transform: translateY(-2px);
	box-shadow: var(--gx-shadow-hover);
}

.gx-sibling__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--gx-indigo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.gx-sibling__title {
	margin: 0;
	font-family: var(--gx-font-display);
	font-weight: 500;
	font-size: var(--gx-fs-h3);
	letter-spacing: -0.02em;
}

@media (max-width: 1023px) {
	.gx-siblings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.gx-siblings { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- Pagination */
.gx-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 64px;
}

.gx-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--gx-border-input);
	border-radius: var(--gx-radius-button);
	color: var(--gx-ink);
	font-size: var(--gx-fs-small);
	text-decoration: none;
}

.gx-pager .page-numbers:hover { border-color: var(--gx-ink); }

.gx-pager .page-numbers.current {
	border-color: var(--gx-ember);
	background: var(--gx-ember);
	color: var(--gx-white);
}

.gx-pager .page-numbers.dots { border-color: transparent; }

/* -------------------------------------------------------------------- 404 */
.gx-404 { padding: 140px 0 var(--gx-section-pad); text-align: center; }

.gx-404__code {
	margin: 0 0 20px;
	color: var(--gx-violet);
	font: 400 76px/1 var(--gx-font-mono);
	letter-spacing: -0.02em;
}

.gx-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

/* ----------------------------------------------------------- Single post */
.gx-post__meta {
	margin: 0 0 40px;
	color: var(--gx-muted);
	font-size: var(--gx-fs-small);
}

/* -------------------------------------------------------- Newsletter form
   Small, and only in the footer. The handoff footer has four link columns and
   no signup, so if the option is switched on this is what renders. */
.gx-subscribe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.gx-subscribe__field {
	flex: 1 1 180px;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--gx-space-rule, rgba(201, 204, 232, 0.35));
	border-radius: var(--gx-radius-button);
	background: rgba(255, 255, 255, 0.06);
	color: var(--gx-white);
	font-family: var(--gx-font-body);
	font-size: var(--gx-fs-small);
}

.gx-subscribe__field::placeholder { color: var(--gx-space-body, #9BA3B8); }

.gx-subscribe__field:focus-visible {
	outline: 3px solid var(--gx-white);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ Print */
@media print {
	.gx-nav,
	.gx-cta,
	.gx-particles,
	.gx-motion-toggle,
	.gx-brands,
	.gx-skip-link { display: none !important; }

	.gx-main { padding-top: 0 !important; }

	.gx-prose a::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ------------------------------------------------- Aliases and utilities
   The handoff named its utilities .gx-visually-hidden and its headings
   .gx-h2. Several theme files, the nav walker and the accessibility helpers
   were written against the previous build's names. Aliasing is safer than
   renaming across 50 files, and it means a future handoff revision that adds
   its own .gx-sr-only does not silently collide. */
.gx-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gx-sr-only--focusable:focus,
.gx-sr-only--focusable:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

.gx-link { color: var(--gx-indigo); text-underline-offset: 3px; }
.gx-link:hover { text-decoration-thickness: 2px; }

.gx-logo-img { display: block; width: auto; height: 100%; }

/* Heading sizes the handoff only defined for h2. */
.gx-h1 {
	margin: 0 0 20px;
	color: var(--gx-ink);
	font-family: var(--gx-font-display);
	font-weight: 300;
	font-size: var(--gx-fs-h1);
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.gx-h3 {
	margin: 0 0 10px;
	color: var(--gx-ink);
	font-family: var(--gx-font-display);
	font-weight: 500;
	font-size: var(--gx-fs-h3);
	letter-spacing: -0.02em;
}

/* Surface modifier in the previous build's naming. */
.gx-section--white { background: var(--gx-white); }

/* ------------------------------------------- Simple page and archive head
   Used by index.php, archive.php, single.php, 404.php and page-faq.php —
   views with no bespoke design in the handoff. Deliberately plain: a banner
   band, a heading, a lead. */
.gx-page__head {
	padding: calc(var(--gx-nav-h) + 72px) 0 56px;
	background: var(--gx-haze);
	border-bottom: 1px solid var(--gx-border);
}

.gx-page__head .gx-lead { max-width: 62ch; margin-bottom: 0; }

.gx-page__hero { margin-bottom: 40px; }
.gx-page__hero img { width: 100%; height: auto; border-radius: var(--gx-radius-card); }

.gx-body { padding: var(--gx-section-pad) 0; }

/* ------------------------------------------------------- Listing cards
   Post and archive items. Same treatment as .gx-cat so a blog listing does
   not look like it came from a different site. */
.gx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-radius-card);
	background: var(--gx-white);
	transition: transform var(--gx-dur-sm) var(--gx-ease),
		box-shadow var(--gx-dur-sm) var(--gx-ease);
}

.gx-card:hover { transform: translateY(-2px); box-shadow: var(--gx-shadow-hover); }

.gx-card__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gx-haze); }
.gx-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.gx-card > :not(.gx-card__photo) { padding: 0 24px; }
.gx-card > :not(.gx-card__photo):first-child { padding-top: 24px; }
.gx-card > :not(.gx-card__photo):last-child { padding-bottom: 24px; }

/* --------------------------------------------------- Previous / next post */
.gx-postnav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--gx-border);
}

.gx-postnav a { color: var(--gx-indigo); font-size: var(--gx-fs-small); }

/* ---------------------------------------------------- Nav disclosure button
   The accessible submenu toggle the nav walker emits. */
.gx-nav__disclosure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--gx-radius-button);
	background: none;
	color: inherit;
	cursor: pointer;
}

.gx-nav__disclosure::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.gx-nav__disclosure[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

@media (pointer: coarse) {
	.gx-nav__disclosure { width: 48px; min-width: 48px; height: 48px; }
}

/* --------------------------------------------------------------- Honeypot
   Hidden from sight AND from assistive technology, but not with display:none
   or hidden — some bots skip those, which defeats the point. Off-canvas keeps
   it in the form for anything that fills every field it finds. */
.gx-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A brand with no logo uploaded falls back to its name as text. */
.gx-brand__text {
	padding: 0 12px;
	color: var(--gx-muted);
	font: 500 13px/1.2 var(--gx-font-body);
	text-align: center;
}

/* ------------------------------------------------------ Photo placeholders
   The handoff styles .gx-phero__placeholder and .gx-photo__placeholder for its
   two placeholder contexts but has no rule for a category card, whose
   .gx-cat__media paints the fill and centres its child. Same treatment as the
   other two so all three read as one deliberate empty state. */
.gx-cat__placeholder {
	padding: 6px 10px;
	border-radius: var(--gx-radius-button);
	background: var(--gx-white);
	color: var(--gx-muted);
	font: 400 var(--gx-fs-small)/1.3 var(--gx-font-mono);
	text-align: center;
}