/** 
* Front-end block styles for this theme
* @package Serifi
* @since 1.0.0
*/


/* COLOURS
==================================================== */
.has-black-background-color {
	background: #000;
}
.has-white-background-color {
	background: #fff;
}
.has-dark-grey-background-color {
	background: #404040;
}
.has-grey-background-color {
	background: #808080;
}
.has-light-grey-background-color {
	background: #bfbfbf;
}

.has-primary-background-color {
	background: #818f9e;
}
.has-secondary-background-color {
	background: #a6924a;
}
.has-tertiary-background-color {
	background: #2d283f;
}

.has-black-color,
.has-black-color .has-inline-color {
	color: #000;
}
.has-dark-grey-color,
.has-dark-grey-color .has-inline-color {
	color: #404040;
}
.has-grey-color,
.has-grey-color .has-inline-color {
	color: #808080;
}
.has-light-grey-color,
.has-light-grey-color .has-inline-color {
	color: #bfbfbf;
}

.has-white-color,
.has-white-color .has-inline-color {
	color: #000;
}

.has-primary-color,
.has-primary .has-inline-color {
	color: #818f9e;
}
.has-secondary-color,
.has-secondary-color .has-inline-color {
	color: #a6924a;
}
.has-tertiary-color,
.has-tertiary .has-inline-color {
	color: #2d283f;
}

/* TYPOGRAPHY
==================================================== */
.has-drop-cap:not(:focus):first-letter,
.has-drop-cap:first-letter {
	color: var(--serifi-colour-secondary);
    float: left;
    font-family: "Times New Roman", serif;
    font-size: 6.5rem;
    line-height: .68;
    font-weight: 700;
    margin: 0.5rem .688rem 0 0;
    text-transform: uppercase;
    font-style: normal;
}

.has-drop-cap:after {
    content: "";
    display: inline-block;
    clear: both;
    padding-top: 14px
}


/* BLOCK TEXT SIZES
==================================================== */
.has-extra-small-font-size {
	font-size: 14px;
	font-size: 0.875rem;
}

.has-small-font-size {
	font-size: 16px;
	font-size: 1rem;
}

.has-normal-font-size {
	font-size: 18px;
	font-size: 1.125rem;
}

.has-large-font-size {
	font-size: 24px;
	font-size: 1.5rem;
}

.has-extra-large-font-size {
	font-size: 34px;
	font-size: 2.125rem;
}

.has-huge-font-size {
	font-size: 48px;
	font-size: 3rem;
}

.has-gigantic-font-size {
	font-size: 60px;
	font-size: 3.75rem;
}

.has-large-font-size,
.has-extra-large-font-size,
.has-huge-font-size,
.has-gigantic-font-size {
	line-height: 1.2;
}

/* BLOCK LIST STRUCTURES
==================================================== */
.wp-block-query ul {
    margin: 0;
}

/* ALIGNMENTS
==================================================== */
.wp-block-pullquote.alignleft, 
.wp-block-pullquote.alignright {
	margin: 3rem auto;
}
	
.wp-block-image .aligncenter {
	margin-right: auto;
	margin-left: auto;
}


.template-full  .alignfull,
.template-full  .alignwide {
    position: relative;
}

.wp-block-gallery.alignleft {
	margin: 1rem 3rem 0 0;
}

.wp-block-gallery.alignright {
	margin: 1rem 0 0 3rem;
}

/* SEPARATORS
==================================================== */
.wp-block-separator {
	border-color: var(--serifi-separator-colour);
    margin: 3rem auto;
	margin: calc(2rem + 1vw) auto;
	max-width: 50%;
	opacity: 0.25;
}

.wp-block-separator.is-style-wide {
    max-width: 100%;
}

.wp-block-separator.is-style-dots {
    background: none;
    border: none;
    text-align: center;
    max-width: none;
    line-height: 1;
    height: auto;

}

.wp-block-separator.is-style-dots:before {
    color: var(--serifi-separator-colour);
    content: "\00b7 \00b7 \00b7";
    font-size: 2rem;
	font-weight: 900;
    letter-spacing: 2rem;
    padding-left: 2rem;
}


/* QUOTES
==================================================== */
.wp-block-quote {
	margin: 1.8rem auto;
	padding: 1.5rem 0;
	text-align: center;
	max-width: 95%;
}

