/*
Name: Peter Jungers
Date: 11/18/22
Exercise: Frontend Mentor: News homepage
*/


/* || CSS RESET */
html, body, header, main, footer, section, div, h1, h2, h3, p, a, img, ul, li, button {
    margin: 0;
    padding: 0;
    border: 0;
}


/* || Default styles are for narrow screens */
/* || GENERAL STYLES: Default */
:root {
    --soft-orange: hsl(35, 77%, 62%);
    --soft-red: hsl(5, 85%, 63%);
    --off-white: hsl(36, 100%, 99%);
    --gray-blue: hsl(233, 8%, 79%);
    --dark-gray-blue: hsl(236, 13%, 42%);
    --very-dark-blue: hsl(240, 100%, 5%);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--off-white);
    font-family: Inter, Arial, sans-serif;
    /* So font-size doesn't increase when mobile switches to landscape: */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
}

header {
    margin: 30px 0;
}

main {
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: 60px;
    margin-bottom: 60px;
}

footer {
    margin-bottom: 30px;
}

p {
    color: var(--dark-gray-blue);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75em;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

a:focus {
    outline-color: var(--dark-gray-blue);
}

img {
    width: 100%;
}


/* || UTILITIES: Default */
.tab-desk-nav,
.hero-horizontal {
    display: none;
}

.btn {
    background-color: var(--soft-red);
    width: 186px;
    height: 48px;
}

.btn p {
    color: var(--off-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3em;
    line-height: 50px;
    text-transform: uppercase;
    text-align: center;
}


/* || SITEWIDE: Default */
#container {
    padding: 0 15px;
}

/* Logo and hamburger icon */
.logo {
    width: 65px;
    height: 40px;
}

/* Necessary for img as a link: */
img.logo {
    vertical-align: bottom;
}

#logo-hamburger {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#hamburger-icon {
    display: flex;
    align-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.hamburger-line {
    background-color: black;
    width: 100%;
    height: 3px;
}

.hamburger-line::before {
    content: "";
    position: absolute;
    background-color: black;
    width: 100%;
    height: 3px;
    transform: translateY(-10px);
}

.hamburger-line::after {
    content: "";
    position: absolute;
    background-color: black;
    width: 100%;
    height: 3px;
    transform: translateY(10px);
}

/* Mobile nav menu */
.mobile-nav {
    height: 0;
    overflow: hidden;
    transition: height 0.75s;
}

.mobile-nav.active {
    height: 255px; /* Height of all li elements plus top borders */
    overflow: visible;
}

.mobile-nav ul {
    margin-top: 30px;
}

.mobile-nav li {
    border-top: 1px solid var(--gray-blue);
    height: 50px;
    line-height: 50px;
    text-align: right;
}

.mobile-nav li:active {
    background-color: var(--gray-blue);
}

.mobile-nav a {
    display: block;
    color: var(--very-dark-blue);
    font-size: 1.5em;
    font-weight: 700;
    text-decoration: none;
    padding-right: 10px;
}

/* Attribution */
.attribution {
    color: var(--dark-gray-blue);
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: var(--soft-orange);
}


/* || INTRO SECTION: Default */
.intro {
    display: grid;
    grid-template-rows: repeat(4, auto);
    gap: 20px;
}

.intro h1 {
    color: var(--very-dark-blue);
    font-weight: 800;
    font-size: 2.75em;
    line-height: 1.05em;
}


/* || SECTION USING LIST: Default */
.list-box {
    background-color: var(--very-dark-blue);
    padding: 25px 20px 0;
}

.list-box h2 {
    color: var(--soft-orange);
    font-size: 2em;
    font-weight: 700;
}

.list-box h3 {
    color: var(--off-white);
    font-size: 1.25em;
    margin-bottom: .5em;
}

.list-box p {
    color: var(--gray-blue);
    font-weight: 300;
}

.list-box ul {
    list-style-type: none;
    padding: 0;
}

.list-box li {
    border-bottom: 1px solid var(--dark-gray-blue);
    padding: 2em 0;
}

.list-box li:last-child {
    border-bottom: none;
}

.list-box li a {
    color: var(--off-white);
}


/* || SECTION USING GRID: Default */
.grid-box {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 35px;
}

/* .grid-cell is each img/text pair within .grid-box */
.grid-cell {
    display: flex;
    column-gap: 23px;
}

.grid-cell-img {
    width: 100px;
    height: 127px;
}

.grid-cell h2 {
    color: var(--gray-blue);
    font-size: 2em;
    line-height: 1em;
    margin-bottom: .4em;
}

.grid-cell h3 {
    font-size: 1.15em;
    margin-bottom: .425em;
}

.grid-cell a {
    color: var(--very-dark-blue);
}


/* || Horizontal small mobile viewport */
@media screen and (min-width: 480px) {
    /* || UTILITIES: Horizontal small mobile viewport */
    .hero-square {
        display: none;
    }

    .hero-horizontal {
        display: block;
    }
}


/* || Vertical tablet viewports */
@media screen and (min-width: 768px) {
    /* || GENERAL STYLES: Vertical tablet viewports */
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 50px 0;
    }

    main {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        column-gap: 30px;
        row-gap: 70px;
        margin-bottom: 60px;
    }


    /* || UTILITIES: Vertical tablet viewports */
    #hamburger-icon,
    .hamburger-line,
    .mobile-nav,
    .hero-horizontal {
        display: none;
    }

    .tab-desk-nav,
    .hero-square {
        display: block;
    }

    .btn:hover {
        background-color: var(--very-dark-blue);
        cursor: pointer;
    }


    /* || SITEWIDE: Vertical tablet viewports */
    #container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .tab-desk-nav li {
        display: inline-block;
        padding: 0 20px;
    }

    .tab-desk-nav li:last-of-type {
        padding-right: 0;
    }

    .tab-desk-nav a {
        color: var(--dark-gray-blue)
    }

    .tab-desk-nav a:hover {
        color: var(--soft-red)
    }

    .attribution {
        text-align: right;
        padding-right: 5px;
    }

    .attribution a:hover {
        color: var(--soft-red);
    }


    /* || INTRO SECTION: Vertical tablet viewports */
    .intro {
        grid-column: 1 / span 2; /* Placement within main grid */
        align-self: start; /* Aligned at start within main grid */
        display: grid; /* Begin styles for .intro grid */
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 30px;
    }

    .intro #hero {
        grid-column: 1 / span 2;
    }

    .intro h1 {
        grid-column: 1 / span 2;
        grid-row: 2;
        font-size: 3.6em;
    }

    .intro p {
        grid-column: 1 / span 2;
        grid-row: 3;
    }

    .intro .btn {
        grid-column: 1;
    }


    /* || SECTION USING LIST: Vertical tablet viewports */
    .list-box {
        padding: 31px 27px 0;
    }

    .list-box h2 {
        font-size: 2.5em;
    }

    .list-box li a:hover {
        color: var(--soft-orange);
    }


    /* || SECTION USING GRID: Vertical tablet viewports */
    .grid-box {
        grid-column: 1 / span 3; /* Placement within main grid */
        grid-template-rows: none;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .grid-cell a:hover {
        color: var(--soft-red);
    }
}


/* || Horizontal tablet and small desktop viewports */
@media screen and (min-width: 950px) {
    /* || UTILITIES: Horizontal tablet and small desktop viewports */
    .hero-square {
        display: none;
    }

    .hero-horizontal {
        display: block;
    }


    /* || INTRO SECTION: Horizontal tablet and small desktop viewports */
    .intro {
        grid-template-rows: repeat(3, auto);
    }

    .intro h1 {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    .intro p {
        grid-column: 2;
        grid-row: 2;
    }

    .intro .btn {
        grid-column: 2;
    }
}


/* || Desktop viewports */
@media screen and (min-width: 1200px) {
    /* || INTRO SECTION: Desktop viewports */
    .intro {
        align-self: auto;
    }

    .intro .btn {
        align-self: end;
    }
}