/*
Theme Name: Forge AI Lab (N3USYS)
Theme URI: https://forgeailab.com
Author: Operator / N3USYS
Author URI: https://forgeailab.com
Description: Corporate WordPress theme with N3USYS styling, left sidebar menu, toolbox cards and Codex teaser templates.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: forge-ai-lab
*/

:root{
  --n3-bg: #ffffff;
  --n3-surface: #f8f9ff;
  --n3-text: #0a0a0a;
  --n3-indigo: #17194d;
  --n3-indigo-deep: #122065;
  --n3-cyan: #00e0ff;
  --n3-accent: #ff00d4;
  --n3-muted: #b7c0e6;
  --n3-shadow: rgba(0,0,0,0.06);
  --font-main: 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

/* Reset & body */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-main);color:var(--n3-text);background:var(--n3-bg);line-height:1.5;}
a{color:var(--n3-cyan);text-decoration:none}

/* Header (top area when content scrolls beside sidebar) */
.site-header{padding:18px 28px;display:flex;align-items:center;gap:14px;background:transparent;z-index:20}
.site-branding h1{margin:0;font-size:1.1rem;color:var(--n3-indigo-deep);letter-spacing:1px}

/* =========================
   LEFT SIDEBAR NAVIGATION
   ========================= */
#site-navigation, .main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 230px;
  height: 100vh;
  background: linear-gradient(180deg, #0a0f2c 0%, #121a4f 100%);
  border-right: 1px solid rgba(0, 224, 255, 0.08);
  box-shadow: 2px 0 25px rgba(0, 224, 255, 0.06);
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

body, .site-content, #content {
  margin-left: 230px;
  transition: margin-left 0.25s ease;
}

/* Menu header / logo */
.n3usys-menu-header {
  text-align: center;
  color: var(--n3-cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0,224,255,0.6);
  margin-bottom: 22px;
  padding: 0 12px;
}

/* Menu list */
.main-navigation ul{list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:10px}
.main-navigation li{margin:0}

/* Menu buttons */
.main-navigation a{
  display:block;color:#cfd8ff;background:rgba(255,255,255,0.03);padding:12px 14px;border-radius:8px;font-weight:600;text-decoration:none;position:relative;overflow:hidden;transition:all .28s ease
}
.main-navigation a:hover,.main-navigation .current-menu-item > a{
  color:var(--n3-cyan);background:rgba(0,224,255,0.08);box-shadow:0 0 12px rgba(0,224,255,0.22)
}

/* Submenu caret */
.has-submenu > a::after{content:"▸";float:right;transition:transform .28s ease;opacity:.7}

/* Submenu collapsed */
.submenu{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease;margin-left:8px;opacity:0}
.has-submenu.open > .submenu{max-height:600px;opacity:1}
.has-submenu.open > a::after{transform:rotate(90deg)}

/* Submenu items */
.submenu a{background:rgba(0,224,255,0.03);font-size:.95rem;color:#b7c0e6;padding:10px 14px;border-radius:6px;margin-top:6px;display:block}
.submenu a:hover{background:rgba(0,224,255,0.12);color:var(--n3-cyan)}

/* Pulsing overlay on hover */
.main-navigation a::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px;background:radial-gradient(circle at center, rgba(0,224,255,0.12), transparent 60%);opacity:0;transition:opacity .35s ease}
.main-navigation a:hover::before{opacity:1;animation:pulseGlow 2s infinite}

@keyframes pulseGlow{0%,100%{opacity:.18}50%{opacity:.48}}

/* =========================
   MAIN CONTAINER
   ========================= */
.container{width:90%;max-width:1100px;margin:36px auto;padding:28px;background:var(--n3-surface);border-radius:12px;box-shadow:0 10px 30px var(--n3-shadow)}

/* Page title */
.page-title{font-family:var(--font-mono);color:var(--n3-indigo);font-size:1.4rem;margin:0 0 12px}

/* =========================
   TOOLBOX CARDS (forge) 
   ========================= */
.forge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.forge-card{position:relative;border:1px solid #e6ecff;border-radius:12px;padding:18px;background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%);box-shadow:0 6px 18px rgba(0,0,0,0.04);transition:transform .28s ease,box-shadow .28s ease;overflow:hidden;z-index:0;animation:cardPulse 4s ease-in-out infinite}
@keyframes cardPulse{0%,100%{box-shadow:0 6px 18px rgba(0,224,255,0.06)}50%{box-shadow:0 10px 30px rgba(0,224,255,0.14)}}
.forge-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,224,255,0.18),0 6px 20px rgba(255,0,212,0.06)}
.forge-card:hover::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:12px;background:linear-gradient(45deg,rgba(0,224,255,0.12),rgba(255,0,212,0.06));z-index:0}
.forge-card *{position:relative;z-index:1}
.forge-card h3{color:var(--n3-indigo);text-shadow:0 0 4px rgba(0,224,255,0.18);margin:0 0 8px;font-size:1.05rem}
.forge-card p{color:#334;line-height:1.45;margin:0 0 12px}
.forge-card a{color:var(--n3-cyan);font-weight:600}

/* =========================
   CODEX INTRO STYLES (page template)
   ========================= */
.codex-container{font-family:var(--font-mono);color:#e8eefc;background:radial-gradient(circle at top center,#060612 0%,#141427 100%);padding:80px 20px;min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}
.codex-header h1{font-size:3rem;color:var(--n3-cyan);text-shadow:0 0 12px var(--n3-cyan),0 0 25px var(--n3-cyan);margin-bottom:.5rem}
.codex-header h2{font-size:1.8rem;color:var(--n3-accent);text-shadow:0 0 8px var(--n3-accent),0 0 20px var(--n3-accent);margin-bottom:30px;animation:pulseGlow 4s ease-in-out infinite}
.codex-intro p{font-size:1.05rem;max-width:840px;line-height:1.8;margin-bottom:1.5rem;position:relative;z-index:1}
.codex-intro .highlight{color:var(--n3-cyan);font-weight:700;text-shadow:0 0 6px var(--n3-cyan),0 0 12px var(--n3-cyan)}
.codex-teaser .glow{font-size:1.25rem;color:var(--n3-cyan);font-weight:700;margin-top:40px;text-shadow:0 0 12px var(--n3-cyan),0 0 25px var(--n3-cyan);animation:pulseTeaser 3s ease-in-out infinite}

/* Canvas */
#codexCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Responsive tweaks */
@media (max-width:900px){
  #site-navigation{position:fixed;width:64px}
  body, .site-content, #content{margin-left:64px}
  .n3usys-menu-header{font-size:.9rem;padding:6px 2px}
  .main-navigation a{padding:10px 8px;font-size:.9rem}
}