/* _Navbar STYLING */

* {
    /* Give full control over margins and block sizes */
    box-sizing: border-box;
    margin: 0;
}

html {   /* Responsive Sizing Variables */
    
    --nav-size-landscape: 7vh;          /* Default nav size for landscape orientations */
    --nav-size-portrait: 3vh;           /* Default nav size for portrait orientations */
}

body {
    font-size: 100%;   /* Allow for uniform text sizing across browsers (pixels / 16 = em) */
}

header nav {   /* Styling for navbar and contents (Child 2 of navbar) */

    /* 
      Set up navbar as a horizontal flexbox; items on edges with space between
      Contents (3): div#logo, ul#nav-links, div#theme-container   
     */
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    color: var(--text-main);

    --nav-link-border-width: 3px;   /* Standard size for right borders */
}
header nav ul {   /* Common styling for nav ul elements (#nav-links and #theme-links) */
    margin: 0;
    
    padding-inline-start: 0;   /* Remove default padding of ul elements */
    list-style: none;
}
header nav ul li {  /* Common styling for all list items */
    height: 100%;

    display: block;
}
header nav ul li a {  /* Common styling for all links contained in list items */
    height: 100%;
    background-color: var(--nav-link);
    

    /* Set up anchors as vertical flexboxes to stack images/text */   /* TODO: Flexbox necessary? (no images) */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;

    text-decoration: none;
    color: var(--text-main);
    
    transition: 1s;   /* Give some visual effect to colour changes */
}

header nav #logo-container {   /* Child 1 of navbar (sits on left edge) */
    border-top: solid 2px var(--nav-border);
    border-bottom: solid 2px var(--nav-border);
    border-right: solid var(--nav-link-border-width) var(--nav-border);
    padding: 0 0.5rem;
    background-color: var(--nav-link);   /* Same colour as  */
}
header nav:hover #logo-container {
    border-right: solid var(--nav-link-border-width) var(--special-border-colour);   /* Match hover effect of nav */
}
header nav #logo-container img.active {
    display: block;   /* JS will toggle between active/inactive */
}
header nav #logo-container img.dormant {
    display: none;
}

header nav #nav-links {
    border-top: solid 2px var(--nav-border);
    border-bottom: solid 2px var(--nav-border);
    
    flex: 1;
}
header nav #nav-links li {
    border-right: solid var(--nav-link-border-width) var(--nav-border);   /* Add borders around links */
    text-align: center;
    flex: 1;

    position: relative;   /* Allow dropdowns to appear right under */
}
header nav:hover #nav-links li {
    border-right: solid var(--nav-link-border-width) var(--special-border-colour);   /* Match hover effect of nav */
}
header nav #nav-links li:last-child {
    border-right: none;
}
header nav #nav-links li a {
}
header nav #nav-links li a:hover,
header nav #nav-links li a.active {   /* Apply same effect for active and hovered over links */
    background-color: var(--nav-link-active);
    color: var(--text-accent);
}
header nav #nav-links li a span {   /* Allow text to be position easily within container */
    display: block;
}
header nav #nav-links #home-links #home-links-dropdown,
header nav #nav-links #content-links #content-links-dropdown,
header nav #nav-links #sandbox-links #sandbox-links-dropdown {   /* Common styling for nav bar dropdowns */
    /* Alignment compensation for prev and current element right border */
    width: calc(100% + var(--nav-link-border-width) + var(--nav-link-border-width));

    background-color: var(--nav-bg);

    display: none;
    position: absolute;
    left: calc(-1 * var(--nav-link-border-width));   /* Alignment compensation for prev element right border */
}
header nav #nav-links #home-links:hover #home-links-dropdown,
header nav #nav-links #content-links:hover #content-links-dropdown,
header nav #nav-links #sandbox-links:hover #sandbox-links-dropdown {   /* Common hover effects for nav bar dropdowns */
    border: solid 2px var(--special-border-colour);

    display: block;
    z-index: 3;
}
header nav #nav-links #home-links #home-links-dropdown li,
header nav #nav-links #content-links #content-links-dropdown li,
header nav #nav-links #sandbox-links #sandbox-links-dropdown li {
    padding: 1em 0;
}

header nav #theme-container {   /* Child 3 of navbar */   /* TODO: FIX STYLING ISSUES AS VIEWPORT SHRINKS!!! */
    border-top: solid 2px var(--nav-border);
    border-bottom: solid 2px var(--nav-border);
    border-left: solid var(--nav-link-border-width) var(--nav-border);
    background-color: var(--nav-link);

    /* Set up container as vertical flexbox to stack contents */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}
header nav #theme-container span {   /* Container title */
    padding: 0.25rem 0;

    display: block;
    text-align: center;
}
header nav #theme-container #theme-links {
    border-bottom: solid 2px var(--nav-border);
}
header nav #theme-container li a {
    padding: 0.25rem;
}
header nav #theme-container li a:hover,
header nav #theme-container li a.active {   /* Apply same effect for active and hovered over links */
    background-color: var(--nav-link-active);
    color: var(--text-accent);
}


/* RESPONSIVE MEDIA RULES */

@media only screen and (min-width: 768px) {
    header nav #nav-links,
    header nav div #theme-links {   /* Format #nav-links and #theme-links horizontally for PC browsing */
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }
}

