/*
============================================================
EXTRA INFORMÁTICA LIVROS
Arquivo: assets/css/style.css
Função: Estilos globais do site
============================================================
*/


/*
------------------------------------------------------------
RESET
------------------------------------------------------------
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background: #f5f7fb;

    color: #1f2937;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


ul,
ol {
    list-style: none;
}


/*
------------------------------------------------------------
VARIÁVEIS
------------------------------------------------------------
*/

:root {

    --cor-primaria: #111827;

    --cor-primaria-hover: #1f2937;

    --cor-secundaria: #2563eb;

    --cor-secundaria-hover: #1d4ed8;

    --cor-destaque: #f59e0b;

    --cor-fundo: #f5f7fb;

    --cor-superficie: #ffffff;

    --cor-texto: #1f2937;

    --cor-texto-suave: #6b7280;

    --cor-borda: #e5e7eb;

    --cor-sucesso: #15803d;

    --cor-erro: #dc2626;

    --sombra-pequena:
        0 2px 8px rgba(15, 23, 42, 0.06);

    --sombra-media:
        0 8px 24px rgba(15, 23, 42, 0.09);

    --raio-pequeno: 8px;

    --raio-medio: 12px;

    --raio-grande: 18px;

    --largura-container: 1200px;

    --transicao:
        0.2s ease;

}


/*
------------------------------------------------------------
CONTAINER
------------------------------------------------------------
*/

.container {

    width: 100%;

    max-width: var(--largura-container);

    margin-left: auto;

    margin-right: auto;

    padding-left: 20px;

    padding-right: 20px;

}


/*
------------------------------------------------------------
HEADER
------------------------------------------------------------
*/

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid var(--cor-borda);

    box-shadow:
        0 2px 12px rgba(15, 23, 42, 0.05);

    backdrop-filter: blur(8px);

}


.header-container {

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/*
------------------------------------------------------------
LOGO
------------------------------------------------------------
*/

.site-logo {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}


.site-logo-image {

    width: 42px;

    height: 42px;

    object-fit: contain;

}


.site-logo-text {

    color: var(--cor-primaria);

    font-size: 18px;

    font-weight: 700;

    white-space: nowrap;

}


/*
------------------------------------------------------------
NAVEGAÇÃO
------------------------------------------------------------
*/

.main-navigation {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 4px;

}


.main-navigation a {

    position: relative;

    padding: 10px 12px;

    color: #4b5563;

    font-size: 14px;

    font-weight: 600;

    border-radius: 8px;

    transition:
        color var(--transicao),
        background var(--transicao);

}


.main-navigation a:hover {

    color: var(--cor-secundaria);

    background: #eff6ff;

}


.main-navigation a.active {

    color: var(--cor-secundaria);

    background: #eff6ff;

}


/*
------------------------------------------------------------
MENU MOBILE
------------------------------------------------------------
*/

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    padding: 8px;

    border: 1px solid var(--cor-borda);

    border-radius: 8px;

    background: var(--cor-superficie);

}


.menu-toggle span {

    display: block;

    width: 100%;

    height: 2px;

    margin: 5px 0;

    background: var(--cor-primaria);

    border-radius: 2px;

    transition: var(--transicao);

}


/*
------------------------------------------------------------
MAIN
------------------------------------------------------------
*/

.site-main {

    min-height: calc(100vh - 250px);

}


/*
------------------------------------------------------------
SEÇÕES
------------------------------------------------------------
*/

.section {

    padding-top: 70px;

    padding-bottom: 70px;

}


.section-small {

    padding-top: 40px;

    padding-bottom: 40px;

}


.section-title {

    margin-bottom: 12px;

    color: var(--cor-primaria);

    font-size: 32px;

    line-height: 1.2;

    font-weight: 800;

}


.section-description {

    max-width: 760px;

    margin-bottom: 35px;

    color: var(--cor-texto-suave);

    font-size: 16px;

}


/*
------------------------------------------------------------
BOTÕES
------------------------------------------------------------
*/

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 10px 18px;

    border: 0;

    border-radius: var(--raio-pequeno);

    font-size: 15px;

    font-weight: 700;

    transition:
        background var(--transicao),
        color var(--transicao),
        transform var(--transicao),
        box-shadow var(--transicao);

}


.btn:hover {

    transform: translateY(-1px);

}


.btn-primary {

    background: var(--cor-secundaria);

    color: #ffffff;

}


.btn-primary:hover {

    background:
        var(--cor-secundaria-hover);

    box-shadow:
        0 6px 16px rgba(37, 99, 235, 0.22);

}


.btn-dark {

    background: var(--cor-primaria);

    color: #ffffff;

}


.btn-dark:hover {

    background:
        var(--cor-primaria-hover);

}


.btn-outline {

    background: transparent;

    color: var(--cor-secundaria);

    border: 1px solid #bfdbfe;

}


.btn-outline:hover {

    background: #eff6ff;

}


/*
------------------------------------------------------------
CARDS
------------------------------------------------------------
*/

.card {

    background: var(--cor-superficie);

    border: 1px solid var(--cor-borda);

    border-radius: var(--raio-medio);

    box-shadow: var(--sombra-pequena);

}


