@import url("main.css");

/*
    HEADER.CSS

    Description: This css file is used for the header
    container. Including all its properties with
    modifiers like size, colors, backgrounds and others.
*/

.header {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: max-content;
}

.header__nav {
    display: grid;
    background-color: var(--color-yellow);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    place-items: center;
    padding: 12px 10px;
    width: 100%;
    grid-row: 1;
    gap: 0 50px;
}

.header__title,
.header__title span,
.header__description {
    color: var(--color-white);
}

.header__description {
    font-weight: 500;
}

.header__title {
    letter-spacing: 0.25px;
}

/*
    Component: header__logo

    Description: Styles for a header__logo, that like its
    name says is the logo of the header, including its image
    and container
*/

.header__logo {
    height: 125px;
    grid-column: 1;
}

.header__logo-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    min-width: 75px;
}

/*
    Component: header__nav-buttons

    Description: Styles for a header__nav-buttons. Its is
    used to be the container for the idiom buttons.
*/

.header__nav-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    grid-column: 2;
    gap: 20px;
}

.header__menus-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/*
    Component: header__button

    Description: Styles for a header__button, a generic
    button for the header__nav. Its includes properties
    like fonts size and text, background colors, images
    and others
*/

.header__button {
    font-size: 1em;
    border: none;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    color: var(--color-primary);
}

.header__button--text {
    font-size: 1.25em;
    width: 200px;
    padding: 5px;
    border-radius: 20px;
    text-transform: uppercase;
    word-wrap: break-word;
}

.header__nav-buttons--only-img {
    grid-column: 3;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.header__button--with-img {
    width: 4em;
    height: 4em;
    border-radius: 100%;
    background-color: var(--color-orange);
}

.header__button--with-img > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.header__button--bg-transparent {
    background-color: transparent;
    transition: background-color 0.3s;
}

/*
    Section: Responsive

    Description: Media queries that change styles from
    the header component and its childrens. These is
    focused on header containers to show its items,
    by changing display values, heights and other properties
*/

@media (max-width: 1280px) {
    .header__nav {
        grid-template-columns: repeat(5, 1fr);
        padding: 24px 50px;
        gap: 5px;
    }

    .header__nav-buttons:first-of-type {
        display: none;
    }

    .header__menus-container {
        grid-column: 5;
        grid-row: 1;
        padding-right: 5px;
    }
}

@media (max-width: 992px) {
    .header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .header > * {
        flex-grow: 1;
    }

    .header__nav {
        width: 100%;
        height: 100%;
        z-index: 500;
    }
}

@media (max-width: 768px) {
    .header__nav {
        gap: 0;
        padding: 24px;
        height: 100%;
    }
}

@media (max-width: 640px) {
    .header__nav {
        padding: 10px 5px;
    }

    .header__description {
        font-size: 0.9em;
    }
}

@media (max-height: 768px) {
    .header__logo {
        height: 75px;
    }

    .header__button--text {
        font-size: 1.15em;
    }
}

@media (max-height: 768px) and (max-width: 560px) {
    .header__nav {
        height: 75px;
        padding: 0;
        gap: 0 5px;
    }
}

@media (max-width: 560px) and (min-height: 768px) {
    .header__logo {
        width: 100%;
        height: inherit;
    }

    .header__button--text {
        padding: 5px;
        width: 50%;
    }
}

@media (max-width: 560px) {
    .header__description {
        font-size: 0.8em;
    }
}

@media (max-width: 420px) {
    .header__button--text {
        padding: 5px;
    }
}

@media (max-width: 740px) {
    .header__button {
        font-size: 0.9em;
    }
}

@media (max-width: 400px) {
    .header__button {
        font-size: 0.8em;
    }

    .header__description {
        font-size: 0.7em;
    }
}

@media (max-width: 370px) {
    .header__button {
        font-size: 0.75em;
    }
}

@media (max-width: 350px) {
    .header__button {
        font-size: 0.65em;
    }

    .header__nav-buttons {
        gap: 20px 10px;
    }
}

@media (max-width: 310px) {
    .header__button {
        font-size: 0.55em;
    }
}

@media (max-width: 280px) {
    .header__button {
        font-size: 0.5em;
    }
}

/* RESPONSIVE HEIGHT */

@media (max-height: 768px) {
    .header__button--with-img {
        height: 3em;
        width: 3em;
    }
}

@media (max-height: 360px) {
    .header__button--text {
        font-size: 1em;
    }
}

@media (max-height: 300px) {
    .header {
        flex-direction: column;
    }
}

@media (max-height: 768px) and (min-width: 560px) {
    .header__nav {
        height: 75px;
        padding: 0px 5px;
        gap: 0 5px;
    }
}

@media (max-height: 768px) and (max-width: 340px) {
    .header__button--text {
        width: 100%;
    }
}

@media (max-height: 360px) {
    .header__nav {
        height: 60px;
        padding: 0 5px;
    }

    .header__logo {
        height: 60px;
    }
}