/*
Theme Name:         Image
Theme URI:          https://www.squazzed.com
Author:             Dan Suleski
Description:        Theme for Squazzed client
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.4
Tags:               black
*/



/*/////////////////////////
 * FORMAT: FORMS
 */

/*
 * Style the input fields (e.g. textboxes, dropdowns, etc).
 */
select {
	/* appearance:none;	*/
	/* color: var( --black ); */
}
textarea::-webkit-scrollbar {
	width: 0.25em;
}
textarea::-webkit-scrollbar-track {
	background: var( --white );
}
textarea::-webkit-scrollbar-thumb {
	background: var( --black );
}



/*/////////////////////////
 * FORMAT: LINKS
 */

/* Links should have a special underline. */
a {
	text-decoration-skip-ink: auto;
	text-decoration-style: solid;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.1em;
	transition: all 100ms ease;
}
a:hover {
	text-decoration-thickness: 0.15em;
	text-underline-offset: 0.15em;
}



/*/////////////////////////
 * FORMAT: LISTS
 */

/* The lists are indented way too far. */
ul {
	margin-left: 3em;
}



/*/////////////////////////
 * FORMAT: SCROLLBAR
 */

/* Change the width of the scrollbar. */
body::-webkit-scrollbar {
	width: 0.5em;
}

/* The background area where the thumb is not visible. */
body::-webkit-scrollbar-track {
	background: var( --black );
}

/* The small bit that moves back-and-forth. */
body::-webkit-scrollbar-thumb {

	/* Note: Rainbow solid. */
	background: linear-gradient(var( --pink ) 0% 16.67%, var( --orange ) 16.67% 33.33%, var( --yellow ) 33.33% 50%, var( --green ) 50% 66.67%, var( --blue ) 66.67% 83.33%, var( --purple ) 83.33% 100%);
	/**/
	
	/* Note: Rainbow blended. */
	/*
	background: linear-gradient(var(--pink), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple));
	/**/
	
	/* Note: Solid. */
	/*
	background: var( --purple );
	*/
}



/*/////////////////////////
 * AREA: BLOG
 */

/*
 * Adding outer/inner containers to every article is just asking to have a human error somewhere.
 * As such, build that padding into the regular WP structure instead.
 */
article.type-post {
	padding: var( --outer-padding-y ) calc( var( --outer-padding-x ) + var( --inner-padding-x ) ) var( --outer-xs-padding-y );
}
@media ( max-width: 1024px ) {
	article.type-post { padding: var( --outer-padding-y-tablet ) calc( var( --outer-padding-x-tablet ) + var( --inner-padding-x-tablet ) ) var( --outer-xs-padding-y-tablet ); }
}
@media ( max-width: 767px ) {
	article.type-post { padding: var( --outer-padding-y-mobile ) calc( var( --outer-padding-x-mobile ) + var( --inner-padding-x-mobile ) ) var( --outer-xs-padding-y-mobile ); }
}

/*
 * Default spacing for the blog content.  Blog authors should place their content into a flat list
 * of logical Containers, then label those Containers.  The following CSS will space things out.
 * Note:	The special CSS selector is also targeting the backend so authors can see the spacing
 * 			without needing to flip over to the frontend for a preview constantly.
 */
article.type-post .entry-content, :where(.editor-styles-wrapper) .is-root-container.wp-block-post-content {
	display: flex;
	flex-direction: column;
	padding-bottom: 2em;
	padding-top: 2em;
	row-gap: 5em;
}
article.type-post .entry-content figure, .is-root-container.wp-block-post-content figure {
	margin-bottom: 0.5em;
}


/*
 * The comments area cannot be overwritten through GP/GB, so styling must be manual here.
 */
.comments-area {
	padding: var( --outer-xs-padding-y ) calc( var( --outer-padding-x ) + var( --inner-padding-x ) );
}
@media ( max-width: 1024px ) {
	.comments-area { padding: var( --outer-xs-padding-y-tablet ) calc( var( --outer-padding-x-tablet ) + var( --inner-padding-x-tablet ) ); }
}
@media ( max-width: 767px ) {
	.comments-area { padding: var( --outer-xs-padding-y-mobile ) calc( var( --outer-padding-x-mobile ) + var( --inner-padding-x-mobile ) ); }
}
.comments-area input#author {
	width: 100%;
}
.comments-area input#email {
	width: 100%;
}
.comments-area input#url {
	width: 100%;
}
.comments-area .comment-form {
	margin-bottom: 2em;
}



/*/////////////////////////
 * AREA: HEADER
 */

/* 
 * The header has some special requirements - should stick to the top.
 * Note: GB doc says 767px, but my local Chrome says 781px for mobile.
 */
/*
#header {
	position: sticky;
	top: 0;
	z-index: 99;
}
body.logged-in > #header {  
    top: 32px;  
}
@media ( max-width: 767px ) {
	body.logged-in > #header {  
    	top: 0;  
	}
}
*/



/*/////////////////////////
 * AREA: OFF-CANVAS PANEL
 */

/*
 * This section changes the styling of the off-canvas panel.
 * 
 * Can change the width of the panel.
 * 
 * GP puts an X at the top corner of the off-canvas panel -
 * we are replacing it with our own, so remove the GP version.
 */
:root {
	/*
	--gp-slideout-width: 90vw !important;
	*/
}
.slideout-exit {
	display: none !important;
}



/*/////////////////////////
 * PLUGIN: NINJA FORMS
 * https://ninjaforms.com/docs/custom-css/
 */

/*
 * Update the look of the asterisks in the labels.
 */
