/*
 * XMED MENU V66 - override sigur pentru meniul existent.
 * Varianta compacta pentru desktop; regulile mobile sunt neschimbate.
 * Se incarca DUPA custom.css si DUPA orice CSS vechi al meniului.
 */

:root{
    --xmed-menu-green:#54ad5a;
    --xmed-menu-green-dark:#237a32;
    --xmed-menu-green-soft:#eef8f0;
    --xmed-menu-ink:#142640;
    --xmed-menu-muted:#66758b;
    --xmed-menu-line:#e5ebef;
}

.xmed-root-icon{
    display:inline-flex;
    width:18px;
    height:18px;
    margin-right:7px;
    vertical-align:-3px;
    color:currentColor;
}

.xmed-root-icon svg,
.xmed-mobile-utility-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Aplicatiile noi sunt activate doar la breakpoint-ul lor. */
.xmed-mobile-menu-app{
    display:none;
}

@media (min-width:768px){
    .xmed-header-menu-inner{
        position:relative;
    }

    /* Submeniul Joomla ramane sursa de date, nu interfata vizibila. */
    .xmed-header-menu .mod-menu > li.xmed-catalog-root > ul{
        display:none !important;
    }

    .xmed-desktop-catalog{
        --mega-width:min(1380px, calc(100vw - 64px));
        display:grid;
        grid-template-columns:320px 400px minmax(320px, 1fr);
        position:absolute;
        top:calc(100% - 1px);
        left:50%;
        width:var(--mega-width);
        height:min(480px, calc(100vh - 190px));
        min-height:340px;
        overflow:hidden;
        background:#fff;
        border-top:2px solid var(--xmed-menu-green);
        border-radius:0 0 26px 26px;
        box-shadow:0 26px 55px rgba(15,31,50,.18);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translate(-50%, 8px);
        transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
        z-index:10020;
    }

    .xmed-desktop-catalog::before{
        content:"";
        position:absolute;
        top:-14px;
        left:0;
        right:0;
        height:16px;
        background:transparent;
    }

    .xmed-desktop-catalog.is-open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translate(-50%, 0);
    }

    .xmed-mega-column{
        min-width:0;
        height:100%;
        padding:14px 12px 16px;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-width:thin;
        scrollbar-color:#b8d9bd transparent;
        border-left:1px solid var(--xmed-menu-line);
        background:#fff;
    }

    .xmed-mega-column:first-child{
        border-left:0;
    }

    .xmed-mega-kicker{
        margin:3px 9px 11px;
        color:var(--xmed-menu-muted);
        font-size:12px;
        line-height:1.2;
        font-weight:850;
        letter-spacing:.055em;
        text-transform:uppercase;
    }

    .xmed-mega-heading{
        min-height:34px;
        margin:0 8px 6px;
        color:#24334a;
        font-size:20px;
        line-height:1.25;
        font-weight:850;
    }

    .xmed-mega-heading:empty{
        display:none;
    }

    .xmed-mega-heading a{
        display:inline-flex;
        align-items:center;
        gap:9px;
        color:inherit;
        text-decoration:none;
    }

    .xmed-mega-heading a span{
        color:var(--xmed-menu-green);
        font-size:15px;
    }

    .xmed-mega-list{
        display:flex;
        flex-direction:column;
        gap:2px;
    }

    .xmed-mega-row{
        display:grid;
        grid-template-columns:minmax(0, 1fr) 22px;
        align-items:center;
        min-height:48px;
        padding:0 11px 0 13px;
        color:#2a3950;
        border-radius:14px;
        transition:color .16s ease, background-color .16s ease, box-shadow .16s ease;
    }

    .xmed-mega-row a{
        display:flex;
        align-items:center;
        min-width:0;
        min-height:48px;
        color:inherit !important;
        font-size:16px;
        line-height:1.25;
        font-weight:650;
        text-decoration:none !important;
    }

    .xmed-mega-row.is-active,
    .xmed-mega-row:hover,
    .xmed-mega-row:focus-within{
        color:var(--xmed-menu-green-dark);
        background:var(--xmed-menu-green-soft);
    }

    .xmed-mega-primary .xmed-mega-row.is-active{
        box-shadow:inset 4px 0 0 var(--xmed-menu-green);
    }

    .xmed-mega-arrow{
        justify-self:end;
        color:var(--xmed-menu-green);
        font-size:19px;
        line-height:1;
    }

    .xmed-header-menu .mod-menu > li.xmed-catalog-root > a::after{
        content:"⌄";
        display:inline-block;
        margin-left:8px;
        font-size:14px;
        line-height:1;
        transform:translateY(-2px);
    }

    .xmed-header-menu .mod-menu > li.xmed-catalog-root.xmed-desktop-menu-open > a,
    .xmed-header-menu .mod-menu > li.xmed-catalog-root > a:hover,
    .xmed-header-menu .mod-menu > li.xmed-catalog-root > a:focus{
        color:var(--xmed-menu-green-dark) !important;
        background:var(--xmed-menu-green-soft) !important;
    }
}

