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

/* ---------------------------------------------------------------------------
 * NOTHING SITE-SPECIFIC HAS BEEN MEASURED FOR THIS SITE YET.
 *
 * The reference build this file came from carried measured drawer widths,
 * background colours and a pinned drawer-logo size. Those numbers belong to a
 * DIFFERENT client and have been deliberately removed rather than copied: a
 * drawer is photographed CLOSED in every capture, so a wrong width or colour
 * scores 0.000% and would have shipped invisibly behind a green gate.
 *
 * If the drawer/hamburger checks in this repo report a mismatch against live,
 * add the override HERE, with the measurement and the viewport widths it was
 * taken at, the way the reference file did.
 * ------------------------------------------------------------------------- */

/* Blog search results heading (/blog-search).
 *
 * The results page reuses /blog's listing widget, which is configured
 * show-blog-title="false" and therefore renders `.blog-name` at zero height.
 * Live's search page uses the `large_list` widget with show-blog-title="true",
 * where the same element IS the results heading. Rather than port that layout
 * and its stylesheet, the heading is given live's own measured type here.
 *
 * Measured on https://www.gladiatorguttersmn.com/blog-search:
 *   1440  42px, margin-bottom 34.86px
 *    768  28px, margin-bottom 23.24px
 *    375  28px, margin-bottom 23.24px
 *   all   Hemi Head Bold Italic, weight 400, rgb(57,81,116) = var(--color_1), centered
 *
 * Scoped to .mg-search-heading, which exists only on /blog-search, so no gated
 * page can be touched by it.
 */
#dm .mg-search-heading,
.mg-search-heading {
  display: block !important;
  font-family: "Hemi Head Bold Italic", Montserrat, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  color: var(--color_1, rgb(57, 81, 116)) !important;
  text-align: center !important;
  margin: 0 0 23.24px !important;
  width: 100% !important;
}

@media (min-width: 1025px) {
  #dm .mg-search-heading,
  .mg-search-heading {
    font-size: 42px !important;
    margin-bottom: 34.86px !important;
  }
}

/* Legal pages (/privacy-policy, /terms-and-conditions).
 *
 * Neither page exists on live, so there is no captured layout to reproduce and
 * nothing here can touch a gated page — `.mg-legal-row` appears on these two
 * documents only. The donor shell (contact-us) gives a full-bleed 1360px row at
 * 1440, which is far too wide a measure for continuous legal prose, so the text
 * is capped and centred and given the vertical rhythm the rest of the site uses.
 */
#dm .mg-legal-row {
  padding: 10px 40px 70px !important;
}
/* The wrapper is display:flex in the ported cascade, so centre the column with
 * justify-content rather than auto margins — the ported `.dmRespCol` rule wins
 * on specificity against a bare `margin: 0 auto` here. */
#dm .mg-legal-row > .dmRespColsWrapper {
  justify-content: center;
}
#dm .mg-legal-row > .dmRespColsWrapper > .dmRespCol {
  max-width: 900px;
  float: none;
}
.mg-legal-block { margin: 0 0 18px; }
.mg-legal-block h2 {
  margin: 38px 0 14px;
  font-size: 26px;
  line-height: 1.25;
}
.mg-legal-block:first-child h2 { margin-top: 0; }
.mg-legal-block p { margin: 0 0 14px; line-height: 1.7; }
.mg-legal-block ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.mg-legal-block li { margin: 0 0 7px; line-height: 1.6; list-style: disc; }
.mg-legal-block a { text-decoration: underline; }

@media (max-width: 767px) {
  #dm .mg-legal-row { padding: 6px 20px 46px !important; }
  .mg-legal-block h2 { font-size: 21px; margin: 30px 0 12px; }
}

/* Footer + form links to the legal pages.
 *
 * Neither page exists on live, so neither did these links. They are scoped to
 * `.mg-legal-links`, which appears nowhere in the ported markup, and the footer
 * pair sits inside the existing `.copyright` block so it inherits that block's
 * colour and alignment rather than introducing a new footer row.
 */
/* `.copyright` is a flex row, so the links land as a third item beside the
 * sentence — give them a gap and share the row's baseline. */
.copyright { flex-wrap: wrap; align-items: baseline; }
.copyright .mg-legal-links { margin-left: 10px; }
.mg-legal-links {
  font-size: 13px;
  line-height: 1.6;
  opacity: .85;
}
.mg-legal-links a {
  color: inherit;
  text-decoration: underline;
}
.mg-legal-links a:hover { opacity: 1; }

/* On a form the note reads as fine print under the submit button. */
.mg-legal-links_form {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  opacity: .75;
}

/* Body-copy interlink to the home page.
 *
 * Underline only, colour inherited from the surrounding text — several of these
 * mentions sit on dark section backgrounds in white type, and a link colour
 * would be unreadable there. Scoped to `.mg-interlink`, which is only ever
 * applied to body copy, so headings, buttons, header and footer keep their own
 * styling as the checklist requires.
 */
.mg-interlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mg-interlink:hover { opacity: .8; }

/* Mobile click-to-call, beside the hamburger.
 *
 * Live's mobile header has no phone link at all — measured at 375 with a phone
 * user agent, zero tel: links above y=220 — so this is an addition the checklist
 * asks for, not a reproduction. It is mobile-only (`data-mg-band="m"` prunes it
 * elsewhere), so the tablet and desktop headers are untouched.
 *
 * Geometry copied from the hamburger it sits next to: the hamburger is
 * position:fixed at right:10px, 40x40, top 23px. This sits one slot inboard at
 * right:56px, which leaves 10px clear of the logo (which ends at x=269 on a
 * 375px viewport) and 6px clear of the hamburger. position:fixed matters — the
 * drawer is push-content and moves #dm-outer-wrapper, and a statically
 * positioned button would slide off with the page.
 */
