/* Hand-written overrides for this migration — prosealincorporatedaz.com.
 *
 * DELIBERATELY OUTSIDE site/public/styles/ (gotcha 49): tools/port-css.mjs owns that
 * directory and clears its own hashed outputs on every run, so a hand-written sheet
 * placed there is deleted by the next port with no error anywhere — on one site that
 * silently removed the sheet that hides the inactive device bands, and all three
 * headers then rendered at every width.
 *
 * EVERY FIGURE IN THIS FILE IS THIS SITE'S, censused 2026-09-29 over the 39 post-JS
 * captures (13 pages x 3 bands, generated/live/dom, <style>/<script> stripped) and the
 * 39 raw served documents (generated/served-by-device). The copy that arrived here
 * described an earlier site (59 pages, a blog, two sliders, 8 accordion widgets); its
 * RULES were sound and are kept byte-for-byte, and every measurement around them was
 * replaced rather than edited. This file ships verbatim, so a foreign census here would
 * publish another company's measurements on this client's domain.
 *
 * Keep this file minimal. Anything that can come from the ported cascade should.
 */

/* The honeypot. Positioned off-screen rather than display:none — bots skip obviously
 * hidden fields, and taking it out of flow means it costs no layout, which the pixel
 * gate would otherwise measure. Live has NO honeypot on either of this site's two
 * forms (/contact, /room-for-improvement), so this is ours and must cost nothing.
 *
 * /migration phase 8 specifies exactly this and one fleet repo shipped the spec
 * unimplemented — its honeypot rendered as an ordinary 40px text field and read as a
 * 46px layout defect. */
.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* SPECIFICITY NOTE — read before editing any rule below.
 *
 * Duda emits a per-widget rule for EVERY widget on the site, shaped
 *
 *     #dm .dmBody div.u_1213107879 { display: block !important }
 *
 * That is (1,2,1) and it is `!important`. A hide written as a plain
 * `.mg-only-t { display:none !important }` is (0,1,0), so with `!important` on both
 * sides SPECIFICITY decides and Duda's rule wins — the element stays visible and
 * nothing in the console says so.
 *
 * So every gate below repeats its class three times behind `#dm`, giving (1,3,0),
 * which outranks (1,2,1) on class count without relying on source order. Do not
 * "tidy" the repetition away.
 */

/* ---------------------------------------------------------------------------
 * BLOG PAGINATION — NO SUBJECT ON THIS SITE.
 *
 * There is no blog: generated/blog.rss declares 0 items, and mainBlog / postArticle /
 * more-posts-text-container / pagination-nav are 0 in all 39 captures. These two rules
 * match nothing here. They are kept because the builder and runtime.js still carry the
 * blog path, and a rule that matches nothing costs nothing.
 *
 * What they do where there IS a blog: a static build has no Duda backend, so every card
 * ships and the ones past live's first page are stamped mg-blog-hidden; the first rule
 * hides them. display:none does not change child indices, so the last VISIBLE card stops
 * being :last-child and gains Duda's `.postArticle:not(:last-child)` padding (gotcha 69);
 * the second rule takes it back off, with !important because Duda's matching rule can
 * out-rank it on specificity (gotcha 70).
 * ------------------------------------------------------------------------- */
#dm .mg-blog-hidden.mg-blog-hidden.mg-blog-hidden {
  display: none !important;
}

