/**
 * VMRankUp Mobile Drawer Menu — Styles
 * Scoped under .vmr-mobile-nav to avoid touching any desktop styles.
 * WhiteLabelFox-inspired slide-in panel with smooth accordion animation.
 *
 * Color palette reuses Tailwind tokens via CSS custom properties:
 *   --vmr-primary : #D97706  (amber-600 / gold)
 *   --vmr-primary-hover : #B45309  (amber-700)
 *   --vmr-accent-bg    : #FFFBEB  (amber-50)
 *   --vmr-border       : #E2E8F0  (slate-200)
 *   --vmr-text         : #1E293B  (slate-800)
 *   --vmr-muted        : #64748B  (slate-500)
 */

/* =========================================================
   CSS CUSTOM PROPERTIES (token bridge for non-Tailwind rules)
   ========================================================= */
#mobile-menu {
  --vmr-primary:       #D97706;
  --vmr-primary-hover: #B45309;
  --vmr-accent-bg:     #FFFBEB;
  --vmr-border:        #E2E8F0;
  --vmr-text:          #1E293B;
  --vmr-muted:         #64748B;
  --vmr-bg-hover:      #F8FAFC; /* slate-50 */
  --vmr-radius:        0.75rem;  /* 12px */
  --vmr-transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   VIEWPORT HEIGHT ROBUSTNESS (dvh + fallback)
   ========================================================= */
#mobile-menu {
  /* h-dvh doesn't exist in Tailwind CDN by default; set via CSS */
  height: 100dvh;
}

@supports not (height: 100dvh) {
  #mobile-menu {
    height: 100vh;
  }
}

/* =========================================================
   NAV CONTAINER
   ========================================================= */
.vmr-mobile-nav {
  padding: 0.75rem 1.25rem 0.5rem;
}

.vmr-mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* 2px breathing room between items */
}

/* =========================================================
   TOP-LEVEL PLAIN NAV LINKS  (.vmr-menu-item > .vmr-nav-link)
   ========================================================= */
.vmr-menu-item {
  border-radius: var(--vmr-radius);
  overflow: hidden;
}

.vmr-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.875rem;
  border-radius: var(--vmr-radius);
  font-size: 0.9375rem;   /* 15px */
  font-weight: 600;
  color: var(--vmr-text);
  text-decoration: none;
  transition: background-color var(--vmr-transition),
              color var(--vmr-transition);
  width: 100%;
  box-sizing: border-box;
}

.vmr-nav-link:hover {
  background-color: var(--vmr-bg-hover);
  color: var(--vmr-primary);
}

.vmr-nav-link--active {
  background-color: var(--vmr-accent-bg);
  color: var(--vmr-primary);
}

/* Active indicator dot on the right */
.vmr-nav-link--active::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--vmr-primary);
  flex-shrink: 0;
}

/* =========================================================
   ACCORDION ITEM (parent with submenu)
   ========================================================= */
.vmr-accordion-item {
  border-radius: var(--vmr-radius);
  overflow: hidden;
}

.vmr-accordion-item.vmr-accordion--active {
  background-color: color-mix(in srgb, var(--vmr-accent-bg) 50%, transparent);
}

/* Row that holds the parent link + chevron toggle */
.vmr-accordion-trigger {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: var(--vmr-radius);
  transition: background-color var(--vmr-transition);
}

.vmr-accordion-trigger:hover {
  background-color: var(--vmr-bg-hover);
}

/* The parent page link inside the accordion trigger */
.vmr-nav-link--parent {
  flex: 1;
  border-radius: var(--vmr-radius) 0 0 var(--vmr-radius);
  justify-content: flex-start;
  padding-right: 0.5rem;
}

/* Remove the hover background from the parent link so the
   whole row background is controlled by vmr-accordion-trigger */
.vmr-accordion-trigger:hover .vmr-nav-link--parent {
  background-color: transparent;
}

