/*
 * Neutralising Elementor's own layout defaults.
 *
 * Loaded after theme.css so it wins. Hand-written rather than compiled, because
 * these target Elementor's class names, not ours — Tailwind has no reason to know
 * about them.
 *
 * Every rule here exists because Elementor adds geometry this design does not
 * want. The first one is the important one: without it every stacked widget
 * gains 20px of bottom margin and every section's rhythm is wrong.
 */

/* Elementor: `.elementor-widget:not(:last-child) { margin-bottom: 20px }` */
.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/*
 * Container defaults. These are also zeroed in Site Settings → Layout, but a
 * stylesheet rule survives someone re-saving the kit.
 */
.elementor-section .elementor-container,
.e-con,
.e-con-inner {
  --content-width: 100%;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
}

/*
 * `lg:items-end` is written directly onto a grid in the page blueprint rather
 * than through one of the .ssbp- component classes, so Tailwind has no chance
 * to mark it important. Elementor's `align-items: var(--align-items)` would
 * otherwise win and the "Browse all change parts" link would sit at the top of
 * its column instead of aligning with the last line of the intro.
 */
@media (min-width: 1024px) {
  .e-con.ssbp-grid.lg\:items-end {
    align-items: flex-end !important;
  }
}

/*
 * Elementor 4.2.3 compatibility — do not simplify these away.
 *
 * 4.2.3 added `padding-inline-start: var(--padding-inline-start)` and
 * `overflow: var(--overflow)` to `.e-con` in its own frontend stylesheet. Both
 * land after theme.css, and the padding one is a logical property, which beats
 * the physical `padding-left` Tailwind emits no matter what the source order
 * is. The symptom is subtle: sections keep their vertical rhythm but lose their
 * side gutters, so the copy runs to the very edge of the window.
 *
 * The `!important` is deliberate. Elementor writes a per-post stylesheet
 * (post-7.css and friends) that repeats `--padding-left: 0px` at a specificity
 * of (0,3,0), which a hand-written selector cannot beat without becoming
 * unreadable.
 */
.ssbp-container {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  /*
   * Elementor drives margins through --margin-left / --margin-right in the
   * same way it drives padding, and its kit stylesheet sets them to 0. Without
   * this the container keeps its 80rem cap but sits hard against the left edge
   * instead of centring, which reads as "the gutter is missing" even though the
   * padding is correct.
   */
  margin-left: auto !important;
  margin-right: auto !important;
  /*
   * The kit also publishes --content-width: min(100%, 1140px). Our cap is the
   * design's 80rem, so it is restated here rather than left to whichever rule
   * happens to win.
   */
  max-width: 80rem !important;
}

