/* gy-added (review 2026-09-30) — Growyo pre-launch review fixes.
 *
 * Kept apart from bands.css so the ported/hand-written split stays legible, and
 * linked with a content-hash ?v= from Page.astro so a change is a new URL.
 * Every selector here targets either a gy-added element or a state the runtime
 * sets; nothing restyles ported markup at rest. Adapted from
 * client-resolutions-av 80fe4d8 (same template family).
 */

/* ---- Mobile drawer ------------------------------------------------------- */

/* Scroll lock while the drawer is open. Duda sets overflow:hidden on <body>
   only, but the document scrolls <html>, so both are locked. */
html.gy-drawer-lock,
body.gy-drawer-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Submenu groups. max-height clips the CONTENT box, so the <ul>'s own padding
   would leave a sliver of every closed group showing — collapse it with the
   group, with !important because Duda's sub-pages padding is !important. */
.layout-drawer li.gy-sub-group > ul.unifiednav__container_sub-nav {
  overflow: hidden !important;
  transition: max-height .3s ease-in-out, opacity .3s ease-in-out, padding .3s ease-in-out !important;
}
.layout-drawer li.gy-sub-group:not(.unifiednav__item-wrap_open) > ul.unifiednav__container_sub-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
}
/* The caret points down when closed and up when open. It is rotated on its
   ::before glyph, not on .icon, which carries its own transform per band. */
#dm .layout-drawer li.gy-sub-group .gy-caret::before { display: inline-block; transition: transform .3s ease; }
#dm .layout-drawer li.gy-sub-group:not(.unifiednav__item-wrap_open) .gy-caret::before { transform: none !important; }
#dm .layout-drawer li.gy-sub-group.unifiednav__item-wrap_open .gy-caret::before { transform: rotate(180deg) !important; }
/* A real touch target on the caret without resizing it: an invisible overlay,
   so the caret keeps its inline place beside the label. */
.layout-drawer .gy-caret { position: relative; cursor: pointer; }
.layout-drawer .gy-caret::after {
  content: "";
  position: absolute;
  left: -14px; right: -14px; top: -14px; bottom: -14px;
}

/* ---- Gallery lightbox ---------------------------------------------------- */

/* PhotoSwipe's base CSS is position:absolute and only its JS promotes it to
   fixed; without that, a lightbox opened after scrolling paints above the
   viewport. Controls at live's measured opacity (.75). */
.pswp.gy-pswp {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 2147483000 !important;
}
.pswp.gy-pswp { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.pswp.gy-pswp .pswp__bg { opacity: 1 !important; }
.pswp.gy-pswp .pswp__top-bar { opacity: 1 !important; }
.pswp.gy-pswp .pswp__button,
.pswp.gy-pswp .pswp__counter { opacity: .75; }
.pswp.gy-pswp .pswp__button:hover { opacity: 1; }
.pswp.gy-pswp .pswp__caption--fake { display: none !important; }

/* ---- Blog search --------------------------------------------------------- */

/* /blog-search: the heading the runtime inserts above the results, in live's
   own type (measured on live's /blog-search 2026-09-30: h2, 30px, 700,
   Quicksand, rgb(43,43,43), left). */
#dm .gy-search-head {
  margin: 0 0 24px !important;
  text-align: left;
  font-family: Quicksand, "Quicksand Fallback", sans-serif !important;
  font-size: 30px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: rgb(43, 43, 43) !important;
}

/* ---- Contact-form legal line --------------------------------------------- */

/* One line under the submit button. The button is Duda's FLOATED .dmformsubmit,
   so clear it; padding rather than margin, which would collapse against the
   float and buy nothing.

   Aligned with the SUBMIT BUTTON, measured 2026-09-30 on /, /contact,
   /lawn-care-in-texas and /kemah-tx (one form shape on all 28 form pages):
   desktop and tablet put the button LEFT, 20px (19px at 768) in from the
   form's edge, so the line starts on the button's left edge; the phone button
   is near full-width and centred, so the line is centred. Every form sits on a
   white ground, so the site's own dark body ink. */
#dm .gy-form-legal {
  clear: both;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding-top: 15px;
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  color: rgb(43, 43, 43);
}
#dm [data-mg-band="m"] .gy-form-legal { padding-left: 0; text-align: center; }
#dm .gy-form-legal a { color: rgb(43, 43, 43) !important; text-decoration: underline !important; display: inline !important; }

/* ---- CTA button on /our-work and /reviews -------------------------------- */

/* The site's own CONTACT US dmButtonLink, added inside the existing section
   under the gallery / reviews slider. Duda sizes each button from a per-page
   u_<id> rule these two pages never load, so the box is set here from the
   service pages' measured CONTACT US button (2026-09-30): 280x50 on desktop and
   tablet, 180x46 on phone, centred. Colour, radius, shadow and type come from
   the site's shared button skin (dmDefaultGradient), as on every other page. */
#dm .dmBody a.gy-cta {
  display: block !important;
  float: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 280px !important;
  max-width: 100% !important;
  height: 50px !important;
  padding: 0 !important;
  margin: 30px auto 10px !important;
}
#dm [data-mg-band="m"] .dmBody a.gy-cta,
#dm .dmBody[data-mg-band="m"] a.gy-cta { width: 180px !important; height: 46px !important; }