/**
 * Infoplex signature components.
 *
 * Ported from the Xelpofni theme (assets/css/main.css). Only the treatments
 * theme.json cannot express live here — everything colour/type/spacing related
 * is a token in theme.json and is referenced through --wp--preset-* below so
 * there is a single source of truth.
 *
 * Source of truth note: where DESIGN.md and main.css disagree, main.css wins.
 * The primary button is navy-on-cyan, not white-on-cyan — white on #21b8f4 is
 * ~2.4:1 and fails WCAG AA; navy is ~7.8:1.
 */

/* ==========================================================================
   Font rendering
   Xelpofni and the ipx theme on support.local both set grayscale smoothing on
   body. Without it macOS falls back to subpixel antialiasing, which thickens
   strokes and makes identical weights read noticeably bolder than the sibling
   sites. This is a rendering match, not a weight change — the wordmark is 700
   either way.
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Focus — AA-safe by context
   The darker cyan (--primary) clears the 3:1 focus-indicator floor on the
   light canvas; the bright cyan does not. On navy bands the reverse is true.
   ========================================================================== */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.has-navy-deep-background-color :focus-visible,
.has-navy-darkest-background-color :focus-visible,
.infoplex-band--navy :focus-visible {
	outline-color: var(--wp--preset--color--secondary);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: scale(0.97);
}

/* Outline variant — navy contexts only, per the design system. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

/* ==========================================================================
   Inputs
   1.5px stroke, 4px radius, cyan on focus, no glow.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea,
.wp-block-search__input {
	padding: 12px 16px;
	border: 1.5px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--radius--input);
	background: #fff;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--system-body);
	font-size: 15px;
	transition: border-color 0.2s;
	outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--secondary);
}

textarea {
	resize: vertical;
	min-height: 120px;
}

/* Drop the platform control and draw our own chevron so selects sit on the
   same 1.5px border and 4px radius as the text inputs. Extra right padding
   keeps the longest option clear of the chevron. */
select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2303245c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	cursor: pointer;
}

/* ==========================================================================
   Navigation — the one signature motion
   A cyan underline grows 0 -> 100% on hover.
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: var(--wp--preset--color--secondary);
	transition: width 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
}

/* The submenu is a panel, not a nav row — no underline motion inside it. */
.wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* ==========================================================================
   Panel Cast — the single shadow in the system
   Structural, not decorative. Reserved for tinted heading panels.
   ========================================================================== */

.infoplex-panel {
	border-radius: var(--wp--custom--radius--card);
	padding: 48px 40px;
	border: 1px solid rgba(33, 184, 244, 0.28);
	box-shadow: var(--wp--custom--shadow--panel-cast);
	background:
		/* soft light sheen, upper-left */
		radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, 0.5) 0, transparent 45%),
		/* translucent cyan tint over the light section */
		linear-gradient(135deg, rgba(33, 184, 244, 0.28) 0%, rgba(33, 184, 244, 0.1) 55%, rgba(33, 184, 244, 0.05) 100%);
}

/* Same panel inside a navy band — the cast is deepened so it still reads. */
.infoplex-band--navy .infoplex-panel,
.has-navy-deep-background-color .infoplex-panel {
	box-shadow: var(--wp--custom--shadow--panel-cast-on-navy);
	background:
		radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, 0.12) 0, transparent 45%),
		linear-gradient(135deg, rgba(33, 184, 244, 0.3) 0%, rgba(33, 184, 244, 0.1) 55%, rgba(33, 184, 244, 0.04) 100%);
}

/* ==========================================================================
   Wordmark + eyebrow label
   ========================================================================== */

/* The lowercase wordmark. Ported from .nav-logo in the Xelpofni theme:
   700 weight, 30px, -0.01em, always lowercase. "info" takes the surrounding
   colour (white on the navy header), "plex" is always Signal Cyan. */
.infoplex-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: lowercase;
	color: #fff;
}

.infoplex-wordmark a {
	color: inherit;
	text-decoration: none;
}

.infoplex-wordmark__accent {
	color: var(--wp--preset--color--secondary);
}

/* Size variants, matching the source theme's modifiers. */
.infoplex-wordmark--sm { font-size: 18px; }
.infoplex-wordmark--lg { font-size: 28px; }
.infoplex-wordmark--xl { font-size: clamp(32px, 4vw, 44px); }

/* The small uppercase section eyebrow. Cyan text on light must use the AA
   cyan (--primary), never the bright --secondary. */
.infoplex-subhead {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* On navy the bright cyan is correct — it reads ~7:1 there. */
.infoplex-band--navy .infoplex-subhead,
.has-navy-deep-background-color .infoplex-subhead {
	color: var(--wp--preset--color--secondary);
	font-size: 16px;
	letter-spacing: 0.1em;
}

/* ==========================================================================
   Navy band depth — ported from the ipx theme on support.local
   Both sites use the same base navy (#02134b), but support.local layers a
   gradient over it so the band reads with depth rather than as a flat fill.
   The header and the page banner sit flush against each other, so both carry
   a treatment — gradienting only one would leave a visible seam at the join.
   ========================================================================== */

/* Navbar: .ipx-navbar's 135deg wash, navy-darkest -> navy. */
header.wp-block-template-part .wp-block-group.has-custom-ipx-blue-background-color {
	background-image: linear-gradient(
		135deg,
		var(--wp--preset--color--navy-darkest) 0%,
		var(--wp--preset--color--custom-ipx-blue) 100%
	);
}

/* Page banner: .ipx-hero's overlay — a 160deg wash plus a faint cyan sheen
   at the upper right. Applied as a pseudo-element so the gradient composites
   over the band's background colour exactly as it does on support.local. */
.swt-block-page-banner-group {
	position: relative;
	overflow: hidden;
}

.swt-block-page-banner-group::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 75% 20%, rgba(33, 184, 244, 0.1) 0%, transparent 60%),
		linear-gradient(160deg, rgba(10, 15, 36, 0.92) 0%, rgba(2, 19, 75, 0.85) 100%);
}

/* Keep the banner's own content above the overlay. */
.swt-block-page-banner-group > * {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   Homepage — breathing room above the footer
   The product tiles run straight into the footer band with nothing between
   them. This lives in CSS rather than in the home template because that
   template is a database record, not a file (see README) — putting the rule
   here means it deploys with the theme instead of needing to be repeated by
   hand on every install.
   ========================================================================== */

.home .wp-block-post-content {
	padding-bottom: var(--wp--custom--space--section);
}

/* ==========================================================================
   Footer on navy
   The design system puts body copy on navy bands at 70% white, with solid
   white for anything interactive. Links brighten to Signal Cyan on hover —
   bright cyan reads ~7:1 on navy, so it is safe here (it would not be on the
   light canvas, where --primary is used instead).
   ========================================================================== */

.infoplex-footer-muted {
	color: rgba(255, 255, 255, 0.7);
}

footer.wp-block-template-part a:hover,
footer.wp-block-template-part a:focus-visible {
	color: var(--wp--preset--color--secondary);
}

/* The footer wordmark sits above address copy rather than beside a nav, so it
   needs a little breathing room underneath. */
footer.wp-block-template-part .infoplex-wordmark {
	margin-bottom: var(--wp--custom--space--sm);
}

/* ==========================================================================
   Body copy measure
   Running prose is capped at ~65ch per the design system.
   ========================================================================== */

.infoplex-measure {
	max-width: 65ch;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content::after,
	.wp-block-button__link,
	.wp-element-button {
		transition-duration: 0.01ms;
	}

	.wp-block-button__link:active,
	.wp-element-button:active {
		transform: none;
	}
}