// Variables
@property --color-rdg-navbar-hyperlink {
    syntax: "<color>";
    inherits: true;
    initial-value: #fff;
}
@property --color-rdg-navbar-hyperlink-hover {
    syntax: "<color>";
    inherits: true;
    initial-value: #6aa0e5;
}
@property --color-rdg-navbar-hyperlink-submenu {
    syntax: "<color>";
    inherits: true;
    initial-value: #000;
}
@property --color-rdg-navbar-hyperlink-submenu-bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #275fa6;
}
@property --color-rdg-navbar-hyperlink-submenu-hover {
    syntax: "<color>";
    inherits: true;
    initial-value: #fff;
}
@property --color-rdg-navbar-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #275fa6;
}
@property --color-rdg-navbar-input-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #6aa0e5;
}
@property --color-rdg-navbar-secondary-hyperlink {
    syntax: "<color>";
    inherits: true;
    initial-value: #6aa0e5;
}
@property --color-rdg-navbar-divider {
    syntax: "<color>";
    inherits: true;
    initial-value: #6aa0e5;
}
@property --color-rdg-secondary-bg-mobile {
    syntax: "<color>";
    inherits: true;
    initial-value: #efefef;
}
@property --color-rdg-secondary-link-mobile {
    syntax: "<color>";
    inherits: true;
    initial-value: #6aa0e5;
}
@property --color-rdg-search {
    syntax: "<color>";
    inherits: true;
    initial-value: #6aa0e5;
}
@property --color-rdg-sign-up {
    syntax: "<color>";
    inherits: true;
    initial-value: #ff7a00;
}
@property --color-rdg-login {
    syntax: "<color>";
    inherits: true;
    initial-value: #6aa0e5;
}

