/*
 * Golden Penny — our own fixes on top of the inherited Bricks CSS.
 * Loaded last so it wins the cascade. Keep this file small and documented;
 * everything else in /assets/css is a verbatim copy of the original site.
 */

/* --------------------------------------------------------------------------
 * Cloudflare Turnstile renders a fixed 300px-wide widget. The form columns on
 * small phones are narrower than that (236px at 320px viewport, 206px on the
 * contact form), so the widget overflowed its container and forced horizontal
 * scrolling on the whole page. Scale it to fit and clip the leftover layout box.
 * -------------------------------------------------------------------------- */
.cf-turnstile {
  overflow: hidden;
}
.cf-turnstile > div {
  transform-origin: left top;
}
/* Scales chosen as the largest that still fit the measured slot widths, so the
   checkbox stays as large (and tappable) as possible. Above ~400px the slot is
   already >=300px, so no scaling is applied there:
     360-400px viewport -> slot ~276px -> 300 * 0.88 = 264px
     <=360px viewport   -> slot ~236px -> 300 * 0.76 = 228px */
@media (max-width: 400px) {
  .cf-turnstile > div {
    transform: scale(0.88);
  }
}
@media (max-width: 360px) {
  .cf-turnstile > div {
    transform: scale(0.76);
  }
}

/* Note: at 320px in a browser with classic (space-taking) scrollbars, the fixed
 * mobile nav panel measures ~1.5px wider than documentElement.clientWidth,
 * because a fixed element's containing block is the viewport *including* the
 * scrollbar. That is a desktop-emulation artifact only — real mobile browsers
 * use overlay scrollbars, so innerWidth === clientWidth and there is no
 * overflow. No fix applied, since max-width would resolve against the same
 * scrollbar-inclusive width. */