/*
 Theme Name:   Blocksy Child for Ground Zero
 Description:  Blocksy Child for Ground Zero
 Template:     blocksy
 Author:	   noise
 Version:      1.0.9
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Added fonts */
@font-face {
    font-family: LeagueGothic;
    src: url("fonts/LeagueGothic-Regular.ttf");
    font-weight:100;
}

@font-face {
    font-family: OCRAExtended;
    src: url("fonts/OCRAEXT.TTF");
    font-weight: normal;
}

html, body {font-family: "OCRAExtended", Arial, sans-serif !important;}

h1, h2, h3 {font-family: "LeagueGothic", Arial, sans-serif !important; letter-spacing: 2.2px !important; margin-top: .05em !important; margin-bottom: .2em !important;}
p, .textwidget {font-family: "OCRAExtended", Arial, sans-serif !important; font-size: 100%;}

.menu-item a {font-family: "LeagueGothic", Arial, sans-serif !important; letter-spacing: .5px !important; color: #f0bc2a !important; font-size: 150% !important; font-weight: 300 !important; transition: color .5s ease-out !important;}
.menu-item a:hover, .current-menu-item a {color: #eeeeee !important;}

/* Stuff to make the home page elements stack properly with design elements */
.homeflow {display: flex; flex-flow: column;}
.homediag {padding-bottom: 20px;}

.homeblock {border: 1px solid #ffffff; position: relative; margin: 10px 5px; padding: 10px;}
.homeblock-bottom {position: absolute; bottom: -10px; font-family: "OCRAExtended", Arial, sans-serif !important; font-size: 85% !important;}
.homegrown {flex-grow: 1; margin-bottom: 0px;}

/* Prevent scrunching when content blocks stack on mobile */
@media screen and (max-width: 599px){
    .homeblock-bottom {position: relative;}
}


/* Modified navigation for calendar detail page for this theme */
.gzeventinfo a {color: #f0bc2a;}
.single-event-detail .nav-links a {color:#f0bc2a;}
.single-event-detail .nav-links a:hover {color:#eeeeee;}
.single-event-detail .nav-previous {width: 48%; float: left;}
.single-event-detail .nav-previous span::after {content: "\a"; white-space: pre;}
.single-event-detail .nav-next {width: 48%; float: right; text-align: right;}
.single-event-detail .nav-next span::after {content: "\a"; white-space: pre;}

/* Add some padding for multiple mp3 players on a page */
.mbMiniPlayer {margin: 0 3% 10px !important;}


/* MadMIMI form trick it out */
/* Button color and font */
.mimi-submit {background-color: #6e35c2 !important; font-family: "OCRAExtended", Arial, sans-serif !important;}
.mimi-error {background-color: #111111 !important;}

/* Make the form stack a bit on wider screens */
@media screen and (min-width: 650px) and (max-width: 899px){
    .mimi-form-wrapper p:nth-child(2) {width: 48%; float: left;}
    .mimi-form-wrapper p:nth-child(3) {width: 47%; margin-left: 5%; float: left;}
}
@media screen and (min-width: 900px){
    .mimi-form-wrapper p:nth-child(2), .mimi-form-wrapper p:nth-child(3) {width: 31%; margin-left: 3%; float: left;}
    .mimi-form-wrapper p:nth-child(1) {width: 32%; margin-left: 0%; float: left;}
}

/* Cheat to get multi-column layout to stack early to accommodte for Google Map */
@media screen and (min-width: 600px) and (max-width: 781px) {
	.wp-block-column {flex-basis: 100%; margin-left:0 !important; margin-right:0 !important;}
}


/* Prevent navigation on single posts from stacking */
@media screen and (max-width: 639px) {
	div.nav-previous > a > span, div.nav-next > a > span {font-size:70%;}
	div.nav-previous, div.nav-next {width:48% !important;}
	div.nav-previous {float:left;}
	div.nav-next {margin-top:0 !important; float:right; text-align:right;}
}

/* AJAX Load More is no longer following the CSS left for it */
/* Added for grid layout for Images of the Week */
.iotw-grid {width:31%; float:left; text-align:center; margin:0 1% 15px;}
.iotw-image {position: relative; padding-top: 55%; background: center/cover; overflow: hidden; margin: 0;}
.iotw-title {margin-top:6px; height:42px;}
.iotw-time {margin-top:-10px; height:15px;}

.playlist-wrap .iotw-time {display:none;}
.playlist-wrap .iotw-title {margin-top:-10px;}

@media all and (max-width: 1199px) {
	.iotw-grid {width:48%; margin:0 1% 15px;}
}

@media all and (max-width: 768px) {
	.iotw-grid {width:98%; margin:0 1% 8px;}
}