@media (max-width:767px){
    html.xmed-menu-open,
    body.xmed-menu-open{
        overflow:hidden !important;
    }

    /* Panoul incepe exact sub cautare; valoarea este calculata de JS. */
    .xmed-header-menu{
        position:fixed !important;
        top:var(--xmed-mobile-menu-top, 132px) !important;
        bottom:0 !important;
        left:0 !important;
        width:min(410px, calc(100vw - 26px)) !important;
        height:auto !important;
        max-height:none !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        background:#fff !important;
        border-top:1px solid #dfe6ea !important;
        box-shadow:18px 0 48px rgba(15,23,42,.22) !important;
        z-index:10040 !important;
    }

    .xmed-menu-overlay{
        top:var(--xmed-mobile-menu-top, 132px) !important;
    }

    .xmed-header-menu-inner{
        position:relative;
        width:100% !important;
        height:100% !important;
        padding:0 !important;
        overflow:hidden !important;
        background:#fff;
    }

    /* Arborele vechi este ascuns numai vizual si numai pe mobil. */
    .xmed-header-menu .mod-menu{
        display:none !important;
    }

    .xmed-desktop-catalog{
        display:none !important;
    }

    .xmed-mobile-menu-app{
        display:block;
        width:100%;
        height:100%;
        padding:14px 14px 28px;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-width:thin;
        scrollbar-color:#bddcc1 transparent;
        color:var(--xmed-menu-ink);
        background:#fff;
        box-sizing:border-box;
    }

    .xmed-mobile-close{
        display:grid !important;
        place-items:center;
        position:absolute !important;
        top:12px !important;
        right:14px !important;
        width:44px !important;
        height:44px !important;
        margin:0 !important;
        padding:0 !important;
        color:#29415a !important;
        background:#f3f7f5 !important;
        border:0 !important;
        border-radius:14px !important;
        box-shadow:none !important;
        z-index:6;
    }

    .xmed-mobile-app-header{
        display:flex;
        align-items:center;
        min-height:52px;
        padding:0 54px 8px 0;
        border-bottom:1px solid var(--xmed-menu-line);
    }

    .xmed-mobile-app-main-title{
        color:#26364e;
        font-size:21px;
        line-height:1.2;
        font-weight:850;
    }

    .xmed-mobile-app-back{
        display:inline-flex;
        align-items:center;
        gap:7px;
        min-height:38px;
        max-width:100%;
        padding:8px 11px;
        color:var(--xmed-menu-green-dark);
        font:inherit;
        font-size:14px;
        line-height:1.2;
        font-weight:800;
        text-align:left;
        background:var(--xmed-menu-green-soft);
        border:0;
        border-radius:11px;
        cursor:pointer;
    }

    .xmed-mobile-app-context{
        display:flex;
        flex-direction:column;
        gap:2px;
        padding:14px 5px 10px;
    }

    .xmed-mobile-app-context span{
        color:var(--xmed-menu-muted);
        font-size:11px;
        line-height:1.2;
        font-weight:850;
        letter-spacing:.06em;
        text-transform:uppercase;
    }

    .xmed-mobile-app-context strong{
        color:#24344c;
        font-size:20px;
        line-height:1.25;
        font-weight:850;
    }

    .xmed-mobile-shortcuts{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        margin:12px 0 20px;
    }

    .xmed-mobile-utility{
        display:grid;
        grid-template-columns:42px minmax(0, 1fr) 24px;
        align-items:center;
        min-height:62px;
        padding:7px 12px 7px 8px;
        color:#24344c !important;
        background:#fff;
        border:1px solid var(--xmed-menu-line);
        border-radius:16px;
        text-decoration:none !important;
        box-shadow:0 5px 14px rgba(31,55,70,.045);
    }

    .xmed-mobile-utility.is-catalog{
        color:#fff !important;
        background:linear-gradient(135deg, #4ba752, #66b96a);
        border-color:transparent;
        box-shadow:0 9px 20px rgba(65,151,73,.20);
    }

    .xmed-mobile-utility-icon{
        display:grid;
        place-items:center;
        width:34px;
        height:34px;
        color:var(--xmed-menu-green-dark);
        background:var(--xmed-menu-green-soft);
        border-radius:11px;
    }

    .xmed-mobile-utility.is-catalog .xmed-mobile-utility-icon{
        color:#fff;
        background:rgba(255,255,255,.16);
    }

    .xmed-mobile-utility-icon svg{
        width:19px;
        height:19px;
    }

    .xmed-mobile-utility > span:nth-child(2){
        font-size:16px;
        line-height:1.25;
        font-weight:800;
    }

    .xmed-mobile-utility-go{
        justify-self:end;
        font-size:18px;
    }

    .xmed-mobile-section-label{
        margin:0 5px 8px;
        color:var(--xmed-menu-muted);
        font-size:11px;
        line-height:1.2;
        font-weight:850;
        letter-spacing:.065em;
        text-transform:uppercase;
    }

    .xmed-mobile-category-list{
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .xmed-mobile-category-list.is-level{
        margin-top:6px;
    }

    .xmed-mobile-category-row{
        display:grid;
        grid-template-columns:minmax(0, 1fr) 48px;
        align-items:center;
        min-height:55px;
        border-bottom:1px solid #eef2f4;
        border-radius:10px;
        transition:background-color .15s ease;
    }

    .xmed-mobile-category-row:hover,
    .xmed-mobile-category-row:focus-within{
        background:#f6faf7;
    }

    .xmed-mobile-category-link{
        display:flex;
        align-items:center;
        min-width:0;
        min-height:55px;
        padding:10px 8px;
        color:#26374f !important;
        font-size:15px;
        line-height:1.3;
        font-weight:700;
        text-decoration:none !important;
    }

    .xmed-mobile-drill{
        display:grid;
        place-items:center;
        justify-self:end;
        width:40px;
        height:40px;
        margin-right:3px;
        padding:0;
        color:var(--xmed-menu-green-dark);
        background:var(--xmed-menu-green-soft);
        border:0;
        border-radius:50%;
        cursor:pointer;
    }

    .xmed-mobile-app-arrow{
        font-size:25px;
        line-height:1;
        transform:translateY(-1px);
    }

    .xmed-mobile-view-category{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        min-height:68px;
        margin:4px 0 12px;
        padding:11px 14px;
        color:var(--xmed-menu-green-dark) !important;
        background:var(--xmed-menu-green-soft);
        border:1px solid #d8eadb;
        border-radius:16px;
        text-decoration:none !important;
    }

    .xmed-mobile-view-category span:first-child{
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .xmed-mobile-view-category strong{
        font-size:15px;
        line-height:1.25;
        font-weight:850;
    }

    .xmed-mobile-view-category small{
        color:#5c7762;
        font-size:12px;
        line-height:1.25;
        font-weight:600;
    }

    .xmed-mobile-secondary-links{
        margin-top:18px;
        padding-top:14px;
        border-top:1px solid var(--xmed-menu-line);
    }

    .xmed-mobile-secondary-links .xmed-mobile-utility{
        box-shadow:none;
    }

    /* Iconurile din bara desktop nu se dubleaza in aplicatia mobila. */
    .xmed-root-icon{
        display:none !important;
    }
}

@media (prefers-reduced-motion:reduce){
    .xmed-desktop-catalog,
    .xmed-mega-row,
    .xmed-mobile-category-row{
        transition:none !important;
    }
}
