/*
Theme Name: Builders
Theme URI: https://github.com/wpengine/builders
Author: WPE DevRel
Description: A block theme for the WP Engine Builders site.
Version: 1.0.13
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpe-builders
*/


/* Defaults
---------------------------------------------------------------------------- */

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-block-button__link,
.wp-block-navigation .wp-block-navigation-item {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

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

b,
strong {
	font-weight: var(--wp--custom--font-weight--bold);
}

blockquote {
	margin: 0;
}

/* Site Content
---------------------------------------------------------------------------- */

.wp-site-blocks {
	background-color: var(--wp--preset--color--polar);
}

/* Button
--------------------------------------------- */

input[type="button"],
input[type="submit"],
.wp-block-post-comments input[type=submit],
.wp-block-search__button {
	border: 2px solid var(--wp--preset--color--mirage);
	border-radius: 0;
	background-color: var(--wp--preset--color--mirage);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--one);
	padding: 20px 40px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	width: auto;
}

.wp-block-button .wp-block-button__link {
	text-decoration: none;
}

input[type="button"]:focus,
input[type="button"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
.wp-block-button__link:focus,
.wp-block-button__link:hover,
.wp-block-search__button:focus,
.wp-block-search__button:hover {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--mirage);
	color: var(--wp--preset--color--mirage);
	text-decoration: none;
}

/* Button - Fill Base
--------------------------------------------- */

.wp-block-button.is-style-fill-base .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--mirage);
}

.wp-block-button.is-style-fill-base .wp-block-button__link:focus,
.wp-block-button.is-style-fill-base .wp-block-button__link:hover {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

/* Button - Outline
--------------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid;
	border-color: currentColor;
	color: var(--wp--preset--color--mirage);
	padding: 10px 25px;
}

.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--mirage);
	border-color: var(--wp--preset--color--mirage);
	color: var(--wp--preset--color--base);
}

/* Button - Outline Base
--------------------------------------------- */

.wp-block-button.is-style-outline-base .wp-block-button__link {
	background-color: transparent;
	border: 2px solid;
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline-base .wp-block-button__link:focus,
.wp-block-button.is-style-outline-base .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--mirage);
}

/* Code
--------------------------------------------- */

.wp-block-code {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.wp-block-code,
.wp-block-code code {
	border: none;
}

.wp-block-code code {
	overflow-wrap: normal;
	overflow-x: scroll;
	tab-size: 4;
	white-space: pre !important;
}

*:not(.wp-block-code) > code:not(.hljs),
kbd {
	background-color: var(--wp--preset--color--polar);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--bold);
	padding: 5px 8px;
	position: relative;
	top: -1px;
}

/*
 * When inline code is selected, the Editor applies contextual styling. Since
 * our code color is near white, we need to reset to the default text color.
 */
.rich-text:focus > code[data-rich-text-format-boundary],
.rich-text:focus > kbd[data-rich-text-format-boundary] {
	color: currentColor;
}

/* Comments
--------------------------------------------- */

.wp-block-post-comments input:not([type=submit]),
.wp-block-post-comments textarea {
	border-color: var(--wp--preset--color--mirage);
}

.wp-block-post-comments .commentlist {
	margin-bottom: 40px;
	margin-top: 40px;
}

.wp-block-post-comments .commentlist .comment p {
	line-height: var(--wp--custom--line-height--body);
}

.wp-block-post-comments .form-submit {
	margin-bottom: 0;
}

.wp-block-post-comments .comment-form-cookies-consent {
	font-size: var(--wp--preset--font-size--small);
}

/* Group
--------------------------------------------- */

.wp-block-query .wp-block-post > .wp-block-group {
    height: 100%;
}

/* Image
--------------------------------------------- */

.wp-block-image.is-style-border img {
	border: 1px solid var(--wp--preset--color--mirage);
}

.wp-block-image.is-style-inner-border img {
	outline: 1px solid #fff;
	outline-offset: -20px;
}

