/*
    Aqui você importa todos os estilos de outras páginas. Como assim?
    
    Caso você tenha um projeto com diversas páginas .html (sobre.html, contato.html, login.html, etc), cada uma delas, muitas vezes, precisa de um estilo muito específico (uma interação apenas daquela página, um botão com cor diferente, etc).
    
    Com isso, para uma melhor organização, dentro da sua pasta styles, você criaria uma pasta que armazene os estilos específicos de cada página .html que você tem, como especificado ao lado, o pages!

    No documento STRUCTURE.md você vai entender melhor o que cada pasta armazena e o que cada arquivo pode conter!


    Assim, o main.css fica responsável apenas por ser o importador dos arquivos para cá (além de estilizar o index.html central). Mas porque dessa tarefa para ele? A questão principal seria: muitos estilos em um único arquivo!

    Modularização e flexibilidade no seu código é importante, principalmente a legibilidade, tanto para você quanto para sua equipe!
*/

@import url('other/_reset.css');
@import url('other/_variables.css');

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

/* HEADER */
header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: var(--size-normal);
    padding: var(--size-normal);

    z-index: 999;
}
.container-display-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.link-home .logo-project { width: var(--size-almost); }
.container-hamb-menu-options .open-close-menu {
    font-weight: 300;
    color: var(--color-font-main);
    cursor: pointer;
    
    transition: font-weight .5s;
}
.container-hamb-menu-options .open-close-menu:hover { font-weight: 500; }
.container-hamb-menu-options nav {
    position: absolute;
    right: 1.5em;
    top: 3.5em;
    padding: var(--size-small);
    border: var(--size-minimal) solid var(--color-bg-menu);

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition: max-height .42s cubic-bezier(.2,.9,.2,1), opacity .28s ease, transform .28s ease;
    z-index: 1000;
}
.container-hamb-menu-options nav:not(.hidden) {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    z-index: 1000;
}
nav ul { text-align: right; }
nav .options-menu {
    color: var(--color-font-main);
    font-weight: 100;
    cursor: pointer;
}
.options-menu li > a {
    transition: font-weight .3s ease;
}
.options-menu li > a:hover {
    font-weight: 300;
}


/* MAIN */
main .container-hero-section {
    min-height: 100dvh;
    background-image: url('../images/pics/desktop/d-img-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.container-hero-section #slogan {
    min-height: 100dvh;
    display: grid;
    place-content: center;

    color: var(--color-font-main);
    font-weight: 100;
    font-size: calc(var(--size-almost) - 0.5em);

    background-color: var(--color-bg-overlay);
}
/* hero e camadas de background (crossfade suave) */
.container-hero-section { position: relative; overflow: hidden; }

/* camadas de background que fazem o crossfade */
.container-hero-section .bg-layer {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    transition: opacity .8s ease;
    will-change: opacity;
    z-index: 0;
    pointer-events: none;
}
.container-hero-section > * { position: relative; z-index: 2; }

main #about {
    min-height: 100dvh;
    background-color: var(--color-bg-about);
    display: flex;
    flex-direction: column;
}
#about .container-bg-about-image {
    background-image: url('../images/pics/general/sunira-moses-unsplash.jpg');
    background-position: center;
    background-size: 30em;
    background-repeat: no-repeat;
    min-height: 70dvh;

    margin: var(--size-medium) var(--size-medium) 0 var(--size-medium);
}
#about .container-about-texts {
    margin: var(--size-medium);
}
.container-about-texts .about-title {
    font-weight: 100;
    font-style: italic;
    font-size: var(--size-almost);
}
.container-about-texts .about-description { font-weight: 200; }



/* FOOTER */
footer {
    min-height: 20dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-font-main);
}
footer .footer-announcement {}
footer > a {
    display: inline-block;
    padding: var(--size-small) var(--size-almost);
    margin-top: var(--size-normal);

    color: var(--color-font-main);
    border: var(--size-minimal) solid var(--color-border-main);

    background-image: linear-gradient(90deg, var(--color-footer-main) 0%, var(--color-footer-main) 100%);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;

    /* transições */
    transition: background-size .45s cubic-bezier(.2,.9,.2,1), color .25s ease, transform .15s ease;
}

footer > a:hover,
footer > a:focus {
    background-size: 100% 100%;
    color: var(--color-font-secondary);
}


/* Respeitar preferência por reduzir movimento */
@media (prefers-reduced-motion: reduce) {
    footer > a {
        transition: none;
    }
    footer > a:hover,
    footer > a:focus {
        transform: none;
        background-size: 100% 100%;
    }
}

/* media queries */
@media screen and (min-width: 767px) {
    /* eliminando o "menu" */
    .container-hamb-menu-options .open-close-menu { display: none; }
    .container-hamb-menu-options .nav-total-options {
        display: flex; position: static;
        flex-direction: row;
        align-items: center;
        gap: var(--size-small);
        border: none; padding: 0;
        
        max-height: none; opacity: 1; transform: none;
        
        pointer-events: auto;
        visibility: visible;
    }
    
    .container-hamb-menu-options .nav-total-options > ul {
        display: flex;
        align-items: center;
        gap: var(--size-small);
        margin: 0; padding: 0;
    }
    /* mudando o bg-img em tamanhos de telas diferentes */
    main .container-hero-section {
        min-height: 100dvh;
        background-image: url('../images/pics/mobile/m-img-1.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .container-hero-section #slogan {
        font-size: calc(var(--size-almost) - 0.5em);
    }

    /* mexendo na mais, na seção sobre */
    #about .container-about-texts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--size-big);
        margin: 0;
    }
    main #about {
        min-height: 100dvh;
        background-color: var(--color-bg-about);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    #about .container-bg-about-image { margin: 0; }
}