/* ============================================================
   NURTURING SOUL — Elementor compatibility layer

   assets/site.css is the original project stylesheet, carried over
   unmodified. This file exists only to stop Elementor and Hello
   Elementor from overriding it, and to re-attach the parts of the
   original markup contract that WordPress templating changes.
   ============================================================ */

/* ------------------------------------------------------------
   1. Stacking context

   The original wrapped every page in .page{position:relative;z-index:2}
   so it sat above the two fixed body layers: the drifting aura gradient
   (body::before, z-index 0) and the noise grain (body::after, z-index 1).
   WordPress has no equivalent wrapper, so the same job is done here.
------------------------------------------------------------ */
.site-header,
.site-main,
.site-footer,
.xpro-header-wrapper,
.xpro-footer-wrapper,
.xpro-elementor-header,
.xpro-elementor-footer{
  position:relative;
  z-index:2;
}

/* ------------------------------------------------------------
   2. Containers

   Elementor gives every container its own padding, boxed width and
   flex layout. The original owns all three: section{padding-block},
   .wrap and .narrow for width, and per-component display rules.
------------------------------------------------------------ */
.e-con,
.e-con > .e-con-inner{
  --container-default-padding-top:0px;
  --container-default-padding-right:0px;
  --container-default-padding-bottom:0px;
  --container-default-padding-left:0px;
  --container-widget-width:100%;
  padding:0;
  max-width:none;
}

/* Elementor spaces sibling widgets by default; the original spaces them
   through its own margins, so the automatic gap has to go. */
.e-con,
.e-con > .e-con-inner{
  --gap:0px;
  gap:0;
}
.elementor-widget:not(:last-child){
  margin-block-end:0;
}

/* Top-level containers are output with an HTML tag of <section> and the
   original section classes, so section{padding-block:var(--section)}
   applies — but .e-con is more specific than the element selector.
   These rules hand the rhythm back. */
section.e-con{
  padding-block:var(--section);
}
section.e-con.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-block:var(--s9) 0;
  overflow:hidden;
}
section.e-con.phero{
  display:block;
  padding-block:calc(var(--hdr-h) + clamp(3rem,9vh,7rem)) clamp(2rem,6vh,4rem);
}
section.e-con.cta-band{
  display:block;
}

/* .wrap and .narrow are used as Elementor inner containers. Restore the
   original measurements and centring. */
.e-con.wrap{
  width:min(1240px,100% - var(--gutter) * 2);
  margin-inline:auto;
  display:block;
}
.e-con.narrow{
  width:min(760px,100% - var(--gutter) * 2);
  margin-inline:auto;
  display:block;
}

/* ------------------------------------------------------------
   3. Widgets

   Elementor's Heading, Text Editor and Button widgets carry the original
   classes (.kicker, .lede, .btn btn--primary and so on) in their CSS
   Classes field. Their default chrome is removed here so those classes
   behave exactly as they did in the HTML build.
------------------------------------------------------------ */

/* Elementor forces line-height:1 on every heading widget, which flattens
   the display type. The original line-heights are per-level. */
.elementor-heading-title{
  line-height:inherit;
}
h1.elementor-heading-title{line-height:.98}
h2.elementor-heading-title{line-height:1.1}
h3.elementor-heading-title{line-height:1.25}
h4.elementor-heading-title{line-height:1.35}
.hero h1.elementor-heading-title{line-height:1}

/* A heading widget rendered as a <p> is a kicker or a lede, not display
   type — let the body font and the original class win. */
p.elementor-heading-title{
  font-family:var(--body);
  font-weight:inherit;
  letter-spacing:inherit;
}

/* The Button widget: keep Elementor's markup, drop its styling entirely
   whenever the element also carries the original .btn class. */
.elementor-button-wrapper{
  display:inline-block;
}
a.elementor-button.btn,
a.elementor-button.btn:visited{
  background-color:transparent;
  fill:currentColor;
  font-family:var(--body);
  font-size:.95rem;
  font-weight:500;
  line-height:1;
  text-align:inherit;
}
a.elementor-button.btn--primary{
  background-color:var(--terra);
  color:#FFF9F3;
}
a.elementor-button.btn--primary:hover,
a.elementor-button.btn--primary:focus{
  background-color:var(--terra-deep);
  color:#FFF9F3;
}
a.elementor-button.btn--quiet:hover,
a.elementor-button.btn--quiet:focus{
  color:var(--ink);
}
a.elementor-button.btn--ghost:hover,
a.elementor-button.btn--ghost:focus{
  color:var(--terra-deep);
}
.elementor-button .elementor-button-content-wrapper{
  gap:.6rem;
}

