/* Fonts */
@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,600i|lacquer:400|noto-serif:300i);

/* Colors */
:root {
    --cream: rgb(245, 245, 242);
    --lightest-blue: rgb(231, 243, 255);
    --mid-blue: rgb(218, 236, 255);
    --dusk-blue: rgb(133, 159, 184);
    --dark-blue: rgb(53, 64, 81);
    --darkest-blue: rgb(15, 20, 27);
    --highlight: rgb(150, 14, 100);
    --gold: rgb(178, 142, 24);
    --display: "Lacquer", display;
    --serif: "FK Roman Standard", "Noto Serif", serif;
    --sans: "FK Grotesk Mono", 'IBM Plex Mono', 'Courier New', 'Courier', monospace;
}

html {
    /*font-size: clamp(16px, 4vw, 22px);
    */
    font-size: 16px;
}

body {
    background-color: var(--lightest-blue);
    color: var(--dark-blue);
    margin: 0;
}

h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-weight: normal;
}

h2,
h3 {
    text-transform: uppercase;
}

a,
a[href] {
    text-decoration: none;
    border-bottom: solid 1px var(--dark-blue);
    transition: all 0.5s ease-in-out;
    color: var(--dark-blue);

    &:hover,
    &:active {
        border-bottom-color: var(--highlight);
    }
}

header {
    .mega-menu-mobile-menu-mobile-open & {
        background-color: var(--darkest-blue);
    }

    background-color: var(--mid-blue);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);

    @media(min-width: 34rem) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: max-content;
        background-image: url("../img/fence.png");
        background-repeat: no-repeat;
        background-position-x: right;
        background-size: 400px auto;
    }

    padding: 1rem;

    .logo {
        .mega-menu-mobile-menu-mobile-open & {
            background-image: url("../img/logo-knockout.svg");
        }

        background-image: url("../img/logo.png");
        background-repeat: no-repeat;
        background-size: contain;
        grid-column: span 2 / span 2;
        min-height: 8rem;
        grid-row-start: 1;

        @media(min-width: 34rem) {
            min-height: 15rem;
        }

        a {
            display: block;
            height: 100%;
            border-bottom-width: 0;
        }

        h1 {
            /* visually hidden but available to screen readers */
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }
    }

    .search {
        grid-column: span 2 / span 2;
        grid-column-start: 3;
        align-self: center;
        justify-self: center;

        @media(max-width:34rem) {
            display: none;
        }

        input[type=search] {
            outline-width: 0;
            background-color: var(--lightest-blue);
            border-width: 0;
            border-bottom: solid 1px var(--dark-blue);
        }

        input[type=submit] {
            border-width: 0;
            background-color: var(--dark-blue);
            color: var(--lightest-blue);
            transition: all 0.5s ease-in-out;
            cursor: pointer;

            &:hover,
            &:active {
                background-color: var(--highlight);
            }
        }
    }

    nav {
        display: none;

        @media (max-width:34rem) {
            &.mobile-only {
                display: block;
                grid-column-start: 4;
            }
        }

        @media (min-width:34rem) {
            &.no-mobile {
                display: block;
            }
        }
    }

    nav.no-mobile {
        grid-column: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 2;
        width: clamp(35.625rem, calc(27.976rem + 38.243vw), 71rem);
        background-color: var(--lightest-blue);

        ul {
            list-style: none;
            margin: 0;
            padding-left: 0;
            display: flex;
            justify-content: center;
        }

        li {
            display: block;
            float: left;
            padding: 1rem;
            position: relative;
            transition: all 0.5s ease-in-out;

            a {
                color: var(--dark-blue);
                border-bottom: solid 1px transparent;
                text-decoration: none;
                text-transform: uppercase;

                &:hover {
                    border-bottom-color: var(--highlight);
                }
            }

            &.menu-item-has-children {
                background-image: url("../img/dropdown.svg");
                background-repeat: no-repeat;
                background-position-x: right;
                background-position-y: 50%;
                background-size: 10px auto;
                padding-right: 1rem;
            }

            &.current-menu-item {
                a {
                    border-bottom-color: var(--highlight);
                }
            }
        }

        li::hover,
        li::focus-within {
            cursor: pointer;
        }

        li::focus-within a {
            outline: none;
        }

        ul li ul {
            background-color: var(--lightest-blue);
            box-shadow: -3px 3px 5px 0px rgba(0, 0, 0, 0.1);
            visibility: hidden;
            opacity: 0;
            min-width: 10rem;
            position: absolute;
            transition: all 0.5s ease-in-out;
            margin-top: 1rem;
            left: 0;
            display: none;
        }

        ul li:hover>ul,
        ul li:focus-within>ul,
        ul li ul:hover,
        ul li ul:focus {
            visibility: visible;
            opacity: 1;
            display: block
        }

        ul li ul li {
            clear: both;
            width: 100%;
        }

    }

    .tagline {
        grid-column: span 4 / span 4;
        grid-row-start: 2;
        font-size: clamp(1.25rem, 0.642rem + 3.041vw, 4.063rem);
        font-family: var(--serif);
        width: clamp(15rem, 2.892rem + 60.541vw, 71rem);
        margin: 0 auto;

        @media(min-width: 34rem) {
            grid-column: span 2 / span 2;
            grid-column-start: 2;
            grid-row-start: 3;
            padding: 2rem 0;
        }

        @media screen and (min-width:1075px) {
            background-image: url("../img/tagline.png");
            background-repeat: no-repeat;
            background-position: right top;
            margin-top: 1rem;
        }
    }
}

