/*!
 Editor Styles
*/

/* Includes */
@import "1-base/variables";
@import "1-base/mixins";
@import "1-base/colors";
@import "1-base/radius";

/* Container and Alignment */
.block-editor-block-list__layout.is-root-container > .fullwidth {
	max-width: none !important;
}

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
	max-width: none !important;
}


.wp-block-group.alignfull {
	max-width: 100% !important;
}

.site-content {
	padding-left: var(--global--content--padding--left);
	padding-right: var(--global--content--padding--right);
}

//Delete default padding for Fullwidth group block with background
.editor-styles-wrapper .wp-block[data-align=full] .wp-block-group.has-background {
	padding: 0 !important;
}

/* Typography */
body {
	font-family: var(--wp--custom--body--typography--font-family);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--custom--color--font-secondary);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Headings */
.editor-post-title__input,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--wp--custom--color--font-primary);
	line-height: var(--wp--custom--line-height--heading);
	margin-top: 0;
	margin-bottom: 0;

	& a {
		color: var(--wp--custom--color--font-primary);
		text-decoration: none;
	}
}

h1.has-xxxxl-font-size {
	font-size: var(--global--font-size--heading-13) !important;
}

h1.has-xxxl-font-size,
h2.has-xxxxl-font-size {
	font-size: var(--global--font-size--heading-12) !important;
}

h1.has-xxl-font-size,
h2.has-xxxl-font-size,
h3.has-xxxxl-font-size {
	font-size: var(--global--font-size--heading-11) !important;
}

h1.has-xl-font-size,
h2.has-xxl-font-size,
h3.has-xxxl-font-size,
h4.has-xxxxl-font-size {
	font-size: var(--global--font-size--heading-10) !important;
}

h1.has-l-font-size,
h2.has-xl-font-size,
h3.has-xxl-font-size,
h4.has-xxxl-font-size,
h5.has-xxxxl-font-size {
	font-size: var(--global--font-size--heading-09) !important;
}

.editor-post-title__input,
h1.has-m-font-size,
h2.has-l-font-size,
h3.has-xl-font-size,
h4.has-xxl-font-size,
h5.has-xxxl-font-size,
h6.has-xxxxl-font-size {
	font-size: var(--global--font-size--heading-08) !important;
}

h1,
h1.has-s-font-size,
h2.has-m-font-size,
h3.has-l-font-size,
h4.has-xl-font-size,
h5.has-xxl-font-size,
h6.has-xxxl-font-size {
	font-size: var(--global--font-size--heading-07) !important;
}

h2,
h1.has-xs-font-size,
h2.has-s-font-size,
h3.has-m-font-size,
h4.has-l-font-size,
h5.has-xl-font-size,
h6.has-xxl-font-size {
	font-size: var(--global--font-size--heading-06) !important;
}

h3,
h1.has-xxs-font-size,
h2.has-xs-font-size,
h3.has-s-font-size,
h4.has-m-font-size,
h5.has-l-font-size,
h6.has-xl-font-size,
.comments-area .comments-title,
.wp-block-post-template.columns-3 h2.wp-block-post-title {
	font-size: var(--global--font-size--heading-05) !important;
}

h1.has-xxxs-font-size,
h2.has-xxs-font-size,
h3.has-xs-font-size,
h4,
h4.has-s-font-size,
h5.has-m-font-size,
h6.has-l-font-size,
.site-title {
	font-size: var(--global--font-size--heading-04) !important;
}

h2.has-xxxs-font-size,
h3.has-xxs-font-size,
h4.has-xs-font-size,
h5.has-s-font-size,
h6.has-m-font-size
h1.wp-block-site-title {
	font-size: var(--global--font-size--heading-03) !important;
}

h4.has-xxs-font-size,
h3.has-xxxs-font-size,
h5,
h5.has-xs-font-size,
h6.has-s-font-size,
h6.has-xs-font-size {
	font-size: var(--global--font-size--heading-02) !important;
}

h4.has-xxxs-font-size,
h5.has-xxs-font-size,
h5.has-xxxs-font-size,
h6,
h6.has-xxs-font-size,
h6.has-xxxs-font-size {
	font-size: var(--global--font-size--heading-01) !important;
}

