/* The only authored stylesheet the migrated pages load.
 *
 * Everything else under /styles/duda is ported verbatim from the live
 * document's own cascade. This file covers the two things that have no
 * original to port: the honeypot, which the Duda site never had, and the
 * Leaflet host, which replaces a Mapbox widget we cannot ship.
 */

/* Honeypot. Off-screen by position, never display:none — bots know to skip an
 * obviously-hidden field, and taking it out of flow means it costs no layout,
 * which the pixel gate would otherwise measure. */
.dm-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Leaflet fills the same box Duda's Mapbox canvas did. */
.mapContainer .leaflet-container {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   One header per device.

   Duda serves three documents and each contains only ONE header, so its own
   sheets never need to hide the other — which means nothing in the ported
   cascade does it for us. This build ships both trees in one document and
   picks between them off the data-dev attribute the pre-paint script sets.

   Written with html[data-dev=...] rather than a media query on purpose: the
   device decision is Duda's, made from the user-agent, and the tablet document
   lays out on a fixed 960px canvas, so a width test would disagree with the
   document it is styling.
   --------------------------------------------------------------------------- */

/* Desktop and tablet: no hamburger bar, no drawer. */
html[data-dev="d"] #hamburger-header-container,
html[data-dev="t"] #hamburger-header-container,
html[data-dev="d"] #layout-drawer-hamburger,
html[data-dev="t"] #layout-drawer-hamburger,
html[data-dev="d"] #mobile-hamburger-drawer,
html[data-dev="t"] #mobile-hamburger-drawer,
html[data-dev="d"] #hamburger-drawer,
html[data-dev="t"] #hamburger-drawer,
html[data-dev="d"] > body .layout-drawer-overlay,
html[data-dev="t"] > body .layout-drawer-overlay {
  display: none !important;
}

/* Phone: no desktop header. */
html[data-dev="m"] .dmHeaderContainer {
  display: none !important;
}

/* GOTCHA 14 — the phone document has no <div><div id="iscrollBody"> wrapper at
   all; see hasIscroll in tools/live-shell/shells.json. Desktop and tablet need
   it, because .dmBodyNoIscroll #iscrollBody{overflow-x:hidden} is what stops an
   overhanging section stretching the document and painting a bare strip down
   the page. So neutralise it on the phone with display:contents rather than
   removing it from the markup: the box stops existing, the children stay
   exactly where the phone cascade expects them. */
html[data-dev="m"] #iscrollBody {
  display: contents;
}

/* Same mechanism, second instance. Duda's blog-card widget wraps .postText in
   a .postTextContainer on the desktop and tablet documents and omits the
   wrapper entirely on the phone one — 18 of the 31 captured documents on
   desktop and tablet, 0 on phone. The patch list can change attributes and
   classes but not the shape of the tree, so the wrapper survives into the
   phone rendering and adds its own padding to every card. Worth 2.463% on one
   blog post at 375, and present on every page carrying a card list.

   display:contents rather than a padding reset, because the wrapper's whole
   contribution is the box: with the box gone the children land exactly where
   the phone cascade expects them, whatever else it later says about the
   wrapper.

   !important because the ported cascade carries
   #dm [blog-posts-feature-flag="true"] .postTextContainer { display: flex },
   and an id in that selector beats an attribute selector on html. Without it
   this rule is written, served, and silently loses. */
html[data-dev="m"] .postTextContainer {
  display: contents !important;
}

/* GOTCHA 13 — the phone header is position:fixed, so it takes no space, and
   Duda's runtime writes a MEASURED padding-top onto .dmLayoutWrapper to make
   the content clear it. We do not ship that runtime, so nothing writes it and
   every phone page comes out one header height short.

   The value is not a round number: live renders 106.47px, because the header's
   height falls out of its own type and padding. Rounding it to 106 shifts
   every box below the header up by half a pixel, which rounds to a one-pixel
   offset for the whole document — 11,447px of edges all one pixel out, worth
   4.5% of differing pixels on the home page and invisible to a geometry diff
   that rounds. So it is measured at runtime in /duda/runtime.js against the
   header we actually render, and re-measured after webfonts settle.

   This rule only reserves the space before that runs, so first paint is not a
   header-height jump; the runtime overwrites it with the exact value. */
html[data-dev="m"] .dmLayoutWrapper {
  padding-top: 106px;
}