:root {
    --at-color-1: #405189;
    --at-color-2: #BA9964;
}

header {
    background: white;
    color: #5E5E5E;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    font-family: 'DMSerifDisplay-Regular_c';

    * {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    a:not(.logo-and-title) {
        transition: opacity 0.2s;
    }

    a:not(.logo-and-title):hover {
        opacity: 0.5;
    }

    .follow-us {
        padding-left: 10px;
        padding-top: 10px;

        > .label {
            color: #a5803e;
            text-transform: uppercase;
        }

        > ul {
            margin: 0;
            padding: 0;
            list-style: none;

            > li {
                display: inline-block;
                width: 20px;

                > a img {
                    width: 100%;
                    display: block;
                }
            }

            > li.mewe {
                width: 40px;
            }
        }
    }

    .auth {
        font-family: 'Lato-Bold_c';

        > .date {
            color: var(--at-color-1);
            padding-right: 20px;
        }

        > .login {
            color: var(--at-color-1);
            padding-right: 20px;

            > img {
                height: 19px;
                position: relative;
                top: 4px;
                padding-right: 2px;
            }
        }

        > a.subscribe {
            border: 1px solid var(--at-color-2);
            text-transform: uppercase;
            padding: 1px 8px 3px;
        }
    }

    > .content {
        max-width: 1366px;
        margin: 0 auto;
        padding: 0 20px;

        > .identity {
            display: flex;
            justify-content: space-between;

            > .follow-us {
                width: calc((100% - 540px) / 2 - 50px);
            }

            > a.logo-and-title {
                width: 540px;
                text-align: center;
                line-height: 1;

                > img.logo {
                    height: 56px;
                    position: relative;
                    top: 5px;
                }

                span {
                    font-size: 3.75rem;
                }

                span.american {
                    color: var(--at-color-1);
                }

                span.thinker {
                    color: var(--at-color-2);
                }
            }

            > .auth {
                width: calc((100% - 540px) / 2 + 50px);
                display: flex;
                justify-content: flex-end;
                align-items: baseline;
                padding-top: 5px;
            }

            > .menu {
                display: none;

                > #menu-toggle {
                    display: none;
                }
            }
        }

        > nav.categories {
            text-transform: uppercase;
            display: flex;
            justify-content: space-between;

            > a {
                padding: 10px;
            }

            > a.about {
                display: none;
            }

            > a.donate {
                background: var(--at-color-2);
                color: white;
                padding-top: 5px;
                padding-bottom: 5px;
                margin: 5px 0;
            }

            > .search img {
                height: 19px;
            }
        }
    }

    > hr {
        padding: 0;
        margin: 0;
        border: none;
        border-top: 1px solid #e5e5e5;
    }

    > .content.trending {
        display: flex;
        justify-content: space-between;
        padding: 0 200px;
        font-family: 'Lato-Regular_c';
        color: var(--at-color-2);
        flex-wrap: wrap;
        height: 40px;
        overflow: hidden;

        > .label {
            font-weight: bold;
            color: #5E5E5E;
        }

        > * {
            padding: 10px;
            white-space: none;
            text-transform: capitalize;
        }
    }

    > hr.mobile {
        display: none;
    }

    > nav.mobile-content {
        display: none;
    }
}

/* Shrink whitespace on trending to fit in one line */
@media (max-width: 1299px) {

    header > .content.trending {
        padding: 0 20px;
    }
}

/* Shrink whitespace to fit on tablet landscape */
@media (max-width: 1199px) {

    header {

        > .content.trending {
            padding: 0 10px;
        }

        > .content {
            padding: 0 10px;

            > .identity > .auth {
                flex-wrap: wrap;

                > .date {
                    padding-right: 10px;
                    width: 100%;
                    text-align: right;
                }
            }

            > nav.categories > a {
                padding: 10px 5px;
            }
        }
    }
}

