/**
 * WMD Solutions Base Theme - Offcanvas Drawer styles.
 * Component: css/components/drawer.css
 * JS behavior: js/drawer.js
 */

/* ======================================================
   OFFCANVAS BASE
   ====================================================== */

#siteDrawer {
  width: var(--drawer-width) !important;
  background: var(--drawer-bg);
  color: var(--drawer-color);
}

/* ======================================================
   DRAWER HEADER - hide title, keep close button clean
   ====================================================== */

#siteDrawer .offcanvas-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--drawer-border);
  justify-content: flex-end;
  min-height: 0;
}

#siteDrawer .offcanvas-title {
  display: none;
}

#siteDrawer .btn-close {
  opacity: 0.5;
  padding: 0.5rem;
  margin: 0;
}

#siteDrawer .btn-close:hover {
  opacity: 1;
}

/* ======================================================
   DRAWER BODY
   ====================================================== */

#siteDrawer .offcanvas-body {
  padding: 0;
  overflow-y: auto;
}

/* ======================================================
   DRAWER MENU - TOP LEVEL LIST
   ====================================================== */

.drawer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-item {
  border-bottom: 1px solid var(--drawer-border);
}

/* ======================================================
   DRAWER ITEM ROW
   Text link + toggle button side by side
   ====================================================== */

.drawer-item__row {
  display: flex;
  align-items: stretch;
}

/* ======================================================
   DRAWER LINK - text, navigates on click
   ====================================================== */

.drawer-link {
  flex: 1;
  display: block;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--drawer-font-size);
  font-weight: var(--drawer-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--drawer-letter-spacing);
  color: var(--drawer-color);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.drawer-link:hover,
.drawer-link:focus {
  background: var(--drawer-hover-bg);
  color: var(--drawer-hover-color);
}

.drawer-link.active,
.drawer-item.active > .drawer-item__row > .drawer-link {
  background: var(--drawer-active-bg);
  color: var(--drawer-active-color);
}

/* ======================================================
   DRAWER TOGGLE BUTTON - chevron, expands children
   ====================================================== */

.drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-left: 1px solid var(--drawer-border);
  color: var(--drawer-color);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}

.drawer-toggle:hover {
  background: var(--drawer-hover-bg);
  color: var(--drawer-hover-color);
}

.drawer-toggle svg {
  transition: transform 0.2s ease;
}

.drawer-toggle.is-open svg {
  transform: rotate(180deg);
}

/* ======================================================
   DRAWER CHILDREN - accordion panel
   ====================================================== */

.drawer-children {
  background: var(--drawer-child-bg);
}

.drawer-children .drawer-menu {
  padding: 0;
}

.drawer-children .drawer-item {
  border-bottom: 1px solid var(--drawer-border);
}

.drawer-children .drawer-item:last-child {
  border-bottom: none;
}

.drawer-children .drawer-link {
  padding-left: calc(var(--drawer-child-indent) + 1.25rem);
  font-size: calc(var(--drawer-font-size) * 0.95);
}

/* ======================================================
   DRAWER BACKDROP
   ====================================================== */

.offcanvas-backdrop {
  backdrop-filter: blur(2px);
}