/* 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: THIS SITE DOES HAVE A PAGER, and it withholds most of the posts.
 *
 * Measured on live: /blog declares data-paginate-total-elements="29" and
 * visible-items="10", and renders exactly 10 distinct data-blog-post-alias values.
 * The control is an APPEND-style <a class="more-posts-text-container"> ("Show
 * More"), not a numbered nav — driving it goes 10 -> 20 -> 29, after which the
 * control removes itself. blog.rss independently declares 29 items.
 *
 * A static build has no Duda backend, so all 29 cards ship and the extras are
 * stamped mg-blog-hidden with data-mg-blog-page in live's own batch size;
 * runtime.js reveals them a batch at a time. This rule is what hides them
 * initially, so unlike the port it came from it is NOT a no-op here. */
#dm .mg-blog-hidden.mg-blog-hidden.mg-blog-hidden {
  display: none !important;
}

/* display:none DOES NOT CHANGE CHILD INDICES, so shipping the withheld cards
 * silently moves which card is :last-child.
 *
 * Duda's own rule is `.postArticle:not(:last-child){padding-bottom:Npx}` — this
 * cascade carries it at 100px, 20px and 10px for the three bands. On live the
 * 10th card IS the last child and takes none of it. In our build the 10th card is
 * followed by 19 hidden siblings, so it stops matching :last-child and GAINS that
 * padding, pushing the control and the whole footer down by a constant amount at
 * every width — the signature of one shared element rather than a per-page fault.
 *
 * Keyed on `:has(+ .mg-blog-hidden)` rather than on a stamped class, because that
 * tracks the SEQUENCE as batches are revealed instead of pinning the initial
 * state; runtime.js does not have to re-stamp anything as cards appear.
 *
 * Specificity: Duda's rule is (0,2,1) and not !important, so this (0,4,1) plain
 * rule wins on merit without needing one. */
#dm .postArticle:not(.mg-blog-hidden):has(+ .postArticle.mg-blog-hidden) {
  padding-bottom: 0;
}

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

/* MEDIA-SLIDER FILM ROLE — NO OVERRIDE, and that is the measured answer.
 *
 * An earlier revision added a filmstrip rule here, reasoning from the SERVED html
 * where the film role carries `.gDtRCy` with position:absolute, right:-200%,
 * flex-direction:row and translateX(-0%). That was WRONG, and it is recorded
 * rather than quietly deleted because the reasoning is seductive.
 *
 * The served html is the authority for what the RUNTIME WRITES, but this rule is
 * not something the runtime writes — it belongs to the pre-hydration render. Once
 * the component hydrates it re-renders under a different generated class and the
 * filmstrip rule is simply not applied.
 *
 * MEASURED on live, settled, at 1440:
 *     class="sc-gEvEer jKjUdt"  position:relative  display:block
 *     left:0px  right:0px  transform:none  children:2
 *
 * which is precisely what this build already produced WITHOUT any override. So
 * the correct action here is to add nothing.
 *
 * INHERITED CONTEXT, RETARGETED. The paragraph that stood here described a slider
 * on the PREVIOUS client's /about-us and named that client's image files — it was
 * carried in with this file and is not a fact about cristosgaragedoors.com. The
 * general lesson it recorded still holds and is why the block above adds nothing:
 * a slider showing a different photograph than live is usually the CAPTURE landing
 * on a different slide, not a CSS defect, and the remedy is to exclude it from the
 * pixel gate and verify it per element.
 *
 * On THIS site there is exactly ONE slider, on /reviews (censused over elements
 * with <style>/<script> stripped: 1 of 41 pages). Whether it auto-advances is
 * measured before anything is excluded, and recorded in visual-diff.config.json's
 * hiddenRegions with the measurement behind it.
 */

