html, body {
    height: 100%;
}

body {
    background-color: rgb(240, 240, 240);
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;

    main {
        flex: 1;
    }
}

div.wrapper {
    max-width: var(--layoutWidth);
    margin: 0 auto;
}

header {
    background-color: var(--headerColour);
    height: var(--headerHeight);

    > div.wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px;
        height: 100%;

        a.brand {
            flex-shrink: 0;
            display: relative;

            img {
                max-height: 55px;
            }
        }

        nav {
            display: flex;
            align-items: center;
            height: 50px;

            :not(:first-child) {
                border-left: solid 1px black;
            }

            a {
                padding: 0 22px;
                font-weight: bold;
                text-decoration: none;
                color: black;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        div.menu {
            display: none;
            align-items: center;
            flex-direction: column;

            svg {
                width: 25px;
            }
        }

        @media (max-width: 768px) {
            justify-content: flex-start;
            gap: 44px;
            margin-left: 22px;

            form.search {
                display: none;
            }

            nav {
                display: none;
            }

            div.menu {
                display: flex;
            }
        }
    }

    &.menu {
        &::after {
            content: ' ';
            position: fixed;
            top: var(--headerHeight);
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        nav {
            display: flex !important;
            position: absolute;
            top: var(--headerHeight);
            left: 0;
            bottom: 0;
            background-color: rgb(241, 241, 241);
            padding-top: 22px;
            padding-bottom: 22px;
            z-index: 50;
            width: 85vw;
            height: unset !important;

            flex-direction: column;
            gap: 22px;
            padding-left: 22px;
            align-items: flex-start !important;

            > a { 
                border-left: none;

                &:first-child {
                    border-left: solid 1px black;
                }
            }
        }
    }
}

body:has(header.menu) {
    overflow: hidden;
}

form.search {
    input[name="search"] {
        height: var(--searchHeight);
        border-radius: calc(var(--searchHeight) / 2);   
        border: none;
        background-color: black;
        color: white;
        padding: 0 22px;
    }
}

aside#menu {
    --menuWidth: 80vw;

    position: absolute;
    top: var(--headerHeight);
    left: 0;
    height: calc(100vh - var(--headerHeight));
    width: var(--menuWidth);
    background-color: white;
    box-shadow: 0 0 2px black;
    padding: 22px;

    nav {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    form.search {
        margin-top: 22px;
        input[name="search"] {
            width: 100%;
        }
    }

    div.backdrop {
        position: fixed;
        top: var(--headerHeight);
        left: var(--menuWidth);
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    &:not(.active) {
        display: none;
    }
}

footer {
    background-color: black;
    color: white;

    > div.tn {
        text-align: center;
        font-size: 0.8rem;

        a {
            color: white;
        }

        margin-bottom: 22px;
    }

    > div.wrapper {
        display: flex;
        gap: 44px;
        padding: 22px;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;

        div.left {
            img {
                display: block;
                margin: 0 auto;
                max-width: 400px;
                width: 100%;
            }
        }

        div.right {
            flex: 1;
            min-width: 400px;

            p {
                margin-top: 22px;
                font-size: 14px;

                &.subtitle {
                    font-weight: bold;
                    font-size: 1.2rem;
                }

                &:first-child {
                    margin-top: 0;
                }
            }

            @media (max-width: 400px) {
                min-width: unset;
                width: 100%;
            }
        }
    }
}

.card {
    background-color: white;
    border: solid rgb(172, 172, 172) 1px;
    box-shadow: 0 0 1px rgb(105, 105, 105);
}

div.socials {
    background-color: black;

    div.wrapper {
        display: flex;
        color: white;
        gap: 44px;
        justify-content: center;
        align-items: center;
        padding: 44px;
        font-size: 1.6rem;
        font-weight: bold;

        p {
            white-space: nowrap;
        }

        a { 
            svg {
                fill: white;
                height: 40px; 
                width: auto;
            }

            &:hover {
                svg {
                    fill: #84754E;
                }
            }
        }
    }
}

div.newsletter-signup {
    background-color: black;
    color: white;
    padding: 44px 0;

    > div.wrapper {
        display: flex;
        gap: 22px;
        align-items: center;

        > div.content {
            flex: 1;

            p.title {
                font-family: 'Inter Black';
                font-size: 1.6rem;
            }

            p:not(.title) {
                margin-top: 11px;
            }
        }

        > div.cta {
            width: 100%;
            max-width: 300px;

            > p {
                text-align: center;
                font-size: 0.9rem;
                margin: 11px;
            }
        }

        @media (max-width: 850px) {
            flex-direction: column;
            gap: 22px;

            > div {
                width: 100%;
                text-align: center;
            }
        }
    }

    #subscribe {
        --popupWidth: 700px;

        @media (max-width: 700px) {
            --popupWidth: 100%;
        }

        img {
            aspect-ratio: 21/9;
            object-fit: cover;
        }

        p.title {
            font-size: 2rem;
            font-weight: bold;
        }

        form {
            margin-top: 18px;
        }
    }
}

div.friends {
    background-image: url("../images/backgrounds/muted-12e98d9008f203abc8c6caba469ec253.png");
    padding-top: 22px;
    padding-bottom: 22px;

    > div.wrapper {
        padding: 22px;

        > div.content {
            margin-top: 22px;

            display: flex;
            gap: 22px;
            flex-wrap: wrap;
            justify-content: center;

            > article {
                width: 275px;

                display: flex;
                flex-direction: column;

                > img {
                    aspect-ratio: 16/9;
                    width: 100%;
                    object-fit: cover;
                }

                div.content {
                    flex: 1;
                    padding: 14px;
                    display: flex;
                    flex-direction: column;
                    gap: 22px;
                    width: 100%;

                    > div {
                        flex: 1;
                    }

                    div.profile {
                        display: flex;
                        gap: 11px;
                        margin-bottom: 22px;

                        img {
                            width: 50px;
                            height: 50px;
                            object-fit: cover;
                        }

                        p.subscribers {
                            font-size: 0.8rem;
                        }
                    }
                }
            }
        }
    }
}

button,.button {
    --textColour: white;
    --buttonColour: #84754E;
    --hoverColour: color-mix(in srgb, var(--buttonColour) 50%, black);

    &.secondary {
        --textColour: black;
        --buttonColour: white;
        --hoverColour: #84754E;

        --hoverTextColour: white;
    }

    background-color: var(--buttonColour);
    color: var(--textColour);
    border: none;
    padding: 8px 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    display: block;
    width: 100%;
    border: solid black 1px;
    box-shadow: 0 0 2px rgb(161, 161, 161);

    &:hover {
        background-color: var(--hoverColour);
        color: var(--hoverTextColour, var(--textColour));

        svg {
            fill: var(--hoverTextColour, var(--textColour));
        }
    }

    &:active {
        background-color: color-mix(in srgb, var(--buttonColour) 25%, black);
    }

    &:has(svg) {
        display: flex;
        align-items: center;
        justify-content: space-between;

        svg {
            max-height: 16px;
            fill: var(--textColour);
        }
    }
}

div.fixtures {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

div.fixture {
    --badgeSize: 60px;

    display: flex;
    gap: 18px;

    div.team {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30%;

        img {
            width: var(--badgeSize);
            height: var(--badgeSize);
            object-fit: contain;
        }

        p.name {
            font-weight: bold;
            text-align: center;
        }
    }

    div.info {
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        p.score {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 22px;
        }

        p.date {
            font-weight: bold;
            font-size: 0.8rem;
        }

        p.time {
            font-weight: bolder;
        }
    }

    &.big {
        --badgeSize: 100px;
    }

    @media (max-width: 500px) {
        --badgeSize: 50px !important;

        &.big {
            --badgeSize: 75px !important;
        }

        flex-wrap: wrap;
        justify-content: space-evenly;

        div.info {
            order: 3;
            flex: unset;
            width: 100%;
        }
    }
}

div.live-game {
    > div.wrapper {
        padding: 44px 0;
        h2 {
            text-align: center;
            display: flex;
            gap: 18px;
            justify-content: center;

            svg {
                width: 20px;
            }
        }

        > div.content {
            margin-top: 22px;
            display: flex;
            gap: 22px;
            flex-wrap: wrap;
            justify-content: space-evenly;

            div.stats {
                max-width: 400px;
            }

            div.live-feed {
                flex: 1;
                min-width: 400px;

                @media (max-width: 900px) {
                    max-width: 600px;
                    min-width: 100%;
                }

            }
        }
    }
}

div.fixture-summary {
    display: var(--initialDisplay, block);

    > div.wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        padding: 44px 0;

        p.title {
            font-size: 1.6rem;
            font-family: 'Inter Black';
            margin-bottom: 22px;
            text-align: center;
        }

        div.latest {
            width: 40%;
            min-width: 400px;

            div.buttons {
                margin-top: 44px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;

                > a {
                    width: 200px;
                }
            }
        }

        div.next {
            min-width: 400px;

            table.fixtures {
                max-width: 500px;
            }
        }
    }
}

div.standings {
    --tableGreen: green;
    --tableRed: darkred;
    --tableNeutral: #b0b000;

    padding: 44px;

    @media (max-width: 768px) {
        padding-left: 0;
        padding-right: 0;
    }

    h2 {
        text-align: center;
    }

    div.title {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin: 22px;

        img {
            height: 60px;
        }
        
        p.name {
            font-weight: bold;
            font-size: 1.2rem;
        }
    }

    table.league-table {
        margin-top: 22px;
        max-width: 1000px;
        margin: 0 auto;
        border-collapse: collapse;

        th, td {
            padding: 6px 12px;
            text-align: center;
        }

        th {
            background-color: black;
            color: white;
        }

        tr {
            background-color: #e0dcd3;

            &:nth-child(even) {
                background-color: #c1baa6;
            }

            &.boundary {
                border-top: dashed 1px black;
            }

            &.focus {
                font-weight: bold;
            }
        }

        td.rank {
            > div {
                display: flex;
                align-items: center;
                gap: 8px;

                svg {
                    width: 10px;
                }
                    
                &.up {
                    svg {
                        fill: var(--tableGreen);
                    }
                }

                &.down {
                    svg {
                        fill: var(--tableRed);
                    }
                }
            }
        }

        td.form {
            --displayMode: flex;
            justify-content: space-between;
            gap: 4px;

            span {
                --size: 23px;
                width: var(--size);
                height: var(--size);
                
                display: flex;
                justify-content: center;
                align-items: center;

                color: white;

                &.w {
                    background-color: var(--tableGreen);
                }

                &.d {
                    background-color: var(--tableNeutral);
                }

                &.l {
                    background-color: var(--tableRed);
                }
            }
        }

        td, th {
            text-wrap: nowrap;

            &:not(.must) {
                display: none;
            }

            span.normal {
                display: none;
            }

            @media (min-width: 680px) {
                &.should {
                    display: var(--displayMode, table-cell) !important;
                }
            }

            @media (min-width: 950px) {
                &.could {
                    display: var(--displayMode, table-cell) !important;
                }

                span.thin {
                    display: none;
                }

                span.normal {
                    display: block;
                }
            }

            @media (max-width: 1000px) {
                font-size: 0.9rem;
            }
        }
    }
}

div.popup {
    display: none;
    position: fixed;

    > div.backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    > div.card {
        position: fixed;

        left: calc(50% - var(--popupWidth, 500px) / 2);
        width: var(--popupWidth, 500px);
        top: 20px;

        color: black;

        > div.content {
            padding: 18px;
        }

        > div.close {
            position: absolute;
            top: 11px;
            right: 11px;

            svg {
                fill: black;
                width: 40px;
                height: 40px;
                cursor: pointer;

                &:hover {
                    fill: gold;
                }
            }
        }
    }

    &.active {
        display: block;
    }
}

div.alert {
    border-left: solid black 2px;
    padding: 9px;
}

div.stats {
    width: 100%;

    div.bars {
        display: flex;
        gap: 22px;
        flex-direction: column;
        margin-top: 44px;

        div.stat {
            p.title {
                font-weight: bold;
                text-align: center;
            }

            div.values {
                display: flex;
                gap: 9px;
                align-items: center;

                p.value {
                    width: 30px;

                    &.left {
                        text-align: right;
                    }
                }

                div.bar {
                    flex: 1;
                    background-color: silver;
                    display: flex;
                    justify-content: center;
                    height: 10px;
                }
            }
        }
    }
}

div.live-feed {
    div.no-feed {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100%;

        p.title {
            font-weight: bold;
            font-size: 1.2rem;
        }
    }

    div.posts {
        display: flex;
        gap: 18px;
        flex-direction: column;

        div.post {
            margin-left: 22px;
            margin-right: 22px;

            div.title {
                background-color: black;
                color: white;
                padding: 9px;
            }

            div.content {
                position: relative;
                overflow: hidden;

                border: solid black 1px;
                border-top: none;
                padding: 18px;

                background-color: white;
                background: linear-gradient(300deg, var(--highlightColour, white) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);

                &:has(img.team-badge) {
                    padding-right: 100px;
                }

                img.team-badge {
                    width: 100px;
                    position: absolute;
                    opacity: 0.3;
                    right: 0;
                    top: 0;
                    transform: rotate(10deg);
                }
            }
        }
    }
}