/* ===========================================================================
   Emerald Hill — Elementor bridge
   ---------------------------------------------------------------------------
   The theme already loads assets/css/styles.css, which carries the whole design.
   This file only covers the gap where Elementor wraps content in its own markup
   and the original selectors can no longer reach it.

   Load AFTER eh-styles. See the enqueue snippet in the README.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Containers
   Elementor gives every container a min-height and default padding. The
   stylesheet's .section and .container rules already handle spacing, so let
   them win rather than fighting with !important on individual pages.
   --------------------------------------------------------------------------- */
.elementor-element.e-con,
.elementor-element.e-con-inner {
  --min-height: 0;
}

.elementor .e-con > .e-con-inner {
  padding: 0;
}

/* .container keeps its own max-width and gutter from the design stylesheet. */
.elementor .e-con.container > .e-con-inner {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. Buttons
   Elementor renders <div class="elementor-widget-button"><a class="elementor-button">.
   The .btn classes land on the wrapper, so the anchor needs the styling instead.
   Selectors mirror .btn / .btn-gold / .btn-ghost / .btn-outline in styles.css.
   --------------------------------------------------------------------------- */
.eh-btn .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.15rem 2.4rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: color .5s var(--ease), background .5s var(--ease),
              border-color .5s var(--ease), transform .5s var(--ease);
}

.eh-btn .elementor-button-content-wrapper { gap: .65rem; }
.eh-btn .elementor-button-icon { font-size: .85rem; }

.eh-btn-gold .elementor-button,
.eh-btn-dark .elementor-button {
  background: var(--green);
  color: var(--cream-tint);
}
.eh-btn-gold .elementor-button:hover,
.eh-btn-dark .elementor-button:hover {
  background: var(--green-deep);
  color: var(--cream-tint);
  transform: translateY(-2px);
}

.eh-btn-outline .elementor-button {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}
.eh-btn-outline .elementor-button:hover {
  background: var(--green);
  color: var(--cream-tint);
  transform: translateY(-2px);
}

.eh-btn-ghost .elementor-button {
  background: transparent;
  border-color: rgba(245, 244, 239, .45);
  color: #fff;
}
.eh-btn-ghost .elementor-button:hover {
  background: var(--cream-tint);
  color: var(--green);
  border-color: var(--cream-tint);
  transform: translateY(-2px);
}

.eh-btn-sm .elementor-button {
  padding: .8rem 1.5rem;
  font-size: .62rem;
}

/* The wrapper must not add its own box. */
.eh-btn.elementor-widget-button { background: none; border: 0; padding: 0; }

/* Elementor Containers default to align-items: stretch. Inside a
   column-direction container (e.g. .split-text) that stretches the button
   widget's wrapper to the full column width instead of sizing to its
   content, unlike the original inline-block <a class="btn">. */
.eh-btn.elementor-widget-button { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   3. Forms
   Rebuilds the .field / .grid-2 look from the static forms on top of
   Elementor Pro's form markup.
   --------------------------------------------------------------------------- */
.eh-form .elementor-form { display: block; }

.eh-form .elementor-field-group {
  margin-bottom: 1.15rem;
  padding: 0;
}

.eh-form .elementor-field-group > label {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.eh-form .elementor-field-textual {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: .95rem 1.1rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 300;
  color: var(--ink);
  transition: border-color .35s var(--ease);
}

.eh-form .elementor-field-textual:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: none;
}

.eh-form textarea.elementor-field-textual { min-height: 120px; resize: vertical; }

.eh-form .elementor-button[type="submit"] {
  width: 100%;
  background: var(--green);
  color: var(--cream-tint);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.15rem 2.4rem;
  transition: background .5s var(--ease), transform .5s var(--ease);
}

.eh-form .elementor-button[type="submit"]:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
}

.eh-form .elementor-message-success { color: var(--green); }
.eh-form .elementor-message-danger  { color: #a33; }

/* ---------------------------------------------------------------------------
   4. Headings and text
   Elementor wraps headings in .elementor-widget-heading and paragraphs in
   .elementor-widget-text-editor. Both add margins the design does not expect.
   --------------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title { margin: 0; }
.elementor-widget-text-editor > *:last-child { margin-bottom: 0; }

/* Elementor's own Global Kit sets a default title/body color (usually its
   demo accent colour) directly on .elementor-heading-title and paragraph
   text with a selector Elementor keeps a high specificity, so it wins over
   the design stylesheet's plain h1/h2/h3/p rules and headings render in
   Elementor's default colour instead of the design's ink/cream. Force ours
   to win instead. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p { color: inherit !important; }

.section--emerald .elementor-heading-title,
.cta-band .elementor-heading-title { color: #fff !important; }
.cta-band .elementor-heading-title em { color: var(--cream) !important; font-style: italic; }
.eyebrow.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading.eyebrow .elementor-heading-title { color: var(--green) !important; }
.eyebrow.light.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading.eyebrow.light .elementor-heading-title { color: var(--cream) !important; }

/* The eyebrow is an inline-flex rule with ::before, so it needs to stay inline. */
.elementor-widget-heading.eyebrow .elementor-heading-title,
.elementor-widget-heading .eyebrow { display: inline-flex; }

/* .sec-head h2 sizing is defined by the child combinator in styles.css, which
   Elementor's wrapper breaks. Re-state it for the widget structure. */
.sec-head .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  font-weight: 300;
  margin: 1.3rem 0 .5rem;
}

.sec-head .elementor-widget-text-editor {
  color: var(--muted);
  font-size: 1.05rem;
}

.sec-head.center,
.sec-head.center .elementor-widget-heading,
.sec-head.center .elementor-widget-text-editor { text-align: center; }

/* ---------------------------------------------------------------------------
   4b. Grid layouts
   Every Elementor container sets its own `display: flex` via a per-element
   ID selector, which is more specific than these classes' plain
   `display: grid` rule in the design stylesheet, so it wins and every grid
   collapses into a single stacked column. Force grid back with !important
   wherever the design stylesheet defines one of these as a CSS grid.
   --------------------------------------------------------------------------- */
.stats, .prop-grid, .split, .cards-3, .cards-4, .testi-grid, .suburb-grid,
.cols, .grid-2, .gallery, .detail-grid, .amenities, .ps-panel, .prop-card {
  display: grid !important;
}

/* Home page "Our Story" stats block only has 2 figures (not the usual 4),
   originally a page-specific inline style the conversion couldn't carry
   over into a reusable widget. */
.stats-2col {
  grid-template-columns: 1fr 1fr !important;
  text-align: left !important;
  margin-top: 2.6rem !important;
}

/* ---------------------------------------------------------------------------
   5. Canvas pages
   Pages set to Elementor Canvas render without the theme wrapper, matching the
   original edge-to-edge sections.
   --------------------------------------------------------------------------- */
body.eh-elementor-canvas .site-header { position: fixed; }

/* ---------------------------------------------------------------------------
   6. Editor only
   Gives the raw markup widgets a visible label so an editor knows those blocks
   are script-driven and should not be pulled apart.
   --------------------------------------------------------------------------- */
.elementor-editor-active .elementor-widget-html {
  outline: 1px dashed rgba(19, 50, 43, .25);
  outline-offset: 4px;
}