/**
 * Component: Jumpnav
 * 
 * Styles for the Jumpnav component.
 *
 * @package SCDA-2025
 */

/* Basic component styling */
.jumpnav {
    p {
        font-size: 1.25rem;
        font-weight: bold;
        margin-top: 0;

        @media screen and (max-width: 768px) {
            display: none;
        }
    }
    .jumpnav-links {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: calc(var(--spacing-sm) * -1);

        @media screen and (max-width: 768px) {
            display: none;
        }
        .jumpnav-link {
            padding-right: var(--spacing-sm);
            padding-bottom: var(--spacing-sm);
            transition: .3s ease-in-out;

            @media screen and (max-width: 991px) {
                padding-right: var(--spacing-xs);
                padding-bottom: var(--spacing-xs);
            }
            &:last-of-type {
                padding-right: 0;
            }
        }
        &.remove-padding .jumpnav-link.near-edge {
            padding-right: 0 !important;
            
            @media screen and (max-width: 991px) {
                padding-right: 0 !important;
            }
        }
    }
    .jumpnav-links-mobile {
        display: none;

        @media screen and (max-width: 768px) {
            display: block;
        }
        &.open {
            .jumpnav-dropdown-button {
                &:after {
                    background-image: url('../../../assets/svg/minus-blue.svg');
                }
            }
            .jumpnav-dropdown-content {
                max-height: 800px;
                padding: 10px 16px 16px;
            }
        }
        .jumpnav-dropdown-button {
            background-color: var(--color-scda-beige);
            border: none;
            border-radius: var(--border-radius);
            width: 100%;
            padding: 15px;
            font-family: var(--font-primary);
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-scda-blue);
            text-align: left;
            position: relative;
            z-index: 1;
            cursor: pointer;
            transition: .2s ease-in-out;

            &:hover, &:focus-visible {
                background-color: #DED2CE;
            }
            &:after {
                content: '';
                display: block;
                width: 12px;
                height: 14px;
                background-image: url('../../../assets/svg/arrow-down-blue.svg');
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                transition: .5s ease-in-out;
            }
        }
        .jumpnav-dropdown-content {
            width: 100%;
            max-height: 0px;
            overflow: hidden;
            background-color: var(--color-scda-beige);
            border-bottom-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
            padding: 0 16px;
            margin-top: calc(var(--border-radius) * -1);
            transition: .5s ease-in-out;

            a {
                display: block;
                width: 100%;
                padding: 15px 42px 13px 15px;
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.2;
                color: var(--color-scda-blue);
                text-decoration: none;
                border-bottom: 2px solid var(--color-white);
                border-radius: 0;
                transition: .3s ease-in-out;

                &:hover, &:focus-visible {
                    background-color: var(--color-scda-beige);
                    border-bottom: 2px solid var(--color-scda-blue);
                }
            }
        }
    }
}