/* ============================================================================
 * migration-overrides.css — the ONLY CSS written by hand for this migration.
 *
 * Everything else under /styles/ is Duda's own cascade, ported byte-for-byte with
 * nothing changed but url() targets. This file exists solely because Duda serves
 * THREE separate HTML documents and we serve one: the elements that exist in only
 * one of those documents are all present here at once and have to be shown to the
 * device that actually had them.
 *
 * Breakpoints are Duda's own, read out of its runtime package:
 *   mobile  <= 767   |   tablet 768-1024   |   desktop >= 1025
 *
 * Nothing here restyles the site. It only gates visibility of markup that is
 * device-exclusive on the original, plus the honeypot (which has no counterpart
 * on live at all).
 * ========================================================================== */

/* --- 1. Header variants ---------------------------------------------------
 * Desktop + tablet render .dmHeaderContainer > #hcontainer.
 * Mobile renders #hamburger-header-container plus a sibling hamburger <button>,
 * the drawer, its overlay and a back-to-top link — none of which exist in the
 * desktop or tablet documents at all.
 */
@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;
  }
  /* The drawer's wrapper is the .p_hfcontainer that immediately precedes the
     content wrapper inside #site_content; it is empty once the drawer is hidden,
     but Duda's flex rules would still reserve a row for it. */
  #dmRoot #dm #site_content > .p_hfcontainer:first-child {
    display: none !important;
  }
}

/* --- 1b. Per-device widget variants ---------------------------------------
 * Duda's photo gallery builds its grid client-side and the three documents
 * genuinely disagree — desktop 1 row x 3 columns with captions over the image,
 * tablet the same grid but captions below, mobile 3 rows x 1 column. All three
 * are emitted and gated here. Shipping the desktop grid to a phone measured
 * 71.4% against live, so this is not cosmetic.
 */
@media (max-width: 767px) {
  #dmRoot #dm .mg-only-d,
  #dmRoot #dm .mg-only-t {
    display: none !important;
  }
}

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

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

/* --- 2. Honeypot ----------------------------------------------------------
 * Duda sites rely on reCAPTCHA for spam protection and we remove that widget
 * (its keys are Duda's and domain-restricted), so without this a migrated form
 * ships with none.
 *
 * Positioned off-screen rather than display:none — bots know to skip obviously
 * hidden fields — and taken OUT OF FLOW so it costs exactly zero layout, which is
 * what keeps the pixel gate honest.
 */
.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;
}

/* --- 3. Leaflet map host --------------------------------------------------
 * Duda's widget is Mapbox GL on live, driven by Duda's OWN shared account token,
 * which is URL-restricted and must never ship on a client domain. The map is
 * rebuilt on Leaflet + OpenStreetMap into the same .mapContainer host, at the same
 * centre, zoom and marker. mapbox-gl.css is not shipped, so the host needs its
 * box back — these are the two declarations that sheet supplied.
 */
.mapContainer {
  position: relative;
  overflow: hidden;
}

/* L.map(host) adds leaflet-container to the HOST itself, so this is one element,
   not a descendant. The host already carries Duda's inline width/height 100%; the
   background only shows while tiles are in flight. */
.mapContainer.leaflet-container {
  width: 100%;
  height: 100%;
  background: #ddd;
}