footer {
    background-color: var(--darkest-blue);
    color: var(--lightest-blue);
    padding: 1rem 3rem;
    display: grid;
    gap: 1rem;
    grid-template-areas:
        "logo"
        "tagline"
        "nav";

    @media screen and (min-width: 600px) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas:
            "logo tagline tagline"
            "logo nav nav";
    }

    .logo {
        grid-area: logo;
        background-image: url("../img/logo-knockout.svg");
        background-repeat: no-repeat;
        background-size: contain;

        @media screen and (max-width:600px) {
            min-height: 10rem;

        }
    }

    .tagline {
        grid-area: tagline;
        font-size: clamp(1.25rem, 1.007rem + 1.216vw, 2.375rem);
        font-family: var(--serif);
        @media screen and (min-width:1075px) {
            background-image: url("../img/tagline.png");
            background-repeat: no-repeat;
            background-position: center top;
            background-size: 25rem auto;
        }
    }

    nav {
        grid-area: nav;
        font-family: var(--sans);

        ul {
            list-style: none;
            display: flex;
            padding-left: 0;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        li {
            padding: 1rem 1rem 0 0;
        }

        a,
        a[href] {
            color: var(--lightest-blue);
            text-transform: uppercase;
        }
    }
}

/* Pagination */
nav.pagination {
    margin: 0 auto;
    padding: 1rem;
    text-align: center;

    a {
        border-bottom-width: 0;
    }

    .page-numbers {
        padding: 0.25rem 0.35rem;
        background-color: var(--cream);
        color: var(--dark-blue);
        text-decoration: none;
    }

    .current {
        background-color: var(--dark-blue);
        color: var(--lightest-blue);
    }

    .prev,
    .next {
        background-color: transparent;
    }
}

/* Article */
.wp-singular:not(.home) main,
.blog main {
    width: clamp(18.75rem, calc(6.453rem + 61.486vw), 75.625rem);
    font-family: var(--sans);
    margin: 0 auto;

    &>section {
        margin: 2rem auto;
    }

    .themes {
        background-color: var(--cream);
        padding: 2rem;

        article {
            margin-bottom: 1rem;

            @media(min-width: 600px) {
                display: grid;
                grid-gap: 1rem;
                grid-template-columns: 50% 1fr;
                grid-template-rows: min-content;
                grid-template-areas:
                    "image title"
                    "image content";
            }

            >img {
                grid-area: image;
                width: 100%;
                height: auto;
            }

            >h3 {
                grid-area: title;
                margin: 0 0 1rem 0;
            }

            >p {
                grid-area: content;
                align-self: self-start;
                margin: 0;
            }
        }
    }

    /* News & Events */
    .article-list {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        background-color: var(--cream);
        position: relative;
        grid-gap: 1rem;
        margin: 0 auto;
        padding: 1rem;

        &:before {
            content: "";
            background-color: var(--gold);
            border-radius: 4px 0 0 4px;
            height: 2rem;
            width: 4px;
            display: block;
            position: absolute;
            left: -4px;
            top: 0;
        }

        article {
            img {
                width: 100%;
                height: auto;
            }
        }
    }

    h1 {
        font-family: var(--serif);
        font-weight: normal;
        text-align: center;
        font-size: 4.065rem;
    }

    .updated {
        text-align: center;
        text-transform: uppercase;
    }
}

/* Page pullquote */
section.pullquote {
    background-color: var(--dark-blue);
    background-image: url("../img/yard.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 90% auto;
    padding: 3rem 0 15rem;
    color: var(--lightest-blue);
    text-align: center;

    blockquote {
        background-image: url("../img/pullquote.png");
        background-repeat: no-repeat;
        background-position: 50% bottom;
        padding-bottom: 3rem;
        font-family: var(--serif);
        font-size: 3.125rem;
        width: 70vw;
        max-width: 75.625rem;
        margin: 0 auto;

        &+.attribution {
            font-family: var(--display);
            font-size: 2.8125rem;
        }
    }

}