/*
Theme Name: ATX GD Theme
Text Domain: atx-gd-theme
Version: 3.581
Description: ATX Game Designers static site theme.
Tags: hobby, one-column, custom-menu
Author: Andrew Jonhardt
Author URI: https://github.com/AndrewJDGalga
Requires at least: 6.1
Tested up to: 6.2
Requires PHP: 5.6
License: MIT
License URI: https://opensource.org/license/mit/
*/

:root {
    /*base 3 colors*/
    --light-blue: #DAE6ED;
    --dark-green: #249245;
    --deep-blue: #18244D;
    /*complements --lightblue*/
    --clear-sky-blue: #2BB1FF;
    --faded-blue: #0F91DB;
    --mud-brown: #8F5200;
    --dune-brown: #DB840F;
    /*complements --dark-green*/
    --sharp-green: #2BFF6B;
    --dim-green: #0FDB4D;
    --dull-red: #8F0100;
    --wildflower-red: #DB110F;
    /*complements --deep-blue*/
    --pool-blue: #2B5DFF;
    --fading-day-blue: #0F3FDB;
    --dull-gold: #8F6800;
    --off-gold: #DBA40F;
    /*extra shading*/
    --shadow-grey: #2d2d2d;
    --protospiel-poster-tan: #fcf2c3;
    /*header backing color extracted from image*/
    --bleached-folder: #eee3cd;
    --off-paper: #f7f0e5;
}

html {
    height: 100%;
}

body {
    font-family: "bilo", serif;
    font-style: normal;
    font-weight: 400;
    min-height: 100vh;
    color: var(--deep-blue);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 320px;
}

.atxgd-header {
    font-family: "hightower-text", serif;
    font-style: normal;
    font-weight: 400;
}

#mobile-burger {
    background-color: var(--deep-blue);
    width: 42px;
    height: 32px;
    padding: 2px;
    filter: drop-shadow(5px 5px 5px var(--shadow-grey));
    box-shadow: inset 0.1em 0.1em 0.1em 0 var(--light-blue), inset -0.1em -0.1em 0.1em 0 var(--shadow-grey);
}

.mobile-burger_icon {
    width: 80%;
    height: 80%;
    position: relative;
    top: 2px;
}

.atxgd-header>#mobile-burger {
    display: none;
}

.header_logo {
    width: 100%;
    min-height: 64px;
}

.full-width-backing {
    position: absolute;
    top: 0;
    width: 100%;
    height: 236px;
    background-image: url('./assets/banner/ATX-GD-Web-banner-photo-onlyCrop1.webp'); 
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: -10;
}

.header_backing-image {
    text-align: center;
    width: 100%;
    padding-bottom: 6%;
} 

.header_home-wrapper > img {
    width: 30%;
    height: auto;
}

.header_nav>ul {
    position: relative;
    display: flex;
    gap: 4%;
    top: -48px;
    justify-content: center;
    align-content: center;
    list-style: none;
    visibility: visible;
}

/*drill down automatically generated nav menus*/
.header_nav>ul>li>a{
    text-decoration: none;
    color: var(--light-blue);
    background-color: var(--deep-blue);
    padding: 4px;
    filter: drop-shadow(5px 5px 5px var(--shadow-grey));
    box-shadow: inset 0.1em 0.1em 0.1em 0 var(--light-blue), inset -0.1em -0.1em 0.1em 0 var(--shadow-grey);
}
.header_nav>ul>li>a:hover {
    color: var(--mud-brown);
    background-color: var(--clear-sky-blue);
}

.header_nav>ul>.special-link>a {
    color: var(--dune-brown);
}

.header_nav>ul>.current-menu-item>a {
    color: var(--deep-blue);
    background-color: var(--dark-green);
}

/*center nav menu*/
.header_nav>ul:first-child {
    padding-left: 0;
}

.atxgd-footer {
    margin-top: auto;
}

.icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
    height: 4vmax;
    width: 100%;
    overflow-y: hidden;
} 

.facebook-svg,
.meetup-svg {
    margin-top: -4px;
    margin-bottom: -4px;
}

.gen-icon-svg {
    width: 32px;
    height: 32px;
}
.meetup-svg {
    position: relative;
    width: 48px;
    height: 48px;
    top: 6px;
}

