/*
 * Marlow & Pine — site CSS.
 *
 * Everything here is either (a) an element-level default the design states
 * globally in its own <style> block, or (b) a rule no single g/* block can
 * express. Anything a block CAN express stays in cpStyleIntent, where the next
 * person to edit the page will actually find it.
 *
 * In `@layer cp-base` on purpose: cp-base < cp-core < cp-plugin < unlayered, so
 * every rule below loses to whatever an author sets in the panel. See the
 * parent's child-starter README — an unlayered `a { color: … }` here would beat
 * the panel and be almost impossible to suspect.
 *
 * NOT here: @font-face (theme.json), box-sizing (g-box ships cp-reset.css), and
 * overflow-x on html/body — the design puts overflow-x:hidden on its page
 * wrapper, but that silently kills the sticky header, so it is omitted until a
 * horizontal scrollbar actually shows up, and then it will be `clip`.
 */

@layer cp-base {
	/*
	 * The design zeroes these globally rather than per element. Doing it in
	 * cpStyleIntent would mean the same declaration on ~150 blocks, and the
	 * layer keeps any per-block margin winning anyway.
	 */
	h1,
	h2,
	h3,
	h4,
	p {
		margin: 0;
	}

	ul {
		margin: 0;
	}

	body {
		background: #f4f4f2;
		font-family: 'Inter Tight', system-ui, sans-serif;
		color: #101112;
		-webkit-font-smoothing: antialiased;

		/*
		 * `clip`, never `hidden`.
		 *
		 * The mockup wraps its whole page in a div with `overflow-x:hidden` to
		 * swallow the header's overflow on narrow screens. That silently breaks
		 * its own sticky header: `overflow-x:hidden` with a visible
		 * `overflow-y` computes to `overflow-y:auto`, the div becomes the
		 * scroll container, and `position:sticky` inside it never engages.
		 * Measured on the mockup at 1440: scroll 1500px and the header ends up
		 * at top:-1467 — it scrolls away like any static element, at every
		 * width.
		 *
		 * `clip` hides the same overflow without creating a scroll container,
		 * so the sticky the design ASKS for actually happens. It goes on the
		 * page wrapper rather than on `body`: overflow set on body propagates
		 * to the viewport instead of clipping locally, which left the
		 * scrollbar in place.
		 */
	}

	.wp-site-blocks {
		overflow-x: clip;
	}

	/*
	 * Links INHERIT rather than being painted ink here.
	 *
	 * The design writes `a { color:#101112 }` globally and then overrides it
	 * inline on every link that is not ink — footer nav (#5C5F63), legal bar
	 * (#8B8E92), the email address (#E8552B). Copying that literally breaks the
	 * block model: an `a` type selector beats inheritance, so a colour set on
	 * the BLOCK never reaches the anchor inside it, and the panel shows a value
	 * that does nothing. That is how the footer nav and legal bar first came out
	 * ink instead of grey.
	 *
	 * `inherit` gets the same rendered result — body is ink, so a link with no
	 * opinion is ink — while leaving colour where it belongs: on the block, in
	 * the panel, visible to whoever edits next.
	 */
	a {
		color: inherit;
		text-decoration: none;
	}

	/*
	 * Hover stays a real colour because it has nothing to inherit FROM. Blocks
	 * that invert on hover (header CTA, footer CTA) set their own hover scope,
	 * and cp-plugin outranks cp-base, so they win.
	 */
	a:hover {
		color: #e8552b;
	}

	/*
	 * The email address in the footer. Like .mp-amp, this is one anchor inside
	 * one block's rich text — a fragment, not a block, so the panel cannot
	 * reach it.
	 */
	.mp-mail {
		color: #e8552b;
	}

	input::placeholder,
	textarea::placeholder {
		color: #a2a5a8;
	}

	/*
	 * The orange ampersand inside the wordmark. It lives in the heading's rich
	 * text, so it is one <span> inside one block's content — not addressable
	 * from the panel, which styles the block, not a fragment of its text.
	 */
	.mp-amp,
	.mp-accent {
		color: #e8552b;
	}

	/*
	 * The design marks no field as required — obligation is shown by the inline
	 * error after a failed submit, not by a marker on the caption. g-form ties
	 * the asterisk to `required` with no way to turn it off (MP-8), and
	 * `.gform-field__req` is not one of the style sub-targets, so the panel
	 * cannot reach it. Remove when MP-8 lands.
	 *
	 * Safe to hide: the span is already aria-hidden, and the accessible
	 * requirement rides on the control's own `required` attribute.
	 */
	.gform-field__req {
		display: none;
	}
}