/*
 * Contact page Figma fidelity pass (31 August, updated 1 September).
 * Fixes: the display heading above the form, underline only single line
 * fields, the underline treatment on the Message textarea, the correct hero
 * image, and Instagram in the Follow Us row.
 *
 * The Figma frame gives the Message textarea a white fill with a border only
 * on the bottom edge (individualStrokeWeights bottom 1, everything else 0),
 * same underline family as the single line fields, not the fully bordered
 * box content-fidelity.css ships by default. The rule below overrides that.
 *
 * This file is enqueued in functions.php, loading after content-fidelity.css
 * on the contact page, confirmed by grep.
 *
 * Selectors below are scoped with .contact-page so they win on specificity
 * over the shared .contact-form rules in content-fidelity.css regardless of
 * which stylesheet loads first.
 */

/*
 * Hero legibility, the treatment Archives and Publications already carry.
 *
 * The Contact photograph is light sand and pink, and the shared
 * .content-hero-tint is only rgba(8,12,10,.14), so the cream lede sat on its
 * own backdrop at 73.5 percent of its area below 4.5:1 at 1024, 66.6 at 768,
 * 66.2 at 1440 and 63.6 EN / 48.2 FR at 390, worst pixel 1.97:1. Measured by
 * hiding the paragraph and scoring its exact backdrop, the same method that
 * scores the fixed Archives hero at 0.0 percent.
 *
 * Same two layers as publications-fidelity.css: a flat forest wash that lifts
 * the whole band including the header, and a soft elliptical scrim that tracks
 * the copy box and fades to nothing before the frame edge, so the photograph
 * is still a photograph. No new colour, no new type size, no breakpoint.
 * Scoped to .contact-hero so the Insights and article heroes keep their own
 * lighter tint.
 */
.contact-page .contact-hero .content-hero-tint {
	background: rgba(37, 52, 50, .40);
}

.contact-page .contact-hero .content-hero-copy::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -100px -140px -120px;
	/* closest-side keeps the two radii at exactly half the box, so the scrim
	   reaches zero inside the frame it is drawn in instead of being clipped
	   into a visible rectangle. */
	background: radial-gradient(ellipse closest-side at 50% 50%, rgba(37, 52, 50, .60) 0%, rgba(37, 52, 50, .58) 70%, rgba(37, 52, 50, .30) 88%, rgba(37, 52, 50, 0) 100%);
	pointer-events: none;
}

.contact-page .contact-lede {
	grid-column: 1 / -1;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	font-size: 80px;
	line-height: 1.05;
}

.contact-page .contact-details h2.screen-reader-text,
.contact-page .contact-form-wrap h2.screen-reader-text {
	margin: 0;
}

.contact-page .contact-form input,
.contact-page .contact-form select {
	border: 0;
	border-bottom: 1px solid #e0e0dc;
	border-radius: 0;
	background: transparent;
	padding: 0 0 12px;
}

.contact-page .contact-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: auto;
	color: var(--color-ink);
	cursor: pointer;
}

.contact-page .contact-form select:invalid {
	color: #8f969d;
}

.contact-page .contact-form textarea {
	border: 0;
	border-bottom: 1px solid #e0e0dc;
	border-radius: 6px;
	background: #fff;
	padding: 14px 16px 12px;
}

.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus {
	outline: none;
	border-bottom-color: var(--color-forest);
	box-shadow: 0 1px 0 0 var(--color-forest);
}

.contact-page .contact-socials .social-links {
	display: flex;
	align-items: center;
	gap: 14px;
}

