/* Makes the converted Elementor content (containers carrying the "cwc" class and widgets
   carrying "cwc-w") render exactly like the static HTML. Containers and widgets the client
   adds later without those classes keep Elementor's normal behaviour.
   Load order: Elementor frontend.css -> this file -> site-wp.css -> inline.css */

/* Containers act like the plain <div>/<section> they replaced; site-wp.css then sets
   display:grid/flex etc. wherever the original design did. */
.e-con.cwc{
  display:block;       /* Elementor sets --display:flex on every container; site-wp.css re-applies grid/flex where the design uses it */
  position:static;
  width:auto;
  text-align:inherit;
  flex-direction:row;
  flex-wrap:nowrap;    /* Elementor switches containers to wrap on mobile */
}

/* Widget wrappers disappear from the layout on the live site, so grids and flex rows
   see the original elements. (Kept as normal boxes inside the editor so they stay clickable.) */
body:not(.elementor-editor-active) .elementor-widget.cwc-w,
body:not(.elementor-editor-active) .elementor-widget.cwc-w > .elementor-widget-container{
  display:contents;
}
/* Don't let Elementor's global text colour/font on widgets override what the section inherits.
   Low specificity on purpose, so colours the client sets on a widget still win. */
:where(.e-con) .elementor-widget.cwc-w{
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  text-align:inherit;
}

/* Rules from site.css that relied on elements being direct siblings. */
:root .cwc-w:has(.intro-text) + .cwc-w .intro-text{margin-top:-4px;}

/* Scroll-reveal hides blocks until they scroll into view; never hide anything in the editor. */
.elementor-editor-active :is(.section-head,.feature-media,.approach-step,.why-callout,.why-quote,
.why-banner,.founder-section,.track-card,.audience-card,.d-card,.w-card,.pillar,.blog-columns > div,
.blog-note,.contact-form,.contact-side,.band-columns > div,.side-card,.detail-gallery,.topic-tiles,
.contact-visual,.detail-gallery .cwc-figure,.topic-tile){
  opacity:1 !important;
  transform:none !important;
}

/* Site header: in the static site the sticky position + stacking order lived on the #site-header
   wrapper. In WordPress that wrapper is Elementor's header template, so the rule goes there —
   this keeps the header on top of the page (dropdowns included) and pinned while scrolling. */
.elementor-location-header{
  position:sticky;
  top:0;
  z-index:100;
}
/* Logged in: sit below the WordPress admin bar. */
.admin-bar .elementor-location-header{top:32px;}
@media (max-width:782px){ .admin-bar .elementor-location-header{top:46px;} }
@media (max-width:600px){ .admin-bar .elementor-location-header{top:0;} }

/* Contact form (Elementor Pro Form widget): messages styled like the static site's confirmation box. */
.cwc-form .elementor-message{
  margin:20px 0 0;
  padding:14px 16px;
  border-radius:8px;
  font-size:14.5px;
  line-height:1.5;
}
.cwc-form .elementor-message::before{display:none;}
.cwc-form .elementor-message.elementor-message-success{background:#e8f5e9;color:#256029;}
.cwc-form .elementor-message.elementor-message-danger{background:#fdecea;color:#8a1f17;}
.cwc-form .elementor-field-group .elementor-message{padding:6px 0 0;margin:0;background:none;font-size:13px;}
/* Elementor's form sets its own line-heights; use the browser default like the static form. */
:root .cwc-form .elementor-field-group .elementor-field,
:root .cwc-form .elementor-button{line-height:normal;}