@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

/* =======================================
    Padronização Geral
   ======================================= */

    :root {
        /* Fontes base */
        --font-base: "Open Sans", sans-serif;
        --font-heading: "Sora", sans-serif;

        /* Tamanhos */
        --text-xs: 0.75rem;  
        --text-sm: 0.890rem; 
        --text-md: 0.99rem;     
        --text-lg: 1.25rem;  
        --text-xl: 1.5rem;   
        --text-xxl: 2rem;   

        /* Cores */
        --azul-escuro: #1d2e5a; 
        --azul-medio: #29407c; 
        --azul-padrao: #32509E; 
        --azul-claro:rgb(121, 181, 226);

        --amarelo-medio: #facb2e;
        --amarelo-escuro: #fdb833;

        --background-color: #FAFAFA;

        --cinza-medio: #ccc; 
        --cinza-claro: #ececec;
        --branco: #fff;

        /* Cores para fonte */
        --mdb-dark: #4f4f4f;

    }

    * {
        font-family: var(--font-base);
        font-size: var(--text-md);
    }

    body{
        background: var(--background-color);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        line-height: 1.2;
        margin-bottom: 0.5em;
    }

    h1 {
        font-size: var(--text-xxl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    h4 {
        font-size: var(--text-md);
    }

    h5 {
        font-size: var(--text-lg);
    }

    p {
        font-size: var(--text-md);
        line-height: 2;
        margin-bottom: 1em;
    }

    /* ===== Acessibilidade ===== */


        /* Ícone do UserWay */
        #userwayAccessibilityIcon,
        #userwayWidget,
        .uai,
        .userway_buttons_wrapper {
            position: fixed !important;
            top: 220px !important; 
            right: 5px !important;
            transform: translateY(-50%) !important;
            bottom: auto !important;
            z-index: 0 !important;
        }

        /* Ícone do VLibras */
            div[vw] {
                position: fixed !important;
                top: 480px !important;
                right: 0 !important;
                transform: translateY(-50%) !important;
                z-index: 9999 !important;
            }

            /* Painel aberto do VLibras */
                div[vw-plugin-wrapper],
                div.vw-plugin-wrapper,
                div.vw-plugin-top-wrapper {
                    top: 210px !important;
                }


    /* ===== Navbar ===== */
        .navbar {
            padding: 0;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.829); 
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(3px);
        }

        .navbar-nav {
            gap: 1.5rem; 
        }

        .nav-right .placeholder {
            visibility: hidden; 
        }

        .navbar-brand img {
            width: 10vw; 
            height: 48px;
            transition: all 0.3s ease;
        }

        .nav-right .placeholder {
            width: 110px; 
        }

        .nav-center { 
            min-width: 0; 
        }

        .menu {
            height: 100%;              
            padding: 1.2vh 0 1vh 0;
            display: flex;            
            align-items: center;
            box-sizing: border-box;   
            color: var(--azul-escuro);            
            border-bottom: 3px solid transparent;
        }

        .menu:hover {
            color: var(--azul-escuro);
            border-bottom-color: var(--amarelo-medio);
        }

        .menu-link:hover,
        .menu-link:focus {
            color: var(--azul-escuro);
            transform: scale(1.05); 
            text-shadow: 0 0 1px #021d2b65;
        }
    /* ===== Navbar ===== */


    /* ===== Banner ===== (páginas: Sobre o IRIS, Glossário e Dados Abertos) */
        .bannerInicial {
            height: 55vh;
            margin-bottom: 9vh;
            background-size: cover;
            background-position: center;
            border-radius: 0 0 9vh 9vh;
            border-bottom: 7px solid var(--amarelo-medio);
        }

        .mask{
            background-color: rgba(0, 0, 0, 0.61);
        }
    /* ===== Banner ===== */

    /* ===== Footer ===== */
        footer {
            position: relative;
            overflow: visible; 
            background: linear-gradient(to bottom, var(--azul-padrao), var(--azul-claro));
        }

        .footer-wave {
            width: 100%; 
            position: absolute;
            top: -12em; 
            left: 0;
            z-index: -1; 
        }

        .m-footer{
            font-size: 0.95rem;
        }

        .footer-contact i {
            font-size: 1rem; 
        }
        
    /* ===== Footer ===== */


/* =======================================
    Versão Mobile
   ======================================= */

    @media (max-width: 767px) {

        p{
            font-size: 1rem;
        }

        /* ===== Acessibilidade ===== */
        
            /* Ícone do UserWay */
            #userwayAccessibilityIcon,
            #userwayWidget,
            .uai,
            .userway_buttons_wrapper {
                top: 90px !important; 
            }

            /* Ícone do VLibras  */
            div[vw] {
                top: 220px !important;
            }

            /* Painel aberto do VLibras */
                div[vw-plugin-wrapper],
                div.vw-plugin-wrapper,
                div.vw-plugin-top-wrapper {
                    top: 152px !important;
                }


        /* ===== Navbar ===== */
            .navbar{
               height: auto; 
            }

            .navbar-brand {
                position: static !important;
                top: auto !important;
                transform: none !important;
            }

            .navbar-brand img, .navbar-toggler button{
                width: 15vh;
            }

            .menu:hover {
                border-bottom-color: transparent; 
            }

            
        /* ===== Banner ===== */
            .bannerInicial {
                height: 70vh;
                background-size: cover;
                background-position: center;
                border-radius: 0 0 15vw 15vw;
                border-bottom: 7px solid var(--amarelo-medio);
                margin-bottom: 9vh;
            }

        /* ===== Footer ===== */
            .footer-wave {
                top: -10vh;  
            }          
    }