/* Hand-written overrides for this migration. Kept OUTSIDE site/public/styles/, which
 * tools/port-css.mjs wipes on every run (gotcha 49). Every rule here styles a class or
 * element OUR build invents; none restyles anything the original carries.
 *
 * Specificity: Duda emits `#dm .dmBody div.u_<id>{display:block!important}` for every
 * widget, so a plain class rule loses; classes are repeated behind #dm to win on class
 * count without depending on source order (gotcha 70). */

/* The honeypot (`hp_field`): off-screen, never display:none, and out of flow so it costs
 * no layout the pixel gate would measure. */
.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Blog cards Duda's backend withholds behind a pager: shipped, and hidden until the
 * runtime pages them in (gotcha 83). */
#dm .mg-blog-hidden.mg-blog-hidden.mg-blog-hidden {
  display: none !important;
}
/* The last VISIBLE card is no longer :last-child once hidden cards follow it (gotcha 69). */
#dm .postArticle:not(.mg-blog-hidden):has(+ .postArticle.mg-blog-hidden) {
  padding-bottom: 0 !important;
}

/* Per-band copies of forked widgets: only the active band's copy is shown. */
@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;
  }
}

/* An accordion panel the runtime has opened. */
#dm .mg-acc-open.mg-acc-open.mg-acc-open {
  max-height: 2000px;
}

/* Hosts for the FLEX click-popup opener (runtime.js flexPopup, gotcha 105). The overlay
 * colour is checked against live by tools/check-flex-popup.mjs. */
#flex-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.533);
}
#flex-runtime-popup-container {
  position: fixed;
  inset: 0;
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

/* The before/after handle: the drag is a pointer gesture, so the page must not pan under it.
 * Live's handle carries no style attribute at rest, so this lives here, not inline. */
.baf__handle { touch-action: none; }

/* ------------------------------------------------------------------------------
 * Pre-launch review, 2026-10-08. Everything below styles an element the review
 * added (class gy-added / gy-*); nothing here restyles ported markup.
 * ---------------------------------------------------------------------------- */

/* Legal pages (tools/build-legal-pages.mjs). Duda's reset zeroes margin on p, ul
 * and h2, so the template text would otherwise render as one slab with every
 * heading pressed against the paragraph above it. */
#dm .gy-legal-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 70px 40px 80px;
  box-sizing: border-box;
  background-color: #fff;
}
#dm .gy-legal-row h2 {
  margin: 36px 0 12px;
}
#dm .gy-legal-row p {
  margin: 0 0 14px;
}
#dm .gy-legal-row ul {
  margin: 0 0 14px;
  padding-left: 1.4em;
  list-style: disc;
}
#dm .gy-legal-row li {
  margin: 0 0 4px;
}
#dm .gy-legal-row a {
  text-decoration: underline;
}
@media (max-width: 767px) {
  #dm .gy-legal-row {
    padding: 40px 16px 60px;
  }
}

/* Privacy | Terms under the copyright line, in the bar's own white 13px type and
 * on its alignment (left at every width, like the copyright itself). */
#dm .gy-legal-links--footer {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}
#dm .gy-legal-links--footer a:hover,
#dm .gy-legal-links--form a:hover {
  text-decoration: none !important;
}

/* The practice's Google map as a footer row above the copyright bar. */
#dm .gy-footer-map {
  width: 100%;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
  line-height: 0;
}
#dm .gy-footer-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
}


/* /blog-search: its "Search Results" heading is the page's <h1> now (it was an
 * <h2>). At tablet width the theme sizes an h1 at 50px where the h2 was 30px
 * (measured against live: 30px / 35px tall); pinned so the retag moves nothing.
 * Desktop (32px) and phone (26px) already agree through the size classes. */
@media (min-width: 768px) and (max-width: 1024px) {
  #dm h1.gy-h1,
  #dm h1.gy-h1 span {
    font-size: 30px !important;
  }
}

/* The 404 page. Live's is styled by a Duda system sheet the port never captured, so
 * the page shipped as four lines of unstyled text with a default blue link at the
 * left edge. Every value below is live's own, measured at 1440 and 390: a white
 * centred block with 120px above it, a 130px Oswald "404" on a 260px line with the
 * first 4 leaning 15deg, a 22px/44px message with 45px around it, and a 184x37 grey
 * button. The message is the page's <h1> now, pinned to that same type. */
#dm #error-container {
  padding: 120px 0 0;
  text-align: center;
  background-color: rgb(255, 255, 255);
}
#dm #error-container .four-o-four {
  font-family: Oswald, "Pathway Gothic One", sans-serif;
  font-size: 130px;
  line-height: 260px;
  color: rgb(123, 134, 135);
}
#dm #error-container .four-o-four .lean {
  display: inline-block;
  transform: rotate(15deg);
}
#dm #error-container .description,
#dm #error-container h1.description {
  margin: 45px 0;
  padding: 0;
  font-family: Figtree, "Figtree Fallback", sans-serif;
  font-size: 22px !important;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  color: rgb(123, 134, 135);
}
#dm #error-container a.back-button {
  display: inline-block;
  box-sizing: border-box;
  width: 184px;
  height: 37px;
  margin: 0 0 20px;
  padding: 0;
  border-radius: 2px;
  background-color: rgb(137, 137, 137);
  color: rgb(255, 255, 255) !important;
  font-size: 16px;
  line-height: 37px;
  text-align: center;
  text-decoration: none !important;
}
#dm #error-container a.back-button:hover,
#dm #error-container a.back-button:focus-visible {
  background-color: rgb(58, 80, 107);
}

/* The offer popup on a phone (review 2026-10-08). Its dialog carries a fixed 920px
 * height from the ported sheets and is centred on the screen, so on an 844px-tall
 * phone its top sat 38px ABOVE the screen -- taking the close X with it (y = -4) --
 * and its bottom below; the visitor got a full-screen form with no way out but the
 * back button. Live has the same fault. The dialog keeps its ported height wherever
 * it fits and is otherwise capped to the screen, scrolls inside, and keeps its first
 * row, the one holding the X, pinned at the top. Nothing changes on a screen tall
 * enough for the dialog (700px on tablet and desktop). */
#flex-runtime-popup#flex-runtime-popup {
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  /* It is also a fixed 390px wide: on a 320-375px phone the X sat past the right
   * edge of the screen. */
  max-width: 100vw !important;
  box-sizing: border-box;
}
#flex-runtime-popup#flex-runtime-popup .dmRespRowsWrapper > div:first-child {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: rgb(255, 255, 255);
}