.mg-header-call {
  position: fixed;
  top: 23px;
  right: 56px;
  z-index: 10000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color_1, rgb(57, 81, 116));
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mg-header-call svg { width: 25px; height: 25px; display: block; }
.mg-header-call:active { opacity: .6; }

/* While the drawer is open the hamburger becomes the close X; a phone button
 * next to it would be ambiguous, and the drawer carries its own phone link. */
.layout-drawer_open .mg-header-call { display: none; }

/* Demoted body headings on four /service-areas/gutter-services-* pages.
 *
 * Those pages shipped TWO <h1>: the hero title, and a body section heading that
 * the same template renders as <h2> on every sibling page (fairmont, for one,
 * uses <h2> for the identical block with the identical u_ ids). The second was
 * demoted to <h2> so each page has exactly one <h1>.
 *
 * The demotion is NOT free, and measuring showed it. Font size is pinned by
 * `.size-42` / `.m-size-34` at !important so that survives, and the visible
 * colour comes from the inner <span>'s own inline style — but LINE HEIGHT does
 * not: the ported cascade sets `line-height: 1` on `#dm div.dmContent h1` and
 * nothing equivalent on h2, so the demoted heading fell back to `normal` and
 * grew 27px taller at 1440.
 *
 * Live's own h1, measured on /service-areas/gutter-services-albert-lea-mn:
 *    1440  font 42px  line-height 42px   (= 1)
 *     768  font 42px  line-height 42px   (= 1)
 *     375  font 34px  line-height normal
 * so line-height:1 is restored above 768 only, leaving the phone band alone
 * where live is `normal` and the two already agreed (164px on both sides).
 */
@media (min-width: 768px) {
  #dm .mg-h1-demoted { line-height: 1 !important; }
}

/* ---------------------------------------------------------------------------
 * PRE-LAUNCH REVIEW ROUND 2 — items raised on the client's own walkthrough.
 * Each rule below records what was measured, at which width, and on which side.
 * ------------------------------------------------------------------------- */

/* Legal note under the two contact forms — centred.
 *
 * The note is our own addition (neither legal page exists on live), so there is
 * no captured alignment to match and nothing gated can move: `.mg-legal-links`
 * appears nowhere in the ported markup. It inherits `text-align: start` from the
 * form column, which left it hanging under the left edge of a centred button. */
.mg-legal-links_form {
  text-align: center;
}

/* "Why Homeowners Choose Gladiator Gutters" — centre the card grid. (desktop)
 *
 * The five cards are a dmPhotoGallery widget, and the widget is NARROWER than
 * the column it sits in and pinned to its left edge:
 *
 *     #1186784398  .u_1186784398   x 108  w 1080  (width AND max-width 1080px,
 *                                                  margin-left/right 0)
 *     #1350454731  .dmRespCol      x 108  w 1292
 *
 * so 212px of slack all falls on the right. Measured at 1440: the card rows
 * centre on x=648 while the heading and both paragraphs centre on x=754 — the
 * 106px disagreement the client described as "funky". The rows are already
 * centred WITHIN the widget (`.photogallery-row { justify-content: Center }` is
 * in the ported per-widget CSS); it is the widget itself that is off-centre.
 *
 * Auto margins on the widget move it to 754 and match the text. Desktop only:
 * measured at 768 the cards centre on 419 against a heading at 418, and at 375
 * both sit on 188, so the lower bands already agree and are left untouched.
 *
 * This is a DELIBERATE DEVIATION from live, which has the identical 106px
 * offset — requested on the client's review. `u_1186784398` is on the home page
 * and nowhere else, so no other page can be affected. */
@media (min-width: 1025px) {
  #dm .dmBody div.u_1186784398 {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Footer GBP map — 300px.
 *
 * Shipped at 350 (iframe height attribute 350, and the row `u_1965798409` takes
 * its height from the iframe). The client asked for 300 on both the map and its
 * row, so the iframe is sized here rather than by editing the height attribute
 * in all 78 documents, and the row is pinned to match so no 50px strip of footer
 * background is left behind. Full-bleed width is unchanged. */
#dm .dmFooterResp .dmRespRow.u_1965798409,
#dm .dmRespRow.u_1965798409 {
  height: 300px !important;
  max-height: 300px !important;
}
#dm .u_1415438248.dmCustomHtml,
#dm .u_1415438248.dmCustomHtml iframe {
  height: 300px !important;
  max-height: 300px !important;
}

/* /contact-us — the empty spacer row above the map.
 *
 * `#1169592876` is a `dmRespRow` holding one `dmRespCol empty-column` and
 * nothing else: no text, no images, no background. Measured at 1440 it occupies
 * y=1952..2292, a 340px band of dead space between the estimate form and the
 * map. NOTHING IS FAILING TO LOAD — checked the markup and the network; the
 * column is genuinely empty in the Duda design and live reproduces the same gap.
 *
 * Reduced to 100px as requested. Scoped by id, so it is this one row on this one
 * page.
 *
 * The 340px is not one box: the row carries `padding: 120px 0` and its empty
 * column carries `min-height: 100px`, so 120 + 100 + 120 = 340. Setting a height
 * on the row alone left 240 (the padding survives a content-box height), so all
 * three are pinned here and the total lands on 100. */
#dm .dmRespRow[id="1169592876"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#dm .dmRespRow[id="1169592876"] > .dmRespColsWrapper,
#dm .dmRespRow[id="1169592876"] .dmRespCol {
  height: 100px !important;
  min-height: 0 !important;
}