/**
 * About and Contact us.
 *
 * Two Elementor section pages, built by `bin/build-about.php` and
 * `bin/build-contact.php` from the home page's parts, and held here to
 * `docs/design-standards.md`. Loaded on those two pages only
 * (`Storefront\AboutPages`), and **every rule is scoped under `.pod-about`**,
 * the body class that module adds.
 *
 * Every value is a token (`tokens.css`); the builder carries no colour of its
 * own. The home page's `landing.css` is not reused: it is scoped to the front
 * page, and these pages share its numbers through the tokens rather than its
 * selectors, so a change to the home page cannot move these.
 *
 * **How a section is reached.** Elementor drops `_css_classes` on a container,
 * so a section, a row or a card is found by its structure or by a marker class
 * on a widget inside it, with `:has()`:
 *
 *     .entry-content > .elementor > .e-con     a section
 *       > .e-con-inner > .e-con                its content box
 *         > .elementor-widget                  eyebrow, heading, lead
 *         > .e-con                             a row
 *           > .e-con                           a cell (a card)
 *
 * `.entry-content > .elementor` is the page's own document, not the site
 * footer, which is also an Elementor document on these pages. Not
 * `[data-elementor-type='wp-page']` as on the home page: these two were
 * imported as `wp-post` documents, the same type as the footer.
 *
 * Markers: `pod-about-hero` (the H1 on the photograph), `pod-mark-band` (the
 * promise heading on the photograph), `pod-about-card` (the first widget of a
 * card), `pod-about-detail` (a contact detail), `pod-about-team`,
 * `pod-about-photo` and `pod-about-form` (the SureForms card).
 *
 * Contents
 *  1. Type
 *  2. Sections and rhythm
 *  3. Photo sections (the heroes and the promise band)
 *  4. Rows: the split and the card grids
 *  5. Cards and icons
 *  6. The contact form (SureForms)
 *  7. Motion
 */

/* --- 1. Type ---------------------------------------------------------------- */

.pod-about .entry-content > .elementor {
	color: var( --pod-ink );
}

/*
 * The Display tier, once per page, on the photograph. The theme's own H1 was
 * 66px on a desktop and 30px on a phone; Display is 40 to 60.
 */
.pod-about .entry-content > .elementor .pod-about-hero .elementor-heading-title {
	color: var( --pod-on-ink );
	font-size: var( --pod-display-size );
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	text-wrap: balance;
}

.pod-about .entry-content > .elementor .elementor-widget-heading h2.elementor-heading-title {
	color: var( --pod-ink );
	font-size: var( --pod-h2-size );
	font-weight: 800;
	letter-spacing: var( --pod-title-tracking );
	line-height: 1.08;
	text-wrap: balance;
}

.pod-about .entry-content > .elementor .elementor-widget-heading h3.elementor-heading-title {
	color: var( --pod-ink );
	font-size: var( --pod-h3-size );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: balance;
}

