/*
 * PAHAL — composable page sections.
 *
 * The components in inc/sections.php. They share the vocabulary already
 * established by the header, the hero and the focus-area index: square
 * corners, hairline rules, a two-digit index where order matters, and motion
 * that only ever runs on opacity and transform.
 *
 * Nothing here introduces a new visual idea. That is deliberate — a page built
 * from eight sections that each invented their own card style would look like
 * eight websites. The variety on a page comes from RHYTHM (which band, how much
 * air, how many columns), not from decoration.
 */

/* ---- Additional bands ------------------------------------------------- */

.pahal-section--pine {
	background-color: var(--pahal-pine-deep);
	--pahal-hover-fill: rgb(244 239 229 / 8%);
}

.pahal-section-actions { margin-top: var(--pahal-space-m); gap: var(--pahal-space-xs); }

/* ---- Prose ------------------------------------------------------------- */

.pahal-prose { max-width: 66ch; }
.pahal-prose > p + p { margin-top: var(--pahal-space-s); }

/*
 * Two columns at desktop shortens the measure without shortening the column —
 * an editorial signal that also makes long copy far less daunting to start.
 */
@media (min-width: 64em) {
	.pahal-prose--columns {
		max-width: none;
		columns: 2;
		column-gap: var(--pahal-space-xl);
	}

	.pahal-prose--columns > p { margin: 0 0 var(--pahal-space-s); break-inside: avoid; }
}

/* ---- Ticked lists ------------------------------------------------------- */

.pahal-ticks {
	list-style: none;
	margin: var(--pahal-space-m) 0 0;
	padding: 0;
	display: grid;
	gap: var(--pahal-space-xs);
	max-width: 58ch;
}

.pahal-ticks li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	margin: 0;
	font-size: var(--pahal-text-s);
	line-height: 1.6;
	color: var(--pahal-text-soft);
}

.pahal-ticks .pahal-icon { margin-top: 0.22em; color: var(--pahal-accent); }
.pahal-ticks--compact { gap: var(--pahal-space-2xs); margin-top: var(--pahal-space-s); }

/* ---- Split ------------------------------------------------------------- */

.pahal-split__text > .pahal-section-head { margin-bottom: var(--pahal-space-s); }

/* A solo split is a split with no photograph — the text takes the full width
   rather than sitting in a seven-column column beside an empty five. */
@media (min-width: 64em) {
	.pahal-split--solo { grid-template-columns: minmax(0, 7fr); }
}

.pahal-split__media { position: relative; }

@media (min-width: 64em) {
	.pahal-split__media { position: sticky; top: calc(var(--pahal-header-height) + var(--pahal-space-m)); }
	.pahal-split__media img { aspect-ratio: 4 / 5; object-fit: cover; }
}

/*
 * No offset plate here, deliberately.
 *
 * The homepage intro figure has one and it works, because that figure is a bare
 * image. These figures often carry a caption, so a plate positioned against the
 * FIGURE lands under the caption text rather than behind the photograph, and
 * reads as a stray pink rectangle. The depth cue is not worth an artifact that
 * appears only on some instances; the photograph carries the column on its own.
 */
.pahal-split__media figcaption { max-width: 46ch; }

/* ---- Pillars ------------------------------------------------------------ */

.pahal-pillars {
	display: grid;
	gap: var(--pahal-space-m);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

@media (min-width: 64em) {
	.pahal-pillars { gap: var(--pahal-space-l); }
	.pahal-pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pahal-pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pahal-pillars--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * A pillar is a rule, an icon and some type. No box, no shadow, no radius —
 * consistent with the card decision in components.css and for the same reason.
 */
.pahal-pillar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pahal-space-2xs);
	padding-top: var(--pahal-space-s);
	border-top: 2px solid var(--pahal-rule-strong);
}

.pahal-pillar__icon {
	display: block;
	margin-bottom: var(--pahal-space-2xs);
	color: var(--pahal-accent);
}

.pahal-pillar__title {
	margin: 0;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-l);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: var(--pahal-track-heading);
	color: var(--pahal-text-heading);
}

.pahal-pillar__text {
	margin: 0;
	font-size: var(--pahal-text-s);
	line-height: 1.65;
	color: var(--pahal-text-soft);
}

.pahal-pillar__link { margin-top: var(--pahal-space-2xs); }

/* ---- Steps -------------------------------------------------------------- */

