/**
 * Contact Us page — oatmeal surface, rounded form box, the WPForms field
 * grid, form-field typography, and the three contact cards below the form.
 *
 * Wrapper: #stw-contact, the <section> that opens the page's LiveCanvas
 * markup (stw-uk post 15). Every rule below is scoped under it, so the
 * WPForms typography here cannot reach any other form on the site — the same
 * discipline stw-account.css applies under #stw-account.
 *
 * Standalone plain CSS rather than a sass/ partial, same reasoning as
 * stw-product.css / stw-basket.css / stw-account.css: a tweak to this one page
 * shouldn't need a full bundle recompile plus a css_bundle_version_number
 * cache-buster bump.
 *
 * The yellow keyword highlight in the H1 uses the *global* .hl class
 * (sass/_stw-global.scss, already in bundle.css) and is deliberately not
 * redefined here.
 *
 * @package stw2026
 */

/* ─────────────────────────────────────────────────────────────────────
   Page surface
   ───────────────────────────────────────────────────────────────────── */

#stw-contact {
	/* Deliberately the same literal as --stw-cat-bg in
	   sass/category/_category.scss (the product-category / "meal cat" archive
	   background), so the contact page and the category pages read as one
	   surface. Duplicated rather than promoted to a shared token for the same
	   reason as the oklch() literals documented in CLAUDE.md § Single product
	   page: this file is hand-authored plain CSS outside the SASS pipeline, and
	   a shared token would cost a bundle recompile + cache-buster bump for no
	   behavioural gain. */
	background: oklch(0.972 0.008 70);
	/* The last row is the correspondence address, which sits directly on the
	   coloured surface — without this the tint stops tight under that line and
	   reads as a clipped band rather than a page. */
	padding-bottom: 56px;
}

/* Intro line under the H1.

   The column is .col-10 inside a .container-xxl, which at 1800px of container
   gives the sentence a measure well past 100 characters — unreadable as a
   single centred line. 62ch caps it, and margin-inline: auto re-centres the
   now-narrower block inside the text-center column (the global .lead already
   sets max-width: 60ch but no auto margins, so without this the block hugs the
   column's left edge).

   Size and colour come from the global .lead (sass/_stw-global.scss: 18px/500,
   --stw-grey-700) and are deliberately not redeclared — 18px already reads a
   step up from the 16px body copy further down the page, and grey-700 already
   sits a step softer than the H1's ink. */
