/*
Theme Name: themoon Child
Theme URI: https://mpino.bitweb1.nwtc.edu/

Author: Maria Pino
Author URI: https://mpino.bitweb1.nwtc.edu/

Description: NWTC Web Contentent Management Design - Web CMD themoon Child Theme
Tags: two-columns

Template: themoon

Version: 1.0.1

Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 7.0

License: GNU GPU
License URI: https://www.gnu.org/licenses/gpl-3.0.txt

Text Domain: themoon-child

General comments (optional).
*/

:root {
    --font-system: -apple-system, BlinkMacSystemFont, Lora, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --color-main: hsl(210, 57%, 15%);
    --color-main-a20: hsl(240, 50%, 50%, .2);
    --color-main-a40: hsl(200, 50%, 50%, .4);
    --color-main-a60: hsl(210, 50%, 50%, .6);
    --color-main-a80: hsl(215, 50%, 50%, .8);
    --color-font-dark: hsl(210, 50%, 5%);
    --color-font-light: hsl(0, 0%, 95%);
    --color-font-light-a40: hsl(0, 0%, 100%, .4);
    --color-font-light-a60: hsl(0, 0%, 100%, .6);
    --color-font-light-a80: hsl(0, 0%, 100%, .8);
    --nav-main-height: 64px;
    --grid-columns-12: repeat(12, 1fr);
    --grid-columns-8: repeat(8, 1fr);
    --grid-gap: 20px;
    --grid-gap-half: calc(var(--grid-gap) * .5);
}

body {
    background-color: rgba(128, 128, 128, 0.221);
}

header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
}

.splide__slider {
    border: solid 2px var(--color-main);
    border-radius: 2px;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

.home .cards .card {
    border: solid 3px rgba(0, 0, 0, 0.479);
    border-radius: 2px;
}

.home .cards .card section {
    background-color: rgba(208, 208, 212, 0.539);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

#custom-header {
    border: solid 2px rgba(0, 0, 0, 0.546);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.nav-main-drawer {
    margin-top: 5px;
}

.nav-main ul,
.nav-sub ul {
    border-top: solid 3px rgba(255, 255, 255, 0.655);
    justify-content: center;
    margin: 0;
    padding: 2px;

}

.wp-block-rss__item {
    background-color: rgba(255, 255, 255, 0.922);
    color: var(--color-main);
    box-shadow: inset 0 4px 10px rgba(10, 8, 61, 0.746);
    padding: 3px;
}

aside a {
    color: white;
}

aside .wp-block-rss__item a {
    color: var(--color-main);
}



.page-numbers .page-numbers {
    box-shadow: 0 4px 10px rgba(10, 8, 61, 0.746);
    border: solid 1.5px rgba(0, 0, 128, 0.398);
}

aside h2 {
    border-bottom: solid 4px rgba(255, 255, 255, 0.628);
}

@media screen and (min-width: 768px) {



    header {
        position: static;
        color: var(--color-font-light);
        height: auto;
    }

    .header-content {
        display: grid;
        grid-template-columns: var(--grid-columns-12);
        gap: var(--grid-gap);
        margin-bottom: -20px;
    }


    header h1 {
        grid-column: span 7;
        position: static;
        height: auto;
        box-shadow: none;
        background: var(--color-main);
        padding: 0 var(--grid-gap);
        margin: 0;
        font-size: 2em;
        text-align: center;
    }

    header h1 a {
        border-bottom: none;
    }

    header h1 span {
        display: block;
        padding-right: calc(4px + 48px);
        font-size: .4em;
        line-height: 1;
        text-transform: uppercase;
        margin-top: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-content-ad {
        display: block;
        padding: 0 var(--grid-gap);
        grid-column: span 5;
        display: flex;
        justify-content: flex-end;
    }

    .header-content-ad img {
        object-fit: contain;
        max-width: 100%;
    }

    .main-content main {
        grid-column: span 9;
    }

    .main-content aside {
        grid-column: span 3;
        background-color: var(--color-main);
        color: var(--color-font-light);
        text-align: center;
        padding: 5px;
    }


    .wp-block-calendar {
        background-color: var(--color-font-light);
        padding: 5px;
        border-radius: 2px;
    }

    .wp-block-calendar a {
        color: var(--color-font-light);
    }

    .main-content .card {
        grid-column: span 4;
    }

    .footer-upper {
        box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
    }

}

@media screen and (min-width: 768px) {
    header h1 {
        grid-column: span 12;
    }
}