/*
Theme Name: HSA
Theme URI: https://healthcaresoftwarealliance.com
Author: Healthcare Software Alliance
Description: Block theme for Healthcare Software Alliance. Brand tokens live in theme.json; this stylesheet carries the composite treatments the block editor cannot express on its own — the progressive photo blur band, chips and badges, the registry rows, and the responsive grid collapse.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hsa
Tags: full-site-editing, block-patterns, one-column
*/

/* ==========================================================================
   Root
   ========================================================================== */

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

h1, h2, h3, h4, h5, h6, p {
	text-wrap: pretty;
}

/* Measure caps — brand rule: 52ch for lede, 62ch for running copy.
   --------------------------------------------------------------------------
   Constrained layout centres any child narrower than the content size, which
   would centre these headers while the grids below them sit flush left in the
   1360px content box. Pinning them to the gutter instead only matches while the
   viewport is narrow enough for the content box to fill it — past that they
   drift left of everything else.
   So reproduce the content box's own offset: zero while the box is narrower
   than the content size, half the slack once it is wider. That keeps a section
   header, its grid, the header row and the footer on one line at every width.
   Core sets these margins with !important, so this has to as well. */
.is-layout-constrained > [class*="hsa-measure-"],
.is-layout-constrained > .hsa-searchbar {
	margin-inline-start: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-inline-end: auto !important;
}

.hsa-measure-lede { max-width: 52ch; }

/* Footnote — the asterisk under a stat row, and the note under the registry.
   Narrower than body copy and a shade quieter, so it reads as a qualification
   of the block above rather than as another paragraph. Spacing comes from the
   parent's gap; no margin of its own, or it fights the flex layout. */
.hsa-footnote {
	max-width: 58ch;
	opacity: .9;
}
.hsa-measure-body { max-width: 62ch; }
.hsa-measure-head { max-width: 24ch; }
.hsa-measure-56   { max-width: 56ch; }
.hsa-measure-60   { max-width: 60ch; }
.hsa-measure-44   { max-width: 44ch; }
.hsa-measure-36   { max-width: 36ch; }

/* ==========================================================================
   Section rhythm — hairline rules between light sections
   ========================================================================== */

.hsa-rule-top    { border-block-start: 1px solid var(--wp--custom--line--hairline); }
.hsa-rule-bottom { border-block-end: 1px solid var(--wp--custom--line--hairline); }
.hsa-rule-strong { border-block-end: 1px solid var(--wp--custom--line--control); }

/* ==========================================================================
   Labels — eyebrow and mono
   ========================================================================== */

.hsa-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--crimson);
	margin: 0;
}

.hsa-eyebrow.has-text-color { color: inherit; }

.hsa-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-faint);
	margin: 0;
}

.hsa-mono--sm { font-size: 10px; }

/* ==========================================================================
   Containers — tile, card, add-on card
   ========================================================================== */

.hsa-tile {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--tile);
}

.hsa-card {
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--card);
}

/* Dashed = attached to another product, not sold separately. */
.hsa-card--addon {
	border: 1px dashed var(--wp--custom--line--dashed);
}

.hsa-card--outline {
	background-color: transparent;
	border: 1px solid var(--wp--custom--line--hairline);
}

.hsa-shadow { box-shadow: var(--wp--preset--shadow--card); }

/* A whole card that is a link: kill the underline, keep ink colour. */
.hsa-card a:where(:not(.wp-element-button)),
.hsa-linkcard {
	color: inherit;
	text-decoration: none;
}

.hsa-linkcard { display: block; }

.hsa-linkcard:hover { text-decoration: none; }

.hsa-linkcard:hover .hsa-linkcard__title { color: var(--wp--preset--color--crimson); }

/* ==========================================================================
   Chips, badges, pills
   ========================================================================== */

.hsa-chip {
	display: inline-flex;
	align-items: center;
	gap: 8.8px;
	padding: 8px 17.6px;
	border-radius: var(--wp--custom--radius--control);
	border: 1px solid var(--wp--custom--line--control);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.hsa-chip--solid {
	border-color: transparent;
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink-body);
	padding: 6px 13.2px;
	font-size: 12px;
}

.hsa-chip--on-deep {
	border-color: var(--wp--custom--line--on-deep-control);
	color: var(--wp--preset--color--on-deep);
}

