/*
Theme Name:         Image
Theme URI:          https://www.cardsatwar.com
Author:             Dan Suleski
Description:        Image that can be copied from when setting up a new WP installation.
Version:            5.0
License:            GNU General Public License v2.0
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Template:           generatepress
Template Version:   3.1.2
Tags:               black
*/


/*/////////////////////////
 * SCROLLBAR
 */

/* Change the browser scrollbar. */
body::-webkit-scrollbar {
    width: 1.5em;
}

body::-webkit-scrollbar-track {
	background: #222222;
}
 
body::-webkit-scrollbar-thumb {
	background: #777777;
	background: linear-gradient(#444444, #999999);
}


/*/////////////////////////
 * GENERAL FORMATTING
 */

/* The lists are indented way too far. */
ul {
	list-style: inside;
	margin-left: 1em;
}

/* Underline the links. */
a:link, p a:hover, p a:active, p a:visited {
    text-decoration: underline;
}

/* Shortcut classes for immediate, general formatting. */
.flex {
	display: flex;
}
.no-underline,
.no-underline a {
	text-decoration: none !important;
}

/* Downsize the huge quotes. */
blockquote,
blockquote p {
	font-size: inherit !important;
}



/*/////////////////////////
 * HEADER
 */

/* Sticky menu background. */
.main-navigation.navigation-stick {
	background-color: rgba(0,0,0,1) !important;
	border-bottom: 0px solid rgb(240,240,240,1) !important;
}

/* Remove underlines from main header. */
#site-navigation a,
#sticky-navigation a,
#mobile-header a,
#generate-slideout-menu a {
	text-decoration: none;
}

/* Split up the off-canvas menu for visual grouping. */
#generate-slideout-menu .slideout-menu > li.set-divider {
    border-bottom: 2px solid var(--base);
	margin-bottom: 1.5em;
	padding-bottom: 0.5em;
}



/*/////////////////////////
 * FOOTER
 */

/* Bring the menu items closer together. */
.site-footer .wp-block-navigation__container {
	column-gap: 1em;
}

/* Styling for the RankMath/Yoast breadcrumbs, depending on which plugin brand we're using. */
.rank-math-breadcrumb > p {
	margin-bottom: 0;
}
.rank-math-breadcrumb > p > a {
	text-decoration: none;
}
.yoast-breadcrumbs {
	margin-bottom: 25px;
}
.yoast-breadcrumbs a {
	text-decoration: none;
}



/*/////////////////////////
 * LIGHTBOX
 */

/* Remove scrollbar from lightbox. */
.featherlight-iframe .featherlight-content {
	overflow: hidden !important;
}



/*/////////////////////////
 * MC4WP
 */

/* Mailchimp response text. */
.mc4wp-response {
	color: white;
}
.mc4wp-response p {
	margin-bottom: 0;
}

/* Expand the signup form to take the full width of the container. */
.mc4wp-form > .mc4wp-form-fields {
	display: flex;
}
.mc4wp-form > .mc4wp-form-fields > input[type=email] {
	flex-grow: 1;
}

/* Mailchimp on mobile/tablet. */
@media (max-width:1024px) {
	.mc4wp-form-fields {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.mc4wp-form-fields > input {
		flex-grow: 1;
	}
	.mc4wp-form-fields > input[type=email] {
		text-align: center;
	}
	.mc4wp-alert {
		text-align: center;
	}
}

/* The mailers on the Campaign pages are stretched (per above rules), but undo and center instead. */
.campaign-mailer .mc4wp-form > .mc4wp-form-fields {
	justify-content: center;
}
.campaign-mailer .mc4wp-form > .mc4wp-form-fields > input[type=email] {
	flex-grow: 0;
}


/*/////////////////////////
 * STRIPES
 */

/* The YT video needs a little attention since it lives inside a bordered container. */
.instruction-video {
	margin-bottom: 0px;
}
.instruction-video iframe {
	border-radius: 10px;
}

/* Actively-hovered card animation needs to be in front of adjacent cards. */
.cards-epic > .gb-grid-column:hover {
    z-index: 9;
}

/* Where to buy wants to add product shots with borders. */
.product-shot {
	border-radius: 10px;
}

/* The scene background needs room and is best if based on a percentage for any device width. */
.scene-container {
	padding-bottom: 20%;
}
@media (max-width: 1024px) {
	.scene-container::before {
		background-size: 125% !important;
	}
}
@media (max-width: 768px) {
	.scene-container::before {
		background-size: 150% !important;
	}
}



/*/////////////////////////
 * BONUS
 */

/* Accentuate the first letter of the reward text for the other half of the cipher. */
.bonus-path-greek-cipher-reward-text:first-letter {
	font-size: 2em;
 	line-height: 1em;
}



/*/////////////////////////
 * FIXES
 */

/* There's a bug in WP where centering shows in Gutenberg, but not on the frontend. */
.aligncenter {
	text-align: center;
}

/* Google's Material icons do not align nicely with text. */ 
.dashicons {
	vertical-align: middle;
}

/* The message field on the contact form is overlapping controls in the same container.  Confirmed WPForms bug in email from Wes on 3/16/22. */
.wpforms-clear-fix {
	clear: both;
}