/*---------------------------------------------------------------------------------
 * Weaver Xtreme Theme - Version 4.0
 * First created April 2018
 * License: GNU General Public License v3 or later
 * License URI: //www.gnu.org/licenses/gpl-3.0.html
 * Copyright 2018, Bruce E. Wampler
 *
 * Gutenberg Styles - used for both editor and front-end display
 * Enqueue this style sheet in both of theme's enqueue_block_editor_assets and enqueue_block_assets actions.
 *
 * gutenberg-blocks.css - Version 3.9.3
 *
 * As Gutenberg adds more blocks these will likely need updating
 *
 * Gutenberg provides some default styling for some blocks, but the final content
 * will usually follow default theme styling.
 *
 * These styles supply specific block styling where overrides are needed to match the theme.
 * They could be included in the standard theme style.css, but this file gets loaded for
 * the Gutenberg editor to help make the editor match the theme.
 *
 * There are also other HTML elements that need styling to match the theme
 *
 * Note that this file will loaded via the enqueue_block_assets action, which load for
 * both the editor and front-end displays
 *
 * --------------------------------------------------------------------------------- */

/* Weaver Xtreme uses #content to wrap all page and post content */

#content *[class^="wp-block-"] {	/* put a margin at the bottom of each block */
	margin-bottom: 		1.5em;
}

/* some helper classes exclusive to Gutenberg for this theme */


.block-no-vertical-margins {
	margin-top: 		0 !important;
	margin-bottom: 		0 !important;
}

.block-no-bottom-margin {
	margin-bottom: 		0 !important;
}

.block-1em-vertical-margins {
	margin-top: 		1em !important;
	margin-bottom: 		1em !important;
}

.block-1em-bottom-margin {
	margin-bottom: 		1em !important;
}

.block-border {
	border:				1px solid #222;
	padding:			0.5em 1.0em;
}

.block-border-bottom {
	border-bottom:      1px solid #222;
	padding-bottom:		1.0em;
}

.block-no-border { border: none !important;}

.block-rounded,
.block-rounded-all{
	border-radius:		8px !important;
	padding:			1.0em 1.5em;
}

.block-rounded-top {
	border-top-left-radius:				8px;
	border-top-right-radius: 			8px;
	padding-top:						1.0em;
}

.block-rounded-bottom {
	border-bottom-left-radius:			8px;
	border-bottom-right-radius: 		8px;
	padding-bottom:						1.0em;
}

.block-rounded-left {
	border-top-left-radius:				8px;
	border-bottom-left-radius: 			8px;
	padding-left:						1.0em;
}

.block-rounded-right {
	border-top-right-radius:			8px;
	border-bottom-right-radius: 		8px;
	padding-bottom:						1.0em;
}

.block-bg-transparent-gray {
	background-color:			rgba(0,0,0,0.1) !important;		/* !important makes it work in the editor, too */
}


/* Blockquotes
 * Blockquotes needed a bit of styling to match the theme default.
 **/
blockquote.wp-block-quote {
	background:		rgba(128, 128, 128, 0.1);
	border-width:	0;
	border-left:	4px solid rgba(128, 128, 128, 0.4) !important;
	margin:			1.5em;
	overflow:		auto;
	padding:		1em 1.5em 1em 1.2em;
	width: 			90%;
}

.wp-block-quote p {
	font-style:		italic;
	font-size:		1em;
	margin:			0;
}


.wp-block-quote cite {
	border-width:	0;
	color:			inherit;
	display:		block;
	font-style:		normal;
	font-weight:	bold;
	margin-left:	3em;
	margin-top:		.5em;
}


/* =================== Audio =================== */

.wp-block-audio {}

/* =================== Block Columns =================== */
.wp-block-columns {
	grid-column-gap: 1.0em;		/* leave spacing between columns */
}

.wp-block-columns *[class^="wp-block-"] {	/* use the column gap for spacing */
	margin: 		0;
}

/* =================== Buttons =================== */

