/* Editor Styles for Visualize */

body {
	background: hsl(0, 0%, 100%);
}


table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body,
textarea {
	color: hsl(250, 10%, 13%);
	font-family: Kadwa, serif;
	font-size: 16px;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: Kadwa, serif;
	font-weight: 400;
	line-height: 1.5;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 32px;
}

h3 {
	font-size: 28px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 20px;
}

h6 {
	font-size: 18px;
}

p {
	margin: 0 0 24px 0;
}

b, strong {
	font-weight: bold;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote,
blockquote.wp-block-quote,
.wp-block-quote p {
	margin: 0 0 24px 48px;
}

cite,
.wp-block-quote__citation,
.wp-block-quote cite,
.wp-block-quote footer {
	color: inherit;
	font-size: 16px;
	
}

address {
	margin: 0 0 24px;
}

pre {
	background: hsl(250, 10%, 93%);
	font-family: monospace;
	font-size: 16px;
	line-height: 1.2;
	margin-bottom: 24px;
	max-width: 100%;
	overflow: auto;
	padding: 24px;
}

code, kbd, tt, var {
	font: 16px monospace;
	background: rgba(0, 0, 0, .2);
	padding: 2px 3px;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
hr {
	background-color: hsl(250, 10%, 80%);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: square;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

th {
	font-weight: bold;
	background: hsl(250, 10%, 93%);
}

blockquote,
blockquote.wp-block-quote,
.wp-block-quote p {
	font-size: 24px;
	color: hsl(250, 10%, 33%);
}

/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
.button,
.wp-block-button__link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: hsl(250, 50%, 50%);
	color: hsl(0, 0%, 100%);
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	display: block;
	font-size: 14px;
	line-height: 1;
	padding: 13px 18px;
	transition: .18s all ease-in-out;
}

.button:focus,
.wp-block-button__link:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
.button:hover,
.wp-block-button__link:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: hsl(250, 10%, 13%);
	color: hsl(0, 0%, 100%);
	box-shadow: inset 0 -3px 0;
}

.button:active,
.wp-block-button__link:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	-webkit-transform: scale(.95);
	-moz-transform: scale(.95);
	transform: scale(.95);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: hsl(250, 10%, 33%);
	border: 1px solid hsl(250, 10%, 80%);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: hsl(250, 10%, 13%);
	border: 1px solid hsl(250, 10%, 33%);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px;
}


