/* reset */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    font: inherit;
}
picture, img, svg {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    background: inherit;
    border: none;
}
ol, ul {
    list-style: none;
}
/* defined variables */
:root {
    --Dark-Gray: hsl(0, 0%, 63%);
    --Black: hsl(0, 0%, 0%);
    --White: hsl(0, 0%, 100%);
    --Very-Dark-Gray: hsl(0, 0%, 27%);

    --fs-paragraph: 0.9375rem;
    --fw-regular: 500;
    --fw-bold: 600;
    --fw-extrabold: 700;
}
/* default display: desktop version */
body {
    /* background-color: var(--Dark-Gray); */
    min-height: 100svh;
    font-family: "League Spartan";
}
.header {
    position: absolute;
    left: 60px;
    top: 60px;
    z-index: 10;
    display: flex;
}
.header__hamburger-button {
    display: none;
}
.nav {
    margin-inline-start: 56px;
}
.nav__list {
    display: flex;
    gap: 32px;
}
.nav__close-button {
    display: none;
}
.nav__link {
    color: var(--White)
}
.main {
    min-height: 100svh;
    display: grid;
    grid-template-rows: 534fr 266fr;
}
.slide-1, .slide-2, .slide-3 {
    display: grid;
    grid-template-columns: 840fr 600fr;
}
.slide-1__hero, .slide-2__hero, .slide-3__hero {
    position: relative;
}
.slide-1__hero-picture, 
.slide-2__hero-picture, 
.slide-3__hero-picture {
    width: 100%;
    height: 100%;
}
.slide-1__hero-img, 
.slide-2__hero-img, 
.slide-3__hero-img {
    height: 100%;
    width: 100%;
    max-height: 100svh;
}
.slide-link {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    display: flex;
}
.slide-link__left-link,
.slide-link__right-link {
    width: 5rem;
    height: 5rem;
    background-color: var(--Black);
    display: grid;
    place-content: center;
}
.slide-1__content,
.slide-2__content,
.slide-3__content {
    padding-inline: 102px;
    padding-block: 120px;
}
.slide-1__heading, 
.slide-2__heading, 
.slide-3__heading {
    font-size: 2.5rem;
    font-weight: var(--fw-extrabold);
}
.slide-1__description,
.slide-2__description,
.slide-3__description {
    margin-block-start: 1rem;
    color: var(--Dark-Gray);
    line-height: 1.3;
    font-size: var(--fs-paragraph);
}
.shop-now {
    display: flex;
    margin-block-start: 1rem;
    color: var(--Black);
    letter-spacing: 0.75rem;
    text-transform: uppercase;
    gap: 24px;
}
.shop-now__arrow-svg {
    min-width: 40px;
    & path {
        fill: black;
    }
}
.lower {
    display: grid;
    grid-template-columns: 420fr 580fr 440fr;
}
.lower__leading-img, 
.lower__after-img {
    height: 100%;
}
.lower__content {
    padding-inline: 52px;
    padding-block: 64px;
}
.lower__heading {
    text-transform: uppercase;
    /* font-size: 1.5rem; */
    letter-spacing: 0.5rem;
    font-weight: var(--fw-extrabold);
}
.lower__paragraph {
    margin-block-start: 1rem;
    font-size: var(--fs-paragraph);
    color: var(--Dark-Gray);
    line-height: 1.3;
}

/* slideshow function */
html {
    scroll-padding-top: 999999px;
}
.slide-1, 
.slide-2, 
.slide-3 {
    display: none;
    &:target {
        display: grid;
    }
}
html:not(:has(:target)) {
    & .slide-1 {
        display: grid;
    }
}

/* display: mobile version */
@media (max-width: 840px) {
    .main, .slide-1, .slide-2, .slide-3, .lower {
        grid-template-columns: unset;
        grid-template-rows: unset;
    }
    .slide-link__left-link,
    .slide-link__right-link {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .slide-1__content,
    .slide-2__content,
    .slide-3__content {
        padding-block: 60px;
        padding-inline: 30px;
    }
    .slide-1__heading,
    .slide-2__heading,
    .slide-3__heading {
        font-size: 2.125rem;
        line-height: 1.1;
    }
    .slide-1__description,
    .slide-2__description,
    .slide-3__description {
        line-height: 1.6;
    }
    .shop-now {
        margin-block-start: 2.5rem;
    }
    .slide-link {
        transform: unset;
    }
    .lower__leading-img,
    .lower__after-img {
        height: unset;
        width: 100%;
    }
    .lower__content {
        padding-inline: 30px;
        padding-block-start: 52px;
        padding-block-end: 40px;
    }
    .lower__heading {
        font-size: 0.875rem;
        letter-spacing: 0.375rem;
    }
    .lower__paragraph {
        margin-block-start: 1.5rem;
        line-height: 1.5;
    }
}

/* collapse top nav */
@media (max-width: 560px) {
    .header {
        top: 45px;
        left: 0;
        width: 100%;
    }
    .header__hamburger-button {
        display: block;
        position: absolute;
        left: 24px;
        cursor: pointer;
    }
    .header__website-link {
        margin-inline: auto;
    }
    .nav {
        display: none;
    }
    .nav.show-side-nav {
        display: block;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: hsl(from var(--Black) h s l / 60%);
        margin: unset;
        & .nav__list {
            width: 100%;
            height: 110px;
            align-items: center;
            padding-inline: 24px;
            background-color: var(--White);
            overflow-x: auto;
        }
        & .nav__close-button {
            display: block;
            cursor: pointer;
        }
        & .nav__list-item:first-child {
            margin-inline-end: auto;
            flex-shrink: 0;
        }
        & .nav__link {
            color: black;
            font-weight: var(--fw-bold);
        }
    }
}

/* hover status */
.nav__list-item:nth-of-type(n+2),
.nav__list-item:nth-of-type(n+2) {
    position: relative;
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        margin-inline: auto;
        width: 0;
        border-bottom: 2px solid var(--White);
        transform: translateY(8px);
        transition: width 0.3s ease;
        z-index: -100;
    }
    &:hover::after,
    &:focus-visible::after {
        width: 100%;
    }
}
.slide-link__left-link:hover,
.slide-link__left-link:focus-visible,
.slide-link__right-link:hover,
.slide-link__right-link:focus-visible {
    background-color: hsl(from var(--Black) h s calc(l + 20%) );
    transition: background-color 0.15s ease;
}

.shop-now:hover,
.shop-now:focus-visible {
    color: var(--Dark-Gray);
    & .shop-now__arrow-svg {
        & path {
            fill: var(--Dark-Gray);
        }
    }
}