#stw-contact .stw-contact__intro {
	max-width: 62ch;
	margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────
   WPForms — field grid
   ─────────────────────────────────────────────────────────────────────
   Target layout:

     [ First name        ][ Surname     ]
     [ Email address     ][ Subject   v ]
     [ Message ..................full.. ]

   Two columns on .wpforms-field-container, with each field placed by its
   WPForms *type* class — never by #wpforms-<id>-field_N-container, which
   carries the form ID and would break the moment the form is rebuilt.

   The Name field's own internal First/Surname row (.wpforms-field-row +
   .wpforms-field-row-block.wpforms-one-half) is deliberately untouched: it is
   a float layout inside a single grid item and still works exactly as WPForms
   ships it.

   No row-gap: WPForms' own `.wpforms-container .wpforms-field { padding: 10px
   0 }` already supplies 20px between rows, and adding a gap on top of it would
   double the vertical rhythm.

   The clearfix trap that bit the account page's #customer_login (CLAUDE.md
   § My Account) does NOT apply here — checked, not assumed: WPForms puts its
   ::before/::after clearfix on .wpforms-field-row, which is a *child* of a grid
   item, not on .wpforms-field-container itself, so no pseudo-element ever
   becomes a grid item. If a future WPForms version moves that clearfix up to
   the container, display:none them the way stw-account.css does.
   ───────────────────────────────────────────────────────────────────── */

#stw-contact .wpforms-field-container {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a bare 1fr floors at min-content, and the
	   select's longest option ("There is a problem with my order") would then
	   push its column wider than half. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

/* Full-width rows. Name carries its own two-up row inside; the message box
   wants the whole measure. */
#stw-contact .wpforms-field-container > .wpforms-field-name,
#stw-contact .wpforms-field-container > .wpforms-field-textarea {
	grid-column: 1 / -1;
}

/* The paired middle row. Placed explicitly rather than left to auto-flow, so
   the pairing survives a field being added above them in the form builder. */
#stw-contact .wpforms-field-container > .wpforms-field-email {
	grid-column: 1;
}

#stw-contact .wpforms-field-container > .wpforms-field-select {
	grid-column: 2;
}

@media (max-width: 767.98px) {
	/* One column below md — every field full width, including the pair. */
	#stw-contact .wpforms-field-container {
		grid-template-columns: minmax(0, 1fr);
	}

	#stw-contact .wpforms-field-container > .wpforms-field-email,
	#stw-contact .wpforms-field-container > .wpforms-field-select {
		grid-column: 1;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   WPForms — field typography
   ───────────────────────────────────────────────────────────────────── */

#stw-contact .wpforms-field-label {
	font-family: var(--stw-font);
	font-size: 15px;
	/* 700, matching WPForms' own .wpforms-container .wpforms-field-label weight
	   rather than fighting it — this rule wins on specificity (1,1,0 vs 0,2,0)
	   either way, so the value has to be set here, not left to inherit. */
	font-weight: 700;
	color: var(--stw-ink);
	margin-bottom: 8px;
}

#stw-contact .wpforms-required-label {
	color: var(--stw-pink);
}

#stw-contact .wpforms-field input[type="text"],
#stw-contact .wpforms-field input[type="email"],
#stw-contact .wpforms-field select,
#stw-contact .wpforms-field textarea {
	font-family: var(--stw-font);
	/* 16px keeps iOS from zooming the viewport on focus — same reasoning as the
	   account page's field rule in stw-account.css. */
	font-size: 16px;
	line-height: 1.5;
	color: var(--stw-ink);
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--stw-grey-300);
	border-radius: var(--stw-radius-md);
}

#stw-contact .wpforms-field input[type="text"]:focus,
#stw-contact .wpforms-field input[type="email"]:focus,
#stw-contact .wpforms-field select:focus,
#stw-contact .wpforms-field textarea:focus {
	outline: none;
	border-color: var(--stw-pink);
	/* --stw-pink (#F06292) at low alpha — a custom property can't be used
	   inside rgba(), and the account page's focus ring does the same thing with
	   its own accent colour. */
	box-shadow: 0 0 0 3px rgba(240, 98, 146, .22);
}

#stw-contact .wpforms-field input::placeholder,
#stw-contact .wpforms-field textarea::placeholder {
	color: var(--stw-grey-400);
}

#stw-contact .wpforms-field textarea {
	min-height: 150px;
}

/* Chromium lays a <select> out on its own internal line box and ignores the
   line-height above, so with identical font-size and padding the Subject
   dropdown still measured 47px against the Email input's 50px — visibly
   uneven now the two sit side by side in the grid. calc() reproduces the
   input's own box (1.5em text + 24px padding + 2px border) rather than
   hardcoding 50px, so the pair stays matched if the font-size changes. */
#stw-contact .wpforms-field select {
	height: calc(1.5em + 26px);
}

/* ─────────────────────────────────────────────────────────────────────
   Contact cards — Talk to us / WhatsApp / Email us
   ─────────────────────────────────────────────────────────────────────
   The house card shape, reproduced: white, 18px radius, 14px 14px 18px
   padding, a 10px-radius clipped media box with an object-fit: cover image,
   and no box-shadow at all.

   The original is `#stw-category .stw-card` in sass/category/_category.scss —
   ID-scoped, so bundle.css only ever ships it under #stw-category and it can't
   be inherited here. Same situation, and same resolution, as the account
   page's .app-store badges (CLAUDE.md § My Account): the rules are repeated
   rather than shared. Keep the two in step if the card shape changes.

   The one deliberate difference: aspect-ratio 4 / 3 rather than the product
   card's 1 / 1 — these are landscape photographs, not packshots.
   ───────────────────────────────────────────────────────────────────── */