.wp-block-button {
	border-radius: 	3px;
	line-height: 	1.25;
	padding: 		.6em 1em;
	text-align: 	center;
}

.wp-block-button a {
	border: 		0;
	font-weight: 	bold;
}

.wp-block-button:not([style]) a:hover,
.wp-block-button:not([style]) a:focus {
	color: 			#fff;
}

.wp-block-button.alignwide,
.wp-block-button.alignfull {
	display: 		block;
}



/* =================== Categories =================== */


.wp-block-categories {}

.wp-block-categories-list ul,
.wp-block-categories-list li {
	list-style: 	none;
	margin: 		0;
	padding: 		0;
}

.wp-block-categories-list li {
	padding: 		0.25em 0;
}

.wp-block-categories-list li:not(:last-child) {
	border-bottom: 1px dashed rgba(0,0,0,0.2);
}

.wp-block-categories-list ul ul {
	padding-left: 		2em;
}

.wp-block-categories-list ul ul li:last-child {
	padding-bottom: 	0;
}

.wp-block-categories-dropdown {}



/* =================== Code =================== */

/* =================== Preformatted =================== */

/* Overrides to match theme */
.wp-block-code,
.wp-block-preformatted {
	background:			rgba(128, 128, 128, 0.1);
	border:				1px solid #aaaaaa;
	border-bottom-color:    #cccccc;
	border-radius:		2px;
	font-family:		'Inconsolata', monospace;
	font-size:			.8em;
	height:				auto;
	margin:				0;
	margin-bottom:		1.5em;
	outline:			none;
	overflow:			auto;
	padding:			6px 10px;
	vertical-align:		middle;
	width:				100%;
	word-wrap:			break-word;
	white-space:		pre-wrap;
}

.wp-block-code .blocks-plain-text {
	background:			transparent;
	border:				none !important;
	color:				inherit !important;
	font-family:		inherit!important;
	font-size:			0.8em;
	margin:				0 !important;
	overflow-x:			auto!important;
	padding:			0 !important;
}



/* =================== Cover Images =================== */

.wp-block-cover-image {					/* make them tall */
	min-height: 		50vw;
	height: 			100%;
}

.wp-block-cover-image.has-parallax {	/* this makes a nice looking parallax window */
	min-height:			 25vw;
}

/*
 * iOS has problems with parallax cover images (unlike Android devices) - they display some
 * random portion of the image that seems to be a dark background with no detail. Yuck!
 * Weaver Xtreme detects iOS devices and defines .is-ios for those devices. This rule
 * changes cover images to scroll instead of fixed which has much nicer display.
 */
.is-ios .wp-block-cover-image.has-parallax {
    background-attachment: scroll;
}


.wp-block-cover-image.has-background-dim {}

#content .wp-block-cover-image.has-parallax {	/* no margin for wide parallax images  */
	margin-bottom:		0;
}

/* see more code in the Full Width Section */


/* =================== Dropcaps =================== */

.has-drop-cap {}

/* Galleries */
ul.wp-block-gallery,
ul.wp-block-gallery li {
	padding:			0;
}

/* Images */
.wp-block-image {}

.wp-block-image.aligncenter {
	margin: 			0 auto;
}


@media (max-width: 767px) {
	figure.wp-block-image.alignleft {
		max-width:		50%;					/* make responsive */
	}

	figure.wp-block-image.alignright {
		max-width:		50%;					/* make responsive */
	}
}

figure.wp-block-image.alignleft {
	margin: 			.5em 1.0em 1.0em 0;		/* this leaves margins when float-left or float-right */
}

figure.wp-block-image.alignright {
	margin: 			.5em 0em 1.0em 1.0em;	/* this leaves margins when float-left or float-right */
}

figure.wp-block-image.aligncenter {
	margin: 			1.0em auto 1.0em auto;	/* this leaves margins when aligncenter */
}

figure.wp-block-image {
	margin:				0;						/* make the default Gutenberg style: no margins */
}