/* List
--------------------------------------------- */

ol li:where(:not([class*='block'])),
ol li:where(.wp-block-list),
ul li:where(:not([class*='block'])),
ul li:where(.wp-block-list) {
	margin-left: 30px;
}

/* Navigation
--------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item {
	border-bottom: 4px solid transparent;
}

.wp-block-navigation .wp-block-navigation-item:focus,
.wp-block-navigation .wp-block-navigation-item:hover {
	border-bottom: 4px solid var(--wp--preset--color--tiffany);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 34px var(--wp--custom--spacing--outer);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	border: 2px solid var(--wp--preset--color--mirage);
	padding: 2px;
}

.wp-block-navigation:not([style*=text-decoration]) a,
.wp-block-navigation:not([style*=text-decoration]) a:focus,
.wp-block-navigation:not([style*=text-decoration]) a:hover {
	text-decoration: none;
}

/* Paragraph
--------------------------------------------- */

p.has-background {
	padding: 20px var(--wp--custom--spacing--outer);
}

.is-style-no-margin {
	margin: 0 !important;
}

/* Pullquote
--------------------------------------------- */

.wp-block-pullquote p,
.wp-block-pullquote.alignleft p,
.wp-block-pullquote.alignright p {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--medium);
	margin-bottom: 0;
}

.wp-block-pullquote cite {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-style: inherit;
	margin-top: 10px;
	text-transform: inherit;
}

/* Quote
--------------------------------------------- */

.wp-block-quote {
	box-shadow: 5px 5px var(--wp--preset--color--mirage);
}

.wp-block-quote p:last-of-type {
	margin-bottom: 0;
}

.wp-block-quote cite {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-style: inherit;
	margin-top: 10px;
	text-align: inherit;
}

/* Separator
--------------------------------------------- */

.wp-block-separator,
.wp-block-separator.has-css-opacity {
	opacity: 1;
}

.wp-block-separator:not(.is-style-dots),
.wp-block-separator.has-background:not(.is-style-dots) {
	border-bottom: 1px solid currentColor;
	height: 1px;
}

.wp-block-separator.is-style-dots:before {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 10px;
	padding-left: 10px;
}

/* Site Title
--------------------------------------------- */

.wp-block-site-title a {
	text-decoration: none;
}

/* Custom
---------------------------------------------------------------------------- */

.has-negative-top-margin {
	margin-top: -120px !important;
}

/* Forms
--------------------------------------------- */

input,
select,
textarea,
.wp-block-search__input {
	background-color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--mirage);
	border-radius: 0;
	color: var(--wp--preset--color--mirage);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--body);
	outline: none;
	padding: 10px 20px;
	width: 100%;
}

