/* Aitopkit slide-in drawer menu — absolute path: /assets/css/drawer.css */

/* Hamburger toggle button (top-right of header) */
.drawer-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:12px;flex:0 0 auto;
  background:transparent;border:1px solid var(--line,#e6e9f5);border-radius:12px;
  cursor:pointer;padding:0;
}
.drawer-toggle:hover{background:var(--brand-soft,#eef0ff);border-color:var(--brand,#4f46e5)}
.drawer-toggle:focus-visible{outline:2px solid var(--brand,#4f46e5);outline-offset:2px}
.drawer-toggle .dt-lines{display:flex;flex-direction:column;gap:5px;width:20px}
.drawer-toggle .dt-lines span{
  display:block;height:2px;width:100%;border-radius:2px;
  background:var(--ink,#0f172a);transition:background .2s;
}
.drawer-toggle:hover .dt-lines span{background:var(--brand,#4f46e5)}
.drawer-toggle[aria-expanded="true"]{background:var(--brand-soft,#eef0ff);border-color:var(--brand,#4f46e5)}
.drawer-toggle[aria-expanded="true"] .dt-lines span{background:var(--brand,#4f46e5)}

/* Overlay */
.drawer-overlay{
  position:fixed;inset:0;z-index:98;
  background:rgba(10,14,30,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.drawer-overlay.open{opacity:1;pointer-events:auto}

/* Panel */
.drawer-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:99;
  width:min(340px,86vw);height:100dvh;
  display:flex;flex-direction:column;
  background:rgba(13,18,38,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-24px 0 60px rgba(0,0,0,.35);
  transform:translateX(102%);transition:transform .32s cubic-bezier(.32,.72,.24,1);
  color:#e8ebf7;overflow:hidden;
}
.drawer-panel.open{transform:translateX(0)}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.10);flex:0 0 auto;
}
.drawer-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;color:#fff}
.drawer-brand img{width:28px;height:28px}
.drawer-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;padding:0;
}
.drawer-close:hover{background:rgba(255,255,255,.14)}
.drawer-close:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.drawer-close svg{width:18px;height:18px}

.drawer-body{overflow-y:auto;padding:8px 12px 24px;flex:1 1 auto}
.drawer-sec{margin-top:14px}
.drawer-sec-title{
  padding:10px 12px 6px;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#9aa3c0;
}
.drawer-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:12px;color:#e8ebf7;font-weight:600;font-size:.95rem;
  text-decoration:none!important;
}
.drawer-link:hover{background:rgba(255,255,255,.08);color:#fff}
.drawer-link:focus-visible{outline:2px solid #a5b4fc;outline-offset:-2px}
.drawer-link svg{width:16px;height:16px;flex:0 0 auto;color:#a5b4fc;opacity:.85}

.drawer-foot{
  flex:0 0 auto;padding:16px 20px;border-top:1px solid rgba(255,255,255,.10);
  font-size:.8rem;color:#9aa3c0;
}
.drawer-foot a{color:#c7d2fe;font-weight:600}

/* Lock body scroll while open */
body.drawer-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .drawer-panel,.drawer-overlay{transition:none}
}

/* Mobile header fix: at <=760px the logo + CTA + toggle overflow the row and
   the hamburger gets clipped off the right edge (taps miss it). Hide the CTA
   on small screens (it's in the drawer too) and pin the toggle fully on-screen. */
@media (max-width:760px){
  .site-header .header-cta{display:none}
  .site-header .drawer-toggle{margin-left:auto}
}