#content .wp-block-image figcaption {			/* custom styling for .wp-block-image figcaption - make a bit closer to the image in #content, not editor */
	margin: 			-.25em 0 .25em 0;
}


/* =================== Embed =================== */

.wp-block-embed {
	clear:				both;
}

*[class^="wp-block-embed-"] {
	clear:				both;
}



/* =================== Latest Posts =================== */

.wp-block-latest-posts__post-date {
	color: 				inherit;
	margin-bottom: 		0;
	opacity: 			0.8;
}

.wp-block-latest-posts,
.wp-block-latest-posts li {
	list-style: 		none;
	margin: 			0;
}

.wp-block-latest-posts li {
	padding: 			0.25em 0;
}

#content .wp-block-latest-posts li {
	padding: 			0.25em 2em;
}

.wp-block-latest-posts li:not(:last-child) {
	border-bottom: 		1px dashed rgba(0,0,0,0.2);
}

.wp-block-latest-posts.is-grid li {
	border: 			0;
}


/* =================== Pullquotes =================== */

.wp-block-pullquote {
	border: 			2px dotted rgba(0,0,0,0.25);
	background: 		rgba(0,0,0,0.15);
	box-shadow: 		0px 0px 0px 10px rgba(0,0,0,0.15);
	color: 				inherit;
	padding: 			1.5em 0.75em;
}

.wp-block-pullquote > p {
	font-family: 		inherit;
}

.wp-block-pullquote cite {
	color: 				inherit;
	opacity: 			0.8;
}



/* =================== Separator =================== */

.wp-block-separator {
	background-color:	#ccc;
	border:				none;
	box-sizing:			content-box;
	height:				4px;
	margin:				1.0em auto;
	max-width:			90%;
	width: 				90%;
}


/* =================== Tables ===================
 *
 * Overrides to match theme table styling
 *
 */

.wp-block-table {
	display: 			table;
}

.wp-block-table th {
	padding:			4px 4px;
	text-align:			left;
}

.wp-block-table td {
	margin:				0;
	padding:			4px 4px;
}



/* =================== Text Columns =================== */

@media only screen and ( max-width: 580px ) {	/* for phones */
	.wp-block-text-columns,
	.wp-block-text-columns.aligncenter {
		display: 		block;
	}

	.wp-block-text-columns.columns-2 .wp-block-column,
	.wp-block-text-columns.columns-3 .wp-block-column,
	.wp-block-text-columns.columns-4 .wp-block-column {
		float: 			none;
		margin-left: 	0;
		margin-right: 	0;
		width: 			100%;
	}
}



/* =================== Verse =================== */

.wp-block-verse {
	background:			rgba(128, 128, 128, 0.1);
	border:				none;
	border-width:		0;
	border-left:		4px solid rgba(128, 128, 128, 0.4);
	box-shadow:			none;
	font-family: 		'Alegreya', serif;
	font-size:			1em;
	font-style:			italic;
	margin:				1.5em;
	padding:			1em 1.5em 1em 1.2em;
	width:				90%;
}



/* =================== Video =================== */
.wp-block-video {}

.wp-block-video video,
.wp-block-video iframe {
	max-width: 			100%;
}

/* =================== Full and Wide =================== */

@media screen and (max-width: 767px) {	/* mobile */
	*[class^="wp-block-"].alignleft,
	*[class^="wp-block-"].alignright {
		max-width: 		75%;
	}
}

.wp-block-cover-image.alignwide,
.wp-block-cover-image.aligncenter {				/* This rule makes the image full width on desktops */
		width: 			100%;
		margin-left:	auto;
		margin-right:	auto;
}

.wp-block-cover-image.alignright {
	width: 				30%;
	margin-left: 		1.5em;
}

.wp-block-cover-image.alignleft {
	width: 				30%;
	margin-right: 		1.5em;
}


/*
 * If you want to extend these to your theme support when Gutenberg is not installed,
 * then they need to be in the theme's main style.css. Here, they support Gutenberg paragraphs.
 *
 */