.nf-form-content .nf-field-label > label > .ninja-forms-req-symbol {
	color: var( --pink );
}

/*
 * Descriptions do not need so much space between them and the label.
 */
.nf-form-content .nf-field-description {
	margin-bottom: 10px;
	margin-top: -10px;
}

/*
 * Unnecessary to show the warning above forms about filling out asterisked fields.
 */
.nf-form-fields-required {
	display: none;
}

/*
 * Style the Submit button on the forms to look like ZZ.
 */
.nf-form-content .nf-field-element > input[type=submit] {
    background-color: var( --blue-dark );
    color: var( --white );
    font-weight: 700;
    padding: 1em 1.25em;
    text-transform: uppercase;
}
.nf-form-content .nf-field-element > input[type=submit]:focus,
.nf-form-content .nf-field-element > input[type=submit]:hover {
    background-color: var( --blue );
}

/*
 * Styles the validation messages.
 */
.nf-form-layout .nf-error-msg {
	color: var( --pink );
	font-weight: 700;
}

/*
 * Prevent the submit message from going out so wide.
 */
.nf-response-msg {
	font-weight: 700;
	text-align: center;
	text-wrap: balance;
}



/*/////////////////////////
 * PLUGIN: WOOCOMMERCE
 * https://woocommerce.com/
 */

/* 
 * There is a known bug where the 'em' sizing is not being respected for WC buttons. 
 * https://generate.support/topic/woocommerce-add-to-cart-font-size/
 * 
 * Additionally, there are at least six WC buttons that cannot be completely/properly
 * styled in the Customizer AND additionally are a real PITA to style with needless and
 * ridiculously specific CSS selectors.
 * 
 * As a result, this seems like a good place to give all WC buttons a default style.
 * Downside to this is that because the CSS selectors are not necessarily the most
 * specific, the '!important' adjustment will need to be added in some cases.
 * 
 * Also note that we are adding the Comments Area (not just WC) here since it suffers
 * from something similar that needs the manual styling like this.
 */
.comments-area input[type=submit],
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page input.submit {
	clip-path: var( --morph-3-shape ) !important;
	font-size: 1.25em !important;
    padding: 1em 1.25em !important;
}
@media ( max-width: 1024px ) {
	.comments-area input[type=submit],
	.woocommerce-page a.button,
	.woocommerce-page button.button,
	.woocommerce-page input.button,
	.woocommerce-page input.submit {
		font-size: 1.1em !important;
	}
}
@media ( max-width: 767px ) {
	.comments-area input[type=submit],
	.woocommerce-page a.button,
	.woocommerce-page button.button,
	.woocommerce-page input.button,
	.woocommerce-page input.submit {
		font-size: 1em !important;
	}
}


/* 
 * Fake the container concept on the Product-related Pages.
 * Note:	The below section of CSS is a subset of the Container CSS.
 * 			I was tempted to add directly to that CSS, but figured that
 * 			keeping it separate would make it more clear at the expense
 * 			of additional maintenance.
 * 
 * Note:	Also, #page acts as the outer and #content acts as the inner.
 */
.woocommerce div#content {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding-left: var( --inner-padding-x );
	padding-right: var( --inner-padding-x );
	width: 100%;
}
.woocommerce div#page {
	overflow: hidden;
	padding: var( --outer-xs-padding-y ) var( --outer-xs-padding-x );
}
@media ( max-width: 1024px ) {
	.woocommerce div#page {  
    	padding: var( --outer-xs-padding-y-tablet ) var( --outer-xs-padding-x-tablet );
	}
}
@media ( max-width: 767px ) {
	.woocommerce div#content {
		padding-left: var( --inner-padding-x-mobile );
		padding-right: var( --inner-padding-x-mobile );
	}
	.woocommerce div#page {  
    	padding: var( --outer-xs-padding-y-mobile ) var( --outer-xs-padding-x-mobile );
	}
}


