/* File: assets/css/components/offcanvas.css */
/* Drawer menu: slides down from under header + nicer animations */

.site-burger{
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--dag-border);
  background:rgba(255,255,255,.06);
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.site-burger:active{ transform:scale(.985); }
.site-burger:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

.site-burger__label{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--dag-muted);
}

.site-burger__icon{
  position:relative;
  width:18px;
  height:2px;
  background:rgba(229,231,235,.92);
  border-radius:2px;
}
.site-burger__icon::before,
.site-burger__icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:rgba(229,231,235,.92);
  border-radius:2px;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), top .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.site-burger__icon::before{ top:-6px; }
.site-burger__icon::after{ top:6px; }

.site-burger[aria-expanded="true"] .site-burger__icon{ background:transparent; }
.site-burger[aria-expanded="true"] .site-burger__icon::before{ top:0; transform:rotate(45deg); }
.site-burger[aria-expanded="true"] .site-burger__icon::after{ top:0; transform:rotate(-45deg); }

/* Root */
.site-offcanvas{
  position:fixed;
  inset:0;
  z-index:100000;
}
.site-offcanvas[hidden]{ display:none !important; }

/* Backdrop with gradient */
.site-offcanvas__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 380px at 70% 0%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(900px 360px at 15% 0%, rgba(34,197,94,.14), transparent 62%),
    linear-gradient(180deg, rgba(2,6,23,.18), rgba(2,6,23,.66));
  opacity:0;
  transition:opacity .22s ease;
}

/* Panel dropdown under header */
.site-offcanvas__panel{
  position:absolute;
  left:0;
  right:0;
  top: var(--dag-header-h, 74px);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 420px at 15% 0%, rgba(96,165,250,.20), transparent 58%),
    linear-gradient(180deg, rgba(17,26,43,.98), rgba(10,16,28,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  padding:16px 0 18px;

  transform:translateY(-18px) scale(.985);
  opacity:0;
  filter:blur(0px);
  pointer-events:none;
  transition:
    transform .30s cubic-bezier(.16,.9,.18,1),
    opacity .22s ease;
  will-change:transform, opacity;

  max-height: min(72vh, 560px);
  overflow:auto;
}

.site-offcanvas__panel::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(96,165,250,.35), transparent);
  opacity:.9;
  pointer-events:none;
}

/* Open state */
html.is-nav-open,
body.is-nav-open{ overflow:hidden; }

html.is-nav-open .site-offcanvas__backdrop{ opacity:1; }
html.is-nav-open .site-offcanvas__panel{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* Top row */
.site-offcanvas__top{
  width:100%;
  max-width:var(--dag-container);
  padding-inline:var(--dag-gutter);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.site-offcanvas__title{
  font-family:var(--dag-font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.site-offcanvas__close{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  cursor:pointer;
}

.site-offcanvas__close span{
  font-size:26px;
  line-height:1;
  transform:translateY(-1px);
  display:block;
}

/* Menu */
.site-offcanvas__nav{
  width:100%;
  max-width:var(--dag-container);
  padding-inline:var(--dag-gutter);
  margin-inline:auto;
}

.site-offcanvas__menu{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

/* Stagger animation for items */
.site-offcanvas__menu > li{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .30s cubic-bezier(.16,.9,.18,1);
}

html.is-nav-open .site-offcanvas__menu > li{
  opacity:1;
  transform:translateY(0);
}

/* simple stagger delays */
html.is-nav-open .site-offcanvas__menu > li:nth-child(1){transition-delay:40ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(2){transition-delay:70ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(3){transition-delay:100ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(4){transition-delay:130ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(5){transition-delay:160ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(6){transition-delay:190ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(7){transition-delay:220ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(8){transition-delay:250ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(9){transition-delay:280ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(n+10){transition-delay:300ms}

.site-offcanvas__menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:16px;
  text-decoration:none;
  color:var(--dag-text);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.site-offcanvas__menu a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background:rgba(96,165,250,.14);
  border-color:rgba(96,165,250,.22);
}

/* Responsive */
@media (max-width: 980px){
  .site-offcanvas__menu{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .site-offcanvas__panel{ max-height: min(78vh, 640px); }
  .site-offcanvas__menu{ grid-template-columns:1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-offcanvas__backdrop,
  .site-offcanvas__panel,
  .site-burger__icon::before,
  .site-burger__icon::after,
  .site-offcanvas__menu > li,
  .site-offcanvas__menu a{
    transition:none !important;
  }
  .site-offcanvas__menu > li{opacity:1 !important; transform:none !important;}
}