.hsa-badge {
	display: inline-flex;
	align-items: center;
	gap: 8.8px;
	padding: 6px 17.6px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--teal-tint);
	color: var(--wp--preset--color--teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.hsa-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--teal-tint);
	color: var(--wp--preset--color--teal);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.hsa-tag--crimson {
	background-color: var(--wp--preset--color--crimson-tint);
	color: var(--wp--preset--color--crimson);
}

/* Row of chips / badges that should wrap. */
.hsa-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: 8.8px;
	align-items: center;
}

.hsa-chiprow--wide { gap: 13.2px; }

/* ==========================================================================
   Arrow links — "See every certification →"
   ========================================================================== */

.hsa-arrow {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--crimson);
	text-decoration: none;
	white-space: nowrap;
}

.hsa-arrow:hover { text-decoration: underline; }

.hsa-arrow--teal { color: var(--wp--preset--color--teal); }
.hsa-arrow--on-deep { color: var(--wp--preset--color--on-deep-label); }

/* ==========================================================================
   Stat row — one white tile, hairline dividers between cells
   ========================================================================== */

.hsa-statrow {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--card);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 26.4px 8.8px;
}

.hsa-statrow.is-layout-grid { gap: 0; }

.hsa-statrow > * {
	padding-inline: 17.6px;
	border-inline-end: 1px solid var(--wp--custom--line--hairline);
	margin: 0;
}

.hsa-statrow > *:last-child { border-inline-end: 0; }

.hsa-stat__figure {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 34px;
	line-height: 1;
	color: var(--wp--preset--color--coral);
	margin: 0;
}

.hsa-stat__label {
	font-size: 13px;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-muted);
	margin: 4.4px 0 0;
}

/* On deep teal the figure switches to rose. */
.hsa-on-deep .hsa-stat__figure { color: var(--wp--preset--color--rose); }
.hsa-on-deep .hsa-stat__label  { color: var(--wp--preset--color--on-deep-body); }

/* ==========================================================================
   Logo tiles — white 88px tiles on tinted surface, greyed to equal weight
   ========================================================================== */

/* Regulator marks — real logos, sitting directly on the section, no tile.
   Widths are set per-image server-side from the intrinsic size, so the marks
   carry matched optical weight without a uniform height flattening them. */
.hsa-marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26.4px 44px;
	margin: 0;
	padding: 26.4px 0;
}

.hsa-marks--centred {
	justify-content: center;
	gap: 26.4px 88px;
}

.hsa-marks img {
	display: block;
	height: auto;
	max-width: 100%;
}

.hsa-marks__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--wp--preset--color--ink-body);
}

@media (max-width: 781px) {
	/* A wrapping flex row overflows here — the widest marks are wider than a third
	   of a phone screen, so they spill past the edge instead of wrapping. A grid
	   bounds each mark to its column, which cannot overflow. */
	.hsa-marks,
	.hsa-marks--centred {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		align-items: center;
		gap: 26.4px 17.6px;
	}

	.hsa-marks img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 30px;
	}

	.hsa-marks__wordmark {
		font-size: 20px;
	}
}

/* Region picker — the select carries the styling; the noscript button only
   appears when JS is off, so it never needs to fit the layout gracefully. */
.hsa-regionpicker {
	display: flex;
	gap: 8.8px;
	align-items: center;
}

.hsa-regionpicker select {
	flex: 1 1 auto;
}

.hsa-regionpicker__go {
	padding: 9px 17.6px;
	border: 1px solid var(--wp--custom--border--control);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--card);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	cursor: pointer;
}

.hsa-logotile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 88px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--card);
	text-align: center;
	padding: 17.6px 26.4px;
	margin: 0;
}

/* The mark fills the tile, in its own colours. Aspect ratios vary wildly
   across brands, so object-fit does the fitting rather than a fixed height. */
.hsa-logotile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Partner marks sit above the name, desaturated to the same weight as the
   rule of the page. Figure margins come off so the flex centring holds. */
.hsa-logomark.wp-block-image { margin: 0; }

.hsa-logotile__name {
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-body);
	line-height: 1.3;
	margin: 0;
}

/* Customer logo slots — outlined, taller. */
.hsa-custtile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	border: 1px solid var(--wp--custom--line--hairline);
	border-radius: var(--wp--custom--radius--card);
	margin: 0;
}

/* Product lockups render at 44px tall, hugging the reading edge. There is no
   logical keyword for object-position, so this one flips explicitly below. */
.hsa-lockup img {
	height: 44px;
	width: auto;
	object-fit: contain;
	object-position: 0% 50%;
}

.hsa-lockup.wp-block-image { margin: 0; }

