/*
 * Rent UK Property — Elementor reconciliation.
 *
 * The design lives in the child theme's class-based CSS (rentuk-hero/home/site.css). Rebuilding
 * the header, homepage and footer as native Elementor structures on 2026-08-31 introduced two
 * mismatches, and this file fixes only those two. It adds no design decisions of its own.
 *
 *   1. Elementor's wrapper divs sit between a layout class and the things it lays out.
 *   2. Elementor containers set their own display / direction / gap.
 *
 * How (2) is done matters. Elementor drives containers through custom properties —
 * `.e-con{display:var(--display)}` and `.elementor-element:where(.e-con-full,…){gap:var(--row-gap) var(--column-gap)}`
 * — both at specificity (0,1,0). So this file sets the *custom properties*, never the
 * longhands. That leaves every child-theme rule like `.ruk-masthead .ruk-wrap{display:flex}`
 * (0,2,0) still winning, which is the whole point: the design keeps the last word. Setting
 * `display:block` directly here is what flattened the masthead into a column on the first
 * attempt.
 *
 * Headings, body copy and buttons are NOT Elementor's own widgets on these pages — see
 * RPUK_Widget_heading for why — so nothing here has to fight the global typography CSS.
 */

/* ------------------------------------------------------------------
   1. Pass-through wrappers
   `display:contents` drops the box but keeps the element in the DOM, so what a widget
   renders becomes a direct child of the grid or flex row above it.
   ------------------------------------------------------------------ */

.elementor-widget.ruk-flat,
.elementor-widget.ruk-flat > .elementor-widget-container,
.elementor-widget.ruk-flat > .elementor-widget-container > .ruk {
  display: contents;
}

/* The utility bar's links are laid out by `.ruk-utility .ruk-wrap` itself. */
.ruk-utility-links {
  display: contents;
}

/* A widget's own `.ruk` scope, nested inside a section that is already one, must not reset
   the colour and type it should be inheriting — `.ruk` sets `color:var(--ruk-ink)`, which
   turned the utility bar's links near-black on the dark green ground. */
.ruk .ruk {
  color: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* ------------------------------------------------------------------
   2. Container defaults
   Custom properties only. Anything the child theme states explicitly still wins.
   ------------------------------------------------------------------ */

/* Only the gap. `display` and `flex-direction` are NOT set here on purpose:
   Elementor writes `.elementor-12 .elementor-element.elementor-element-xxx{--display:flex}`
   per container at specificity (0,3,0), which no stylesheet rule of ours can outrank — so
   direction is set in each container's own Elementor settings instead (see elementorise.php),
   where the client can also see and change it. A container Elementor leaves as flex-column
   stacks its children exactly as the old `<div>` did, so only genuine rows need saying. */
.e-con[class*="ruk"] {
  --row-gap: 0px;
  --column-gap: 0px;
}

/* `.ruk-wrap` is the site's own max-width rail. Elementor must not centre it a second time. */
.e-con.ruk-wrap {
  max-width: var(--ruk-max);
  margin-inline: auto;
  padding-inline: var(--ruk-pad);
  width: 100%;
}

/* A flex item must be allowed to shrink, or long copy forces the row wider than the rail. */
.ruk-section-head > .elementor-element,
.ruk-masthead .ruk-wrap > .elementor-element {
  min-width: 0;
}

/* ------------------------------------------------------------------
   3. Small markup differences
   ------------------------------------------------------------------ */

/* The footer bar's line was a <span>; as a paragraph it only needs its margin removing. */
.ruk-footer-bar p { margin: 0; }

/* Body copy inside a section ends on the design's own spacing, not the theme's. */
.ruk p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   4. Editor-only placeholder
   ------------------------------------------------------------------ */

.rpuk-el-placeholder {
  display: block;
  padding: 18px 20px;
  border: 1px dashed #b7c3ba;
  border-radius: 10px;
  background: #f4f7f4;
  color: #3c4a3f;
  font: 500 13px/1.5 system-ui, sans-serif;
}
.rpuk-el-placeholder b {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6d7d71;
  margin-bottom: 4px;
}

/* A container Elementor puts inside one of the design's flex rows arrives as `width:100%`
   (`.e-con.e-flex{--width:100%}`), which pushes everything after it onto the next line — the
   section headings lost their right-hand note that way. In the old markup these were plain
   <div>s that shrank to their content. */
.ruk-section-head > .e-con,
.ruk-masthead .ruk-wrap > .e-con,
.ruk-utility .ruk-wrap > .e-con,
.ruk-footer-bar .ruk-wrap > .e-con {
  width: auto;
}

/* The one design rule that a direct-child selector broke.
   `rentuk-hero.css` hides everything but the phone number in the utility bar below 900px with
   `.ruk-utility .ruk-wrap>a:not(.ruk-utility-phone)`. The links are still laid out by the bar
   (the Link Row's wrapper is `display:contents`), but `display:contents` is a layout rule, not
   a DOM one — the anchors are children of that wrapper as far as a selector is concerned, so
   the `>` no longer matches and all three links showed on mobile. Same rule, descendant form. */
@media (max-width: 900px) {
  .ruk-utility .ruk-wrap a:not(.ruk-utility-phone) { display: none; }
}