/* H-Lab Theme CSS — dark-emerald effects (translated from dark-emerald.css)
   Utility classes applied via Elementor _css_classes. Enqueued by h-lab-theme mu-plugin. */

/* ── Mesh background ── */
.hl-mesh {
  background-color: #060e20;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(105,246,184,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(119,230,255,0.05) 0%, transparent 60%);
}

/* ── Glass panel ── */
.hl-glass {
  background: rgba(25,37,64,0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(105,246,184,0.1);
  border-radius: 8px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.hl-glass:hover {
  border-color: rgba(105,246,184,0.3);
}

/* ── Gradient accent text (emerald → cyan, clipped) ── */
.hl-accent-text {
  background: linear-gradient(125deg, #69f6b8 10%, #77e6ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Text glow ── */
.hl-glow {
  text-shadow: 0 0 15px rgba(105,246,184,0.3);
}

/* ── Dark section gradient ── */
.hl-section-dark {
  background: linear-gradient(180deg, #060e20 0%, #091328 12%, #091328 88%, #060e20 100%);
}

/* ── Badge pill ── */
.hl-badge {
  background: rgba(105,246,184,0.09);
  border: 1px solid rgba(105,246,184,0.22);
  color: #69f6b8;
  border-radius: 100px;
}

/* ── Tag chip ── */
.hl-tag {
  background: rgba(105,246,184,0.07);
  border: 1px solid rgba(105,246,184,0.15);
  color: #69f6b8;
  border-radius: 4px;
}

/* ───────── PHASE 2: Header / Footer ───────── */

/* Sticky glass header bar (XPRO wraps header template in .xpro-theme-builder-header) */
.xpro-theme-builder-header.xtb-header-sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
}
.xpro-theme-builder-header .hl-header-bar {
  background: rgba(6,14,32,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(105,246,184,0.12);
}

/* Horizontal menu links — emerald hover */
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a {
  color: #dee5ff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  transition: color 0.25s ease;
}
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a:hover,
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a {
  color: #69f6b8;
}

/* Contact CTA button (xpro-button) in header */
.hl-cta .xpro-elementor-button {
  background: linear-gradient(135deg,#69f6b8,#06b77f);
  color: #060e20 !important;
  font-weight: 600;
  border-radius: 8px;
  border: none;
}
.hl-cta .xpro-elementor-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(105,246,184,0.28);
}

/* Footer link list */
.hl-footer-links a {
  color: #a3aac4;
  transition: color 0.25s ease;
}
.hl-footer-links a:hover { color: #69f6b8; }
.hl-footer-bottom {
  border-top: 1px solid rgba(105,246,184,0.10);
  color: #6d758c;
}

/* ───────── PHASE 3a: Homepage ───────── */

/* Section label (small emerald uppercase) */
.hl-label{color:#69f6b8;text-transform:uppercase;letter-spacing:.18em;font-weight:600;font-size:13px;}

/* Glass card padding + hover lift */
.hl-card{padding:32px;}
.hl-card:hover{box-shadow:0 14px 40px rgba(0,0,0,.35);transform:translateY(-4px);}
.hl-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}

/* Step number badge */
.hl-step-num{color:#69f6b8;font-family:"Space Grotesk",sans-serif;}

/* Ghost button (secondary CTA) */
.hl-ghost a.elementor-button,a.elementor-button.hl-ghost{background:transparent !important;border:1px solid rgba(105,246,184,.4) !important;color:#dee5ff !important;}
.hl-ghost a.elementor-button:hover,a.elementor-button.hl-ghost:hover{border-color:#69f6b8 !important;color:#69f6b8 !important;background:rgba(105,246,184,.06) !important;}

/* Donut (conic-gradient ring) */
.hl-donut{position:relative;width:220px;height:220px;border-radius:50%;background:conic-gradient(#69f6b8 0 45%,#77e6ff 45% 80%,#b0f0d6 80% 100%);margin:0 auto;}
.hl-donut::after{content:"";position:absolute;inset:38px;border-radius:50%;background:#060e20;}
.hl-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;pointer-events:none;}
.hl-donut__brand{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:22px;color:#dee5ff;line-height:1.1;}
.hl-donut__year{font-size:14px;color:#a3aac4;}

/* Donut legend */
.hl-legend-row{display:flex;align-items:center;gap:10px;}
.hl-dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.hl-dot--1{background:#69f6b8;}
.hl-dot--2{background:#77e6ff;}
.hl-dot--3{background:#b0f0d6;}

/* ───────── PHASE 4: WPForms dark-emerald (form id 21, scoped) ───────── */
/* Source of "grey panel": WPForms modern render gives fields white bg
   (--wpforms-field-background-color:#ffffff); the container bg is already
   rgba(0,0,0,0). We retheme via the modern CSS custom properties scoped to
   #wpforms-21, plus explicit fallbacks, so the dark hl-glass card shows through. */

/* Re-map WPForms modern CSS variables to the dark-emerald palette */
#wpforms-21.wpforms-container,
#wpforms-21.wpforms-container-full {
  --wpforms-background-color: rgba(0,0,0,0);
  --wpforms-field-background-color: rgba(6,14,32,0.7);
  --wpforms-field-text-color: #dee5ff;
  --wpforms-field-border-color: rgba(105,246,184,0.15);
  --wpforms-field-border-radius: 6px;
  --wpforms-label-color: #dee5ff;
  --wpforms-label-sublabel-color: #a3aac4;
  --wpforms-button-background-color: #06b77f;
  --wpforms-button-text-color: #060e20;
  --wpforms-button-border-radius: 6px;
}

/* Neutralize any background on the form container/wrapper so the glass card is the surface */
div#wpforms-21.wpforms-container-full,
.elementor-widget-wpforms .wpforms-container,
#hl-contact-form-slot > .elementor-widget-wpforms {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: none;
}

/* Inputs / selects / textarea — explicit (belt-and-braces over the vars) */
div#wpforms-21 input[type=text],
div#wpforms-21 input[type=email],
div#wpforms-21 input[type=tel],
div#wpforms-21 input[type=url],
div#wpforms-21 input[type=number],
div#wpforms-21 input[type=password],
div#wpforms-21 input[type=date],
div#wpforms-21 select,
div#wpforms-21 textarea {
  background-color: rgba(6,14,32,0.7);
  color: #dee5ff;
  border: 1px solid rgba(105,246,184,0.15);
  border-radius: 6px;
}
div#wpforms-21 input:focus,
div#wpforms-21 select:focus,
div#wpforms-21 textarea:focus {
  border-color: rgba(105,246,184,0.5);
  box-shadow: 0 0 0 3px rgba(105,246,184,0.1);
  outline: none;
}
div#wpforms-21 input::placeholder,
div#wpforms-21 textarea::placeholder { color: #6d758c; opacity: 1; }
div#wpforms-21 select option { background: #0f1930; color: #dee5ff; }

/* Labels + descriptions */
div#wpforms-21 .wpforms-field-label { color: #dee5ff; }
div#wpforms-21 .wpforms-field-label-inline { color: #dee5ff; }
div#wpforms-21 .wpforms-field-sublabel,
div#wpforms-21 .wpforms-field-description,
div#wpforms-21 .wpforms-description { color: #a3aac4; }
div#wpforms-21 .wpforms-required-label { color: #ff716c; }

/* Submit button — emerald gradient, KILL the WPForms blue */
div#wpforms-21 button.wpforms-submit,
div#wpforms-21 .wpforms-submit-container button[type=submit] {
  background: linear-gradient(135deg,#69f6b8,#06b77f);
  background-color: #06b77f;
  border: none;
  border-color: transparent;
  border-radius: 6px;
  color: #060e20;
  font-weight: 700;
  padding: 12px 24px;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
div#wpforms-21 button.wpforms-submit:hover,
div#wpforms-21 .wpforms-submit-container button[type=submit]:hover {
  background: linear-gradient(135deg,#7dffc6,#06b77f);
  filter: brightness(1.04);
  box-shadow: 0 6px 20px rgba(105,246,184,0.28);
}
div#wpforms-21 button.wpforms-submit:focus {
  box-shadow: 0 0 0 3px rgba(105,246,184,0.25);
  outline: none;
}

/* Confirmation message — dark themed */
.wpforms-confirmation-container-full,
div#wpforms-confirmation-21,
.wpforms-confirmation-container {
  background: rgba(105,246,184,0.08);
  border: 1px solid rgba(105,246,184,0.25);
  color: #dee5ff;
  border-radius: 6px;
}
.wpforms-confirmation-container-full p { color: #dee5ff; }

/* Validation error text stays readable on dark */
div#wpforms-21 .wpforms-error,
div#wpforms-21 label.wpforms-error { color: #ff716c; }

/* ───────── Sticky-header anchor offset (XPRO header overlap fix) ───────── */
html { scroll-padding-top: 90px; }
[id] { scroll-margin-top: 90px; }
/* ─────────── PHASE 4b: dark page base ───────────
   Root cause of the "grey panel": top-level sections are transparent and only
   the hero carries .hl-mesh, so the white Hello-Elementor <body> showed through
   (and the semi-transparent glass card over white read as grey). Set the dark
   base on body so every transparent section sits on #060e20. CSS-only; scoped to
   the Elementor front-end page template, never wp-admin. */
body.page-template-elementor_header_footer,
body.elementor-page,
body.elementor-default {
  background-color: #060e20;
}
/* Hero badge pill hugs its text (override .e-con width:100%) */
.hl-badge{width:-moz-max-content;width:max-content;max-width:100%;align-self:flex-start;}

/* === HL-PROGRESS-TEXT: dark on-accent text inside emerald progress bars (legible vs light fill) === */
.elementor-progress-bar .elementor-progress-text,
.elementor-progress-bar .elementor-progress-percentage{color:#060e20 !important;font-weight:700;text-shadow:none;}

/* === HL-MENU-HOVER: remove XPRO underline; add footer-style emerald hover highlight === */
.hl-header-bar .xpro-elementor-nav-link::before,
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a::before,
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a::after{display:none !important;content:none !important;}
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a{padding:8px 14px;border-radius:6px;transition:color .25s ease,background-color .25s ease;}
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a:hover,
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a{color:#69f6b8 !important;background-color:rgba(105,246,184,0.10);}

/* === HL-MENU-HOVER-FIX: all nav items point to the homepage (always current-menu-item) -> reset resting state; highlight only on hover/focus === */
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a{color:#dee5ff !important;background-color:transparent !important;}
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a:hover,
.hl-header-bar .xpro-elementor-horizontal-navbar-nav > li > a:focus-visible{color:#69f6b8 !important;background-color:rgba(105,246,184,0.10) !important;}

/* === HL-HEADER-STICKY-FIX: header stays pinned via CSS sticky; neutralize XPRO's JS fixed+fade toggle that caused the scroll jump === */
.xpro-theme-builder-header-nav{position:relative !important;top:auto !important;animation:none !important;transition:none !important;transform:none !important;}

/* === HL-MOBILE-FIX: kill horizontal scroll from off-canvas menu (clip, not hidden, to keep sticky header) + dark-theme the mobile menu === */
html,body{overflow-x:clip;}
.xpro-elementor-horizontal-navbar-wrapper{background:#060e20 !important;}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link{color:#dee5ff !important;}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:hover,.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:focus{color:#69f6b8 !important;}
.xpro-elementor-horizontal-menu-close,.xpro-elementor-horizontal-menu-close i{color:#69f6b8 !important;}
.xpro-elementor-horizontal-menu-toggle,.xpro-elementor-horizontal-menu-toggle i{color:#69f6b8 !important;}

/* HL-MOBILE-TOGGLER: emerald hamburger icon (correct selector is -toggler) */
.xpro-elementor-horizontal-menu-toggler,.xpro-elementor-horizontal-menu-toggler i{color:#69f6b8 !important;}

/* === HL-CONTACT-COMPACT === */
#contact .elementor-widget-icon .elementor-icon{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:rgba(105,246,184,0.10);border:1px solid rgba(105,246,184,0.28);border-radius:12px;color:#69f6b8;font-size:17px;flex-shrink:0;transition:background .25s ease,border-color .25s ease;}
#contact .elementor-widget-icon .elementor-icon svg{width:17px;height:17px;fill:#69f6b8;}
#contact .elementor-widget-icon .elementor-icon i{color:#69f6b8;}
#contact .elementor-widget-icon:hover .elementor-icon{background:rgba(105,246,184,0.18);border-color:rgba(105,246,184,0.5);}
#contact .elementor-widget-google_maps,#contact .elementor-widget-google_maps>.elementor-widget-container,#contact .elementor-widget-google_maps .elementor-custom-embed{height:100%;}
#contact .elementor-widget-google_maps iframe{height:100%;min-height:360px;border-radius:16px;display:block;border:1px solid rgba(255,255,255,0.08);}
@media (max-width:1024px){#contact .elementor-widget-google_maps iframe{min-height:300px;}}
@media (max-width:767px){#contact .elementor-widget-google_maps iframe{min-height:240px;height:300px;}}
/* === /HL-CONTACT-COMPACT === */

/* === HL-MOBILE-HEADER === */
@media (max-width:767px){
  .xpro-theme-builder-header .e-con-inner{flex-wrap:nowrap !important;align-items:center !important;}
  .xpro-theme-builder-header .e-con-inner > .elementor-element:last-child{width:auto !important;max-width:none !important;flex:0 0 auto !important;margin-left:auto !important;justify-content:flex-end !important;}
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-toggler-wrapper{margin:0 !important;}
}
/* === /HL-MOBILE-HEADER === */

/* === HL-MOBILE-CLOSE: theme the off-canvas close (X) button to match dark/emerald style === */
.xpro-elementor-horizontal-menu-close{background:rgba(105,246,184,0.10) !important;background-color:rgba(105,246,184,0.10) !important;border:1px solid rgba(105,246,184,0.28) !important;border-radius:10px !important;color:#69f6b8 !important;box-shadow:none !important;transition:background .25s ease,border-color .25s ease;}
.xpro-elementor-horizontal-menu-close i,.xpro-elementor-horizontal-menu-close svg{color:#69f6b8 !important;fill:#69f6b8 !important;}
.xpro-elementor-horizontal-menu-close:hover,.xpro-elementor-horizontal-menu-close:focus{background:rgba(105,246,184,0.20) !important;background-color:rgba(105,246,184,0.20) !important;border-color:rgba(105,246,184,0.55) !important;}
/* === /HL-MOBILE-CLOSE === */

/* === HL-HERO-COUNTERS-MOBILE: shrink hero stat counters on phones so the big numbers stop overlapping === */
@media (max-width:767px){
  .elementor-widget-counter .elementor-counter-number-wrapper,
  .elementor-widget-counter .elementor-counter-number,
  .elementor-widget-counter .elementor-counter-number-prefix,
  .elementor-widget-counter .elementor-counter-number-suffix{font-size:30px !important;line-height:1.1 !important;}
  .elementor-widget-counter .elementor-counter-title{font-size:12px !important;line-height:1.3 !important;}
}
/* === /HL-HERO-COUNTERS-MOBILE === */