/*
Theme Name:  J6V - V1.6
Theme URI:   https://j6venture.com
Author:      J6 Venture
Version:     1.6
Description: V1.6 — mobile accordion for Content Types + Process sections, global mobile nav fix via shared stylesheet.
Text Domain: j6v
*/

/* ================================================================
   J6V GLOBAL SHARED STYLES — loaded on every page via wp_head()
   Covers: mobile nav panel, hamburger, shared mobile breakpoints.
   Per-page section CSS lives in each template's inline <style>.
   ================================================================ */

/* ── CSS custom properties (shared tokens) ──────────────────────── */
:root {
  --white:       #FFFFFF;
  --black:       #0A0A0A;
  --gray-50:     #F9F9F7;
  --gray-100:    #F0F0EC;
  --gray-200:    #E2E2DC;
  --gray-400:    #A3A39A;
  --gray-600:    #666660;
  --lime:        #C2FF00;
  --lime-dark:   #96CC00;
  --purple:      #7C3AED;
  --sans:        'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --nav-h:       64px;
}

/* ── Mobile nav panel ───────────────────────────────────────────── */
.nav-mobile {
  position: fixed; top: 0; right: 0;
  width: 88vw; max-width: 340px; height: 100vh;
  z-index: 1001; background: var(--white);
  overflow-y: auto; padding-bottom: 40px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.14);
}
.nav-mobile.open { transform: translateX(0); }

/* Backdrop */
.nav-mobile-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000; background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.nav-mobile-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Header row inside panel */
.nav-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: var(--nav-h);
  border-bottom: 1px solid var(--gray-100);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.nav-mobile-logo {
  font-family: var(--sans); font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--black); text-decoration: none;
  display: flex; align-items: center; gap: 2px;
}
.nav-mobile-logo span { color: var(--lime); font-size: 22px; }

/* Close button */
.nav-mobile-close {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--gray-100); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--black); line-height: 1;
  transition: background 0.15s;
}
.nav-mobile-close:hover { background: var(--gray-200); }

/* ── Link list — CRITICAL: reset global nav{} bleed ────────────── */
/*    Every page has nav { display:flex; position:fixed; height:64px }
      which would otherwise turn <nav.nav-mobile-links> into a
      horizontal 64px bar. These overrides restore correct layout.  */
.nav-mobile-links {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 8px 0 24px !important;
}

/* Group container */
.nav-mobile-group {
  display: block !important;
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* Group label (e.g. "Services", "Resources") */
.nav-mobile-group-label,
.nav-mobile-group-title {
  display: block;
  padding: 12px 20px 4px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray-400);
}

/* Divider between groups */
.nav-mobile-divider { height: 1px; background: var(--gray-100); margin: 8px 0; }

/* ── Individual links — default / hover / active ────────────────── */
.nav-mobile-link {
  display: block !important;
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 500;
  color: var(--black);                    /* DEFAULT: black text */
  text-decoration: none;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile-link:hover {
  background: var(--gray-50);             /* HOVER: light gray bg */
  color: var(--black);
}
.nav-mobile-link.active {
  color: var(--purple);                   /* ACTIVE/CURRENT: purple */
  font-weight: 600;
}

/* Indented group links (sub-items under Services / Resources) */
.nav-mobile-group .nav-mobile-link {
  padding-left: 32px;
  font-size: 14px; font-weight: 400;
  color: var(--gray-600);                 /* DEFAULT: muted gray */
}
.nav-mobile-group .nav-mobile-link:hover {
  background: var(--gray-50);
  color: var(--black);                    /* HOVER: full black */
}
.nav-mobile-group .nav-mobile-link.active {
  color: var(--purple);                   /* ACTIVE: purple */
  font-weight: 600;
}

/* Separator before standalone top-level links (About, Contact) */
.nav-mobile-links > .nav-mobile-link:first-of-type {
  margin-top: 4px;
  border-top: 1px solid var(--gray-100);
  padding-top: 14px;
}

/* ── CTA button ─────────────────────────────────────────────────── */
.nav-mobile-cta {
  padding: 16px 16px 20px;
  border-top: 1px solid var(--gray-100);
}
.nav-mobile-cta a {
  display: block; width: 100%; text-align: center;
  background: var(--lime);               /* DEFAULT: lime */
  color: var(--black);
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 13px 24px; border-radius: 100px;
  text-decoration: none; transition: background 0.2s;
}
.nav-mobile-cta a:hover { background: var(--lime-dark); }  /* HOVER: darker lime */