.alignfull,
.alignwide,
.aligncenter {
	clear: 				both;
}

.wp-block-cover-image {			/* make cover images display more responsively */
	background-position:	center center;
}

/*
 * Wide and full make sense only on wide screens, so we wrap it all with the @media.
 * Extending images and areas to full width (beyond the normal content width) requires
 * overflow to be visible, and this can cause problems if there are sidebars being displayed.
 * Weaver Xtreme adds a couple of classes to the <body> so the full and wide width can be extended
 * only on full width pages (.weaverx-sb-one-column and .weaverx-has-sb).
 *
 * Note that editor internally styles wide and full.
 */
@media (min-width: 768px) {

	.weaverx-sb-one-column #container, .weaverx-sb-one-column #content, .weaverx-sb-one-column .content-page, .weaverx-sb-one-column .content-single {
		overflow:		visible;
	}	/* need to override Weaver Xtreme's default hidden for fullwidth to show */

	.weaverx-has-sb #container, .weaverx-has-sb #content, .weaverx-has-sb .content-page, .weaverx-has-sb .content-single {
		overflow:		hidden;
	}	/* need to override Weaver Xtreme's default hidden for fullwidth to show */


	/* alignfull images look best all the way to the edge */

	.weaverx-sb-one-column .wp-block-cover-image.alignfull,
	.weaverx-sb-one-column .wp-block-gallery.alignfull,
	.weaverx-sb-one-column .wp-block-image.alignfull img {
		margin-left: 	calc(50% - 50vw);
		margin-right: 	calc(50% - 50vw);
		max-width: 		1000%;
		width: 			100vw;
	}

	/* these are non-image based blocks, and look better with a bit of a left/right margin */

	.weaverx-sb-one-column .wp-block-columns.alignfull,
	.weaverx-sb-one-column .wp-block-text-columns.alignfull,
	.weaverx-sb-one-column .wp-block-table.alignfull,
	.weaverx-sb-one-column .wp-block-preformatted.alignfull,
	.weaverx-sb-one-column .wp-block-button.alignfull,
	.weaverx-sb-one-column .wp-block-verse.alignfull,
	.weaverx-sb-one-column .wp-block-latest-posts.alignfull,
	.weaverx-sb-one-column .wp-block-categories.alignfull,
	.weaverx-sb-one-column .wp-block-pullquote.alignfull,
	.weaverx-sb-one-column [class^="wp-block-embed"].alignfull,
	.weaverx-sb-one-column p.alignfull	{
		margin-left: 	calc(45% - 45vw) !important;	/* Weaver Xtreme needs this to override theme's native .alignfull */
		margin-right: 	calc(45% - 45vw) !important;
		max-width: 		1000%;
		width: 			auto;
	}

	/* As of April, 2018, Safari doesn't really play well with our technique of alignfull,
	 * spreading thing out way beyond the left and right edges. So we dynamically define
	 * .wvrx-is-safari on body, and use these rules that do work. Images work ok with the default.
	 */

body,
html {
    width: 100%;
    height: 100%;
}

	/* Safari needs its own rules, controlled by classes added by theme dynamic JavaScript for caching */
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-text-columns.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-table.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-preformatted.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-button.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-verse.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-latest-posts.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-categories.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari .wp-block-pullquote.alignfull,
	.weaverx-sb-one-column.wvrx-is-safari [class^="wp-block-embed"].alignfull,
	.weaverx-sb-one-column.wvrx-is-safari p.alignfull {
		margin-left: 	calc(33% - 33vw) !important;
		margin-right: 	calc(33% - 33vw) !important;
		max-width: 		1000% !important;
		width: 			auto !important;
	}

	/* alignwide is much simpler, and looks good on all browsers with 25% */

	.weaverx-sb-one-column .alignwide {
		margin-left: 	calc(25% - 25vw);
		margin-right: 	calc(25% - 25vw);
		width: 			auto;
		max-width: 		1000%;
	}
} /* end of @media */

/* end */