/**
 * css/components/contact-flyout.css — slide the contact fly-out in and out.
 *
 * The gff-contact plugin shows its panel by flipping `display:none` to
 * `display:block` on `.active`, which cannot animate. This keeps the panel in
 * the layout at all times, parked off the right edge, and slides it in — 250ms
 * in, 500ms out, matching the sitewide fade law.
 *
 * gff-contact is this project's own plugin, not third party (CLAUDE.md: it is
 * the one directory under plugins/ we may edit) — its JS adds `body
 * .contact-open` alongside `.active` so the rules below can move the PAGE, not
 * just the panel. Everything else here overrides the plugin's stylesheet from
 * a later sheet in the cascade.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

:root {
	--w-contact-flyout: 400px;
}

/*
 * `width`, not just `max-width`.
 *
 * The panel is absolutely positioned, so with only a max-width it is
 * shrink-to-fit: its width comes from whatever form happens to be inside it,
 * capped at 400px. Meanwhile the page slides aside by a FLAT
 * `--w-contact-flyout` (the translateX below). Those two numbers only agreed
 * because the old Gravity Form's intrinsic width happened to reach the cap.
 * The HubSpot embed (#433) sizes to 386.172px, so the page moved 400px, the
 * panel filled 386, and 14px of page showed through the seam — reported from
 * a screenshot, then measured.
 *
 * Binding the width to the same variable as the translate makes the seam
 * exact by construction rather than by coincidence, for any form this panel
 * ever holds. The max-width stays as the belt to this braces: it is what the
 * `max-width: none` override in the sub-1024px block below has to beat.
 */
.contact-popup-gff .contact-popup-form {
	display: block;
	width: var( --w-contact-flyout );
	max-width: var( --w-contact-flyout );
	transform: translateX( 105% );
	visibility: hidden;
	transition:
		transform var( --fade-out ) var( --fade-ease ),
		visibility 0s linear var( --fade-out );
	will-change: transform;
}

.contact-popup-gff.active .contact-popup-form {
	transform: translateX( 0 );
	visibility: visible;
	transition:
		transform var( --fade-in ) var( --fade-ease ),
		visibility 0s;
}

/*
 * Keeping the panel in the layout (above) had a side effect: the shell is
 * `position:fixed; right:0` with a shrink-to-fit width, so once the panel was
 * always `display:block` the shell wrapped the 400px PANEL instead of the
 * button — and the button, a normal-flow child at the shell's left edge, was
 * pushed 319px in from the window edge. `overflow-x:clip` hid the parked
 * panel but the shell still occupied its width, so the tab read as floating
 * mid-page rather than clinging to the edge.
 *
 * The shell therefore spans the window and both children are positioned
 * against it: the panel parks and clips against the true window edge, and the
 * tab is pinned to `right:0` where it belongs, at any window size.
 */
/*
 * Stacking. The shell shipped at `z-index:auto`, which put it at level 0 —
 * and `.cg-hero` is `position:relative; z-index:auto`, so it establishes NO
 * stacking context and its children's z-indexes escape into the root one.
 * The hero's `__scrim` (z:1) and `__body` (z:2) therefore painted OVER the
 * tab, tinting the rust to rgb(132,102,90); and the sticky/mobile nav (both
 * z:1000) painted over the open panel, clipping its top. Hit-testing could
 * not catch either — the scrim is pointer-events:none, so elementFromPoint
 * still returned the button. 1100 clears the nav and everything below it.
 */
.contact-popup-gff {
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	margin-top: 0;
	z-index: 1100;
	overflow-x: clip;
	overflow-y: visible;
	pointer-events: none;
}

/*
 * The tab is centred on the window. The plugin offset the shell by `top:25%`
 * plus `margin-top:-5%`, and a percentage margin resolves against the
 * containing block's WIDTH — so the tab drifted as the window got wider
 * (-72px at 1440, -128px at 2560) and sat up near the top right. Centring is
 * both steadier and where a full-height edge tab belongs.
 *
 * translateY runs before the rotation in the composed matrix, so it shifts
 * the un-rotated box by half its own height — putting the tab's centre on
 * the window's centre, which is what rotate() then pivots around.
 *
 * Selector scoped to `.contact-popup-trigger` in #433. It read
 * `.contact-popup-gff button` while the only button in the flyout was the
 * tab itself — true under Gravity Forms, which submits with
 * `input[type=submit]`. The HubSpot embed that replaced it navigates with
 * real `<button>`s, and this rule absolutely-positioned and rotated its
 * `Next` control 90° into the panel edge (measured: 55×240 where the same
 * button on the Contact page is 240×55).
 */
.contact-popup-gff .contact-popup-trigger {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: 0;
	transform: translateY( -50% ) rotate( 90deg );
	pointer-events: auto;
}

/*
 * `max-height:none` overrides `.contact-popup-form { max-height:85% }` set in
 * the Customizer's Additional CSS (wp_posts custom_css id 4483) — DATABASE
 * content, so it is neither in this repo nor guaranteed to match between
 * environments. It was capping the panel at 85% of the window and leaving a
 * strip of page showing under it (135px at 900 tall, 173px at 1150). Owning
 * the rule here means the panel reaches the bottom wherever the theme runs.
 */
.contact-popup-gff .contact-popup-form {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	max-height: none;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * Centre the form in the panel. `margin-block:auto` rather than
 * `justify-content:center`: when the form is taller than the window, centred
 * flex content overflows past the scroll container's top edge and becomes
 * unreachable, whereas auto margins collapse to zero and it scrolls normally.
 *
 * Repointed from `.gform_wrapper` to `.hs-form-html` in #433 — the panel's
 * direct child is the HubSpot embed container now, and Gravity Forms no
 * longer renders in here at all, so the old selector matched nothing and the
 * form sat pinned to the top of a full-height panel instead of centred in it.
 */
.contact-popup-gff .contact-popup-form > .hs-form-html {
	width: 100%;
	margin-block: auto;
}

.contact-popup-gff.active .contact-popup-form {
	pointer-events: auto;
}

/*
 * Desktop: the page slides aside to MAKE ROOM for the panel rather than being
 * covered by it. The page is three body-level siblings (#wrapper, #footer-bar,
 * #footer); the shell is a fourth, outside them, so it holds still while they
 * move. `.cg-stickynav`/`.cg-menu` are fixed INSIDE #wrapper, so the
 * transform becomes their containing block and they travel with the page —
 * which is what keeps the nav from ever sitting on top of the panel.
 *
 * Only from 1024px up. Narrower than that, taking 400px away would leave the
 * page's own layout too little room to hold its shape, so the panel goes
 * full-screen instead (below) and nothing moves.
 */
@media ( min-width: 1024px ) {

	body > #wrapper,
	body > #footer-bar,
	body > #footer {
		transition: transform var( --fade-out ) var( --fade-ease );
	}

	body.contact-open > #wrapper,
	body.contact-open > #footer-bar,
	body.contact-open > #footer {
		transform: translateX( calc( var( --w-contact-flyout ) * -1 ) );
	}
}

/* Below 1024px the panel takes the whole screen. */
@media ( max-width: 1023px ) {

	.contact-popup-gff .contact-popup-form {
		width: 100%;
		max-width: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	body > #wrapper,
	body > #footer-bar,
	body > #footer {
		transition: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.contact-popup-gff .contact-popup-form {
		transition: none;
	}
}