/* Off-canvas panels: mobile nav (left) and accessibility (right) */

:root {
  --off-canvas-bg: rgba(6, 10, 22, 0.6);
  --off-canvas-overlay: rgba(2,6,18,0.6);
  --off-canvas-width-left: clamp(18rem, 76vw, 26rem);
  --off-canvas-width-right: clamp(18rem, 32vw, 24rem);
  --off-canvas-edge-border: rgba(255,255,255,0.04);
  --off-canvas-glow: rgba(79,108,255,0.06);
  --off-canvas-backdrop-noise-opacity: 0.12;
}

.off-canvas-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.56));
  backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms cubic-bezier(.22,1,.36,1), visibility 360ms linear, backdrop-filter 360ms ease;
  z-index: 9000;
}

.off-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9001; }

.off-canvas__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--off-canvas-width-left);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.9rem;
  gap: 1rem;
  background: linear-gradient(180deg, rgba(6,10,18,0.9), rgba(8,12,20,0.82));
  /* subtle noise reduction for the panel itself to keep the glass calm */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border: 1px solid var(--off-canvas-edge-border);
  border-radius: 12px 0 0 12px;
  backdrop-filter: blur(12px) saturate(118%);
  box-shadow: 0 24px 64px rgba(2,6,18,0.6), 0 2px 30px var(--off-canvas-glow);
  transform: translateX(-110%);
  transition: transform 420ms cubic-bezier(0.22,1,0.36,1), box-shadow 420ms ease, opacity 220ms ease;
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.off-canvas__panel--right { right: 0; left: auto; transform: translateX(110%); border-radius: 0 10px 10px 0; }
.off-canvas__panel--left { left: 0; right: auto; transform: translateX(-110%); }

.off-canvas__panel--left.is-active { transform: translateX(0); }
.off-canvas__panel--right.is-active { transform: translateX(0); }
.off-canvas.is-open ~ .off-canvas-overlay,
.off-canvas.is-open .off-canvas-overlay { opacity: 1; visibility: visible; }

.off-canvas__header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04);
}

.off-canvas__header.off-canvas__header--nav { padding: 1.25rem 1rem; font-weight:700; font-size:1.05rem; }
.off-canvas__header.off-canvas__header--a11y { padding: 1.125rem 1rem; font-weight:600; font-size:1.0rem; }

.off-canvas__close {
  appearance:none; border:0; background:transparent; color:inherit; cursor:pointer;
  width:2.8rem; height:2.8rem; display:inline-grid; place-items:center; border-radius:10px; padding:6px;
}

.off-canvas__panel .off-canvas__close { background: rgba(255,255,255,0.02); }

/* Visible focus styles inside off-canvas panels */
.off-canvas__close:focus-visible,
.off-canvas__panel a:focus-visible,
.off-canvas__panel button:focus-visible,
.off-canvas__panel [tabindex]:focus-visible {
  outline: 3px solid rgba(79,108,255,0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79,108,255,0.12);
}

/* LEFT NAV: layout & tap targets */
.off-canvas__panel--left {
  width: var(--off-canvas-width-left);
  padding-top: 1.25rem;
}
.off-canvas__panel--left .site-nav { display:block; }
.off-canvas__panel--left .site-nav__center { padding: 0; }
.off-canvas__panel--left .site-nav__links { display:flex; flex-direction:column; gap: 12px; padding: 0.25rem 0.5rem; }
.off-canvas__panel--left .site-nav__link {
  display:block; padding: 0.95rem 0.6rem; font-size: 1.05rem; line-height:1.3; border-radius:10px; text-align:left;
  color:inherit; text-decoration:none; transition: background 220ms cubic-bezier(.22,1,.36,1), transform 260ms cubic-bezier(.22,1,.36,1), opacity 260ms ease;
}
.off-canvas__panel--left .site-nav__link:hover,
.off-canvas__panel--left .site-nav__link:focus {
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  transform: translateX(2px);
}
.off-canvas__panel--left .site-nav__actions { margin-top: 0.75rem; display:flex; flex-direction:column; gap:0.5rem; padding: 0.5rem; }
.off-canvas__panel--left .site-nav__a11y-icon { margin-right: 8px; }

