/*
 * Contact page (page-contact.php) — 2026-10 rebuild.
 *
 * Enqueued by inc/cm-contact.php on the contact template only, after every
 * ENQUEUED theme sheet (style.css, gravity-forms.css, gf-2026.css,
 * modal-styles.css). cosmick-2026.css and cm-interior.css are hard-coded
 * <link>s in header.php and print AFTER this file, so any rule here that
 * overlaps one of theirs wins on SPECIFICITY (noted inline), never on order
 * and never with !important.
 *
 * Reference: cosmick-media-upgrade.replit.app/contact/ —
 *   .page-hero            coral wedge ::before, coral 110x4 bar ::after
 *   .contact-form-panel   radius 5, border #d2bdad, bg #fffaf5, no shadow
 *   aside > .card         radius 5, bg #f0e5da, border #d9c7b7, no shadow
 *   aside > .card:first   bg #292725, text #fbf8f5, icon #ff9b91
 *   location card         19px/700 ink title, 16px #4a4542 address,
 *                         "Get directions" tlink (one card per location)
 *
 * Deliberate deviations (accessibility, recorded for the owner):
 *   - eyebrow #8f1d15 and crumbs #4a4542 on the #f2c1b2 band (the reference's
 *     #b8352b / #6b6460 measure 3.64:1 / 3.61:1 there);
 *   - input border #a28c79 (3.08:1 on #fdfaf7) instead of the reference's
 *     #cbbfb4 (1.73:1), which fails WCAG 1.4.11 for a control boundary.
 */

/* ---------------------------------------------------------------------------
   Sticky rail fix
   ---------------------------------------------------------------------------
   cosmick-modern.css (legacy) sets `section { overflow-x: hidden }`. Any
   non-visible overflow other than `clip` turns the section into a scroll
   container, so the rail's `position: sticky` stuck to the SECTION instead of
   the viewport: it never moved, and sat 100px (its `top`) below the form.
   `clip` keeps the horizontal clipping without creating a scroll container.
   (0,1,1) beats the legacy element selector.
   --------------------------------------------------------------------------- */

.cm-ct > section { overflow-x: clip; overflow-y: visible; }

/* The same trap one level up: style.css `html, body { overflow-x: hidden }`
   leaves BODY a (non-scrolling) scroll container, because html's overflow is
   what propagates to the viewport. Sticky then measured against body and never
   engaged. html keeps its hidden (it is the viewport's), body clips instead.
   (0,1,1) beats both `body` rules. */
body.page-template-page-contact { overflow-x: clip; overflow-y: visible; }

/* ---------------------------------------------------------------------------
   Page head — the reference hero: coral wedge on the right (::before), coral
   110x4 bar (::after), no orbital rings. Same treatment as the blog index
   (cm-blog.css). (0,3,x) beats cm-interior.css's
   `body.page-template-page-contact .cm-page-head::after` (0,2,2).
   --------------------------------------------------------------------------- */

body.page-template-page-contact .cm-ct .cm-page-head > .cm-orbital { display: none; }

body.page-template-page-contact .cm-ct .cm-page-head::before {
	content: "";
	position: absolute;
	top: 0;
	right: -100px;
	z-index: -1;
	width: 180px;
	height: 100%;
	background: var(--cm26-brand);
	clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .72;
	pointer-events: none;
}

/* Decorative, not text: the 4.5:1 rule does not apply, so the reference coral. */
body.page-template-page-contact .cm-ct .cm-page-head::after { background: var(--cm26-brand); }

@media (min-width: 768px) {
	body.page-template-page-contact .cm-ct .cm-page-head::before { width: 300px; right: -160px; }
}

@media (max-width: 767px) {
	body.page-template-page-contact .cm-ct .cm-page-head::before { opacity: .36; }
}

/* Reference: H1 max 22ch (two lines at 1440), lede 22px below at <= 728px,
   crumbs 12px / 19.8px like the blog index. */