.wp-block-quote.has-text-align-right,
.wp-block-quote.has-text-align-left {
	border: none;
}

.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
	max-width: 100%;
}

.wp-block-quote p,
.wp-block-pullquote.alignleft p,
.wp-block-pullquote.alignright p,
.wp-block-pullquote.is-style-solid-color blockquote p {	   
    font-size: 1.125rem;
	line-height: 1.3;
    margin-bottom: 0.25rem;
}
.wp-block-pullquote.is-style-solid-color blockquote p {	   
	color: inherit;
}

.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
	padding: 0;
    text-align: center;
}

.wp-block-pullquote blockquote {
	border: none;
    margin: 0;
	max-width: 100%;
}

.wp-block-quote::before,
.wp-block-quote::after,
.wp-block-pullquote.alignright blockquote::before,
.wp-block-pullquote.alignright blockquote::after,
.wp-block-pullquote.alignleft blockquote::before,
.wp-block-pullquote.alignleft blockquote::after {
	width: 26%;
}

.wp-block-quote::before,
.wp-block-quote::after {
	margin: auto;
	left: 0;
	right: 0;
}


.wp-block-pullquote.alignleft blockquote::before,
.wp-block-pullquote.alignleft blockquote::after {
	left: auto;
	right: 37%;
}

.wp-block-pullquote.alignright blockquote::before,
.wp-block-pullquote.alignright blockquote::after {
	right: auto;
	left: 37%;
}

.wp-block-quote cite, 
.wp-block-pullquote cite,
.wp-block-quote footer {
    color: var(--serifi-secondary-text-colour);
    font-size: 0.688rem;
}

.wp-block-pullquote.is-style-solid-color blockquote cite {
    color: inherit;
    opacity: 0.8;
}

.wp-block-quote, 
.wp-block-pullquote {
    border: none;
}

.wp-block-pullquote.is-style-solid-color blockquote {
    max-width: 80%;
}

blockquote.wp-block-quote.is-style-large:before, 
blockquote.wp-block-quote.is-style-large:after {
    content: none;
}


/* BLOCK WIDGETS
==================================================== */

/* Block Calendar */
.wp-block-calendar table th {
	color: initial;
    background: #f1f1f1;
}

.wp-block-calendar caption {
    background: #f1f1f1;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

/* Block Cloud */
.wp-block-tag-cloud a {
    display: inline-block;
    padding: 0.1875em 0.875em;
    border: 1px solid rgba(0,0,0,0.11);
    color: var(--secondary-text-color);
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: 3px;
    font-size: 0.875rem !important;
    font-style: italic;
}

.wp-block-latest-comments a,
.wp-block-categories a,
.wp-block-archives a,
.wp-block-page-list a,
.wp-block-latest-posts a,
.wp-block-latest-comments a:visited,
.wp-block-categories a:visited,
.wp-block-archives a:visited,
.wp-block-page-list a:visited,
.wp-block-latest-posts a:visited {
	color: currentColor;
}

.wp-block-latest-comments a:focus,
.wp-block-categories a:focus,
.wp-block-archives a:focus,
.wp-block-page-list a:focus,
.wp-block-latest-posts a:focus,
.wp-block-latest-comments a:hover,
.wp-block-categories a:hover,
.wp-block-archives a:hover,
.wp-block-page-list a:hover,
.wp-block-latest-posts a:hover {
	color: var(--serifi-colour-secondary);
}
.wp-block-latest-comments__comment,
.wp-block-latest-comments,
.wp-block-categories,
.wp-block-archives,
.wp-block-page-list,
.wp-block-latest-posts {
	font-size: 0.875rem;
	line-height: 1.7;
	list-style: none;
    margin: 0;
    padding: 0;
}

/* Entry content widget lists */
.entry-content .wp-block-latest-comments__comment,
.entry-content .wp-block-latest-comments,
.entry-content .wp-block-categories,
.entry-content .wp-block-archives,
.entry-content .wp-block-page-list,
.entry-content .wp-block-latest-posts {
    list-style: disc;
	line-height: 1.4;
    margin: 1.5rem 3rem;
	padding: 0;
}

.wp-block-latest-comments__comment li,
.wp-block-latest-comments li,
.wp-block-categories li,
.wp-block-archives li,
.wp-block-page-list li,
.wp-block-latest-posts li,

.entry-content .wp-block-latest-comments__comment li,
.entry-content .wp-block-latest-comments li,
.entry-content .wp-block-categories li,
.entry-content .wp-block-archives li,
.entry-content .wp-block-page-list li,
.entry-content .wp-block-latest-posts li {
    margin: 0 0 0.688rem;
}


/* TABLES
   ==================================================== */
.wp-block-table table,
.wp-block-table th,
.wp-block-table td {
  border: 1px solid rgba(51, 51, 51, 0.15);
}

.wp-block-table table a {
  color: #333;
}

.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 0 0 30px;
  width: 100%;
}

