/* ===========================
   Index-only styles
   Desktop: overlay visible
   Mobile/Tablet (<=1024px): overlay hidden
   =========================== */

/* Overlay position/size (DESKTOP) */
:root{
  --ov-top: 5%;
  --ov-right: 73.4%;
  --ov-width: 25%;
  --ov-max-height: 77%;
  --ov-bg: rgba(235, 105, 0, 0.88);
}

/* Overlay menu (desktop only visuals) */
.overlay-menu{
  position:absolute; top:var(--ov-top); right:var(--ov-right);
  width:var(--ov-width); max-height:var(--ov-max-height);
  overflow:auto;
  background: var(--ov-bg);
  backdrop-filter: blur(4px);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  padding:10px;
}
.overlay-menu h3{ margin:0 0 8px 0; font-size:14px; color:#111827; }
.overlay-list{ display:grid; gap:6px; }
.overlay-link{
  display:block; padding:5px 8px;
  border:1px solid var(--line); border-radius:8px;
  background:#fff; color:#111827;
  font-size:10px; line-height:1.2; white-space:nowrap;
}
#overlay-list{ --overlay-indent: 6ch; }
#overlay-list .overlay-head{ font-weight:550; cursor:default; }
#overlay-list .overlay-child{ padding-left: var(--overlay-indent); }

/* Index-only desktop behavior: keep sidebar column hidden */
.no-left main{ grid-template-columns:1fr !important; }
.no-left aside{ display:none !important; }

/* ======== MOBILE/TABLET (<=1024px) ======== */
/* Hide the overlay entirely on small screens.
   Drawer remains available via mobile-drawer.js. */
@media (max-width:1024px){
  .overlay-menu{ display:none !important; }

  /* Allow the sidebar drawer even when .no-left is set */
  .no-left #apg-sidebar-slot,
  .no-left aside{ display:block !important; }
}