/* 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;
  }
}

/* Drawer close control (tablet + mobile only; the desktop header has no drawer).
   Fixed rather than absolute so a long menu cannot scroll it out of view. */
.mg-drawer-close {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  width: 34px;
  height: 34px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.mg-drawer-close:hover,
.mg-drawer-close:focus-visible { background: rgba(0, 0, 0, .78); }

/* Legal pages (privacy policy, terms). These are additions, not ports, so they
   carry the only hand-written content styling on the site — kept minimal and
   inheriting the theme's own type and colours. */
.mg-legal { padding: 32px 0 48px; }
.mg-legal h1 { margin: 0 0 8px; }
.mg-legal h2 { margin: 28px 0 8px; }
.mg-legal h3 { margin: 20px 0 6px; }
.mg-legal p { margin: 0 0 12px; line-height: 1.7; }
.mg-legal .mg-legal-list { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.mg-legal .mg-legal-list li { margin: 0 0 4px; line-height: 1.7; display: list-item; }
/* Belt and braces: if any inherited rule puts a block element back inside an
   <li>, keep it on the marker's own line rather than the line below it. */
.mg-legal .mg-legal-list li > p { display: inline; margin: 0; }
.mg-legal a { text-decoration: underline; }

/* Footer legal links (Privacy Policy / Terms). Added by this build — live has
   neither page. They sit AFTER the .copyright block, on their own line.
   The colour is set explicitly from the same theme variable the copyright block
   uses: only `.copyright` carries the rule that paints the footer text white, so
   an unstyled sibling here picked up the widget's grey (84,84,84) and the links
   rendered near-black on the brand red. */
.mg-legal-links {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--color_1);
}
.mg-legal-links a { color: var(--color_1); text-decoration: underline; }
.mg-legal-links a:hover { opacity: .8; }

/* Legal consent line on the contact forms (added by this build). */
.mg-form-legal { clear: both; margin: 10px 0 0; font-size: 12px; line-height: 1.6; opacity: .85; }
.mg-form-legal a { text-decoration: underline; }

/* FAQ accordion (Duda ssraccordion) open state.
   Only the panel's max-height is driven from JS; the +/- indicator is expressed
   here. Against live, the sole differences between the closed and open arrow
   classes are the rotation and the second bar's opacity:
     closed  .eODSZX rotate(-90deg)          .eyQoqK rotate(-90deg) opacity:1
     open    .jxwvWq rotate( 90deg)          .kEBKQa rotate( 90deg) opacity:0
   The open classes live only in stylesheets this build never loads, so those two
   declarations are restated here instead. Specificity (0,2,2) beats the shipped
   single-class rules (0,1,0), and their `transition: .5s ease-in-out` still runs. */
[data-mg-open="1"] [data-grab="accordion-item-arrow"] div > div { transform: rotate(90deg); }
[data-mg-open="1"] [data-grab="accordion-item-arrow"] div > div:nth-child(2) { opacity: 0; }

/* Drawer submenu caret. It toggles the group rather than following the parent
   link, so it needs a bigger hit area than the bare glyph — but the hit area must
   NOT change layout. Sizing the <span> itself (min-width/min-height + negative
   margins) grew it to 52x52 inside a 32px line, which lifted the caret above the
   label and overlapped the text; live keeps it inline-block, margin 0, baseline-
   aligned, sitting on the same line as the page name.
   So the glyph is left exactly as live renders it and the touch target is an
   absolutely-positioned ::after, which adds no layout at all.
   Tablet/mobile only; the desktop nav opens on hover and is untouched. */
.layout-drawer .unifiednav__item .icon {
  position: relative;
  cursor: pointer;
}
.layout-drawer .unifiednav__item .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 40px;
  transform: translate(-50%, -50%);
}

/* Second-<h1> demotions.
   /pest-images ("VIDEO") and /fortifying-your-fortress ("When DIY Isn't Enough")
   each shipped TWO <h1>s — faithfully, because live does too. Retagged to <h2>
   for one-H1-per-page, which changes nothing a visitor sees only if the type is
   pinned: the theme's own h2 rules differ in size, line-height and colour, and a
   size class pins font-size but not line-height.

   Values are measured from the <h1> rendering at 1440 / 768 / 375 BEFORE the
   change. `#dm` and !important are needed because the ported cascade styles
   headings from `#dm h2`-shaped rules that otherwise win: without them "VIDEO"
   dropped 45px -> 30px and both headings turned from rgb(9,5,1) to black. */
#dm h2.mg-was-h1 {
  font-family: "Fjalla One", sans-serif !important;
  font-weight: 400 !important;
  color: rgb(9, 5, 1) !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* /pest-images "VIDEO" — 45px/67.5px desktop+tablet, 40px/60px phone, centred. */
#dm h2.mg-was-h1.text-align-center {
  font-size: 45px !important;
  line-height: 67.5px !important;
  text-align: center !important;
}
/* /fortifying… "When DIY Isn't Enough" — 36px/54px desktop+tablet,
   29px/43.5px phone. */
#dm h2.mg-was-h1.size-36 {
  font-size: 36px !important;
  line-height: 54px !important;
  text-align: left !important;
}
@media (max-width: 767px) {
  #dm h2.mg-was-h1.text-align-center { font-size: 40px !important; line-height: 60px !important; }
  #dm h2.mg-was-h1.m-size-29 { font-size: 29px !important; line-height: 43.5px !important; }
}