.pahal-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: none;
	border-top: 1px solid var(--pahal-rule);
}

@media (min-width: 64em) {
	.pahal-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pahal-space-xl); }
}

.pahal-step {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: var(--pahal-space-s);
	align-items: start;
	margin: 0;
	padding-block: var(--pahal-space-m);
	border-bottom: 1px solid var(--pahal-rule);
}

.pahal-step__num {
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-l);
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--pahal-accent);
}

.pahal-step__title {
	margin: 0 0 var(--pahal-space-3xs);
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-s);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--pahal-track-heading);
	color: var(--pahal-text-heading);
}

.pahal-step__text { margin: 0; font-size: var(--pahal-text-s); line-height: 1.65; color: var(--pahal-text-soft); max-width: 46ch; }

/* ---- Stats -------------------------------------------------------------- */

.pahal-stats {
	display: grid;
	gap: var(--pahal-space-l);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) { .pahal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pahal-stats { gap: var(--pahal-space-xl); } }

.pahal-stats__note { margin-top: var(--pahal-space-l); }

.pahal-on-dark .pahal-metric__value { color: var(--pahal-white); }
.pahal-on-dark .pahal-metric__label { color: var(--pahal-terracotta-light); }
.pahal-on-dark .pahal-metric__basis { color: var(--pahal-text-soft); border-top-color: var(--pahal-rule); }

/* ---- Checklists ---------------------------------------------------------- */

.pahal-checklists {
	display: grid;
	gap: var(--pahal-space-l);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) { .pahal-checklists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pahal-space-xl); } }

.pahal-checklist { padding-top: var(--pahal-space-s); border-top: 2px solid var(--pahal-accent); }

/*
 * The "what this is not" column is drawn in ink rather than accent. Colouring a
 * limitation in red would turn plain honesty into a warning; it is neither a
 * problem nor a feature, it is a boundary.
 */
.pahal-checklist--negative { border-top-color: var(--pahal-rule-strong); }

.pahal-checklist__title {
	margin: 0 0 var(--pahal-space-s);
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-s);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--pahal-track-heading);
	color: var(--pahal-text-heading);
}

.pahal-checklist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pahal-space-xs); }

.pahal-checklist__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	margin: 0;
	font-size: var(--pahal-text-s);
	line-height: 1.6;
	color: var(--pahal-text-soft);
}

.pahal-checklist__list .pahal-icon { margin-top: 0.22em; color: var(--pahal-accent); }
.pahal-checklist--negative .pahal-icon { color: var(--pahal-ink-soft); }
.pahal-on-dark .pahal-checklist--negative .pahal-icon { color: var(--pahal-text-soft); }

/* ---- FAQ ------------------------------------------------------------------ */

/*
 * Native <details>. No script, keyboard-operable by definition, and it survives
 * printing — a JavaScript accordion prints as a page of unanswered questions.
 */
.pahal-faq { border-top: 1px solid var(--pahal-rule); }

.pahal-faq__item { border-bottom: 1px solid var(--pahal-rule); }

.pahal-faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pahal-space-s);
	padding-block: var(--pahal-space-s);
	list-style: none;
	cursor: pointer;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-m);
	font-weight: 500;
	line-height: 1.3;
	color: var(--pahal-text-heading);
	transition: color var(--pahal-duration-fast) var(--pahal-ease-out);
}

/* Safari draws its own triangle unless both of these are set. */
.pahal-faq__q::-webkit-details-marker { display: none; }
.pahal-faq__q::marker { content: ""; }

.pahal-faq__q:hover { color: var(--pahal-accent-text); }

.pahal-faq__chevron {
	flex: none;
	align-self: center;
	color: var(--pahal-accent-text);
	transition: transform var(--pahal-duration-menu) var(--pahal-ease);
}

.pahal-faq__item[open] .pahal-faq__chevron { transform: rotate(180deg); }

.pahal-faq__a { padding-bottom: var(--pahal-space-s); }

.pahal-faq__a p {
	margin: 0;
	max-width: 68ch;
	font-size: var(--pahal-text-s);
	line-height: 1.7;
	color: var(--pahal-text-soft);
}

/* ---- Pull quote ------------------------------------------------------------ */

.pahal-section--quote .pahal-container { max-width: 62rem; }

.pahal-pull { margin: 0; }

.pahal-pull__quote {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
}