/* A paragraph, not a heading (`eyebrow()` in `bin/lib/elementor-builder.php`). */
.pod-about .entry-content > .elementor .pod-eyebrow .elementor-heading-title {
	color: var( --pod-accent );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

/*
 * On the tinted sections ("How we work", the form) the accent is 4.2:1 against
 * `--pod-surface-2`, short of 4.5:1 for 13px text; the deeper blue passes
 * (docs/design-standards.md §3, Eyebrow).
 */
.pod-about .entry-content > .elementor > .e-con:is( :has( .pod-about-team ), :has( .pod-about-form ) ) .pod-eyebrow .elementor-heading-title {
	color: var( --pod-accent-deep );
}

.pod-about .entry-content > .elementor .elementor-widget-text-editor {
	color: var( --pod-ink );
	font-size: 1rem;
	line-height: 1.6;
	max-width: var( --pod-measure );
}

.pod-about .entry-content > .elementor .elementor-widget-text-editor.pod-lead {
	color: var( --pod-ink-soft );
	font-size: clamp( 1.0625rem, 1.5vw, 1.25rem );
	line-height: 1.55;
	max-width: var( --pod-measure-lead );
}

/* The theme gives every paragraph in the content 1.6em below it. */
.pod-about .entry-content > .elementor .elementor-widget-text-editor p {
	margin: 0;
}

/* --- 2. Sections and rhythm ------------------------------------------------- */

/*
 * 72px above and below every section, 48 on a phone (§4 "Landing-style
 * sections"), and the page gutter at the sides. Set on the section's inner
 * column, which is where Elementor puts a boxed container's vertical padding.
 */
.pod-about .entry-content > .elementor > .e-con {
	padding-inline: 0;
}

.pod-about .entry-content > .elementor > .e-con > .e-con-inner {
	padding: var( --pod-split ) var( --pod-gutter );
}

/* The content box adds nothing of its own; Elementor's default is 10px. */
.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con {
	margin-inline: 0;
	padding: 0;
}

/*
 * One tint to separate the section of cards from the white around it: "How we
 * work" on About, the form on Contact us.
 */
.pod-about .entry-content > .elementor > .e-con:has( .pod-about-team ),
.pod-about .entry-content > .elementor > .e-con:has( .pod-about-form ) {
	background: var( --pod-surface-2 );
}

/*
 * Inside a section the widgets sit 8px apart (the builder's gap: eyebrow to
 * title). A section heading opens 16px to its paragraph, and 40px to the cards
 * when nothing comes between them; a lead opens 40px to what follows it.
 */
.pod-about .entry-content > .elementor .elementor-widget-heading:has( h2 ) {
	margin-bottom: calc( var( --pod-near ) - var( --pod-tight ) );
}

.pod-about .entry-content > .elementor .elementor-widget-heading:has( h2 ):has( + .e-con ),
.pod-about .entry-content > .elementor .elementor-widget.pod-lead:not( :last-child ) {
	margin-bottom: calc( var( --pod-break ) - var( --pod-tight ) );
}

/* The team closes "How we work", one break below the cards. */
.pod-about .entry-content > .elementor .elementor-widget.pod-about-team {
	margin-top: calc( var( --pod-break ) - var( --pod-tight ) );
}

@media ( max-width: 767px ) {
	.pod-about .entry-content > .elementor > .e-con > .e-con-inner {
		padding-block: calc( var( --pod-split ) * 2 / 3 );
	}
}

/* --- 3. Photo sections ------------------------------------------------------ */

/*
 * The owner's photographs, under an ink gradient (55% to 70%), so the white
 * type always sits on the overlay and never on the bare photograph (§5 "Photo
 * heroes"). The photograph itself is the section's Elementor background.
 */
.pod-about .entry-content > .elementor > .e-con:is( :has( .pod-about-hero ), :has( .pod-mark-band ) )::before {
	background: linear-gradient( 180deg, var( --pod-scrim ), color-mix( in srgb, var( --pod-ink ) 70%, transparent ) );
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.pod-about .entry-content > .elementor > .e-con:is( :has( .pod-about-hero ), :has( .pod-mark-band ) ) > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* The hero is the title and the photograph, so it gets twice a section's air. */
.pod-about .entry-content > .elementor > .e-con:has( .pod-about-hero ) > .e-con-inner {
	padding-block: calc( var( --pod-split ) * 2 );
}

@media ( max-width: 767px ) {
	.pod-about .entry-content > .elementor > .e-con:has( .pod-about-hero ) > .e-con-inner {
		padding-block: var( --pod-split );
	}
}

.pod-about .entry-content > .elementor > .e-con:has( .pod-mark-band ) .pod-mark-band .elementor-heading-title {
	color: var( --pod-on-ink );
}

/* --- 4. Rows ---------------------------------------------------------------- */

/*
 * A row is a grid here rather than the builder's percentage cells, so the
 * cards keep one gutter and one height at every width. Three cards use the
 * standard's card grid (§4 "Grids").
 */
.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con {
	display: grid;
	gap: var( --pod-apart );
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 11.5rem ), 1fr ) );
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con > .e-con {
	padding: 0;
	width: auto;
}

/*
 * Four cards divide by four, two and one, so those are the only layouts: a
 * fluid grid left the fourth card alone on a row at tablet width. Four-up from
 * 1100px (§4 "Breakpoints", Wide).
 */
.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con:has( > .e-con:nth-child( 4 ):last-child ) {
	grid-template-columns: 1fr;
}

