@import url("common.css");

/* === HEADER === */

header,
header * {
    box-sizing: border-box;
}

header {
    padding: 0;
    background-color: var(--color-accent1);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 4px color-mix(in srgb, var(--color-dark) 30%, transparent);
}

header .container {
    position: relative;
    padding: 4.45rem var(--padding) 0 var(--padding);
}

header .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .banner a.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
}

header .logo {
    /* padding-top: 5px; */
    /* padding-left: 88px; */
    min-width: 0;
    height: 11.59rem;
}

header .slogan {
    text-transform: uppercase;
    color: var(--color-white);
    /* max-width: 620px; */
    flex-shrink: 0;
    text-align: left;
    font-size: clamp(2.0rem, 3vw, var(--font-size-slogan));
    line-height: 4.5rem;
    letter-spacing: -0.005rem;
    /* padding-right: 4.139rem; */
}

header .slogan strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-pink);
}


/* === MENU === */

header nav {
    /* position: absolute; */
    display: block;
    margin: 0 auto;
    /* left: 50%; */
    /* bottom: 0; */
    transform: translate(0, 50%);
    z-index: 10;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background-color: var(--color-pink);
    border-radius: 5rem;
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-dark) 50%, transparent);
}

header nav ul li {
    margin: 0;
}

header nav ul li a {
    color: var(--color-dark);
    font-size: var(--font-size-menu);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    letter-spacing: 0;
    text-wrap: nowrap;
    padding: 0.6rem clamp(0.2rem, 1.9vw, 4.5rem);
    border-radius: 5rem;
}

header nav ul li a:hover {
    background-color: var(--color-white);
    transition: all var(--transition);
}



/* === FOOTER === */

footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    /* font-size: var(--font-size-subtext); */
    padding: 6.209rem 0;
    text-transform: uppercase;
}

footer .banner {
    display: flex;
    align-items: center;
    gap: 3.104rem;
}

footer .banner img {
    width: 100%;
}

footer .slogan {
    font-size: var(--font-size-subtext);
    font-weight: var(--font-weight-semibold);
}

footer .slogan .highlight {
    color: var(--color-pink);
}

footer .menu {
    font-size: var(--font-size-menu);
}

footer .menu ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.035rem;
    margin: 4.139rem 0;
    padding: 0;
    background-color: var(--color-pink);
    border-radius: 5rem;
    box-shadow: 0px 4px 4px var(--color-dark);
}

footer .menu ul li {
    margin: 0;
}

footer .menu ul li a {
    color: var(--color-dark);
    font-size: var(--font-size-menu);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    letter-spacing: 0;
    padding: 0.4rem clamp(2rem, 8vw, 14rem);
    border-radius: 5rem;
}

footer .menu ul li a:hover {
    background-color: var(--color-white);
    transition: all var(--transition);
}

footer .credits {
    font-size: var(--font-size-subtext);
}

footer .credits a {
    color: var(--color-white);
    font-weight: var(--font-weight-regular);
    text-decoration: underline;
}