.pahal-pull__quote p {
	margin: 0;
	max-width: 32ch;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-m);
	font-weight: 500;
	font-style: italic;
	line-height: 1.28;
	letter-spacing: var(--pahal-track-display);
	color: var(--pahal-text-heading);
	text-wrap: balance;
}

/* An opening quote mark set as a hanging figure rather than a graphic. */
.pahal-pull__quote p::before {
	content: "\201C";
	margin-inline-start: -0.42em;
	color: var(--pahal-accent);
}

.pahal-pull__cite {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	margin-top: var(--pahal-space-m);
	padding-top: var(--pahal-space-xs);
	border-top: 1px solid var(--pahal-rule);
	max-width: 46ch;
}

.pahal-pull__who { font-size: var(--pahal-text-s); font-weight: 500; color: var(--pahal-text-heading); }

.pahal-pull__role {
	font-size: var(--pahal-text-eyebrow);
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

/* ---- Call to action --------------------------------------------------------- */

.pahal-cta { position: relative; overflow: hidden; }

/* The same two plumes as the donate band, so the two closing bands are
   recognisably one family rather than two attempts at the same idea. */
.pahal-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(52rem 34rem at 6% -20%, rgb(20 82 74 / 82%) 0%, transparent 62%),
		radial-gradient(44rem 30rem at 98% 120%, rgb(143 63 20 / 40%) 0%, transparent 60%);
	pointer-events: none;
}

.pahal-cta > * { position: relative; }

.pahal-cta__inner { display: grid; gap: var(--pahal-space-l); align-items: end; }

@media (min-width: 64em) {
	.pahal-cta__inner { grid-template-columns: 7fr 5fr; gap: var(--pahal-space-xl); }
}

.pahal-cta__heading {
	max-width: 26ch;
	margin: 0 0 var(--pahal-space-s);
	padding-bottom: 0.06em;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-m);
	font-weight: 500;
	line-height: var(--pahal-leading-display);
	letter-spacing: var(--pahal-track-display);
	color: var(--pahal-white);
}

.pahal-cta__heading em { font-style: italic; font-weight: 400; color: var(--pahal-terracotta-light); }

.pahal-cta__text { margin: 0; max-width: 52ch; font-size: var(--pahal-text-lead); line-height: 1.6; color: color-mix(in srgb, var(--pahal-sand) 84%, transparent); }

.pahal-cta__actions { margin-top: 0; }

@media (min-width: 64em) { .pahal-cta__actions { justify-content: flex-end; } }

/* ---- Facts list --------------------------------------------------------------- */

.pahal-facts { margin: 0; border-top: 1px solid var(--pahal-rule); }

.pahal-facts__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem var(--pahal-space-m);
	padding-block: var(--pahal-space-s);
	border-bottom: 1px solid var(--pahal-rule);
}

@media (min-width: 48em) {
	.pahal-facts__row { grid-template-columns: 18rem 1fr; align-items: baseline; }
}

.pahal-facts__label {
	margin: 0;
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

.pahal-facts__value {
	margin: 0;
	font-size: var(--pahal-text-body);
	color: var(--pahal-text-heading);
	overflow-wrap: anywhere;
}

.pahal-facts__note {
	margin: 0.2rem 0 0;
	grid-column: 1 / -1;
	font-size: var(--pahal-text-s);
	line-height: 1.55;
	color: var(--pahal-text-soft);
}

@media (min-width: 48em) { .pahal-facts__note { grid-column: 2; } }

/*
 * What is NOT yet published, stated as plainly as what is. An institution that
 * lists its own gaps is read as more credible than one that lists only wins,
 * and this is cheaper than any trust badge.
 */
.pahal-pending {
	margin-top: var(--pahal-space-l);
	padding: var(--pahal-space-s) var(--pahal-space-m);
	background-color: var(--pahal-surface-raised);
	border-left: 2px solid var(--pahal-accent);
}

.pahal-pending__label {
	margin: 0 0 var(--pahal-space-2xs);
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

.pahal-pending__list { margin: 0; padding-left: 1.1em; }
.pahal-pending__list li { font-size: var(--pahal-text-s); line-height: 1.6; color: var(--pahal-text-soft); }

.pahal-on-dark .pahal-pending { background-color: rgb(244 239 229 / 6%); }

/* ---- Timeline ------------------------------------------------------------------ */

.pahal-timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pahal-rule); }

