/* =========================================================
   ICT / FPT NAVBAR

   Purpose:
   - Provide ICT / FPT navigation dropdowns.
   - Dynamically display equipment and spare parts.
   - Keep dropdown styling isolated from the global navbar.

   Dependencies:
   - Global navbar.css
   - ICT / FPT data modules
========================================================= */


/* =========================================================
   Dropdown Navigation Item
========================================================= */

.ict-fpt-nav-dropdown-item {

    position:
        relative;

}


/* =========================================================
   Dropdown Container
========================================================= */

.ict-fpt-nav-dropdown {

    position:
        absolute;

    top:
        calc(100% + 14px);

    left:
        50%;

    min-width:
        250px;

    max-width:
        340px;

    max-height:
        420px;

    padding:
        10px;

    box-sizing:
        border-box;

    transform:
        translate3d(-50%, -8px, 0);

    border:
        1px solid
        var(--card-border);

    border-radius:
        16px;

    background:
        rgba(9, 11, 20, .92);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .22);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    overflow-y:
        auto;

    z-index:
        3000;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);

}


/* =========================================================
   Hover Bridge

   Keeps the dropdown open while moving from the
   navbar item into the dropdown.
========================================================= */

.ict-fpt-nav-dropdown-item::after {

    content:
        "";

    position:
        absolute;

    top:
        100%;

    left:
        0;

    width:
        100%;

    height:
        14px;

    background:
        transparent;

    pointer-events:
        auto;

}


/* =========================================================
   Dropdown Visibility
========================================================= */

.ict-fpt-nav-dropdown-item:hover
.ict-fpt-nav-dropdown,

.ict-fpt-nav-dropdown-item:focus-within
.ict-fpt-nav-dropdown {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate3d(-50%, 0, 0);

}


/* =========================================================
   Force Dropdown Closed
========================================================= */

.ict-fpt-nav-dropdown-item.is-closing
.ict-fpt-nav-dropdown {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translate3d(-50%, -8px, 0);

}


/* =========================================================
   Light Theme
========================================================= */

body.light
.ict-fpt-nav-dropdown {

    background:
        rgba(245, 247, 255, .94);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .12);

}


/* =========================================================
   Dropdown List
========================================================= */

.ict-fpt-nav-dropdown-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


/* =========================================================
   Dropdown Link
========================================================= */

.ict-fpt-nav-dropdown-link {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    padding:
        9px 12px;

    border-radius:
        10px;

    color:
        var(--text-soft);

    text-decoration:
        none;

    line-height:
        1.3;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);

}


/* =========================================================
   Primary Label
========================================================= */

.ict-fpt-nav-dropdown-primary {

    font-size:
        .82rem;

    font-weight:
        600;

    white-space:
        nowrap;

}


/* =========================================================
   Secondary Label
========================================================= */

.ict-fpt-nav-dropdown-secondary {

    font-size:
        .68rem;

    font-weight:
        500;

    color:
        var(--text-soft);

    opacity:
        .65;

    white-space:
        nowrap;

}


/* =========================================================
   Hover State
========================================================= */

.ict-fpt-nav-dropdown-link:hover {

    color:
        var(--text);

    background:
        rgba(255, 255, 255, .08);

    transform:
        translateX(3px);

}


body.light
.ict-fpt-nav-dropdown-link:hover {

    background:
        rgba(0, 0, 0, .06);

}


/* =========================================================
   Scrollbar
========================================================= */

.ict-fpt-nav-dropdown::-webkit-scrollbar {

    width:
        5px;

}


.ict-fpt-nav-dropdown::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .16);

}


body.light
.ict-fpt-nav-dropdown::-webkit-scrollbar-thumb {

    background:
        rgba(0, 0, 0, .16);

}

/* =========================================================
ICT / FPT Anchor Scroll Offset
========================================================= */

#ict-fpt-equipment,
#ict-fpt-spare-parts,
.ict-fpt-equipment-brand,
.ict-fpt-spareparts-category {

    scroll-margin-top:
        100px;

}


/* =========================================================
   Mobile

   The global navbar hides #navLinks below 768px,
   so the dropdown does not need a separate mobile
   presentation.
========================================================= */

@media (max-width: 768px) {

    .ict-fpt-nav-dropdown {

        display:
            none;

    }

}