/* ============================================================
   DevCo · Elementor compatibility layer
   ------------------------------------------------------------
   The DevCo homepage is rebuilt as native Elementor content
   (decision 0003). Elementor wraps every widget in its own
   .elementor-element div and adds flex classes to containers.
   The design-system CSS classes (dc-*, hero__*) are applied to
   those Elementor wrappers via the CSS Classes control.

   This file bridges the two so the existing theme CSS
   (tokens/base/components + per-section CSS) styles the
   Elementor structure unchanged. It also re-creates DECORATION
   that is not content (survey-plate ticks, drift glows, ghost
   word, hairlines) as pure CSS keyed to the section classes —
   decoration is never rebuilt as editable widgets.

   Auto-enqueued by functions.php (assets/css/sections/*.css).
   Loaded after every section stylesheet, so it can correct them.

   SCOPE: every rule is scoped to .devco-site so it only ever
   touches DevCo pages, never the WP admin or other themes.
   ============================================================ */

/* ------------------------------------------------------------
   1. Elementor container resets — neutralise Elementor's own
      width/padding/gap defaults so our design-system layout
      (dc-shell, hero__grid, etc.) is the single source of truth.
   ------------------------------------------------------------ */
.devco-site .elementor-element.e-con,
.devco-site .elementor-element.e-con-full,
.devco-site .elementor-element > .e-con-inner {
  --container-max-width: none;
  --container-default-padding-block-start: 0;
  --container-default-padding-block-end: 0;
  --container-default-padding-inline-start: 0;
  --container-default-padding-inline-end: 0;
  --gap: 0px;
  width: 100%;
}

/* Elementor widgets carry no intrinsic spacing — the design
   system owns all rhythm. */
.devco-site .elementor-widget {
  margin: 0;
}
.devco-site .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   2. HERO — section shell
   The top container carries `dc-section sec--dark hero` + #hero.
   hero.css already styles `.hero`; we only re-add decoration
   that lived as markup in hero.php (ghost word, vertical line).
   ------------------------------------------------------------ */

/* the section needs to host absolutely-positioned decoration */
.devco-site #hero.hero { position: relative; }

/* Ghost word "Perth." — decoration, ported from .hero__ghost.
   Was a <div>; now a ::before on the section. */
.devco-site #hero.hero::before {
  content: "Perth.";
  position: absolute;
  left: -2%;
  bottom: -7%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(220px, 28vw, 460px);
  line-height: .85;
  color: var(--bone);
  opacity: .045;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* Vertical hairline — decoration, ported from .hero__vline. */
.devco-site #hero.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60%;
  width: var(--hair);
  background: var(--bone-hair);
  pointer-events: none;
  z-index: 0;
}

/* keep real content above the decoration */
.devco-site #hero .hero__grid,
.devco-site #hero .hero__meta { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   3. HERO — grid
   hero.css sets `.hero__grid{display:grid;...}`. Elementor adds
   `e-flex` to the container; grid must win.
   ------------------------------------------------------------ */
.devco-site #hero .hero__grid.e-con {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* copy + plate columns stack their own content vertically */
.devco-site #hero .hero__copy.e-con { display: flex; flex-direction: column; }

/* ------------------------------------------------------------
   4. HERO — eyebrow
   .dc-eyebrow is display:flex and styles its direct children.
   Under Elementor the direct children are widget wrapper divs,
   so the dc-eyebrow__* classes sit on the wrappers — which is
   fine: components.css styles by class, not by tag.
   The text-editor widget wraps copy in a <span>; collapse it.
   ------------------------------------------------------------ */
.devco-site #hero .dc-eyebrow.e-con {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
/* the rule element is a fixed-width hairline — keep it from flexing */
.devco-site #hero .dc-eyebrow__rule { flex: none; }
/* let inner spans inherit the eyebrow type, no extra box */
.devco-site #hero .dc-eyebrow__idx > span,
.devco-site #hero .dc-eyebrow__label > span,
.devco-site #hero .dc-eyebrow__rule > span { display: inline; }

/* ------------------------------------------------------------
   5. HERO — headline
   .dc-d1 + .hero__headline land on the heading widget wrapper.
   The inner <h1.elementor-heading-title> must inherit the
   display font + size and shed Elementor's default margin.
   ------------------------------------------------------------ */
.devco-site #hero .hero__headline .elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}
.devco-site #hero .hero__headline em { font-style: italic; }

/* ------------------------------------------------------------
   6. HERO — lead + brand paragraphs
   text-editor widgets wrap copy in <p>. The dc-lead / hero__sub
   / hero__brand classes are on the wrapper; push type to the <p>.
   ------------------------------------------------------------ */
.devco-site #hero .hero__sub p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin: 0;
  color: inherit;
}
.devco-site #hero .hero__brand p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.4;
  margin: 0;
  color: inherit;
}

/* ------------------------------------------------------------
   7. HERO — CTA row
   .hero__cta is display:flex; under Elementor the row container
   holds the button widget + microcopy widget as flex children.
   ------------------------------------------------------------ */