.pahal-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.35rem;
	margin: 0;
	padding-block: var(--pahal-space-m);
	border-bottom: 1px solid var(--pahal-rule);
}

@media (min-width: 48em) {
	.pahal-timeline__item { grid-template-columns: 12rem 1fr; gap: var(--pahal-space-m); align-items: baseline; }
}

.pahal-timeline__when {
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-l);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--pahal-accent);
}

.pahal-timeline__title {
	margin: 0 0 var(--pahal-space-3xs);
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-s);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--pahal-track-heading);
	color: var(--pahal-text-heading);
}

.pahal-timeline__text { margin: 0; max-width: 62ch; font-size: var(--pahal-text-s); line-height: 1.65; color: var(--pahal-text-soft); }

/* ---- Form panel -------------------------------------------------------------------- */

/*
 * A form on this site is never a bare stack of inputs. The left column says why
 * the fields are being asked for and what happens after you press the button —
 * which is the actual reason people abandon NGO forms.
 */
.pahal-form-panel { display: grid; gap: var(--pahal-space-l); align-items: start; }

@media (min-width: 64em) {
	.pahal-form-panel { grid-template-columns: 5fr 7fr; gap: var(--pahal-space-xl); }
	.pahal-form-panel__intro { position: sticky; top: calc(var(--pahal-header-height) + var(--pahal-space-m)); }
}

.pahal-form-panel__intro .pahal-section-head { margin-bottom: var(--pahal-space-s); }

.pahal-form-panel__form {
	padding: var(--pahal-space-m);
	background-color: var(--pahal-surface-raised);
	border: 1px solid var(--pahal-rule);
}

@media (min-width: 48em) { .pahal-form-panel__form { padding: var(--pahal-space-l); } }

/* ---- Gallery ------------------------------------------------------------------------- */

.pahal-gallery {
	display: grid;
	gap: var(--pahal-space-s);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pahal-gallery__item { margin: 0; }
.pahal-gallery__item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.pahal-gallery__item figcaption {
	margin-top: var(--pahal-space-2xs);
	padding-left: var(--pahal-space-2xs);
	border-left: 1px solid var(--pahal-rule);
	font-size: var(--pahal-text-s);
	line-height: 1.5;
	color: var(--pahal-text-soft);
}

/* ---- Showcase panel ----------------------------------------------------------------------- */

/*
 * A named body at a glance.
 *
 * The one place on this site where a bordered panel is right: what is inside
 * belongs to something with its own identity and its own website, and the
 * border is what says "a distinct thing PAHAL runs" rather than "more of this
 * page". Still a hairline, still square, still no shadow — a frame, not a card.
 */
.pahal-showcase {
	border: 1px solid var(--pahal-rule-strong);
	background-color: var(--pahal-surface-raised);
}

.pahal-showcase__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem var(--pahal-space-xs);
	padding: var(--pahal-space-m);
	border-bottom: 1px solid var(--pahal-rule);
}

/* The wordmark, set as a mark rather than a heading — it is an identity. */
.pahal-showcase__mark {
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-s);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--pahal-text-heading);
}

.pahal-showcase__name { font-size: var(--pahal-text-body); color: var(--pahal-text-heading); }

.pahal-showcase__meta {
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

.pahal-showcase__summary {
	flex: 1 0 100%;
	margin: var(--pahal-space-2xs) 0 0;
	max-width: 68ch;
	font-size: var(--pahal-text-s);
	line-height: 1.65;
	color: var(--pahal-text-soft);
}

/*
 * Figures as hairline-divided cells rather than four floating numbers. The
 * rules are what make it read as a table of facts — which is what it is —
 * instead of as four unrelated brags.
 */
.pahal-showcase__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	border-bottom: 1px solid var(--pahal-rule);
}

@media (min-width: 48em) { .pahal-showcase__figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pahal-showcase__figure {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.3rem;
	padding: var(--pahal-space-s) var(--pahal-space-m);
	border-inline-start: 1px solid var(--pahal-rule);
}

.pahal-showcase__figure:nth-child(odd) { border-inline-start: 0; }
.pahal-showcase__figure:nth-child(-n+2) { border-bottom: 1px solid var(--pahal-rule); }

@media (min-width: 48em) {
	.pahal-showcase__figure:nth-child(odd) { border-inline-start: 1px solid var(--pahal-rule); }
	.pahal-showcase__figure:first-child { border-inline-start: 0; }
	.pahal-showcase__figure:nth-child(-n+2) { border-bottom: 0; }
}

.pahal-showcase__figure-value {
	margin: 0;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-s);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--pahal-accent);
}

