@use "_typography.scss";
@use "_colours.scss";

@mixin container {
    max-width: 1300px;
    width: 100%;
    margin: auto;
}

.container {
    @include container;
}

@mixin items-as-centered-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.items-as-centered-row {
    @include items-as-centered-row;
}

@each $v in (5, 10, 15, 20, 25) {
    .gap--#{$v} {
        gap: #{$v}px;
    }
}

* {
    box-sizing: inherit;
}

html, body {
    height: 100%;
}

body {
    margin: 0;  // Reset default HTML padding
    
    // To force the footer to stick to the bottom
    display: flex;
    flex-direction: column;
}

nav {
    border-top: 3px solid colours.$brand--50;

    background-color: colours.$panel-background;
    @include typography.font--monospace-semibold;
    
    // TODO: sticky?
    
    // The nav element stretches across the entire viewport, .content contains the content in the middle
    
    padding: {
        top: 1rem;
        bottom: 1rem;
        left: 0.5rem;
        right: 0.5rem
    }

    & > .content {
        @include container;
        @include items-as-centered-row;
        
        ul {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            margin: 0;
            gap: 0 15px;
            
            li {
                margin-left: 15px; // changing the marker below will mean this value needs changing to make sure everything looks right still
                
                &::marker {
                    content: "./";
                    @include typography.text--secondary;
                }
            }
        }
        
        $menu-width-breakpoint: 35rem;
        
        li.nav-control {
            display: none;
            @media (max-width: $menu-width-breakpoint) { 
                display: block;
            }
        }
        
        @media (max-width: $menu-width-breakpoint) {
            li.nav-control {
                display: block;
            }
            
            li::marker {
                content: "./";
                @include typography.text--secondary;
            }
            
            ul {
                flex-flow: column;
            }
            
            label[for="menu-toggle"] {
                cursor: pointer;
            }
            
            #menu-toggle { // this is the checkbox
                display: none;
            }
            
            li:not(.nav-control) {
                display: none;
            }
            
            .menu-toggle-close-label {
                display: none;
            }
            
            ul:has(#menu-toggle:checked) {
                li.nav-control {
                    padding-bottom: 1em;
                    .menu-toggle-close-label {
                        display: block;
                    }
                }
                li:not(.nav-control) {
                    display: block;
                }
            }
        }
    }    
}

main {
    @include container;
    
    flex: 1 0 auto;
    padding: {
        top: 2rem;
        bottom: 2rem;
        left: 1rem;
        right: 1rem
    }
    
    #main-content {
        grid-area: content;
    }

    #main-aside {
        grid-area: aside;
    }
    
    &:has(#main-aside) {
        display: grid;
        grid-template-areas: "content aside";
        grid-template-columns: 70% auto;
        gap: 20px;

        @media (max-width: 45rem) {
            grid-template-areas:
                "aside"
                "content";
            grid-template-columns: 90%; // any more than 90% and it falls off the end of the page
        }
    }
    
    img {
        max-width: 100%;
    }
}

footer {
    // TODO: a little top border?
    background-color: colours.$panel-background;
    
    flex-shrink: 0;
    
    font-size: 0.9rem;
    
    padding: {
        top: 0.5rem;
        bottom: 1rem;
        left: 0.5rem;
        right: 0.5rem
    }
    
    & > .content {
        @include container;
        @include typography.text--secondary;
    }
}