/*
    - Author: Jock Janise (2026)
    =================================================================================================
    = List of Changes
    = 1. 576:
    =   - Layout Change. From Single column to 2 column layout. Better for slightly larger screen.
    =   - Content Change. horizontal rules (hr) hidden.
    =
    = 2. 720:
    =   - Layout Change. From two columns to three columns. Good on larger tablet displays.
    =   - Layout Change. Image resizes to keep it from getting too large.
    =  
    = 3. 992:
    =   - Layout Change. Menu always visible. Logo/menu button disabled.
    =   - Layout Change. Navigation is all on one line.
    =   - Layout Change. Image again resizes to keep from getting too large.
    =================================================================================================
*/

/*  Base HTML styling. Mobile first.
    Reset any existing browser default margins/padding.
    Background, and color.
*/
body, html {
    margin: 0;
    padding: 0;
    background: #D7D7FF;
    color: #FFFFFF;
}

/*  Header Heading 1
    Make it fill it's container (display).
    Align the text to center. 
    Give it a little space on the top and bottom. No margin.
*/
header h1 {
    display: block;
    text-align: center;
    color: #000000;
    margin: 0;
    padding: 6px 0;
}

/*  Top Menu Styling
    Make it sticky (to the top), so it doesn't leave the viewport. Large z-index to keep it above everything else.
    Set the left and right margins. Copied later for general page flow. (5% here). Set the padding too. Top and bottom.
    Background and Text colors set.
*/
.menu-top {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #AACCFF;
    color: #000000;
}

/*  Toggle for the non-desktop menu (I AM HERE)
    Hide the actual check-mark.
*/
#menu-top-toggle {
    display: none;
}

/*  Label is what is clicked for 'drop-down' menu.
    Show a hand cursor (non-color based indication of link).
    Keep inline flow, and has a relative position with a high z-index to keep it above everything else. Even Dropdown.

*/
label[for="menu-top-toggle"] {
    cursor: pointer;
    font-weight: bold;
    display: inline-block;
    position: relative;
    z-index: 1001;
    border-top: thin solid darkgrey;
    border-right: thin solid darkgrey;
    border-bottom: thin solid darkgrey;
    box-shadow: 2px 2px 5px #000000;
    padding: 2px;
}

/*  Logo inside the label. What you click on.
    Make it a block to fill it's container. Give it a fixed height to adjust the image for display.
    Auto Width maintains aspect ration
    Auto Margin centers horizontally.
*/
.menu-top label img {
    display: block;
    height: 20px;
    width: auto;
    margin: auto;
}

/*  Remove bullets and spacing for navigation list. */
.menu-top-list, .menu-top-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: bold;
}

/*  This shouldn't be displayed until the checkbox is checked.
    Remove from normal flow, position relative to nearest positioned ancestor. Z-index between the rest of nav and page. Full width.
*/
.menu-top-list {
    display: none;
    position: absolute;
    z-index: 899;
    top: 100%;
    left: 0;
    width: 100%;
    background: #77BBEE;
    color: #FFFFFF;
}

/*  Show menu when checkbox is checked. Uses Subsequent-Sibling Combinator (link below) to select all ".menu-top-list" after the toggle.
    Link: https://www.w3schools.com/css/css_combinators.asp
    Changes display to block, revealing menu.
*/
#menu-top-toggle:checked ~ .menu-top-list {
    display: block;
}

/*  Individual menu items. Full width (block display). Border thickness, type, and color. */
.menu-top-list li {
    display: block;
    border-top: thin solid #66AADD;
}

/*  Links. Full width (block display). Centered, bolded text. Nothing fancy. Base styling for links. */
.menu-top-list a {
    display: block;
    width: 100%;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 0;
    margin: 0;
}

/*  Space for the arrows << and >> around the links.
    By default hidden with transparent color.
*/
.menu-top-list a::before, .menu-top-list a::after {
    display: inline-block;
    width: 1em;
    color: transparent;
}

/*  The "arrows". Can't use HTML Entities (Ex: &copy;) in css content.
    Give margin on both sides. ::before goes before, ::after goes after.
*/
.menu-top-list a::before {
    content: "«";
    margin-right: 5px;
}
.menu-top-list a::after {
    content: "»";
    margin-left: 5px;
}

/* Menu link hover effect. Only color and background needed changing. */
.menu-top-list a:hover {
    color: #000077;
    background: #66AADD;
}

/*  Set color for before and after color effects. */
.menu-top-list a:hover::before, .menu-top-list a:hover::after {
    color: #000077;
}

/*  Main content of the page. Margins copy the existing flow of page. 
    Padding is used to position elements away from edges.
    Flow root makes container properly fit floats.
*/
main.page-content {
    margin-left: 5%;
    margin-right: 5%;
    padding: 2px;
    padding-bottom: 30px;
    background: #EEEEFF;
    color: #000000;
    display: flow-root;
}

/* Title for desktop, article/video specific links. */
main.page-content h2.nav-title {
    text-align: center;
}