/* Body fonts */
.wp-block-navigation,
p:not(.wp-block-post-excerpt__more-text),
ol,
ul {

	&.has-xxxs-font-size {
		font-size: var(--global--font-size--body-xxxs);
	}

	&.has-xxs-font-size {
		font-size: var(--global--font-size--body-xxs);
	}

	&.has-xs-font-size {
		font-size: var(--global--font-size--body-xs);
	}

	&.has-s-font-size {
		font-size: var(--global--font-size--body-s);
	}

	&.has-m-font-size {
		font-size: var(--global--font-size--body-m);
	}

	&.has-l-font-size {
		font-size: var(--global--font-size--body-l);
	}

	&.has-xl-font-size {
		font-size: var(--global--font-size--body-xl);
	}

	&.has-xxl-font-size {
		font-size: var(--global--font-size--body-xxl);
	}

	&.has-drop-cap:not(:focus):first-letter {
		float: left;
		margin: 5px 8px 0 -8px;
		line-height: 0.77;
		text-transform: uppercase;
		font-weight: normal;
		font-size: 100px;

		@include breakpoint(sm) {
			font-size: 120px;
			line-height: 0.77;
			margin: 6px 12px 0 -8px;
		}
	}

	&.intro.has-drop-cap:not(:focus):first-letter {
		@include breakpoint(sm) {
			font-size: 142px;
		}
	}
}

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

blockquote {
	margin: 0;
	padding: 0;
}

code,
kbd,
tt,
var {
	font-size: 14px;
}

/* Links */

a {
	color: currentColor;
	text-decoration: underline;
}

/* Elements */

@media screen and (min-width: 50em) {

	.editor-post-title:after,
	.editor-post-title:before {
		left: -200%;
		width: 200%;
	}

	.editor-post-title:after {
		display: none;
	}

	.editor-post-title>div:after,
	.editor-post-title>div:before {
		display: block;
	}
}

.editor-post-title textarea {
	background-color: transparent;
}

