/* The ONLY hand-written stylesheet in this build.
 *
 * Everything else under /styles is Duda's own cascade, ported verbatim from what
 * the live documents actually load, with nothing but url() rewritten. This file
 * exists for the things that cannot come from there: the device gating a
 * single-document build needs, the touch parallax behaviour Duda's RUNTIME (not
 * its CSS) applies, and the honeypot that replaces reCAPTCHA.
 *
 * The breakpoints below are Duda's own, read out of its runtime package, and they
 * MUST stay identical to the ones tools/port-css.mjs media-gates the ported sheets
 * with — if the two disagree there is a width where a device's markup is visible
 * with another device's stylesheet.
 *
 *     mobile   (max-width: 767px)
 *     tablet   (min-width: 768px) and (max-width: 1024px)
 *     desktop  (min-width: 1025px)
 */

/* ------------------------------------------------------------- device gating
 * This build serves ONE document; live serves three. Both headers and the mobile
 * drawer are therefore always in the markup and the wrong one is hidden per band.
 * Measured from the captures: the desktop document has .dmHeaderContainer and
 * .dmPageTitleRow and NO drawer/overlay/back-to-top; the mobile document has
 * #hamburger-header-container, #mobile-hamburger-drawer, .layout-drawer-overlay
 * and #dmBackToTop and neither of the first two. Tablet is desktop. */
@media (max-width: 767px) {
  #dmRoot #dm .dmHeaderContainer,
  #dmRoot #dm .dmRespRow.dmPageTitleRow {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #dmRoot #dm #hamburger-header-container,
  #dmRoot #dm #layout-drawer-hamburger,
  #dmRoot #dm #mobile-hamburger-drawer,
  #dmRoot #dm .layout-drawer-overlay,
  #dmRoot #dm #dmBackToTop {
    display: none !important;
  }
}

/* ------------------------------------------------------------ touch parallax
 * PARALLAX IS FROZEN ON TOUCH BY DUDA'S RUNTIME, NOT BY ITS CSS (gotcha 22). The
 * ported sheets declare `background-attachment: fixed !important` for these
 * sections at every width, and on desktop that is what live computes. But
 * measured on live, the TABLET and MOBILE documents compute
 * `background-attachment: scroll` — Duda's runtime overrides it for touch, and no
 * stylesheet records that. A faithful CSS-only port therefore keeps `fixed` below
 * 1025px and renders the hero at roughly 3x zoom in a full-page capture.
 *
 * Measured background-position at rest, per band, on / :
 *     desktop  50% -6.02125px at viewport height 900   (skrollr, see runtime.js)
 *     tablet   0% 0%
 *     mobile   50% 50%
 *
 * SPECIFICITY IS LOAD-BEARING. Duda targets these as `#dm .dmBody div.u_<id>`,
 * so a `[class*=...]` selector loses outright. `#dmRoot #dm .dmBody div[data-center]`
 * matches that weight and adds one id, and the attribute selector is what keeps
 * this scoped to the parallax sections themselves. Duda also ships TWO spellings
 * of the same idea — dmSectionParallaxNew and dmSectionParallex — so both are
 * matched. */
@media (max-width: 1024px) {
  #dmRoot #dm .dmBody div[data-center],
  #dmRoot #dm .dmBody div.dmSectionParallaxNew,
  #dmRoot #dm .dmBody div.dmSectionParallex {
    background-attachment: scroll !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #dmRoot #dm .dmBody div[data-center],
  #dmRoot #dm .dmBody div.dmSectionParallaxNew,
  #dmRoot #dm .dmBody div.dmSectionParallex {
    background-position: 0% 0% !important;
  }
}

@media (max-width: 767px) {
  #dmRoot #dm .dmBody div[data-center],
  #dmRoot #dm .dmBody div.dmSectionParallaxNew,
  #dmRoot #dm .dmBody div.dmSectionParallex {
    background-position: 50% 50% !important;
  }
}

