/* =============================================================================
   TV ATLÂNTICA
   ESTILO GLOBAL
   =============================================================================
   
   Arquivo responsável pelos estilos compartilhados de toda a aplicação.

   Princípios:
   - Mobile First;
   - componentes reutilizáveis;
   - acessibilidade;
   - responsividade;
   - simplicidade;
   - classes semânticas;
   - estilos específicos de páginas ficam em seus próprios arquivos.
   ============================================================================= */


/* =============================================================================
   FONTES
   ============================================================================= */

/* Inter - Normal */
@font-face {
    font-family: "Inter";
    src: url("/public/fonts/inter/inter.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* Inter - Itálico */
@font-face {
    font-family: "Inter";
    src: url("/public/fonts/inter/inter-italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/* Material Symbols Rounded */
@font-face {
    font-family: "Material Symbols Rounded";
    src: url("/public/fonts/material-symbols/material-symbols-rounded.ttf")
        format("truetype");
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
}


/* =============================================================================
   MATERIAL SYMBOLS
   ============================================================================= */

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 1.75rem;
    line-height: 1;

    display: inline-block;

    white-space: nowrap;
    word-wrap: normal;

    direction: ltr;

    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;

    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}


/* =============================================================================
   VARIÁVEIS GLOBAIS
   ============================================================================= */

:root {

    /* -------------------------------------------------------------------------
       CORES INSTITUCIONAIS
       ------------------------------------------------------------------------- */

    --cor-amarelo: #f0d40b;
    --cor-azul: #00a8ec;
    --cor-vermelho: #df0024;
    --cor-verde: #99cf15;
    --cor-azul-titulo: #3d107b;
    --cor-fundo-site: #1A237E;

    /* -------------------------------------------------------------------------
       CORES NEUTRAS
       ------------------------------------------------------------------------- */

    --cor-branco: #ffffff;
    --cor-preto: #000000;

    --cor-texto: #333333;
    --cor-fundo: #ffffff;
    --cor-borda: #dddddd;

    /* -------------------------------------------------------------------------
       TIPOGRAFIA
       ------------------------------------------------------------------------- */

    --fonte-principal: "Inter", Arial, Helvetica, sans-serif;

    --fonte-tamanho-base: 1rem;
    --linha-base: 1.6;

    /* -------------------------------------------------------------------------
       ESPAÇAMENTOS
       ------------------------------------------------------------------------- */

    --espaco-1: 0.25rem;
    --espaco-2: 0.5rem;
    --espaco-3: 0.75rem;
    --espaco-4: 1rem;
    --espaco-5: 1.5rem;
    --espaco-6: 2rem;
    --espaco-7: 3rem;

    /* -------------------------------------------------------------------------
       LAYOUT
       ------------------------------------------------------------------------- */

    --largura-conteudo: 1200px;

    /* -------------------------------------------------------------------------
       BORDAS
       ------------------------------------------------------------------------- */

    --raio-pequeno: 0.25rem;
    --raio-medio: 0.5rem;

    /* -------------------------------------------------------------------------
       TRANSIÇÕES
       ------------------------------------------------------------------------- */

    --transicao-rapida: 150ms ease;
    --transicao-padrao: 250ms ease;
}


/* =============================================================================
   NORMALIZAÇÃO
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;

    min-height: 100vh;

    font-family: var(--fonte-principal);
    font-size: var(--fonte-tamanho-base);
    line-height: var(--linha-base);

    color: var(--cor-texto);
    background-color: var(--cor-fundo);
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

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

button {
    cursor: pointer;
}

a {
    color: inherit;
}


/* =============================================================================
   ACESSIBILIDADE
   ============================================================================= */

/*
 * Link para pular diretamente ao conteúdo principal.
 *
 * Permanece fora da área visível durante a navegação normal
 * e aparece quando recebe foco pelo teclado.
 */

.skip-link {
    position: absolute;

    top: var(--espaco-2);
    left: var(--espaco-2);

    z-index: 10000;

    padding: var(--espaco-2) var(--espaco-4);

    color: var(--cor-branco);
    background-color: var(--cor-azul-titulo);

    text-decoration: none;

    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}


/*
 * Foco visível para navegação por teclado.
 */

:focus-visible {
    outline: 3px solid var(--cor-azul);
    outline-offset: 3px;
}


/* =============================================================================
   TIPOGRAFIA GLOBAL
   ============================================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: var(--espaco-4);
}


/* =============================================================================
   CONTAINER GLOBAL
   ============================================================================= */

.container {
    width: min(
        calc(100% - (var(--espaco-4) * 2)),
        var(--largura-conteudo)
    );

    margin-inline: auto;
}


/* =============================================================================
   HEADER
   ============================================================================= */

.site-header {
    width: 100%;

    background-color: var(--cor-branco);

    /*
     * Mobile First.
     *
     * A versão de 480px é a imagem-base do cabeçalho.
     */

    background-image:
        url("/public/images/layout/fundo-header-480.jpg");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

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


/* -------------------------------------------------------------------------
   CONTEÚDO DO HEADER
   ------------------------------------------------------------------------- */

.site-header__conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: var(--espaco-1);
}


/* -------------------------------------------------------------------------
   BOTÕES DO HEADER
   ------------------------------------------------------------------------- */

.site-header__menu,
.site-header__pesquisa {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 44px;
    min-height: 44px;

    padding: var(--espaco-2);

    color: var(--cor-azul-titulo);
    background: transparent;

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

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

.site-header__menu .material-symbols-rounded,
.site-header__pesquisa .material-symbols-rounded {
    font-size: 2rem;
}


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

.site-header__logo {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    text-decoration: none;
}


/*
 * Símbolo da TV Atlântica.
 */

.site-header__logo-simbolo {
    flex: 0 0 auto;

    width: 2.5rem;
    height: auto;
}


/*
 * Nome TV Atlântica.
 */

.site-header__logo-nome {
    width: 9rem;
    height: auto;

    margin-left: var(--espaco-2);
}



/* =============================================================================
   MENU LATERAL
   ============================================================================= */

.menu-lateral {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;

    width: min(85vw, 20rem);
    height: 100vh;
    height: 100dvh;

    padding: var(--espaco-4);

    color: var(--cor-texto);
    background-color: var(--cor-branco);

    box-shadow: 0 0 1.5rem rgb(0 0 0 / 20%);
    overflow-y: auto;

    transform: translateX(-105%);
    visibility: hidden;

    transition:
        transform var(--transicao-padrao),
        visibility 0s linear var(--transicao-padrao);
}

.menu-lateral--aberto {
    transform: translateX(0);
    visibility: visible;

    transition:
        transform var(--transicao-padrao),
        visibility 0s;
}


/* -------------------------------------------------------------------------
   CABEÇALHO DO MENU
   ------------------------------------------------------------------------- */

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

    gap: var(--espaco-4);
    padding-bottom: var(--espaco-4);

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

.menu-lateral__titulo {
    color: var(--cor-azul-titulo);
    font-size: 1.25rem;
    font-weight: 700;
}

.menu-lateral__fechar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 44px;
    min-height: 44px;

    padding: var(--espaco-2);

    color: var(--cor-azul-titulo);
    background: transparent;

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

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


/* -------------------------------------------------------------------------
   NAVEGAÇÃO DO MENU
   ------------------------------------------------------------------------- */

.menu-lateral__lista {
    margin: var(--espaco-4) 0 0;
    padding: 0;

    list-style: none;
}

.menu-lateral__item + .menu-lateral__item {
    margin-top: var(--espaco-1);
}

.menu-lateral__link {
    display: block;

    padding: var(--espaco-3) var(--espaco-2);

    color: var(--cor-texto);
    text-decoration: none;

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

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


/* =============================================================================
   OVERLAY DO MENU
   ============================================================================= */

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;

    background-color: rgb(0 0 0 / 45%);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transicao-padrao),
        visibility 0s linear var(--transicao-padrao);
}

.menu-overlay--visivel {
    opacity: 1;
    visibility: visible;

    transition:
        opacity var(--transicao-padrao),
        visibility 0s;
}

/* =============================================================================
   PESQUISA
   ============================================================================= */

.pesquisa {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 2000;

    padding: var(--espaco-4);

    background-color: var(--cor-branco);

    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 15%);

    transform: translateY(-105%);
    visibility: hidden;

    transition:
        transform var(--transicao-padrao),
        visibility 0s linear var(--transicao-padrao);
}

.pesquisa--aberta {
    transform: translateY(0);
    visibility: visible;

    transition:
        transform var(--transicao-padrao),
        visibility 0s;
}


/* -------------------------------------------------------------------------
   CONTEÚDO DA PESQUISA
   ------------------------------------------------------------------------- */

.pesquisa__conteudo {
    width: 100%;
    max-width: var(--largura-conteudo);

    margin-inline: auto;
}

.pesquisa__formulario {
    width: 100%;
}

.pesquisa__label {
    display: block;

    margin-bottom: var(--espaco-2);

    color: var(--cor-azul-titulo);

    font-weight: 700;
}


/* -------------------------------------------------------------------------
   CAMPO DE PESQUISA
   ------------------------------------------------------------------------- */

.pesquisa__campo {
    display: flex;
    align-items: center;

    width: 100%;

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

    background-color: var(--cor-branco);
}

.pesquisa__icone {
    flex: 0 0 auto;

    margin-left: var(--espaco-3);

    color: var(--cor-azul-titulo);
}

.pesquisa__input {
    flex: 1 1 auto;

    min-width: 0;

    padding:
        var(--espaco-3)
        var(--espaco-2);

    color: var(--cor-texto);
    background: transparent;

    border: 0;
    outline: 0;
}

.pesquisa__input::placeholder {
    color: #777777;
}

/* Remove o botão nativo de limpar do campo search */
.pesquisa__input::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
}

.pesquisa__campo:focus-within {
    border-color: var(--cor-azul);

    box-shadow:
        0 0 0 2px rgb(0 168 236 / 20%);
}


/* -------------------------------------------------------------------------
   BOTÃO FECHAR
   ------------------------------------------------------------------------- */

.pesquisa__fechar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 44px;
    min-height: 44px;

    margin-right: var(--espaco-1);
    padding: var(--espaco-2);

    color: var(--cor-azul-titulo);
    background: transparent;

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

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


/* =============================================================================
   OVERLAY DA PESQUISA
   ============================================================================= */

.pesquisa-overlay {
    position: fixed;

    inset: 0;

    z-index: 1900;

    background-color: rgb(0 0 0 / 45%);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transicao-padrao),
        visibility 0s linear var(--transicao-padrao);
}