.wp-block-table thead {
    background: var(--serifi-colour-primary);
    color: var(--serifi-colour-white);
	font-family: var(--serifi-font-sans-serif);
	font-size: 1rem;
}

.wp-block-table table th,
.wp-block-table table caption {
  border-width: 0 1px 1px 0;
  font-weight: 700;
  padding: 7px;
  text-align: left;
  vertical-align: baseline;
}

.wp-block-table table th,
.wp-block-table table td {
	padding: 0.313rem 0.5rem;
}

.wp-block-table table td {
  border-width: 0 1px 1px 0;
  font-size: 0.875rem;
  padding: 7px;
  vertical-align: baseline;
}

/* Style - Stripes */

table.is-style-stripes * {
    border: none;
}

table.is-style-stripes tr:nth-child(odd) {
    background: #F1F1F3;
}

/* SOCIAL BLOCK
==================================================== */
ul.is-style-pill-shape li > a {
    width: 5rem;
    text-align: center;
}

/* MEDIA
==================================================== */
/* Captions */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.entry-content .wp-block-audio figcaption, 
.entry-content .wp-block-video figcaption, 
.entry-content .wp-block-image figcaption, 
.entry-content .wp-block-embed figcaption, 
.entry-content .wp-block-gallery .blocks-gallery-image figcaption, 
.entry-content .wp-block-gallery .blocks-gallery-item figcaption {
	display: none;
	font-family: var(--serifi-font-sans-serif);
    font-size: 0.75rem;
    line-height: 1.6;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	color: var(--serifi-colour-white);
    background: linear-gradient(0deg,rgba(0,0,0,0.7),rgba(0,0,0,.3) 100%,transparent);
	padding: 0.5rem;
}

/* Galleries */
.blocks-gallery-grid, 
.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.blocks-gallery-grid .blocks-gallery-image, 
.blocks-gallery-grid .blocks-gallery-item, 
.wp-block-gallery .blocks-gallery-image, 
.wp-block-gallery .blocks-gallery-item {
    margin: 0 1rem 1rem 0;
	display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: calc(50% - 1rem);
}

/* MEDIA TEXT BLOCK
==================================================== */

.wp-block-media-text .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
}

.wp-block-media-text {
    margin: 2rem auto;
}

.wp-block-media-text .wp-block-media-text__content {
    font-size: 0.875rem;
	padding: 8%;
}

.wp-block-media-text .wp-block-media-text__content p:last-child {
    margin-bottom: 0;
}

figure.wp-block-media-text__media {
    display: flex;
    height: 100%;
	overflow: hidden;
}

.wp-block-media-text__media img, 
.wp-block-media-text__media video {
    object-fit: cover;
}

.wp-block-media-text__content h1,
.wp-block-media-text__content h2,
.wp-block-media-text__content h3,
.wp-block-media-text__content h4,
.wp-block-media-text__content h5,
.wp-block-media-text__content h6 {
    margin-top: 0;
}

/* BLOCK MARGINS
==================================================== */
.wp-block-table,
.wp-block-media-text,
.wp-block-cover,
.wp-block-cover-image,
.wp-block-image .alignleft, 
.wp-block-image .alignright,
.wp-block-columns,
.template-full .alignwide {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* COVER BLOCK
==================================================== */
.wp-block-cover, 
.wp-block-cover-image {
    padding: 3rem;
}

.wp-block-cover-image .wp-block-cover__inner-container, 
.wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
}