/* "Powered by" — rule above, stacked label */
.hsa-platform {
	border-block-start: 1px solid rgba(32, 30, 29, 0.14);
	padding: 17.6px 13.2px 0;
	margin: 0;
	height: 88px;
}

.hsa-platform .hsa-platform__logo { height: 100%; }

/* Platform marks stand alone in each ruled column — no name beneath. */
.hsa-platform__logo.wp-block-image { margin: 0; }

.hsa-platform__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ==========================================================================
   The signature photo treatment
   --------------------------------------------------------------------------
   A photo band pinned to the top of a tile, four stacked backdrop-blur layers
   masked progressively lower, then a gradient darkening the top for white
   text and dissolving into the surface at 94%. Titles sit over the sharp
   part, top-left, in white. No icons.
   ========================================================================== */

.hsa-phototile {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--tile);
	isolation: isolate;
}

.hsa-phototile__band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 30%;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

/* Anything after the band stacks above it. */
.hsa-phototile > *:not(.hsa-phototile__band) {
	position: relative;
	z-index: 1;
}

.hsa-phototile__band .wp-block-image,
.hsa-phototile__band figure {
	margin: 0;
	height: 100%;
}

.hsa-phototile__band img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Empty band (no photo chosen yet) reads as a hatch placeholder. */
.hsa-phototile__band:not(:has(img)) {
	background: var(--wp--preset--gradient--hatch-tile);
}

/* The blur stack. Four layers, each masked to start lower than the last. */
.hsa-blurstack {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
}

.hsa-blurstack > i,
.hsa-blurstack > b {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

.hsa-blurstack > i:nth-of-type(1) {
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 40%);
	mask-image: linear-gradient(to bottom, transparent 26%, #000 40%);
}

.hsa-blurstack > i:nth-of-type(2) {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 55%);
	mask-image: linear-gradient(to bottom, transparent 40%, #000 55%);
}

.hsa-blurstack > i:nth-of-type(3) {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 72%);
	mask-image: linear-gradient(to bottom, transparent 55%, #000 72%);
}

.hsa-blurstack > i:nth-of-type(4) {
	backdrop-filter: blur(34px);
	-webkit-backdrop-filter: blur(34px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000 86%);
	mask-image: linear-gradient(to bottom, transparent 70%, #000 86%);
}

/* The gradient: darkens the top for white text, dissolves into the tile. */
.hsa-blurstack > b {
	background: var(--wp--preset--gradient--photo-dissolve-tile);
}

/* Title block over the sharp part. Reserves the sharp height. */
.hsa-phototile__title {
	min-height: 120px;
}

.hsa-phototile__title :where(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.hsa-phototile__title p { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   Full-bleed band variant — 360px, title may wrap to two lines, so the dark
   stops hold until ~45%.
   -------------------------------------------------------------------------- */

.hsa-band {
	position: relative;
	background-color: var(--wp--preset--color--tile);
	isolation: isolate;
}

.hsa-band__photo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 360px;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

.hsa-band > *:not(.hsa-band__photo) {
	position: relative;
	z-index: 1;
}

.hsa-band__photo .wp-block-image,
.hsa-band__photo figure { margin: 0; height: 100%; }

.hsa-band__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.hsa-band__photo:not(:has(img)) {
	background: var(--wp--preset--gradient--hatch-tile);
}

.hsa-band .hsa-blurstack > i:nth-of-type(1) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 50%);
	mask-image: linear-gradient(to bottom, transparent 38%, #000 50%);
}

.hsa-band .hsa-blurstack > i:nth-of-type(2) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 63%);
	mask-image: linear-gradient(to bottom, transparent 50%, #000 63%);
}

.hsa-band .hsa-blurstack > i:nth-of-type(3) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 63%, #000 78%);
	mask-image: linear-gradient(to bottom, transparent 63%, #000 78%);
}

.hsa-band .hsa-blurstack > i:nth-of-type(4) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 76%, #000 89%);
	mask-image: linear-gradient(to bottom, transparent 76%, #000 89%);
}

.hsa-band .hsa-blurstack > b {
	background: var(--wp--preset--gradient--photo-dissolve-band);
}

.hsa-band__title {
	min-height: 170px;
}

.hsa-band__title :where(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.hsa-band__title .hsa-eyebrow { color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------------
   Deep-teal image tile — veiled photo with a stat pinned to the bottom.
   -------------------------------------------------------------------------- */

.hsa-veiltile {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--tile);
	min-height: 172px;
	background: var(--wp--preset--gradient--hatch-deep);
	isolation: isolate;
}

.hsa-veiltile__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}

.hsa-veiltile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.hsa-veiltile__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--deep-veil);
}