.pesquisa-overlay--visivel {
    opacity: 1;
    visibility: visible;

    transition:
        opacity var(--transicao-padrao),
        visibility 0s;
}

/* =============================================================================
   CONTEÚDO PRINCIPAL
   ============================================================================= */

main {
    width: 100%;
}


/* =============================================================================
   LINKS
   ============================================================================= */

a {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
    width: 100%;

    color: var(--cor-azul-titulo);
    background-color: var(--cor-branco);

    border-top: 0.25rem solid var(--cor-azul-titulo);
}


/* -------------------------------------------------------------------------
   ÁREA PRINCIPAL
   ------------------------------------------------------------------------- */

.site-footer__principal {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--espaco-5);

    width: 100%;

    padding:
        var(--espaco-5)
        var(--espaco-4);
}


/* -------------------------------------------------------------------------
   MARCA
   ------------------------------------------------------------------------- */

.site-footer__marca {
    display: flex;
    justify-content: center;

    width: 100%;
}

.site-footer__logo {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--espaco-2);

    text-decoration: none;
}

.site-footer__logo-simbolo {
    display: block;

    width: auto;
    height: 3.5rem;
}

.site-footer__logo-nome {
    display: block;

    width: auto;
    height: 1.75rem;
}


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

.site-footer__navegacao {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--espaco-4);

    width: 100%;
}