/* Hamburger Menu */
@media (max-width: 1023px) {

    header {

        > .content {

            > .identity {

                > .follow-us {
                    width: 60px;

                    * {
                        display: none;
                    }
                }

                > a.logo-and-title {
                    width: calc(100% - 120px);
                }

                > .auth {
                    display: none;
                }

                > .menu {
                    display:block;

                    > label[for="menu-toggle"] {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        width: 60px;
                        height: 60px;
                        padding: 25px 10px 10px;

                        > .line {
                            height: 4px;
                            width: 100%;
                            background: #ccc;
                            position: relative;
                            transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
                        }
                    }

                    > #menu-toggle:checked {

                        + label[for="menu-toggle"] {

                            > .line:nth-child(1) {
                                transform: rotate(45deg);
                                top: 11px;
                            }

                            > .line:nth-child(2) {
                                display: none;
                            }

                            > .line:nth-child(3) {
                                transform: rotate(-45deg);
                                top: -10px;
                            }
                        }
                    }
                }
            }

            > nav.categories {
                display: none;
                flex-wrap: wrap;

                > * {
                    width: calc(100% / 6);
                    text-align: center;
                }

                > a.about {
                    display: block;
                }
            }

            &:has(#menu-toggle:checked) > nav.categories {
                display:flex;
            }
        }

        > hr {
            display: none;
        }

        > .content.trending {
            display: none;
            flex-wrap: wrap;
            overflow: auto;
            height: auto;

            > * {
                width: calc(100% / 5);
                text-align: center;
            }

            > *:last-child {
                display: none;
            }
        }

        &:has(#menu-toggle:checked) > hr {
            display: block;
        }

        &:has(#menu-toggle:checked) > .content.trending {
            display: flex;
        }

        &:has(#menu-toggle:checked) > .mobile-content {
            display: block;
        }

        > .mobile-content {
            > .auth {
                display: flex;
                justify-content: center;
                align-items: baseline;
                padding-top: 10px;
            }
            > .follow-us {
                padding: 20px 0;
                text-align:center;
            }
        }
    }
}

@media (max-width: 889px) {

    header {
        > .content > nav.categories > * {
            width: calc(100% / 4);
        }
        > .content.trending {
            > * {
                width: calc(100% / 3);
            }
            > *:nth-last-child(2) {
                display: none;
            }
        }
    }
}

@media (max-width: 679px) {

    header > .content > .identity {

        > .follow-us {
            width: 55px;
        }

        > a.logo-and-title {

            width: calc(100% - 110px);

            > img.logo {
                height: 40px;
            }
            > span {
                font-size: 2.5rem;
            }
        }

        > .menu {
            > label[for="menu-toggle"] {
                width: 55px;
                height: 45px;
                padding: 15px 10px 10px;
            }
            > #menu-toggle:checked + label[for="menu-toggle"] > .line:nth-child(1) {
                top: 6px;
            }
        }
    }
}

@media (max-width: 559px) {

    header > .content > nav.categories > * {
        width: calc(100% / 3);
    }
}

@media (max-width: 529px) {

    header > .content > .identity {

        > .follow-us {
            width: 50px;
        }

        > .menu > label[for="menu-toggle"] {
            width: 50px;
            height: 45px;
            padding: 15px 10px 10px;
        }

        > a.logo-and-title {
            width: calc(100% - 100px);

            > img.logo {
                height: 34px;
            }
            > span {
                font-size: 1.8rem;
            }
        }
    }
}

@media (max-width: 439px) {

    header {
        > .content > nav.categories > * {
            width: calc(100% / 2);
        }
        > .content.trending {
            > * {
                width: calc(100% / 2);
            }
            > *:nth-last-child(2) {
                display: block;
            }
        }
    }
}

@media (max-width: 399px) {
    header {

        > .content > .identity {

            > .follow-us {
                display: none;
            }

            > a.logo-and-title {
                width: calc(100% - 40px);

                > span {
                    font-size: 1.6rem;
                }
            }

            > .menu > label[for="menu-toggle"] {
                width: 30px;
                padding: 15px 0 10px;
            }
        }

        > .mobile-content {
            > .auth > .date {
                display: none;
            }
        }
    }
}