/* MENIU.CSS — bendras ciairdabar.lt meniu · 2026-09-20
   Desktop (≥1024px): juosta su nuorodomis, permatoma virš hero, matinė paslinkus.
   Planšetė / telefonas: logotipas + mygtukas, iš dešinės išslenkantis skydelis.
   Spalvos imamos iš puslapio kintamųjų; jų nesant – numatytosios (violetinė / auksas / kremas).
   Be JavaScript nuorodos matomos įprastame sąraše po logotipu. */

.meniu {
  --m-violet: var(--violet-deep, #7b5ea7);
  --m-violet-2: var(--violet-medium, #9b7bc7);
  --m-violet-pale: var(--violet-pale, #ede7f6);
  --m-violet-ultra: var(--violet-ultra-pale, #f8f5fc);
  --m-gold: var(--gold, #c9a227);
  --m-gold-light: var(--gold-light, #e8d48a);
  --m-cream: var(--cream, #fffbf5);
  --m-text: var(--text-primary, #2a2438);
  --m-muted: var(--text-secondary, #6b6478);
  --m-aukstis: 78px;
  --m-max: 1240px;
  --m-sonai: 28px;
  --m-lenkis: cubic-bezier(0.4, 0, 0.2, 1);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--m-text);
  transition: background 0.4s var(--m-lenkis), box-shadow 0.4s var(--m-lenkis);
}

.meniu-juosta {
  position: relative;
  z-index: 3;
  max-width: var(--m-max);
  margin: 0 auto;
  padding: 0 var(--m-sonai);
  height: var(--m-aukstis);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: height 0.4s var(--m-lenkis);
}

/* Paslinkus – matinė kreminė juosta su plona linija */
.meniu.meniu-slenka {
  --m-aukstis: 66px;
  background: rgba(255, 251, 245, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(123, 94, 167, 0.1), 0 10px 30px rgba(42, 36, 56, 0.06);
}

/* Logotipas ir mygtukas – virš skydelio, kai jis atvertas */
.meniu-logo,
.meniu-mygtukas {
  position: relative;
  z-index: 4;
}

/* ---- Logotipas ---- */
.meniu-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--m-violet);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}

.meniu-logo:hover { color: var(--m-violet-2); }

/* ---- Nuorodos (desktop) ---- */
.meniu-nav { display: flex; align-items: center; }

.meniu-sarasas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.meniu-nuoroda {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--m-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s, background 0.25s, transform 0.25s var(--m-lenkis), box-shadow 0.25s;
}

.meniu-nuoroda small { display: none; }

/* plona auksinė linija, išaugant iš vidurio */
.meniu-nuoroda::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--m-gold), var(--m-violet-2));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--m-lenkis);
}

.meniu-nuoroda:hover,
.meniu-nuoroda:focus-visible { color: var(--m-violet); }

.meniu-nuoroda:hover::after,
.meniu-nuoroda:focus-visible::after { transform: scaleX(1); }

/* 8 nemokamos meditacijos – auksinė dovana */
.meniu-dovana {
  overflow: hidden;
  margin-right: 6px;
  background: linear-gradient(135deg, #f6e29a 0%, #ddb94a 48%, #c9a227 100%);
  color: #4a3570;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.meniu-dovana::after { display: none; }

.meniu-dovana::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.meniu-dovana:hover,
.meniu-dovana:focus-visible {
  color: #4a3570;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(201, 162, 39, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.meniu-dovana:hover::before { left: 140%; }

/* Prisijungti – kontūrinis */
.meniu-prisijungti {
  margin-left: 6px;
  color: var(--m-violet);
  border: 1px solid rgba(123, 94, 167, 0.35);
}

.meniu-prisijungti::after { display: none; }

.meniu-prisijungti:hover,
.meniu-prisijungti:focus-visible {
  background: var(--m-violet-ultra);
  border-color: var(--m-violet);
}

/* ---- Fokusas klaviatūra ---- */
.meniu a:focus-visible,
.meniu button:focus-visible {
  outline: 2px solid var(--m-gold);
  outline-offset: 3px;
}

/* ---- Mygtukas (planšetė / telefonas) ---- */
.meniu-mygtukas {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border: 1px solid rgba(123, 94, 167, 0.25);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--m-violet);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.meniu-mygtukas:hover { background: rgba(255, 255, 255, 0.85); border-color: var(--m-violet-2); }

.meniu-linijos {
  position: relative;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}

.meniu-linijos span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--m-lenkis), opacity 0.25s, top 0.35s var(--m-lenkis);
}

.meniu-linijos span:nth-child(1) { top: 0; }
.meniu-linijos span:nth-child(2) { top: 6px; width: 70%; }
.meniu-linijos span:nth-child(3) { top: 12px; }

.meniu-mygtukas[aria-expanded='true'] .meniu-linijos span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.meniu-mygtukas[aria-expanded='true'] .meniu-linijos span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.meniu-mygtukas[aria-expanded='true'] .meniu-linijos span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---- Skydelis ir fonas (tik su JS, iki 1023px) ---- */
.meniu-fonas {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(42, 36, 56, 0.38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--m-lenkis), visibility 0s 0.4s;
}

@media (max-width: 1023px) {
  html.js .meniu-mygtukas { display: inline-flex; }

  html.js .meniu-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    padding: 108px 36px 44px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(237, 231, 246, 0.9) 0%, rgba(255, 251, 245, 0) 60%),
      var(--m-cream);
    border-left: 1px solid rgba(201, 162, 39, 0.3);
    box-shadow: -24px 0 70px rgba(42, 36, 56, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.45s var(--m-lenkis), visibility 0s 0.45s;
  }

  /* lotosas apačioje – vos matomas */
  html.js .meniu-nav::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 240px;
    height: 240px;
    background: url('../images/pradzia-sesija/ikona-lotosas-be-fono.webp') center/contain no-repeat;
    opacity: 0.16;
    pointer-events: none;
  }

  html.js .meniu-atidarytas .meniu-nav {
    transform: none;
    visibility: visible;
    transition: transform 0.45s var(--m-lenkis), visibility 0s;
  }

  html.js .meniu-atidarytas .meniu-fonas {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s var(--m-lenkis), visibility 0s;
  }

  /* atidarius – juosta permatoma virš skydelio */
  html.js .meniu-atidarytas .meniu.meniu-slenka {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  html.js .meniu-sarasas {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  html.js .meniu-sarasas > li {
    opacity: 0;
    transform: translateX(24px);
  }

  html.js .meniu-atidarytas .meniu-sarasas > li {
    animation: meniuAtsiranda 0.5s var(--m-lenkis) both;
    animation-delay: calc(0.08s + 0.06s * var(--i, 0));
  }

  html.js .meniu-nav .meniu-nuoroda {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 20px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--m-violet-pale);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.12;
    color: var(--m-violet);
    white-space: normal;
    transition: color 0.25s, padding-left 0.3s var(--m-lenkis);
  }

  html.js .meniu-nav .meniu-nuoroda::after { display: none; }

  html.js .meniu-nav .meniu-nuoroda:hover,
  html.js .meniu-nav .meniu-nuoroda:focus-visible {
    color: var(--m-violet-2);
    padding-left: 6px;
  }

  html.js .meniu-nav .meniu-nuoroda small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--m-muted);
  }

  html.js .meniu-nav .meniu-nuoroda.meniu-rasyk small { text-transform: none; letter-spacing: 0.02em; }

  /* dovana – pilno pločio auksinis mygtukas viršuje */
  html.js .meniu-nav .meniu-dovana {
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
    padding: 17px 24px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #4a3570;
    text-align: center;
  }

  html.js .meniu-nav .meniu-dovana:hover,
  html.js .meniu-nav .meniu-dovana:focus-visible {
    color: #4a3570;
    padding-left: 24px;
  }

  html.js .meniu-nav .meniu-prisijungti {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--m-violet-pale);
  }

  html.js .meniu-nav .meniu-prisijungti:hover,
  html.js .meniu-nav .meniu-prisijungti:focus-visible { background: transparent; }

  html.js .meniu-atidarytas { overflow: hidden; }
}