.card-padding {

    padding: 24px;

}


/*
------------------------------------------------------------
FORMULÁRIOS
------------------------------------------------------------
*/

.form-group {

    margin-bottom: 18px;

}


.form-label {

    display: block;

    margin-bottom: 7px;

    color: var(--cor-primaria);

    font-size: 14px;

    font-weight: 700;

}


.form-control {

    width: 100%;

    min-height: 46px;

    padding: 10px 13px;

    color: var(--cor-texto);

    background: #ffffff;

    border: 1px solid #d1d5db;

    border-radius: var(--raio-pequeno);

    outline: none;

    transition:
        border-color var(--transicao),
        box-shadow var(--transicao);

}


.form-control:focus {

    border-color: var(--cor-secundaria);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);

}


textarea.form-control {

    min-height: 120px;

    resize: vertical;

}


/*
------------------------------------------------------------
MENSAGENS
------------------------------------------------------------
*/

.alert {

    margin-bottom: 20px;

    padding: 13px 16px;

    border-radius: var(--raio-pequeno);

    font-size: 14px;

}


.alert-success {

    color: #166534;

    background: #dcfce7;

    border: 1px solid #bbf7d0;

}


.alert-error {

    color: #991b1b;

    background: #fee2e2;

    border: 1px solid #fecaca;

}


.alert-info {

    color: #1e40af;

    background: #dbeafe;

    border: 1px solid #bfdbfe;

}


/*
------------------------------------------------------------
CONTADORES
------------------------------------------------------------
*/

.stats {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.stat {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    color: var(--cor-texto-suave);

    background: #f8fafc;

    border: 1px solid var(--cor-borda);

    border-radius: 999px;

    font-size: 13px;

}


.stat strong {

    color: var(--cor-primaria);

}


/*
------------------------------------------------------------
ESTADO VAZIO
------------------------------------------------------------
*/

.empty-state {

    padding: 50px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px dashed #d1d5db;

    border-radius: var(--raio-medio);

}


.empty-state h2 {

    margin-bottom: 8px;

    color: var(--cor-primaria);

    font-size: 22px;

}


.empty-state p {

    color: var(--cor-texto-suave);

}


/*
------------------------------------------------------------
FOOTER
------------------------------------------------------------
*/

.site-footer {

    margin-top: 60px;

    color: #d1d5db;

    background: #111827;

}


.footer-container {

    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr;

    gap: 50px;

    padding-top: 50px;

    padding-bottom: 50px;

}


.footer-brand img {

    width: 46px;

    height: 46px;

    object-fit: contain;

    margin-bottom: 15px;

}


.footer-brand p,
.footer-info p {

    max-width: 420px;

    color: #9ca3af;

    font-size: 14px;

}


.footer-navigation h2,
.footer-info h2 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 16px;

}


.footer-navigation li {

    margin-bottom: 8px;

}


.footer-navigation a {

    color: #9ca3af;

    font-size: 14px;

    transition:
        color var(--transicao);

}


.footer-navigation a:hover {

    color: #ffffff;

}


.footer-bottom {

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

}


.footer-bottom-container {

    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.footer-bottom p,
.footer-bottom a {

    color: #9ca3af;

    font-size: 13px;

}


.footer-bottom a:hover {

    color: #ffffff;

}


/*
------------------------------------------------------------
ACESSIBILIDADE
------------------------------------------------------------
*/

:focus-visible {

    outline:
        3px solid rgba(37, 99, 235, 0.35);

    outline-offset: 2px;

}


/*
------------------------------------------------------------
RESPONSIVIDADE
------------------------------------------------------------
*/

@media (max-width: 900px) {

    .menu-toggle {

        display: block;

    }


    .main-navigation {

        position: absolute;

        top: 76px;

        left: 0;

        right: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 12px 20px 18px;

        background: #ffffff;

        border-bottom:
            1px solid var(--cor-borda);

        box-shadow:
            0 8px 20px rgba(15, 23, 42, 0.08);

    }


    .main-navigation.open {

        display: flex;

    }


    .main-navigation a {

        width: 100%;

    }


    .footer-container {

        grid-template-columns: 1fr 1fr;

    }

}


@media (max-width: 640px) {

    body {

        font-size: 15px;

    }


    .container {

        padding-left: 15px;

        padding-right: 15px;

    }


    .header-container {

        min-height: 68px;

    }


    .site-logo-text {

        font-size: 16px;

    }


    .site-logo-image {

        width: 36px;

        height: 36px;

    }


    .main-navigation {

        top: 68px;

        padding-left: 15px;

        padding-right: 15px;

    }


    .section {

        padding-top: 45px;

        padding-bottom: 45px;

    }


    .section-title {

        font-size: 26px;

    }


    .footer-container {

        grid-template-columns: 1fr;

        gap: 30px;

        padding-top: 40px;

        padding-bottom: 40px;

    }


    .footer-bottom-container {

        flex-direction: column;

        justify-content: center;

        text-align: center;

        padding-top: 15px;

        padding-bottom: 15px;

    }


    .btn {

        width: 100%;

    }

}