body.page-template-page-contact .cm-ct .cm-page-head h1 { max-width: 22ch; }

body.page-template-page-contact .cm-ct .cm-page-head .cm-lede { margin-top: 22px; max-width: 728px; }

body.page-template-page-contact .cm-ct .cm-page-head .cm-crumbs ol { font-size: 12px; line-height: 1.65; }

/* ---------------------------------------------------------------------------
   Form panel — the reference's contact form uses 5px fields and a 6px button
   ---------------------------------------------------------------------------
   gf-2026.css reads every radius from tokens, so re-scoping the two tokens on
   this one form changes the radii and nothing else (colours, borders and the
   3:1 input boundary stay gf-2026's).
   --------------------------------------------------------------------------- */

.cm-ct-form .gform_wrapper {
	--cm26-radius-input: 5px;
	--cm26-radius: 6px;
}

/* Panel: no drop shadow and no coral cap bar (the reference panel has
   neither). The panel's own class is kept so cm-interior.css still frames it. */
body.page-template-page-contact .cm-split--wide-aside .cm-card.cm-cap.cm-ct-form { box-shadow: none; }
body.page-template-page-contact .cm-split--wide-aside .cm-card.cm-cap.cm-ct-form::before,
body.page-template-page-contact .cm-split--wide-aside .cm-card.cm-cap.cm-ct-form::after { display: none; }

/* Title: the reference's h-card, 20px below, no rule. Beats cm-interior.css
   `body.page-template-page-contact .cm-pages-cardtitle` (0,2,1). */
body.page-template-page-contact .cm-ct-form .cm-pages-cardtitle {
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 0;
}

/* Fields. #gform_wrapper_1 (an id) outranks every gf-2026.css /
   gravity-forms.css field rule, so these settle on specificity. */
#gform_wrapper_1.gform_wrapper .gform_fields .gfield input[type="text"],
#gform_wrapper_1.gform_wrapper .gform_fields .gfield input[type="email"],
#gform_wrapper_1.gform_wrapper .gform_fields .gfield input[type="tel"],
#gform_wrapper_1.gform_wrapper .gform_fields .gfield input[type="url"],
#gform_wrapper_1.gform_wrapper .gform_fields .gfield select,
#gform_wrapper_1.gform_wrapper .gform_fields .gfield textarea {
	min-height: 48px;
	background-color: #fdfaf7;
	line-height: 1.65; /* a phone-only rule elsewhere sets 32px, making fields 57px tall */
}

#gform_wrapper_1.gform_wrapper .gform_fields .gfield textarea {
	height: 132px;
	min-height: 132px;
}

/* Field rhythm: the reference's 20px grid gap does all the spacing - no
   extra margin under a field, its label or its input. */
#gform_wrapper_1.gform_wrapper .gform_fields { row-gap: 20px; }
#gform_wrapper_1.gform_wrapper .gform_fields > .gfield { margin: 0; padding: 0; }
#gform_wrapper_1.gform_wrapper .gfield .ginput_container { margin-top: 0; }
#gform_wrapper_1.gform_wrapper .gfield > .gfield_label,
#gform_wrapper_1.gform_wrapper .gfield > .gform-field-label { margin: 0 0 6px; line-height: 1.5; }

/* Service tiles: inside the field column (no negative inset), two up on an
   8px grid, centred, at least 46px tall, regular-weight body text. */
#gform_wrapper_1.gform_wrapper .gfield_checkbox {
	gap: 8px;
	margin-top: 0;
}

#gform_wrapper_1.gform_wrapper .gform_fields .gfield .gchoice {
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: center;
	min-height: 46px;
	margin: 0;
	padding: 10px 12px;
}

#gform_wrapper_1.gform_wrapper .gchoice input[type="checkbox"] { margin: 0; }