input:focus,
textarea:focus {
	border-color: var(--wp--preset--color--royal);
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

::placeholder {
	color: var(--wp--preset--color--mirage);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.5;
}

.nf-field-container {
	margin-bottom: 10px;
}

/* Styles
--------------------------------------------- */

.is-style-boxshadow {
	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
}

.is-style-full-height {
	align-items: center;
	display: grid;
	min-height: 100vh;
}

.is-style-no-disc li {
	list-style-type: none;
	margin-left: 0;
}

/* Experimental Styles
--------------------------------------------- */

/*
 * Remove bottom margin when blocks are placed in container blocks that do not
 * support blockGap (i.e. Column, Cover, Media & Text)
 */
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
.wp-block-image:last-child {
	margin-bottom: 0;
}

.is-root-container h2 + *,
.is-root-container h3 + *,
.is-root-container h4 + *,
.is-root-container h5 + *,
.is-root-container h6 + *,
.wp-block-post-content h2 + *,
.wp-block-post-content h3 + *,
.wp-block-post-content h4 + *,
.wp-block-post-content h5 + *,
.wp-block-post-content h6 + *,
.wp-block-query-title + * {
	margin-top: 20px;
}

.wp-block-spacer + * {
	margin-top: 0 !important;
}

/* Media Queries
---------------------------------------------------------------------------- */

@media only screen and (min-width: 600px) {

	/* Query Loop
	--------------------------------------------- */
	
	.wp-block-post-template.is-flex-container {
		gap: var(--wp--style--block-gap);
	}
	
	.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li {
		width: calc(50% - (var(--wp--style--block-gap) / 2));
	}
}

@media only screen and (min-width: 800px) {

	/* Query Loop
	--------------------------------------------- */
	
	.wp-block-post-template.is-flex-container {
		gap: 30px;
	}
	
	.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li {
		width: calc(33.33333% - 20px);
	}

}

/* Syntax Highlight Code block plugin - base styles
---------------------------------------------------------------------------- */

.wp-block-code > span {
	display: block;
	overflow: auto;
}

.shcb-language {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
	word-break: normal;
}

.hljs.shcb-code-table {
	display: table;
	width: 100%;
}

.hljs.shcb-code-table > .shcb-loc {
	color: inherit;
	display: table-row;
	width: 100%;
}

.hljs.shcb-code-table .shcb-loc > span {
	display: table-cell;
}

.wp-block-code code.hljs:not(.shcb-wrap-lines) {
	white-space: pre;
}

.wp-block-code code.hljs.shcb-wrap-lines {
	white-space: pre-wrap;
}

.hljs.shcb-line-numbers {
	border-spacing: 0;
	counter-reset: line;
}

.hljs.shcb-line-numbers > .shcb-loc {
	counter-increment: line;
}

.hljs.shcb-line-numbers .shcb-loc > span {
	padding-left: 0.75em;
}

/* We're using RGBA values for Ash color here */
.hljs.shcb-line-numbers .shcb-loc::before {
	border-right: 1px solid rgba(152, 162, 167, 0.2);
	color: rgba(152, 162, 167, 0.9);
	content: counter(line);
	display: table-cell;
	padding: 0 0.75em;
	text-align: right;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
	width: 1%;
}

/* Custom WPE syntax highlighting theme */
/* Colors from WP Engine's Brand guide: https://enginet.wpengine.com/wp-content/uploads/2021/07/WPE-GDE-BrandGuidelines-Oct2020.pdf */
/* @author: dcook */

/* Comment - Color: Ash */
.hljs-comment,
.hljs-quote {
	color: var(--wp--preset--color--ash);
}

/* Color: Polar */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
	color: var(--wp--preset--color--polar);
}

/* Color: Cherry */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
	color: var(--wp--preset--color--dollabillz);
}

/* Highlighted code option. Color: Mirage */
.hljs mark {
	background-color: var(--wp--preset--color--mirage);
}

/* Color: Seafoam */
.hljs-attribute {
	color: var(--wp--preset--color--seafoam);
}

/* Color: Tiffany */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
	color: var(--wp--preset--color--tiffany);
}

/* Color: Sunset */
.hljs-title,
.hljs-section {
	color: var(--wp--preset--color--sunset);
}

/* Color: Royal */
.hljs-keyword,
.hljs-selector-tag {
	color: var(--wp--preset--color--curry);
}

.hljs {
	display: block;
	overflow-x: auto;
}

.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: bold;
}

/* Microsoft High Contrast Mode */
@media screen and (-ms-high-contrast: active) {
	.hljs-addition,
	.hljs-attribute,
	.hljs-built_in,
	.hljs-builtin-name,
	.hljs-bullet,
	.hljs-comment,
	.hljs-link,
	.hljs-literal,
	.hljs-meta,
	.hljs-number,
	.hljs-params,
	.hljs-string,
	.hljs-symbol,
	.hljs-type,
	.hljs-quote {
		color: highlight;
	}

	.hljs-keyword,
	.hljs-selector-tag {
		font-weight: bold;
	}
}