/*
Theme Name: Black Particle Labs
Theme URI: https://blackparticlelabs.com/
Author: Black Particle Labs
Author URI: https://blackparticlelabs.com/
Description: Futuristic XR/AI/Entertainment starter theme with Elementor compatibility.
Version: 1.2.1
License: GPLv2 or later
Text Domain: black-particle-labs
Tags: dark, custom-menu, responsive
*/

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.085);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.16);
  --text: rgba(255,255,255,0.90);
  --muted: rgba(255,255,255,0.64);
  --accentA: #5b5cff;
  --accentB: #00d1ff;
  --shadow: 0 12px 40px rgba(0,0,0,0.45);
  --radius: 18px;
  --radius2: 24px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  color: var(--text);
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(91,92,255,0.22), transparent 55%),
    radial-gradient(900px 520px at 85% 35%, rgba(0,209,255,0.18), transparent 55%),
    radial-gradient(700px 500px at 60% 90%, rgba(120,0,255,0.10), transparent 65%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 0.9; }

.site-wrap{ min-height:100vh; display:flex; flex-direction:column; }
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(8,10,18,0.55);
  border-bottom: 1px solid var(--stroke);
}
.header-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: 0.2px;
}
.brand .dot{
  width: 10px; height:10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accentA), var(--accentB));
  box-shadow: 0 0 20px rgba(0,209,255,0.25);
}
.nav a{
  color: var(--muted);
  margin-left: 14px;
  font-size: 14px;
}
.nav a:hover{ color: var(--text); }

.container{
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  /* Slightly more top padding so hero blocks don't feel cramped under the sticky header */
  padding: 36px 18px 42px;
}

h1,h2,h3{ line-height: 1.15; margin: 0 0 10px; }
h1{ font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.5px; }
h2{ font-size: clamp(22px, 2.2vw, 30px); }
h3{ font-size: 18px; }
p{ margin: 0 0 12px; color: var(--muted); }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.045));
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 18px 18px;
  box-shadow: var(--shadow);
}

.section{ margin-top: 18px; }

.section-title{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 12px;
}
.section-title .hint{
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.kicker{
  display:inline-block;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero-actions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.06);
  font-size: 14px;
}
.btn.primary{
  border: 0;
  background: linear-gradient(135deg, var(--accentA), var(--accentB));
  color: rgba(0,0,0,0.92);
  font-weight: 650;
}

.notice{
  color: var(--muted);
  font-size: 13px;
}

.media-placeholder{
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: var(--radius);
  padding: 18px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.03);
}

.callout{
  border-radius: var(--radius2);
  border: 1px solid rgba(91,92,255,0.25);
  background:
    radial-gradient(600px 220px at 20% 10%, rgba(91,92,255,0.16), transparent 60%),
    radial-gradient(520px 240px at 70% 30%, rgba(0,209,255,0.12), transparent 60%),
    rgba(255,255,255,0.03);
  padding: 16px 18px;
  margin: 10px 0 14px;
}

.split{
  display:grid;
  /* Use minmax(0,1fr) to prevent long content from forcing columns wider/narrower unexpectedly */
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px;
}
/* Elementor sections sometimes use the class "split" for layout.
   Our .split utility is intended for inner HTML blocks.
   If an Elementor section has the split class, reset the section display and handle layout on the inner container instead. */
.elementor-section.split{
  display:block !important;
}
.elementor-section.split > .elementor-container{
  width: 100% !important;
}
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kpi{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.kpi .num{
  font-weight: 750;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.kpi .label{
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}

/* Ensure WP content displays nicely */
.entry-content > *{ margin-bottom: 14px; }

/* Footer */
.site-footer{
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 13px;
  padding: 18px;
  margin-top: auto;
  background: rgba(8,10,18,0.25);
}
.footer-inner{
  max-width: 1180px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* Mobile */
@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .kpi{ grid-template-columns: 1fr; }
  .nav a{ margin-left: 10px; }
}

/* Elementor compat note:
   Avoid forcing grid/flex on Elementor section containers.
   Elementor already controls layout, and overriding it can cause "thin tubular" columns.
   Use .split/.grid on inner HTML blocks (Text/HTML widgets) instead.
*/

/* ===== Fixes: menu layout + dropdown support ===== */
.primary-nav ul.menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.primary-nav li{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.primary-nav a{
  display: inline-block;
  padding: 8px 10px;
  border-radius: 12px;
}

/* Dropdown */
.primary-nav li ul{
  position: absolute;
  top: 100%;
  /* Center dropdown under the parent item (prevents "too far left" feel). */
  left: 50%;
  min-width: 260px;
  margin-top: 0;
  padding: 10px;
  list-style: none;
  background: rgba(14,18,28,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  z-index: 50;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* No vertical gap -> hover won't collapse when moving into submenu. */
  transform: translateX(-50%) scale(0.985);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
  transition-delay: 0s;
}
.primary-nav li ul li a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
}
.primary-nav li ul li a:hover{
  background: rgba(255,255,255,0.07);
}

/* Mobile: stack menu more cleanly */
@media (max-width: 860px){
  .primary-nav ul.menu{
    justify-content: flex-start;
    gap: 8px;
  }
  .primary-nav li ul{
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* ===== Fixes: Elementor cards fill their columns ===== */
.elementor-column.card{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.elementor-column.card > .elementor-widget-wrap{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.42);
  backdrop-filter: blur(10px);
}

/* Note: hero width tuning is handled for inner HTML heroes via body.home .hero.split below */

/* ===== Fixes: Home hero "too thin" columns (keep lower sections untouched) =====
   Some pages use the .hero + .split utility classes inside an Elementor Text/HTML widget.
   In that case, the wrapper is NOT an .elementor-section, so we provide a resilient grid here.
*/
body.home .hero.split,
.home .hero.split{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(520px, 1.55fr) minmax(360px, 1fr);
  gap: 14px;
  align-items: stretch;
}
body.home .hero.split > *{ min-width: 0; }

body.home .hero.split .card{
  width: 100%;
  max-width: none;
}

body.home .hero.split .media-placeholder{
  width: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 860px){
  body.home .hero.split,
  .home .hero.split{
    grid-template-columns: 1fr;
  }
  body.home .hero.split .media-placeholder{ min-height: 280px; }
}


/* Brand logo */
.brand-logo{max-height:28px;width:auto;display:block;border-radius:10px;}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-text{font-weight:700;letter-spacing:0.2px;}