/*
================================================

Space Vanta Theme 1.0

Module:
Footer Navigation

Version:
FOOTER-NAV-VISUAL-003

Purpose:
Footer Navigation
3.0 Brand Visual
Spatial Editorial Navigation

================================================
*/


/*
---------------------------------
Navigation Block
---------------------------------
*/

.sv-footer__navigation-block {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    box-sizing: border-box;

    overflow-x: clip;
}


/*
---------------------------------
Navigation Frame
---------------------------------
*/

.sv-footer__navigation {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(150, 160, 175, .13);

    overflow: clip;
}


/*
---------------------------------
Summary
---------------------------------
*/

.sv-footer__navigation-summary {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 70px;

    padding:
        0 2px;

    margin: 0;

    box-sizing: border-box;

    cursor: pointer;

    list-style: none;

    user-select: none;

    overflow: hidden;
}


.sv-footer__navigation-summary::-webkit-details-marker {
    display: none;
}


.sv-footer__navigation-summary::marker {
    display: none;
}


/*
---------------------------------
Summary Reflection Line
---------------------------------
*/

.sv-footer__navigation-summary::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(150, 185, 225, .42),
            rgba(150, 185, 225, 0));

    opacity: 0;

    transition:
        width .34s ease,
        opacity .28s ease;
}


.sv-footer__navigation-summary:hover::after {
    width: 86px;

    opacity: .9;
}


/*
---------------------------------
Title
---------------------------------
*/

.sv-footer__navigation-title {
    position: relative;

    display: flex;

    align-items: center;

    flex: 1 1 auto;

    width: auto;
    max-width: 100%;
    min-width: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .22em;
    line-height: 1.3;

    color: inherit;

    opacity: .62;

    text-transform: uppercase;

    overflow-wrap: anywhere;

    transition:
        opacity .28s ease,
        letter-spacing .28s ease,
        transform .28s ease;
}


/*
---------------------------------
Title Accent
---------------------------------
*/

.sv-footer__navigation-title::before {
    content: "";

    display: block;

    flex: 0 0 auto;

    width: 22px;
    height: 1px;

    margin-right: 12px;

    background:
        linear-gradient(90deg,
            rgba(145, 180, 220, .56),
            rgba(145, 180, 220, 0));

    opacity: .56;

    transition:
        width .28s ease,
        opacity .28s ease;
}


/*
---------------------------------
Indicator
---------------------------------
*/

.sv-footer__navigation-indicator {
    position: relative;

    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    min-width: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border:
        1px solid rgba(150, 160, 175, .18);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 300;

    line-height: 1;

    color: var(--sv-muted);

    opacity: .48;

    transition:
        transform .34s ease,
        border-color .28s ease,
        opacity .28s ease,
        box-shadow .28s ease;
}


/*
---------------------------------
Hover
---------------------------------
*/

.sv-footer__navigation-summary:hover .sv-footer__navigation-title {
    opacity: .96;

    letter-spacing: .24em;

    transform:
        translateX(2px);
}


.sv-footer__navigation-summary:hover .sv-footer__navigation-title::before {
    width: 30px;

    opacity: .86;
}


.sv-footer__navigation-summary:hover .sv-footer__navigation-indicator {
    border-color:
        rgba(150, 185, 225, .36);

    opacity: .88;

    box-shadow:
        0 0 16px rgba(130, 170, 220, .08);
}


/*
---------------------------------
Open State
---------------------------------
*/

.sv-footer__navigation[open] .sv-footer__navigation-title {
    opacity: .96;

    letter-spacing: .24em;
}


.sv-footer__navigation[open] .sv-footer__navigation-title::before {
    width: 30px;

    opacity: .86;
}


.sv-footer__navigation[open] .sv-footer__navigation-indicator {
    transform:
        rotate(45deg);

    border-color:
        rgba(150, 185, 225, .34);

    opacity: .9;
}


/*
---------------------------------
Navigation Content
---------------------------------
*/

.sv-footer__nav {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    box-sizing: border-box;

    padding:
        4px 0 42px;

    overflow: clip;
}


/*
---------------------------------
Level 1 Layout
---------------------------------
*/

.sv-footer__nav>ul {
    display: grid;

    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));

    column-gap: 56px;
    row-gap: 42px;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    list-style: none;
}


/*
---------------------------------
Level 1 Item
---------------------------------
*/

.sv-footer__nav>ul>li {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding:
        0 0 0 18px;

    box-sizing: border-box;

    overflow-wrap: anywhere;
}


/*
---------------------------------
Level 1 Structural Marker
---------------------------------
*/

.sv-footer__nav>ul>li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;

    width: 5px;
    height: 5px;

    border:
        1px solid rgba(145, 180, 220, .34);

    border-radius: 50%;

    opacity: .58;

    box-sizing: border-box;
}


/*
---------------------------------
Level 1 Link
---------------------------------
*/

.sv-footer__nav>ul>li>a {
    display: inline-block;

    max-width: 100%;
    min-width: 0;

    margin: 0;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: .045em;
    line-height: 1.45;

    color: inherit;

    text-decoration: none;

    opacity: .82;

    overflow-wrap: anywhere;

    transition:
        opacity .24s ease,
        transform .24s ease,
        letter-spacing .24s ease;
}


/*
---------------------------------
Level 1 Hover
---------------------------------
*/

.sv-footer__nav>ul>li>a:hover {
    opacity: 1;

    transform:
        translateX(3px);

    letter-spacing: .055em;
}


