/* =========================
   HEADER — Mamma Vesuvia
   Desktop topbar + Mobile left drawer
   ========================= */

:root{
  --mv-bg: #ffffff;
  --mv-text: #1f1e1e;
  --mv-accent: #0d4f4f;

  --mv-border: rgba(0,0,0,.08);
  --mv-shadow: 0 6px 22px rgba(0,0,0,.06);

  --mv-max: 1200px;
  --mv-pad-x: 16px;
  --mv-pad-y: 16px;

  --mv-logo-d: 78px;
  --mv-logo-m: 58px;

  --mv-radius: 14px;
}

/* =========================
   WRAPPER
   ========================= */
.mv-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--mv-bg);
  border-bottom: 1px solid var(--mv-border);
  box-shadow: var(--mv-shadow);
}

/* =========================
   TOPBAR CONTAINER
   ========================= */
.mv-nav{
  max-width: var(--mv-max);
  margin: 0 auto;
  padding: var(--mv-pad-y) var(--mv-pad-x);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  position: relative;
}

/* =========================
   LOGO
   ========================= */
.mv-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mv-logo img{
  display: block;
  width: auto;
  height: auto;
}

/* anti-duplicato (hard) */
.mv-logo-desktop{
  max-height: var(--mv-logo-d);
  display: block !important;
}

.mv-logo-mobile{
  max-height: var(--mv-logo-m);
  display: none !important;
}

/* =========================
   DESKTOP MENU
   ========================= */
.mv-desktop-menu{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.mv-desktop-menu a{
  color: var(--mv-text);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.92rem;
  letter-spacing: .15px;

  padding: 10px 10px;
  border-radius: 999px;

  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.mv-desktop-menu a:hover{
  color: var(--mv-accent);
  background: rgba(13,79,79,.08);
  transform: translateY(-1px);
}

/* =========================
   BURGER
   ========================= */
.mv-burger{
  display: none; /* solo mobile */
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;

  border: 1px solid var(--mv-border);
  background: #fff;
  cursor: pointer;

  transition: background 160ms ease, transform 160ms ease;
}

.mv-burger:hover{ background: rgba(0,0,0,.03); }
.mv-burger:active{ transform: scale(.98); }

.mv-burger span{
  display: block;
  height: 3px;
  width: 100%;
  background: var(--mv-text);
  border-radius: 3px;
  transition: transform 220ms ease, opacity 220ms ease;
}

.mv-burger span + span{ margin-top: 5px; }

/* =========================
   OVERLAY
   ========================= */
.mv-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 2050;
}

/* =========================
   DRAWER
   ========================= */
.mv-drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(360px, 90vw);

  background: rgba(255,255,255,.985);
  border-right: 1px solid var(--mv-border);
  box-shadow: 18px 0 50px rgba(0,0,0,.18);

  transform: translateX(-105%);
  transition: transform 240ms ease;

  z-index: 2100;
  display: flex;
  flex-direction: column;
}

.mv-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.mv-drawer-title{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.05rem;
}

.mv-close{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--mv-border);
  background: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  transition: background 160ms ease, transform 160ms ease;
}

.mv-close:hover{ background: rgba(0,0,0,.03); }
.mv-close:active{ transform: scale(.98); }

.mv-drawer-links{
  padding: 12px 0;
  overflow: auto;
}

/* Link “modern” con separatore + accent a sinistra */
.mv-drawer-links a{
  display: block;
  padding: 14px 16px;
  margin: 0;

  text-decoration: none;
  color: var(--mv-text);
  font-weight: 750;

  border-left: 3px solid var(--mv-accent);
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: transparent;

  transition: background 160ms ease;
}

.mv-drawer-links a:hover{
  background: rgba(13,79,79,.06);
}

.mv-drawer-foot{
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mv-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(13,79,79,.22);
  background: rgba(13,79,79,.09);
  color: var(--mv-accent);
  font-weight: 800;
}

/* =========================
   OPEN STATE (set by JS)
   ========================= */
body.mv-nav-open .mv-overlay{
  opacity: 1;
  pointer-events: auto;
}

body.mv-nav-open .mv-drawer{
  transform: translateX(0);
}

/* Burger -> X */
body.mv-nav-open .mv-burger span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
body.mv-nav-open .mv-burger span:nth-child(2){
  opacity: 0;
}
body.mv-nav-open .mv-burger span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px){
  .mv-burger{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  .mv-desktop-menu{ display: none; }

  /* Logo centrato perfetto (indipendente dal burger) */
  .mv-logo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 1;
  }

  /* swap loghi (hard) */
  .mv-logo-desktop{ display: none !important; }
  .mv-logo-mobile{ display: block !important; }
}

/* =========================
   ACCESSIBILITY
   ========================= */
@media (prefers-reduced-motion: reduce){
  .mv-overlay, .mv-drawer, .mv-desktop-menu a, .mv-burger span{
    transition: none !important;
  }
}