.wp-block-cover__inner-container {
    line-height: 1.2;
}

.wp-block-cover a,
.wp-block-cover a:visited {
    color: #fff;
}

.wp-block-cover a:focus,
.wp-block-cover a:hover {
	color: #fff;
    opacity: 0.8;
}

/* IMAGE BLOCKS
==================================================== */
.wp-block-image .alignleft, 
.wp-block-image .alignright {
    margin-left: auto;
	margin-right: auto;
}

/* BLOCK COLUMNS
==================================================== */
.wp-block-columns>.wp-block-column {
    margin-bottom: 2.5rem;
	text-align: center;
}

.wp-block-columns {
	justify-content: center;
}

/* Make the column fill the empty space if just a single on a row */
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) {
    flex-grow: 1;
}
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) img {
    width: 100%;
}

/* FORMS
==================================================== */
.wp-block-search .wp-block-search__input {
    border: 1px solid rgba(50, 50, 50, 0.14);
	padding: 0.5rem;
}

/* CODE
==================================================== */
.wp-block-preformatted {
    margin: 2rem 0;
}

/* SOCIAL
==================================================== */
.wp-block-social-link {
    border-radius: 0.5rem;
}

.wp-block-social-links .wp-social-link a {
    padding: .25em;
    display: block;
}

/* BUTTONS
==================================================== */
.wp-block-button {
    margin-bottom: 1rem;
}

.wp-block-button__link,
.wp-block-search__button {
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	padding: 0.813rem 2rem 0.75rem;
	font-family: var(--serifi-font-sans-serif);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.125rem;
}

.wp-block-button__link:focus,
.wp-block-button__link:hover {
	border: 1px solid var(--serifi-button-hover-bg-colour);
	background-color: var(--serifi-button-hover-bg-colour);
    color: var(--serifi-button-text-hover-colour);
}

.is-style-outline>.wp-block-button__link, 
.wp-block-button__link.is-style-outline {
    border: 1px solid;
    padding: 0.813rem 2rem 0.75rem;
}

.is-style-outline .wp-block-button__link {
	border: 1px solid var(--serifi-button-hover-bg-colour);
	background: transparent;
    border: 1px solid;
}


.is-style-outline .wp-block-button__link:focus,
.is-style-outline .wp-block-button__link:hover {
	border: 1px solid rgba(50, 50, 50, 0.14);;
}


.wp-block-search__button {
	background: var(--serifi-colour-primary);
    border: 1px solid rgba(50, 50, 50, 0.14);
    padding: 0.375rem 1rem 0.313rem;
    line-height: 1;
    color: var(--serifi-colour-white);
}

.wp-block-button.alignleft {
    margin: 0.5rem 3rem 0 0;
}

.wp-block-button.alignright {
    margin: 0.5rem 0 0 3rem;
}

/* MEDIA QUERIES
==================================================== */
/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
		.wp-block-columns>.wp-block-column {
		text-align: initial;
	}
	/* Captions */
	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
	.entry-content .wp-block-audio figcaption, 
	.entry-content .wp-block-video figcaption, 
	.entry-content .wp-block-image figcaption, 
	.entry-content .wp-block-embed figcaption, 
	.entry-content .wp-block-gallery .blocks-gallery-image figcaption, 
	.entry-content .wp-block-gallery .blocks-gallery-item figcaption {
			display: flex;
	}	
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
			
	.single-hero .wp-block-image .alignleft,		
	.wp-block-image .alignleft {
		margin: 0.875rem 4rem 1rem 0;
	}

	.single-hero .wp-block-image .alignright,
	.wp-block-image .alignright {
		margin: 0.875rem 0 1rem 4rem;
	}	
	
	.wp-block-quote {
		text-align: left;
		max-width: 85%;
	}	
	
	.wp-block-quote::before,
	.wp-block-quote::after {
		margin: auto;
		left: 0;
		right: auto;
	}	
	
	.wp-block-media-text {
		direction: ltr;
		display: grid;
		grid-template-columns: 50% 1fr;
		grid-template-rows: auto;
	}

	.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, 
	.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media, 
	.wp-block-media-text .wp-block-media-text__content, 
	.wp-block-media-text .wp-block-media-text__media {
		align-self: center;
	}

	.wp-block-media-text .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.wp-block-media-text .wp-block-media-text__content {
		direction: ltr;
		grid-column: 2;
		grid-row: 1;
		padding: 8%;
		word-break: break-word;
	}	
}