/*
 * Contact detail icon tile, client review a9026e98 "New icons on figma".
 *
 * Source of truth is the NEWER top-level Contact frame on Figma page 56:232,
 * node 56:1734 "Contact Us" (1440x2739), not the older 56:1566 frame. 56:1734
 * sits outside the "Last update 26/08" section and carries the NEW Footer, so
 * it is the current design. Its tiles are nodes 56:1782 (map-pin), 56:1789
 * (phone) and 56:1796 (envelope-simple):
 *   absoluteBoundingBox 40x40
 *   cornerRadius 9999, i.e. a full circle, NOT the radius 12 rounded square
 *     that the superseded 56:1566 frame used at node 56:1613
 *   fill rgb(255, 205, 92) = #ffcd5c, the shared --color-yellow token
 *   child glyph frame 24x24, centred, 8px inset on every side
 * A 4x render of 56:1782 next to 56:1613 confirms the shape change visually.
 *
 * The glyphs themselves are unchanged between the two frames: the same
 * Phosphor regular map-pin / phone / envelope-simple compound paths at
 * fill #080C0A on a 24x24 grid, already shipped as icon-contact-pin.svg,
 * icon-contact-phone.svg and icon-contact-mail.svg. So the tile shape is the
 * whole of this fix.
 *
 * The base tile lives in content-fidelity.css at border-radius 10px. That file
 * belongs to another workstream, and .contact-detail-icon is only ever
 * rendered by this template, so the correction is scoped here.
 */
.contact-page .contact-detail-icon {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--color-yellow);
}

/*
 * Submit button, client review on button consistency.
 *
 * content-fidelity.css still ships .contact-submit as a full width 61px bar,
 * which is what made it the only button on the site that was not the house
 * pill. That file belongs to another workstream, so the override is scoped
 * here: undo the stretch and let the shared .button rules in main.css own the
 * shape, the height and the arrow orb. The pill sits at the start of the form
 * grid instead of stretching across it, and main.js widens it for the longer
 * French label the same way it does for every other button.
 */
.contact-page .contact-submit {
	width: 242px;
	min-height: 69px;
	justify-self: start;
	font-size: 19px;
	font-weight: 400;
}

/* The same shrink main.css gives every .button at this width, so the submit is
   not a sixth pill size on mobile. */
@media (max-width: 620px) {
	.contact-page .contact-submit {
		min-height: 49px;
		font-size: 13px;
	}
}

/*
 * Map block.
 *
 * The Figma Contact frame carries a 1233 x 440 "MAP PLACEHOLDER" at radius 7.3
 * with a client note asking whether a live map can run on free resources, so
 * the sizing below is the frame's and the implementation is the free one: a
 * static map image served from this theme, not a third party iframe. See the
 * comment above the section in template-parts/page-contact.php for why the
 * iframe had to go.
 *
 * content-fidelity.css still ships a `.contact-map iframe` rule and a
 * `.contact-map > a` rule. The iframe rule is now inert. The anchor rule still
 * styles the OpenStreetMap button, which is why the attribution link is
 * wrapped in a paragraph rather than sitting as a direct child anchor.
 */
.contact-page .contact-map {
	height: 440px;
	border-radius: 7px;
	background: #e5e5e5;
}

.contact-page .contact-map-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(.72) contrast(.95);
}

.contact-page .contact-map-credit {
	position: absolute;
	left: 14px;
	bottom: 14px;
	margin: 0;
	border-radius: 999px;
	padding: 5px 12px;
	background: rgba(255, 250, 243, .82);
	color: #4a4f4c;
	font-size: 11px;
	line-height: 1.2;
}

.contact-page .contact-map-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 980px) {
	.contact-page .contact-lede {
		max-width: 640px;
		font-size: 58px;
	}
}

@media (max-width: 620px) {
	.contact-page .contact-lede {
		max-width: 100%;
		font-size: 42px;
	}
}

/*
 * "Contactez-nous" is one hyphenated word 14 characters long. At the shared
 * 54px mobile hero size it measures about 378px inside a 354px column, so the
 * browser broke it at its own internal hyphen and the hero read "Contactez-"
 * over "nous". English "Contact Us" has a real space in it and fitted on one
 * line, so this only ever showed in French.
 *
 * Both languages step down together rather than only French, so the two
 * versions of the page keep the same hero scale. 48px puts the French word at
 * roughly 336px, inside the column with room to spare.
 */
@media (max-width: 430px) {
  .contact-page .contact-hero h1 {
    font-size: 48px;
  }
}