/* Hand-written overrides for this migration. Kept OUTSIDE site/public/styles/ because
 * tools/port-css.mjs clears that directory on every run (gotcha 49). Copied from the fleet
 * model's toolkit; no client is named here because site/public/ ships verbatim (gotcha 113).
 *   .mg-hp            honeypot, off-screen so it costs no layout (phase 8)
 *   .mg-blog-hidden   withheld blog cards, repeated behind #dm to beat Duda's per-widget
 *                     !important display rule (gotcha 70); the :has() rule restores live's
 *                     last-card padding (gotcha 69)
 *   .mg-only-{d,t,m}  inactive device bands; breakpoints are Duda's own (767 / 1024)
 *   .mg-acc-open      accordion open state set by runtime.js
 *   #flex-popup-*     host elements for the FLEX click-popup opener (gotcha 105) */

.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

#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;
}

@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;
  }
}

#dm .mg-acc-open.mg-acc-open.mg-acc-open {
  max-height: 2000px;
}

#dm .gy-legal-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px 80px;
  box-sizing: border-box;
}
#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;
}
@media (max-width: 767px) {
  #dm .gy-legal-row {
    padding: 40px 16px 60px;
  }
}

#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;
}

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

/* Tablet/phone drawer sub-menus ("Rates", "Services", "Classes", "Bio"). runtime.js
 * drawer() opens and closes each from its caret; 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), takes the panel out of the tab
 * order, and is !important at doubled id specificity so it outranks the ported
 * cascade's own :hover opener, which a tap leaves stuck on a touch screen and which
 * would otherwise keep a closed group open. */
#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.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;
}
#hamburger-drawer#hamburger-drawer li.gy-sub:not(.gy-sub-closed) > .unifiednav__container_sub-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* The close (X) follows the panel's scroll (runtime.js drawer()). Its row and the
 * menu's row can each be their own stacking context, and the later one, the menu,
 * would paint over the X once an open group scrolled up under it. */
#hamburger-drawer .hamburgerButton {
  position: relative;
  z-index: 5;
}
#hamburger-drawer div:has(> .hamburgerButton),
#hamburger-drawer div:has(.hamburgerButton) {
  z-index: 5;
}

/* The tablet/phone header's click-to-call icon (left of the logo, tel:831.247.5488).
 * Its fill is the theme's dark ink, var(--color_2), on the header's rgb(31, 31, 31),
 * so on live and here the header appeared to have no call button at all. White, as
 * the menu icon beside it is. */
#dm#dm .dmInner div.u_1440420817 .svg {
  fill: rgb(255, 255, 255) !important;
}
/* ...with a 44px touch area around the 32x21 glyph, without moving it. */
#dm#dm .dmInner div.u_1440420817 a[href^="tel:"] {
  position: relative;
  display: block;
}
#dm#dm .dmInner div.u_1440420817 a[href^="tel:"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* The 404 page. Duda styles its "4 04" block from a platform sheet that is not part of
 * the port, so the page shipped as three lines of unstyled text pressed against the
 * left edge. Live's measured look (1440), restated: 120px above, centred on white, a
 * 130px Oswald "4 04" with the first 4 leaning 15deg, a 22px line with 45px around
 * it, and a 184x37 grey button. */
#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, sans-serif;
  font-size: 130px;
  line-height: 130px;
  color: rgb(31, 31, 31);
}
#dm #error-container .four-o-four .lean {
  display: inline-block;
  transform: rotate(15deg) translate(-5px, -4px);
}
#dm #error-container .description {
  margin: 45px 0;
  font-size: 22px;
  line-height: 29px;
  color: rgb(31, 31, 31);
}
#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-decoration: none !important;
}
#dm #error-container a.back-button:hover,
#dm #error-container a.back-button:focus-visible {
  background-color: rgb(31, 31, 31);
}

/* Closing call to action on /reviews and /photo-gallery (tools/review-content-fixes.py):
 * the site's own "BOOK NOW" button, restated from its measured look at all three
 * widths (180x50, rgb(31, 31, 31), 1px white border, 2px radius, 16px bold Futura PT,
 * white type), since Duda styles each button by a per-page id rule a new element
 * cannot borrow. order: the column is a FLEX group that places its children by
 * per-id order, and an unordered child would jump to the top. */
#dm .gy-cta-wrap {
  order: 999;
  align-self: center;
  width: 100%;
  text-align: center;
  padding: 40px 0 0;
}
#dm#dm .gy-cta-wrap a.gy-cta {
  display: inline-block;
  box-sizing: border-box;
  width: 180px;
  height: 50px;
  line-height: 48px;
  padding: 0 10px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 2px;
  background-color: rgb(31, 31, 31);
  color: rgb(255, 255, 255) !important;
  font-family: "Futura PT", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity .2s;
}
#dm#dm .gy-cta-wrap a.gy-cta:hover,
#dm#dm .gy-cta-wrap a.gy-cta:focus-visible {
  opacity: .8;
}

/* The contact form's legal line (tools/review-content-fixes.py): one row under the
 * submit button. clear: the button's wrapper is floated, so a following block would
 * otherwise flow up beside it. Padding, not margin, for the 15px above (a margin
 * collapses against the float). runtime.js legalLineAlign() lines it up with the
 * button. Body ink on the form's white ground. */
#dm#dm .dmform .gy-legal-links--form {
  clear: both;
  float: none;
  width: 100%;
  box-sizing: border-box;
  padding-top: 15px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: rgb(31, 31, 31);
}
#dm#dm .dmform .gy-legal-links--form a {
  color: rgb(31, 31, 31) !important;
  text-decoration: underline !important;
}

/* The footer map is 300px tall at most (it was 350 on desktop and tablet; the phone
 * footer already had it at 300). */
#dm#dm #ff8a4291 {
  height: 300px;
}

/* Home, the Mindbody class schedule. The page is served with a snapshot of the
 * schedule table that Mindbody's script swaps for its own frame about a second after
 * load; until then the table (min-content about 500px) pushed the phone page 87 to
 * 193px wider than the screen. Kept inside its column for that second. */
#dm healcode-widget {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* /blog-search: "Search Results" is the page's <h1> now (it was an <h2>, and the page
 * had no h1). Only the tablet band differed after the retag, 35px where it was 30. */
@media (min-width: 768px) and (max-width: 1024px) {
  #dm#dm .dmNewParagraph[id="1523391464"] h1.gy-h1,
  #dm#dm .dmNewParagraph[id="1523391464"] h1.gy-h1 span { font-size: 30px !important; }
}