.devco-site #hero .hero__cta.e-con {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
}
/* The Elementor Button widget renders an inner <a.elementor-button>.
   The .dc-btn class sits on the widget WRAPPER, where components.css
   would draw a second button box. Neutralise the wrapper box so only
   the inner <a> is the visible button (no double border). */
.devco-site #hero .elementor-widget-button.dc-btn {
  border: 0;
  padding: 0;
  background: transparent;
}
/* re-point the dc-btn look onto the inner anchor */
.devco-site #hero .dc-btn .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 21px 30px;            /* dc-btn--lg */
  border: var(--hair) solid currentColor;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  fill: currentColor;
  transition: background .42s var(--ease), color .42s var(--ease);
  min-height: 0;
}
.devco-site #hero .dc-btn .elementor-button .elementor-button-content-wrapper { display: inline-flex; align-items: center; }
.devco-site #hero .sec--dark .dc-btn .elementor-button:hover,
.devco-site #hero.sec--dark .dc-btn .elementor-button:hover { background: var(--bone); color: var(--ink); }
/* drawn arrow after the label — decoration, ported from .dc-btn__arrow */
.devco-site #hero .dc-btn .elementor-button-text::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 20px;
  height: var(--hair);
  margin-left: 16px;
  background: currentColor;
  vertical-align: middle;
  transition: transform .42s var(--ease);
}
.devco-site #hero .dc-btn .elementor-button:hover .elementor-button-text::after { transform: translateX(5px); }
/* microcopy beside the button */
.devco-site #hero .hero__cta-note { align-self: flex-end; }
.devco-site #hero .hero__cta-note span { display: inline; }

/* ------------------------------------------------------------
   8. HERO — plate (real-photo slot)
   The Image widget carries `dc-plate hero__plate`. components.css
   styles `.dc-plate`; hero.css sizes `.hero__plate` (aspect 4/5).
   Re-add the survey-document decoration (corner ticks, code label,
   caption, drift glows) as CSS on the plate wrapper — decoration,
   never content.
   ------------------------------------------------------------ */
.devco-site #hero .hero__plate-wrap.e-con { display: block; position: relative; }

.devco-site #hero .dc-plate.hero__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  margin-left: auto;
  overflow: hidden;
  border: var(--hair) solid var(--bone-hair);
  background: #221d18;
}
/* the Image widget's <img> fills the plate */
.devco-site #hero .dc-plate.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Elementor wraps the image in .elementor-widget-container / <figure> */
.devco-site #hero .dc-plate.hero__plate .elementor-widget-container,
.devco-site #hero .dc-plate.hero__plate figure,
.devco-site #hero .dc-plate.hero__plate .elementor-image { height: 100%; margin: 0; }

/* corner ticks — decoration */
.devco-site #hero .dc-plate.hero__plate::before,
.devco-site #hero .dc-plate.hero__plate::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--bone-faint);
  pointer-events: none;
  z-index: 3;
}
.devco-site #hero .dc-plate.hero__plate::before {
  top: 9px; left: 9px;
  border-top-width: var(--hair);
  border-left-width: var(--hair);
}
.devco-site #hero .dc-plate.hero__plate::after {
  bottom: 9px; right: 9px;
  border-bottom-width: var(--hair);
  border-right-width: var(--hair);
}
/* plate code label — decoration, ported from .dc-plate__code */
.devco-site #hero .hero__plate-wrap::after {
  content: "Plate 01 · Aerial · Perth Metro";
  position: absolute;
  top: 14px;
  left: 18px;
  color: var(--bone-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

/* ------------------------------------------------------------
   9. HERO — meta bar
   .hero__meta is a 3-column grid; under Elementor the three
   text-editor widgets are its children.
   ------------------------------------------------------------ */
.devco-site #hero .hero__meta.e-con {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  margin-top: clamp(32px, 5vh, 56px);
  border-top: var(--hair) solid var(--bone-hair);
}
.devco-site #hero .hero__meta > *:nth-child(3) { text-align: right; }
.devco-site #hero .hero__meta span { display: inline; }
.devco-site #hero .hero__meta .dot { color: var(--accent); }
.devco-site #hero .hero__scroll-cell { display: flex; justify-content: center; }

/* ------------------------------------------------------------
   10. Responsive — mirror hero.css's 960px breakpoint for the
       Elementor structure.
   ------------------------------------------------------------ */
@media (max-width: 960px) {
  .devco-site #hero .hero__grid.e-con { grid-template-columns: 1fr; gap: 48px; }
  .devco-site #hero.hero::before,
  .devco-site #hero.hero::after { display: none; }
  .devco-site #hero .dc-plate.hero__plate { margin: 0; max-width: none; }
  .devco-site #hero .hero__meta.e-con { grid-template-columns: 1fr; gap: 12px; }
  .devco-site #hero .hero__meta > * { text-align: center !important; }
  .devco-site #hero .hero__scroll-cell { justify-content: center; }
}