.rdg-blocks .rdg-sas-navbar {
    .preview-thumbs {
        background-image: url('../images/rdg-sas-navbar-template-preview.jpg');
    }

    a {
        color: var(--color-rdg-navbar-hyperlink);
        text-wrap: nowrap;
        text-decoration: none;
    }

    .dont-show {
        display: none;
    }

    #inputWrapper {
        display: none;
    }

    .full-width {
        margin-left: calc(-100vw / 2 + 100% / 2);
        margin-right: calc(-100vw / 2 + 100% / 2);
        max-width: 100vw;
        width: auto;
    }

    input[type="text"] {
        background-color: var(--color-white);
        border-color: transparent;
        width: 100%;
    }

    .nav-mobile-lang {
        display: none;
    }

    .sas-navbar-container {
        background-color: var(--color-rdg-navbar-background);
        padding: 1rem 0;
        position: relative;

        #search-form {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100vw;
            display: none;

            .input-container {
                display: flex;
                width: 100%;
                background-color: var(--color-rdg-navbar-input-container);
                padding: 1rem 20px;
                justify-content: center;

                .input-wrapper {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    max-width: 659px;
                    background-color: var(--color-white);

                    #search-input {
                        width: 100%;
                        height: 32px;
                        border: none;
                        padding: 0 8px;
                        box-sizing: border-box;
                    }

                    #search-input:focus,
                    #search-input:focus-visible {
                        outline: none;
                        border-color: transparent;
                        background-color: var(--color-white);
                    }

                    .search-svg {
                        filter: brightness(0) saturate(100%) invert(77%)
                            sepia(43%) saturate(5336%) hue-rotate(187deg)
                            brightness(99%) contrast(81%);
                        padding: 10px 15px;
                    }
                }
            }
        }

        #search-form.expanded {
            display: block;
        }

        .navbar-container {
            padding-left: 20px;
            padding-right: 20px;

            .secondary-menu {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 0.5rem;
                margin-bottom: 0.5rem;

                @media (max-width: 768px) {
                    display: none;
                }

                a {
                    color: var(--color-rdg-navbar-secondary-hyperlink);
                    font-size: 13px;
                    font-weight: 400;
                    line-height: normal;
                    letter-spacing: 0.26px;
                    border-right:  none;
                    padding-right: 0.5rem;
                    transition: all ease 0.3s;

                    &:hover {
                        color: var(--color-white);
                        text-decoration: underline;
                    }

                    &:last-child {
                        border-right: none;
                        padding-right: 0;
                    }
                }

                .lenguage-btn {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
            }

            .primary-menu {
                display: flex;
                align-items: center;
                justify-content: space-between;

                @media (max-width: 1440px) and (min-width: 769px) {
                    flex-direction: column;
                    align-items: center;
                }

                @media (max-width: 768px) {
                    flex-direction: column;
                }

                .top-container {
                    display: flex;
                    align-items: center;
                    flex: 3;

                    @media (max-width: 1440px) and (min-width: 769px) {
                        flex-direction: column;
                        align-items: center;
                        width: 100%;
                        margin-bottom: 0.5rem;
                    }

                    @media (max-width: 768px) {
                        justify-content: space-between;
                        width: 100%;
                        border-bottom: 2px solid var(--color-rdg-navbar-divider);
                        margin-bottom: 1rem;
                        padding-bottom: 1rem;
                    }

                    .site-logo-wrapper {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        margin-right: 0.5rem;

                        @media (max-width: 1440px) and (min-width: 769px) {
                            margin-right: 0;
                            margin-bottom: 0.5rem;
                            max-width: 150px;
                        }
                    }

                    .primary-navigation {
                        flex: 2;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .toggle-container {
                            display: none;
                        }

                        .navbar-links ul {
                            margin: 0;
                            padding: 0;
                            list-style: none;
                            display: flex;
                            transition: max-height 0.3s ease-out;
                            gap: 0 1.5rem;

                            @media (max-width: 1440px) and (min-width: 769px) {
                                gap: 0 1rem;
                            }

                            li {
                                position: relative;

                                @media (max-width: 768px) {
                                    padding: 0 20px;
                                }
                            }

                            .nav-dropdown {
                                .dropdown-wrapper {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    gap: 4px;
                                    width: 100%;

                                    a {
                                        text-decoration: none;

                                        @media (max-width: 768px) {
                                            padding: 1rem 0;
                                            font-weight: 600;
                                        }
                                    }

                                    .dropdown {
                                        padding: 4px;
                                        cursor: pointer;

                                        @media (max-width: 768px) {
                                            &.active + .dropdown-content {
                                                display: block !important;
                                            }
                                        }
                                    }
                                }

                                @media (min-width: 769px) {
                                    .dropdown-content {
                                        position: absolute;
                                        top: 100%;
                                        left: 0;
                                    }

                                    &:hover .dropdown-content {
                                        display: block !important;
                                    }
                                }

                                .dropdown-content {
                                    display: none;
                                    background-color: var(--color-white);
                                    min-width: 160px;
                                    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
                                    z-index: 1;

                                    @media (min-width: 769px) {
                                        position: absolute;
                                        top: 100%;
                                        left: 0;
                                    }

                                    .submenu-icon {
                                        display: flex;
                                        align-items: center;
                                        gap: 8px;
                                    }

                                    a {
                                        color: var(
                                            --color-rdg-navbar-hyperlink-submenu
                                        );
                                        padding: 12px 16px;
                                        text-decoration: none;
                                        width: 100%;
                                        min-width: max-content;

                                        &:hover {
                                            background-color: var(
                                                --color-rdg-navbar-hyperlink-submenu-bg
                                            );
                                            color: var(
                                                --color-rdg-navbar-hyperlink-submenu-hover
                                            );
                                            text-decoration: none;
                                        }
                                    }
                                }
                            }
                        }

                        .navbar-links a {
                            color: var(--color-rdg-navbar-hyperlink);
                            text-decoration: none;
                            display: block;
                            padding: 10px 0;
                            font-size: 16px;
                            line-height: normal;
                            letter-spacing: 0.32px;

                            &:hover {
                                text-decoration: underline;
                                color: var(--color-rdg-navbar-hyperlink-hover);
                            }
                        }

                        .toggle-button,
                        .toggle-button-x {
                            font-size: 1.5em;
                            color: var(--color-white);
                            cursor: pointer;
                            display: none;
                        }

                        .toggle-button-x {
                            display: none;
                        }

                        @media (max-width: 768px) {
                            .primary-navigation {
                                position: relative;
                            }

                            .navbar-links {
                                display: none;
                                flex-direction: column;
                                width: 100%;
                                background-color: var(--color-white);
                                position: absolute;
                                top: 135px;
                                left: 0;
                                z-index: 2 !important;

                                a {
                                    color: var(
                                        --color-rdg-navbar-hyperlink-submenu
                                    );

                                    &:hover {
                                        background-color: var(
                                            --color-rdg-navbar-hyperlink-submenu-bg
                                        );
                                        color: var(
                                            --color-rdg-navbar-hyperlink
                                        );
                                        text-decoration: none;
                                    }
                                }
                            }

                            .navbar-links.active {
                                display: flex;
                                max-height: 100%;
                            }

                            .navbar-links ul {
                                flex-direction: column;
                                justify-content: center;
                                align-items: start;
                                background-color: var(--color-white);

                                li {
                                    width: 100%;
                                }
                            }

                            .toggle-button {
                                display: block;
                            }

                            .toggle-button.active {
                                display: none;
                            }

                            .toggle-button-x.active {
                                display: block;
                            }

                            .toggle-container {
                                display: flex;
                                justify-content: flex-end;
                                width: 100%;
                            }

                            .dropdown-content {
                                display: none;
                                box-shadow: none !important;
                            }
                        }

                        .secondary-menu-mobile {
                            display: none;

                            @media (max-width: 768px) {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                background-color: var(
                                    --color-rdg-secondary-bg-mobile
                                );
                                padding: 0 20px;

                                a {
                                    color: var(
                                        --color-rdg-secondary-link-mobile
                                    );
                                    padding: 13px 0;
                                    border-bottom: 1px solid var(--color-white);
                                    width: 100%;
                                    line-height: normal;
                                    letter-spacing: 0.28px;

                                    &.last-child {
                                        border-bottom: none;
                                    }
                                }

                                .lenguage-btn {
                                    display: flex;
                                    gap: 4px;
                                }
                            }
                        }
                    }
                }

                .nav-mobile-container {
                    flex: 1;

                    @media (max-width: 768px) {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .nav-mobile-lang {
                            display: block;
                        }
                    }

                    .search-mobile {
                        display: none;

                        @media (max-width: 768px) {
                            display: flex;

                            .search-icon-mobile {
                                width: 32px;
                                height: 32px;
                                background-color: var(--color-rdg-search);
                                border-radius: 50%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                cursor: pointer;
                                position: relative;
                                transition: border-radius 0.3s ease;

                                #search-connector-mobile {
                                    width: 32px;
                                    height: 32px;
                                    background-color: var(--color-rdg-search);
                                    position: absolute;
                                    left: 50%;
                                    top: 100%;
                                    transform: translateX(-50%);
                                    display: none;
                                }

                                #search-connector-mobile.show {
                                    display: block;
                                }
                            }
                        }
                    }

                    .nav-buttons {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 0.5rem;

                        @media (max-width: 1440px) and (min-width: 769px) {
                            gap: 0.3rem;
                        }

                        @media (max-width: 945px) {
                            gap: 0.5rem;
                        }

                        .search-container {
                            display: inline-block;
                            padding: 0 0 0 1rem;

                            @media (max-width: 768px) {
                                display: none;
                            }

                            .search-icon {
                                width: 32px;
                                height: 32px;
                                background-color: var(--color-rdg-search);
                                border-radius: 50%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                cursor: pointer;
                                position: relative;
                                transition: border-radius 0.3s ease;

                                #search-connector {
                                    width: 32px;
                                    height: 32px;
                                    background-color: var(--color-rdg-search);
                                    position: absolute;
                                    left: 50%;
                                    top: 100%;
                                    transform: translateX(-50%);
                                    display: none;
                                }

                                #search-connector.show {
                                    display: block;
                                }
                            }
                        }

                        .sign-up-btn,
                        .login-btn {
                            padding: 10px 20px;
                            border-radius: 4px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            font-size: 16px;
                            font-weight: 700;
                            line-height: normal;
                            letter-spacing: 0.32px;
                        }

                        .sign-up-btn {
                            border: 1px solid var(--color-rdg-sign-up);
                            transition: all ease 0.3s;

                            &:hover {
                                background-color: var(--color-rdg-sign-up);
                            }
                        }

                        .login-btn {
                            border: 1px solid var(--color-rdg-login);
                            transition: all ease 0.3s;

                            &:hover {
                                background-color: var(--color-rdg-login);
                            }
                        }
                    }
                }
            }
        }
    }
}