/* RIGHT A11Y PANEL */
.off-canvas__panel--right { width: var(--off-canvas-width-right); padding-top: 1rem; }
.off-canvas__panel--right .a11y-controls { display:flex; flex-direction:column; gap:1rem; padding: 1rem; }
.off-canvas__panel--right .a11y-controls h3 { margin:0 0 0.25rem 0; font-size:1.05rem; }
.off-canvas__panel--right .a11y-section { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:0.75rem; border-radius:8px; border:1px solid rgba(255,255,255,0.02); }
.off-canvas__panel--right .a11y-section__label { font-weight:600; margin-bottom:0.5rem; }
.off-canvas__panel--right .a11y-control-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }

/* Enhanced off-canvas nav visuals and layout */
.off-canvas__header.off-canvas__header--nav {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.off-canvas__brand-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.off-canvas__brand .site-brand__mark { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:8px; background: linear-gradient(180deg, rgba(79,108,255,0.12), rgba(56,189,248,0.06)); color:#eaf6ff; font-weight:700; }
.off-canvas__brand-text { display:flex; flex-direction:column; line-height:1; }
.off-canvas__brand-tag { font-size:0.75rem; color:rgba(255,255,255,0.6); margin-top:2px; }

/* Primary link styling (applies when nav is moved into off-canvas) */
.off-canvas__panel--left .off-canvas__link { display:flex; align-items:center; gap:14px; padding: 0.95rem 0.9rem; min-height:52px; border-radius:12px; color:inherit; font-weight:600; }
.off-canvas__panel--left .off-canvas__icon { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; color: rgba(200,220,255,0.98); opacity:0.98; border-radius:8px; background: rgba(255,255,255,0.02); }
.off-canvas__panel--left .off-canvas__link .off-canvas__icon svg { display:block; width:18px; height:18px; }
.off-canvas__panel--left .off-canvas__link:hover { transform: translateX(2px); background: linear-gradient(90deg, rgba(79,108,255,0.03), rgba(124,58,237,0.01)); }

/* staggered entrance using inline --i variable set by JS */
.off-canvas__panel--left .off-canvas__link { opacity: 0; transform: translateX(-8px); }
.off-canvas__panel--left.is-active .off-canvas__link { opacity: 1; transform: translateX(0); transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 360ms ease; transition-delay: var(--i, 0ms); }

/* Active state: glass highlight, subtle border and glow/dot */
.off-canvas__panel--left .off-canvas__link--active {
  background: linear-gradient(180deg, rgba(79,108,255,0.06), rgba(124,58,237,0.02));
  border: 1px solid rgba(79,108,255,0.12);
  box-shadow: 0 6px 18px rgba(79,108,255,0.06), 0 1px 8px rgba(124,58,237,0.04) inset;
  color: rgba(255,255,255,0.98);
}
.off-canvas__panel--left .off-canvas__status-dot { width:8px; height:8px; border-radius:99px; background:linear-gradient(180deg, #00E5FF, #7C3AED); margin-left:auto; box-shadow:0 4px 10px rgba(124,58,237,0.12); }

/* Secondary actions block */
.off-canvas__secondary { margin-top: 1.25rem; padding: 0.6rem 0.5rem 1.5rem 0.5rem; display:flex; flex-direction:column; gap:0.4rem; border-top:1px solid rgba(255,255,255,0.02); }
.off-canvas__section-label { font-size:0.82rem; color: rgba(255,255,255,0.62); margin: 0 0 0.25rem 0.25rem; font-weight:600; letter-spacing:0.02em; }
.off-canvas__secondary-link { padding: 0.85rem 0.85rem; border-radius:10px; color: rgba(220,230,255,0.92); text-decoration:none; font-size:0.95rem; display:flex; align-items:center; gap:12px; min-height:44px; }
.off-canvas__secondary-link:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); transform: translateX(2px); }
.off-canvas__secondary-link .off-canvas__icon { opacity:0.9; }
.off-canvas__secondary-text { color: rgba(255,255,255,0.86); }

/* small footer status pill */
.off-canvas__footer-pill { margin-top:auto; padding: 0.6rem 0.75rem; font-size:0.85rem; color: rgba(255,255,255,0.8); display:flex; align-items:center; gap:8px; justify-content:center; }
.off-canvas__footer-pill .pill { background: linear-gradient(90deg, rgba(79,108,255,0.06), rgba(56,189,248,0.03)); padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.02); }

/* placeholders for the requested sections */
.a11y-controls .a11y-section--text-size {}
.a11y-controls .a11y-section--contrast {}
.a11y-controls .a11y-section--reduce-motion {}
.a11y-controls .a11y-section--theme {}

.off-canvas-open { overflow: hidden; }

/* keep panels usable at larger sizes but JS will restrict activation */
@media (min-width: 980px) {
  .off-canvas__panel { width: 340px; }
}