/* --------------------------------------------------------- per-device widgets
 * .dmPhotoGallery builds its own DOM client-side and the three documents
 * genuinely disagree about STRUCTURE, not just image renditions — /gallery has 56
 * references on desktop against 9 on tablet, and a different column count and
 * caption placement. All present variants are emitted and gated here.
 *
 * .mainBlog does NOT fork structurally on this site (verified: identical element
 * counts across all three documents, and no .postTextContainer anywhere), but its
 * cards name a DIFFERENT CROP per device through an inline background — 1920w
 * desktop, 1280w tablet — which is invisible to srcset (gotcha 16), so it is
 * emitted per device for that reason alone.
 *
 * The class sits on the widget element ITSELF rather than on a wrapper, so no
 * descendant relationship the widget's own CSS relies on is disturbed.
 *
 * display:none rather than visibility:hidden is deliberate: these variants have
 * different heights, and a hidden-but-laid-out copy would add its own height.
 *
 * Only the INACTIVE bands are touched. Forcing the active one to display:block
 * would silently restyle a widget Duda gives display:flex.
 *
 * The selector is DOUBLED to raise specificity. Duda ships
 *   body.dmRoot #dm [list-layout="layout4"] { display: flex !important }
 * at (1,2,1); a plain `.mg-only-t{display:none!important}` is (0,1,0) and LOSES
 * even with !important. `.mg-only-t.mg-only-t` inside `body.dmRoot #dm` is (1,3,1)
 * and wins outright rather than relying on a source-order tiebreak. */
@media (min-width: 1025px) {
  body.dmRoot #dm .mg-only-t.mg-only-t,
  body.dmRoot #dm .mg-only-m.mg-only-m { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body.dmRoot #dm .mg-only-d.mg-only-d,
  body.dmRoot #dm .mg-only-m.mg-only-m { display: none !important; }
}
@media (max-width: 767px) {
  body.dmRoot #dm .mg-only-d.mg-only-d,
  body.dmRoot #dm .mg-only-t.mg-only-t { display: none !important; }
}

/* --------------------------------------------------------------- honeypot
 * Duda sites rely on reCAPTCHA for spam protection and we remove that widget
 * (its keys are Duda's own and domain-restricted, so they cannot work here), so
 * without this every migrated form would ship with none at all.
 *
 * Off-screen rather than display:none: bots skip obviously-hidden fields. Taken
 * out of flow so it costs no layout — the pixel gate would otherwise measure it.
 * The field is named `company`, which cannot collide because Duda names every
 * real field dmform-N. */
.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------ blog "Show More"
 * /blog publishes 10 of this site's 11 posts and a "Show More" control that asks
 * Duda's backend for the next page. A static build has no backend, so all 11
 * cards ship and the 11th starts hidden; runtime.js reveals it on the same click
 * live uses and then removes the control, which is live's own end state.
 * display:none rather than visibility:hidden — a laid-out card would add its
 * height, and the initial render has to stay identical to live's un-clicked
 * state, which is what the pixel gate measures. */
.mg-blog-hidden {
  display: none !important;
}

/* The card that is last AMONG THE VISIBLE ONES. Duda spaces cards with
 *   [list-layout=recent_posts][posts-padding="15"] .postArticle:not(:last-child)
 *       { padding-bottom: 30px }
 * and `display:none` does NOT release :last-child — so appending a hidden 11th
 * card made the 10th match :not(:last-child) and grow 30px, pushing the footer
 * down on every width. This restores live's geometry for the last visible card;
 * runtime.js moves the class as cards are revealed and removes it once none are
 * hidden, at which point the real :last-child does the job again.
 *
 * Specificity has to beat #dm[attr][attr][attr] .postArticle:not(:last-child),
 * hence the two ids plus !important. */
#dmRoot #dm .postArticle.mg-last-visible {
  padding-bottom: 0 !important;
}