@media ( min-width: 600px ) {
	.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con:has( > .e-con:nth-child( 4 ):last-child ) {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1100px ) {
	.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con:has( > .e-con:nth-child( 4 ):last-child ) {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/*
 * A split: words beside the photograph ("Who we are") or beside the form.
 * Stacked until the desktop breakpoint, with the break between the two; side by
 * side from 1025px, with the wider split gutter.
 */
.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con:has( > .e-con:nth-child( 2 ):last-child ) {
	gap: var( --pod-break );
	grid-template-columns: 1fr;
}

@media ( min-width: 1025px ) {
	.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con:has( > .e-con:nth-child( 2 ):last-child ) {
		align-items: center;
		column-gap: var( --pod-split );
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/*
	 * The form is the larger half, and its introduction reads from the top.
	 * Both `:has()`s, so this out-ranks the split above: a `:has()` weighs what
	 * its heaviest argument weighs, and the split's `> .e-con:nth-child( 2
	 * ):last-child` is three classes against `.pod-about-form`'s one.
	 */
	.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con:has( > .e-con:nth-child( 2 ):last-child ):has( .pod-about-form ) {
		align-items: start;
		grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr );
	}
}

.pod-about .entry-content > .elementor .pod-about-photo img {
	border-radius: var( --pod-radius-lg );
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* --- 5. Cards and icons ----------------------------------------------------- */

/*
 * Static cards (§5 "Cards"): statements to read, not controls, so no shadow and
 * no hover. The card is the cell; `pod-about-card` marks its first widget.
 */
.pod-about .entry-content > .elementor > .e-con > .e-con-inner > .e-con > .e-con > .e-con:has( > .pod-about-card ) {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	padding: var( --pod-apart );
}

/*
 * The contact detail sits at the foot of its card, so the four details line up
 * across the row whatever the lines above them do.
 */
.pod-about .entry-content > .elementor .elementor-widget.pod-about-detail {
	font-weight: 600;
	margin-top: auto;
	padding-top: var( --pod-tight );
}

/*
 * An icon from the shop's set on a tinted disc: the home page's white disc
 * would disappear on these white cards. Accent on the wash is 4.07:1, over
 * the 3:1 a graphic needs.
 */
.pod-about .entry-content > .elementor .pod-icon-badge {
	align-items: center;
	background: var( --pod-accent-wash );
	border-radius: var( --pod-radius-pill );
	color: var( --pod-accent );
	display: inline-flex;
	height: var( --pod-btn-h );
	justify-content: center;
	margin-bottom: calc( var( --pod-near ) - var( --pod-tight ) );
	width: var( --pod-btn-h );
}

.pod-about .entry-content > .elementor .pod-icon-badge .pod-icon {
	height: 24px;
	width: 24px;
}

/* --- 6. The contact form (SureForms) --------------------------------------- */

/*
 * The form in a static card. Padding 24, like every static card.
 */
.pod-about .entry-content > .elementor .elementor-widget.pod-about-form {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	padding: var( --pod-apart );
}

/*
 * SureForms is styled through its own variables, which its stylesheet reads for
 * every field, label, error and the button. It prints them inline on
 * `.srfm-form-container-<id>`, one class; these win at three. The values are
 * the standard's fields (§5 "Fields") and primary button.
 */
.pod-about .pod-about-form .srfm-form-container {
	--srfm-color-scheme-primary: var( --pod-accent );
	--srfm-color-scheme-text-on-primary: var( --pod-on-ink );
	--srfm-color-scheme-text: var( --pod-ink );
	--srfm-body-input-color: var( --pod-ink );
	--srfm-color-input-label: var( --pod-ink );
	--srfm-color-input-description: var( --pod-ink-soft );
	--srfm-color-input-placeholder: var( --pod-ink-soft );
	--srfm-color-input-text: var( --pod-ink );
	--srfm-color-input-prefix: var( --pod-ink-soft );
	--srfm-color-input-background: var( --pod-surface );
	--srfm-color-input-background-hover: var( --pod-surface );
	--srfm-color-input-border: var( --pod-field-border );
	--srfm-color-input-border-hover: var( --pod-accent );
	--srfm-color-input-border-focus-glow: var( --pod-accent );
	--srfm-btn-color-hover: var( --pod-accent-deep );
	--srfm-error-color: var( --pod-danger );
	--srfm-error-color-border: var( --pod-danger );
	--srfm-error-color-border-glow: var( --pod-danger );

	--srfm-input-height: var( --pod-btn-h );
	--srfm-input-field-border-radius: var( --pod-radius );
	--srfm-input-field-padding: 0 var( --pod-near );
	/* Never under 16px, or iOS zooms the page when a field is focused. */
	--srfm-input-field-font-size: var( --pod-field-size );
	--srfm-input-field-line-height: 1.5;
	--srfm-input-field-margin-top: var( --pod-hair );
	--srfm-input-field-margin-bottom: 0;

	--srfm-label-font-size: 0.875rem;
	--srfm-label-font-weight: 600;
	--srfm-label-line-height: 1.4;

	/* A length, because SureForms also sizes the error line's box with it. */
	--srfm-error-font-size: 0.8125rem;
	--srfm-error-font-weight: 400;
	--srfm-error-line-height: 1.25rem;

	--srfm-row-gap-between-blocks: var( --pod-tight );

	--srfm-btn-border-radius: var( --pod-radius-pill );
	--srfm-btn-font-size: var( --pod-btn-size );
	--srfm-btn-font-weight: 700;
	--srfm-btn-line-height: 1.2;
	--srfm-btn-padding: 0 var( --pod-btn-x );
}

/*
 * The field's focus: an accent border and a 1px ring, not SureForms' 3px glow,
 * and a transparent outline for forced-colours mode, which drops box shadows.
 * One class more than SureForms' own rule, so the order the two stylesheets
 * load in does not decide it.
 */
.pod-about .pod-about-form .srfm-form-container .srfm-form .srfm-block .srfm-input-common {
	transition:
		border-color var( --pod-fast ) var( --pod-ease ),
		box-shadow var( --pod-fast ) var( --pod-ease );
}

.pod-about .pod-about-form .srfm-form-container .srfm-form .srfm-block .srfm-input-common:focus {
	border-color: var( --pod-accent );
	box-shadow: 0 0 0 1px var( --pod-accent );
	outline: 2px solid transparent;
}

.pod-about .pod-about-form .srfm-form-container .srfm-form .srfm-block.srfm-error .srfm-block-wrap .srfm-input-common:focus {
	border-color: var( --pod-danger );
	box-shadow: 0 0 0 1px var( --pod-danger );
}

.pod-about .pod-about-form .srfm-form-container .srfm-form .srfm-textarea-block .srfm-input-textarea {
	min-height: 7rem;
	padding-block: 0.75rem;
}

/* The asterisk is part of the label, in the label's colour. */
.pod-about .pod-about-form .srfm-form-container .srfm-block-label .srfm-required {
	color: inherit;
}

/*
 * Send message: the page's one primary button (§5 "Buttons"). 48px, flat, with
 * the standard focus ring in place of SureForms' glow.
 */
.pod-about .pod-about-form .srfm-form-container .srfm-button {
	align-items: center;
	box-shadow: none;
	display: inline-flex;
	justify-content: center;
	letter-spacing: 0;
	min-height: var( --pod-btn-h );
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

.pod-about .pod-about-form .srfm-form-container .srfm-button:hover {
	background: var( --pod-accent-deep );
	border-color: var( --pod-accent-deep );
}

.pod-about .pod-about-form .srfm-form-container .srfm-button:focus {
	box-shadow: none;
}

.pod-about .pod-about-form .srfm-form-container .srfm-button:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

@media ( max-width: 599px ) {
	.pod-about .pod-about-form .srfm-form-container .srfm-button {
		width: 100%;
	}
}

/*
 * The confirmation and the form-level error are notices (§5 "Notices"):
 * success or danger wash, a 3px bar, no icon glyph.
 */
.pod-about .pod-about-form .srfm-form-container .srfm-success-box {
	min-height: 0;
}

.pod-about .pod-about-form .srfm-form-container .srfm-success-box .srfm-success-box-description:not( :empty ) {
	background: var( --pod-success-wash );
	border-left: 3px solid var( --pod-success );
	border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0;
	color: var( --pod-ink );
	font-size: 0.9375rem;
	line-height: 1.5;
	padding: var( --pod-near ) var( --pod-apart );
}

.pod-about .pod-about-form .srfm-form-container .srfm-common-error-message:not( [hidden] ) {
	background: var( --pod-danger-wash );
	border-left: 3px solid var( --pod-danger );
	border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0;
	color: var( --pod-ink );
	font-size: 0.9375rem;
	line-height: 1.5;
	padding: var( --pod-near ) var( --pod-apart );
}

.pod-about .pod-about-form .srfm-form-container .srfm-common-error-message .srfm-icon {
	display: none;
}

/* --- 7. Motion -------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.pod-about .pod-about-form .srfm-form-container .srfm-form .srfm-block .srfm-input-common,
	.pod-about .pod-about-form .srfm-form-container .srfm-button {
		transition: none;
	}
}