/* Estilos globais - Todas as p[aginas devem herdar */
@import url('./utilities.css');

html {scroll-behavior: smooth; }
body { font-family: "DM Sans", sans-serif; }
p, h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }


/* Seletor de tema */
#seletor-tema { bottom: 0px; right: 0px; border-radius: 8px 0px 0px 0px;}
.theme-changer-icon { fill: var(--text-primary);  }

/* NAVBAR */
.navbar {
    background-color: #0b17247a;
    backdrop-filter: blur(20px);
    border-bottom: solid 2px var(--color-ambar);
}
@media (min-width: 590px) {
    .navbar.top {
        border-color: transparent;
        background-color: transparent;
        backdrop-filter: unset;
    }
}
.hayah .navbar { 
    background-color: #f5f7fa80;
}
@media (min-width: 590px) {
    .hayah .navbar.top {
        background-color: transparent;
    }
}
.navbar .brand-name { position: relative; top: 0px; }
.navbar .nav-link { 
    border-style: solid; 
    border-bottom-width: 1px; 
    border-color: transparent;
}
.navbar .nav-link:hover, .navbar .nav-link.ativo {   
    border-color: var(--color-ambar); 
    color: var(--color-ambar);
}
.navbar .nav-item .btn.ativo { 
    background-color: var(--accent-bg); 
    color: var(--background)!important;

}
.hayah .navbar .nav-link:hover, .hayah .nav-link.ativo {
    border-color: var(--color-oceano);
    color: var(--color-oceano);
}

@media (min-width: 990px) {
    .navbar .nav-item {
        display: flex;
        align-items: center;
    }
    .navbar .nav-link {
        padding-block: 0px !important;
    }
}

/* -- ESTILOS DO FOOTER -- */
@media (max-width: 576px) {
    #sect-footer a {
        transform-origin: top left;
    }
}

/* OVERRIDES Bootstrap 5 */
a {
    color: var(--accent-text);
}
.btn {
    border-radius: 0px;
}
.btn-primary {
    background-color: var(--accent-bg);
    color: var(--color-oceano)!important;
    border-color: var(--accent-bg);
}
.btn-primary:hover {
    border-color: var(--accent-bg);
}
.hayah .btn-primary { color: var(--color-off-white) !important}
.btn-primary:hover {
    background-color: var(--highlight);
}
.btn-secondary {
    background-color: transparent;
    color: var(--accent-text)!important;
}
.btn-secondary:hover {
    background-color: var(--accent-bg);
    color: var(--color-oceano)!important;
}
.hayah .btn-secondary:hover { color: var(--color-off-white)!important; }

hr { border-color: var(--text-secondary); }
/* Tamanhos de fontes */
.fs-xs { font-size: var(--step--3)!important; }
.fs-sm { font-size: var(--step--2)!important; }
.fs-bs, p, .btn, a { font-size: var(--step--1)!important; }
.fs-6, h6 { font-size: var(--step-0)!important; }
.fs-5, h5 { font-size: var(--step-1)!important; }
.fs-4, h4 { font-size: var(--step-2)!important; }
.fs-3, h3 { font-size: var(--step-3)!important; }
.fs-2, h2 { font-size: var(--step-4)!important; }
.fs-1, h1 { font-size: var(--step-5)!important; }

/* OVERRIDES FORMULARIO */
.form-control {
    background-color: var(--background);
    border-color: var(--accent-bg);
    color: var(--accent-text);
    border-radius: 0px;
}
.form-control:focus {
    background-color: var(--foreground);
    color: var(--accent-text);
}
.form-floating>.form-control:focus~label::after {
    background-color: var(--foreground);
}
.form-floating>.form-control:not(:placeholder-shown)~label::after {
    background-color: var(--background);
}
.form-floating > label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--text-primary);
}
.form-floating > .form-control:focus ~ label {
    color: var(--text-primary);
    
}
input::placeholder, textarea::placeholder { color: var(--text-secondary)!important; }
.form-floating input::placeholder, .form-floating textarea::placeholder { opacity: 0; }