/*
 * 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);
  }
}

/* --------------------------------------------------------------------------
 * Mobile menu: the inherited design switched from a 370px right-side drawer
 * (tablet, <=991px) to a full-screen menu on phones (<=478px). Andrew wants
 * the drawer at every mobile size, so neutralize the full-width flip. Same
 * selector as the page rule; this file comes later in the bundle, so it wins.
 * -------------------------------------------------------------------------- */
@media (max-width: 478px) {
  .header__menu-nav-nestable-wrapper.brxe-nav-nested.brx-open .brx-nav-nested-items {
    width: 370px;
    max-width: 100vw;
  }
}

/* Drawer parity: the inherited design fully styled the drawer only at <=478px.
   Between 479-991px the menu <li>s had no width, so they shrink-wrapped their
   content — making the logo strip, nav links, and Contact Us button collapse
   to content width with blank space beside them, and leaving the strip mauve.
   Andrew wants the phone presentation at every mobile size, so extend the
   <=478px rules to the whole <=991px range. */
@media (max-width: 991px) {
  .header__menu-nav-nestable-items-wrapper li {
    width: 100%;
  }
  .header__menu-nav-nestable-items-link.brxe-text-link {
    width: 100%;
    min-width: 100%;
  }
  .header__menu-nav-nestable-items-logo-wrapper.brxe-div {
    background-color: var(--bricks-color-arotfs);
  }
  .header__menu-nav-nestable-items-close.brxe-toggle {
    --brxe-toggle-scale: 0.7;
  }
}

/* --------------------------------------------------------------------------
 * Dropdown overflow: gp-ui.js adds this class when an absolutely-positioned
 * submenu panel would run past the right viewport edge. Restores the Bricks
 * rule that PurgeCSS dropped (the class only ever exists at runtime).
 * -------------------------------------------------------------------------- */
.brx-submenu-overflow-right {
  left: auto !important;
  right: 0 !important;
}

/* --------------------------------------------------------------------------
 * Home hero LCP: serve a 900w WebP on phones instead of the 1920w desktop
 * background (the page CSS points #brxe-dpbbud at gp-hero-bg.webp).
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #brxe-dpbbud {
    background-image: url("/assets/img/2025/09/gp-hero-bg-mobile.webp");
  }
}

/* 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. */

/* Dropdown: original Bricks icons carry per-id 40px svg rules; custom icons
   (cesspool + service additions) have none and balloon to the 60px span.
   Normalize every dropdown icon to 40px (per-id rules still win at equal size). */
.header__menu-nav-nestable-items-service-content-link .icon svg{width:40px;height:40px}