/* Drawer header — only what Bootstrap has no class for. Everything else is
   utilities on the markup (see components/layouts/drawer-menu.js). */

/* Above the offcanvas backdrop, so the logo and hamburger stay lit. */
.dm-header { z-index: 1045; }

/* The backdrop stays mounted so it can fade out with the panel; without .show
   it is transparent, so it must also stop intercepting clicks. */
.dm-backdrop { transition: opacity 0.3s ease-in-out; }
.dm-backdrop:not(.show) { pointer-events: none; }

/* Bootstrap's .offcanvas-end hardcodes `width: 400px`, which beats a plain
   `.dm-panel { width }` on specificity — hence the doubled class. 45% of the
   viewport matches the reference; on phones it takes the full screen. */
.dm-panel.dm-panel { width: 45%; min-width: 420px; background-color: #eceff1; }

/* Bootstrap's .offcanvas flips `visibility: hidden` the instant .show is
   removed, which cuts the slide-out dead — it only animates on the way in.
   Delaying ONLY the visibility change (the transform still runs immediately)
   lets the panel slide back out before it goes hidden, so its links still
   leave the tab order afterwards. Note this sets no `visibility` of its own:
   doing so would outrank Bootstrap's `.offcanvas.show { visibility: visible }`
   and leave the panel invisible even when open. */
.dm-panel.dm-panel { transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s; }
.dm-panel.dm-panel.show { transition: transform 0.3s ease-in-out, visibility 0s; }
@media (max-width: 767.98px) {
  .dm-panel.dm-panel { width: 100%; min-width: 0; }
}

/* No utility spans this range — fs-1 is a flat 2.5rem and doesn't scale down.
   2.25rem keeps every label on ONE line at 45% width; 3rem wrapped them. */
.dm-item { font-size: clamp(1.125rem, 1.5vw, 1.5rem); font-weight: 500; line-height: 1.4; }

/* Red links — the drawer's top row AND the three always-visible header links.
   NavLink drops its .link-dark for these (that utility sets color !important,
   so no rule here could win against it). */
.dm-top-link,
.dm-top-link:hover { color: var(--bs-danger, #dc3545); }

/* Hover: brand red plus a slight scale. transform-origin is pinned left so the
   item grows rightwards from its own edge instead of drifting sideways — the
   list is left-aligned, so scaling from the centre would misalign every row.
   inline-block is required: transform does nothing on an inline element. */
.dm-item,
.dm-sub-link {
  display: inline-block;
  transform-origin: left center;
  /* font-weight is not animatable, so it is not listed — it snaps on hover
     while the color and scale ease in. */
  transition: color .15s ease, transform .15s ease;
}
.dm-item:hover,
.dm-sub-link:hover {
  color: var(--bs-danger, #dc3545) !important;
  transform: scale(1.04);
  font-weight: 700;
}

/* Sub-items are deliberately much smaller than their parent — the size gap is
   what makes the expanded group read as one unit rather than more top-level
   items. Tight rows so a long list (ER Locations) stays scannable. Darker than
   Bootstrap's .link-secondary grey, which washed out at this size. */
.dm-sub-link {
  font-size: 1rem;
  padding: 0.15rem 0;
  line-height: 1.5;
  color: #212529;
}
.dm-sub-link:hover { color: var(--bs-danger, #dc3545) !important; }

@media (prefers-reduced-motion: reduce) {
  .dm-item,
  .dm-sub-link { transition: color .15s ease; }
  .dm-item:hover,
  .dm-sub-link:hover { transform: none; }
  /* The panel appears and disappears without sliding; visibility still waits
     for nothing, so it is hidden immediately on close. */
  .dm-panel.dm-panel,
  .dm-panel.dm-panel.show,
  .dm-backdrop { transition: none; }
}

/* Expand toggle: a chevron pointing RIGHT when closed, rotating down when open
   — the file-tree convention, which reads as "there is more inside this".
   Deliberately not the reference site's circled down-arrow: no ring, and a 90°
   turn is a clearer state change than a 180° flip of an already-down arrow. */
.dm-chevron {
  transition: transform 0.25s ease, opacity 0.15s ease;
  font-size: 1.75rem;
  opacity: 0.7;
}
.dm-chevron.is-open { transform: rotate(90deg); opacity: 1; }
.dm-chevron:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dm-chevron { transition: none; }
}