:root{
  --oc-width: 300px;        /* off-canvas width */
  --oc-bg: #0b1a59;         /* panel background */
  --oc-text: #baf7c8;       /* link color */
  --oc-text-dim: #fff;   /* sub/hover accents */
  /*--oc-text-dim: #9db0ff;*/
  --oc-accent: #7c7af2;     /* accent line */
  --oc-z: 9999;
}

/* Menu */


#oc-panel .et-pb-icon { font-size:1em; }


/**/

/* Toggle (hamburger) */
.oc-toggle{
  position: absolute;        /* pins at edge */
  right: 18px; top: 18px;
  width: 42px; height: 42px;
  display: grid; place-content: center;
  gap: 5px;
  background: transparent; border: 0; cursor: pointer;
  z-index: var(--oc-z);
}
.oc-toggle__bar{
  display: block; width: 26px; height: 2px; background: #9af2b6;
}

/* Overlay */
.oc-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: calc(var(--oc-z) - 1);
  opacity: 0; transition: opacity .25s ease;
}

/* Panel */
.oc-panel {
  position: fixed; top: 0; right: 0; height: 100dvh; width: var(--oc-width);
  transform: translateX(100%);
  background: var(--oc-bg);
  color: var(--oc-text);
  z-index: var(--oc-z);
  box-shadow: -6px 0 24px rgba(0,0,0,.25);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  padding: 38px 28px 40px;
  overflow-y: auto;
}

  .logged-in .oc-panel { padding-top: 68px; }

.oc-close {
  position: absolute; top: 28px; right: 18px;
  background: transparent; border: 0; font-size: 32px; line-height: 1;
  color: #9af2b6; cursor: pointer;
}

  .logged-in .oc-close { top: 58px; }

.oc-nav{ margin-top: 50px; }
.oc-menu__list,
.oc-menu__list ul{ list-style: none !important; margin: 0; padding: 0; }
.oc-menu__list > li{ margin: 14px 0; }

.oc-menu__list > li.main_resources { margin: 32px 0; }

.oc-menu__list a {
  display: inline-block;
  font-size: clamp(14px, 1.75vw, 21px);
  color: var(--oc-text);
  text-decoration: none;
  font-weight: 600;
}
.oc-menu__list a:hover,
.oc-menu__list .current-menu-item > a{ color: #fff; }

.oc-menu__list li.menu-item-has-children > a::after{
  content: " –"; color: var(--oc-text);
}

/* Submenus */
.oc-menu__list ul{ margin-top: 6px; padding-left: 16px; }
.oc-menu__list ul a{
  font-size: clamp(13px,1.4vw,15px);
  color: var(--oc-text-dim);
}

.oc-menu__list ul a:hover { color: rgba(255, 255, 255, 0.9); }

/* Extra row (lock) */
.oc-extra{
  margin-top: 22px; font-size: 16px; color: var(--oc-text);
  display: flex; align-items: center; gap: 10px;
}
.oc-lock{ font-size: 22px; }

/* Open state */
body.oc-open .oc-panel{ transform: translateX(0); }
body.oc-open #oc-overlay{ opacity: 1; }
body.oc-open{ overflow: hidden; } /* prevent background scroll */

/* Optional: accent bar at top of hero (from your mock) */
.hero-accent{ height: 12px; background: var(--oc-accent); }