/* menu.css - навигация, бургер, dropdown и mega меню */

/* =========================
   DESKTOP NAV
   ========================= */

/* основно меню в хедъра */
.main-nav{
  display:flex;
  gap:36px;
  align-items:center;
  overflow:visible;
}

/* wrapper за item */
.nav-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  overflow:visible;
}

/* линк */
.nav-link{
  text-decoration:none;
  color:var(--text);
  font-size:15px;
  font-weight:600;
  line-height:18px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.nav-link:hover{
  text-decoration:underline;
}

/* езици */
.lang{
  display:flex;
  gap:15px;
  align-items:center;
}

.lang-link{
  text-decoration:none;
  color:var(--text);
  font-size:15px;
  font-weight:600;
  line-height:18px;
  opacity:0.35;
}

.lang-link.is-active{
  opacity:1;
  color:#000;
}

/* =========================
   MOBILE MENU ELEMENTS
   ========================= */

.nav-toggle{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* burger бутон */
.nav-burger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  outline:1px solid var(--outline);
  outline-offset:-1px;
  background:rgba(255,255,255,0.90);
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  z-index:10003;
}

.nav-burger span{
  display:block;
  width:18px;
  height:2px;
  background:#000;
  border-radius:2px;
}

/* overlay */
.nav-overlay{
  display:none;
}

/* lock scroll при отворено меню */
body:has(.nav-toggle:checked){
  overflow:hidden;
  touch-action:none;
}

/* =========================
   BASE DROPDOWNS
   ========================= */

.nav-arrow-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  line-height:0;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:16px;
  height:16px;
}

.nav-arrow{
  display:inline-block;
  width:12px;
  height:12px;
  flex:0 0 auto;
  opacity:0.8;
  transform:translateY(1px);
}

/* базов dropdown */
.nav-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  left:0;

  min-width:220px;
  padding:10px;
  border-radius:16px;

  background:rgba(255,255,255,0.98);
  outline:1px solid var(--outline);
  outline-offset:-1px;

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  display:none;
  z-index:99999;
}

/* отваряне */
.nav-item.has-dropdown.is-open > .nav-dropdown,
.nav-item.is-open > .nav-dropdown{
  display:block;
}

.nav-item.has-dropdown.is-open > .nav-arrow-btn .nav-arrow,
.nav-item.is-open > .nav-arrow-btn .nav-arrow{
  transform:translateY(1px) rotate(180deg);
}

/* линкове в dropdown */
.nav-dd-link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  font-weight:600;
  line-height:18px;
  white-space:nowrap;
}

.nav-dd-link:hover{
  background:var(--mint);
}

.nav-dd-link.is-active{
  font-weight:700;
}

/* =========================
   MEGA BASE (общо за mega)
   ========================= */

/* по подразбиране не е fixed, fixed ще стане само на десктоп */
.nav-dropdown.nav-dropdown--mega{
  min-width:0;

  padding:36px 56px;
  border-radius:40px;

  background:rgba(255,255,255,0.96);
  outline:1px solid var(--outline);
  outline-offset:-1px;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  box-shadow:0 20px 60px rgba(0,0,0,0.08);
  z-index:99999;
}

.nav-mega-grid{
  display:grid;
  grid-template-columns:repeat(var(--mega-cols, 6), minmax(0, 1fr));
  gap:64px;
  align-items:center;
  justify-items:center;
  white-space:nowrap;
}

.nav-mega-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* mega links без padding */
.nav-dropdown.nav-dropdown--mega .nav-dd-link{
  padding:0;
  margin:0;
  border-radius:0;
  background:transparent;
}

.nav-dd-link--logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.nav-dd-logo{
  width:auto;
  max-width:160px;
  height:52px;
  object-fit:contain;
  opacity:0.95;
  transition:opacity .15s ease, transform .15s ease;
  display:block;
}

.nav-dd-link--logo:hover .nav-dd-logo{
  opacity:1;
  transform:translateY(-2px);
}

.nav-dropdown.nav-dropdown--mega .nav-mega-col .nav-dd-link:not(.nav-dd-link--logo){
  padding:10px 12px;
  border-radius:12px;
}

.nav-dropdown.nav-dropdown--mega .nav-mega-col .nav-dd-link:not(.nav-dd-link--logo):hover{
  background:var(--mint);
}

/* =========================
   MEGA PRODUCTS BASE
   ========================= */

.nav-item.mega-products .nav-mega-grid{
  gap:28px;
  align-items:start;
  justify-items:start;
  white-space:normal;
}

.nav-item.mega-products .nav-mega-col{
  align-items:flex-start;
  gap:14px;
}

.nav-item.mega-products .nav-dd-link--logo{
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
}

