/**
 * AMV Menu - Frontend Styles
 * Стили для мега-меню на фронтенде
 * 
 * @package AMV_Menu
 */

/* === ОСНОВНОЙ КОНТЕЙНЕР === */
.amv-mega-menu {
    display: grid;
    grid-template-columns: repeat(var(--amv-columns, 4), 1fr);
    column-gap: var(--amv-gap-columns, 20px);
    row-gap: var(--amv-gap-blocks, 25px);
    width: 100%;
    box-sizing: border-box;
}

/* === КОЛОНКА === */
.amv-mega-menu .amv-mega-column {
    min-width: 0;
}

/* === ЗАГОЛОВОК КОЛОНКИ (родительская категория) === */
.amv-mega-menu .amv-mega-heading {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--amv-divider-color, #e0e0e0);
}

/* Скрытие разделителя */
.amv-mega-menu.amv-mega-menu-no-divider .amv-mega-heading {
    border-bottom: none;
    padding-bottom: 0;
}

.amv-mega-menu .amv-mega-heading a {
    font-weight: 600;
    font-size: var(--amv-font-size-heading, 15px);
    color: var(--amv-text-color, #1e1e1e);
    text-decoration: none;
    text-transform: var(--amv-text-transform, none);
    transition: color 0.15s ease;
}

.amv-mega-menu .amv-mega-heading a:hover {
    color: var(--amv-hover-color, #2271b1);
}

/* === СПИСОК ПУНКТОВ (дочерние категории) === */
.amv-mega-menu .amv-mega-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.amv-mega-menu .amv-mega-items li {
    margin-bottom: var(--amv-gap-items, 8px);
}

.amv-mega-menu .amv-mega-items li:last-child {
    margin-bottom: 0;
}

/* Растягивание родительской ячейки на несколько колонок верхнего grid.
   PHP уже выставляет inline `grid-column: span N`, но дублируем через
   data-атрибут на случай, если тема перебивает inline-style. */
.amv-mega-menu .amv-mega-column[data-amv-span="2"] { grid-column: span 2; }
.amv-mega-menu .amv-mega-column[data-amv-span="3"] { grid-column: span 3; }
.amv-mega-menu .amv-mega-column[data-amv-span="4"] { grid-column: span 4; }
.amv-mega-menu .amv-mega-column[data-amv-span="5"] { grid-column: span 5; }
.amv-mega-menu .amv-mega-column[data-amv-span="6"] { grid-column: span 6; }

/* Masonry (column-count) не понимает grid-column — там растягиваем на всю ширину */
.amv-mega-menu.amv-mega-menu-masonry .amv-mega-column[data-amv-span] {
    column-span: all;
    -webkit-column-span: all;
}

/* Подколонки: один родитель — несколько списков по лимиту пунктов */
.amv-mega-menu .amv-mega-subcols {
    display: grid;
    grid-template-columns: repeat(var(--amv-subcols, 1), minmax(0, 1fr));
    align-items: start;
    gap: var(--amv-gap-subcols, var(--amv-gap-columns, 20px));
    width: 100%;
    box-sizing: border-box;
    /* не даём column-count (masonry) разорвать подколонки между колонками */
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.amv-mega-menu .amv-mega-subcols .amv-mega-items {
    min-width: 0;
    /* темы часто задают ul { width:100% } — этого нам как раз и надо в grid-ячейке */
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.amv-mega-menu .amv-mega-items a {
    font-size: var(--amv-font-size, 14px);
    color: var(--amv-text-color, #1e1e1e);
    text-decoration: none;
    text-transform: var(--amv-text-transform, none);
    transition: color 0.15s ease;
    display: block;
}

.amv-mega-menu .amv-mega-items a:hover {
    color: var(--amv-hover-color, #2271b1);
}

/* === MASONRY LAYOUT (плотная упаковка) === */
.amv-mega-menu.amv-mega-menu-masonry {
    display: block;
    column-count: var(--amv-columns, 4);
    column-gap: var(--amv-gap-columns, 20px);
}

/* === КНОПКА "ВСЕ КАТЕГОРИИ" для Menu === */
.amv-mega-menu .amv-all-categories-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.amv-mega-menu .amv-all-btn-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 15px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.amv-mega-menu .amv-all-btn-link:hover {
    background: rgba(0, 0, 0, 0.04);
}

.amv-mega-menu .amv-all-btn-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.amv-mega-menu .amv-all-btn-dots .amv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--amv-text-color, #666);
    transition: background-color 0.3s ease;
}

.amv-mega-menu .amv-all-btn-link:hover .amv-all-btn-dots {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.amv-mega-menu .amv-all-btn-link:hover .amv-dot {
    background-color: var(--amv-hover-color, #2271b1);
}

.amv-mega-menu .amv-all-btn-text {
    font-size: var(--amv-font-size, 14px);
    color: var(--amv-text-color, #1e1e1e);
    text-transform: var(--amv-text-transform, none);
    transition: color 0.2s ease;
}

.amv-mega-menu .amv-all-btn-link:hover .amv-all-btn-text {
    color: var(--amv-hover-color, #2271b1);
}

.amv-mega-menu.amv-mega-menu-masonry .amv-mega-column {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--amv-gap-blocks, 25px);
    display: inline-block;
    width: 100%;
}

/* === АДАПТИВНОСТЬ === */
@media screen and (max-width: 1024px) {
    .amv-mega-menu {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .amv-mega-menu.amv-mega-menu-masonry {
        column-count: 3;
    }
}

@media screen and (max-width: 768px) {
    .amv-mega-menu {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .amv-mega-menu.amv-mega-menu-masonry {
        column-count: 2;
    }
}

@media screen and (max-width: 480px) {
    .amv-mega-menu {
        grid-template-columns: 1fr;
    }
    
    .amv-mega-menu.amv-mega-menu-masonry {
        column-count: 1;
    }
}