:root {
    color-scheme: light dark;

    --taxonomy-width: 260px;
    --footer-height: 50px;

    --background-color: light-dark(#E0E2DB, #525559);
    --secondary-background-color: light-dark(#D2D4C8, #676b6e);
    --text-color: light-dark(#404F4C, #f0f0f4);
}

body {
    grid-template-columns: var(--taxonomy-width) minmax(0, 1200px);
    grid-template-rows: [header] 220px
                        [content] 1fr
                        [footer] var(--footer-height);

    grid-template-areas:
            "header  header"
            "taxonomy main"
            "footer  footer";

    gap: 0;

    background-color: var(--background-color);
    color: var(--text-color);
}

header {
    grid-template-areas:
            "logo  header-image  search"
            "flag  header-image  search";

    grid-template-columns: min-content auto 1fr;
    background-color: var(--background-color);
    grid-column-gap: var(--control-horizontal-space);
    padding: 0;
    height: 220px;

    .header-image {
        grid-area: header-image;
        overflow: hidden;
        border: 2px solid var(--secondary-background-color);
        border-bottom: none;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    .search {
        grid-area: search;
        input[type="search"] {
            width: 300px;
            box-shadow: var(--box-shadow);
        }
    }

    .logo {
        grid-area: logo;
        display: flex;
        flex-direction: column;
        gap: var(--control-vertical-space);

        .text {
            font-size: 1.5em;
            letter-spacing: 2px;
            line-height: 1.4em;
            font-weight: bolder;
            padding-left: var(--control-horizontal-space);
            margin-top: -0.2em; /* Pull text up to container edge */
            margin-bottom: -0.2em;
            span.one {
                color: light-dark(#b3153f, #cd355e);
            }
            span.two {
                color: light-dark(#000, #FFF);
            }
            span.three {
                color: light-dark(#0d3463, #368aef);
            }
        }
    }

    .flag {
        grid-area: flag;
        display: flex;
        justify-content: center;
        align-items: end;
        padding-left: var(--control-horizontal-space);
        padding-bottom: var(--section-vertical-space);

        img {
            width: 100px;
            box-shadow: var(--box-shadow);
        }
    }
}

footer {
    display: grid;
    grid-template-columns: 1fr 1fr;

    .about {
        display: flex;

        align-content: center;
        justify-content: right;
        gap: 5em;

        a {
            color: var(--text-color);
        }
    }
}

@media (max-width: 1300px) {
    body {
        grid-template-rows: [header] min-content
                            [content] 1fr
                            [footer] var(--footer-height);

    }
    header {
        grid-template-areas:
            "logo  search"
            "flag  search";

        grid-template-columns: max-content 1fr;

        grid-row-gap: var(--control-horizontal-space);
        height: auto;
        padding: var(--section-vertical-space-mobile) 0;

        .header-image {
            display: none;
        }

        .logo {
            .text {
                font-size: 1.2em;
                letter-spacing: 1px;
            }
        }

        .flag {
            align-items: center;
            padding-left: 0;
            padding-bottom: 0;
        }
    }
}

@media (max-width: 920px) {
    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: [header] auto
                            [taxonomy] auto
                            [content] 1fr
                            [footer] var(--footer-height);
        grid-template-areas:
      "header"
      "taxonomy"
      "main"
      "footer";
    }

    header {
        display: flex;

        .search {
            padding-right: 0;
        }

        .logo {
            align-items: center;
            padding-left: 0;
            font-size: 1.3em;
            letter-spacing: 1px;

            .flag img {
                margin-top: 0;
                box-shadow: none;
            }
        }
    }
}

@media (max-width: 500px) {
    header {
        .logo {
            font-size: 1em;
            letter-spacing: 0;
        }
    }

    footer {
        font-size: .9em;

        .about {
            justify-content: center;
            gap: .8em;

            a {
                color: var(--text-color);
            }
        }
    }
}