/*
Theme Name: Hyve Labs
Theme URI: https://example.com/hyve-labs
Author: Hyve Labs
Author URI: https://example.com
Description: Dark, futuristic AI theme. Inline Top + Primary menus with dropdowns, OG image customization, particles sitewide/per-page, header controls (color/transparent/logo size), tagline, socials, footer address.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hyve-labs
Tags: custom-logo, custom-menu, dropdown, responsive, theme-options
*/
:root{
  --hyve-bg:#0b0e13;
  --hyve-surface:#0f141b;
  --hyve-text:#e7eaf0;
  --hyve-muted:#9aa5b1;
  --hyve-primary:#3ea6ff;
  --hyve-primary-2:#7c5cff;
  --hyve-accent:#00ffd1;
  --hyve-border:#1c2430;
  --hyve-radius:18px;
  --hyve-logo-h:28px;
  --hyve-header-bg: rgba(11,14,19,.7);
  --hyve-header-border: 1px solid var(--hyve-border);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--hyve-bg);color:var(--hyve-text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,'Noto Color Emoji','Apple Color Emoji',sans-serif;line-height:1.6}
a{color:var(--hyve-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,92vw);margin:0 auto}
.btn{display:inline-block;padding:14px 22px;border-radius:12px;background:linear-gradient(120deg,var(--hyve-primary),var(--hyve-primary-2));color:white;font-weight:700;letter-spacing:.2px;box-shadow:0 10px 30px rgba(62,166,255,.25);border:0;cursor:pointer}
.btn-outline{background:transparent;border:1px solid var(--hyve-primary);color:var(--hyve-text)}
.section{padding:64px 0}
.card{background:var(--hyve-surface);border:1px solid var(--hyve-border);border-radius:var(--hyve-radius);padding:28px}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--hyve-header-bg);border-bottom:var(--hyve-header-border);backdrop-filter:saturate(180%) blur(10px)}
.hyve-transparent-header .site-header{background:transparent;border-bottom:none}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;position:relative;gap:16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{height:var(--hyve-logo-h);width:auto}
.site-meta{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.site-title-text{font-weight:800;letter-spacing:.3px;color:var(--hyve-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-tagline{font-size:12px;color:var(--hyve-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Menus inline */
.header-menus{display:flex;align-items:center;gap:18px;margin-left:auto}
.menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.menu a{color:var(--hyve-text)}
.menu a:hover{color:white}
.menu-top a{color:var(--hyve-muted)}
.menu-top a:hover{color:var(--hyve-text)}

/* Dropdown */
.menu li{position:relative;list-style:none}
.menu ul.sub-menu{
  display:none;position:absolute;top:100%;left:0;z-index:20;
  background:rgba(10,12,18,.96);padding:10px 0;min-width:220px;
  border:1px solid var(--hyve-border);border-radius:10px
}
.menu ul.sub-menu li{padding:0}
.menu ul.sub-menu li a{display:block;padding:10px 14px;font-size:.95em;white-space:nowrap}
.menu ul.sub-menu li a:hover{background:rgba(62,166,255,.15)}
.menu li:hover>ul.sub-menu{display:block} /* desktop hover */

/* Mobile menu */
.menu-toggle{display:none;background:transparent;border:1px solid var(--hyve-border);padding:8px 12px;border-radius:10px;color:var(--hyve-text)}
@media (max-width:900px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px}
  .header-menus{position:absolute;right:0;top:56px;flex-direction:column;background:var(--hyve-surface);border:1px solid var(--hyve-border);padding:12px;border-radius:12px;width:min(92vw,320px);display:none}
  .header-menus.is-open{display:flex}
  .menu{flex-direction:column;align-items:flex-start;width:100%}
  .menu ul.sub-menu{position:relative;top:auto;left:auto;background:transparent;border:none;padding-left:14px;min-width:0}
  .menu li.show-submenu>ul.sub-menu{display:block}
}

/* Hero */
.hero{position:relative;overflow:hidden;padding:96px 0 72px}
.hero h1{font-family:Anton,Impact,'Arial Black',system-ui,sans-serif;font-size:clamp(40px,6vw,86px);line-height:1.02;margin:0 0 14px;letter-spacing:.5px}
.hero p{max-width:760px;color:var(--hyve-muted);font-size:18px}
.hero .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.hero .glow{position:absolute;inset:-20%;background:radial-gradient(600px 400px at 20% 10%,rgba(62,166,255,.35),transparent 60%),radial-gradient(700px 500px at 80% 30%,rgba(124,92,255,.25),transparent 65%),radial-gradient(600px 350px at 50% 90%,rgba(0,255,209,.20),transparent 60%);filter:blur(40px);z-index:-1}
.hero .gridbg{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 80%);z-index:-2}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hyve-border);color:var(--hyve-muted);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.02)}
.icon{width:20px;height:20px;display:inline-block}
.hero .cta .btn-secondary{background:transparent;border:1px dashed var(--hyve-primary);color:var(--hyve-text)}
.hero .cta .btn-secondary:hover{border-style:solid}

/* Socials */
.socials{display:flex;gap:12px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--hyve-border);background:rgba(255,255,255,.02)}
.socials svg{width:20px;height:20px;color:var(--hyve-text)}
.socials a:hover{border-color:var(--hyve-primary)}
.section-socials .card{display:flex;align-items:center;justify-content:space-between;gap:24px}
.section-socials p{color:var(--hyve-muted);margin:0}
@media (max-width:900px){.section-socials .card{flex-direction:column;align-items:flex-start}}

/* Footer */
.site-footer{border-top:1px solid var(--hyve-border);padding:36px 0;color:var(--hyve-muted)}
.site-footer a{color:var(--hyve-muted)}
.site-footer a:hover{color:var(--hyve-text)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.footer-address{font-size:14px;color:var(--hyve-muted);line-height:1.7}
.footer-address strong{color:var(--hyve-text)}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.footer-brand img{height:28px;width:auto}

/* =========================
   Particles layer (middle)
   ========================= */
#hyve-page-canvas{
  position:fixed;
  inset:0;
  z-index:1 !important;          /* middle, NOT on top */
  pointer-events:none;
  mix-blend-mode:screen !important;
  opacity:.9 !important;
  contain:layout paint size;
}

/* Content above particles */
header.site-header,
main,
footer.site-footer,
#page,
.site,
.entry-content{
  position:relative;
  z-index:2;                      /* ensure content sits above canvas */
}

/* Sticky Contact on mobile */
@media (max-width:900px){
  .contact-fab{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:60;
  }
}
/* Final override — beats most plugin/theme rules */
html body canvas#hyve-page-canvas,
:where(html body) > canvas#hyve-page-canvas{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;          /* middle layer */
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: screen !important;  /* <- critical */
  opacity: .9 !important;
  contain: layout paint size !important;
}