/* ==========================================================================
   AHVA Drawer Navigation
   File: /assets/css/nav/ahva-nav.css
   ========================================================================== */

:root{
  --ahva-panel-width: 260px;          /* <- change here to adjust width */
  --ahva-z-drawer:    5000;
  --ahva-z-toggle:    5001;
  --ahva-bg:          #141a21;        /* opaque panel background */
  --ahva-bg-hover:    #11171e;
  --ahva-border:      #26303a;
  --ahva-ink:         #e5eef8;
  --ahva-ink-soft:    #bcd0e3;
  --ahva-accent:      #8fb4ff25;
}

/* Keep the burger above everything */
.nav-toggle{ position: relative; z-index: var(--ahva-z-toggle); }

/* Optional overlay (disabled by default in many pages) */
.ahva-nav__overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,8,20,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: calc(var(--ahva-z-drawer) - 1);
}
.ahva-nav__overlay--active{
  opacity: 1;
  pointer-events: auto;
}

/* Drawer container */
.ahva-nav{
  position: relative;
  z-index: var(--ahva-z-drawer);
}

/* Drawer panel (the list) */
.ahva-nav__list{
  position: fixed;
  top: 0; left: 0;
  width: var(--ahva-panel-width);
  height: 100dvh;
  overflow-y: auto;
  background: var(--ahva-bg);                 /* OPAQUE */
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.5);
  transform: translateX(-100%);
  transition: transform .22s ease;
  will-change: transform;
}

/* Open state toggled by JS */
.ahva-nav--open .ahva-nav__list{
  transform: translateX(0);
}