/* Text Editor: the original sets p margins and a reading measure. */
.elementor-widget-text-editor{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}
.elementor-widget-text-editor p:last-child{
  margin-bottom:0;
}

/* HTML widgets hold the bespoke components (audio player, chakra ascent,
   mandalas, sprigs). They must not introduce a box of their own. */
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container{
  display:contents;
}

/* ------------------------------------------------------------
   4. Hello Elementor defaults
------------------------------------------------------------ */
.site-main{
  padding:0;
  margin:0;
  max-width:none;
}
.site-header,
.site-footer{
  padding:0;
}

.elementor-widget-heading .elementor-heading-title{
  margin:0;
}

/* ------------------------------------------------------------
   5. Overflow

   The curved section dividers (.curve::before) sit 58px above their own
   section box, and the sprig accents overhang deliberately. Elementor
   adds overflow:hidden to containers in some layouts, which would clip
   both. Only the hero clips, exactly as the original did.
------------------------------------------------------------ */
.e-con{
  overflow:visible;
}
section.e-con.hero{
  overflow:hidden;
}


/* ============================================================
   NS DROPDOWN STACKING FIX
   The Xpro header renders inside an Elementor container with its own
   stacking context; the Music submenu drops out of the header into the
   page region and was being painted over by the main content container.
   Lift the header wrapper + nav above page content, and guarantee the
   open submenu is on top and clickable.
   ============================================================ */
.xpro-header-wrapper,.xpro-elementor-header,.elementor-location-header,header.hdr{ position:relative; z-index:1000 !important; }
.hdr{ z-index:1000 !important; }
.nav{ position:relative; z-index:1001; }
.navgroup{ position:relative; z-index:1002; }
.submenu{ z-index:1003; }
.navgroup[data-open="true"] .submenu{ pointer-events:auto !important; }
.elementor-location-header .e-con,.xpro-header-wrapper .e-con{ overflow:visible !important; }



/* ============================================================
   NS VISIBILITY SAFETY NET (v2 \u2014 unconditional)
   The design hides hero/reveal/curtain until JS adds body.lit.
   These rules guarantee visibility with or without JS: reveal
   elements are shown by default; when body.lit IS present the
   original animated intro still plays.
   ============================================================ */
.reveal{opacity:1 !important;transform:none !important}
.hero h1 .line i{transform:none !important}
.hero__sub,.hero__acts{opacity:1 !important;transform:none !important}
.curtain{opacity:0 !important;pointer-events:none !important;visibility:hidden !important}
body.lit .reveal{opacity:1 !important}

/* ============================================================
   NS DROPDOWN HOVER-GAP FIX
   The submenu sits 1rem below the button; moving the cursor across
   that gap fired mouseleave and closed the menu before a click could
   land. This bridges the gap and enlarges the hover zone.
   ============================================================ */
.navgroup{padding-bottom:0}
.navgroup>button{position:relative}
.navgroup::after{content:'';position:absolute;left:0;right:0;top:100%;height:1.4rem;background:transparent;display:none}
.navgroup:hover::after,.navgroup[data-open="true"]::after{display:block}
.submenu{top:calc(100% + .35rem)}
.navgroup[data-open="true"] .submenu{pointer-events:auto !important;z-index:1003}
.submenu a{pointer-events:auto !important;position:relative;z-index:1}

/* ============================================================
   NS DROPDOWN OPAQUE PANEL
   Make the Music dropdown fully opaque with a solid background and a
   clear border+shadow so the hero heading behind it does not show
   through (the original used a translucent, blurred panel).
   ============================================================ */
.submenu{
  background:#FBF8F4 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border:1px solid rgba(51,43,58,.12) !important;
  box-shadow:0 24px 60px -20px rgba(51,43,58,.35), 0 6px 18px -8px rgba(51,43,58,.25) !important;
  border-radius:16px !important;
}
.submenu a:hover{background:#F0E9DE !important;}