/* =============================================================================
 * tti-contact-overflow.css — /contact-us/ (page 2009)
 *
 * Kills the horizontal page overflow measured at narrow viewports:
 *   390px viewport -> document.body.scrollWidth 490  (+100px)
 *   768px viewport -> document.body.scrollWidth 798  (+30px)
 *   1440px         -> 0 (clean, nothing to fix)
 *
 * A page must never scroll sideways on a phone — usability, and WCAG 2.2 AA
 * 1.4.10 Reflow, which this site claims conformance against.
 *
 * Two independent boxes overflow. Both are fixed at the box that is actually
 * too wide. Nothing here hides overflow at body/html level (that would mask
 * the defect rather than fix it, and Droip already sets overflow-x:clip on
 * html+body site-wide, which is exactly why this went unnoticed visually).
 *
 * Owned by the mu-plugin tti-contact-page.php. Do not move into the theme.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Hero section — decorative SVG bleed (the whole 100px / 30px)
 *
 *   section#contact-with-the-team.pathwise_section-black-2 holds two mirrored
 *   decorative SVGs (.pathwise_dpah6493 right, .pathwise_dpymcf79 left), both
 *   position:absolute; width:280px, deliberately bled past the section edges:
 *
 *     390px -> right svg inset 0 -100px -88px 210px   => right edge at x=490
 *     768px -> right svg inset 0  -30px -139px 518px  => right edge at x=798
 *
 *   The left twin bleeds the mirrored amount off the left edge, which costs
 *   nothing in an LTR document. Only the right twin creates scrollable width,
 *   and it is exactly the reported overflow at both widths.
 *
 *   The bleed is intentional art direction, so we do not reposition or resize
 *   the SVGs — we make the section own its own decoration by clipping it there.
 *
 *   overflow-x: CLIP (not hidden) on purpose:
 *     - `hidden` would make the section a scroll container and force
 *       overflow-y to `auto`, which would clip the SVG's deliberate ~88-139px
 *       bottom bleed into the next section and could introduce a nested
 *       scrollbar. `clip` leaves overflow-y `visible`, so the vertical bleed
 *       is untouched.
 *     - `clip` also creates no scroll container, so it cannot interact with
 *       Droip's Lenis smooth-scroll.
 *
 *   Visual delta for a real visitor: none. The right-hand shape was already
 *   invisible past x=390 / x=768 (html+body are overflow-x:clip), so this only
 *   removes phantom scrollable width.
 * -------------------------------------------------------------------------- */
body.page-id-2009 section#contact-with-the-team.pathwise_section-black-2 {
	overflow-x: clip;
}

/* -----------------------------------------------------------------------------
 * 2. Form heading "Contact Us" — 10vw design offset pushed its box out
 *
 *   .pathwise_dp8c3oyx carries `position:relative; inset:auto -10vw auto auto`,
 *   i.e. the heading is nudged 10vw to the right of its column as a design
 *   flourish. Its width is auto, so it still fills 100% of the column — the
 *   offset therefore hangs the box 10vw past the column's right edge.
 *
 *   On desktop the form is one column of a two-column layout, so the 10vw
 *   lands in dead space and nothing overflows. On phone/tablet the form is
 *   full width, so the box crosses the viewport:
 *
 *     390px -> heading right edge x=406.2 (column ends 374) => +16.2px
 *              (39px of 10vw, rendered through the section's zoom 0.8246)
 *
 *   Fix: shorten the box by exactly the offset. left+width then land back on
 *   the column's right edge, and because the compensation is the same 10vw in
 *   the same units, it is exact at every viewport width and under the section's
 *   `zoom` (vw resolves before zoom scales the result).
 *
 *   The visible indent is preserved — the heading does not move a pixel. Only
 *   the wrap point moves, and "Contact Us" is far narrower than the remaining
 *   width, so the rendered text is byte-identical.
 * -------------------------------------------------------------------------- */
body.page-id-2009 section.pathwise_section-2 form h2.pathwise_dp8c3oyx {
	max-width: calc(100% - 10vw);
}