/* The consent box had the same -10px inset; keep it inside the column too. */
#gform_wrapper_1.gform_wrapper .gfield .ginput_container_consent { margin-inline: 0; }

#gform_wrapper_1.gform_wrapper .gfield .gchoice label,
#gform_wrapper_1.gform_wrapper .gfield .gchoice .gform-field-label--type-inline {
	margin: 0;
	font-family: var(--cm26-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--cm26-ink);
}

/* Required: the reference's red "*". The "(Required)" text stays in the DOM,
   visually hidden, so screen readers still announce it; the asterisk is
   given empty alt text so it is not read as well. */
#gform_wrapper_1 .gfield_required > .gfield_required_text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#gform_wrapper_1 .gfield_required:has(> .gfield_required_text)::after {
	content: "*";
	content: "*" / "";
	font-style: normal;
	font-weight: 600;
	color: var(--cm26-brand-ink);
}

#gform_wrapper_1 .gfield_required { font-size: inherit; font-style: normal; }

/* Submit: the reference's .btn-primary (24.75px line, inset highlight + 3px
   brick shadow) with its chevron. */
#gform_wrapper_1.gform_wrapper .gform_footer { margin-top: 24px; }

#gform_wrapper_1.gform_wrapper .gform_footer .gform_button {
	gap: 6px;
	margin: 0;
	line-height: 1.65;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 3px 0 rgba(105, 33, 27, .12);
}

#gform_wrapper_1.gform_wrapper .gform_button svg {
	width: 18px;
	height: 18px;
	margin-right: -4px;
	transition: transform .2s var(--cm26-ease);
}

#gform_wrapper_1.gform_wrapper .gform_button:hover svg,
#gform_wrapper_1.gform_wrapper .gform_button:focus-visible svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   Rail — reference aside cards
   ---------------------------------------------------------------------------
   cosmick-2026.css `.cm-card` (0,1,0) and cm-interior.css
   `body.page-template-page-contact .cm-split-aside > .cm-aside-card:first-child`
   (0,4,1) style these. Ours are (0,4,2) so they win on specificity.
   --------------------------------------------------------------------------- */

body.page-template-page-contact main .cm-split-aside > .cm-aside-card {
	border-radius: 5px;
	background: #f0e5da;
	border-color: #d9c7b7;
	box-shadow: none;
}

body.page-template-page-contact main .cm-split-aside > .cm-aside-card:first-child {
	background: #292725;
	border-color: #d9c7b7; /* the reference keeps the sand hairline on the dark card */
	box-shadow: none;
}

body.page-template-page-contact main .cm-split-aside > .cm-aside-card + .cm-aside-card { margin-top: 20px; }

/* Call us (the dark card): heading #fbf8f5 as in the reference (14.06:1),
   the number 8px below it with no 44px floor (24px/800 text is ~40px tall). */
body.page-template-page-contact main .cm-split-aside > .cm-aside-card:first-child .cm-aside-title { color: #fbf8f5; }

body.page-template-page-contact main .cm-split-aside > .cm-aside-card:first-child .cm-pages-phone {
	margin-top: 8px;
	min-height: 0;
}

/* Location cards: the reference's card title (19px/700 ink, title case),
   address 16px #4a4542 (8.3:1 on #f0e5da), "Get directions" 12px below. */
.cm-ct-rail .cm-ct-loc-card { scroll-margin-top: calc(var(--cm26-header-h, 72px) + 24px); }

body.admin-bar .cm-ct-rail .cm-ct-loc-card { scroll-margin-top: calc(var(--cm26-header-h, 72px) + 56px); }

.cm-ct-rail .cm-ct-loc-card:target { border-color: var(--cm26-brand-ink); box-shadow: 0 0 0 2px var(--cm26-brand-ink); }

/* style.css gives every h2 big margins and padding; (0,2,0) resets them. */
.cm-ct-rail .cm-ct-card-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: -.015em;
	text-transform: none;
	color: var(--cm26-ink);
}

