/* v2026-10-16 — Aplikacije za študente (VIS, Moodle, Flow, e-pošta, Microsoft 365, IT podpora).
   Markup: inc/aplikacije.php + header.php. JS: assets/js/ams-aplikacije.js.

   Namizje (≥1280 px, HEADER_BP): gumb z mrežo pik v 5. koloni glave, ob kliku temna plošča
   kot na almamater.si (tam modra, tu --ams-dark-900 kot noga strani — ikone so bele).
   Drawer (<1280 px): zadnji <li> glavnega menija, mreža 3 × 2. V glavi na telefonu ni prostora:
   pri 360 px ostane med logotipom in preklopnikom SL|EN 14 px (izmerjeno 2026-10-16).

   Ploščice v drawerju so <a> znotraj .ams-header__menu, zato nanje sicer delujejo pravila menija
   (.ams-header__menu a: velike črke, nowrap, podčrtaj ::after, barva ob hoverju; ≤768 px še
   min-height in padding). Spodaj so zato vsa pravila za drawer s specifičnostjo ≥ (0,3,1). */

/* ---------- Gumb v glavi ---------- */
.ams-header__apps {
    display: none;
    position: relative;
}
@media (min-width: 1280px) {
    /* flex: ovoj je natanko 44 px visok (brez vrstične višine pod gumbom) — na tem sloni top plošče */
    .ams-header__apps { display: flex; }
}
.ams-header__apps-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ams-gray-900);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
/* Hello Elementor (reset.css) daje `button:focus, button:hover` polno ozadje in belo besedilo
   (0,1,1) — zato so vsa stanja tu izrecna, tudi :focus brez :focus-visible (po kliku z miško). */
.ams-header__apps-toggle:hover,
.ams-header__apps-toggle:focus {
    background: rgba(139, 0, 48, 0.08);
    color: var(--ams-burgundy-500);
}
/* Odprta plošča: poln bordo kot odprt hamburger na telefonu. */
.ams-header__apps-toggle[aria-expanded="true"],
.ams-header__apps-toggle[aria-expanded="true"]:hover,
.ams-header__apps-toggle[aria-expanded="true"]:focus {
    background: var(--ams-burgundy-500);
    color: #fff;
}
.ams-header__apps-toggle:focus-visible {
    outline: 2px solid var(--ams-burgundy-500);
    outline-offset: 2px;
}

/* ---------- Plošča (namizje) ---------- */
.ams-aplikacije--plosca {
    position: absolute;
    /* Plošča se začne na spodnjem robu glave. Gumb (44 px) je navpično sredinski v glavi višine
       --ams-header-h (80 px, ob drsenju 64 px — ams-motion.css), pod njo je še 1 px obrobe. */
    top: calc(100% + (var(--ams-header-h, 80px) - 44px) / 2 + 1px);
    right: 0;
    z-index: 95;
    width: 320px;
    background: var(--ams-dark-900);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(16, 33, 51, 0.28), 0 4px 10px rgba(16, 33, 51, 0.16);
    animation: ams-aplikacije-odpri .16s ease-out;
}
.ams-aplikacije--plosca[hidden] { display: none; }
@keyframes ams-aplikacije-odpri {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ams-aplikacije--plosca { animation: none; }
}
.ams-aplikacije--plosca .ams-aplikacije__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 24px 8px 16px;
    color: #fff;
    font-size: 1rem;
    font-weight: var(--ams-fw-semibold);
    line-height: 1.3;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transition: background .15s ease;
}
.ams-aplikacije--plosca .ams-aplikacije__item:first-child { border-top: 0; }
.ams-aplikacije--plosca .ams-aplikacije__item:hover,
.ams-aplikacije--plosca .ams-aplikacije__item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.ams-aplikacije--plosca .ams-aplikacije__item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}
.ams-aplikacije--plosca .ams-aplikacije__ikona {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: background .15s ease;
}
.ams-aplikacije--plosca .ams-aplikacije__item:hover .ams-aplikacije__ikona,
.ams-aplikacije--plosca .ams-aplikacije__item:focus-visible .ams-aplikacije__ikona {
    background: rgba(255, 255, 255, 0.24);
}
.ams-aplikacije__ikona img,
.ams-aplikacije__ikona svg {
    display: block;
    width: 20px;
    height: 20px;
    max-width: none;
}

/* ---------- Blok v drawerju ---------- */
.ams-nav-aplikacije { display: none; }
@media (max-width: 1279.98px) {
    .ams-header__menu > li.ams-nav-aplikacije {
        display: block;
        padding: var(--ams-space-6) var(--ams-container-padding) var(--ams-space-4);
        border-bottom: 0;
    }
    .ams-header__menu .ams-nav-aplikacije .ams-nav-aplikacije__naslov {
        margin: 0 0 var(--ams-space-3);
        font-size: var(--ams-fs-xs);
        font-weight: var(--ams-fw-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ams-gray-700);
    }
    .ams-header__menu .ams-nav-aplikacije .ams-aplikacije--drawer {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ams-space-2);
    }
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--ams-space-2);
        min-height: 0;
        padding: var(--ams-space-3) var(--ams-space-1);
        border-radius: 8px;
        color: var(--ams-gray-900);
        font-size: var(--ams-fs-xs);
        font-weight: var(--ams-fw-bold);
        letter-spacing: 0.04em;
        line-height: 1.25;
        text-align: center;
        text-transform: uppercase;
        white-space: normal;
        overflow-wrap: anywhere;
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
    }
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item::after,
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item::before { display: none; }
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item:hover,
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item:focus-visible {
        background: var(--ams-cream);
        color: var(--ams-burgundy-500);
    }
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item:focus-visible {
        outline: 2px solid var(--ams-burgundy-500);
        outline-offset: 0;
    }
    .ams-header__menu .ams-nav-aplikacije .ams-aplikacije__ikona {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--ams-dark-900);
        transition: background .15s ease;
    }
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item:hover .ams-aplikacije__ikona,
    .ams-header__menu .ams-nav-aplikacije a.ams-aplikacije__item:focus-visible .ams-aplikacije__ikona {
        background: var(--ams-burgundy-500);
    }
}