.hsa-veiltile > *:not(.hsa-veiltile__photo) {
	position: relative;
	z-index: 1;
}

/* The stat sits at the bottom, over the darkest part of the veil. */
.wp-block-group.hsa-veiltile {
	justify-content: flex-end;
}

.hsa-veiltile .hsa-stat__figure {
	color: var(--wp--preset--color--on-deep);
	font-size: 34px;
}

.hsa-veiltile .hsa-stat__label {
	color: var(--wp--preset--color--on-deep-body);
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   Hero — the teal halo behind the hero image
   ========================================================================== */

.hsa-hero-figure {
	position: relative;
}

.hsa-hero-figure::before {
	content: "";
	position: absolute;
	top: -24px;
	inset-inline-end: -18px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal-tint);
	z-index: 0;
}

.hsa-hero-figure > * {
	position: relative;
	z-index: 1;
}

.hsa-hero-figure .wp-block-image,
.hsa-hero-figure figure {
	margin: 0;
	border-radius: var(--wp--custom--radius--tile);
	overflow: hidden;
}

.hsa-hero-figure img {
	width: 100%;
	display: block;
	border-radius: var(--wp--custom--radius--tile);
}

/* Photo frame. The height is the design's, not the image's: whatever is dropped
   in gets cropped to fit, so swapping a placeholder for a real photo can't
   change the page's rhythm. */
.hsa-imgframe {
	height: 400px;
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--gradient--hatch-tile);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.hsa-imgframe--tall { height: 420px; }
.hsa-imgframe--mod  { height: 190px; border-radius: var(--wp--custom--radius--card); }
.hsa-imgframe--head { height: 200px; border-radius: 0; }

.hsa-imgframe .wp-block-image,
.hsa-imgframe figure { margin: 0; width: 100%; height: 100%; }

.hsa-imgframe img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   On deep teal — colour inversion for a whole section
   ========================================================================== */

.hsa-on-deep :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--on-deep); }
.hsa-on-deep :where(p, li) { color: var(--wp--preset--color--on-deep-body); }
.hsa-on-deep .hsa-eyebrow:not(.has-text-color) { color: var(--wp--preset--color--on-deep-label); }
.hsa-on-deep .hsa-mono { color: var(--wp--preset--color--on-deep-label); }

/* Coral is never used on teal — rose is. */
.hsa-on-deep .wp-block-button__link,
.hsa-on-deep .wp-element-button {
	background-color: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--rose-ink);
}

.hsa-on-deep .wp-block-button__link:hover,
.hsa-on-deep .wp-element-button:hover {
	background-color: #FFA3B2;
	color: var(--wp--preset--color--rose-ink);
}

.hsa-on-deep a:where(:not(.wp-element-button):not(.hsa-chip)) {
	color: var(--wp--preset--color--on-deep);
}

/* ==========================================================================
   Registry table — the compliance grid
   ========================================================================== */

.hsa-registry {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--card);
	padding: 8.8px 35.2px 26.4px;
}

.hsa-registry__row {
	display: grid;
	grid-template-columns: 1.4fr 1.2fr 1fr 0.8fr;
	gap: 26.4px;
	align-items: center;
	padding: 17.6px 0;
	border-block-end: 1px solid var(--wp--custom--line--hairline);
	margin: 0;
}

.hsa-registry__row:last-child { border-block-end: 0; }

.hsa-registry__row--head {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-faint);
}

.hsa-registry__row > * { margin: 0; }

.hsa-registry__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 900px) {
	.hsa-registry { padding: 8.8px 17.6px 17.6px; }
	.hsa-registry__row { grid-template-columns: 1fr 1fr; gap: 8.8px 17.6px; }
	.hsa-registry__row--head { display: none; }
}

/* ==========================================================================
   SLA rows — label left, target right
   ========================================================================== */

.hsa-slarow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26.4px;
	border-radius: var(--wp--custom--radius--card);
	padding: 26.4px;
}

.hsa-slarow__target {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 26px;
	line-height: 1;
	color: var(--wp--preset--color--rose);
	white-space: nowrap;
	margin: 0;
}

/* ==========================================================================
   Forms — 42px min height, radius 999, tile background
   ========================================================================== */

.hsa-form {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--card);
	padding: 35.2px;
}

