/* =========================================================
   HEADER MOBILE FIRST
   ========================================================= */

.site-header {
    position: relative;
    z-index: var(--header-z-index);

    width: 100%;

    background-color: var(--color-purple-dark);
    border-bottom: 5px solid var(--color-green);
}


/* =========================================================
   LOGO
   ========================================================= */

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

    min-height: 3.75rem;
    padding: 0.45rem var(--page-gutter);

    background-color: var(--color-green);
}

.site-header__logo-link {
    display: block;

    border-radius: 0.25rem;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.site-header__logo-link:hover {
    transform: scale(1.03);
}

.site-header__logo-link:active {
    transform: scale(0.98);
}

.site-header__logo {
    width: clamp(4.25rem, 20vw, 7rem);
    height: auto;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.site-header__nav {
    width: 100%;

    background-color: var(--color-purple-dark);
}

.site-header__menu {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.55fr)
        minmax(0, 1.05fr);

    width: 100%;
    min-height: 3.35rem;
}

.site-header__link {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    padding: 0.65rem 0.18rem;

    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: clamp(0.56rem, 2.65vw, 0.73rem);
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.site-header__link:hover {
    color: var(--color-green);
    background-color: rgb(255 255 255 / 5%);
}

.site-header__link--active {
    color: var(--color-green);
}

.site-header__link--active::after {
    content: "";

    position: absolute;
    right: 25%;
    bottom: 0.25rem;
    left: 25%;

    height: 2px;

    background-color: currentColor;
    border-radius: 999px;

    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-fast);
}

.site-header__link--active:hover::after,
.site-header__link--active:focus-visible::after {
    transform: scaleX(1);
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 22.5rem) {
    .site-header__menu {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 0.95fr)
            minmax(0, 1.45fr)
            minmax(0, 1fr);
    }

    .site-header__link {
        padding-inline: 0.1rem;
        font-size: 0.52rem;
    }
}


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

@media (min-width: 48rem) {
    .site-header__brand {
        min-height: 4.5rem;
    }

    .site-header__logo {
        width: 8rem;
    }

    .site-header__menu {
        min-height: 4rem;
    }

    .site-header__link {
        padding-inline: 0.75rem;
        font-size: 0.9rem;
    }
}


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

@media (min-width: 64rem) {
    .site-header {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: center;

        min-height: 6.5rem;
        padding-inline: var(--page-gutter);

        border-bottom-width: 0.75rem;
    }

    .site-header__brand {
        grid-column: 2;
        grid-row: 1;

        min-height: auto;
        padding: 0 1.8rem;

        background-color: transparent;
    }

    .site-header__logo {
        width: clamp(6rem, 8vw, 9rem);
    }

    .site-header__nav {
        grid-column: 1 / -1;
        grid-row: 1;

        background-color: transparent;
    }

    .site-header__menu {
        grid-template-columns:
            minmax(7rem, 1fr)
            minmax(7rem, 1fr)
            minmax(12rem, 1fr)
            minmax(8rem, 1fr);

        min-height: auto;
    }

    .site-header__link {
        padding: 1.25rem 1rem;

        font-size: clamp(0.9rem, 1.3vw, 1.15rem);
        line-height: 1.05;
    }

    .site-header__link:nth-child(2) {
        padding-right: clamp(5.5rem, 9vw, 8rem);
    }

    .site-header__link:nth-child(3) {
        padding-left: clamp(5.5rem, 9vw, 8rem);
    }

    .site-header__link--active::after {
        right: 32%;
        bottom: 0.7rem;
        left: 32%;
    }
}


/* =========================================================
   MONITORES GRANDES
   ========================================================= */

@media (min-width: 90rem) {
    .site-header {
        min-height: 7rem;
    }

    .site-header__menu {
        width: min(100%, 100rem);
        margin-inline: auto;
    }

    .site-header__link {
        font-size: 1.15rem;
    }
}