#dm .postArticle:not(.mg-blog-hidden):has(+ .postArticle.mg-blog-hidden) {
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * PER-DEVICE WIDGET FORKS.
 *
 * THIS SITE IS DUDA FLEX AND ITS CONTENT FORKS THREE WAYS, measured on the served BYTES
 * (tools/measure-served-fork.mjs, double sampled, generated/served-fork.json):
 * desktop == tablet on 0 of 13, desktop == mobile on 0 of 13, and the 404 agrees.
 * dmtemplateid is FlexHeader on all 39 documents, so it cannot discriminate the fork, and
 * the classic per-band body classes (dmDesktopBody / dmTabletBody / dmMobileBody) do not
 * exist on this platform. THE TABLET DECLARES ITS OWN CANVAS: width=960px on its viewport
 * meta, so gotcha 3's 960 canvas applies here — measured, not carried (gotcha 62).
 *
 * The header, drawer and overlay are one shape on every band (#dmFlexHeaderContainer,
 * #flex-header, #hamburger-drawer, #layout-drawer-overlay); what differs per band is the
 * page content, and the mg-only-* gates below carry that content fork.
 *
 * Band edges are Duda's own: mobile <=767, tablet 768-1024, desktop >=1025.
 *
 * These hide rather than remove, deliberately — the elements stay in the document so
 * the runtime can still address them, and display:none costs no layout.
 *
 * Only the INACTIVE bands are hidden, inside the media queries. The active band is
 * never touched, so it keeps whatever `display` the ported cascade gives it — hiding
 * all three and restoring one with `display: revert` reverts past the author cascade
 * to the UA default and replaces the widget's real display value with a plain block.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #dm .mg-only-d.mg-only-d.mg-only-d,
  #dm .mg-only-t.mg-only-t.mg-only-t {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #dm .mg-only-d.mg-only-d.mg-only-d,
  #dm .mg-only-m.mg-only-m.mg-only-m {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  #dm .mg-only-t.mg-only-t.mg-only-t,
  #dm .mg-only-m.mg-only-m.mg-only-m {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * SLIDERS — NONE ON THIS SITE. ssrimageslider and flexslider are 0 in all 39 captures
 * and generated/slider-config.json measures no page. No rule is needed.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * ACCORDION OPEN STATE — recovering a rule the live CSS read cannot see.
 *
 * THIS SITE: `ssraccordion` on 4 pages — the sand-slurry, crack-sealing, patching and
 * striping service pages — one widget per page, the SAME widget id (2467775912) on all
 * four, 3 items; firstExpanded FALSE and closeOthers TRUE (generated/accordion-config.json,
 * from live's own initiateWidget payloads), and 0 auto-open on reveal when driven on live
 * (generated/accordion-reveal.json). A click opens exactly one item on both sides at every
 * band (tools/check-accordion.mjs).
 *
 * THE CLOSED RULE IS IN THE PORT AND THE OPEN RULE IS NOT, AND THAT IS NOT A PORTING
 * MISTAKE. styled-components insert through the CSSOM, so a class exists in a
 * document's sheet only if that component actually RENDERED with it: the closed class is
 * served, and the open class is minted per distinct pixel height at runtime and is never
 * in a served sheet. No open-state name can be hardcoded, so the rule is restored under
 * OUR OWN class and runtime.js sets each panel's max-height from its own scrollHeight.
 * ------------------------------------------------------------------------- */
#dm .mg-acc-open.mg-acc-open.mg-acc-open {
  max-height: 2000px;
}

/* Before/after handle: lets a touch drag move the split instead of scrolling the page.
 * Ours, not ported — Duda's runtime does this in script; the driver is in runtime.js.
 * A stylesheet rule rather than an inline style, because live's handle carries no style
 * attribute at rest (measured 2026-09-29). Paints nothing. */
.baf__handle { touch-action: none; }

/* ---- Pre-launch review 2026-10-03 ------------------------------------------ */

/* Tablet/phone drawer sub-menus ("Services", and "Sealcoating Services" nested inside
 * it). runtime.js drawer() opens and closes them from the caret (or the label, where it
 * is href="#"); closed is the class gy-sub-closed. The closed state collapses height,
 * padding, border and opacity together (max-height alone clips only the content box,
 * and the <ul>'s padding is !important in the ported cascade), takes the panel out of
 * the tab order, and is !important at doubled id specificity so it outranks the
 * cascade's own :hover opener, which a tap leaves stuck on a touch screen. */
#hamburger-drawer#hamburger-drawer li.gy-sub > .unifiednav__container_sub-nav {
  overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease;
}
#hamburger-drawer#hamburger-drawer li.gy-sub:not(.gy-sub-closed) > .unifiednav__container_sub-nav {
  opacity: 1;
  pointer-events: auto;
}
#hamburger-drawer#hamburger-drawer li.gy-sub.gy-sub-closed > .unifiednav__container_sub-nav {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}
/* Closed, the caret points the way it does at rest whatever :hover says. */
#hamburger-drawer#hamburger-drawer li.gy-sub.gy-sub-closed > a .icon::before {
  transform: none !important;
}
/* The X's row and the menu's row are separate stacking contexts, so an open group
 * scrolled up under the X would otherwise paint over it. */
