/*!
 * PRANA — Elementor bridge, corrections, and future overrides
 *
 * Part of the PRANA child theme. Every value here comes from the approved design; this
 * file changes structure, not appearance.
 */

/* ===========================================================================
   1. The Elementor DOM bridge
   ===========================================================================
   The approved design was drawn against plain markup: a section, a wrapper, and the
   headings, paragraphs and images inside it. Elementor renders the same tree with an
   extra layer around every widget:

       <div class="e-con sec">                      <- container, carries our class
         <div class="elementor-element … eyebrow">  <- widget wrapper, carries our class
           <div class="elementor-widget-container"> <- Elementor's own wrapper
             <p>…</p>                               <- the actual element

   That middle layer breaks every grid, flex and adjacency rule the design relies on.
   Rather than rewrite the design system around Elementor's markup — which would make it
   unreadable and tie it to one plugin version — the wrapper is removed from the layout
   with `display: contents`. The elements stay in the DOM, keep their classes and stay
   editable in Elementor; they simply stop generating boxes of their own.

   Nothing here declares a layout of its own. Anything that would compete with the design
   (display, width, colour, size) is deliberately absent, so a PRANA class always wins.

   This is the only structural concession in the whole stylesheet. If a future Elementor
   release changes these class names, this is the one block to update.
   --------------------------------------------------------------------------- */

/* 1a. Elementor's own widget wrapper never participates in layout. */
.prana .elementor-widget > .elementor-widget-container { display: contents; }

/* 1b. Neither does the button wrapper, so `.btn` on the widget styles the link itself. */
.prana .elementor-widget-button > .elementor-button-wrapper { display: contents; }

/* 1c. Container defaults. Elementor gives every container padding, a gap and a
       min-height. The approved layout supplies its own, so the defaults are zeroed.
       Elementor writes those defaults per element, as
           .elementor-6 .elementor-element.elementor-element-abc123 { --display:flex }
       which is specificity (0,3,0). This block matches it with body.prana.prana and, by
       loading later, wins the tie.

       Elementor also forces every container to a column flexbox. The approved layout was
       drawn against plain divs, so the default here is normal flow, and each PRANA class
       declares the grid or flex it needs. Those class rules carry the body.prana.prana
       prefix and therefore outrank this block. */
body.prana.prana .e-con,
body.prana.prana .e-con-inner {
  --display: block;
  --flex-direction: initial;
  --justify-content: initial;
  --align-items: initial;
  --flex-wrap: initial;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --min-height: 0px;
}

/* 1d. Templates ship full-width, so no inner wrapper is produced. If someone switches a
       container to boxed in the editor, this keeps the layout from breaking. */
body.prana.prana .e-con > .e-con-inner { display: contents; }

/* 1e. Text and HTML widgets carry the approved class on their wrapper, so the tag inside
       them must add nothing of its own and simply inherit. */
.prana .elementor-widget-text-editor > *,
.prana .elementor-widget-html > p {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  text-align: inherit;
  margin: 0;
  padding: 0;
  max-width: inherit;
}

/* 1f. Headings are the opposite case: each one is styled by its tag and its ancestors,
       and both survive. The tag keeps its own styles; only Elementor's margin reset is
       undone. Elementor's line-height:1 is beaten by the body.prana-scoped tag rules in
       03-typography.css, so nothing is restated here. */
.prana .elementor-widget-heading .elementor-heading-title { margin: 0; padding: 0; }

/* 1g. The button widget's own skin is removed; `.btn` in 03-typography.css supplies it. */
.prana .elementor-widget-button .elementor-button {
  background: none;
  border-radius: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  fill: currentColor;
  text-align: inherit;
}
.prana .elementor-widget-button .elementor-button-content-wrapper { display: contents; }
.prana .elementor-widget-button .elementor-button-text { font: inherit; color: inherit; }

/* 1h. Image widgets: the figure wrapper disappears so `.dim-img img` and friends still
       address the image directly. Sizing stays with the design. */
.prana .elementor-widget-image figure,
.prana .elementor-widget-image .elementor-image { display: contents; }

/* 1i. Hello Elementor's page shell adds width limits and padding we do not want. */
.prana .site-main,
.prana .page-content,
.prana main.site-main { max-width: none; padding: 0; margin: 0; }
.prana .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ===========================================================================
   2. Header contrast while the mobile navigation is open
   ===========================================================================
   On a page with a photographic hero the header runs inverted: white wordmark, white
   burger. The mobile overlay is cream. Opening the menu on such a page therefore put
   white on cream — the logo and the close control were effectively invisible.

   prana-ui.js adds .nav-open to the header while the overlay is open. These rules pull
   the header back to its dark type for as long as that lasts. No colour, spacing or type
   value changes; only which of the two approved header states applies.
   --------------------------------------------------------------------------- */
.hdr.nav-open{ background:transparent; backdrop-filter:none; }
.hdr.on-dark.nav-open .logo img{ filter:none; }
.hdr.on-dark.nav-open .nav a,
.hdr.on-dark.nav-open .nav button{ color:var(--ink-soft); }
.hdr.on-dark.nav-open .nav a:hover,
.hdr.on-dark.nav-open .nav button:hover{ color:var(--ink); }
.hdr.on-dark.nav-open .nav-cta{ border-color:var(--gold)!important; color:var(--gold)!important; }
.hdr.on-dark.nav-open .nav-cta:hover{ background:var(--gold); color:var(--paper)!important; }
.hdr.on-dark.nav-open .burger span{ background:var(--ink); }


/* Reduced motion is already handled at the end of 05-responsive.css. Nothing to add. */

/* ===========================================================================
   3. Add any later project overrides below this line.
   =========================================================================== */
   
   /* =========================================================
   PRANA CONTACT FORM STATUS
========================================================= */

#form-status {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .02em;
    display: none;
}

#form-status.is-success {
    display: block;
    background: rgba(46, 104, 77, .08);
    border-color: rgba(46, 104, 77, .28);
    color: var(--green);
}

#form-status.is-error {
    display: block;
    background: rgba(150, 55, 45, .07);
    border-color: rgba(150, 55, 45, .25);
    color: #7a2f28;
}
@media (min-width:900px) {
  body.prana.prana .projs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   PRANA — Four dimensions image framing
========================================================= */

body.prana.prana .dims .dim-img {
    aspect-ratio: 5 / 4;
    overflow: hidden;
}

body.prana.prana .dims .dim-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
}
@media (min-width: 1100px) {

    body.prana.prana .phero.photo {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 2.15 / 1 !important;
    }

    body.prana.prana .hero-media {
        position: absolute !important;
        inset: 0 !important;
        overflow: hidden !important;
    }

    body.prana.prana .hero-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }
}