@media only screen and (orientation: landscape) and (min-width: 768px)  {
    header nav {
        min-height: var(--nav-size-landscape);
    }
    header nav,
    header nav #logo-container {   /* Set sizes for logo image to grow to */
        height: var(--nav-size-landscape);
    }
    header nav #logo-container img {   /* Force the logo image to match its container size */
        height: 100%;
        object-fit: contain;
    }
    header nav #nav-links,
    header nav #theme-container {   /* Ensure links do not shrink smaller than nav size */
        min-height: var(--nav-size-landscape);
    }
    header nav #theme-container span,
    header nav #theme-container #theme-links {   /* Ensure each elements is half the container */
        min-height: calc(var(--nav-size-landscape) / 2);
    }
}

@media only screen and (orientation: portrait) and (min-width: 768px)  {
    header nav {
        min-height: var(--nav-size-portrait);
    }
    header nav,
    header nav #logo-container {   /* Set sizes for logo image to grow to */
        height: var(--nav-size-portrait);
    }
    header nav #logo-container img {   /* Force the logo image to match its container size */
        height: 100%;
        object-fit: contain;
    }
    header nav #nav-links,
    header nav #theme-container {   /* Ensure links do not shrink smaller than nav size */
        min-height: var(--nav-size-portrait);
    }
    header nav #theme-container span,
    header nav #theme-container #theme-links {   /* Ensure each elements is half the container */
        min-height: calc(var(--nav-size-portrait) / 2);
    }
}

/* .NET Default */
@media only screen and (min-width: 501px) and (max-width: 768px) {
    header nav,
    header nav #logo-container {   /* Set size for logo image to grow to */
        height: var(--nav-size-portrait);
    }
    header nav #logo-container img {   /* Force the logo image to match its container size */
        height: 100%;
        object-fit: contain;
    }
    header nav #nav-links,
    header nav #theme-container {   /* Ensure links do not shrink smaller than nav size */
        min-height: var(--nav-size-portrait);
    }
    header nav #theme-container span {
        display: none;
    }
    header nav #theme-container #theme-links {
        height: 100%;
    }
    header nav #theme-container #theme-links {   /* Ensure each elements is half the container */
        min-height: calc(var(--nav-size-portrait) / 2);
        border-bottom: none;
    }
    header nav #nav-links,
    header nav #theme-container #theme-links {   /* Change theme section to a vertical flexbox to stack */
        display: flex;
        flex-flow: row nowrap;
    }
}

@media only screen and (max-width: 500px) {
    header nav {   /* Change navbar back to a normal block element */
        display: block;
    }
    header nav ul {   /* Force links to take up width of page and stack vertically */
        margin: 0;
        padding: 0;

        list-style: none;
    }
    
    header nav #nav-links li {
        border-right: none;   /* Override initial border styling */
        border-bottom: solid 2px var(--nav-border);   /* Add division between link sections */
    }
    header nav #nav-links li:last-child {
        border: none;   /* Remove excess borders */
    }
    header nav:hover #nav-links li {   /* Remove hover border changes */
        border-right: none;
    }


    header nav #theme-container {   /* Force container to take up width of page and stack vertically */
        border-top: none;
        border-left: none;
        border-bottom: none;
        display: block;
    }
    header nav:hover #theme-container {
        border-top: none;
        border-left: none;
    }
    header nav #theme-container #theme-links {   /* Force link buttons to sit side by side */
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    header nav #theme-container #theme-links li {   /* Force theme links to equally take up all available space */
        flex: 1;
    }
    
    header nav #logo-container,
    header nav #logo-container img,
    header #nav-links,
    header nav #theme-container,
    header nav #nav-links #home-links #home-links-dropdown,
    header nav #nav-links #content-links #content-links-dropdown,
    header nav #nav-links #sandbox-links #sandbox-links-dropdown {   /* Forcing all nav elements to stretch the width of screen */
        width: 100%;
    }

    header nav #nav-links #home-links #home-links-dropdown,
    header nav #nav-links #content-links #content-links-dropdown,
    header nav #nav-links #sandbox-links #sandbox-links-dropdown {
        display: block;         /* Make all hidden dropdown elements visible */
        position: initial;      /* Remove absolute positioning */
    }
    header nav #nav-links #home-links #home-links-dropdown li,
    header nav #nav-links #content-links #content-links-dropdown li,
    header nav #nav-links #sandbox-links #sandbox-links-dropdown li {   /* Remove spacing */
        padding: 0;
    }
    header nav #nav-links #home-links:hover #home-links-dropdown,
    header nav #nav-links #content-links:hover #content-links-dropdown,
    header nav #nav-links #sandbox-links:hover #sandbox-links-dropdown {   /* Remove hover border effects */
        border: none;
    }

    
    
    
    
    /* TODO: Change these if logo image is brought back */
    header nav #logo-container {
        /* Force container to take up width of page and stack vertically */
        
        border: 0;
        border-bottom: solid 2px var(--nav-border);
        padding: 0;

        display: none;  /* Remove logo when links are all vertically stacked (appears large) */

    }
    header nav:hover #logo-container {
        border-right: none;
        border-bottom: solid 2px var(--special-border-colour);
    }
    header nav #logo-container img {
        height: auto;
    }
}