@media (max-width: 480px) {
  .meniu { --m-sonai: 20px; --m-aukstis: 68px; }
  .meniu.meniu-slenka { --m-aukstis: 60px; }
  .meniu-logo { font-size: 1.45rem; }
  .meniu-mygtukas { padding: 9px 14px 9px 12px; }
  html.js .meniu-nav { padding: 96px 28px 40px; }
  html.js .meniu-nav .meniu-nuoroda { font-size: 1.7rem; padding: 18px 0; }
}

@media (max-width: 359px) {
  .meniu-mygtukas .meniu-tekstas { display: none; }
}

@keyframes meniuAtsiranda {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

/* ---- Be JavaScript: paprastas sąrašas po logotipu ---- */
html:not(.js) .meniu {
  position: relative;
  background: var(--m-cream);
  border-bottom: 1px solid var(--m-violet-pale);
}

html:not(.js) .meniu-juosta { flex-wrap: wrap; height: auto; padding-top: 16px; padding-bottom: 16px; }
html:not(.js) .meniu-nav { flex-basis: 100%; }
html:not(.js) .meniu-sarasas { flex-wrap: wrap; gap: 6px; }
html:not(.js) .meniu-nuoroda { white-space: normal; }
html:not(.js) .meniu-mygtukas,
html:not(.js) .meniu-fonas { display: none; }

/* Puslapiams be permatomo hero – vieta po fiksuota juosta */
body.meniu-tarpas { padding-top: 78px; }

@media (prefers-reduced-motion: reduce) {
  .meniu,
  .meniu *,
  .meniu *::before,
  .meniu *::after {
    transition: none !important;
    animation: none !important;
  }
}