/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft,
.wp-caption.alignleft,
.wp-block-image .alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright,
.wp-caption.alignright,
.wp-block-image .alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter,
.wp-caption.aligncenter,
.wp-block-image .aligncenter {
	clear: both;
	margin: 0 auto;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after {
	content: '';
	display: table;
}

.clear:after {
	clear: both;
}

/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
12.1 Captions
--------------------------------------------------------------*/
.wp-caption,
.wp-block-image figcaption {
	margin-bottom: 24px;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}
.wp-caption-text,
.wp-block-image figcaption,
.wp-caption .wp-caption-text {
	margin: 0 0 12px;
	color: inherit;
	font-size: 12px;
	line-height: 1.5;
}

/* Visualize Styles */
::selection { /* classic editor only */
	background: hsl(250, 50%, 50%);
	color: hsl(0, 0%, 100%);
}

.block-editor-block-list__layout .block-editor-block-list__block ::selection {
	background: hsl(250, 50%, 50%);
	color: hsl(0, 0%, 100%);
}

body { /* for both editors */
	margin: 0;
	padding: 0;
	font: normal 16px/1.5 Kadwa, serif;
	background: hsl(0, 0%, 100%);
	color: hsl(250, 10%, 13%);
}

/* override block editor default styling */
.mce-content-body {
	line-height: 1.5;
}

/* main column width */
.wp-block {
	max-width: 768px;
}
@media screen and (min-width:600px) {
	.wp-block {
		max-width: 50vw; /* mimic the split-screen frontend width */
	}
}

a,
.wp-block-freeform.block-library-rich-text__tinymce a {
	color: inherit;
	transition: .12s all ease-in-out;
	text-decoration: underline;
}

a:hover,
a:focus,
a:active {
	color: hsl(250, 50%, 50%);
	text-decoration: none;
}

.wp-block-post-title,
.editor-post-title__block .editor-post-title__input { /* Post title in block editor */
	font-size: 48px;
	line-height: 1.25;
	font-family: Kadwa, serif;
	color: hsl(250, 20%, 13%);
	font-weight: bold;
}
	
.editor-post-title__block .editor-post-title__input {
	margin: 0 -1px 11px; /* account for border in editor styling */
}

.mceContentBody { /* Classic editor only */
	max-width: 768px;
	margin: 48px;
}

/* Galleries */
.gallery,
.wp-block-gallery {
	margin-bottom: 24px;
	clear: both;
	overflow: hidden;
}

.gallery-item { /* Classic editor only */
	float: left;
	margin: 0 4px 4px 0;
	overflow: hidden;
	position: relative;
}

.gallery-columns-1.gallery-size-medium,
.gallery-columns-1.gallery-size-thumbnail,
.gallery-columns-2.gallery-size-thumbnail { /* Classic editor only */
	display: table;
	margin: 0 auto 24px;
}

.gallery-columns-1 .gallery-item,
.gallery-columns-2 .gallery-item { /* Classic editor only */
	text-align: center;
}

.gallery-columns-3 .gallery-item { /* Classic editor only */
	max-width: 32%;
	max-width: -webkit-calc(33.33% - 4px);
	max-width:         calc(33.33% - 4px);
}

.gallery-columns-4 .gallery-item { /* Classic editor only */
	max-width: 23%;
	max-width: -webkit-calc(25% - 4px);
	max-width:         calc(25% - 4px);
}

.gallery-columns-5 .gallery-item { /* Classic editor only */
	max-width: 19%;
	max-width: -webkit-calc(10% - 4px);
	max-width:         calc(10% - 4px);
}

.gallery-columns-6 .gallery-item { /* Classic editor only */
	max-width: 15%;
	max-width: -webkit-calc(16.7% - 4px);
	max-width:         calc(16.7% - 4px);
}

.gallery-columns-7 .gallery-item { /* Classic editor only */
	max-width: 13%;
	max-width: -webkit-calc(14.28% - 4px);
	max-width:         calc(14.28% - 4px);
}

.gallery-columns-8 .gallery-item { /* Classic editor only */
	max-width: 11%;
	max-width: -webkit-calc(12.5% - 4px);
	max-width:         calc(12.5% - 4px);
}

.gallery-columns-9 .gallery-item { /* Classic editor only */
	max-width: 9%;
	max-width: -webkit-calc(11.1% - 4px);
	max-width:         calc(11.1% - 4px);
}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) { /* Classic editor only */
	margin-right: 0;
}

.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1),
.gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) { /* Classic editor only */
	clear: left;
}

/* Target all 3 versions of gallery / block gallery markup */
.gallery .gallery-caption,
.wp-block-gallery .blocks-gallery-image figcaption.blocks-gallery-item__caption,
.wp-block-gallery .blocks-gallery-item figcaption.blocks-gallery-item__caption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.wp-block-image .alignright {
	color: inherit;
	font-size: 12px;
	line-height: 1.5;
	margin: 0 0 12px;
	padding: 2px 6px;
	position: relative;
	text-align: center;
	width: 100%;
	background: transparent;
	height: auto;
	overflow: hidden;
}

.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption { /* Classic editor only */
	display: none;
}

/* media */
.wp-playlist-item {
	padding: 11px 3px;
}

.wp-playlist-item-length {
	top: 9px;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	background: hsl(250, 50%, 60%);
}

.mejs-container {
	margin-bottom: 24px;
}

@media screen and (max-width:980px) {
	.mceContentBody {
		margin: 24px;
	}
}
