@import "../../../../assets/scss/abstracts/variables";
@import "../../../../assets/scss/abstracts/mixins";

// 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 {

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

    .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;
    }

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

        #search-form {
            position: absolute;
            top: 100%; /* Ajusta para estar justo debajo del ícono */
            left: 0;
            width: 100vw; /* Abarca todo el ancho de la pantalla */
            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 {
                        outline: none;
                    }
                }
            }
        }

        #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: 1rem;

                @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: 1px solid var(--color-rdg-navbar-secondary-hyperlink);
                    padding-right: 0.5rem;

                    &: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: 768px) { 
                    flex-direction: column;
                }

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

                    @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;
                    }
    
                    .primary-navigation {
                        flex: 1;
                        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;

                            .dropdown {
                                .arrow-down {
                                    margin-left: 4px;
                                }
                            }
                        }
                        
                        .navbar-links li {
                            padding: 0 20px;
                            position: relative; 
                        }
                        
                        .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;
                        }
                        
                        .navbar-links a:hover {
                            text-decoration: underline;
                            color: var(--color-rdg-navbar-hyperlink-hover);
                        }
                        
                        .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;

                            .submenu-icon {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                            }
                        }
                        
                        .dropdown-content a {
                            color: var(--color-rdg-navbar-hyperlink-submenu);
                            padding: 12px 16px;
                            text-decoration: none;
                            display: block;
                        }
                        
                        .dropdown-content a:hover {
                            background-color: var(--color-rdg-navbar-hyperlink-submenu-bg);
                            color: var(--color-rdg-navbar-hyperlink-submenu-hover);
                            text-decoration: none;
                        }
                        
                        @media (min-width: 769px) {
                            .dropdown-content {
                                position: absolute;
                                top: 100%; 
                                left: 0;
                            }
                        
                            .dropdown:hover .dropdown-content {
                                display: block;
                            }
                        }
                        
                        .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: 155px;
                                left: 0;

                                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;
                            }
    
                            .dropdown.active {
                                display: flex;
                                justify-content: center;
                                align-items: start;
                                flex-direction: column;
                            }
                        
                            .dropdown.active .dropdown-content {
                                display: flex;
                                justify-content: center;
                                align-items: start;
                                flex-direction: column;
                                position: relative; 

                                a {
                                    width: 100%;
                                }
                            }
                        }
    
                        .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%;
                                    font-size: 14px;
                                    line-height: normal;
                                    letter-spacing: 0.28px;

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

                                .lenguage-btn {
                                    display: flex;
                                    gap: 4px;
                                }
                            }
                        }
    
                        .search-container{
                            display: inline-block;
                            padding: 0 20px;
    
                            @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;
                                }
                            }  
                        }
                    }
                }

                .nav-mobile-container {
                    flex: 1;
                    
                    @media (max-width: 768px) { 
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }

                    .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: 1rem;
    
                        .sign-up-btn,
                        .login-btn {
                            padding: 12px 24px;
                            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);
                            }
                        }
                    }
                }
                
            }
        }
    }
}