#stw-contact .stw-contact__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	border-radius: 18px;
	background: #fff;
	padding: 14px 14px 18px;
}

#stw-contact .stw-contact__card-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
}

#stw-contact .stw-contact__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The global h3 is clamp(24px, 3vw, 36px) — a section heading, far too big
   inside a third-width card. 20px sits just above the card's own .lead line
   and keeps the page H1 dominant. */
#stw-contact .stw-contact__card h3 {
	margin: 0;
	font-size: 20px;
	letter-spacing: -.01em;
	line-height: 1.2;
}

#stw-contact .stw-contact__card p {
	margin: 0;
}

/* .lead's global max-width: 60ch is wider than the card, so only the size and
   colour carry over; this is the card's key line (the number, the address). */
#stw-contact .stw-contact__card .lead {
	font-weight: 700;
	color: var(--stw-ink);
}

/* Pins the button to the bottom of the card so all three CTAs line up
   regardless of copy length — the same job .stw-card__cart does on the
   product card. */
#stw-contact .stw-contact__card-cta {
	margin-top: auto;
	padding-top: 4px;
}

/* Full-width CTAs (v2.42.1): a short centred pill under a full-width card read
   as an afterthought. `display: flex` rather than `block` because the theme's
   global .btn is inline-flex and already centres its own label with
   align-items/justify-content — switching to block would lose that. .btn-sm's
   own height and padding are untouched, so the tap target is unchanged. */
#stw-contact .stw-contact__card-cta .btn {
	display: flex;
	width: 100%;
}

/* The card CTAs carry Bootstrap's `.btn.btn-sm.btn-outline-primary`, but this
   theme's own global `.btn` (sass/_stw-global.scss) compiles *after* Bootstrap
   in bundle.css and sets `border: 2px solid transparent` with no background,
   which flattens every `.btn-outline-*` on the site into bare coloured text —
   pre-existing and site-wide, not caused by this page. Rather than change a
   global button rule from a page stylesheet, the outline is restored here for
   these three CTAs only, at (1,2,0) so no !important is needed. The underlying
   global conflict is flagged in CLAUDE.md, not fixed here. */
#stw-contact .stw-contact__card-cta .btn-outline-primary {
	background: #fff;
	border-color: var(--stw-pink);
	color: var(--stw-pink);
}

#stw-contact .stw-contact__card-cta .btn-outline-primary:hover,
#stw-contact .stw-contact__card-cta .btn-outline-primary:focus-visible {
	background: var(--stw-pink);
	border-color: var(--stw-pink);
	color: #fff;
}

/* WhatsApp CTA — solid brand green (v2.42.1).

   This deliberately differs from the checkout WhatsApp button
   (.stw-checkout__whatsapp-btn), which is STW-styled with the green confined
   to its icon. Phil asked for the solid green here specifically. Both
   treatments are intentional: do not "harmonise" one to the other without
   asking him — see CLAUDE.md § Contact cards.

   No .btn-outline-primary on this anchor, so the outline restore above doesn't
   reach it; the colours are set outright instead. */
#stw-contact .stw-contact__card-cta .stw-contact__wa-btn {
	background: #25D366;
	border-color: #25D366;
	color: #fff;
}

#stw-contact .stw-contact__card-cta .stw-contact__wa-btn:hover {
	background: #1EBE5A;
	border-color: #1EBE5A;
	color: #fff;
}

/* The green ring replaces the global :focus-visible outline rather than
   removing the affordance — the same pattern, and the same 3px, as the form
   fields' pink ring above. */
#stw-contact .stw-contact__card-cta .stw-contact__wa-btn:focus-visible {
	background: #1EBE5A;
	border-color: #1EBE5A;
	color: #fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 211, 102, .35);
}