/*---------------------------------------------------------------------------------
 * Theme Support for Gutenberg - 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 4.0
 *
 * 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 typically needed to match the theme.
 * They could be included in the standard theme style.css, but currently it makes sense to load this file
 * as part of the Gutenberg editor styling sequence.
 *
 * There are also other HTML elements that need styling to match the theme, but that should be theme dependent.
 *
 * Note that this file will loaded via the enqueue_block_assets action, which loads
 * both the editor and front-end displays.
 *
 * --------------------------------------------------------------------------------- */


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

/* 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 =================== */
/* leave spacing between columns */
/* use the column gap for spacing */
/* use Gutenberg default column
 .wp-block-columns {
	grid-column-gap: 1.0em;
}

.wp-block-columns *[class^="wp-block-"] {
	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;
	xoverflow-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 {}

.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 {
	clear:		both;
}

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

ul.wp-block-gallery.alignnone {
	display:		flex;			/* override some themes */
}

/* 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: 			.1em 1.0em 1.0em 0;		/* this leaves margins when float-left or float-right */
}

figure.wp-block-image.alignright {
	margin: 			.1em 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 */
}

.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;
}

.wp-block-pullquote.alignleft {
	margin-right:		1.5em;
}

.wp-block-pullquote.alignright {
	margin-left:		1.5em;
}


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

.wp-block-separator {
	background-color:	#ccc;
	border:				none;
	box-sizing:			border-box;
	height:				4px;
	margin:				1.0em auto;
	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%;
	}
}

.tsg-plugin .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.
 * The vw technique use here to work with virtually any theme, but does not work with the
 * editor's internal wide/full - it leads to a horizontal scroll bar on the bottom of the
 * editor. Prefixing with a front-end only prefix (.tsg-plugin) makes thes apply only then.
 */
@media (min-width: 768px) {

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


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

	/* non-image based blocks use the fallback fullwidth
	.wp-block-columns.alignfull,
	.wp-block-text-columns.alignfull,
	.wp-block-table.alignfull,
	.wp-block-preformatted.alignfull,
	.wp-block-button.alignfull,
	.wp-block-verse.alignfull,
	.wp-block-latest-posts.alignfull,
	.wp-block-categories.alignfull,
	.wp-block-pullquote.alignfull,
	p.alignfull {
		margin-left: 	calc(50% - 46vw) !important;
		margin-right: 	calc(50% - 46vw) !important;
		width: 			92vw 			!important;
		max-width: 		1000% 			!important;
	}

	*/

	.tsg-plugin .alignfull,
	.tsg-plugin .wp-block-image.alignfull img {
		margin-left: 	calc(50% - 50vw)	!important;
		margin-right: 	calc(50% - ( 50vw - 12px ) )	!important;		/* take off 12px for vertical scroll bar - 16 works with all browsers */
		max-width: 		1000%;
		width: 			100vw !important;
	}

	/* some themes need a bit of adjustment for alignfull */
	.tsg-plugin.tsg-twentyseventeen .alignfull,
	.tsg-plugin.tsg-twentyseventeen .wp-block-image.alignfull img {
		margin-left: 	calc(50% - 48.75vw)	!important;
		margin-right: 	calc(50% - 48.75vw)	!important;		/* take off 12px for vertical scroll bar - 16 works with all browsers */
		max-width: 		1000%;
		width: 			97.5vw !important;
	}

	.tsg-plugin.align-full-90 .alignfull,
	.tsg-plugin.align-full-90 .wp-block-image.alignfull img,
	.tsg-plugin.tsg-fitvids *[class^="wp-block-embed"].alignfull,
	.tsg-plugin .wp-block-pullquote.alignfull {
		margin-left: 	calc(50% - 45vw)	!important;
		margin-right: 	calc(50% - 45vw )	!important;		/* take off 12px for vertical scroll bar - 16 works with all browsers */
		max-width: 		1000%;
		width: 			90vw !important;
	}

	.tsg-plugin .alignwide,
	.tsg-plugin .wp-block-image.alignwide img,
	.tsg-plugin.tsg-fitvids *[class^="wp-block-embed"].alignwide {
		margin-left: 	calc(50% - 40vw) !important;
		margin-right: 	calc(50% - 40vw) !important;
		max-width: 		1000%;
		width: 			80vw !important;
	}

	/* Video embeds don't work correctly for wide/full unless fitvids is installed - see .tsg-fitvids rules above */
	.tsg-plugin *[class^="wp-block-embed"].alignwide,
	.tsg-plugin *[class^="wp-block-embed"].alignfull {
		margin-left:	0 !important;
		margin-right:	0 !important;
		width:			100% !important;
	}

	/* theme specific rules - for a few selected themes */
	.caos .col-md-8 { width: 100%; }

} /* end of @media */

/* end */