/* File: assets/css/components/offcanvas.css */
/* Drawer menu: slides down from under header. Light theme. */

.site-burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  padding:0 16px;
  border-radius:var(--dag-radius-pill);
  border:1px solid var(--dag-border-strong);
  background:var(--dag-surface);
  color:var(--dag-text);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.site-burger:active{transform:scale(.985)}
.site-burger:hover{
  background:var(--dag-surface-2);
  border-color:var(--dag-primary);
  color:var(--dag-primary);
}

.site-burger__label{
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
}

.site-burger__icon{
  position:relative;
  width:20px;
  height:2px;
  background:currentColor;
  border-radius:2px;
}
.site-burger__icon::before,
.site-burger__icon::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .24s var(--ease-out), top .24s var(--ease-out), 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 — dark blue scrim */
.site-offcanvas__backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,27,58,.55);
  opacity:0;
  transition:opacity .22s ease;
}

/* Panel dropdown under header */
.site-offcanvas__panel{
  position:absolute;
  left:0;
  right:0;
  top: var(--dag-header-h, 72px);
  background:var(--dag-surface);
  border-top:1px solid var(--dag-border);
  border-bottom:1px solid var(--dag-border);
  box-shadow:var(--dag-shadow-lg);
  padding:18px 0 22px;

  transform:translateY(-18px);
  opacity:0;
  pointer-events:none;
  transition:
    transform .30s var(--ease-out),
    opacity .22s ease;
  will-change:transform, opacity;

  max-height: min(78vh, 640px);
  overflow:auto;
}

.site-offcanvas__panel::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:var(--dag-primary);
  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);
  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;
  margin-bottom:14px;
}

.site-offcanvas__title{
  font-family:var(--dag-font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--dag-secondary);
}

.site-offcanvas__close{
  width:42px;
  height:42px;
  border-radius:var(--dag-radius-pill);
  border:1px solid var(--dag-border-strong);
  background:var(--dag-surface);
  color:var(--dag-text);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.site-offcanvas__close:hover{
  background:var(--dag-primary);
  color:var(--dag-primary-contrast);
  border-color:var(--dag-primary);
}

.site-offcanvas__close span{
  font-size:24px;
  line-height:1;
  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;
}

.site-offcanvas__menu > li{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .30s var(--ease-out);
}

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

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:14px 16px;
  border-radius:var(--dag-radius-md);
  text-decoration:none;
  color:var(--dag-text);
  border:1px solid var(--dag-border);
  background:var(--dag-surface);
  font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.site-offcanvas__menu a:hover{
  background:var(--dag-surface-2);
  border-color:var(--dag-primary);
  color:var(--dag-primary);
  transform:translateY(-1px);
}

.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background:var(--dag-primary);
  border-color:var(--dag-primary);
  color:var(--dag-primary-contrast);
}

@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(80vh, 680px)}
  .site-offcanvas__menu{grid-template-columns:1fr}
}

@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}
}