#hamburger-drawer div:has(> .hamburgerButton),
#hamburger-drawer .hamburgerButton {
  position: relative;
  z-index: 5;
}

/* Visually hidden page heading: /positive-feedback and /room-for-improvement publish no
 * heading at all (on live either), so each gets an <h1> naming the page with no change
 * to what a visitor sees. */
#dm .gy-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* "Privacy Policy | Terms & Conditions" under the /room-for-improvement submit button
 * (runtime.js formLegalLine). One line, ~15px clear of the button. Ink and font are
 * copied from the form's own labels at runtime. */
#dm#dm .gy-legal-links--form {
  /* FLEX groups order their children by per-id `order`; an unordered sibling sorts
   * to the top of the step, above the first field. */
  order: 9999;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}
/* The step's own row-gap measures 20px under the button at 1440 and 768 and 34px at
 * 390; pull the line up to ~15px. */
#dm#dm .gy-legal-links--form { margin-top: -5px; }
@media (max-width: 767px) {
  #dm#dm .gy-legal-links--form { margin-top: -19px; }
}
#dm#dm .gy-legal-links--form a {
  color: inherit;
  text-decoration: underline;
}

/* The form's success panel, shown inside the form's dark card (runtime.js showSuccess). */
#dm .gy-form-success {
  padding: 40px 0;
}

/* 404 page. Live styles its error block from an inline <style> inside the page body,
 * which the port dropped: the build showed the message as small unstyled text pressed
 * under the header, with a default blue link. These are live's own rules (read off live
 * 2026-10-03, desktop and phone documents alike: padding-top 120px on both), scoped to
 * the block; the "4 04" and message ink is the rgb(45, 46, 50) live computes for them. */
#dm #error-container {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 120px;
  background: #fff;
  color: rgb(45, 46, 50);
  text-align: center;
  overflow: hidden;
}
#dm #error-container .four-o-four {
  font-family: 'Oswald', sans-serif;
  font-size: 130px;
  text-align: center;
  line-height: 130px;
  color: rgb(45, 46, 50);
}
#dm #error-container .lean {
  display: inline-block;
  transform: rotate(15deg) translate(-5px, -4px);
}
#dm #error-container .description {
  font-size: 22px;
  line-height: 33px;
  margin: 45px 0;
  color: rgb(45, 46, 50);
}
#dm #error-container .back-button {
  display: inline-block;
  width: 184px;
  height: 37px;
  margin-bottom: 20px;
  background: #898989;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 37px;
  border-radius: 2px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

/* Footer map (tools/review-fixes.py step 8): the Google Business Profile embed, full
 * width between the footer columns and the copyright bar, 300px tall. */
#dm .gy-footer-map {
  display: block;
  width: 100%;
  box-sizing: content-box;
  height: 300px;
  max-height: 300px;
  /* The 5px orange rules the removed "Apache Junction" map section sat between
   * (rgb(234, 124, 36), measured on / and /contact), now on this map: top and bottom. */
  border-top: 5px solid rgb(234, 124, 36);
  border-bottom: 5px solid rgb(234, 124, 36);
  line-height: 0;
  overflow: hidden;
}
#dm .gy-footer-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}