/* There is a Mini-Cart Block that WC provides.  It needs some attention to make it look right. */
.wc-block-mini-cart {
	font-size: 0.5em;
}
.wc-block-mini-cart .wc-block-mini-cart__button {
	padding: 0.5em;
}
.wc-block-mini-cart .wc-block-mini-cart__button:focus,
.wc-block-mini-cart .wc-block-mini-cart__button:hover:not([disabled]) {
	background: transparent;
	color: var( --white );
	opacity: 1;
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount {
	/* Intentionally empty. */
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount:focus,
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount:hover {
	/* Intentionally empty. */
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge {
	/* Intentionally empty. */
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__icon {
	color: var( --white );
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
	background-color: var( --black );
	border-radius: 0;
	color: var( --white );
}

/* 
 * WC sets the visibility of the Mini-Cart to "hidden" on the Cart/Checkout Pages.
 * However, this continues to take up the space and just leave it blank, so it looks
 * weird when the other icons in the top bar do not adjust.  Thus, use display.
 */
.woocommerce-cart .wc-block-mini-cart,
.woocommerce-checkout .wc-block-mini-cart {
	display: none;
}

/* When the Mini-Cart is clicked, there is a drawer that slides out.
 * The default styling is largely white-on-white.
 */
.wp-block-woocommerce-mini-cart-contents {
	background: var( --black );
	border-left: solid 0.5em var( --white );
}
.wp-block-woocommerce-mini-cart-contents .wp-block-woocommerce-mini-cart-shopping-button-block  {
	/*DAN-NOTE: Custom Morph Button */
	border-radius: 0;
	clip-path: var( --morph-1-shape );
}


/*
 * Style up the Product Archive Pages.
 * Note:	We are specifically styling up the Archives; not intending to
 * 			style up places like the Related Products and such here.
 */

.woocommerce.woocommerce-page ul.products li.product .wc-product-image {
	padding: 1em;
	/*DAN-NOTE: Keeping the below snippet around for now - uncomment to surround product image in a morphed frame. */
	/*
	background: var( --blue-dark );
	clip-path: var( --morph-4-shape );
	padding: 2em;
	position: relative;
	*/
}
.woocommerce.woocommerce-page span.onsale {
	background: var( --purple-dark );
	clip-path: var( --morph-3-shape );
}

.woocommerce.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	color: var( --orange );
	font-size: 1.8em;
	text-wrap: balance;
}
.woocommerce.woocommerce-page ul.products li.product .woocommerce-product-details__short-description {
	/* Note: I tried "text-wrap: balance;", but did not look great.  Keeping stub around for future. */
}
.woocommerce.woocommerce-page ul.products li.product .price {
	color: var( --blue );
	font-size: 1.2em;
}

.woocommerce.woocommerce-page ul.products li.product .price del {
	color: var( --blue-dark );
	font-weight: normal;
	opacity: 1;
}
.woocommerce.woocommerce-page ul.products li.product .price ins {
	color: var( --green );
	font-size: 1.2em;
	font-weight: bold;
}


/* Show the first product in the first row by itself, as a sort of featured product. */
/*DAN-NOTE: Does not look great, but leave it around just in case.
.woocommerce.archive .woocommerce-products-header+div ul > li:first-child {
	grid-column: 1 / -1;
}
*/

/*
 * WC bases the icons of the ATC AJAX button on the 'button' class; however, we do not want to use
 * the 'button' class due to the look, so we need to implement a special icon solution.  Specifically:
 * 		- There are two states for the ATC button - 'loading' (processing) and 'added' (done)
 * 		- Prepopulate the button (in GB) with both icons side-by-side as SVGs.
 * 		- When processing, gray the button (optionally), disable clicks, and spin the load icon.
 * 		- Hide the "View Cart" that normally appears after the button; the header/alert are enough.
 */
.ajax_add_to_cart {
	transition: all 0.25s ease-out;
}
.ajax_add_to_cart:not(.added, .loading) {
	column-gap: 0em;
}
.ajax_add_to_cart svg {
	display: none;
}
.ajax_add_to_cart.added svg.check {
	animation: heartBeat 2s ease 0s 1 normal both;
	display: inline;
}
.ajax_add_to_cart.loading {
	pointer-events: none;
	position: relative;
}
.ajax_add_to_cart.loading::after {
	background-color: var( --pink-dark );
	content: '';
	height: 100%;
	inset: 0;
	opacity: 0.25;
	position: absolute;
	width: 100%;
}
.ajax_add_to_cart.loading svg.spin {
	animation: rotate 2s ease 0s infinite normal both;
	display: inline;
}
@keyframes rotate {
	from { rotate: 0; }
	to { rotate: 1turn; }
}


/* 
 * Style up the Single Product Pages.
 * Note: 	There are several bits on these Pages that need some specific
 * 			attention.  In the case of buttons, it may just be a color and
 * 			the rest of the styling of the buttons happens across all WC
 * 			buttons earlier in this CSS.
 */

/* Thumbnails are not wrapping properly. */
.woocommerce.single-product div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 0.5em;
}
.woocommerce.single-product div.product div.images .flex-control-thumbs li {
	padding: 0;
}

/* Adjust the Product title - it is huge. */
.product_title {
	font-size: 2.4em;
	line-height: 1em;
	margin-bottom: 0.5em;
}

/* Take care of all the Single Product ATC button. */
.woocommerce .button.single_add_to_cart_button {
	/*DAN-NOTE: Custom Morph Button */
    background-color: var( --blue-dark );
}
.woocommerce .button.single_add_to_cart_button:focus,
.woocommerce .button.single_add_to_cart_button:hover {
	/*DAN-NOTE: Custom Morph Button */
    background-color: var( --blue );
}

/*
 * Tabs for things like "Description" and "Reviews".
 * Note: Seriously, everything in WC is so weird and difficult to style.
 */
.woocommerce div.product .woocommerce-tabs {
	margin-bottom: 5em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li {
    font-weight: 700;
    padding: 1em 1.25em;
    text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
	color: var( --white );
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	color: var( --green-light );
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active {
	/*DAN-NOTE: Custom Morph Button */
	background: var( --green-dark );
	clip-path: var( --morph-2-shape );
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	color: var( --white );
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active:hover {
	background: var( --green );
}

/* Review bits can look better. */
.woocommerce #review_form p.stars a {
	color: var( --orange-light );
	opacity: 1;
}
.woocommerce #review_form #respond textarea {
	height: 5em;
}

/*
 * There is a sticky panel that WC displays when scrolling down on
 * Single Product pages - style this bit.
 */
.woocommerce .add-to-cart-panel {
	border-bottom: 0.25em solid var( --white );
}


/*
 * Fix up some of the Cart/Checkout elements.
 */
.wc-block-cart__submit-button {
	background: var( --green-dark );
	color: var( --white );
	text-decoration: none;
}
.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button:hover {
	background: var( --green );
	color: var( --white );
}
.wc-block-components-checkout-place-order-button {
	background: var( --pink-dark );
	color: var( --white );
}
.wc-block-components-checkout-place-order-button:focus,
.wc-block-components-checkout-place-order-button:hover {
	background: var( --pink );
	color: var( --white );
}

/* Make the form labels a bit smaller, as they are currently encroaching a bit. */
.woocommerce-page label {
	font-size: 0.75em !important;
}

/*
 * WC uses the WP columns, which have hardcoded breakpoints.  In the case
 * of the Checkout Page, the two columns stack <= 730px.  Unfortunately,
 * the Checkout Block that WC uses in Gutenberg is locked and GB Containers
 * cannot be swapped out, so instead we need to align the breakpoint instead.
 * 
 * Reference:
 * 		https://wordpress.org/support/topic/change-responsive-beak-point-on-columns/
 */
@media (max-width: 768px){
	.wp-column-breakpoint {
    	flex-basis: 100% !important;
	}
	.wp-column-stack-first {
		order: 0;
		margin-bottom: 2em;
	}
	.wp-column-stack-last {
		order: 99;
	}
}
@media (min-width: 769px){
	.wp-column-breakpoint {
    	flex-basis: 0 !important;
    	flex-grow: 1 !important;
	}
}

/* 
 * The WC messages need to be aligned properly.  Test this by using ATC on non-AJAX (e.g. on Single Pages).
 */
.woocommerce-message {
	align-items: center;
	display: flex;
	flex-direction: row-reverse;
	gap: 3em;
	justify-content: space-between;
}
.woocommerce-message::after {
	content: none;
}

.woocommerce-page .woocommerce-message a.button {
	background: var( --white );
	color: var( --black );
}
.woocommerce-page .woocommerce-message a.button:focus,
.woocommerce-page .woocommerce-message a.button:hover {
	background: var( --black );
	color: var( --white );
}


/* 
 * If purchasing from outside the US (with a different currency), WC pops up
 * a notice at the top of the screen indicating that the pricing is changing
 * to the customer's local currency.  This needs a little styling.
 * 
 * Demo:
 * 	https://squazzed.com/wp-admin/admin.php?page=wc-settings&tab=wcpay_multi_currency
 */
p.woocommerce-store-notice {
	background: var( --purple-dark );
	font-weight: bold;
	text-wrap: balance;
}
p.woocommerce-store-notice > a {
	font-weight: normal;
	margin-left: 0.5em;
}



/*/////////////////////////
 * CLASS: CONTAINERS
 */

/*
 * We use a concept of Outer/Inner Containers on almost every Page/Post.
 * Unfortunately, GP does not offer a nice way to pad or otherwise style
 * these type of Containers in the Customizer or Elements.  To prevent
 * manually setting values in every GB Block instance, we are using the
 * Global Styles system to assign the apprpriate class to each Container
 * and styling it in exactly one place, here.
 * 
 * Why is this necessary?
 * Several reasons:
 * 		- 	Without this, the content within Inner Containers would be
 * 			butt-up against the left and right edges of the viewport.
 * 		-	A bunch of the floaters are going outside the bounds of the
 * 			Containers and causing the site to scroll horizontally.
 * 
 * Note
 * 		-	If the below is empty, there is a chance that the CSS Properties
 * 			were set through the GB class styling GUI, not here.
 * 		-	The "1200" max-width must match the value set in the Customizer.
 */
:root {
	--inner-padding-x: 1em;
	--inner-padding-x-tablet: 1em;
	--inner-padding-x-mobile: 0.5em;
	--outer-padding-x: 1em;
	--outer-padding-y: 7em;
	--outer-xl-padding-x: var( --outer-padding-x );
	--outer-xl-padding-y: 10em;
	--outer-xs-padding-x: var( --outer-padding-x );
	--outer-xs-padding-y: 3em;
	--outer-padding-x-tablet: 0.5em;
	--outer-padding-y-tablet: 4em;
	--outer-xl-padding-x-tablet: var( --outer-padding-x-tablet );
	--outer-xl-padding-y-tablet: 7em;
	--outer-xs-padding-x-tablet: var( --outer-padding-x-tablet );
	--outer-xs-padding-y-tablet: 2em;
	--outer-padding-x-mobile: 0.25em;
	--outer-padding-y-mobile: 5em;
	--outer-xl-padding-x-mobile: var( --outer-padding-x-mobile );
	--outer-xl-padding-y-mobile: 5em;
	--outer-xs-padding-x-mobile: var( --outer-padding-x-mobile );
	--outer-xs-padding-y-mobile: 1em;
}
.container-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding-left: var( --inner-padding-x );
	padding-right: var( --inner-padding-x );
	width: 100%;
}
.container-outer, .container-outer-xl, .container-outer-xs {
	overflow: hidden;
	padding: var( --outer-padding-y ) var( --outer-padding-x );
}
.container-outer-xl {
	padding: var( --outer-xl-padding-y ) var( --outer-xl-padding-x );
}
.container-outer-xs {
	padding: var( --outer-xs-padding-y ) var( --outer-xs-padding-x );
}
@media ( max-width: 1024px ) {
	.container-outer {  
    	padding: var( --outer-padding-y-tablet ) var( --outer-padding-x-tablet );
	}
	.container-outer-xl {
		padding: var( --outer-xl-padding-y-tablet ) var( --outer-xl-padding-x-tablet );
	}
	.container-outer-xs {
		padding: var( --outer-xs-padding-y-tablet ) var( --outer-xs-padding-x-tablet );
	}
}
@media ( max-width: 767px ) {
	.container-inner {
		padding-left: var( --inner-padding-x-mobile );
		padding-right: var( --inner-padding-x-mobile );
	}
	.container-outer {  
    	padding: var( --outer-padding-y-mobile ) var( --outer-padding-x-mobile );
	}
	.container-outer-xl {
		padding: var( --outer-xl-padding-y-mobile ) var( --outer-xl-padding-x-mobile );
	}
	.container-outer-xs {
		padding: var( --outer-xs-padding-y-mobile ) var( --outer-xs-padding-x-mobile );
	}
}



/*/////////////////////////
 * CLASS: DESIGNS
 */

/* 
 * Memphis - can be used with Buttons, Containers, etc.
 * Note: 	This class is shared with a GB Global Class.
 */
:root {
	--memphis-shape-1-angle: 7deg;
	--memphis-shape-1-angle-alt: -7deg;
	--memphis-shape-1-color: var( --blue-dark );
	--memphis-shape-1-color-alt: var( --purple-light );
	--memphis-shape-2-color: var( --purple-light );
	--memphis-shape-2-color-alt: var( --blue-dark );
}
.design-memphis {
	align-items: center;
	position: relative;
}
.design-memphis::before {
	background: var( --memphis-shape-1-color );
	content: '';
	height: 100%;
	left: -3%;
	position: absolute;
	top: 0%;
	transform: rotate( var( --memphis-shape-1-angle ) ) translate( 0%, -20% );
	transition: all 0.25s ease;
	width: 75%;
	z-index: -1;
}
.design-memphis::after {
	background: var( --memphis-shape-2-color );
	border-radius: 100%;
	content: '';
	height: 3em;
	left: 50%;
	position: absolute;
	top: -50%;
	transform: translate( 0%, 0% );
	transition: all 0.25s ease;
	width: 3em;
	z-index: -1;
}
.design-memphis-hover-color:focus::before, 
.design-memphis-hover-color:hover::before {
	background: var( --memphis-shape-1-color-alt );
}
.design-memphis-hover-color:focus::after,
.design-memphis-hover-color:hover::after {
	background: var( --memphis-shape-2-color-alt );
}
.design-memphis-hover-move:focus::before,
.design-memphis-hover-move:hover::before {
	transform: rotate( var( --memphis-shape-1-angle-alt ) ) translate( 0%, -20% );
}
.design-memphis-hover-move:focus::after,
.design-memphis-hover-move:hover::after {
	transform: translate( 100%, 50% );
}
.design-memphis-animate-peek::after {
	animation: memphis-peek-animation 20s ease 0s infinite normal forwards;
}
@keyframes memphis-peek-animation {
	from { transform: translate( 0%, 0% ); }
	5% { transform: translate( 100%, 0% ); opacity: 1; }
	7% { transform: translate( 100%, 40% ); opacity: 0; }
	8% { transform: translate( -200%, 40% ); opacity: 0; }
	10% { transform: translate( -200%, 0% ); opacity: 1; }
	17% { transform: translate( 0%, 0% ); }
	to { transform: translate( 0%, 0% ); }
}


/* 
 * Morph - A series of trapezoidal and special shapes that
 * can be used with Buttons, Containers, Videos, etc.
 * Watch:	https://www.youtube.com/watch?v=YszONjKpgg4
 * Note: 	This is a GB Global Class with additional styling that cannot be
 * 			done through the GUI.  Styles through the GUI take precedence.
 */
:root {
	--morph-1-shape: polygon( 0% 0%, 100% 2%, 97% 97%, 3% 100% );	/* Matches the ZZ logo shape. */
	--morph-2-shape: polygon( 0% 2%, 100% 0%, 97% 100%, 3% 97% );	/* Vertical symmetry of #1. */
	--morph-3-shape: polygon( 2% 2%, 98% 0%, 100% 100%, 0% 97% );
	--morph-4-shape: polygon( 2% 0%, 98% 2%, 100% 97%, 0% 100% );	/* Vertical symmetry of #3. */
}
.design-morph-1 { align-items: center; clip-path: var( --morph-1-shape ); }
.design-morph-2 { align-items: center; clip-path: var( --morph-2-shape ); }
.design-morph-3 { align-items: center; clip-path: var( --morph-3-shape ); }
.design-morph-4 { align-items: center; clip-path: var( --morph-4-shape ); }
.design-morph-hover-blend { transition: all 0.25s ease; }
.design-morph-1.design-morph-hover-blend:focus, .design-morph-1.design-morph-hover-blend:hover { clip-path: var( --morph-2-shape ); }
.design-morph-2.design-morph-hover-blend:focus, .design-morph-2.design-morph-hover-blend:hover { clip-path: var( --morph-1-shape ); }
.design-morph-3.design-morph-hover-blend:focus, .design-morph-3.design-morph-hover-blend:hover { clip-path: var( --morph-4-shape ); }
.design-morph-4.design-morph-hover-blend:focus, .design-morph-4.design-morph-hover-blend:hover { clip-path: var( --morph-3-shape ); }
.design-morph-hover-blend.design-morph-animate-blend:focus, .design-morph-hover-blend.design-morph-animate-blend:hover { animation-play-state: paused; }
.design-morph-animate-blend { animation: morph-blend-animation 5s linear 0s infinite alternate forwards; }
@keyframes morph-blend-animation {
	from { clip-path: var( --morph-1-shape ); }
	33% { clip-path: var( --morph-3-shape ); }
	67% { clip-path: var( --morph-2-shape ); }
	to { clip-path: var( --morph-4-shape ); }
}


/* 
 * Neon - can be used with Buttons, Containers, etc.
 * Watch:	https://www.youtube.com/watch?v=6xNcXwC6ikQ
 * Note: 	This is a GB Global Class with additional styling that cannot be
 * 			done through the GUI.  Styles through the GUI take precedence.
 */
:root {
	--neon-base-opacity: 0.5;
	--neon-glow-speed: 250ms;
	--neon-flicker-speed: 10s;
}
.design-neon {
	align-items: center;
	border: currentColor 0.125em solid;
	border-radius: 0.25em;
	box-shadow:
		inset 0 0 0.5em 0 currentColor,
		0 0 0.5em 0 currentColor;
	padding: 0.5em 1em;
	position: relative;
	z-index: 0;
}
.design-neon-animate-flicker::before, .design-neon-hover-glow::before {
	animation: neon-glow-dim-animation var( --neon-glow-speed ) linear 0s 1 normal forwards;
	box-shadow: 0 0 2em 0.5em currentColor;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}
.design-neon-shadow::after {
	background: currentColor;
	content: '';
	filter: blur( 1.5em );
	height: 100%;
	left: 0;
	opacity: var( --neon-base-opacity );
	pointer-events: none;
	position: absolute;
	top: 120%;
	transform:
		perspective( 2em )
		rotateX( 40deg )
		scale( 0.75, 0.25 );
	width: 100%;
}
.design-neon-hover-glow:focus::before, .design-neon-hover-glow:focus::after,
.design-neon-hover-glow:hover::before, .design-neon-hover-glow:hover::after {
	animation: neon-glow-bright-animation var( --neon-glow-speed ) linear 0s 1 normal forwards;
}
.design-neon-animate-flicker::before, .design-neon-animate-flicker::after {
	animation:
		neon-glow-dim-animation var( --neon-glow-speed ) linear 0s 1 normal forwards,
		neon-flicker-animation var( --neon-flicker-speed ) linear var( --neon-glow-speed ) infinite normal none;
}
@keyframes neon-flicker-animation {
	from { opacity: var( --neon-base-opacity ); }
	10% { opacity: var( --neon-base-opacity ); }
	11% { opacity: 0.1; }
	12% { opacity: 0.3; }
	13% { opacity: 0.0; }
	14% { opacity: var( --neon-base-opacity ); }
	20% { opacity: var( --neon-base-opacity ); }
	21% { opacity: 0.2; }
	22% { opacity: var( --neon-base-opacity ); }
	40% { opacity: var( --neon-base-opacity ); }
	41% { opacity: 0.2; }
	42% { opacity: 0.4; }
	43% { opacity: 0.0; }
	44% { opacity: 0.3; }
	45% { opacity: 0.1; }
	46% { opacity: var( --neon-base-opacity ); }
	to { opacity: var( --neon-base-opacity ); }
}
@keyframes neon-glow-dim-animation {
	from { opacity: 1; }
	to { opacity: var( --neon-base-opacity ); }
}
@keyframes neon-glow-bright-animation {
	from { opacity: var( --neon-base-opacity ); }
	to { opacity: 1; }
}



/*/////////////////////////
 * CLASS: LAYOUTS
 */

/*
 * Masonry is not support by the Grid Block or in the Query Loop, so we must support
 * it manually in this manner.
 * 
 * Reference:
 * https://www.gmitropapas.com/generatepress-tips-and-tricks/generateblocks/generateblocks-query-loop-and-grid-masonry-layout/
 * 
 * Note:
 * One suggestion from the original author is to change the selectors from 'x-masonry' to '#page .x-masonry'.  However,
 * I prefer to not limit the use of masonry to pages and do not want to dirty this up with other selectors, so I am
 * intentionally using '!important' where necessary.
 */
:root {
	--masonry-gap: 1em;
	--masonry-columns: 3;
	--masonry-columns-tablet: 2;
	--masonry-columns-mobile: 1;
}
.layout-masonry-less {
	--masonry-columns: 2;
}
.layout-masonry-more {
	--masonry-columns: 4;
}
.layout-masonry, .layout-masonry-less, .layout-masonry-more {
	column-count: var( --masonry-columns );
	column-gap: var( --masonry-gap );
	display: block !important;
}
.layout-masonry > div, .layout-masonry-less > div, .layout-masonry-more > div {
	display: inline-block;
	margin-bottom: var( --masonry-gap );
	width: unset !important;
}
@media ( max-width: 1024px ) {
	.layout-masonry, .layout-masonry-less, .layout-masonry-more {
		column-count: var( --masonry-columns-tablet );
	}
}
@media ( max-width: 767px ) {
	.layout-masonry, .layout-masonry-less, .layout-masonry-more {
		column-count: var( --masonry-columns-mobile );
	}
}

/*
 * The Polaroid layout is intended to place a photo or some sort of content, typically in a square aspect ratio,
 * towards the top of a white rectangle.  There is large padding at the bottom for text.  Since we use this layout
 * in several places on the site, we are standardizing through the CSS.  For use on a Container.
 */
:root {
	--polaroid-padding: 1.25em;
	--polaroid-padding-tablet: 1em;
	--polaroid-padding-mobile: 0.75em;
}
.layout-polaroid {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: var( --polaroid-padding );
	row-gap: var( --polaroid-padding );
}
@media ( max-width: 1024px ) {
	.layout-polaroid {
		padding: var( --polaroid-padding-tablet );
		row-gap: var( --polaroid-padding-tablet );
	}
}
@media ( max-width: 767px ) {
	.layout-polaroid {
		padding: var( --polaroid-padding-mobile );
		row-gap: var( --polaroid-padding-mobile );
	}
}



/*/////////////////////////
 * CLASS: PATTERNS
 */

/* 
 * Cube - a repeating square pattern retro pixel feel, largely for use with Containers.
 * Note: This class is shared with a GB Global Class.
 * References:
 * 		https://stackoverflow.com/questions/49547157/square-pattern-as-background-on-a-div-with-pure-css
 * 		https://www.magicpattern.design/tools/css-backgrounds
 */
:root {
	--cube-color: currentColor;
	--cube-color-negative: var( --black );
	--cube-size: 3em;
}
.pattern-cube, .pattern-cube-rainbow {
	background-image:
		repeating-linear-gradient(
			to bottom,
			transparent 0%,
			transparent 50%,
			var( --black ) 50%,
			var( --black ) 100%
		),
		repeating-linear-gradient(
			to right,
			var( --cube-color ) 0%,
			var( --cube-color ) 50%,
			var( --cube-color-negative ) 50%,
			var( --cube-color-negative ) 100%
		);
	background-position: contain;
	background-size: var( --cube-size ) var( --cube-size );
}
.pattern-cube-rainbow {
	--cube-size: 10em;
	background-image:
		repeating-linear-gradient(
			to bottom,
			transparent 0%,
			transparent 8.33%,
			var( --cube-color ) 8.33%,
			var( --cube-color ) 16.67%,
			transparent 16.67%,
			transparent 25%,
			var( --cube-color ) 25%,
			var( --cube-color ) 33.33%,
			transparent 33.33%,
			transparent 41.67%,
			var( --cube-color ) 41.67%,
			var( --cube-color ) 50%,
			transparent 50%,
			transparent 58.33%,
			var( --cube-color ) 58.33%,
			var( --cube-color ) 66.67%,
			transparent 66.67%,
			transparent 75%,
			var( --cube-color ) 75%,
			var( --cube-color ) 83.33%,
			transparent 83.33%,
			transparent 91.67%,
			var( --cube-color ) 91.67%,
			var( --cube-color ) 100%
		),
		repeating-linear-gradient(
			to right,
			var( --pink ) 0%,
			var( --pink ) 8.33%,
			transparent 8.33%,
			transparent 16.67%,
			var( --orange ) 16.67%,
			var( --orange ) 25%,
			transparent 25%,
			transparent 33.33%,
			var( --yellow ) 33.33%,
			var( --yellow ) 41.67%,
			transparent 41.67%,
			transparent 50%,
			var( --green ) 50%,
			var( --green ) 58.33%,
			transparent 58.33%,
			transparent 66.67%,
			var( --blue ) 66.67%,
			var( --blue ) 75%,
			transparent 75%,
			transparent 83.33%,
			var( --purple ) 83.33%,
			var( --purple ) 91.67%,
			transparent 91.67%,
			transparent 100%
		);
}


/* 
 * Dither - a dotted pattern with a retro feel, largely for use with Containers.
 * Note: This class is shared with a GB Global Class.
 * References:
 * 		https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/
 * 		https://css-irl.info/css-halftone-patterns/
 * 		https://codepen.io/thebabydino/pen/gOpMeWv
 */
:root {
	--dither-color: currentColor;
	--dither-mask-alpha: 1.0;
	--dither-pitch: 1em;
	--dither-pitch-2: 0.75em;
	--dither-pitch-3: 0.5em;
	--dither-pitch-4: 0.25em;
	--dither-pos: calc( var( --dither-pitch ) / 2 );
	--dither-stop-1: 0.1em;
	--dither-stop-2: 0.7em;
	--dither-stop-2-alt: 0.1em;
}
.pattern-dither, .pattern-dither-alt, .pattern-dither-alt-2, .pattern-dither-alt-3, .pattern-dither-alt-4 {
	background-image: radial-gradient( circle at center, var( --white ) var( --dither-stop-1 ), transparent var( --dither-stop-2 ) );
	background-position: 0 0, var( --dither-pos ) var( --dither-pos );
	background-repeat: round;
	background-size: var( --dither-pitch ) var( --dither-pitch );
	mask-image: linear-gradient( var( --dither-color ), rgb( 0 0 0 / var( --dither-mask-alpha ) ) );
}
.pattern-dither-alt, .pattern-dither-alt-2, .pattern-dither-alt-3, .pattern-dither-alt-4 {
	background-image: radial-gradient( circle at center, var( --dither-color ) var( --dither-stop-1 ), transparent var( --dither-stop-2-alt ) );
}
.pattern-dither-alt-2 {	background-size: var( --dither-pitch-2 ) var( --dither-pitch-2 ); }
.pattern-dither-alt-3 {	background-size: var( --dither-pitch-3 ) var( --dither-pitch-3 ); }
.pattern-dither-alt-4 {	background-size: var( --dither-pitch-4 ) var( --dither-pitch-4 ); }


/*
 * Partition.
 */
:root {
	--inlay-color: var( --white );
	--inlay-color-cut: var( --black );
	--inlay-depth: 1.5em;
	--inlay-depth-cut: calc( var( --inlay-depth ) * 2 );
}
.pattern-inlay, .pattern-inlay-alt {
	box-shadow: inset var( --inlay-depth ) var( --inlay-depth ) 0 0 var( --inlay-color );
}
.pattern-inlay-alt {
	box-shadow: 
		inset var( --inlay-depth ) var( --inlay-depth ) 0 0 var( --inlay-color ),
		inset var( --inlay-depth-cut ) var( --inlay-depth-cut ) 0 0 var( --inlay-color-cut );
}


/* 
 * Ribbon - a striped pattern with a retro feel, largely for use with Containers.
 * Note: This class is shared with a GB Global Class.
 * References:
 * 		https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/
 */
:root {
	--ribbon-angle: 135deg;
	--ribbon-color: currentColor;
	--ribbon-stop-1: 0.2em;
	--ribbon-stop-2: 0.2em;
}
.pattern-ribbon, .pattern-ribbon-alt, .pattern-ribbon-alt-2 {
	background-image:
		repeating-linear-gradient(
			var( --ribbon-angle ),
			transparent
				calc( ( var( --ribbon-stop-1 ) * 0 ) + ( var( --ribbon-stop-2 ) * 0 ) )
				calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ),
			var( --ribbon-color )
				calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) )
				calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) )
		);
}
.pattern-ribbon-alt, .pattern-ribbon-alt-2 {
	--ribbon-stop-1: 2em;
	--ribbon-stop-2: 2em;
}
.pattern-ribbon-alt-2 {
	--ribbon-angle: -135deg;
}
.pattern-ribbon-rainbow {
	/* Note: The two stop variables must add to 16.67% (or 1/6) since there are 6 colors involved. */
	--ribbon-stop-1: 15%;
	--ribbon-stop-2: 1.67%;
	background: repeating-linear-gradient(
		var( --ribbon-angle ), 
		var( --pink-dark )
			calc( ( var( --ribbon-stop-1 ) * 0 ) + ( var( --ribbon-stop-2 ) * 0 ) )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) ),
		var( --orange-dark )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 1 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 1 ) )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 2 ) ),
		var( --yellow-dark )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 2 ) )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 2 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 2 ) )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 3 ) ),
		var( --green-dark )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 3 ) )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 3 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 3 ) )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 4 ) ),
		var( --blue-dark )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 4 ) )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 4 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 4 ) )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 5 ) ),
		var( --purple-dark )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 5 ) )
			calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 5 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 5 ) )
			calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 6 ) )
	);
}



