/* components/02-components/07-navigation/05-global-footer/global-footer.scss */
/* BEGIN global-footer.scss */
#footer {
    border-top: 1px solid $orange-a11y;
    background-color: $blue;
    padding-top: 3.5rem;
    color: $white;

    li.nav-item a {
        font-size: 0.8125rem;
        line-height: 1.25;
    }

    p {
        color: $white;
    }

    .footer-logo a:hover, .footer-logo a:focus, .footer-logo a:focus-visible {
        background: none;
        cursor: pointer;
        padding-bottom: .5rem;
        border-bottom: 1px solid $orange-a11y;
        transition: none;
        outline: none;
    }

    .footer-logo-vert a:hover, .footer-logo-vert a:focus, .footer-logo-vert a:focus-visible {
        background: none;
        cursor: pointer;
        padding-bottom: 3rem;
        border-bottom: 1px solid $orange-a11y;
        transition: none;
        outline: none;
    }

    .footer-header {
        font-size: 1.25rem;
        color: $light-blue;
    }

    .footer-text p {
        color: $white;
        font-size: .8125rem;
        font-weight: 400;
        line-height: 1.25;
        margin-bottom: .125rem;
    }

    .footer-text p a {
        color: $white;
        text-decoration: underline;
        &:hover, &:focus, &:focus-visible {
            color: $blue;
            outline: none;
        }
    }

    .footer-text p>.footer-first-text {
        margin-right: 10px;
        padding-right: 10px;
        border-right: 1px solid $grey-b;
    }

    .footer-social>a {
        background-color: $white;
        color: $blue;
        padding: .25rem;
        margin: .125rem;
        border-radius: 50%;
        display: inline-block;
        height: 2.25rem;
        width: 2.25rem;
        font-size: 1.25rem;
        text-align: center;
        &:hover, &:focus, &:focus-visible {
            background-color: $orange-a11y;
            color: $blue;
            cursor: pointer;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            outline: none;
            }
    }

    .footer-column-1 .footer-logo {
        margin-bottom: 10px;
    }

    .footer-column-1 .footer-social {
        padding-top: 20px;
    }

    .nav-item>a {
        color: $white;
        font-size: .8125rem;
        line-height: 1;
        padding: 6px 2px;
        display: inline-block;
        margin-bottom: 5px;
    }

    .nav-item {
        line-height: normal;
    }

    .nav-item>a:hover, .nav-item>a:focus, .nav-item>a:focus-visible {
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        color: $blue;
        background-color: $grey;
        text-decoration: underline;
        outline: none;
    }

    // #footer>.main-footer-wrap {
    //     width: 100%;
    //     max-width: 1000px;
    //     margin: 0 auto;
    // }

    .copy-right-sec {
        background-color: $blue;
        // text-align: center;
        padding: 26px 0px;
    }

    // .main-footer-wrap {
    //     padding: 48px 15px 0px 15px;
    // }
    
    .footer-column-2 {
        width: 100%;
        // max-width: 130px;
        margin: 0 auto;
    }

    .secondary-footer {

        &-social {
            text-align: right;
            margin-bottom: 2rem;
            > a {
                background-color: $white;
                color: $blue;
                padding: .25rem;
                margin: .125rem;
                border-radius: 50%;
                display: inline-block;
                height: 2.25rem;
                width: 2.25rem;
                font-size: 1.25rem;
                text-align: center;
                &:hover, &:focus, &:focus-visible {
                    background-color: $orange-a11y;
                    color: $blue;
                    outline: none;
                }
            }
        }
        &-links ul {
            padding: 0;
            margin: 1rem 0 1rem 0;
            display: flex;
            justify-content: end;
            flex-wrap: wrap;
            >li {
                font-size: .8125rem;
                font-weight: 400;
                padding: .25rem;
                line-height: 1;
                border-left: 1px solid rgba(255, 255, 255, .25);
                &:first-child {
                    border-left: none;
                }
                > a {
                    color: $white;
                    padding-left: .25rem;
                    padding-right: .25rem;
                    text-decoration: none;
                        &:hover, &:focus, &:focus-visible {
                        color: $blue;
                        text-decoration: underline;
                        outline: none;
                        }
                }
            }
        }
        hr {
            border-top: 1px dotted $blue-highlight;
            opacity: 1;
            border-bottom: none;
        }
        .copyright-subfooter {
        padding: 1rem 0;
        font-size: .75rem
    }
    }

    .copy-right-text {
        color: $white;
        font-size: 11px;
        margin-bottom: 4px;
    }

    .copyright-subfooter {
        padding: 1.5625rem 0;
        font-size: .75rem
    }


    .copyright-subfooter .utsa-copyright {
        position: relative;
    }

    .copyright-subfooter .utsa-copyright:after {
        content: " ";
        display: inline-block;
        height: .75rem;
        width: .05rem;
        background-color: rgba(255, 255, 255, 0.25);
        position: absolute;
        top: 20%;
        right: -10px;
    }

    .copyright-subfooter .utsa-copyright p {
        margin: 0;
        text-align: right;
        padding-right: 1.5625rem
    }

    .copyright-subfooter .subfooter-links {
        text-align:center;
        padding: 0;

        & ul li {
            display: inline-block;
            padding: 0 .625rem;
        }
    }

    .copyright-subfooter .subfooter-links ul li a {
        text-decoration: underline;
        padding: 0;
    }

    // Custom styling for Quick Links with bullet points and arrows
    .nav-item a {
        position: relative;
        
        // Add orange bullet point before each link
        // &::before {
        //     content: "•";
        //     color: $utsa-orange-a11y; // Orange color from UTSA brand
        //     font-weight: bold;
        //     text-decoration: none; // Remove underline from bullet points
        // }
        
        // Style the custom arrow icons  
        .fa-kit.fa-utsa-arrow-right {
            color: $talavera-blue; // Light blue color
            font-size: 1.125em;
            margin:0;
        }
    }

    ul.footer-quicklinks {
        margin: 0;
        padding: 0;
        gap: 2rem;

        li {
            text-indent: -4px;
        }

        li.nav-item {
            padding-left: 0;
            list-style-type: none;
            color: $utsa-orange-a11y;
            a {
                padding-left: 0;
            }
        }
    }

    // Override bullet styling for subfooter links (they don't have bullets in the design)
    .subfooter-links .nav-item a::before {
        display: none;
    }
    
}

@media (max-width: 991px) {
    #footer {
        .footer-demo-component .main-footer-wrap {
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 15px;
        }
    }
}

@media (max-width: 767px) {
    #footer {
        line-height:1.75rem;

        .main-footer-wrap {
            padding: 30px 0px;
        }

        .footer-column-2 {
            width: 100%;
            max-width: 100%;
            margin: initial;
            padding-top: 25px;
        }

        .copyright-subfooter {
            text-align: center;
        }

        .copyright-subfooter .utsa-copyright p {
            text-align: center;
        }

        .copyright-subfooter .utsa-copyright:after {
            display: none;
        }
    }
}

/* Dark Mode - Footer/Ankle Styles */
@include color-mode(dark) {
    .white-b-bg {
        p, ul li, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            color:$blue;
        }
        a {
            color: $blue;
            &:hover {
                color: $blue;
                background-color: $grey;
            }
        }
    }
    #footer .footer-text p .footer-second-text a {
        color: $white;
        &:hover {
            color: $blue;
        }
    }
}
/* Dark Mode - Footer/Ankle END */

/* END global-footer.scss */