/* ==========================================================================
   Mobile Off-Canvas — Info Dropdown Menu Section
   Figma: node 17430:152740 (mobile menu off-canvas)
   ========================================================================== */

/* Section wrapper — gap between main nav and info items */
.offcanvas-info-menu-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Divider — Figma: 1px #e4e5e7, adapts to panel bg */
.offcanvas-info-divider {
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.15;
  border-radius: 2px;
}

/* Menu container — Figma: flex column, gap 10px */
.offcanvas-info-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each top-level item */
.offcanvas-info-item {
  display: flex;
  flex-direction: column;
}

/* Divider between items — Figma: 1px #e4e5e7, adapts to panel bg */
.offcanvas-info-item + .offcanvas-info-item::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.15;
  border-radius: 2px;
  margin-bottom: 10px;
}

/* Toggle button (parent items with children) — Figma: Barlow Medium 16/24 */
.offcanvas-info-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 0;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}

.offcanvas-info-toggle:hover {
  color: var(--theme-palette-color-1);
}

/* Chevron icon — Figma: 24x24 rotates on open */
.offcanvas-info-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: inherit;
  opacity: 0.7;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.offcanvas-info-item.is-open .offcanvas-info-chevron {
  transform: rotate(180deg);
}

/* Direct link (no children) — Figma: Barlow Medium 16/24 */
.offcanvas-info-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}

.offcanvas-info-link:hover {
  color: var(--theme-palette-color-1);
}

/* Submenu (accordion content) — hidden by default */
.offcanvas-info-submenu {
  display: none;
  flex-direction: column;
  padding-left: 16px;
}

.offcanvas-info-item.is-open .offcanvas-info-submenu {
  display: flex;
}

/* Child links — Figma: Barlow Medium 16/24 */
.offcanvas-info-child-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}

.offcanvas-info-child-link:hover {
  color: var(--theme-palette-color-1);
}

/* Only show on mobile/tablet (off-canvas is only rendered there anyway,
   but hide on desktop if Blocksy renders off-canvas content on desktop too) */
@media (min-width: 1025px) {
  [data-device="desktop"] .offcanvas-info-menu-section {
    display: none;
  }
}