/*
 * Site overrides — small, hand-authored fixes layered on top of the vendored
 * legacy stylesheets (plaio-bundle.css, plaio.<hash>.css). Loaded last in
 * BaseLayout so it wins the cascade. Kept separate from the vendored files so
 * `npm run generate` (which only rewrites src/generated) never clobbers it.
 */

/*
 * Demo-request form: the "Current planning tool" checkbox group is rendered
 * with an inline `display:flex; flex-direction:row` and no `flex-wrap`, so its
 * three labels sat on one line and pushed ~49px past the right edge on phones
 * (iPhone-class ~390px viewports), letting the whole page scroll sideways.
 * The inline style only sets direction/gap/display, so adding flex-wrap here
 * takes effect without fighting it. On desktop there is room for one row, so
 * wrapping changes nothing there.
 */
.plaio-form .umbraco-forms-field-wrapper[style*='flex-direction: row'] {
  flex-wrap: wrap;
  row-gap: 12px;
}

/*
 * Belt-and-braces: never let an unexpected wide descendant turn into a
 * horizontal page scroll. This clips stray overflow without affecting normal
 * vertical scrolling or sticky/fixed positioning.
 */
html,
body {
  overflow-x: clip;
}

/*
 * About page "Executive Team" heading: it is marked up as an <h2> inside
 * .employees-wrap, which the legacy stylesheet only gives a margin (so it fell
 * back to the browser-default ~24px). That left it noticeably smaller than the
 * section headings above it ("What makes us different?", "Who we are."), which
 * are .product-page .right-side h3 at 48px. Match that size/weight so the
 * heading reads at the same scale as the other section H3s on the page.
 *
 * The selector is scoped under .page-frame.light-theme so it out-specifies
 * `.page-frame.light-theme h2 {color:#9EA0B0}` — otherwise the heading (and the
 * employee names below it) render in the light-theme grey. Match the dark
 * colour the visible section headings use (#151517) so it reads as a heading.
 */
.page-frame.light-theme .employees-wrap h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 110%;
  color: #151517;
}