/* ==========================================================================
   Мобильное меню из футерного меню Joomla — оформление
   Работает в паре с mobile-menu.js.

   Версия «матовое стекло»: песочный полупрозрачный бар внизу, светлая
   стеклянная панель, кофейные акценты.

   Все цвета и размеры собраны в :root ниже — правьте только там.
   Высота бара приходит из скрипта (--mmx-bar-h), её менять в JS: BAR_HEIGHT.
   Значение здесь подстраховочное, на случай если скрипт не отработал.
   ========================================================================== */

:root {
    /* --- Геометрия --------------------------------------------------- */
    --mmx-bar-h:        48px;        /* дублирует BAR_HEIGHT из JS        */
    --mmx-max-w:        979px;

    --mmx-row-h:        50px;
    --mmx-row-h-2:      44px;
    --mmx-pad-x:        16px;        /* отступы строк меню                */
    --mmx-bar-pad-x:    20px;        /* отступы содержимого бара          */
    --mmx-radius:       16px;

    --mmx-safe:         env(safe-area-inset-bottom, 0px);

    /* --- Бар: песочное стекло ---------------------------------------- */
    --mmx-bar-bg:       rgba(249, 229, 205, .70);
    --mmx-bar-text:     #75603e;
    --mmx-bar-blur:     blur(12px);
    --mmx-bar-shadow:   0 -4px 20px rgba(168, 208, 240, .15);

    /* --- Панель: белое стекло ---------------------------------------- */
    --mmx-panel-bg:     rgba(255, 255, 255, .45);
    --mmx-panel-blur:   blur(20px);
    --mmx-panel-shadow: 0 -10px 40px rgba(123, 131, 112, .15);

    --mmx-glass-edge:   rgba(255, 255, 255, .60);   /* светлая кромка     */

    /* Подложка быстрых ссылок и фоны подменю — слои того же стекла      */
    --mmx-quick-bg:     rgba(255, 255, 255, .30);
    --mmx-sub-bg:       rgba(255, 255, 255, .25);
    --mmx-sub-bg-2:     rgba(255, 255, 255, .15);

    /* Затемнение под панелью. Держим его слабым: под панелью лежит
       именно оно, и чем оно плотнее, тем меньше видно размытие.        */
    --mmx-overlay-bg:   rgba(74, 66, 56, .18);

    /* --- Линии и акценты --------------------------------------------- */
    --mmx-line:         rgba(74, 66, 56, .08);
    --mmx-accent:       #4a4238;                    /* кофейный          */
    --mmx-accent-bg:    rgb(238, 224, 199);   /* песочный отблеск  */
    --mmx-accent-line:  rgba(74, 66, 56, .20);

    /* --- Текст -------------------------------------------------------- */
    --mmx-text:         #3a3f44;
    --mmx-text-2:       #4a4238;
    --mmx-text-3:       #5c626a;
}


/* ==========================================================================
   1. ВИДИМОСТЬ
   ========================================================================== */

/* Панели и подложке хватает block. Бару — именно flex: правило с
   body.mmx-ready весомее одиночного .mmx-bar ниже, и если написать здесь
   block, он перебьёт flex из секции 2 — заголовок останется строчным,
   а кнопка уедет на следующую строку, за нижнюю кромку бара. */
body.mmx-ready .mmx-panel,
body.mmx-ready .mmx-overlay { display: block; }
body.mmx-ready .mmx-bar     { display: flex; }

/* исходное меню в футере на мобильном не нужно */
body.mmx-ready .mmx-source { display: none !important; }

/* место под фиксированный бар */
body.mmx-ready.mmx-bottom { padding-bottom: calc(var(--mmx-bar-h) + var(--mmx-safe)); }
body.mmx-ready.mmx-top    { padding-top: var(--mmx-bar-h); }


/* ==========================================================================
   2. БАР
   ========================================================================== */
.mmx-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--mmx-bar-h, 48px) + var(--mmx-safe, 0px));
    padding-bottom: var(--mmx-safe, 0px);
    background: var(--mmx-bar-bg, rgba(249, 229, 205, .7));
    -webkit-backdrop-filter: var(--mmx-bar-blur, blur(12px));
    backdrop-filter: var(--mmx-bar-blur, blur(12px));
    color: var(--mmx-bar-text, #75603e);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.mmx-bottom .mmx-bar {
    bottom: 0;
    border-top: 1px solid var(--mmx-glass-edge);
    border-radius: var(--mmx-radius) var(--mmx-radius) 0 0;
    box-shadow: var(--mmx-bar-shadow);
}
body.mmx-top .mmx-bar {
    top: 0;
    border-bottom: 1px solid var(--mmx-glass-edge);
    border-radius: 0 0 var(--mmx-radius) var(--mmx-radius);
    box-shadow: 0 4px 20px rgba(168, 208, 240, .15);
}