/* ---------------------------------------------------------------------------
 * ACCORDION OPEN STATE — recovering a rule the live CSS read could not see.
 *
 * Duda's FAQ accordion is a styled-component driven by Duda's runtime, which is
 * correctly not ported. The markup and the ported cascade both arrive intact, so
 * the widget PAINTS in its settled state and the pixel gate scores the page
 * 0.000% — while every click is inert. Measured on 38 of this site's 41 pages.
 *
 * The state is a generated class on the panel host, and the two names are NOT
 * hardcoded here for the reason gotcha 75 gives: styled-components mint a fresh
 * instance name per render. What IS measured is the mechanism —
 *
 *     closed: .dygwmn { overflow:hidden; transition:max-height .3s ease-out;
 *                       height:auto; max-height:0px; }
 *
 * — so the transition runs on MAX-HEIGHT, and opening means raising it.
 *
 * THE OPEN RULE IS ABSENT FROM THE PORTED CASCADE, and that is not a porting
 * mistake. styled-components insert their rules through the CSSOM, so a class
 * only exists in a document's sheet if that component actually RENDERED with it.
 * No panel is ever open on a freshly loaded page, so `.gnWefg` — the open class
 * live uses — appears in ZERO of the ported sheets while `.dygwmn` appears in 4.
 * Restoring it is recovering a sheet the live read could not reach, which is the
 * same situation gotcha 46 describes for a slider's resting state, arrived at
 * from the opposite direction.
 *
 * Keyed on our own class rather than Duda's generated one so nothing here depends
 * on a name that changes per render. Repeated behind #dm to clear Duda's own
 * per-widget `!important` display rules (gotcha 70).
 *
 * Lives in gm/, NOT in styles/: port-css cleans its own hashed output from that
 * directory on every run and would take this file with it (gotcha 49).
 * ------------------------------------------------------------------------- */
#dm .mg-acc-open.mg-acc-open.mg-acc-open {
  max-height: 2000px;
}

/* ---------------------------------------------------------------------------
 * BLOG PAGINATION — THE PAGE NUMBERS WERE WHITE ON WHITE.
 *
 * Duda's pagination widget takes its ink from the theme's BUTTON tokens:
 *
 *   .pagination-item { color: var(--btn-text-color) }
 *
 * and this theme's button is a transparent, white-outlined button meant to sit on
 * a photo — measured on the built page, --btn-bg-color is rgba(0,0,0,0),
 * --btn-text-color is white and --btn-border-color is white. On the blog section's
 * white background that renders "2" and "3" as white text on white: present,
 * correctly sized, clickable, and invisible. Only the ACTIVE number was legible,
 * because it is painted --color_3 (red) by a separate rule, which is exactly why
 * the pager looked like a single number rather than a broken control.
 *
 * The inactive numbers and the arrow glyphs are given the site's own body ink,
 * --color_2 (38,38,38) — the same colour the post titles beside them use — rather
 * than a new hex. The active number keeps its red, and the disabled arrow keeps a
 * muted grey but a darker one, since the shipped rgb(201,202,205) is barely visible
 * on white either.
 *
 * Scoped to the blog widget and raised over the (0,4,0) base rule with #dm.
 * ------------------------------------------------------------------------- */
#dm [dmle_extension="internal_blog_list"] .pagination-nav .pagination-list .pagination-item,
#dm [dmle_extension="internal_blog_list"] .pagination-nav .pagination-list .pagination-item .pagination-link {
  color: var(--color_2, rgb(38, 38, 38));
}

#dm [dmle_extension="internal_blog_list"] .pagination-nav .pagination-list .pagination-item .pagination-link.active {
  color: var(--color_3, rgb(188, 38, 26));
}

#dm [dmle_extension="internal_blog_list"] .pagination-nav .pagination-list .pagination-item .pagination-link:hover:not(.disabled):not(.active) {
  color: var(--color_3, rgb(188, 38, 26));
}

#dm [dmle_extension="internal_blog_list"] .pagination-nav .pagination-list .pagination-item .pagination-link.disabled {
  color: rgb(150, 152, 156);
}