.hsa-form label,
.hsa-fieldlabel {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 5px;
	color: var(--wp--preset--color--ink-muted);
}

.hsa-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.hsa-form select,
.hsa-field {
	width: 100%;
	min-height: var(--wp--custom--control--field-height);
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--tile);
	border: 1px solid var(--wp--custom--line--control);
	border-radius: var(--wp--custom--radius--control);
	box-sizing: border-box;
}

.hsa-form textarea,
.hsa-field--area {
	width: 100%;
	padding: 13.2px 17.6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--tile);
	border: 1px solid var(--wp--custom--line--control);
	border-radius: var(--wp--custom--radius--card);
	box-sizing: border-box;
	resize: vertical;
}

.hsa-form input:focus-visible,
.hsa-form select:focus-visible,
.hsa-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--coral);
	outline-offset: 1px;
}

.hsa-form ::placeholder { color: var(--wp--preset--color--ink-faint); }

/* Two-up field grid inside a form panel. */
.hsa-fieldgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17.6px;
}

@media (max-width: 640px) {
	.hsa-fieldgrid { grid-template-columns: 1fr; }
	.hsa-form { padding: 26.4px; }
}

/* Search bar — pill with the button inside it. */
.hsa-searchbar {
	display: flex;
	align-items: center;
	gap: 13.2px;
	max-width: 760px;
	padding: 8.8px 8.8px 8.8px 26.4px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--card);
	box-shadow: var(--wp--preset--shadow--card);
}

.hsa-searchbar input {
	flex: 1;
	min-height: var(--wp--custom--control--field-height);
	border: 0;
	outline: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
}

.hsa-searchbar .wp-block-button__link { padding: 13px 26.4px; font-size: 15px; }

/* Status strip. */
.hsa-status__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--teal);
	display: inline-block;
	flex: 0 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.hsa-header {
	background-color: var(--wp--preset--color--page);
	border-block-end: 1px solid var(--wp--custom--line--control);
}

.hsa-header .wp-block-site-logo img,
.hsa-header .custom-logo {
	height: 48px;
	width: auto;
	max-width: none;
	display: block;
}

@media (max-width: 640px) {
	.hsa-header .wp-block-site-logo img,
	.hsa-header .custom-logo { height: 38px; }
}

.hsa-header .wp-block-navigation {
	font-size: 15px;
	font-weight: 600;
}

.hsa-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
	color: var(--wp--preset--color--crimson);
}

/* Current page marker — crimson, bold. */
.hsa-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.hsa-header .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--crimson);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Products dropdown
   --------------------------------------------------------------------------
   A flat list of headings and links, laid out as columns that break to a new
   column at every heading. Adding or moving a product is a menu edit, not a
   layout change. Core already opens the panel on hover and on focus-within.
   -------------------------------------------------------------------------- */

.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container {
	/* Core makes the submenu a flex column; multi-column layout does not apply
	   to flex containers, and the columns are the whole mechanism here. */
	display: block !important;
	width: min(680px, calc(100vw - 88px)) !important;
	min-width: 0;
	padding: 26.4px 35.2px;
	background-color: var(--wp--preset--color--card);
	border: 1px solid var(--wp--custom--line--hairline);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);

	columns: 3;
	column-gap: 35.2px;
	column-rule: 1px solid var(--wp--custom--line--hairline);
}

/* Each category starts a new column; the first must not push an empty one. */
.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading {
	break-before: column;
	break-inside: avoid;
	margin-block-start: 0;
}

.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading:first-child {
	break-before: avoid;
}

/* The category row is a heading, not a destination. */
.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading > .wp-block-navigation-item__content {
	display: block;
	padding: 0 0 8.8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	cursor: default;
	pointer-events: none;
}

.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-item > .wp-block-navigation-item__content {
	display: block;
	padding: 6px 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--crimson);
	text-decoration: none;
}

/* Kill the default submenu item padding so the columns line up. */
.hsa-header .wp-block-navigation .hsa-megamenu .wp-block-navigation__submenu-container > li {
	display: block;
	break-inside: avoid;
}

/* Between the overlay breakpoint and the desktop layout there isn't room for a
   three-column panel to the right of the Products item, so it becomes an
   ordinary vertical dropdown — headings kept, columns and rules dropped — and
   hangs from the item's trailing edge so it can't run off the viewport. */
