/* Hand-written overrides for this migration.
 *
 * DELIBERATELY OUTSIDE site/public/styles/ (gotcha 49): tools/port-css.mjs owns
 * that directory and clears its own hashed outputs 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;
}

/* 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-t { 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.
 *
 * Measured: with the plain selector, /blog rendered all THREE per-device widget
 * copies at once — 30 cards against live's 10, document height 7640px against
 * live's 3548px, and the gate scored 59.4%.
 *
 * 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 10 of 37 posts and fetches the rest from Duda's backend,
 * which we do not have. All 37 ship; runtime.js reveals them 10 at a time. */
#dm .mg-blog-hidden.mg-blog-hidden.mg-blog-hidden {
  display: none !important;
}

/* PER-DEVICE WIDGET FORKS.
 *
 * Duda builds .dmPhotoGallery and .mainBlog client-side and the three device
 * documents genuinely differ, so build-pages.py emits each widget three times and
 * stamps the copies mg-only-d / mg-only-t / mg-only-m. Without these rules ALL
 * THREE render at every width — which is exactly what the first gate run showed:
 * / came back at 77% with a +10458px height delta and /blog at 62% with +10150,
 * both of them simply the same widget painted three times over.
 *
 * The band 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, inside the media queries. The active band is
 * never touched, so it keeps whatever `display` the ported cascade gives it — an
 * earlier version hid all three and restored one with `display: revert`, which
 * reverts past the author cascade to the UA default and would have replaced 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;
  }
}

/* ---------------------------------------------------------------------------
 * LAST-CARD PADDING — the cost of shipping the hidden pages.
 *
 * Duda's own rule is
 *
 *     .postArticle:not(:last-child) { padding-bottom: 30px }
 *
 * On live that is exact: /blog holds ten cards and the tenth IS :last-child, so
 * it takes no bottom padding. Our build ships ALL 37 so the "Show More" control
 * has something to reveal, and `display:none` DOES NOT REMOVE AN ELEMENT FROM THE
 * SIBLING TREE — so the tenth card has 27 hidden siblings after it, stops being
 * :last-child, and gains 30px live does not have.
 *
 * Measured at 375: every one of the first nine cards matched live to the pixel
 * (298/328/298/328/328/358/298/358/298) and the tenth was 280 against live's 250.
 * That 30px pushed "Show More" and the whole footer down by exactly 30px at all
 * three widths — /blog scored 4.586% / 2.713% / 2.410% with a constant +30px
 * height delta, the signature of one shared element rather than a per-page fault.
 *
 * build-pages.py already stamps .lastArticle on the last VISIBLE card, exactly as
 * Duda does, so keying on that restores live's geometry without touching any
 * other card. runtime.js re-stamps it as each batch is revealed.
 * ------------------------------------------------------------------------- */
#dm .postArticle.lastArticle.lastArticle {
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * TABLET DRAWER WIDTH — measured override, and the only new layout CSS this
 * migration writes.
 *
 * The ported cascade's generic `.layout-drawer` rule gives 75vw, which is CORRECT
 * for the mobile drawer and wrong for the tablet one. Measured on live at two
 * widths, because one data point cannot tell a viewport fraction from a fixed
 * canvas fraction:
 *
 *              viewport 768        viewport 1000       implies
 *   LIVE       269px               350px               0.350 -> 35vw
 *   BUILD      576px               750px               0.750 -> 75vw (ported)
 *
 * A constant px at both widths would have meant a fixed width; a constant RATIO
 * means viewport-relative, so 35vw is derived rather than guessed.
 *
 * MOBILE NEEDS NO OVERRIDE: live and the build both measure 281px at 375 (75vw),
 * so the ported rule is already right there and is left alone.
 *
 * BACKGROUND COLOUR NEEDS NO OVERRIDE EITHER: both drawers are rgb(255,255,255)
 * on live and in the build. This file inherited a `background-color: rgb(39,94,176)`
 * override from the PREVIOUS client, along with 40vw/80vw widths and a 190px logo
 * cap — none of it true here. It was deleted rather than carried, and this rule is
 * what the measurement actually supports.
 *
 * INVISIBLE TO THE PIXEL GATE, correctly: the drawer is closed in every capture
 * and parked off-screen (left = -width on both sides), so every page scores the
 * same either way. Found by opening it with a real click in check-interactive.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  #dm #hamburger-drawer.layout-drawer,
  #dm #hamburger-drawer.layout-drawer[data-origin="side"] {
    width: 35vw !important;
  }
}