.high-center-wave {
    background-color: var(--deep-blue);
    border-top-left-radius: 150% 300%;
    border-top-right-radius: 150% 300%;
    height: 100%;
    width: 100%;
}

/*meeple*/
.wp-nav-ul .current-menu-item a::before {
    content: "";
    position: absolute;
    display: block;
    background-image: url('./assets/banner/meeple_green.svg');
    background-repeat: no-repeat;
    width: 3vmax;
    height: 3vmax;
    top: -2.5vmax;
}

.atxgd-content {
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 16px;
}

/*pointer rules = attempting to avoid stuck selection color on mobile*/
@media (pointer:fine) {
    #mobile-burger:hover {
        color: var(--mud-brown);
        background-color: var(--clear-sky-blue);
    }
}
@media (pointer:coarse){
    #mobile-burger:active {
        color: var(--mud-brown);
        background-color: var(--clear-sky-blue);
    }
}
@media screen and (orientation: portrait) {
    .header_backing-image {
        background-size: cover;
    }
}
@media screen and (max-width: 590px) {
    .atxgd-header>#mobile-burger {
        display: block;
        position: relative;
        top: -48px;
        margin-left: auto;
        margin-right: auto;
    }
    .header_nav>ul {
        top: -64px;
        background-color: var(--deep-blue);
        flex-direction: column;
        width: fit-content;
        align-items: center;
        justify-items: center;
        margin-left: auto;
        margin-right: auto;
        visibility: hidden;
        padding: 4px;
        gap: 16px;
        filter: drop-shadow(5px 5px 5px var(--shadow-grey));
        box-shadow: inset 0.1em 0.1em 0.1em 0 var(--light-blue), inset -0.1em -0.1em 0.1em 0 var(--shadow-grey);
        z-index: 100;
    }
    .header_nav>ul>li>a {
        background-color: transparent;
        filter: none;
        box-shadow: none;
    }
    .atxgd-content {
        margin-top: -180px;
    }
}