/* -------------------------------------------------------------------------
   REDES SOCIAIS
   ------------------------------------------------------------------------- */

.site-footer__redes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: var(--espaco-4);
}

.site-footer__rede {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    min-height: 44px;

    color: var(--cor-azul-titulo);

    font-weight: 600;
    text-decoration: none;

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

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


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

.site-footer__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap:
        var(--espaco-2)
        var(--espaco-4);
}

.site-footer__menu a {
    color: var(--cor-azul-titulo);

    font-weight: 600;
    text-decoration: none;

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

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


/* =============================================================================
   FAIXA INFERIOR
   ============================================================================= */

.site-footer__inferior {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--espaco-3);

    width: 100%;

    padding:
        var(--espaco-4)
        var(--espaco-4);

    background-color: #f3f4f6;
}

.site-footer__copyright {
    margin: 0;

    color: var(--cor-texto);

    font-size: 0.875rem;
    text-align: center;
}


/* -------------------------------------------------------------------------
   CATEGORIAS
   ------------------------------------------------------------------------- */

.site-footer__categorias {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: var(--espaco-2);

    font-size: 0.875rem;
}

.site-footer__categorias a {
    color: var(--cor-texto);

    text-decoration: none;

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

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

.site-footer__categorias span {
    color: var(--cor-texto);
}

/* =============================================================================
   INTERAÇÕES DISPONÍVEIS COM PONTEIRO
   ============================================================================= */

@media (hover: hover) {

    .site-header__menu:hover,
    .site-header__pesquisa:hover,
    .menu-lateral__fechar:hover {
        background-color: rgb(255 255 255 / 60%);
    }

    .menu-lateral__link:hover {
        color: var(--cor-azul-titulo);
        background-color: rgb(0 168 236 / 10%);
    }

    .pesquisa__fechar:hover {
        background-color: rgb(0 168 236 / 10%);
    }

    .site-footer__rede:hover,
    .site-footer__menu a:hover,
    .site-footer__categorias a:hover {
        color: var(--cor-azul);
    }
}


    /* =============================================================================
    TABLET
    ============================================================================= */

    @media (min-width: 48rem) {

        /* -------------------------------------------------------------------------
        TIPOGRAFIA
        ------------------------------------------------------------------------- */

        h1 {
            font-size: 2.5rem;
        }

        h2 {
            font-size: 2rem;
        }

        h3 {
            font-size: 1.75rem;
        }


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

        .site-header {
            background-image:
                url("/public/images/layout/fundo-header-768.jpg");
        }

        .site-header__conteudo {
            padding:
                var(--espaco-2)
                var(--espaco-6);
        }

        .site-header__logo-simbolo {
            width: 3.5rem;
        }

        .site-header__logo-nome {
            width: 14.5rem;

            margin-left: var(--espaco-3);
        }

        .site-header__menu .material-symbols-rounded,
        .site-header__pesquisa .material-symbols-rounded {
            font-size: 2.25rem;
        }

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

        .site-footer__principal {
            padding:
                var(--espaco-5)
                var(--espaco-6);
        }

        .site-footer__inferior {
            padding:
                var(--espaco-4)
                var(--espaco-6);
        }
    }


/* =============================================================================
   DESKTOP
   ============================================================================= */

@media (min-width: 64rem) {

    .site-header {
        background-image:
            url("/public/images/layout/fundo-header-1024.jpg");
    }

    .site-header__conteudo {
        padding:
            var(--espaco-2)
            var(--espaco-7);
    }

    .site-header__logo-simbolo {
        width: 5rem;
    }

    .site-header__logo-nome {
        width: 21rem;

        margin-left: var(--espaco-4);
    }

    .site-header__menu .material-symbols-rounded,
    .site-header__pesquisa .material-symbols-rounded {
        font-size: 2.5rem;
    }

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

    .site-footer__principal {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        padding:
            var(--espaco-5)
            var(--espaco-7);
    }

    .site-footer__marca {
        justify-content: flex-start;

        width: auto;
    }

    .site-footer__navegacao {
        align-items: flex-end;

        width: auto;
    }

    .site-footer__redes {
        justify-content: flex-end;
    }

    .site-footer__menu {
        justify-content: flex-end;
    }

    .site-footer__inferior {
        flex-direction: row;
        justify-content: space-between;

        padding:
            var(--espaco-4)
            var(--espaco-7);
    }

    .site-footer__copyright {
        text-align: left;
    }

    .site-footer__categorias {
        justify-content: flex-end;
    }
}


/* =============================================================================
   DESKTOP GRANDE
   ============================================================================= */

@media (min-width: 90rem) {

    .site-header {
        background-image:
            url("/public/images/layout/fundo-header-1440.jpg");
    }

    .site-header__conteudo {
        max-width: 1600px;
        margin-inline: auto;
    }
}


/* =============================================================================
   TELAS MUITO GRANDES
   ============================================================================= */

@media (min-width: 120rem) {

    .site-header {
        background-image:
            url("/public/images/layout/fundo-header-2560.jpg");
    }
}


/* =============================================================================
   REDUÇÃO DE MOVIMENTO
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}