/* Менюто на двата сайта: връзките в горната лента, падащите панели при
 * апаратите и менюто на телефон. Всичко за тях е тук и само тук: панелите
 * живееха едновременно в sait.css и в menu.css.
 *
 * Идеята е една и съща навсякъде: избраното личи. Под избраната връзка
 * минава златна линия отляво надясно, а в панела и в менюто на телефон
 * редът става правоъгълник в тъмнокремавия цвят на избраните зони.
 * Страницата, на която сме, остава отбелязана; това го прави navigacia.js
 * с aria-current="page".
 */

/* ---------- Зоната на часовника (iPhone с iOS 26) ----------
   С viewport-fit=cover новият Safari пуска страницата и под часовника и
   Dynamic Island. Лентата горе и отвореното меню стояха там и бургерът и
   затварянето не се натискаха (на iPhone 16; на iPhone 14 с по-стара iOS
   зоната е на браузъра и проблем няма). Всичко слиза с височината на
   зоната; където зона няма, стойността е нула и нищо не се мени. */
[data-nav], .shapka { padding-top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important; }
[data-mmenu] { padding-top: calc(4.6rem + env(safe-area-inset-top, 0px)) !important; }
[data-mmenu] > button[aria-label="Затвори"], [data-mmenu] > .zatvori,
[data-mmenu] > a[aria-label] { top: calc(1.1rem + env(safe-area-inset-top, 0px)) !important; }

/* ---------- Горната лента ---------- */
[data-navpaths] > a[data-navlink], [data-navpaths] > .mega > a,
.patish > a:not([data-dd-btn]), .patish > .mega > a { position: relative; }