.mmx-bar-title {
    flex: 1 1 auto;
    padding: 0 var(--mmx-bar-pad-x);
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: var(--mmx-bar-h);
}

.mmx-bar-btn {
    flex: 0 0 auto;
    width: var(--mmx-bar-h, 48px);
    height: var(--mmx-bar-h, 48px);
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    transition: opacity .2s ease;
}
.mmx-bar-btn:hover { opacity: .7; }
.mmx-bar-btn:focus-visible { outline: 2px solid var(--mmx-bar-text, #75603e); outline-offset: -4px; }

/* Бургер: три полоски, при открытии складывается в крестик.
   Полоски — это background псевдоэлементов, а не color. Запасной цвет
   в var() обязателен: без него неразрешённая переменная делает всё
   свойство невалидным, и фон становится прозрачным. */
.mmx-burger,
.mmx-burger::before,
.mmx-burger::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--mmx-bar-text, #75603e);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.mmx-burger { position: relative; }
.mmx-burger::before,
.mmx-burger::after { content: ""; position: absolute; left: 0; }
.mmx-burger::before { top: -7px; }
.mmx-burger::after  { top: 7px; }

body.mmx-open .mmx-burger { background: transparent; }
body.mmx-open .mmx-burger::before { transform: translateY(7px) rotate(45deg); }
body.mmx-open .mmx-burger::after  { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   3. ЗАТЕМНЕНИЕ
   ========================================================================== */
.mmx-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: var(--mmx-overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
body.mmx-open .mmx-overlay { opacity: 1; visibility: visible; }


/* ==========================================================================
   4. ПАНЕЛЬ
   ========================================================================== */
.mmx-panel {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9998;
    width: 100%;
    max-width: 100vw;
    max-height: calc(100dvh - var(--mmx-bar-h) - var(--mmx-safe));
    padding: 0 0 12px;
    background: var(--mmx-panel-bg, rgba(255, 255, 255, .45));
    -webkit-backdrop-filter: var(--mmx-panel-blur, blur(20px));
    backdrop-filter: var(--mmx-panel-blur, blur(20px));
    color: var(--mmx-text, #3a3f44);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
}

body.mmx-bottom .mmx-panel {
    bottom: calc(var(--mmx-bar-h) + var(--mmx-safe));
    transform: translateY(110%);
    border-top: 1px solid var(--mmx-glass-edge);
    border-radius: var(--mmx-radius) var(--mmx-radius) 0 0;
    box-shadow: var(--mmx-panel-shadow);
}
body.mmx-top .mmx-panel {
    top: var(--mmx-bar-h);
    transform: translateY(-110%);
    border-bottom: 1px solid var(--mmx-glass-edge);
    border-radius: 0 0 var(--mmx-radius) var(--mmx-radius);
    box-shadow: 0 10px 40px rgba(123, 131, 112, .15);
}

body.mmx-open .mmx-panel { transform: translateY(0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
    .mmx-panel, .mmx-overlay,
    .mmx-burger, .mmx-burger::before, .mmx-burger::after { transition: none; }
}

/* Запасной вариант: если браузер не умеет backdrop-filter, стекло
   заменяем плотным фоном, иначе текст ляжет на просвечивающую страницу. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mmx-bar   { background: rgba(249, 229, 205, .97); }
    .mmx-panel { background: rgba(255, 255, 255, .97); }
}

/* сброс внутри панели: футерное меню приходит со своими стилями */
.mmx-panel,
.mmx-panel * { box-sizing: border-box; text-shadow: none; }

.mmx-list,
.mmx-sub {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mmx-item { margin: 0; padding: 0; list-style: none; }
.mmx-item::marker { content: none; }


/* ==========================================================================
   5. СТРОКА ПУНКТА
   ========================================================================== */
.mmx-row {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    border-bottom: 1px solid var(--mmx-line);
}

.mmx-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: var(--mmx-row-h);
    padding: 10px var(--mmx-pad-x);
    color: var(--mmx-text);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: rgba(74, 66, 56, .12);
}
.mmx-parent > .mmx-row > .mmx-link { cursor: pointer; }

.mmx-link:hover,
.mmx-link:focus-visible { background: var(--mmx-accent-bg); color: var(--mmx-accent); }
.mmx-link:focus-visible { outline: 2px solid var(--mmx-accent); outline-offset: -2px; }

/* текущий раздел */
.mmx-current > .mmx-row > .mmx-link {
    background: var(--mmx-accent-bg);
    box-shadow: inset 7px 0 0 var(--mmx-accent);
    color: var(--mmx-accent);
	font-weight: bold;
	font-size: 1.15rem;
}

.mmx-lvl-2.mmx-current > .mmx-row > .mmx-link {
	box-shadow: inset 0px 0 0 var(--mmx-accent);
	font-weight: bold;
	font-size: 1rem;
	}


/* иконки пунктов, если заданы в меню Joomla */
.mmx-link img,
.mmx-link .icon-,
.mmx-link [class^="icon-"] {
    flex: 0 0 auto;
    width: 20px;
    height: auto;
    margin-right: 10px;
    opacity: .85;
}


/* ==========================================================================
   6. КНОПКА РАСКРЫТИЯ
   ========================================================================== */
.mmx-toggle {
    flex: 0 0 56px;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-left: 1px solid var(--mmx-line);
    cursor: pointer;
}

.mmx-toggle::after {
    content: "+";
    display: block;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-size: 1.1rem;
    color: var(--mmx-accent);
    background: rgba(255, 255, 255, .60);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--mmx-accent-line);
    transition: background-color .18s ease, color .18s ease;
}

.mmx-open-item > .mmx-row > .mmx-toggle::after {
    content: "–";
    background: #cdbeb5;
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--mmx-accent);
}

.mmx-toggle:focus-visible { outline: 2px solid var(--mmx-accent); outline-offset: -2px; }


/* ==========================================================================
   7. ПОДМЕНЮ
   ========================================================================== */
.mmx-sub {
    background: var(--mmx-sub-bg);
    border-top: 1px solid var(--mmx-line);
}
.mmx-sub[hidden] { display: none; }

/* 2-й уровень */
.mmx-lvl-2 > .mmx-row > .mmx-link {
    min-height: var(--mmx-row-h-2);
    padding-left: 32px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--mmx-text-2);
}
.mmx-lvl-2 > .mmx-row > .mmx-link::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--mmx-accent-line);
}


 .mmx-current > .mmx-row > a.mmx-link::before {
  background: var(--mmx-text-2) !important  
  
}



/* 3-й уровень */
.mmx-sub .mmx-sub { background: var(--mmx-sub-bg-2); }
.mmx-lvl-3 > .mmx-row > .mmx-link {
    padding-left: 46px;
    font-size: .86rem;
    color: var(--mmx-text-3);
}
.mmx-lvl-3 > .mmx-row > .mmx-link::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--mmx-accent-line);
}

