/* =========================================================
   VentureCommerce – navigation-mobile.css
   - Drawer & backdrop
   - Mobilnav (head, USP)
   - Grundlista & drilldown
   - Rader (kort)
   - Special: Visa allt
========================================================= */


/* ========== Drawer ========== */
.vc-drawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: min(92vw, 420px);
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 1002;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}
.vc-drawer[aria-hidden="false"] { transform: none; }

.vc-drawer--left {
  left: 0; right: auto;
  transform: translateX(-100%);
}
.vc-drawer--left[aria-hidden="false"] { transform: none; }

.vc-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(2px);
  z-index: 1001;
}
.vc-drawer__backdrop[hidden] { display:none; }

.no-scroll { overflow:hidden; }


/* ========== Drawer innehåll ========== */
.vc-drawer__inner.mobile-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  overflow: hidden; /* viktigt: ingen helscroll */
}


/* ========== Header ========== */
.mobile-nav__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.5rem;
}
.mobile-nav__title {
  margin:0;
  font-size:1.1rem;
  font-weight:700;
}
.vc-drawer__close {
  appearance:none;
  background:transparent;
  border:0;
  width:36px; height:36px;
  font-size:1.25rem;
  cursor:pointer;
}


/* ========== USP-knappar i botten ========== */
.mobile-nav__usp {
  position: sticky;
  bottom: 0;
  background:#fff;
  padding-top:.75rem;
  margin-top:auto;
  z-index:5;
  box-shadow:0 -2px 6px rgba(0,0,0,0.05);
  display:flex; flex-direction:column; gap:.5rem;
}
.mobile-nav__usp .usp {
  display:block;
  text-align:center;
  padding:.9rem;
  font-weight:700;
  text-decoration:none;
  border-radius:6px;
}
.usp--highlight { background:#e6007e; color:#fff; }
.usp--secondary { background:#111; color:#fff; }


/* ========== Scrollcontainer för menyer ========== */
.mobile-nav__list-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  padding-bottom: 1rem;
}


/* ========== Drilldown wrapper & paneler ========== */
.dd-wrap {
  position: relative;
  min-height: 60vh;
  overflow: visible;
}

#vc-mobile-nav .dd-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
  display: none;
}
#vc-mobile-nav .dd-panel.is-active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}


/* ========== Menyrader (kortstil) ========== */
#vc-mobile-nav .dd-panel > li {
  margin: 4px 6px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease;
}
#vc-mobile-nav .dd-panel > li:hover {
  background:#f9f9f9;
  border-color:#ddd;
}

/* Rader med barn (.dd-row) */
#vc-mobile-nav .dd-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  position:relative;
  cursor:pointer;
}
#vc-mobile-nav .dd-row__label {
  flex:1 1 auto;
  font-weight:600;
  color:#111;
  font-size:1rem;
  display:block;
  padding:1.1rem 1rem;
}

/* Rader utan barn */
#vc-mobile-nav .dd-panel > li:not(.menu-item-has-children) > a {
  display:block;
  padding:1.1rem 1rem;
  text-decoration:none;
  color:#111;
  font-weight:600;
}
#vc-mobile-nav .dd-panel > li:not(.menu-item-has-children) > a:hover {
  color:#000;
}


/* ========== Pilknappar ========== */
#vc-mobile-nav .dd-row__arrow {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  padding:0;
  display:block;
  cursor:pointer;
}
#vc-mobile-nav .dd-row__arrow::after {
  content:"›";
  font-size:1.4rem;
  line-height:1;
  color:#999;
  transition:color .2s ease;
}
#vc-mobile-nav .dd-row__arrow:hover::after { color:#000; }


/* ========== Back-knapp ========== */
.dd-back {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 0;
  font-weight:700;
  border-bottom:1px solid #eee;
  width:100%;
  text-align:left;
  appearance:none;
  border:0;
  cursor:pointer;
}
.dd-back::before { content:"‹"; font-size:1.1rem; }


/* ========== "Visa allt"-länk minimalistisk ========== */
#vc-mobile-nav .dd-panel > li.visa-allt {
  border:none !important;
  background:none !important;
  box-shadow:none !important;
}
#vc-mobile-nav .dd-panel > li.visa-allt > a {
  display:inline-block;
  padding:1.1rem 1rem;
  color:#111;
  font-weight:700;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-decoration:underline;
  text-decoration-color:#e6007e;
  text-underline-offset:3px;
}
#vc-mobile-nav .dd-panel > li.visa-allt > a:hover {
  color:#e6007e;
  text-decoration-thickness:2px;
}


/* ========== Fokus & adminbar ========== */
.dd-row__label:focus,
.dd-row__arrow:focus,
.dd-back:focus,
.vc-drawer__close:focus {
  outline:2px solid var(--vcom-brand,#008060);
  outline-offset:2px;
}

@media (min-width:783px){
  body.admin-bar .site-header{top:32px;}
}
@media (max-width:782px){
  body.admin-bar .site-header{top:46px;}
}

/* Dölj desktopmenyn på mobil */
@media (max-width:959px){
  .menu--primary{display:none!important;}
}

/* ===========================
   Mobile nav close button
   =========================== */
#vc-mobile-nav .vc-drawer__close {
  margin-left: auto;           /* trycker den till höger i flex-raden */
  appearance: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;            /* gör X:et lite tydligare */
  line-height: 1;
  color: #111;                  /* synlig direkt */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

#vc-mobile-nav .vc-drawer__close:hover {
  color: var(--vcom-danger, #e6007e); /* färgskifte på hover */
}

/* Alla tillbaka-knappar */
.dd-back {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1rem;
  font-weight: 600;
  font-size: .95rem;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-align: left;

  /* Rosa grundnyans */
  background: #fff0f5;       /* lavender blush */
  color: #d6336c;            /* lite mörkare rosa */
  border-bottom: 1px solid #f5c6d6;
  transition: background .2s ease, color .2s ease;
}

.dd-back:hover {
  background: #fce4ec;       /* starkare rosa på hover */
  color: #ad1457;            /* djupare rosa text */
}

/* Root-varianten (Tillbaka till huvudmeny) */
.dd-back--root {
  background: #fff8fa;       /* ännu ljusare rosa */
  color: #c2185b;            /* lite mer neutral rosa */
  border-bottom: 1px solid #f8d7e0;
}

.dd-back--root:hover {
  background: #fde2eb;
  color: #a21348;
}

.dd-row__label:focus,
.dd-row__arrow:focus,
.dd-back:focus,
.vc-drawer__close:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ===========================
   Mobile nav close button (cirkulär)
   =========================== */
#vc-mobile-nav .vc-drawer__close {
  margin-left: auto;            
  appearance: none;
  background: #fff0f5;          /* ljus rosa grund */
  border: 1px solid #f5c6d6;    /* rosaaktig border */
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  line-height: 1;
  color: #d6336c;               /* mörkare rosa kryss */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;           /* cirkel */
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

#vc-mobile-nav .vc-drawer__close:hover {
  background: #fce4ec;          /* hover bakgrund */
  color: #ad1457;               /* mörkare rosa */
  border-color: #f5a3c0;        /* starkare rosa border */
}