/*
---------------------------------
Nested Navigation
---------------------------------
*/

.sv-footer__nav ul ul {
    display: block;

    width: auto;
    max-width: 100%;
    min-width: 0;

    margin:
        14px 0 0 1px;

    padding:
        0 0 0 14px;

    box-sizing: border-box;

    list-style: none;

    border-left:
        1px solid rgba(150, 160, 175, .15);

    overflow-wrap: anywhere;
}


/*
---------------------------------
Nested Item
---------------------------------
*/

.sv-footer__nav ul ul li {
    position: relative;

    max-width: 100%;
    min-width: 0;

    padding:
        0 0 0 11px;

    box-sizing: border-box;
}


.sv-footer__nav ul ul li+li {
    margin-top: 8px;
}


/*
---------------------------------
Nested Links
---------------------------------
*/

.sv-footer__nav ul ul a {
    display: inline-block;

    max-width: 100%;
    min-width: 0;

    margin: 0;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: .025em;
    line-height: 1.5;

    color: var(--sv-muted);

    opacity: .68;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        opacity .22s ease,
        transform .22s ease,
        color .22s ease;
}


/*
---------------------------------
Nested Hover
---------------------------------
*/

.sv-footer__nav ul ul a:hover {
    opacity: .96;

    transform:
        translateX(3px);
}


/*
---------------------------------
Level 3
---------------------------------
*/

.sv-footer__nav ul ul ul {
    margin-top: 9px;

    padding-left: 12px;

    border-left:
        1px solid rgba(150, 160, 175, .09);
}


.sv-footer__nav ul ul ul li+li {
    margin-top: 6px;
}


.sv-footer__nav ul ul ul a {
    font-size: 9px;

    opacity: .58;
}


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

@media(max-width:767px) {


    /*
    ---------------------------------
    Navigation Frame
    ---------------------------------
    */

    .sv-footer__navigation-summary {
        min-height: 60px;

        gap: 18px;
    }


    /*
    ---------------------------------
    Summary Title
    ---------------------------------
    */

    .sv-footer__navigation-title {
        font-size: 9px;

        letter-spacing: .2em;
    }


    .sv-footer__navigation-title::before {
        width: 18px;

        margin-right: 10px;
    }


    /*
    ---------------------------------
    Summary Indicator
    ---------------------------------
    */

    .sv-footer__navigation-indicator {
        width: 20px;
        height: 20px;

        min-width: 20px;

        font-size: 12px;
    }


    /*
    ---------------------------------
    Open Reflection
    ---------------------------------
    */

    .sv-footer__navigation[open] .sv-footer__navigation-title {
        letter-spacing: .22em;
    }


    /*
    ---------------------------------
    Navigation Content
    ---------------------------------
    */

    .sv-footer__nav {
        padding:
            2px 0 30px;
    }


    /*
    ---------------------------------
    Mobile Level 1
    ---------------------------------
    */

    .sv-footer__nav>ul {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    .sv-footer__nav>ul>li {
        position: relative;

        width: 100%;

        padding:
            12px 0 12px 18px;

        border-bottom:
            1px solid rgba(150, 160, 175, .075);
    }


    .sv-footer__nav>ul>li:last-child {
        border-bottom: 0;
    }


    /*
    ---------------------------------
    Mobile Structural Marker
    ---------------------------------
    */

    .sv-footer__nav>ul>li::before {
        left: 1px;
        top: 17px;

        width: 5px;
        height: 5px;
    }


    /*
    ---------------------------------
    Mobile Level 1 Link
    ---------------------------------
    */

    .sv-footer__nav>ul>li>a {
        font-size: 10px;

        letter-spacing: .045em;

        opacity: .84;
    }


    /*
    ---------------------------------
    Mobile Nested Navigation
    ---------------------------------
    */

    .sv-footer__nav ul ul {
        margin:
            10px 0 1px 0;

        padding:
            0 0 0 13px;

        border-left:
            1px solid rgba(150, 160, 175, .14);
    }


    /*
    ---------------------------------
    Mobile Nested Items
    ---------------------------------
    */

    .sv-footer__nav ul ul li {
        padding:
            0 0 0 10px;
    }


    .sv-footer__nav ul ul li+li {
        margin-top: 8px;
    }


    /*
    ---------------------------------
    Mobile Nested Links
    ---------------------------------
    */

    .sv-footer__nav ul ul a {
        font-size: 9px;

        line-height: 1.55;

        opacity: .66;
    }


    /*
    ---------------------------------
    Mobile Level 3
    ---------------------------------
    */

    .sv-footer__nav ul ul ul {
        margin-top: 8px;

        padding-left: 10px;
    }


    .sv-footer__nav ul ul ul a {
        font-size: 9px;

        opacity: .56;
    }

}


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

@media(max-width:420px) {

    .sv-footer__navigation-summary {
        min-height: 56px;
    }


    .sv-footer__navigation-title {
        font-size: 9px;

        letter-spacing: .18em;
    }


    .sv-footer__navigation-title::before {
        width: 16px;

        margin-right: 9px;
    }


    .sv-footer__nav {
        padding-bottom: 26px;
    }


    .sv-footer__nav>ul>li {
        padding:
            11px 0 11px 17px;
    }


    .sv-footer__nav ul ul {
        padding-left: 12px;
    }


    .sv-footer__nav ul ul a {
        font-size: 9px;
    }

}