/* ---------------------------------------------------------------------------
 * TABLET HEADER CALL BUTTON — white outline and white label.
 *
 * The button sits on the header's blue bar (--color_1, rgb(10,86,156)) and shipped
 * with a RED 2px border and RED label text (--color_3, rgb(188,38,26)) while its own
 * phone icon was already white. Red on blue is the weakest pairing in the palette and
 * the icon disagreed with the text beside it.
 *
 * Border and label are brought to --color_8 (white), matching the icon, so the whole
 * control reads as one outlined button against the blue.
 *
 * TABLET ONLY, bounded on both sides. The upper bound keeps the desktop header — a
 * different widget, u_1267185496 — untouched; the lower bound keeps the mobile header,
 * which uses a bare icon link rather than this button, out of scope. `!important` is
 * required because the shipped per-page rules set this button's colours that way too.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  #dm .hamburger-header-container a.dmButtonLink[icon-name="dm-icon-phone"] {
    border-color: var(--color_8, #fff) !important;
    color: var(--color_8, #fff) !important;
  }

  #dm .hamburger-header-container a.dmButtonLink[icon-name="dm-icon-phone"] .text,
  #dm .hamburger-header-container a.dmButtonLink[icon-name="dm-icon-phone"] .icon {
    color: var(--color_8, #fff) !important;
    fill: var(--color_8, #fff) !important;
  }
}

/* ---------------------------------------------------------------------------
 * "DON'T TRUST AN AMATEUR…" SERVICE GRID — ONE CARD PER LINE ON MOBILE.
 *
 * This block is the photo gallery widget #1347051419 on the home page, laid out by
 * Duda as `.photogallery-row` (display:flex, flex-wrap:nowrap) holding two
 * `.photogallery-column.column-2` cells of 175px each. At 390px that leaves each card
 * 175px wide carrying a title and a paragraph of description — the captions ran to
 * 311px tall against a 175px photo, so the text dominated a thumbnail too small to
 * read the service in.
 *
 * Letting the row WRAP and taking each cell to full width gives one card per line.
 * The row keeps its two children, so this is a reflow rather than a re-grouping and
 * nothing about the markup or the lightbox's photo set changes.
 *
 * Scoped to this gallery id and to mobile. Both the section and the gallery exist on
 * the home page only (checked across all 45 built pages), and the site's other
 * galleries — /gallery's six-photo grid and the blog posts' single images — use
 * different ids and are deliberately untouched. `!important` is needed because the
 * widget's own per-instance rules size these cells the same way.
 * ------------------------------------------------------------------------- */
/* The id is addressed as an ATTRIBUTE, not as #1347051419. Duda's widget ids are all
 * numeric, and a CSS id selector may not begin with a digit — written that way the
 * selector is invalid, and an invalid selector anywhere in a comma-separated list
 * throws away the WHOLE rule. The first version of this block did exactly that and
 * changed nothing while looking correct. */
@media (max-width: 767px) {
  #dm .dmPhotoGallery[id="1347051419"] .photogallery-row {
    flex-wrap: wrap !important;
  }

  #dm .dmPhotoGallery[id="1347051419"] .photogallery-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ---------------------------------------------------------------------------
 * HOURS / CONTACT BLOCK — CENTRED NOW THAT IT IS ALONE IN ITS ROW.
 *
 * The blue block (#1269164461) and the Facebook widget were the two `large-6` halves
 * of row #1743963089. With the Facebook column removed, the surviving half kept its
 * `float: left` position in a 1200px flex wrapper and sat against the left edge with
 * 600px of empty space beside it.
 *
 * The wrapper is already `display: flex`, so centring is one property — and the
 * block's own `margin-right: 30px`, which was the gutter BETWEEN the two columns, has
 * to go or it pulls the block 30px left of true centre. Both were measured on the
 * built page rather than assumed.
 *
 * Not scoped to a breakpoint: at small widths the column is `small-12` and fills the
 * row, where centring a full-width block is a no-op. The ids are addressed as
 * ATTRIBUTES — Duda's ids are numeric and `#1269164461` is an invalid selector that
 * would silently void the whole rule.
 * ------------------------------------------------------------------------- */
#dm .dmRespColsWrapper[id="1822509948"] {
  justify-content: center;
}

/* The gutter is set by `#dm .dmBody div.u_1269164461 { margin: 0 30px 0 0 !important }`,
 * which is (1,2,1). A rule at (1,2,0) — `#dm .dmRespCol[id="…"]` — LOSES to it even with
 * !important, and loses silently: the wrapper centred, the block stayed 15px left, and
 * only measuring the box showed margin-right still at 30px. Matching their selector and
 * adding the id attribute takes this to (1,3,1).
 *
 * Only `margin-right` is overridden, never the shorthand: the same widget carries
 * `margin: 0 0 30px !important` on the mobile band, and that bottom gutter is what keeps
 * the stacked block off the section below it. */
#dm .dmBody div.u_1269164461[id="1269164461"] {
  margin-right: 0 !important;
  float: none !important;
}