.nav-item.mega-products .nav-dd-logo{
  width:190px;
  height:70px;
  max-width:none;

  border-radius:18px;
  object-fit:cover;

  outline:1px solid rgba(0,0,0,0.08);
  outline-offset:-1px;

  background:rgba(0,0,0,0.03);
  opacity:1;
  transform:none;
}

.nav-item.mega-products .nav-dd-link--logo:hover .nav-dd-logo{
  transform:translateY(-2px);
}

.nav-item.mega-products .nav-dd-label{
  display:flex;
  align-items:center;
  gap:8px;

  font-size:14px;
  font-weight:700;
  line-height:18px;
  color:var(--text);
  white-space:nowrap;
}

/* =========================
   DESKTOP (>= 769px)
   ========================= */

@media (min-width:769px){

  /* mega fixed и центриран само на десктоп */
  .nav-dropdown.nav-dropdown--mega{
    position:fixed;
    left:50%;
    top:90px;
    transform:translateX(-50%);
    width:min(1080px, calc(100vw - 96px));
  }

  /* override за mega-products - 5 колони като стария products dropdown */
  .nav-item.mega-products .nav-dropdown.nav-dropdown--mega{
    width:min(1180px, calc(100vw - 96px)) !important;
    padding:22px 24px !important;
    border-radius:22px !important;
  }

  .nav-item.mega-products .nav-mega-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:18px !important;
    align-items:start !important;
    justify-items:start !important;
    white-space:normal !important;
  }

  .nav-item.mega-products .nav-mega-col{
    width:100% !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  .nav-item.mega-products .nav-dd-link--logo{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }

  .nav-item.mega-products .nav-dd-logo{
    width:100% !important;
    height:120px !important;
    max-width:none !important;

    border-radius:18px !important;
    object-fit:cover !important;

    outline:1px solid rgba(0,0,0,0.08) !important;
    outline-offset:-1px !important;

    background:#f5f3ee !important;
    opacity:1 !important;
    transform:none !important;
  }

  .nav-item.mega-products .nav-dd-link--logo:hover .nav-dd-logo{
    transform:scale(1.03) !important;
  }

  .nav-item.mega-products .nav-dd-label{
    font-size:15px !important;
    font-weight:600 !important;
    line-height:18px !important;
    padding:0 2px !important;
    gap:10px !important;
  }
}

/* =========================
   MOBILE (<= 768px)
   ========================= */

@media (max-width:768px){

  /* показваме burger бутона */
  .nav-burger{
    display:inline-flex;
  }

  /* мобилен панел на менюто */
  .main-nav{
    display:block;
    position:fixed;
    top:16px;
    right:16px;

    width:320px;
    max-width:calc(100vw - 32px);

    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);

    overflow:auto;
    -webkit-overflow-scrolling:touch;

    padding:10px;
    border-radius:18px;
    outline:1px solid var(--outline);
    outline-offset:-1px;
    background:rgba(255,255,255,0.98);

    transform:translateX(120%);
    transition:transform .22s ease;
    z-index:10002;
  }

  .main-nav .nav-item{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:8px;
  }

  .main-nav .nav-link{
    display:block;
    padding:12px 12px;
    border-radius:12px;
    font-size:16px;
    line-height:20px;
    flex:1 1 auto;
  }

  .main-nav .nav-link:hover{
    text-decoration:none;
    background:var(--mint);
  }

  /* overlay зад менюто */
  .nav-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:10001;
  }

  /* отворено меню */
  .nav-toggle:checked ~ .main-nav{
    transform:translateX(0);
  }

  .nav-toggle:checked ~ .nav-overlay{
    opacity:1;
    pointer-events:auto;
  }

  /* dropdown-ите стават статични вътре в панела */
  .nav-dropdown{
    position:static;
    top:auto;
    left:auto;
    transform:none;
    min-width:auto;
    padding:12px;
    border-radius:18px;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    display:none;
    width:100%;
    margin-top:8px;
  }

  .nav-item.has-dropdown.is-open > .nav-dropdown,
  .nav-item.is-open > .nav-dropdown{
    display:block;
  }

  .nav-dropdown.nav-dropdown--mega{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    padding:12px;
    border-radius:18px;
    box-shadow:none;
  }

  .nav-mega-grid{
    grid-template-columns:1fr;
    gap:12px;
    justify-items:start;
    white-space:normal;
  }

  .nav-mega-col{
    align-items:flex-start;
  }

  .nav-dd-link{
    display:block;
    width:100%;
  }

  .nav-dd-link--logo{
    width:100%;
    justify-content:flex-start;
  }

  /* на мобилно не показваме картинките в mega подменюто */
  .nav-dd-logo{
    display:none;
  }

  .nav-item.mega-products .nav-dd-logo{
    display:none;
  }

  .nav-item.mega-products .nav-dd-label{
    white-space:normal;
  }
}