/* Basic list reset */
.ahva-nav__list,
.ahva-nav__sub{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Row: link & trigger look the same */
.ahva-nav__item{
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ahva-nav__link,
.ahva-nav__trigger{
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: 16px 18px;
  color: var(--ahva-ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  line-height: 1.1;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Hover / focus */
.ahva-nav__link:hover,
.ahva-nav__trigger:hover{
  background: var(--ahva-bg-hover);
}
.ahva-nav__link:focus-visible,
.ahva-nav__trigger:focus-visible{
  outline: 2px solid #5b8bff;
  outline-offset: -2px;
}

/* Icon sits to the LEFT of text */
.ahva-nav__icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: .92;
}
.ahva-nav__link:hover .ahva-nav__icon,
.ahva-nav__trigger:hover .ahva-nav__icon{
  opacity: 1;
}

/* Text span (allows easy truncation if needed) */
.ahva-nav__text{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ahva-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------- Chevron (right edge) -------- */
/* Kill any theme pseudo arrow so we don't get duplicates */
.ahva-nav__trigger::after{ content: none !important; }

.ahva-nav__arrow{
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-grid;
  place-items: center;
  opacity: .75;
  transition: transform .2s ease, opacity .2s ease;
  overflow: hidden;                 /* guard against huge inline SVGs */
}
.ahva-nav__arrow > svg{
  width: 100%;
  height: 100%;                     /* <-- fixes giant chevron issue */
  display: block;
}
.ahva-nav__item--open > .ahva-nav__trigger .ahva-nav__arrow{
  transform: rotate(90deg);
  opacity: 1;
}

/* ------- Submenu ------- */
.ahva-nav__item--has-sub .ahva-nav__sub{
  display: none;
  padding: 6px 0 10px 44px;         /* indent aligns under label text */
  background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.ahva-nav__item--open .ahva-nav__sub{ display: block; }

/* Submenu items inherit main styling but lighter weight */
.ahva-nav__sub .ahva-nav__link{
  padding: 10px 18px 10px 0;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ahva-ink-soft);
  background: transparent;
  border: 0;
}
.ahva-nav__sub .ahva-nav__icon{
  width: 18px; height: 18px; flex-basis: 18px; opacity: .9;
}
.ahva-nav__sub .ahva-nav__link:hover{
  color: var(--ahva-ink);
  background: transparent;
}

/* ------- Misc polish ------- */
/* Scrollbar (webkit) */
.ahva-nav__list::-webkit-scrollbar{ width: 10px; }
.ahva-nav__list::-webkit-scrollbar-thumb{
  background: #1f2a34;
  border: 2px solid var(--ahva-bg);
  border-radius: 8px;
}
.ahva-nav__list::-webkit-scrollbar-track{ background: var(--ahva-bg); }

/* When you want NO overlay at all, add `.ahva-nav--no-overlay` to the root */
.ahva-nav--no-overlay ~ .ahva-nav__overlay{ display: none !important; }

/* Desktop: keep the drawer width but allow page behind to scroll normally */
@media (min-width: 1024px){
  .ahva-nav__list{ height: 100vh; }
}
/* Off-canvas baseline: hidden to the LEFT, not right */
.ahva-nav__list{
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: auto !important;          /* <-- pin to left */
  right: 0 !important;      /* <-- ensure not pinned right */
  height: 100vh !important;
  width: 280px !important;

  background: #1b2128 !important;   /* opaque panel */
  box-shadow: 6px 0 24px rgba(0,0,0,.45);

  transform: translateX(-100%) !important;   /* <-- start hidden off-screen */
  transition: transform .25s ease !important;
  z-index: 5000 !important;
}

/* When nav root gets the “open” class, slide it in */
.ahva-nav.ahva-nav--open .ahva-nav__list{
  transform: translateX(0) !important;
}

/* Optional overlay (if you use one) */
.ahva-nav__overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 4999;
}
.ahva-nav__overlay.ahva-nav__overlay--active{ opacity: 1; pointer-events: auto; }

/* Keep icons inline with labels */
.ahva-nav__link,
.ahva-nav__trigger{ display:flex; align-items:center; gap:.75rem; }
.ahva-nav__trigger::after{ content:none !important; }
.ahva-nav__arrow{ margin-left:auto; width:16px; height:16px; opacity:.75; transition:transform .2s; }
.ahva-nav__item--open > .ahva-nav__trigger .ahva-nav__arrow{ transform: rotate(90deg); opacity:1; }
/* RIGHT-SIDE DRAWER — default CLOSED */
.ahva-nav__list{
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  height: 100vh !important;
  width: 300px !important;

  background: #1b2128 !important;          /* opaque panel */
  box-shadow: -6px 0 24px rgba(0,0,0,.45);
  z-index: 5000 !important;

  /* keep it hidden off screen by default */
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: transform .25s ease, opacity .2s ease;
}

/* OPEN state (toggled by AHVA.Nav) */
.ahva-nav.ahva-nav--open .ahva-nav__list{
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Overlay behavior (optional) */
.ahva-nav__overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; z-index: 4999;
  transition: opacity .2s ease;
}
.ahva-nav__overlay.ahva-nav__overlay--active{
  opacity: 1; pointer-events: auto;
}

/* Keep label + icon inline + single chevron */
.ahva-nav__link, .ahva-nav__trigger{ display:flex; align-items:center; gap:.75rem; }
.ahva-nav__trigger::after{ content:none !important; }
.ahva-nav__arrow{ margin-left:auto; width:16px; height:16px; opacity:.75; transition:transform .2s; }
.ahva-nav__item--open > .ahva-nav__trigger .ahva-nav__arrow{ transform:rotate(90deg); opacity:1; }
.ahva-nav__trigger::after { content: none !important; } /* avoid double arrows */
.ahva-nav__link, .ahva-nav__trigger { display:flex; align-items:center; gap:.75rem; }
.ahva-nav__icon { width:20px; height:20px; flex:0 0 20px; opacity:.92; }
.ahva-nav__arrow { margin-left:auto; width:16px; height:16px; opacity:.75; transition:transform .2s ease; }
.ahva-nav__item--open > .ahva-nav__trigger .ahva-nav__arrow { transform:rotate(90deg); opacity:1; }

/* submenu text weight/spacing matches top level */
.ahva-nav__sub .ahva-nav__link { font-weight: 500; text-transform: none; letter-spacing: .02em; padding:.65rem 0; }
/* Submenu typography override */
.ahva-nav__sub .ahva-nav__text{
  font-weight: 500;          /* lighter */
  text-transform: none;      /* no uppercase */
  letter-spacing: .02em;
}

/* Keep spacing and icon sizing tidy in sub-items */
.ahva-nav__sub .ahva-nav__link { padding: .6rem 0; }
.ahva-nav__sub .ahva-nav__icon { width: 18px; height: 18px; opacity: .9; }
/* Fix: keep trigger rows left-aligned, arrow at far right */
.ahva-nav__link,
.ahva-nav__trigger {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;           /* override any theme centering */
  justify-content: flex-start;/* don't center the label */
  width: 100%;
}

.ahva-nav__text { flex: 0 1 auto; }
.ahva-nav__arrow { margin-left: auto; }

/* Submenu items: not bold, not caps (if you want them lighter) */
.ahva-nav__sub .ahva-nav__text {
  font-weight: 500;
  text-transform: none;
  letter-spacing: .02em;
}
/* Make trigger rows (Education, Members) match link typography */
.ahva-nav__trigger {
  font: inherit;                 /* inherit size & family */
  color: inherit;
  line-height: inherit;
  background: none;
  border: 0;
  padding: var(--ahva-nav-pad, 14px 18px);
}

/* Ensure the visible label matches the others */
.ahva-nav__link .ahva-nav__text,
.ahva-nav__trigger .ahva-nav__text {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Keep submenu items lighter and not uppercase */
.ahva-nav__sub .ahva-nav__text {
  font-weight: 500;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 0.95rem; /* optional: slightly smaller for subitems */
}

/* Alignment (in case something re-centers them) */
.ahva-nav__link,
.ahva-nav__trigger {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}
.ahva-nav__arrow { margin-left: auto; }
/* Darker row background just for trigger rows (Education, Members) */
.ahva-nav__item--has-sub > .ahva-nav__trigger {
  background: #121821;                 /* darker than panel */
}

/* When the submenu is open, keep it dark */
.ahva-nav__item--open > .ahva-nav__trigger {
  background: #11161e;
}

/* Darker background for the submenu container and its links */
.ahva-nav__item--has-sub > .ahva-nav__sub {
  background: #0f141c;                 /* darkest panel tone */
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Individual submenu links */
.ahva-nav__sub .ahva-nav__link {
  background: #0f141c;
}

/* Hover/focus polish */
.ahva-nav__item--has-sub > .ahva-nav__trigger:hover,
.ahva-nav__item--has-sub > .ahva-nav__trigger:focus-visible {
  background: #151b24;
}

.ahva-nav__sub .ahva-nav__link:hover,
.ahva-nav__sub .ahva-nav__link:focus-visible {
  background: #141b25;
}

/* Optional: slim divider between submenu items for clarity */
.ahva-nav__sub .ahva-nav__link + .ahva-nav__link {
  border-top: 1px solid rgba(255,255,255,.05);
}
/* Submenu rows: same typographic treatment as top-level */
.ahva-nav__sub .ahva-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 12px 18px;
}

.ahva-nav__sub .ahva-nav__icon {
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 18px;
  opacity: .9;
}

.ahva-nav__sub .ahva-nav__text {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;            /* same as main rows */
  font-size: 0.95rem;          /* visually matches main label size */
  color: #e6edf6;
}
/* ===== AHVA drawer fixes (final overrides) ===== */

/* Submenu rows match top-level typography */
.ahva-nav__sub .ahva-nav__link,
.ahva-nav__sub .ahva-nav__trigger {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: 12px 18px !important;
  text-align: left !important;
}

/* Make submenu labels fully UPPERCASE (not Capitalize) */
.ahva-nav__sub .ahva-nav__text {
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  color: #e6edf6 !important;
}

/* Ensure submenu icons always show and have a size */
.ahva-nav__sub .ahva-nav__icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  opacity: .95 !important;
}

/* Darker background for Education/Members triggers and their submenus */
.ahva-nav__item--has-sub > .ahva-nav__trigger {
  background: #121821 !important;
}
.ahva-nav__item--open > .ahva-nav__trigger {
  background: #11161e !important;
}
.ahva-nav__item--has-sub > .ahva-nav__sub {
  background: #0f141c !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.ahva-nav__sub .ahva-nav__link:hover,
.ahva-nav__sub .ahva-nav__link:focus-visible {
  background: #141b25 !important;
}
/* --- Hover = dark blue, leave = revert --- */
:root{
  --ahva-hover-blue: #0f2748; /* dark blue */
}

/* top-level links & triggers */
.ahva-nav__link,
.ahva-nav__trigger,
.ahva-nav__sub .ahva-nav__link {
  transition: background-color .15s ease, color .15s ease;
}

.ahva-nav__link:hover,
.ahva-nav__link:focus-visible,
.ahva-nav__trigger:hover,
.ahva-nav__trigger:focus-visible,
.ahva-nav__sub .ahva-nav__link:hover,
.ahva-nav__sub .ahva-nav__link:focus-visible {
  background: var(--ahva-hover-blue) !important;
  color: #e6edf6;
}

/* keep the chevron & icons visible on hover */
.ahva-nav__trigger:hover .ahva-nav__arrow,
.ahva-nav__trigger:focus-visible .ahva-nav__arrow,
.ahva-nav__link:hover .ahva-nav__icon,
.ahva-nav__link:focus-visible .ahva-nav__icon,
.ahva-nav__sub .ahva-nav__link:hover .ahva-nav__icon,
.ahva-nav__sub .ahva-nav__link:focus-visible .ahva-nav__icon {
  opacity: 1;
}

/* optional: when a submenu is open, its trigger still turns blue on hover */
.ahva-nav__item--open > .ahva-nav__trigger:hover,
.ahva-nav__item--open > .ahva-nav__trigger:focus-visible {
  background: var(--ahva-hover-blue) !important;
}
/* ---- Drawer: right side, closed by default ---- */
.ahva-nav__list{
  left: auto !important;
  right: 0 !important;
  transform: translateX(100%) !important; /* start off-canvas */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.ahva-nav.ahva-nav--open .ahva-nav__list{
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ---- Log out: make the button look like a row, not a white box ---- */
.ahva-nav__logout{
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ahva-ink, #e6edf6);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  cursor: pointer;
}
.ahva-nav__logout:hover,
.ahva-nav__logout:focus-visible{
  background: var(--ahva-hover-blue, #0f2748);
}
.ahva-nav__logout .ahva-nav__icon{
  width: 20px; height: 20px; flex: 0 0 20px; opacity: .92;
}

/* ---- Tidy any header/hero gap ---- */
.site-header{ margin-bottom: 0; }
.site-header + .hero{ margin-top: 0; }
/* ==========================================================================
   AHVA Drawer Navigation (FINAL #1)
   ========================================================================== */

:root {
  --ahva-panel-width: 285px;
  --ahva-z-drawer: 5000;
  --ahva-z-toggle: 5001;
  --ahva-bg: #131922;
  --ahva-bg-2: #0f141c;
  --ahva-bg-3: #0d1219;
  --ahva-border: rgba(255,255,255,.06);
  --ahva-ink: #e6edf6;
  --ahva-ink-soft: #c6d5e7;
  --ahva-hover: #0c2147;           /* Dark blue hover */
}

/* Keep the burger above everything */
.nav-toggle { position: relative; z-index: var(--ahva-z-toggle); }

/* Optional overlay */
.ahva-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: calc(var(--ahva-z-drawer) - 1);
}
.ahva-nav__overlay.ahva-nav__overlay--active {
  opacity: 1;
  pointer-events: auto;
}

/* Root */
.ahva-nav { position: relative; z-index: var(--ahva-z-drawer); }

/* Drawer panel (RIGHT side, solid, hidden by default) */
.ahva-nav__list {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  height: 100vh !important;
  width: var(--ahva-panel-width) !important;
  background: var(--ahva-bg) !important;
  box-shadow: -6px 0 24px rgba(0,0,0,.45);
  border-left: 1px solid var(--ahva-border);
  overflow-y: auto;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform .25s ease;
}
/* Fix oversized icons on mobile menu */
@media (max-width: 768px) {
  .ahva-drawer,
  .ahva-menu,
  .ahva-menu ul {
    font-size: 0.95rem;
  }

  .ahva-menu svg,
  .ahva-menu img.icon,
  .ahva-drawer svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .ahva-menu li,
  .ahva-menu a {
    line-height: 1.3;
    padding: 10px 14px;
  }

  .ahva-menu .submenu a {
    font-size: 0.9rem;
    padding: 8px 16px;
  }

  /* prevent icon-only buttons from stretching */
  .ahva-menu button,
  .ahva-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
  }


function () {
  // Pick your existing elements
  const drawer = document.querySelector('.ahva-drawer') 
              || document.querySelector('.site-nav') 
              || document.querySelector('[data-ahva-drawer]');
  const toggle = document.querySelector('.nav-toggle') 
              || document.querySelector('[data-ahva-nav-toggle]');

  if (!drawer || !toggle) return; // nothing to wire up, tragic

  // Inject minimal CSS + backdrop node (no HTML edits required)
  const css = `
    #ahva-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);
      backdrop-filter:blur(2px);z-index:9998;display:none}
    #ahva-nav-backdrop.is-open{display:block}
    body.nav-open{overflow:hidden;touch-action:none}
  `;
  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

  const backdrop = document.createElement('div');
  backdrop.id = 'ahva-nav-backdrop';
  backdrop.setAttribute('aria-hidden', 'true');
  document.body.appendChild(backdrop);

  const OPEN = 'is-open';
  const BODY_LOCK = 'nav-open';

  const isMobile = () => window.matchMedia('(max-width: 768px)').matches;

  function openMenu() {
    drawer.classList.add(OPEN);
    backdrop.classList.add(OPEN);
    document.body.classList.add(BODY_LOCK);
    toggle.setAttribute('aria-expanded', 'true');
    drawer.setAttribute('aria-hidden', 'false');
  }

  function closeMenu() {
    drawer.classList.remove(OPEN);
    backdrop.classList.remove(OPEN);
    document.body.classList.remove(BODY_LOCK);
    toggle.setAttribute('aria-expanded', 'false');
    drawer.setAttribute('aria-hidden', 'true');
  }

  function toggleMenu() {
    (drawer.classList.contains(OPEN) ? closeMenu : openMenu)();
  }

  // Toggle button
  toggle.addEventListener('click', (e) => {
    e.preventDefault();
    if (!isMobile()) return;
    toggleMenu();
  });

  // Tap/click on backdrop
  backdrop.addEventListener('click', closeMenu);

  // Tap anywhere outside the drawer
  document.addEventListener('pointerdown', (e) => {
    if (!isMobile()) return;
    if (!drawer.classList.contains(OPEN)) return;
    if (!drawer.contains(e.target) && !toggle.contains(e.target)) closeMenu();
  }, { passive: true });

  // Esc key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeMenu();
  });

  // Clicking a link or explicit close button inside the drawer
  drawer.addEventListener('click', (e) => {
    const a = e.target.closest('a, button[data-close-drawer]');
    if (a && isMobile()) closeMenu();
  });

  // Kill the drawer if we leave mobile
  window.addEventListener('resize', () => {
    if (!isMobile()) closeMenu();
  });
})();