/* layout-fixes.css - written by fixers/70_layout.py. Do not hand-edit.

   Geometry only. Colour is owned by assets/a11y-fixes.css, which is linked
   before this file; nothing here sets a colour, so the two cannot disagree.

   Selectors used (all either our own mhw-* classes or plain element/attribute
   selectors, so a rename of the theme's class names cannot break them):
     div.mhw-added            every block 10_content injected (figcaption.mhw-added
                              is a caption, not a container, and is excluded by
                              the div type selector)
     .mhw-band                written onto the top-level ones by 70_layout.py
     div.mhw-added > *        the single inner wrapper inside each block
     footer <text elements>
*/

/* ------------------------------------------------------------------ 1. bands */
/* Elementor resolves a container's display through `display: var(--display)`,
   and sets --display per element in the per-post CSS. An injected block has no
   per-element CSS, so on a top-level block the variable is empty, the
   declaration is invalid at computed-value time and display falls back to
   `inline`: the block ignored width, max-width and margin auto, ran from x=0
   to the viewport edge, and overlapped the section below it. State the layout
   directly instead. */
div.mhw-added {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* The outer element carries the gutter, the inner one the column - the same
   division of labour the live sections use, and the same numbers. The block
   padding is ours: as an inline box a band had none, so it overlapped the
   section under it by 45-48px and its own h2 sat flush on the h3 below. */
div.mhw-added.mhw-band {
  padding-inline: 10px;
  padding-block: 24px;
}

/* !important on display: Elementor's own `.e-con > .e-con-inner` rule is more
   specific than this one and resolves to the same empty --display, which a
   flex parent then blockifies - leaving the inner a block, so the container's
   20px row gap never applied and the FAQ h2 sat flush on the first h3. */
div.mhw-added > * {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-width, min(100%, 1140px)) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* ------------------------------------------------------- 2. gallery captions */
/* The gallery widget sits in a section that is deliberately full bleed, so the
   captions 10_content added had their text 2px from the viewport edge at 768px
   and 1024px. Give them the same 10px gutter the rest of the page uses; inside
   a gallery tile that reads as the caption's own inset. */
/* !important because the gallery widget's own caption rule is a `padding`
   shorthand (6px 2px) at a higher specificity; only the inline half is
   overridden, so the caption keeps its 6px block padding. */
figcaption.mhw-gallery-caption {
  padding-inline: 10px !important;
  box-sizing: border-box;
}

/* --------------------------------------------------- 3. no long-token spill */
/* The footer's "Email Us" box holds a 29-character address with no break
   opportunity. Its text column is min-width:auto inside a flex row, so the
   address set the column's minimum width and pushed the page 42px past a 768px
   viewport. Allowing a break inside the token lets the column shrink. */
footer p,
footer li,
footer a,
footer span,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  overflow-wrap: anywhere;
}

/* ------------------------------------------- 4. live sections: never edge to edge */
/* The theme centres each section's content with
       .e-con > .e-con-inner { margin: 0 auto; max-width: var(--content-width) }
       --content-width: min(100%, var(--container-max-width, 1140px))
   Below 1140px that min() resolves to 100%, so the content column IS the viewport and
   centred headings land 3-5px from the edge (h3 "Get a Fast Quote" at x=4 at 768px,
   h1 "About Michael's..." at x=3 at 390px).

   Clamping the inner column fixes every section at once. Only the inner column moves:
   the container keeps its full width, so full-bleed backgrounds and hero images are
   unchanged.

   This clamps the inner rather than redefining --content-width, because Elementor writes
   that property inline per section and an inline style beats a stylesheet: the footer
   sets --content-width:1790px, so redefining the property left the footer copyright at
   x=0 while every other section had its gutter. min() keeps each section's own intended
   width and only ever takes away the last 10px at each edge.

   Deliberately NOT inside a media query. A normal section at 1440px computes
   min(1140px, 1420px) = 1140px - completely unchanged. Only a section whose own declared
   width exceeds the viewport is affected, which is exactly the footer, at every width. */
.e-con > .e-con-inner {
  max-width: min(var(--content-width, 100%), 100% - (10px * 2));
}