.vmr-nav-link--parent:hover {
  background-color: transparent;
  color: var(--vmr-primary);
}

/* Chevron toggle button */
.vmr-accordion-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;   /* 40px */
  height: 2.5rem;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 0 var(--vmr-radius) var(--vmr-radius) 0;
  color: var(--vmr-muted);
  cursor: pointer;
  transition: color var(--vmr-transition),
              background-color var(--vmr-transition);
}

.vmr-accordion-chevron-btn:hover {
  color: var(--vmr-primary);
  background-color: rgba(217, 119, 6, 0.08);
}

.vmr-accordion-chevron-btn:focus-visible {
  outline: 2px solid var(--vmr-primary);
  outline-offset: -2px;
}

/* Chevron icon rotation via JS inline transform — no extra CSS needed */
.vmr-chevron-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* =========================================================
   SUBMENU LIST  (.vmr-submenu)
   Collapsed by default; JS toggles max-height + padding
   ========================================================= */
.vmr-submenu {
  list-style: none;
  margin: 0 0 0 0.875rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  max-height: 0;
  overflow: hidden;
  border-left: 2px solid rgba(217, 119, 6, 0.4);
  border-radius: 0 0 0 0.25rem;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   SUBMENU ITEMS
   ========================================================= */
.vmr-submenu-item {
  border-radius: 0.5rem;
}

.vmr-submenu-link {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;  /* 13px */
  font-weight: 500;
  color: #475569;  /* slate-600 */
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color var(--vmr-transition),
              color var(--vmr-transition);
}

.vmr-submenu-link:hover {
  background-color: #ffffff;
  color: var(--vmr-primary);
}

.vmr-submenu-item--active .vmr-submenu-link {
  color: var(--vmr-primary);
  font-weight: 600;
}

/* Small decorative bullet dot */
.vmr-submenu-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(217, 119, 6, 0.45);
  flex-shrink: 0;
  transition: background-color var(--vmr-transition);
}

.vmr-submenu-link:hover .vmr-submenu-dot,
.vmr-submenu-item--active .vmr-submenu-dot {
  background-color: var(--vmr-primary);
}

.vmr-submenu-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small right-chevron arrow */
.vmr-submenu-arrow {
  color: #CBD5E1; /* slate-300 */
  flex-shrink: 0;
  transition: color var(--vmr-transition),
              transform var(--vmr-transition);
}

.vmr-submenu-link:hover .vmr-submenu-arrow,
.vmr-submenu-item--active .vmr-submenu-arrow {
  color: var(--vmr-primary);
  transform: translateX(2px);
}

/* =========================================================
   KEYBOARD / FOCUS STYLES
   ========================================================= */
.vmr-nav-link:focus-visible,
.vmr-submenu-link:focus-visible {
  outline: 2px solid var(--vmr-primary);
  outline-offset: 2px;
}

/* =========================================================
   DRAWER HEADER & FOOTER (additional overrides)
   ========================================================= */
.vmr-drawer-header {
  /* Ensure it never shrinks on small phones */
  min-height: 64px;
}

.vmr-close-btn:focus-visible {
  outline: 2px solid var(--vmr-primary);
  outline-offset: 2px;
}

.vmr-cta-btn {
  /* Prevent text wrapping on narrow phones */
  white-space: nowrap;
  min-width: 0;
}

/* =========================================================
   RESPONSIVE: Very small phones (320px)
   ========================================================= */
@media (max-width: 360px) {
  .vmr-mobile-nav {
    padding: 0.625rem 1rem 0.375rem;
  }

  .vmr-nav-link {
    font-size: 0.875rem;
    padding: 0.6875rem 0.75rem;
  }

  .vmr-submenu-link {
    font-size: 0.75rem;
    padding: 0.4375rem 0.625rem;
  }
}

/* =========================================================
   PREVENT HORIZONTAL SCROLL  (belt-and-suspenders)
   ========================================================= */
#mobile-menu * {
  max-width: 100%;
  box-sizing: border-box;
}