/*
Theme Name: WP Theme Dev - m07 a07 Child
Theme URI: https://toleary.bitweb1.nwtc.edu

Author: Torin O'Leary
Author URI: https://toleary.bitweb1.nwtc.edu

Description: WP Theme Dev - Module 07 Assignment 07 Child Theme
Tags: two-column

Template: wptd-a07

Version: 2.0

Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.0 and greater

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

Text Domain: wptd

General comments (optional).
*/
/* =WordPress Core
-------------------------------------------------------------- */

:root {
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --color-yellow: hsla(44, 93%, 70%, 1);
    --color-lt-yellow: hsla(44, 93%, 93%, 1);
    --color-background: hsla(44, 93%, 93%, 1);
    --color-lt-orange: hsla(20, 78%, 93%, 1);
    --color-lt-blue: hsl(225,50%,95%);
    --color-main: hsl(20, 78%, 42%);
    --color-main-a20: hsl(20, 78%, 42%, .2);
    --color-main-a40: hsl(20, 78%, 42%, .4);
    --color-main-a60: hsl(20, 78%, 42%, .6);
    --color-main-a80: hsl(20, 78%, 42%, .8);
    --color-font-dark: hsl(225, 50%, 5%);
    --color-font-light: hsl(0, 0%, 97%);
    --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-gradient: linear-gradient(0deg,rgba(191, 79, 24, 1) 0%, rgba(250, 212, 107, 1) 100%);
    --nav-gradient-bottom: linear-gradient(180deg,rgba(191, 79, 24, 1) 0%, rgba(250, 212, 107, 1) 50%, rgba(254, 245, 221, 1) 100%);
    --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);
}

/* .nav-main,
.nav-sub {
    background-color: var(--color-main-a40);
} */

body {
    font-family: 'Red Hat Display', Arial, Helvetica, sans-serif;
    background-color: var(--color-background);
}

header h1 {
    color: var(--color-font-dark);
    font-size: 3.5rem;
    font-family: 'Amatic SC', fantasy;
    text-shadow: 1px 1px 0 hsl(97,37%,95%),-1px -1px 0 hsl(97,37%,95%),1px -1px 0 hsl(97,37%,95%),-1px 1px 0 hsl(97,37%,95%);
}

header h1 span {
    font-size: .6em;
}

.splide__track {
    border-radius: var(--grid-gap);
}

.cards {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap-half);
}

.cards .card-link:hover .card-figure img {
    transform: none;
}

.home .card {
    background-color: white;
}

.wp-calendar-table {
    background-color: white;
}

p a.post-edit-link {
    font-size: 1.2em;
}

p a.post-edit-link::before {
    content: "✍️";
    text-decoration: none;
    display: inline-block;
    margin-right: var(--grid-gap-half);
}

.wp-block-categories-list {
    display: flex;
    flex-flow: row wrap;
    gap: var(--grid-gap-half);
}

.cat-item {
    background-color: var(--color-lt-blue);
    text-decoration: none;
    font-size: 1.25rem !important;
    padding: calc(var(--grid-gap) * .75) calc(var(--grid-gap) * .5);
    transition: all .3s ease;
    box-shadow: 2px 2px 2px var(--color-main-a80);
    text-align: center;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    flex: auto;
}

.cat-item:hover,
.cat-item:focus {
    transform: scale(1.1);
}

.wp-block-categories-list .cat-item a:hover,
.wp-block-categories-list .cat-item a:focus {
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    header {
        border-radius: 0 0 var(--grid-gap) var(--grid-gap);
    }

    header a {
        color: var(--color-font-dark);
    }
    
    header h1 {
        color: var(--color-font-light);
        text-shadow: none;
        grid-column: 1 / -1;
    }

    .nav-main-drawer {
        overflow-y: auto;
        /* background-color: var(--color-yellow); */
        background: var(--color-yellow);
    }

    .nav-main {
        background: var(--color-yellow);
        color: var(--color-font-dark);
    }

    .nav-main ul {
        padding: 0;
    }

    .nav-main ul li a {
        padding: var(--grid-gap-half) var(--grid-gap);
        border: none;
        transition: all .3s ease;
    }

    .nav-main ul a:hover,
    .nav-main ul a:focus {
        border-bottom: none;
        /* border-bottom-color: none; */
        background-color: var(--color-lt-orange);
    }

    .nav-main .current-menu-item a {
        background-color: var(--color-main);
        color: var(--color-font-light);
    }

    .nav-main .current-menu-item a:hover,
    .nav-main .current-menu-item a:focus {
        background-color: var(--color-main);
    }


    .nav-sub {
        border-radius: 0 0 var(--grid-gap) var(--grid-gap);
    }

    .nav-sub ul li a {
        color: var(--color-font-light);
    }

    .card-link {
        transition: all .35s ease;
        height: 100%;
    }

    .card-link img {
        padding: var(--grid-gap-half);
    }

    .card-link:link {
        filter: grayscale();
    }

    .cards .card-link:link .card-figure img {
        transform: scale(.9);
    }

    .cards .card-link:hover .card-figure img {
        transform: none;
    }

    .card-link:hover,
    .card-link:focus {
        filter: none;
    }

    .card-section-button {
        transition: all .35s ease;
    }
    
    .card-section-button:hover,
    .card-section-button:focus {
        background-color: var(--color-main);
        color: var(--color-font-light);
    }

    .card-section-button:active {
        box-shadow: 1px 1px 1px 1px inset var(--color-font-dark);
    }
}