/**
 * mega-menu.css — Frigotel Desktop Mega Menu Styles
 *
 * @package Frigotel
 */

/* =========================================================
   DESKTOP MEGA MENU (≥ 1025px)
========================================================= */

@media (min-width: 1025px) {

    /* Ensure the header acts as a positioning context for the absolute mega menu */
    .site-header {
        position: relative !important;
    }

    /* Hide original mobile menu on desktop */
    #primary-navigation {
        display: none !important;
    }

    #desktop-navigation {
        display: block;
        height: 100%;
    }

    /* Reset some nav-list styles for desktop if needed */
    .desktop-mega-menu .navbar-menu {
        display: flex;
        align-items: center;
        gap: var(--space-m, 24px);
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .desktop-mega-menu .navbar-menu > li {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .desktop-mega-menu .nav-main-link {
        display: flex;
        align-items: center;
        padding: 0.25rem 0; /* Ensures the underline is close to text */
        color: var(--color-blu-profondo);
        font-weight: var(--font-weight-semibold, 600);
        text-decoration: none;
        transition: color var(--transition-fast, 0.15s ease);
        cursor: pointer;
    }

    .desktop-mega-menu .nav-main-link:hover {
        color: var(--color-ciano-accento);
    }

    /* The main list item acts as hover trigger */
    .desktop-mega-menu .has-mega-menu {
        position: static; /* Let the absolute panel refer to the closest relative parent (the header) */
    }

    /* -------------------------------------------------------
       MEGA MENU PANEL
       The main container that slides down on hover.
    ------------------------------------------------------- */

    .mega-menu-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background-color: transparent;
        box-shadow: none;
        
        /* Animation: Slide/Fade down transition */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s ease,
                    visibility 0s 0.4s;
        
        /* Sits just below the header visually */
        z-index: calc(var(--z-navbar, 100) - 1); 
        padding-bottom: 60px; /* Extra padding to prevent internal panel shadow clipping */
    }

    /* Full-width horizontal divider that appears on top of the panel */
    .mega-menu-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 1px;
        background-color: var(--color-azzurro-tenue);
        z-index: 10; /* Ensures it stays above the panel background */
    }

    /* Open state triggered via click (JavaScript adding .is-active class) on the parent list item */
    .desktop-mega-menu .has-mega-menu.is-active > .mega-menu-panel {
        max-height: 800px; /* Large arbitrary value to allow content expansion */
        opacity: 1;
        visibility: visible;
        overflow: visible; /* Allows shadows to overflow the container without clipping */
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.4s ease,
                    visibility 0s 0s;
    }

    .mega-menu-inner {
        background-color: #ffffff;
        border-bottom-left-radius: var(--radius-l, 20px);
        border-bottom-right-radius: var(--radius-l, 20px);
        border: 1px solid var(--color-azzurro-tenue);
        border-top: none; /* Top edge is managed by the full-width divider above */
        padding: 0 100px var(--space-xl, 48px);
        max-width: var(--container-max-width, 1200px);
        margin: 0 auto;
        box-shadow: 0 15px 45px rgba(13, 46, 107, 0.12); /* Soft, refined shadow for depth */
    }

    /* -------------------------------------------------------
       PANEL HEADER
    ------------------------------------------------------- */

    .mega-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--header-height); /* Match header height */
        /* No bottom margin: the text must stay centered in the full space
           between the panel top and the divider below. */
    }

    .desktop-mega-menu .mega-menu-title {
        text-transform: uppercase;
        font-size: 20px !important;
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-grigio-medio);
        letter-spacing: var(--letter-spacing-wide, 0.05em);
    }

    .mega-menu-goto {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-blu-primario);
        text-decoration: none;
        transition: color var(--transition-fast, 0.15s);
    }

    .mega-menu-goto:hover {
        color: var(--color-ciano-accento);
    }

    .mega-menu-separator {
        width: 100%;
        height: 1px;
        background-color: var(--color-azzurro-tenue);
        margin-bottom: var(--space-l, 32px);
    }

    /* -------------------------------------------------------
       PANEL GRID
    ------------------------------------------------------- */

    .mega-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-l, 32px);
    }

    .mega-menu-col {
        display: flex;
        flex-direction: column;
    }

    /* Title of the column */
    .col-title {
        display: block;
        font-size: var(--text-body-medium, 16px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-blu-profondo);
        margin-bottom: var(--space-s, 16px);
        text-decoration: none;
    }

    a.col-title:hover {
        color: var(--color-blu-primario);
    }

    .col-desc {
        font-size: var(--text-body-small, 14px);
        color: var(--color-grigio-medio);
        margin-bottom: var(--space-s, 16px);
        line-height: 1.4;
    }

    .mega-menu-col-items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mega-item {
        margin: 0;
    }

    /* Link styling */
    .mega-link {
        display: flex;
        flex-direction: column;
        padding: 8px 12px;
        margin-left: -12px;
        border-radius: var(--radius-s, 6px);
        text-decoration: none;
        transition: background-color var(--transition-fast, 0.15s ease);
    }

    .mega-link:hover {
        background-color: var(--color-sfondo-freddo);
    }

    .mega-link-title {
        color: var(--color-blu-primario);
        font-weight: var(--font-weight-semibold, 600);
        font-size: var(--text-body-medium, 16px);
        margin-bottom: 2px;
    }

    .mega-link-desc {
        color: var(--color-grigio-medio);
        font-size: var(--text-body-small, 14px);
        line-height: 1.3;
    }

    /* Highlighted column style (e.g., for featured services) */
    .mega-menu-col.is-highlight {
        background-color: var(--color-sfondo-freddo);
        padding: var(--space-m, 24px);
        border-radius: var(--radius-m, 12px);
        margin-top: calc(-1 * var(--space-s, 16px)); /* Vertical offset to align with standard columns */
    }

    .mega-menu-col.is-highlight .col-title {
        color: var(--color-blu-primario);
        margin-bottom: var(--space-xs, 8px);
    }

    .mega-menu-col.is-highlight .mega-link:hover {
        background-color: var(--color-bianco);
    }
}