[data-navpaths] > a[data-navlink]::after, [data-navpaths] > .mega > a::after,
.patish > a:not([data-dd-btn])::after, .patish > .mega > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s ease;
}
[data-navpaths] > a[data-navlink]:hover, [data-navpaths] > .mega:hover > a,
[data-navpaths] > .mega:focus-within > a, [data-navpaths] > a[aria-current],
[data-navpaths] > .mega:has(a[aria-current]) > a,
.patish > a:not([data-dd-btn]):hover, .patish > .mega:hover > a,
.patish > .mega:focus-within > a, .patish > a[aria-current],
.patish > .mega:has(a[aria-current]) > a { color: #8A6B3F !important; }
[data-navpaths] > a[data-navlink]:hover::after, [data-navpaths] > .mega:hover > a::after,
[data-navpaths] > .mega:focus-within > a::after, [data-navpaths] > a[aria-current]::after,
[data-navpaths] > .mega:has(a[aria-current]) > a::after,
.patish > a:not([data-dd-btn]):hover::after, .patish > .mega:hover > a::after,
.patish > .mega:focus-within > a::after, .patish > a[aria-current]::after,
.patish > .mega:has(a[aria-current]) > a::after { transform: scaleX(1); }

/* Въздух между страниците, а посочената връзка леко пораства, както
   редовете в падащите панели. Преходът е с !important, защото рендерът
   пише инлайн „transition: color“ на всяка връзка. */
/* на по-тесен десктоп разстоянието се свива, за да се събират всички
   страници на един ред до 1301 px, където идва бургерът */
[data-navpaths], .patish { column-gap: clamp(0.95rem, 1.6vw, 1.6rem) !important; }
[data-navpaths] > a[data-navlink], [data-navpaths] > .mega > a,
.patish > a:not([data-dd-btn]), .patish > .mega > a {
  transform-origin: center;
  transition: color 0.35s ease, transform 0.3s ease !important;
}
[data-navpaths] > a[data-navlink]:hover, [data-navpaths] > a[data-navlink]:focus-visible,
[data-navpaths] > .mega:hover > a, [data-navpaths] > .mega:focus-within > a,
.patish > a:not([data-dd-btn]):hover, .patish > a:not([data-dd-btn]):focus-visible,
.patish > .mega:hover > a, .patish > .mega:focus-within > a { transform: scale(1.08); }

/* ---------- Падащите панели при апаратите ----------
   Отварят се само от CSS, защото рендерът пренаписва инлайн стила, а
   класовете остават. */
.mega { position: relative; display: inline-flex; }
.mega-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 19rem; margin-top: 0.55rem; padding: 0.55rem;
  display: grid; gap: 0.15rem;
  background: #FFFFFF; border: 1px solid rgba(184,147,79,0.42); border-radius: 5px;
  box-shadow: 0 22px 48px rgba(160,140,125,0.3);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity 0.25s ease, visibility 0.25s ease, translate 0.25s ease;
  z-index: 96;
}
/* мостче, за да не се затваря панелът между връзката и него */
.mega::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 0.7rem; }
.mega:hover .mega-panel, .mega:focus-within .mega-panel {
  opacity: 1; visibility: visible; translate: 0 0;
}
/* .mega пред .mega-panel, за да надвие „.patish a“ от menu.css */
.mega .mega-panel a {
  position: relative; display: block; padding: 0.6rem 0.85rem 0.8rem; border-radius: 4px;
  color: #262320; white-space: nowrap; transition: background-color 0.3s ease;
}
.mega .mega-panel a::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.35rem; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s ease;
}
.mega-panel b {
  display: block; font-size: 0.94rem; font-weight: 600; color: #262320;
  transform-origin: left center; transition: transform 0.3s ease, color 0.3s ease;
}
.mega-panel span {
  display: block; font-size: 0.78rem; color: rgba(38,35,32,0.62);
  transition: color 0.3s ease;
}
.mega .mega-panel a:hover, .mega .mega-panel a:focus-visible { background-color: #ECDFCC; }
.mega .mega-panel a:hover::after, .mega .mega-panel a:focus-visible::after,
.mega .mega-panel a[aria-current]::after { transform: scaleX(1); }
.mega-panel a:hover b, .mega-panel a:focus-visible b { transform: scale(1.08); color: #3B2C21; }
.mega-panel a:hover span, .mega-panel a:focus-visible span { color: rgba(38,35,32,0.82); }
.mega .mega-panel a[aria-current] { background-color: rgba(236,223,204,0.55); }
.mega-panel a[aria-current] b { color: #8A6B3F; }
@media (max-width: 1100px) { .mega-panel { display: none; } }

/* ---------- Менюто на телефон ----------
   Редовете влизат един след друг при отваряне. Докоснатият ред става
   тъмнокремав правоъгълник, а линията под него се изпълва със злато.
   Страницата, на която сме, е в злато. Стрелки в редовете няма. */
@keyframes dd-menu-vlizane {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* поотделно, без animation-delay: иначе това по-силно правило нулира
   закъсненията на редовете отдолу */
[data-mmenu] > :not(button):not([aria-label]) {
  animation-name: dd-menu-vlizane;
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  animation-fill-mode: both;
}
[data-mmenu] > :nth-child(3) { animation-delay: 0.03s; }
[data-mmenu] > :nth-child(4) { animation-delay: 0.06s; }
[data-mmenu] > :nth-child(5) { animation-delay: 0.09s; }
[data-mmenu] > :nth-child(6) { animation-delay: 0.12s; }
[data-mmenu] > :nth-child(7) { animation-delay: 0.15s; }
[data-mmenu] > :nth-child(8) { animation-delay: 0.18s; }
[data-mmenu] > :nth-child(9) { animation-delay: 0.21s; }
[data-mmenu] > :nth-child(10) { animation-delay: 0.24s; }
[data-mmenu] > :nth-child(11) { animation-delay: 0.27s; }
[data-mmenu] > :nth-child(12) { animation-delay: 0.3s; }
[data-mmenu] > :nth-child(13) { animation-delay: 0.33s; }
[data-mmenu] > :nth-child(14) { animation-delay: 0.36s; }
[data-mmenu] > :nth-child(15) { animation-delay: 0.39s; }
[data-mmenu] > :nth-child(16) { animation-delay: 0.42s; }
[data-mmenu] > :nth-child(n+17) { animation-delay: 0.45s; }

[data-mmenu] > a:not([aria-label]):not([data-dd-btn]) {
  position: relative; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
[data-mmenu] > a:not([aria-label]):not([data-dd-btn])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s ease;
}

/* натиснат ред: без квадрат и без рамка около текста (Атанас, 10 септември
   2026); личи само по златния текст и линията под него */
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):focus { outline: none; }
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):active,
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):focus-visible { color: #8A6B3F !important; }
@media (hover: hover) {
  [data-mmenu] > a:not([aria-label]):not([data-dd-btn]):hover { color: #8A6B3F !important; }
  [data-mmenu] > a:not([aria-label]):not([data-dd-btn]):hover::after { transform: scaleX(1); }
}
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):active::after,
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):focus-visible::after,
[data-mmenu] > a[aria-current]:not([aria-label]):not([data-dd-btn])::after { transform: scaleX(1); }

[data-mmenu] > a[aria-current] { color: #8A6B3F !important; }

/* ---------- Групите в менюто на телефон ----------
   „Процедури за жени“, „Цени и оферти“ и групите апарати са затворени и се
   разгъват при натискане на заглавието им; отворена е една група наведнъж,
   а групата със страницата, на която сме, е отворена от началото. Вдясно
   е кръгче със стрелка надолу, която се обръща нагоре, щом групата се
   отвори (плюсът не пасваше). Поведението е в navigacia.js. */
[data-mmenu] .dd-mm-glava {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; margin: 0; padding: 0.72rem 0;
  border: 0; border-bottom: 1px solid rgba(184,147,79,0.5); border-radius: 0;
  background: none; color: #262320; cursor: pointer; text-align: left;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; font-weight: 400; line-height: 1.25;
  -webkit-tap-highlight-color: transparent; transition: color 0.25s ease;
}
[data-mmenu] .dd-mm-glava:focus { outline: none; }
[data-mmenu] .dd-mm-otvorena > .dd-mm-glava,
[data-mmenu] .dd-mm-grupa:has(a[aria-current]) > .dd-mm-glava { color: #8A6B3F; }
/* същото кръгче със стрелка като при разгъващите се карти на началната */
.dd-mm-znak {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border: 1px solid rgba(184,147,79,0.6); border-radius: 50%;
}
.dd-mm-znak::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-right: 1.5px solid #B8934F; border-bottom: 1.5px solid #B8934F;
  transform: translateY(-2.8px) rotate(45deg); transition: transform 0.35s ease;
}
.dd-mm-otvorena .dd-mm-znak::before { transform: translateY(2.8px) rotate(225deg); }
.dd-mm-vatre { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; }
.dd-mm-vatre > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.32s; }
.dd-mm-otvorena .dd-mm-vatre { grid-template-rows: 1fr; }
.dd-mm-otvorena .dd-mm-vatre > div { visibility: visible; transition-delay: 0s; }
/* редовете в групата са по-дребни и отместени, за да личи чии са */
[data-mmenu] .dd-mm-vatre a {
  position: relative; display: flex !important; align-items: center;
  margin: 0 !important; padding: 0.62rem 0 0.62rem 0.9rem !important;
  border-bottom: 1px solid rgba(184,147,79,0.28) !important;
  font-family: 'Manrope', 'Segoe UI', sans-serif !important; font-size: 1.02rem !important;
  line-height: 1.4 !important; color: #3B2C21 !important;
  -webkit-tap-highlight-color: transparent;
}
[data-mmenu] .dd-mm-vatre a:focus { outline: none; }
[data-mmenu] .dd-mm-vatre a::after {
  content: ""; position: absolute; left: 0.9rem; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease;
}
[data-mmenu] .dd-mm-vatre a[aria-current], [data-mmenu] .dd-mm-vatre a:active { color: #8A6B3F !important; }
[data-mmenu] .dd-mm-vatre a[aria-current]::after, [data-mmenu] .dd-mm-vatre a:active::after { transform: scaleX(1); }
/* група с една страница („Анализ на кожата“) е обикновен голям ред */
[data-mmenu] > a.dd-mm-red {
  display: flex !important; margin: 0 !important; padding: 0.72rem 0 !important;
  border-bottom: 1px solid rgba(184,147,79,0.5) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 1.7rem !important; line-height: 1.25 !important;
}
[data-mmenu] > a.dd-mm-red:not([aria-current]) { color: #262320 !important; }

@media (prefers-reduced-motion: reduce) {
  .dd-mm-vatre, .dd-mm-znak::before { transition: none !important; }
  [data-mmenu] > * { animation: none !important; }
  [data-navpaths] a::after, .patish a::after, .mega-panel a::after,
  [data-mmenu] a::after, .mega-panel b { transition: none !important; }
}