*,
*:after,
*:before {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

hr {
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ol,
ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ol,
li>ul {
	margin-bottom: 0;
	margin-left: $s-6;
}

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. */
}

.image-border img {
	border: 4px solid var(--wp--custom--color--border);
}

figure {
	margin: 1em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

/* Forms */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/* Default Appender */
.editor-default-block-appender .editor-default-block-appender__content {
	font-family: var(--wp--custom--body--typography--font-family);
	line-height: var(--wp--custom--line-height--body);
	font-size: var(--global--font-size--body-m);
}

/* Alignment */
.alignwide {
	margin-left: auto;
	margin-right: auto;
}

/* Template Parts */
.site-header {

	.header-content {
		display: flex;
		align-items: center;
		align-content: stretch;
		justify-content: space-between;
		@include push--auto;
	}
}

.site-footer {

	.footer-content {
		max-width: 100%;
	}
}

/* Paragraph */
p.wp-block-paragraph {
	font-size: var(--global--font-size--body-m);
}

/* Query Block */
.wp-block-query {

	.wp-block-query-loop {
		padding: 0;

		&.is-flex-container {

			li {
				width: auto !important;
				margin: 0;
			}

			&.columns-2,
			&.columns-3,
			&.columns-4,
			&.columns-5,
			&.columns-6 {

				@include breakpoint(sm) {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					column-gap: 2rem;

					li {
						grid-template-columns: 1fr 1fr;

						&:nth-last-child(-n+2) {
							padding-bottom: 0;
						}
					}
				}

				@include breakpoint(lg) {
					column-gap: 3rem;
				}
			}

			&.columns-3,
			&.columns-6 {
				@include breakpoint(md) {
					grid-template-columns: repeat(3, 1fr);

					li {
						grid-template-columns: 1fr 1fr 1fr;

						&:nth-last-child(-n+3) {
							padding-bottom: 0;
						}
					}
				}
			}

			&.columns-4 {
				@include breakpoint(md) {
					grid-template-columns: repeat(4, 1fr);

					li {
						grid-template-columns: 1fr 1fr 1fr 1fr;

						&:nth-last-child(-n+4) {
							padding-bottom: 0;
						}
					}
				}
			}

			&.columns-5 {
				@include breakpoint(md) {
					grid-template-columns: repeat(5, 1fr);

					li {
						grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

						&:nth-last-child(-n+5) {
							padding-bottom: 0;
						}
					}
				}

				@include breakpoint(lg) {
					column-gap: 1.5rem;
				}
			}

			&.columns-6 {
				@include breakpoint(lg) {
					grid-template-columns: repeat(6, 1fr);
					column-gap: 1.5rem;

					li {
						grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

						&:nth-last-child(-n+6) {
							padding-bottom: 0;
						}
					}
				}
			}
		}

		li {
			@include s-r-9 (padding-bottom);

			a {
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}

			> :first-child {

				padding-top: 0;

			}
		}

		.wp-block-post-title,
		.wp-block-post-featured-image,
		.wp-block-post-excerpt__excerpt,
		.wp-block-post-excerpt,
		.wp-block-post-terms,
		.wp-block-post-excerpt__more-text,
		.wp-block-post-date {
			@include s-r-6 (padding-top);
		}

		.wp-block-post-terms {
			visibility: hidden;

			a {
				visibility: visible;
			}

			a:not(:last-child):after {
				content: ",";
			}

			a:not(:first-child) {
				margin-left: -7px; // temporary fix for post term separators
			}
		}
	}
}

// 3 column list style
.wp-block-query {

	&.is-style-aino-3col-list {

		@include breakpoint(sm) {

			li.block-editor-block-list__layout,
			.block-editor-block-list__layout.is-root-container {
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				column-gap: 2rem;
				align-content: start;
				grid-auto-flow: row;
			}

			.wp-block-post-title {
				grid-column: 1 / 5;
				justify-self: start;
				justify-self: stretch;
				grid-row: 1 / 2;
			}

			.post-excerpt-wrap {
				justify-self: stretch;
				justify-self: start;
				padding: 0;
				grid-column: 5 / 9;
				grid-row: 1 / 2;
			}

			.wp-block-post-featured-image {
				justify-self: stretch;
				justify-self: start;
				grid-column: 9 / 13;
				grid-row: 1 / 2;
			}
		}

		@include breakpoint(lg) {
			.wp-block-post {
				column-gap: 3rem;
			}
		}
	}
}

/* Media */
figcaption {
	max-width: 100%;
	font-size: var(--global--font-size--body-xs);
	@include s-r-4 (margin-top);
	color: var(--wp--custom--color--font-secondary);
	text-align: left;
}

.wp-block-gallery {
	margin: 0;
}

.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {

	figcaption {
		font-size: var(--global--font-size--body-xs);
	}
}

.wp-block-image {
	margin: 0;

	&.ellipse-horizontal {
		clip-path: ellipse(50% 45% at 50% 50%);
	}

	&.ellipse-vertical {
		clip-path: ellipse(50% 50% at 50% 50%);
	}

	&.is-style-aino-border-dark {

		img {
			border: 2px solid;
			border-color: var(--wp--custom--color--font-secondary);
		}
	}

	&.is-style-aino-border-light {

		img {
			border: 2px solid;
			border-color: var(--wp--custom--color--variant-font-secondary);
		}
	}
}

/* Quotes */
.wp-block-pullquote,
.wp-block-quote {
	margin: 0;
	padding: 0;
	font-style: normal;

	blockquote p {
		font-size: var(--global--font-size--body-m);
	}

	p:last-child,
	blockquote p:last-child {
		margin: 0;
	}

	&:not(.is-large):not(.is-style-large) {
		border: none;
	}

	&.is-large,
	&.is-style-large p {
		margin: 0;
		font-size: var(--global--font-size--body-l);
		font-style: normal;
	}

	cite,
	footer,
	.wp-block-quote__citation,
	.wp-block-pullquote__citation {
		display: block;
		margin: 0;
		padding: $s-4 0 0;
		font-weight: bold;
		font-style: normal;
		text-transform: none;
		font-size: var(--global--font-size--body-xs);
	}

	cite,
	footer,
	.wp-block-quote__citation,
	& blockquote:not(.has-text-color) .wp-block-pullquote__citation {
		color: var(--wp--custom--color--font-secondary);
	}
}

.wp-block-pullquote {
	text-align: left;
	border-radius: var(--global--border-radius-s);
	color: var(--wp--custom--color--font-secondary);

	&.is-style-solid-color {

		&:not(.has-background) {
			background: var(--wp--custom--color--background-primary);
		}

		blockquote {
			max-width: 100%;
			padding: $s-6;
			border-radius: var(--global--border-radius-s);

			p {
				font-size: var(--global--font-size--body-m);
			}
		}
	}

	.alignleft blockquote,
	.alignright blockquote {
		padding: 0;
	}
}

/* Table */

.editor-styles-wrapper .wp-block-table {
	display: table;
	width: 100%;

	.wp-block-table__cell-content {
		padding: 1rem;
	}

	&.alignfull {
		width: 96vw;
	}

	td {
		border: none;
		@include s-r-6(padding);
	}

	table {
		background: transparent;

		tr {
			padding: 1rem;
			border-bottom: 1px solid var(--wp--custom--color--border);

			&:last-of-type {
				border-bottom: 0;
			}
		}
	}

	&.is-style-stripes {
		border-bottom: none;

		tbody tr:nth-child(odd) {
			background-color: var(--wp--custom--color--background-primary);
			border-bottom: none;
		}

		table tr {
			border-bottom: none;
		}
	}
}

/* Cover */

.wp-block-cover-image {
	height: 75vh;
	min-height: 400px;
	@include s-r-8(margin-top);
	@include s-r-8(margin-bottom);
}

.wp-block-cover-image-text,
.wp-block-cover-image h2 {
	font-size: var(--global--font-size--heading-04) !important;
}

.wp-block-cover-image,
.wp-block-cover {

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

}

/* Monospace */
.wp-block-code,
.wp-block-preformatted,
.wp-block[data-type="core/verse"] {
	font-family: var(--wp--custom--code--typography--font-family);
	line-height: var(--wp--custom--line-height--body);
	font-size: var(--global--font-size--body-xs);
}

.wp-block-code {
	border: none;
	background: var(--global--color--variant-code-background);
	color: var(--global--color--variant-code-color);
	@include s-r-6(padding);

	@include breakpoint(sm) {
		margin-bottom: $s-6;
	}

	.block-editor-plain-text {
		background: transparent;
	}
}

.wp-block-preformatted {
	overflow: auto;
	@include s-r-6(padding);
	@include s-r-6(margin-bottom);

	& pre {
		margin: 0;
		padding: 0;
	}
}

.wp-block[data-type="core/verse"] {
	background: var(--wp--custom--color--background-primary);
	font-weight: normal;
	@include s-r-6(padding);

	pre {
		background: transparent;
	}
}

.wp-block-verse pre,
pre.wp-block-verse {
	color: var(--wp--custom--color--font-secondary);
	white-space: nowrap;
	font-family: inherit;
	font-size: inherit;
	line-height: 1;
	padding: 0;
	overflow: auto;
}

/* Separator */
.block-editor-block-list__block[data-type="core/separator"] {
	max-width: 100%;
}

.wp-block-separator {
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-top: 1px solid;
	opacity: 1;

	&.is-style-wide {
		border: none;
	}

	&.is-style-dots {
		border: none;
	}

	&.is-style-dots:before {
		color: var(--wp--custom--color--border);
		font-size: var(--global--font-size--body-l);
		letter-spacing: 1em;
		padding-left: 1em;
	}
}

/* Buttons */

.wp-block-button {

	.wp-block-button__link {
		@include btn;
		@include btn-m;
		@include btn-primary;
		font-weight: normal;
		color: var(--wp--custom--color--button-color-primary);
	}

	&:not(.is-style-squared) .wp-block-button__link {
		border-radius: 8px;
	}

	&.is-style-outline {

		.wp-block-button__link {
			@include btn-outline;
			background: transparent;
			box-shadow: none;
			border: 1px solid;

			&:hover {
				color: var(--wp--custom--color--primary);
				fill: var(--wp--custom--color--primary);
			}
		}
	}
}

/* Block category Widgets */

.wp-block-categories,
.wp-block-latest-posts__post-date {
	margin: 0;
}

.wp-block-categories li,
.wp-block-latest-posts li {
	margin: 0;
	padding: 0;
	text-align: left;
}

.wp-block-categories li a,
.wp-block-latest-posts li a {
	border: none;
	text-decoration: none;
	color: var(--wp--custom--color--font-secondary);
}

.wp-block[data-type="core/archives"] .wp-block-archives,
.wp-block[data-type="core/latest-posts"] .wp-block-latest-posts {
	margin: 0;
	padding-left: 0;
	font-size: var(--global--font-size--body-m);
}

.wp-block[data-type="core/latest-comments"] .wp-block-latest-comments {
	margin: 0;
	padding: 0;

	.wp-block-latest-comments__comment-excerpt p {
		font-size: var(--global--font-size--body-xs);
		margin: 0;
	}
}

.wp-block-navigation__container>.wp-block-navigation-link,
.wp-block-page-list,
.wp-block-page-list>.wp-block-pages-list__item {
	@include s-r-6(margin-right);
}

.wp-block[data-type="core/calendar"] {

	caption {
		color: var(--wp--custom--color--font-primary);
		margin-bottom: $s-4;
		text-align: center;
		font-weight: bold;
	}

	table {

		margin-bottom: $s-4;
		background: var(--global--color--form-background);

		th {
			font-weight: bold;
			background: transparent;
			text-align: center;
		}

		tbody {
			color: var(--wp--custom--color--font-secondary);
			border-right: 1px solid var(--wp--custom--color--border);
		}

		td#today {
			background: var(--wp--custom--color--background-primary);
		}

		tbody td,
		th {
			@include s-r-8(padding);
			border: 1px solid var(--wp--custom--color--border);
			text-align: center;
		}
	}
}