/* Larger devices (Desktop, 1200px and up */
@media (min-width: 1200px) {
	
	.wp-block-pullquote.alignleft,
	.wp-block-pullquote.alignright {
		max-width: 320px;
	}	
	
	.wp-block-pullquote.alignright blockquote {
		text-align: left;
	}
	.wp-block-pullquote.alignleft blockquote  {
		text-align: right;
	}

	.wp-block-pullquote.alignleft {
		margin: 3rem 3rem 3rem 0;
	}
	.wp-block-pullquote.alignright {
		margin: 3rem 0 3rem 3rem;
	}
	
	.template-full .wp-block-pullquote.alignleft {
		margin: 3rem 3rem 3rem -3rem;
	}
	.template-full .wp-block-pullquote.alignright {
		margin: 3rem -3rem 3rem 3rem;
	}	

	.single-hero .wp-block-image .alignleft {
		margin: 0.688rem 3rem 3rem -3rem;
	}

	.single-hero .wp-block-image .alignright {
		margin: 0.688rem -3rem 3rem 3rem;
	}	
	
	.wp-block-pullquote.alignright blockquote::before,
	.wp-block-pullquote.alignright blockquote::after,
	.wp-block-pullquote.alignleft blockquote::before,
	.wp-block-pullquote.alignleft blockquote::after {
		width: 25%;
	}
	.wp-block-pullquote.alignleft blockquote::before,
	.wp-block-pullquote.alignleft blockquote::after {
		left: auto;
		right: 0;
	}	
	.wp-block-pullquote.alignright blockquote::before,
	.wp-block-pullquote.alignright blockquote::after {
		right: auto;
		left: 0;
	}	

	.wp-block-cover-image.alignwide .wp-block-cover__inner-container, 
	.wp-block-cover.alignwide .wp-block-cover__inner-container {
		width: 70%;
	}
	.wp-block-cover-image.alignfull .wp-block-cover__inner-container, 
	.wp-block-cover.alignfull .wp-block-cover__inner-container {
		width: 50%;
	}	
	
	#mini-blog,
	.page-template-splash .alignfull > div .alignwide {
		max-width: 1200px;
		margin: 32px auto;
	}	
}

/* Larger devices (Desktop, 1400px and up */
@media (min-width: 1400px) {

	/* Alignwide and alignfull is only made available on pages without side columns and a boxed layout */
	.template-showcase-full .alignwide,
    .template-full .alignwide {		
		margin: 32px calc( ( 860px - 1200px ) / 2 ); /* 32px top and bottom. Content width 860px - desired wide width 1200px / 2 */
		max-width: 1200px;
		width: 1200px;				
    }
}

/* SPECIAL MEDIA QUERY
For the alignwide to work in a boxed variable width container
==================================================== */
#mini-blog-wrapper,
.template-showcase-full .entry-content > .alignfull,
.template-full .entry-content > .alignfull {
	width: 100%;
}


@media screen and (min-width: 992px) {
	#mini-blog-wrapper,
	.template-showcase-full .entry-content > .alignfull,
	.template-full .entry-content > .alignfull {		
		margin: 32px calc(50% - 50vw + 0.563rem);
		max-width: calc(100vw - 2 * 0.563rem);
		width: 100vw;
	}
}

/* 1600px + 2 * 2rem = (1600px + 2) * (2 * 16px) = 1664px */
@media screen and (min-width: 1664px) {

.template-showcase-full .entry-content > .alignfull,
.template-full .entry-content > .alignfull {   
    margin: 32px calc( 50% - 1600px / 2);
	max-width: 1600px;
	}
}



/* CSS NOTES: percentage width method:

.alignwide {
	margin: 32px calc(25% - 25vw);
	max-width: 100vw;
	width: 100vw;
}

Max width method example: For the negative left/right margin, I subtract the full page width from the content width and divide by two. Ex: ( 768px – 920px ) / 2

	.alignwide {
		margin: 32px calc( ( 767px - 920px ) / 2 );
		max-width: 920px;
		width: 920px;
	}
*/