@media screen and (max-width: 590px),
screen and (orientation: portrait)
{
    .header_backing-image {
        text-align: left;
    }
    .header_nav>ul {
        justify-content: left;
    }
    .high-center-wave {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .icon-container {
        justify-content: left;
    }
}
@media screen and (max-width: 720px) {
    .wp-nav-ul .current-menu-item a::before {
        display: none;
    }
}
@media screen and (max-width: 1080px){
    .header_backing-image {
        background-image: linear-gradient(var(--bleached-folder), var(--off-paper), white);
        background-image: url('./assets/banner/ATX-GD-Web-banner-photo-onlyCrop1.webp');
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 100%;
        padding-bottom: 6%;
    }
}
@media screen and (min-width: 1100px)
{
    .atxgd-header,
    .atxgd-content,
    .atxgd-footer {
        width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }

    .wp-nav-ul .current-menu-item a::before {
        width: 32px;
        height: 32px;
        top: -27px;
    }
}

/*Class to assign for link coloring. 
Set by directly editing HTML. 
Don't currently wish to target all a elements*/
.embedded-external-link>a {
    background-color: var(--dark-green);
    color: var(--light-blue);
    text-decoration: none;
    width: max-content;
    padding: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/*assign to quotes on page*/
.page-quote {
    font-family: "bilo", serif;
    font-weight: 400;
    font-style: italic;
    background-color: var(--light-blue);
}

/*Some Wordpress blocks will have flex automatically assigned but won't center elements. May manually assign this.*/
.wp-flex-center {
    align-self: center;
    justify-self: center;
}

/*_________________________________________________________________________________________
Published games list styling */
/*group for game title and author*/
.published-game_attribution {
    background-color: var(--deep-blue);
    color: var(--dune-brown);
    padding: 4px;
}

.signed-game_attribution {
    background-color: var(--off-gold);
    color: var(--fading-day-blue);
    padding: 4px;
}

.published-game_container.published-desktop {
    display: none; /*currently not needed, but kept just in case*/
}

.published-game_container.published-mobile {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 8vmax;
}

.published-game_attribution {
    width: 100%;
}

.published-game_image {
    width: 50%;
    height: auto;
    border: 6px solid var(--deep-blue);
}

/*_________________________________________________________________________*/
/*Pretty Google Cal plugin styling*/
/*applied to left-right nav and list view buttons*/
.fc .fc-button-group>.fc-button {
    background-color: var(--deep-blue);
    color: var(--light-blue);
    border-radius: 0;
    box-shadow: inset 0.1em 0.1em 0.1em 0 var(--light-blue), inset -0.1em -0.1em 0.1em 0 var(--shadow-grey);
}
.fc .fc-button-group>.fc-button:hover {
    background-color: var(--clear-sky-blue);
}

/*applied to selected view button*/
.fc .fc-button-group>.fc-button.fc-button-primary.fc-button-active:not(:disabled) {
    background-color: var(--dark-green);
    color: var(--light-blue);
}
.fc .fc-button-group>.fc-button.fc-button-primary.fc-button-active:not(:disabled):hover {
    background-color: var(--clear-sky-blue);
}

/*disabled buttons*/
.fc .fc-button.fc-button-primary:disabled, .fc .fc-button:disabled {
    background-color: var(--shadow-grey);
    color: var(--light-blue);
    border-radius: 0;
}

/*today button*/
.fc .fc-button.fc-button-primary:not(:disabled) {
    background-color: var(--deep-blue);
    color: var(--light-blue);
    border-radius: 0;
    box-shadow: inset 0.1em 0.1em 0.1em 0 var(--light-blue), inset -0.1em -0.1em 0.1em 0 var(--shadow-grey);
}
.fc .fc-button.fc-button-primary:not(:disabled):hover {
    background-color: var(--clear-sky-blue);
}

/*events on calendar*/
.fc-daygrid-event.fc-daygrid-block-event.fc-h-event {
    border-radius: 0;
    background-color: var(--dark-green);
    color: var(--light-blue);
}

/*today*/
.fc .fc-daygrid-day.fc-day.fc-day-today {
    background-color: rgb(219 132 15 / 70%);
}

/*targetting event popup*/
[id^="tippy-"] .tippy-content {
    color: var(--deep-blue);
}

.toolloc>.button {
    text-decoration: none;
    background-color: var(--dark-green);
    box-shadow: inset 0.1em 0.1em 0.1em 0 var(--light-blue), inset -0.1em -0.1em 0.1em 0 var(--shadow-grey);
    color: var(--deep-blue);
    padding: 2px;
}

/*___________________________________________
Carousel*/
div.carousel-slider {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
/*
div.carousel-slider-outer {

}*/

/*_________________________________________
WP Forms*/
/*labels*/
.wpforms-container .wpforms-field .wpforms-field-label {
    color: var(--deep-blue);
    font-family: "bilo", serif;
    font-weight: 600;
    font-style: normal;
}

/*submit button*/
button[type=submit].wpforms-submit {
    background-color: var(--deep-blue);
    color: var(--light-blue);
    width: 5em;
    height: 2em;
    border-radius: 20%;
    font-family: "bilo", serif;
    font-weight: 550;
    font-style: normal;
    box-shadow: inset 0.1em 0.1em 0.1em 0 var(--light-blue), inset -0.1em -0.1em 0.1em 0 var(--shadow-grey);
}
button[type=submit].wpforms-submit:hover {
    background-color: var(--clear-sky-blue);
    color: var(--mud-brown);
    cursor: pointer;
}

/*Input fields, very general for now*/
input[type=text],
input[type=email],
textarea
 {
    background-color: var(--light-blue);
    border: 4px solid var(--deep-blue);
}

/*__________________________________________________________
Screenreaders compatability: https://wordpress.org/documentation/article/css/ 
idk if this actually gets applied to anything*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
 
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/*________________________________________________________________________
Protospiel Styling*/
.atxgd-list-style_hide {
    list-style: none;
}

.atxgd-list-style_meeple {
    list-style-image: url('./assets/banner/meeple_green.svg');
}

.atxgd-tan-background {
    background-color: var(--protospiel-poster-tan);
    padding: 8px;
}

.atxgd-blue-background>figure>img {
    background-color: var(--deep-blue);
    padding: 8px;
}

.atxgd-padding_8top-bottom {
    padding-top: 8px;
    padding-bottom: 8px;
}

.atxgd-padding_4top-bottom {
    padding-top: 4px;
    padding-bottom: 4px;
}