/* ---------------------------------------------------------------
   marcello-widgets helper CSS.

   Scaffolding ONLY. Every visual value the pages render comes from the
   theme's main.css (the approved static build, compiled verbatim). Nothing
   here may set a colour, size or font, or the widgets stop being
   pixel-identical to the static source.
   --------------------------------------------------------------- */

/* Background-overlay layer for the Section control group.

   Elementor's Background group control only writes background properties; it
   cannot make a pseudo-element generate a box. Without `content` and `inset`
   below, setting an overlay produces no visible change at all, which is the
   dead-control failure the hook-class architecture exists to prevent.

   `::after` rather than `::before`: a ::before is the root's first child in
   paint order, so it would render underneath the hero image and its scrims.
   z-index 1 puts the overlay above those (they are z-auto) and below the
   content column, which the static build already lifts to z-10.

   Opt-in via .mh-has-overlay, and only added to a root the static markup
   already positions. Forcing `position: relative` on every widget root would
   re-anchor any absolutely positioned descendant and silently move it. */
.mh-has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Hello Elementor's reset.css carries `dd,dl,dt,li,ol,ul { border: 0 }`, whose
   `border-style: none` outranks Tailwind preflight's `*, ::before, ::after {
   border-style: solid }` on specificity (0,0,1 beats 0,0,0). A border-width
   utility then computes to a used width of 0, because a border whose style is
   none has no width - so `.border-b` on a list row silently rendered nothing
   and every such row lost 1px of height. The static build has no second reset,
   so this is a WordPress-only break.

   Restoring the style rather than forcing a width keeps preflight's contract
   intact: width stays 0 until a utility asks for one, so lists the design never
   ruled are unchanged. Same specificity as the reset, later sheet, so it wins. */
dd,
dl,
dt,
li,
ol,
ul {
  border-style: solid;
}

/* Same class of break, second element. Hello Elementor's reset.css styles
   `figcaption { color: #333; font-size: 16px; font-style: italic; font-weight: 400;
   line-height: 1.4 }`, and Tailwind preflight has NO figcaption rule at all, so
   nothing in main.css contests it. Our captions set their own size and colour but
   never font-style or line-height, so every caption in WordPress rendered italic
   and 1.4-leaded where the static renders upright and 1.5 - the source of a
   sub-pixel row drift that accumulated down a figure grid.

   `inherit` rather than hardcoded values: the browser has no UA style for
   figcaption, so inheriting from the parent IS the static behaviour, and a caption
   that does set a utility still wins on specificity. */
figcaption {
  color: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
}

/* Third break of the same class, and the widest. Hello Elementor's reset.css
   styles every button as a pink outlined pill:

     [type="button"], [type="submit"], button {
       border: 1px solid #c36; border-radius: 3px; color: #c36;
       padding: .5rem 1rem; user-select: none; white-space: nowrap; ... }
     [type="button"]:hover, ..., button:hover {
       background-color: #c36; color: #fff; }

   Tailwind preflight zeroes padding via `button, input, optgroup, select,
   textarea` and border via `*`, and main.css is the later sheet, so a plain
   <button> is fine. But the moment a button carries `type`, Hello matches on the
   ATTRIBUTE selector at 0,1,0 and outranks preflight's 0,0,1 type selector no
   matter the sheet order. Every button in the approved markup carries one: the
   gallery cells and the nav controls are type="button", the two form CTAs are
   type="submit".

   Measured on the mobile burger, static against WordPress: padding 0 -> 8px 16px,
   border-width 0 -> 1px, border-color #e5e7eb -> #c36, border-radius 0 -> 3px,
   user-select auto -> none, white-space normal -> nowrap. That padding is also
   the whole of the mobile nav defect: it grew the burger from 24x30 to 58x48,
   which pushed the logo 34px right and made the bar 18px taller.

   Every value below is either preflight's own declaration or the CSS initial, so
   this restores the static baseline rather than choosing anything. The one design
   value in the block, #e5e7eb, is preflight's border colour, and it paints
   nothing at zero width.

   Utilities still win because the child theme sets `important: true` on the
   Tailwind config, so `.px-8` on a form CTA emits with !important and outranks
   this. Without that flag a repair at this specificity would flatten padding on
   any button that styles itself, which is why the rule cannot simply be hoisted
   above main.css instead. */
[type='button'],
[type='reset'],
[type='submit'],
button {
  padding: 0;
  border: 0 solid #e5e7eb;
  border-radius: 0;
  color: inherit;
  font-size: 100%;
  font-weight: inherit;
  user-select: auto;
  white-space: normal;
}

[type='button']:focus,
[type='button']:hover,
[type='submit']:focus,
[type='submit']:hover,
button:focus,
button:hover {
  background-color: transparent;
  color: inherit;
}

/* The nav is `position: sticky; top: 0` in the static build, where its parent is
   <body> and so it has the whole page to travel down. Theme Builder wraps it in
   six boxes - widget, widget-wrap, column, container, section, and the
   <header class="elementor-location-header"> itself - and every one of them is
   sized by its only child, the nav. A sticky box is confined to the content box
   of its containing block, so with a parent exactly its own height the nav has
   zero travel and never sticks. Nothing looks wrong until you scroll.

   Fixed by sticking the OUTERMOST wrapper instead, whose parent is <body>. The
   nav keeps its own `sticky` class and simply sits still inside a header that
   now moves, which renders identically to the static. Sticking the header rather
   than flattening the six wrappers with `display: contents` leaves Elementor's
   box model untouched, so the editor still has boxes to drag.

   top/z-index are not values the design chose - they restate what the nav's own
   `top-0 z-50` utilities already declare, so the sticky wrapper reproduces the
   nav's stacking rather than inventing one. The mobile overlay is `fixed`, which
   sticky does not turn into a containing block, so it still covers the viewport;
   its z-[60] stays above the bar inside the header's stacking context, which is
   the same relationship the static has. */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Elementor's frontend reset (`.elementor img { height: auto; max-width: 100% }`)
   beats Tailwind's `.h-*` / `.w-*` utilities on specificity. Handled in the
   child theme by setting `important: true` on the Tailwind CDN config, which
   makes every utility emit with !important - so height/width utilities on a
   widget image win regardless of Elementor's context. No CSS override needed
   here. */

/* Contact page: widen the form column so the GHL embed can reach its own
   two-column field layout.

   The LeadConnector form (dPpAinw49ZhkjXcogkpj) pairs its fields at an iframe
   width of ~660px and stacks them below ~641px - measured against the live
   form, it is the embed's own breakpoint, not ours. The static build's 6/6
   split caps the card's inner width at 539px on a 1440 viewport, so the form
   stacked on every desktop size no matter how wide the screen got.

   4/8 from 1280px up puts the iframe at 670px (1280) through 1097px (1920),
   clear of that threshold; the 40px card padding supplies the 16px 1280 was
   short by. Below 1280 the grid keeps the approved 6/6, where the form is
   correctly stacked anyway. The compiled Tailwind only carries `md` variants,
   which is why this is a hand-written query and not a utility swap. */
@media (min-width: 1280px) {
  .mh-inquiry__grid > .mh-inquiry__intro {
    grid-column: span 4 / span 4;
  }

  .mh-inquiry__grid > .mh-inquiry__form-col {
    grid-column: span 8 / span 8;
  }

  .mh-inquiry__form-col .mh-inquiry__form {
    padding: 2.5rem;
  }
}