@media (min-width: 640px) {
  .ssbp-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 1024px) {
  .ssbp-container {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/*
 * The section clips its own backdrop.
 *
 * Fed through Elementor's own variable as well as the property, so it holds
 * whichever of the two that version happens to apply. `clip` rather than
 * `hidden` on purpose — `hidden` makes the section a scroll container, which
 * silently stops `position: sticky` working for the heading column beside it.
 */
.e-con.ssbp-section,
.ssbp-section {
  --overflow: clip;
  overflow: clip !important;
}

/*
 * `max-width` is split out of the reset above because .ssbp-container must keep
 * the 80rem cap it gets from Tailwind. This file loads after theme.css and the
 * two selectors have equal specificity, so an unqualified `max-width: none`
 * here silently wins and every section runs edge-to-edge.
 */
.elementor-section .elementor-container,
.e-con:not(.ssbp-container),
.e-con-inner:not(.ssbp-container) {
  max-width: none;
}

/*
 * The widget wrapper chain is `.elementor-element > .elementor-widget-container`.
 * Our widgets emit their own section and container, so these wrappers must be
 * geometrically invisible.
 */
.elementor-widget-container {
  margin: 0;
  padding: 0;
}

/*
 * Widgets that render a full-bleed section need their wrappers to not constrain
 * width. Scoped to our own widget names so Elementor's stock widgets keep their
 * normal behaviour if anyone uses one.
 */
[class*='elementor-widget-ssbp_'] > .elementor-widget-container {
  width: 100%;
}

/*
 * Elementor sets `overflow: hidden` on some container presets, which would clip
 * the sticky header and the backdrop layers' -80px overscan.
 */
.e-con > .e-con-inner {
  overflow: visible;
}

/*
 * Images.
 *
 * Elementor ships `.elementor img { border: none; height: auto; max-width: 100% }`.
 * That selector is (0,1,1) and every Tailwind utility is (0,1,0), so `height:
 * auto` wins no matter what an image is told to do: a photograph asked to fill a
 * fixed-ratio frame instead sizes itself from its own aspect ratio and overflows
 * its border by about 12px, and the header logo loses its 36px cap the moment
 * the header is rendered through Elementor.
 *
 * There is no way to un-apply a rule, so the utilities that appear on an <img>
 * anywhere in this theme are re-asserted below at (0,2,1). Putting a new sizing
 * utility on an image means adding it here as well — which is the cost of
 * Elementor resetting a bare element selector.
 *
 * Deliberately keyed on our own class names rather than on `.elementor img`
 * generally, so Elementor's own image widget keeps the behaviour it expects.
 */
.elementor img.h-full { height: 100%; }
.elementor img.h-9 { height: 2.25rem; }
.elementor img.w-full { width: 100%; }
.elementor img.w-auto { width: auto; }
.elementor img.max-h-full { max-height: 100%; }
.elementor img.max-w-full { max-width: 100%; }

/*
 * `border: none` also discards Tailwind's preflight border defaults, so a border
 * utility on an image would set a width against `border-style: none` and draw
 * nothing. Restoring the preflight values costs nothing — both are zero-width by
 * default — and stops that being a surprise later.
 */
.elementor img {
  border-style: solid;
  border-width: 0;
  /* Tailwind's borderColor.DEFAULT, which the preflight applies to everything
     else. Hard-coded because this file is not run through Tailwind. */
  border-color: #e5e7eb;
}

/*
 * Section grids.
 *
 * Elementor forces `display: flex` on every container (and adds `.e-flex`), so a
 * container carrying `.ssbp-grid` would lay out as a flex row and the column
 * spans would do nothing. Restored here at (0,2,0) so the twelve-column grids
 * behave as they did in the React build.
 *
 * `align-items` is reset too: Elementor's flex default stretches children, which
 * on a grid silently overrides the `items-end`/`items-center` some sections use.
 */
.e-con.ssbp-grid,
.e-con-inner.ssbp-grid {
  display: grid;
}

/*
 * Section shells, containers and grid columns are pure block wrappers.
 *
 * Elementor makes every container a flex column. For the columns of a section
 * grid that is not just redundant, it is wrong: a flex column fails to size
 * itself around a descendant whose height comes from `aspect-ratio`, so an image
 * slot inside one collapses its column to a couple of pixels and overflows. It
 * goes unnoticed above `lg`, where the taller column sets the row height — and
 * then costs 450px the moment the grid stacks.
 *
 * The React build used plain <div>s here, which is what this restores.
 */
.e-con.ssbp-section,
.e-con.ssbp-container,
.e-con[class*='ssbp-span-'],
.e-con.ssbp-sticky {
  display: block;
}

/*
 * Backdrop layers.
 *
 * Elementor uses ::before and ::after on every container for its own background
 * overlay: it sets `content: var(--background-overlay)`, which resolves to
 * nothing so our layers never render, and `width/height: 100%` with `top/left:
 * 0`, which overrides the sizing our `inset: -80px` implies and leaves the
 * bottom 80px of every section with no hairline grid. Both re-asserted here,
 * after Elementor.
 */
.e-con.ssbp-section::before,
.e-con.ssbp-section::after {
  content: '';
  display: block;
  top: -80px;
  left: -80px;
  right: auto;
  bottom: auto;
  width: calc(100% + 160px);
  height: calc(100% + 160px);
}