/* 4-й уровень и глубже — на всякий случай */
.mmx-lvl-4 > .mmx-row > .mmx-link { padding-left: 60px; font-size: .84rem; }

/* «Все материалы раздела» */
.mmx-section > .mmx-row > .mmx-link {
    color: var(--mmx-accent);
    font-weight: 600;
    font-size: .85rem;
}
.mmx-section > .mmx-row { border-bottom: 1px solid var(--mmx-accent-line); }
.mmx-section > .mmx-row > .mmx-link::before { background: var(--mmx-accent); }


/* ==========================================================================
   8. ПЛАШКИ БЫСТРЫХ ССЫЛОК
   ========================================================================== */
.mmx-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px var(--mmx-pad-x);
    background: var(--mmx-quick-bg);
    border-bottom: 1px solid var(--mmx-line);
}
.mmx-quick-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .60);
    border: 1px solid rgba(255, 255, 255, .80);
    border-radius: 20px;
    color: var(--mmx-accent);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .03);
    transition: background-color .18s ease;
}

.mmx-quick-full  { grid-column: 1 / -1; }
.mmx-quick-plain { cursor: default; }  /* текст без ссылки */
.mmx-quick-empty { visibility: hidden; }     /* пустая плашка: место держит, сама не видна */

/*Если хотите, чтобы пустая плашка была видимой рамкой без текста — вместо visibility: hidden поставьте min-height: 2.5em;.*/ 

.mmx-quick a:hover { background: rgba(255, 255, 255, .90); }


/* ==========================================================================
   9. МЕЛОЧИ
   Кнопку «наверх» Cassiopeia поднимаем над баром, иначе она под ним.
   ========================================================================== */
@media (max-width: 979px) {
    body.mmx-ready.mmx-bottom .back-to-top-link {
        bottom: calc(var(--mmx-bar-h) + var(--mmx-safe) + 12px);
    }
}