/*  Base styling for sections (cards).
    Borders set individually. Padding to have internal space.
    Box sizing (link below) calculates border in total width/height.
    Link: https://www.w3schools.com/css/css3_box-sizing.asp
*/
main.page-content section {
    border-top: thin solid #000000;
    border-right: thin solid #000000;
    border-bottom: thin solid lightgrey;
    border-left: thin solid lightgrey;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding-left: 4px;
    padding-right: 4px;
}

/* Area (section) for per-article/video links. */
.section-nav {
    display: block;
}
/* Inner section h2. For desktop display. Do not display here. */
.section-nav-inner {
    display: none;
}
/* Navigation styling. Display as block. Margin Auto centering. */
.section-nav nav {
    display: block;
    margin: auto;
    width: 75%;
    background: #EEEEEE;
    padding: 10px;
    box-sizing: border-box;
    border: thin solid #000;
}
/* Base styling for h2s in section-nav area. */
.section-nav h2 {
    text-align: center;
    margin: auto;
    background: #CCCCCC;
}
/* No list style (icon/number/etc), no padding or margin. */
.section-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Display links as blocks. */
.section-nav a {
    display: block;
    text-decoration: none;
    color: purple;
    padding: 4px 0;
}
/* Hover effect for links. */
.section-nav a:hover {
    color: blue;
    background-color: #BBBBDD;
}

/* Section heading (2) styling. Give good padding on left. */
h2.sect-title {
    display: inline-block;
    width: 100%;
    background: #33333A;
    color: #CCDDFF;
    padding-left: 10px;
    border: thin dashed gold;
    box-shadow: 2px 2px 4px #000000;
}

/* Default background color for non-top articles/videos. */
.other-articles, .other-videos {
    background: #EEEEEE;
}

/* Top article/video background, and padding. */
.top-article, .top-video {
    background: #CCCCCC;
    padding-left: 4px;
    padding-right: 2px;
}

/* Images scale to container, full width for large mobile view. Block level display. Give it space between it and text below. */
main.page-content section img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
}

/* Base styling for heading 2 article titles. */
h2.article-title {
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    box-shadow: 2px 2px 2px silver;
    margin-top: 0;
}

/* Styling and drop shadow for the top article title. */
.top-article h2.article-title {
    background: #333333;
    color: gold;
    box-shadow: 2px 2px 2px silver;
}

/* Base styling for the heading 2 video titles */
h2.video-title {
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    box-shadow: 2px 2px 2px silver;
    margin-top: 0;
}

/* Styling and drop shadow for the top video title. */
.top-video h2.video-title {
    background: #333333;
    color: gold;
    box-shadow: 2px 2px 2px silver;
}

/*  Sets line-height (link below) to a specific value, then makes enough room for two lines (line-height x 2). 
    Link: https://www.w3schools.com/cssref/pr_dim_line-height.php
    Cuts overflow off, not displaying it.
*/
h2.article-title, h2.video-title {
    line-height: 1.2;
    height: calc(1.2em * 2);
    overflow: hidden;
}
/* Read More links on cards. */
.top-article a.article-link, .other-articles a.article-link {
    text-decoration: none;
    color: purple;
    font-weight: bold;
}

/* Hover effect (color change) for hover on article Read More links. */
.top-article a.article-link:hover, .other-articles a.article-link:hover {
    color: blue;
}

/* Matches Article link styling for visual consistency. */
.top-video a.video-link, .other-videos a.video-link {
    text-decoration: none;
    color: purple;
    font-weight: bold;
}

/* Hover effect (color change) for Watch links on videos. */
.top-video a.video-link:hover, .other-videos a.video-link:hover {
    color: blue;
}

/*  Footer sticks to bottom of viewport/page. Large z-index to sit above other content.
    Margins copy page flow.
*/
footer {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    margin-left: 5%;
    margin-right: 5%;
    padding: 2px;
    background: #5555FF;
    font-weight: bold;
    text-align: center;
}

/* 576px and up */
@media (min-width: 576px) {
    /* Horizontal Rule vanishes */
    hr {
        display: none;
    }
    /*  Top Article/Video styling.
        Margins l, b, r: 2%, 12px, 2%
        Floats left, clear puts this below previously floated elements, on its own row.
        Box sizing again.
    */
    section.top-article, section.top-video {
        width: 96%;
        float: left;
        clear: both;
        margin: 0 2% 12px 2%;
        box-sizing: border-box;
    }
    /*  Styling for other Articles/Videos.
        Smaller width for a 2 column layout. Float left, and box sizing.
    */
    section.other-articles, section.other-videos {
        width: 46%;
        float: left;
        margin-bottom: 12px;
        box-sizing: border-box;
    }

    /*  Even columns.
        Clear left prevents element from sitting beside left-floated elements (starts new row).
     */
    #article-2, #article-4, #article-6 {
        clear: left;
        margin-left: 2%;
        margin-right: 2%;
    }
    /*  Odd Columns, same thing only with the Right. */
    #article-3, #article-5, #article-7 {
        clear: none;
        margin-left: 2%;
        margin-right: 2%;
    }

    /* two-column videos with clear Left. */
    #video-2 {
        clear: left;
        margin-left: 2%;
        margin-right: 2%;
    }
    /* Last video. No need for any clear. */
    #video-3 {
        clear: none;
        margin-left: 2%;
        margin-right: 2%;
    }
}