/*/////////////////////////
 * CLASS: _COMMON
 */

/*
 * GB does not support several positions in their backend due to Gutenberg difficulties.
 * The suggested solution is to create a class until they can figure out how to make
 * Gutenberg respond properly.
 * https://generate.support/topic/how-to-position-absolute/
 */
.x-absolute {
	position: absolute;
}

/* GB does not have a GUI to balance multi-line headlines. */
.x-balance {
	text-wrap: balance;
}

/* 
 * Visually count a number between two ends of a range.
 * https://css-tricks.com/animating-number-counters/
 * 
 * Since attr() is not supported on all browsers, options
 * must be added through custom variables, as follows:
 * --counter-delay (the amount of time to wait until the counter starts)
 * --counter-duration (how long it takes to perform the counting animation)
 * --counter-stop-1 (the starting value of the counter)
 * --counter-stop-2 (the ending value of the counter)
 */
@property --counter-num {
	syntax: '<integer>';
	initial-value: 1;
	inherits: false;
}
.x-counter {
	--counter-delay: 0s;
	--counter-duration: 5s;
	--counter-stop-1: 434;
	--counter-stop-2: 5;
	animation: counter-animation var( --counter-duration ) linear var( --counter-delay ) 1 forwards;
	counter-reset: counter-num var( --counter-num );
}
.x-counter::after {
	content: counter( counter-num );
}
@keyframes counter-animation {
	from { --counter-num: var( --counter-stop-1 ); }
	to { --counter-num: var( --counter-stop-2 ); }
}

