/* 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 65 posts and pages the rest from Duda's backend,
 * which we do not have. All 65 ship; runtime.js shows one page of 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;
  }
}

/* ===========================================================================
 * ADDED BY THE PRE-LAUNCH REVIEW — not from the Duda capture.
 * This file is the last stylesheet in the document, so these win on order; the
 * selectors still carry enough specificity to win regardless.
 * =========================================================================== */

/* Home hero H1, MOBILE ONLY.
 *
 * The ported rule is
 *   #dm .dmBody div.u_1921215720 { width:230px!important; margin:8px auto!important }
 * — a 230px box centred in a 300px content column, so `auto` resolves to 35px a
 * side and the headline sits inset from the paragraph directly beneath it
 * (H1 80->310, body copy 45->345). Duda measured that 230px against the phone it
 * previewed on; it is not a design decision worth reproducing.
 *
 * Width and side margins are released so the block fills the column's content
 * box and its left edge lines up with the body text. The 8px vertical margin and
 * the 2px 0 padding are left exactly as ported. Desktop and tablet already
 * compute `margin: 8px 0px` and are untouched — this is inside the phone query. */
@media (max-width: 767px) {
  #dm .dmBody div.dmNewParagraph.u_1921215720 {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Drawer submenus, TABLET AND PHONE.
 *
 * The captured drawer ships every submenu expanded and inert: the <li> carries
 * aria-expanded="false" while the <ul> is fully visible, so the caret is
 * decoration and a tap on a parent with a real href (Service Area) just
 * navigates. Collapsed by default here; runtime.js toggles [data-mg-sub].
 * The group holding the current page is opened by the runtime on load. */
@media (max-width: 1024px) {
  #dm .layout-drawer li[data-mg-sub="0"] > ul.unifiednav__container_sub-nav {
    display: none !important;
  }
  /* Flip the caret with the independent `rotate` property, NOT with `transform`.
   *
   * The icon element already carries a ported transform — scale(1.3) on phone,
   * scale(1.2) on tablet — from a selector with more compound parts than anything
   * sane to write here, so a `transform` declared here loses on specificity, and
   * winning with !important would mean restating those two scale values and
   * keeping them in sync by hand. `rotate` is a separate property: it COMPOSES
   * with the existing transform instead of replacing it, so there is no fight and
   * no duplicated magic number.
   *
   * (The glyph is a character in the icon font, not a ::before — computed
   * content on the pseudo is the empty string — so rotating ::before does
   * nothing, which is what the first attempt at this did.)
   *
   * The captured drawer shipped every group OPEN, so the glyph's resting state
   * is the open one — it reads as a caret pointing up. Collapsed is therefore
   * the state that gets flipped.
   *
   * A VERTICAL MIRROR, not a 180deg rotation. The glyph carries its own leading
   * space inside the character box, so rotating swings that space to the right
   * and pulls the caret hard against the label ("SERVICES<caret>"). Mirroring on
   * the Y axis inverts the chevron in place and leaves the spacing alone. */
  #dm .layout-drawer li[data-mg-sub] > a .icon-angle-down {
    transition: scale 0.25s ease-out;
  }
  #dm .layout-drawer li[data-mg-sub="0"] > a .icon-angle-down {
    scale: 1 -1;
  }
  /* The caret is the toggle, so give it a real hit area of its own — as an
   * absolutely-positioned ::after overlay, NOT as padding with negative margins.
   * Padding widens the box, and since `rotate` turns the element about its own
   * centre, a widened box swings the glyph left and lands it on top of the label
   * ("SERVICE<caret>S"). The overlay adds touch target without touching layout. */
  #dm .layout-drawer li[data-mg-sub] > a .icon-angle-down {
    position: relative;
  }
  #dm .layout-drawer li[data-mg-sub] > a .icon-angle-down::after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -12px;
    right: -12px;
  }
}

/* Footer GBP map — sit flush at the top of the footer.
 *
 * The row picks up the site's generic .dmRespRow padding: 100px top and bottom on
 * desktop, 50px on phone. The footer's ground is #040707, so that top padding
 * paints as a black band between the page content and the map. Measured: 110px of
 * black above the map at 1440, 60px at 375.
 *
 * Only the TOP is zeroed. The bottom padding is the site's own rhythm and is what
 * separates the map from the footer columns underneath. The 10px margin on the
 * embed wrapper goes too — it is the same gap by another name. */
#dm .dmFooter .dmRespRow.gy-added-map {
  padding-top: 0 !important;
}
#dm .dmFooter .gy-added-map .gy-added-map-embed {
  margin-top: 0 !important;
}