.cm-ct-rail .cm-ct-card-kind {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm26-brand-ink); /* 4.6:1 on #f0e5da */
}

.cm-ct-rail .cm-ct-address {
	margin: 8px 0 0;
	font-size: 16px;
	font-style: normal;
	line-height: 1.65;
	color: var(--cm26-body);
}

.cm-ct-rail .cm-ct-directions { margin-top: 12px; }

.cm-ct-rail .cm-ct-rail-copy { margin: 4px 0 0; }

/* The rail is sticky from 1024px (cm-interior.css). With five cards it is
   taller than a short laptop viewport, and a stuck rail taller than the
   viewport hides its last card until the form ends - so it only sticks
   where it fits. */
@media (min-width: 1024px) and (max-height: 1119px) {
	body.page-template-page-contact main .cm-split-aside { position: static; }
}

/* ---------------------------------------------------------------------------
   What happens next — every step inset the same way. cm-interior.css pads
   only steps 2-4 (li + li, beside their dividing rule), which left step 01's
   text flush left and out of line with the other three columns.
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.cm-ct .cm-pages-steps > li { padding-inline: 24px; }
}

/* ---------------------------------------------------------------------------
   Mobile polish
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#gform_wrapper_1.gform_wrapper .gform_button svg { transition: none; }
}

/* ---------------------------------------------------------------------------
   Our locations — one card per location, each with a click-to-load map.
   Nothing is requested from Google until the visitor presses "Show map".
   --------------------------------------------------------------------------- */

.cm-ct-maps .cm-ct-map-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.cm-ct-maps .cm-ct-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cm-ct-maps .cm-ct-map-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.cm-ct-maps .cm-ct-map {
	position: relative;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle at 50% 46%, rgba(184, 53, 43, .10) 0 22%, transparent 23%),
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(38, 36, 35, .05) 31px 32px),
		repeating-linear-gradient(90deg, transparent 0 31px, rgba(38, 36, 35, .05) 31px 32px),
		var(--cm26-paper);
	border-bottom: 1px solid var(--cm26-line);
}

.cm-ct-maps .cm-ct-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.cm-ct-maps .cm-ct-map-load {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 16px;
	border: 0;
	background: transparent;
	color: var(--cm26-ink);
	font: inherit;
	cursor: pointer;
}

.cm-ct-maps .cm-ct-map-load .cm-icon { color: var(--cm26-brand-ink); }
.cm-ct-maps .cm-ct-map-load-label { font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.cm-ct-maps .cm-ct-map-note { font-size: 12.5px; color: #6b6460; }
.cm-ct-maps .cm-ct-map-load:hover .cm-ct-map-load-label { color: var(--cm26-brand-ink); }
.cm-ct-maps .cm-ct-map-load:focus-visible { outline: 3px solid var(--cm26-brand-ink); outline-offset: -3px; }

.cm-ct-maps .cm-ct-map-body { padding: 20px 22px 22px; }
.cm-ct-maps .cm-ct-address { margin: 8px 0 0; font-style: normal; line-height: 1.6; }
.cm-ct-maps .cm-ct-directions { margin-top: 12px; }

/* Tablet: the map cards' city name still carries style.css's h3 (36-40px,
   27px padding, 35px margin), which overflows a third-width column and is
   clipped mid-word ("Pennsylvar") between 768 and 1279px. Same type as the
   aside cards; phones get it from rails/contact.css, 1280+ is left as is. */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.cm-ct-maps .cm-ct-map-body .cm-ct-card-title {
		margin: 0;
		padding: 0;
		font-size: 19px;
		line-height: 1.4;
		letter-spacing: -.015em;
		text-transform: none;
	}

	.cm-ct-maps .cm-ct-map-body .cm-ct-card-kind {
		margin: 4px 0 0;
		font-family: var(--cm26-font-display);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--cm26-brand-ink);
	}
}