/* Hand-written overrides for this migration.
 *
 * DELIBERATELY OUTSIDE site/public/styles/ (gotcha 49): tools/port-css.mjs owns
 * that directory and clears it on every run, so a hand-written sheet placed there
 * is deleted by the next port with no error anywhere — on one site that silently
 * removed the sheet that hides the inactive device bands, and all three headers
 * then rendered at every width.
 *
 * Keep this file minimal. Anything that can come from the ported cascade should.
 */

/* The honeypot. Positioned off-screen rather than display:none — bots skip
 * obviously-hidden fields, and taking it out of flow means it costs no layout,
 * which the pixel gate would otherwise measure. */
.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* THE TABLET HEADER OFFSET.
 *
 * Duda writes the header's MEASURED height onto div.site_content as a margin-top
 * (gotcha 13). On this site the value is uniform across all 54 pages but differs
 * per viewport, and only two of the three come from the ported cascade:
 *
 *     <=767   101.016px   served as a rule in the PHONE document, so the ported
 *                         phone-band sheet already carries it
 *     >=1025    0px       served in the desktop document's inline block, likewise
 *     768-1024  141.424px SET BY DUDA'S RUNTIME, in no stylesheet at all
 *
 * Desktop and tablet share one document here, so the tablet band inherits the
 * desktop rule's 0px and the whole page rides up under a fixed header. The value
 * below is the one MEASURED on live at 768 across all 54 pages — not rounded, and
 * not typed from an impression: gotcha 31 cost 4.5% of a page for half a pixel.
 *
 * Specificity: Duda's own rule is `#dmRoot div.site_content` with !important, so
 * this repeats #dmRoot to match and relies on being loaded after the ported
 * sheets, which it is (bands.css is the last <link> in the head). */
@media (min-width: 768px) and (max-width: 1024px) {
  #dmRoot #dmRoot div.site_content {
    margin-top: 141.424px !important;
  }
}

/* SPECIFICITY NOTE — read before editing any rule below.
 *
 * Duda emits a per-widget rule for EVERY widget on the site, shaped
 *
 *     #dm .dmBody div.u_1213107879 { display: block !important }
 *
 * That is specificity (1,2,1) and it is `!important`. A hide written as a plain
 * `.mg-only-m { display:none !important }` is (0,1,0), so `!important` on both
 * sides means SPECIFICITY decides and Duda's rule wins — the element stays
 * visible and nothing in the console says so.
 *
 * So every gate below repeats its class three times behind `#dm`, giving (1,3,0),
 * which outranks (1,2,1) on class count without relying on source order. Do not
 * "tidy" the repetition away.
 */

/* Blog index: /blog serves a page of posts at a time and pages the rest from
 * Duda's backend, which we do not have. All of them ship; runtime.js shows one
 * page at a time. */
#dm .mg-blog-hidden.mg-blog-hidden.mg-blog-hidden {
  display: none !important;
}

/* PER-VIEWPORT WIDGET FORKS — THREE BANDS, unlike the document, which has two.
 *
 * These are two different mechanisms and conflating them ships a visible defect.
 * `data-mg-band` (handled by the boot script) selects the DOCUMENT, and desktop
 * and tablet share one document here. But .dmPhotoGallery and .mainBlog are built
 * by Duda's RUNTIME from the viewport, not from the document — so on that very
 * same desktop document, tablet and desktop render them differently.
 *
 * Measured on /: the desktop pass produces `text-layout-fixed
 * captionAlignment-bottom_center` with 1920w renditions, the tablet pass
 * `text-layout-bottom captionAlignment-undefined` with 1280w. So a two-band gate
 * here would serve the desktop caption layout and the 1920w crop to every tablet,
 * at 0.000% on a gate that only photographs 375/768/1440 if the boxes happen to
 * line up.
 *
 * build-pages.py emits one copy per band, stamped mg-only-d / mg-only-t /
 * mg-only-m. Without these rules ALL THREE render at every width, which presents
 * as a tripled widget and a large positive height delta rather than as anything
 * that looks like a CSS problem.
 *
 * The boundaries are Duda's own, read out of the ported cascade: mobile <=767,
 * tablet 768-1024, desktop >=1025.
 *
 * These hide rather than remove, deliberately — the elements stay in the document
 * so the runtime can still address them, and display:none costs no layout.
 *
 * Only the INACTIVE bands are hidden. The active one is never touched, so it
 * keeps whatever `display` the ported cascade gives it — hiding all three and
 * restoring one with `display: revert` would revert past the author cascade to
 * the UA default and replace the widget's real display value with a plain
 * `block`. */
@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;
  }
}