/* ============================================================
 * mv-topnav-drawer.css
 * Metavoz Design System v2 — Top Navigation Hamburger + Drawer
 *
 * Responsive off-canvas drawer for the main topnav.
 * Pattern: hamburger button (mobile only, <=767px) triggers a slide-in
 * aside with all nav tabs rendered as a vertical list.
 *
 * Breakpoints (literal values — var() not allowed in @media):
 *   <=767px (mobile)  : hamburger visible, horizontal nav hidden, drawer active
 *   >=768px (tablet+) : hamburger hidden, horizontal nav fully visible, drawer/backdrop hidden
 *
 * Load order: AFTER metavoz-theme.css + metavoz-theme-v2.css
 * Introduced: Ola 1, W1-02 / W1-03 — 2026-04-19
 * Updated: 2026-04-20 — mobile-only hamburger (was <=1279px, now <=767px)
 * JS companion: mv-topnav-drawer.js
 * ============================================================ */

/* ── Default (>=768px desktop/tablet): hamburger hidden, tabs full ── */
/* !important ensures this wins over any upstream button reset or flex-child rule */
.mv-topnav__hamburger {
  display: none !important;
}

/* ── >=768px: drawer and backdrop always hidden on tablet/desktop ── */
@media (min-width: 768px) {
  .mv-topnav-drawer,
  .mv-topnav-drawer-backdrop {
    display: none !important;
  }
}

/* ── <=767px (mobile only): hamburger visible, horizontal nav hidden, drawer active ── */
@media (max-width: 767.98px) {
  .mv-topnav__hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;      /* WCAG 2.5.5 min touch target */
    height: 44px;
    padding: 0;
    color: var(--mv-topnav-text, var(--mv-text-muted));
    background: transparent;
    border: none;
    border-radius: var(--mv-radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out);
  }

  .mv-topnav__hamburger:hover {
    color: var(--mv-topnav-text-hover, var(--mv-text));
  }

  .mv-topnav__hamburger:focus-visible {
    outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, var(--mv-primary-500));
    outline-offset: var(--mv-focus-ring-offset, 2px);
  }

  /* Hide full tab row on mobile — drawer takes over */
  .mv-topnav__nav {
    display: none;
  }

  /* Hide language picker on mobile (it's inside drawer) */
  .mv-topnav__actions .mv-lang-picker,
  .mv-topnav__actions #mv-lang-picker {
    display: none;
  }

  .mv-topnav__tab--secondary {
    display: none;
  }

  /* Re-enable drawer and backdrop on mobile */
  .mv-topnav-drawer,
  .mv-topnav-drawer-backdrop {
    display: unset;
  }
}

/* Ensure .mv-topnav__more is hidden on desktop by default */
.mv-topnav__more {
  display: none;
}

/* ── Drawer (off-canvas, left side) ── */
.mv-topnav-drawer {
  position: fixed;
  inset: 0 auto 0 0;         /* top:0 right:auto bottom:0 left:0 */
  width: min(280px, 85vw);
  transform: translateX(-100%);
  transition:
    transform var(--mv-dur-base, 200ms) var(--mv-ease-out, ease-out),
    visibility 0ms var(--mv-dur-base, 200ms); /* delay visibility until slide finishes */
  z-index: 1050;
  background: var(--mv-surface, #ffffff);
  box-shadow: var(--mv-elev-5);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--mv-space-4);
  visibility: hidden;
  /* Keep drawer above topnav mega menus (z-index 100) */
}

.mv-topnav-drawer[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--mv-dur-base, 200ms) var(--mv-ease-out, ease-out),
    visibility 0ms 0ms;
}

/* Drawer header */
.mv-topnav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border-subtle);
  margin-bottom: var(--mv-space-4);
}

.mv-topnav-drawer__brand {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-weight: var(--mv-fw-semibold);
  font-size: var(--mv-text-md);
  color: var(--mv-text);
  text-decoration: none;
}

.mv-topnav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  cursor: pointer;
  transition: color var(--mv-dur-fast) var(--mv-ease-out),
              background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-topnav-drawer__close:hover {
  color: var(--mv-text);
  background: var(--mv-surface-sunken);
}

.mv-topnav-drawer__close:focus-visible {
  outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, var(--mv-primary-500));
  outline-offset: var(--mv-focus-ring-offset, 2px);
}

/* Drawer nav list */
.mv-topnav-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Drawer nav item */
.mv-topnav-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  min-height: 48px;            /* WCAG 2.5.5 touch target */
  padding: var(--mv-space-2) var(--mv-space-3);
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  text-decoration: none;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  cursor: pointer;
  transition:
    color var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out),
    background var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out);
  /* Remove default button styles if used as <button> */
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.mv-topnav-drawer__item:hover {
  color: var(--mv-text);
  background: var(--mv-surface-sunken, var(--mv-neutral-100));
}

.mv-topnav-drawer__item[aria-current="page"],
.mv-topnav-drawer__item--active {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
  font-weight: var(--mv-fw-semibold);
}

.mv-topnav-drawer__item:focus-visible {
  outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, var(--mv-primary-500));
  outline-offset: -2px;
  border-radius: var(--mv-radius-md);
}

.mv-topnav-drawer__item-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
}

/* Section title inside drawer */
.mv-topnav-drawer__section-title {
  padding: var(--mv-space-4) var(--mv-space-3) var(--mv-space-2);
  font-size: 11px;
  font-weight: var(--mv-fw-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mv-text-muted);
}

/* Divider inside drawer */
.mv-topnav-drawer__divider {
  height: 1px;
  background: var(--mv-border-subtle);
  margin: var(--mv-space-3) 0;
}

/* Logout / user row at bottom of drawer */
.mv-topnav-drawer__footer {
  margin-top: var(--mv-space-6);
  padding-top: var(--mv-space-4);
  border-top: 1px solid var(--mv-border-subtle);
}

.mv-topnav-drawer__user {
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  padding: 0 var(--mv-space-3) var(--mv-space-2);
}

/* ── Lang picker inside drawer ── */
.mv-topnav-drawer__section {
  margin-bottom: var(--mv-space-3);
}

/* Position the lang picker inline — override any absolute/relative positioning
   that works in the topnav right-actions context. */
.mv-topnav-drawer__lang-wrap {
  padding: 0 var(--mv-space-3);
  display: flex;
  align-items: center;
}

/* Ensure the lang picker form/select stretches to fit the drawer column */
.mv-topnav-drawer__lang-wrap .mv-lang-picker,
.mv-topnav-drawer__lang-wrap #mv-lang-picker,
.mv-topnav-drawer__lang-wrap form,
.mv-topnav-drawer__lang-wrap select {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Backdrop ── */
.mv-topnav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mv-dur-base, 200ms) var(--mv-ease-out, ease-out);
  z-index: 1040;   /* below drawer (1050) */
}

.mv-topnav-drawer-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .mv-topnav-drawer,
  .mv-topnav-drawer-backdrop {
    transition: none;
  }
}