/* ==========================================================================
   02 CHROME :: header, footer, hero, aurora backdrop

   NOTE ON SELECTORS -- learned the hard way this build:
   - Xpro prints the header with a CLASS (.xpro-theme-builder-header) but
     the footer with an ID (#xpro-theme-builder-footer). A class selector
     on the footer silently matches nothing.
   - Container CSS classes in Elementor 4.2.1 are set via the `css_classes`
     control key; widgets still use `_css_classes`. Both are honoured here
     via the classes already written onto the page/template JSON (mh-*).
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.xpro-theme-builder-header{
  position:sticky; top:0; z-index:99;
  background:rgba(11,16,32,.72) !important;
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line);
}
.xpro-theme-builder-header .e-con{ background:transparent !important; }
.admin-bar .xpro-theme-builder-header{ top:32px; }
@media (max-width:600px){ .admin-bar .xpro-theme-builder-header{ top:0; } }

.mh-brand{ flex:0 0 auto !important; width:auto !important; align-items:center; }
.mh-brand .elementor-heading-title{ white-space:nowrap; line-height:1.1; }
.mh-brand .elementor-widget-icon{ flex:0 0 auto; }
.mh-brand .elementor-icon{ display:grid; place-items:center; width:34px; height:34px; }
.mh-nav{ flex:1 1 auto !important; min-width:0; justify-content:center; }
.mh-actions{ flex:0 0 auto !important; width:auto !important; }

/* --- Footer (id, not class -- see note above) ---------------------------- */
#xpro-theme-builder-footer{
  border-top:1px solid var(--line);
  background:var(--ink-900);
}

/* --- Hero ----------------------------------------------------------------
   Full-height stage. Layer 0 = aurora + 3D canvas, layer 1 = radial scrim,
   layer 2 = copy. The scrim keeps type legible without hiding the motion. */
.mh-hero{
  position:relative; overflow:hidden;
  min-height:clamp(560px,86vh,900px);
}
.mh-hero-scene{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none;
}
.mh-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.mh-aurora__b{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform; }
.mh-aurora__b--1{ width:46vw; height:46vw; left:-8vw; top:-14vw; background:radial-gradient(circle,rgba(34,211,238,.42),transparent 68%); animation:mh-drift1 26s var(--ease) infinite alternate; }
.mh-aurora__b--2{ width:40vw; height:40vw; right:-6vw; top:-6vw; background:radial-gradient(circle,rgba(99,102,241,.34),transparent 68%); animation:mh-drift2 32s var(--ease) infinite alternate; }
.mh-aurora__b--3{ width:34vw; height:34vw; left:34%; bottom:-16vw; background:radial-gradient(circle,rgba(245,165,36,.20),transparent 70%); animation:mh-drift3 38s var(--ease) infinite alternate; }
@keyframes mh-drift1{ to{ transform:translate3d(9vw,6vw,0) scale(1.14); } }
@keyframes mh-drift2{ to{ transform:translate3d(-8vw,9vw,0) scale(1.10); } }
@keyframes mh-drift3{ to{ transform:translate3d(7vw,-7vw,0) scale(1.18); } }
@media (prefers-reduced-motion:reduce){
  .mh-aurora__b{ animation:none !important; }
}

/* Scrim as a pseudo-element -- no extra markup needed. Sits above the aurora
   and canvas (z-index 1) but below the copy column (z-index 2, set below). */
.mh-hero{ position:relative; }
.mh-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 58% at 40% 50%, rgba(11,16,32,.94) 0%, rgba(11,16,32,.78) 45%, rgba(11,16,32,0) 78%),
    linear-gradient(to bottom, rgba(11,16,32,.55) 0%, rgba(11,16,32,0) 22%, rgba(11,16,32,0) 74%, var(--ink-850) 100%);
}
.mh-hero .e-con.e-parent{ position:relative; z-index:2; }

/* Home hero copy/scene split. mh-hero-copy / mh-hero-stage are applied to
   the two Elementor containers in the hero row. mh-hero-overlay wraps the
   raw aurora + canvas markup (added via the native HTML widget) and floats
   it absolutely over the static fallback image already in the stage column,
   so JS-off visitors still see a composed hero, not an empty box. */
.mh-hero-copy{ position:relative; z-index:2; }
.mh-hero-stage{ position:relative; }
.mh-hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; border-radius:inherit; }
canvas#mh-scene{ position:absolute; inset:0; width:100%; height:100%; }

@media (max-width:1100px){
  .mh-hero{ min-height:0; }
  .mh-hero-stage{
    position:absolute !important; inset:0 !important; height:auto !important;
    margin:0 !important; z-index:0 !important; opacity:.55;
  }
  .mh-hero-stage .elementor-widget-image{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; }
  .mh-hero-stage .elementor-widget-image .elementor-widget-container{ height:100%; }
  .mh-hero-stage img{ width:100% !important; height:100% !important; object-fit:cover !important; }
  .mh-hero-copy{ position:relative; z-index:2; padding-block:var(--s-7) var(--s-6); min-height:clamp(460px,68vh,600px); }
}
@media (max-width:560px){
  .mh-hero-copy{ min-height:clamp(420px,62vh,520px); }
}

/* --- Footer columns ------------------------------------------------------- */
#xpro-theme-builder-footer .e-con>.e-con{ min-width:0; }


/* ==========================================================================
   08 HEADER MOBILE MENU :: force the Xpro off-canvas nav closed by default
   Something in the cascade neutralises the plugin's own translate3d rule for
   .xpro-elementor-horizontal-navbar-wrapper (confirmed via devtools: computed
   transform is always the identity matrix regardless of state), so the panel
   sits fully open at all times below the tablet breakpoint. jQuery toggling
   of the .active class itself works fine -- only the CSS response was
   missing. Re-declared here with !important to win regardless of source.
   ========================================================================== */
@media (max-width:1024px){
  .xpro-elementor-horizontal-navbar-wrapper{
    transform:none !important;
    right:-400px !important;
    transition:right .4s var(--ease-out) !important;
    background-color:var(--ink-800) !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper.active{
    transform:none !important;
    right:0 !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav{
    flex-direction:column !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper a.xpro-elementor-nav-link{
    color:var(--text) !important; font-family:var(--font-text);
  }
  .mh-nav{ flex-grow:0 !important; }
}


/* ==========================================================================
   09 MOBILE NAV DRAWER COLORS :: the plugin's close button and
   current/active menu-item states default to light-theme colors
   (#e8e8e8 bg on the close button, browser-default light highlight on the
   active link) that clash with Midnight Studio's dark canvas.
   ========================================================================== */
.xpro-elementor-horizontal-menu-close{
  background-color:var(--ink-800) !important;
  color:var(--text) !important;
  border-radius:var(--r-pill) !important;
}
.xpro-elementor-horizontal-navbar-nav li.current-menu-item,
.xpro-elementor-horizontal-navbar-nav li.current_page_item,
.xpro-elementor-horizontal-navbar-nav li.active{
  background:transparent !important;
}
.xpro-elementor-horizontal-navbar-nav li.current-menu-item > a,
.xpro-elementor-horizontal-navbar-nav li.current_page_item > a,
.xpro-elementor-horizontal-navbar-nav li.active > a,
.xpro-elementor-horizontal-navbar-nav a.active{
  background:var(--cyan-soft) !important;
  color:var(--cyan-300) !important;
  border-radius:var(--r-chip);
}