.pahal-showcase__figure-label {
	margin: 0;
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

.pahal-showcase__entries { list-style: none; margin: 0; padding: 0; }

.pahal-showcase__entry {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.2rem;
	margin: 0;
	padding: var(--pahal-space-s) var(--pahal-space-m);
	border-bottom: 1px solid var(--pahal-rule);
}

@media (min-width: 48em) {
	.pahal-showcase__entry {
		grid-template-columns: 11rem 1fr auto;
		gap: var(--pahal-space-s);
		align-items: baseline;
	}
}

.pahal-showcase__when {
	font-size: var(--pahal-text-s);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--pahal-accent-text);
	white-space: nowrap;
}

.pahal-showcase__entry-body { display: block; }

.pahal-showcase__entry-title {
	display: block;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-m);
	font-weight: 500;
	line-height: 1.3;
	color: var(--pahal-text-heading);
}

.pahal-showcase__entry-detail {
	display: block;
	margin-top: 0.1rem;
	font-size: var(--pahal-text-s);
	line-height: 1.5;
	color: var(--pahal-text-soft);
}

.pahal-showcase__where {
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
	white-space: nowrap;
}

.pahal-showcase__foot { padding: var(--pahal-space-xs) var(--pahal-space-m); }
.pahal-showcase__note { margin-top: var(--pahal-space-m); max-width: 72ch; }

/* Compact — the homepage. Identity and figures only, no dated rows. */
.pahal-showcase--compact .pahal-showcase__head { padding-block: var(--pahal-space-s); }
.pahal-showcase--compact .pahal-showcase__figures { border-bottom: 0; }
.pahal-showcase--compact .pahal-showcase__figure { padding-block: var(--pahal-space-xs); }

/* ---- Search form ------------------------------------------------------------------------ */

/*
 * Core's get_search_form() output, given the same treatment as every other
 * field on the site. It appears on the 404 page and in search results — the two
 * places a visitor is already slightly lost, which is the worst possible moment
 * to show them the one unstyled control on the site.
 */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pahal-space-2xs);
	max-width: 30rem;
	margin-top: var(--pahal-space-xs);
}

.search-form label { flex: 1 1 14rem; display: block; }
.search-form .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.search-field {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.75rem var(--pahal-space-xs);
	background-color: var(--pahal-surface-raised);
	border: 1px solid var(--pahal-rule-strong);
	border-radius: var(--pahal-radius);
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-body);
	color: var(--pahal-text);
	transition: border-color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.search-field:focus { border-color: var(--pahal-accent); }

.search-submit {
	flex: none;
	min-height: 3.25rem;
	padding: 0.75rem 1.5rem;
	background-color: var(--pahal-terracotta);
	border: 1px solid var(--pahal-terracotta);
	border-radius: var(--pahal-radius);
	color: var(--pahal-white);
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-s);
	font-weight: 500;
	letter-spacing: var(--pahal-track-button);
	cursor: pointer;
	transition: background-color var(--pahal-duration-fast) var(--pahal-ease-out),
	            border-color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.search-submit:hover,
.search-submit:focus-visible { background-color: var(--pahal-pine-deep); border-color: var(--pahal-pine-deep); }

/* ---- On-dark corrections -------------------------------------------------------------- */

/*
 * Components that can appear on a pine band restate the few colours that do not
 * come from a surface role. Everything else already reads its colour from the
 * tokens .pahal-on-dark redefines, which is the point of having them.
 */
.pahal-on-dark .pahal-pillar { border-top-color: var(--pahal-rule-strong); }
.pahal-on-dark .pahal-pillar__icon { color: var(--pahal-terracotta-light); }
.pahal-on-dark .pahal-step__num { color: var(--pahal-terracotta-light); }
.pahal-on-dark .pahal-timeline__when { color: var(--pahal-terracotta-light); }
.pahal-on-dark .pahal-ticks .pahal-icon { color: var(--pahal-terracotta-light); }
.pahal-on-dark .pahal-form-panel__form { background-color: rgb(244 239 229 / 6%); border-color: var(--pahal-rule); }
.pahal-on-dark .pahal-pull__quote p::before { color: var(--pahal-terracotta-light); }