@media (max-width: 1200px) {
	.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container {
		width: max-content !important;
		min-width: 220px;
		columns: auto;
		column-rule: none;
	}

	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading {
		break-before: auto;
		margin-block-start: 17.6px;
	}

	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading:first-child {
		margin-block-start: 0;
	}
}

/* Inside the mobile overlay the panel is just a nested list again. */
.hsa-header .wp-block-navigation__responsive-container.is-menu-open .hsa-megamenu > .wp-block-navigation__submenu-container {
	width: auto !important;
	columns: auto;
	column-rule: none;
	max-width: none;
	padding: 0 0 0 17.6px;
	border: 0;
	box-shadow: none;
	background-color: transparent;
}

.hsa-header .wp-block-navigation__responsive-container.is-menu-open .hsa-mm-heading {
	break-before: auto;
	margin-block-start: 13.2px;
}

/* Arabic toggle — the brand kit puts it in the nav as crimson text. Removed
   from the header until it has a real destination; the style is kept so
   re-adding it is a one-line change in parts/header.html. */
.hsa-langlink {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--crimson);
	text-decoration: none;
	white-space: nowrap;
}

/* Nav-size button. */
.hsa-btn-nav .wp-block-button__link {
	padding: 11px 26.4px;
	font-size: 14px;
}

/* Breadcrumb strip. */
.hsa-crumbs {
	display: flex;
	align-items: center;
	gap: 8.8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--wp--preset--color--ink-faint);
}

.hsa-crumbs a { color: var(--wp--preset--color--ink-faint); text-decoration: none; }
.hsa-crumbs a:hover { text-decoration: underline; }
.hsa-crumbs strong { color: var(--wp--preset--color--ink-body); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */

.hsa-footer {
	background-color: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--tile);
}

.hsa-footer :where(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.hsa-footer p { color: var(--wp--preset--color--ink-faint); font-size: 14px; }

.hsa-footer__label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--footer-label);
	margin: 0;
}

.hsa-footer .wp-block-navigation,
.hsa-footer .hsa-footer__links {
	font-size: 14px;
}

.hsa-footer a { color: var(--wp--preset--color--footer-body); text-decoration: none; }
.hsa-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.hsa-footer .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--footer-body); }
.hsa-footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: #FFFFFF; }

/* Vertical link stacks in the footer. */
.hsa-footer .wp-block-navigation__container.is-vertical { gap: 8.8px; }

/* ==========================================================================
   Sticky column (product page "Inside the product")
   ========================================================================== */

@media (min-width: 782px) {
	.hsa-sticky {
		position: sticky;
		top: 44px;
		align-self: start;
	}
}

/* ==========================================================================
   Grid collapse — keeps desktop fidelity, stays usable below it
   ========================================================================== */

@media (max-width: 1100px) {
	.hsa-grid-6.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hsa-grid-4.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.hsa-grid-3.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsa-statrow.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 17.6px; }
	.hsa-statrow > *:nth-child(2n) { border-inline-end: 0; }
}

@media (max-width: 640px) {
	.hsa-grid-2.is-layout-grid,
	.hsa-grid-3.is-layout-grid,
	.hsa-grid-4.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
	.hsa-grid-6.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsa-statrow.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsa-slarow { flex-direction: column; align-items: flex-start; gap: 13.2px; }
	.hsa-phototile__title { min-height: 96px; }
	.hsa-band__title { min-height: 140px; }
	.hsa-hero-figure::before { display: none; }
}

/* Split rows (heading left, arrow-link right) collapse cleanly. */
.hsa-split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26.4px;
	flex-wrap: wrap;
}

.hsa-split--center { align-items: center; }

/* ==========================================================================
   Editor affordances — make the invisible scaffolding visible in the editor
   ========================================================================== */

.editor-styles-wrapper .hsa-blurstack {
	outline: 1px dashed rgba(196, 33, 58, 0.35);
	outline-offset: -1px;
}

/* ==========================================================================
   Right-to-left
   --------------------------------------------------------------------------
   Everything above uses logical properties, so RTL needs only the handful of
   things CSS cannot express logically. WordPress puts dir="rtl" on <html> when
   the locale is right-to-left, and loads style-rtl.css in place of this file if
   one exists — this block means we do not need to generate one.
   ========================================================================== */

[dir="rtl"] .hsa-lockup img {
	object-position: 100% 50%;
}

/* The photo band's dark corner and its title both move to the trailing edge. */
[dir="rtl"] .hsa-phototile__title,
[dir="rtl"] .hsa-band__title {
	text-align: right;
}