/* 720px and up */
@media (min-width: 720px) {
    /* Horizontal Rule still invisible. */
    hr {
        display: none;
    }
    /* Top Article/Video styling. Changes width, otherwise the same as smaller display. */
    section.top-article, section.top-video {
        width: 96%;
        float: left;
        clear: both;
        margin: 0 2% 12px 2%;
        box-sizing: border-box;
    }
    /* Images sizing. Block level, 75% width of container. Centered via auto margins. */
    main.page-content section.top-article img, main.page-content section.top-video img {
        display: block;
        width: 75%;
        height: auto;
        margin-bottom: 8px;
        margin: auto;
    }
    /* Other Articles/Videos styling. Adjust width for display size, float left. Margin for bottom and box-sizing. */
    section.other-articles, section.other-videos {
        width: 29%;
        float: left;
        margin-bottom: 12px;
        box-sizing: border-box;
    }

    /* three-column articles. Same thing as before. Clear left, and margins. */
    #article-2, #article-5 {
        clear: left;
        margin-left: 2%;
        margin-right: 2%;
    }
    /* Right column. No clear needed. Set margins. */
    #article-3, #article-4, #article-6, #article-7 {
        clear: none;
        margin-left: 2%;
        margin-right: 2%;
    }

    /* Videos. Left column needs clear left. Set margins.  */
    #video-2 {
        clear: left;
        margin-left: 2%;
        margin-right: 2%;
    }
    /* No clear needed for right column. Same margins. */
    #video-3 {
        clear: none;
        margin-left: 2%;
        margin-right: 2%;
    }
}

/* 992px and up */
@media (min-width: 992px) {
    /* Still no Horizontal Rule. */
    hr {
        display: none;
    }

    /* Top Article/Video styling. Still on their own lines. */
    section.top-article, section.top-video {
        width: 96%;
        float: left;
        clear: both;
        margin: 0 2% 12px 2%;
        box-sizing: border-box;
    }
    /* Images for Top Article/Video. Size constrained. Centered in element. */
    main.page-content section.top-article img, main.page-content section.top-video img {
        display: block;
        width: 50%;
        height: auto;
        margin-bottom: 8px;
        margin: auto;
    }    
    /* Styling for other Articles/Videos. Same as previous size. */
    section.other-articles, section.other-videos {
        width: 29%;
        float: left;
        margin-bottom: 12px;
        box-sizing: border-box;
    }
    /* Same 3 column layout. */
    #article-2, #article-5, #video-2 {
        clear: left;
        margin-left: 2%;
        margin-right: 2%;
    }
    /* Same here too. */
    #article-3, #article-4, #article-6, #article-7, #video-3 {
        clear: none;
        margin-left: 2%;
        margin-right: 2%;
    }

    /* Inline logo. Aligned in the middle vertically. Large right margin. No box shadow. No border. */
    .menu-top > label[for="menu-top-toggle"] {
        display: inline-block;
        vertical-align: middle;
        margin-right: 20px;
        box-shadow: 0 0;
        border: none;
    }
    /* Sets default cursor on hover. Changed from lower displays. */
    .menu-top > label[for="menu-top-toggle"]:hover {
        cursor: default;
    }

    /* Force menu display. Static position. Uses ~ to select all subsequent siblings. Transparent background. */
    .menu-top > #menu-top-toggle ~ .menu-top-list {
        display: inline-block;
        position: static;
        width: auto;
        background: transparent;
        vertical-align: middle;
        white-space: normal;
    }

    /* Inline block for list items. Margins set, and no border for top.  */
    .menu-top-list li {
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 6px; 
        border-top: none;
    }

    /* Links also inline blocks. Fills space in list item. */
    .menu-top-list a {
        display: inline-block;
        width: auto;
        padding: 6px 8px;
        margin: 0;
    }
    /* Display section nav, block level. Margins both center and give bottom space. */
    .section-nav {
        display: block;
        margin-bottom: 20px;
        margin: auto;
        width: 100%;
    }
    /* Change section display from outside to inside. (stop displaying outer, display inner). */
    .section-nav-inner {
        display: block;
    }
    .section-nav-outer {
        display: none;
    }

    /* Inline block (keeps on same row). Aligned at top (vertical). Basic styling for width, padding, border, etc. */
    .section-nav nav {
        margin: auto;
        vertical-align: top;
        width: 48%;
        background: #EEEEEE;
        padding: 10px;
        box-sizing: border-box;
        border: thin solid #000;
        display: inline-block;
    }
    /* No list style (icon/number/etc), no padding or margin. */
    .section-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    /* The link styling. Display as block. */
    .section-nav a {
        display: block;
        text-decoration: none;
        color: purple;
        padding: 4px 0;
    }
    /* Hover effect. */
    .section-nav a:hover {
        color: blue;
        background-color: #BBBBDD;
    }
}