/* Hand-written overrides for this migration — paintyourwagonrvpark.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-28 over the 33 post-JS
 * captures (11 pages x 3 bands, generated/live/dom, <style>/<script> stripped) and the
 * 33 raw served documents (generated/served-by-device). The copy that arrived here
 * described an earlier site (13 pages, two FLEX forms, a before/after widget); 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-us, /application), 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 33 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 11, desktop == mobile on 0 of 11, and the 404 agrees.
 * dmtemplateid is FlexHeader on all 33 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 — ssrimageslider on 5 pages (/, /about, /amenities, /rv-park, /storage), one
 * widget each, 4 slides; flexslider 0. The driver is runtime.js; the ported cascade styles
 * the widget, so no rule is needed here.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * ACCORDION OPEN STATE — recovering a rule the live CSS read cannot see.
 *
 * THIS SITE: `ssraccordion` on 5 pages (/, /amenities, /rv-park, /savoy--tx, /storage),
 * one widget per page, two widget ids (2210866490 on /, 1729701811 on the other four);
 * 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).
 *
 * 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: NO SUBJECT on this site (beforeandafter 0 of 33). Kept from the
 * repo this toolkit came from, where it lets a touch drag move the split instead of
 * scrolling the page; it matches nothing here and paints nothing. */
.baf__handle { touch-action: none; }

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

/* Tablet/phone drawer sub-menu ("Area Served" > Savoy, TX). runtime.js drawer() opens
 * and closes it from the caret (or the label, which 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;
}

/* Desktop header between 1025 and 1365px wide. The nine menu items need 815px at their
 * full 16px / 15px padding and the menu column is only 609px at 1025 and 782px at 1280,
 * so "Area Served" and "Contact" dropped to a second row under the rest (measured at
 * 1025, 1060, 1100, 1150, 1200 and 1280, on the build and on live alike; one row from
 * 1366). The row is kept whole by easing the type and the padding from 14px / 6px at
 * 1025 back to the full 16px / 15px at 1366. 1366 and wider are untouched. */
@media (min-width: 1025px) and (max-width: 1365px) {
  #dm#dm #flex-header nav[id="1198691314"] > ul {
    flex-wrap: nowrap !important;
  }
  #dm#dm#dm .dmInner #flex-header nav[id="1198691314"].main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item {
    padding-left: clamp(6px, calc(6px + (100vw - 1025px) * 0.0264), 15px) !important;
    padding-right: clamp(6px, calc(6px + (100vw - 1025px) * 0.0264), 15px) !important;
    white-space: nowrap;
  }
  #dm#dm#dm .dmInner #flex-header nav[id="1198691314"].main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  #dm#dm#dm .dmInner #flex-header nav[id="1198691314"].main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text {
    font-size: clamp(14px, calc(14px + (100vw - 1025px) * 0.00587), 16px) !important;
  }
}

/* 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, left-aligned, with a default blue link. These are live's own rules
 * (read off live's 404 on 2026-10-06, desktop and phone documents alike: padding-top
 * 120px on both; "4 04" and the message compute to black, Oswald 130px and 22px),
 * scoped to the block. */
#dm #error-container {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 120px;
  background: #fff;
  color: #bababa;
  text-align: center;
  overflow: hidden;
}
#dm #error-container .four-o-four {
  font-family: 'Oswald', sans-serif;
  font-size: 130px;
  text-align: center;
  /* live's own rule says 130px, but it loses to the site's line-height on live and the
   * row measures 150px there; matched. */
  line-height: 150px;
  color: rgb(0, 0, 0);
}
#dm #error-container .lean {
  display: inline-block;
  transform: rotate(15deg) translate(-5px, -4px);
}
#dm #error-container .description {
  font-size: 22px;
  margin: 45px 0;
  color: rgb(0, 0, 0);
}
#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 (the Google Business Profile embed above the footer on every page): 350px
 * tall as ported, capped at the 300px house maximum. The iframe's own height attribute
 * is 350 and its wrappers take their height from it. */
#dm#dm .dmCustomHtml:has(> iframe[src*="google.com/maps/embed"]),
#dm#dm .dmCustomHtml > iframe[src*="google.com/maps/embed"] {
  height: 300px !important;
  max-height: 300px !important;
}