/*
 * Force something to not wrap.
 * Note: I did not initally comment this and do not remember what it was for.
 */
.x-nowrap {
	white-space: nowrap;
}

/* Animate crossing out text. */
.x-strike {
	position: relative; 
}
.x-strike::after {
	animation: strike-animation 100ms linear 0.3s 1 forwards;
	background-color: var( --pink-light );
	content: '';
	height: 0.15em;
	left: -3%;
	opacity: 100%;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 0;
	z-index: 99;
}
@keyframes strike-animation { 
	to { width: 106%; } 
}

/* In some cases, the default wavy line on links can look strange. */
.x-underline-none a {
	text-decoration: none;
}



/*/////////////////////////
 * SPECIAL
 */

/* 
 * Visually change up the ranking headline.
 */
.rank-headline {
	--rank-headline-background-color: var( --yellow-dark );
	--rank-headline-shadow-blur: 0;
	--rank-headline-shadow-color: var( --pink );
	--rank-headline-shadow-offset: 4px;
	--rank-headline-text-color: var( --white );
	background-color: var( --rank-headline-background-color );
	color: var( --rank-headline-text-color );
	text-shadow: var( --rank-headline-shadow-color ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-blur );
}
.rank-headline .start {
	font-size: 0.8em;
	vertical-align: bottom;
}
.rank-headline .prefix {
	font-size: 0.67em;
	vertical-align: bottom;
}
.rank-headline .end {
	position: relative;
}
.rank-headline .end-world {
	animation-name: headShake, hinge;
	animation-delay: 5s, 5.5s;
	animation-duration: 0.5s, 2s;
	animation-fill-mode: both;
	display: inline-block;
	font-size: 0.95em;
	transform-origin: center left;
	vertical-align: bottom;
}
.rank-headline .end-mom {
	animation-name: fadeIn, tada;
	animation-delay: 7.5s, 9s;
	animation-duration: 1.5s, 2s;
	animation-fill-mode: both;
	color: var( --rank-headline-shadow-color );
	display: inline-block;
	font-weight: bold;
	left: 0;
	position: absolute;
	text-shadow: var( --rank-headline-text-color ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-blur );
}

/*
 * The Bonus soundboard needs a little love.
 */
.sound-trigger {
	cursor: pointer;
}



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

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

/* The off-canvas panel is being forced to have white text. */
.slideout-navigation .off-canvas-social-bar a {
	color: var( --black );
}