/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/scss/flat-blocks.scss ***!
  \************************************************************************************************************************************************/
/**
 * File:	flat-blocks.css
 * Theme:	Flat Blocks
 * 
 * The base stylesheet for the Flat Block theme's CORE block styles
 * 
 * NOTE: This file is AUTO-GENERATED from the SASS source files 
 * in /src/sass/flat-blocks.scss. Do not make updates here.
 *
 * @package flat-blocks
 * @since	1.0
 */
/*-----------------------------------------------------------------------------
# BASE STYLES
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
# Normalize
-----------------------------------------------------------------------------*/
/* 
 * Default to contain borders and padding within blocks and prevent iOS from 
 * adjusting text sizes after orientation change. 
 */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto !important;
}

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

/* 
 * Default color scheme to light, but allow theme styles to set it to 
 * "light dark". That will turn input fields black and also allows the use of the 
 * CSS light-dark function. e.g. light-dark(white, black).
 */
:root {
  color-scheme: var(--wp--custom--color--scheme, light);
}

/*
 * Font smoothing and text decoration styles.
 * These are niche settings that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 * 
 * Also text decoration styles.
 */
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-decoration-style: var(--wp--custom--link--style, solid);
  text-decoration-thickness: var(--wp--custom--link--thickness, 1px);
  text-underline-position: var(--wp--custom--link--position, under);
  text-underline-offset: var(--wp--custom--link--offset, 0);
}

/*-----------------------------------------------------------------------------
# Elements
-----------------------------------------------------------------------------*/
/* Use bold font-weight from theme.json */
strong,
b {
  font-weight: var(--wp--custom--typography--font-weight--bold, 500);
}

/* Prevent code from breaking layout and use smaller font */
code,
pre {
  overflow-x: scroll;
  font-size: var(--wp--preset--font-size--small);
}

/* Style lists with backgrounds */
ol.has-background:not(.wp-block-navigation-submenu):not(.wp-block-navigation__container),
ul.has-background:not(.wp-block-navigation-submenu):not(.wp-block-navigation__container) {
  padding: var(--wp--preset--spacing--40);
  list-style-position: inside;
}

/* Center captions by default */
.wp-element-caption {
  text-align: center;
}

/*-----------------------------------------------------------------------------
# Buttons and Links
-----------------------------------------------------------------------------*/
/*
 * Link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */
a,
.wp-block-navigation a,
.wp-block-navigation-submenu__toggle {
  cursor: pointer;
  text-decoration-style: var(--wp--custom--link--style, solid);
}

/* Set link hover styles */
:where(.has-background :not(.wp-block-site-title) > a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor)) {
  text-decoration: underline;
}
:where(.has-background :not(.wp-block-site-title) > a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor)):hover, :where(.has-background :not(.wp-block-site-title) > a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor)):active {
  opacity: var(--wp--custom--color--link--hover-opacity, 0.8);
}

/* 
 * Style basic buttons to match block buttons. 
 */
input[type=button]:not(.wp-element-button),
input[type=submit][class*=button]:not(.wp-element-button),
input[type=reset][class*=button]:not(.wp-element-button),
input[type=file]::file-selector-button {
  background-color: var(--wp--custom--color--button--background, var(--wp--custom--color--highlight, var(--wp--preset--color--highlight)));
  color: var(--wp--custom--color--button--text, var(--wp--preset--color--foreground-alt, white));
  border: none;
  border-width: 0;
  border-radius: var(--wp--custom--button--radius, 0);
  padding: var(--wp--preset--spacing--30, 9px) var(--wp--preset--spacing--40, 18px);
  font-size: var(--wp--preset--font-size--normal, 18px);
  font-weight: 400;
  line-height: 1.5;
  text-shadow: none;
}

input[type=file] {
  font-size: var(--wp--preset--font-size--small, 16px);
  width: 100%;
}

/* 
 * But override basic buttons to look like outlines on primary-colored
 * backgrounds 
 */
.has-primary-background-color input[type=button],
.has-primary-background-color input[type=submit][class*=button],
.has-primary-background-color input[type=reset][class*=button],
.has-primary-background-color input[type=file]::file-selector-button {
  border: 3px solid var(--wp--custom--color--button--text, var(--wp--preset--color--foreground-alt, white));
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */
button:not(.wp-block-navigation-submenu__toggle):hover,
input[type=submit][class*=button]:hover,
input[type=reset][class*=button]:hover,
input[type=file]::file-selector-button:hover,
.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
  cursor: pointer;
  opacity: var(--wp--custom--color--button--hover-opacity, 0.8);
}

input[type=button]:not(.wp-element-button):hover,
input[type=submit][class*=button]:not(.wp-element-button):hover,
input[type=reset][class*=button]:not(.wp-element-button):hover,
input[type=file]::file-selector-button:hover {
  background-color: var(--wp--custom--color--button--hover-background, var(--wp--custom--color--button--background, var(--wp--custom--color--highlight, var(--wp--preset--color--highlight))));
  color: var(--wp--custom--color--button--hover-text, var(--wp--custom--color--button--text, var(--wp--preset--color--foreground-alt, white)));
}

/*-----------------------------------------------------------------------------
# Custom: Link Underlines
-----------------------------------------------------------------------------*/
/* Underline links */
.is-style-link-underline a:not(.wp-block-navigation-item__content) {
  text-decoration: underline;
}

.is-style-link-underline a:hover,
.is-style-link-underline a:active {
  opacity: var(--wp--custom--color--link--hover-opacity, 0.8);
}

/* No Underline links */
.is-style-link-no-underline a {
  text-decoration: none;
}

/* Underline links on hover */
.is-style-link-underline-hover a {
  text-decoration: none !important;
}
.is-style-link-underline-hover a:hover, .is-style-link-underline-hover a:active {
  text-decoration: underline !important;
  opacity: 1;
}

/*-----------------------------------------------------------------------------
# Forms
-----------------------------------------------------------------------------*/
/* 
 * Style form fields
 * 
 * Note: Many of these need to be excluded from the Block Editor 
 * toolbars or it will alter them too.
 */
fieldset {
  font-size: var(--wp--preset--font-size--normal, 18px);
  font-weight: var(--wp--custom--typography--font-weight--normal, 300);
  line-height: 1.5;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  border: 1px solid var(--wp--preset--color--contrast);
  border-radius: var(--wp--custom--border--radius);
  text-shadow: none;
  -webkit-appearance: none;
}

select,
textarea,
input:not(.file):not(.wp-element-button) {
  font-family: inherit;
  background-color: var(--wp--custom--color--field--background, revert);
  color: var(--wp--custom--color--field--text, inherit);
}

select {
  font-size: var(--wp--preset--font-size--small, 16px);
  font-weight: var(--wp--custom--typography--font-weight--normal, 300);
  line-height: 1.5;
  border-radius: var(--wp--preset--spacing--20);
  text-shadow: none;
  border: 1px solid var(--wp--custom--color--field--border, var(--wp--preset--color--dark-gray));
}

textarea,
input {
  font-size: var(--wp--preset--font-size--normal);
  font-weight: var(--wp--custom--typography--font-weight--normal, 300);
  line-height: 1.5;
  border-radius: var(--wp--preset--spacing--20);
  text-shadow: none;
}

textarea,
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=button]):not([type=image]):not([class*=button]):not(.wp-block-button__link) {
  -webkit-appearance: none;
  border: 1px solid var(--wp--preset--color--contrast);
}

/* Style focus outline */
input:focus,
textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--wp--custom--color--field--outline, var(--wp--custom--outline--color));
  transition: box-shadow 0.3s ease;
}

select:focus,
select:focus-visible {
  outline: var(--wp--custom--color--field--outline, var(--wp--custom--outline--color)) 5px solid;
  transition: outline 0.3s ease;
}

/*-----------------------------------------------------------------------------
# Alignments
-----------------------------------------------------------------------------*/
/*
 * Don't let anything be wider than our max width. This is so fullwidth images
 * don't get so wide they lose resolution.
 */
.wp-site-blocks {
  max-width: var(--wp--custom--layout--full-size, 1600px);
  margin-left: auto;
  margin-right: auto;
}

/* FIX for center alignment */
body .is-layout-constrained > .aligncenter {
  text-align: center;
}

/* ADD padding to align left and align right to honor wide width */
.wp-site-blocks > .alignleft {
  margin-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50));
}

body .is-layout-constrained > .alignleft {
  padding-left: calc(0.5 * (100% - var(--wp--style--global--wide-size)));
  margin-inline-end: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50));
}

.wp-site-blocks > .alignright {
  margin-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50));
}

body .is-layout-constrained > .alignright {
  padding-right: calc(0.5 * (100% - var(--wp--style--global--wide-size)));
  margin-inline-start: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50));
}

/* Fix WordPress Admin bar on phones not sticking to the top */
@media screen and (max-width: 600px) {
  body > #wpadminbar {
    position: fixed;
  }
}
/*------------------------------------------------------------------------------
# Colors
------------------------------------------------------------------------------*/
/*
 * Default contrast (text) and/or highlight (link, button) color based on 
 * background color.
 * 
 * Override contrast (text) color in theme.json with:
 *		--wp--custom--color--contrast--{color} or 
 *		--wp--custom--color--contrast--default-black or
 *		--wp--custom--color--contrast--default-white
 * 
 * Override highlight (link, button) color in theme.json with:
 *		--wp--custom--color--highlight--{color}
 */
.has-primary-background-color a, .has-secondary-background-color a, .has-tertiary-background-color a, .has-primary-alt-background-color a, .has-secondary-alt-background-color a, .has-tertiary-alt-background-color a, .has-highlight-background-color a, .has-highlight-alt-background-color a, .has-dark-gray-background-color a, .has-very-dark-gray-background-color a, .has-green-background-color a, .has-dark-bright-green-background-color a, .has-midnight-blue-background-color a, .has-dark-midnight-blue-background-color a, .has-orange-background-color a, .has-dark-orange-background-color a, .has-blue-background-color a, .has-dark-blue-background-color a, .has-purple-background-color a, .has-dark-purple-background-color a, .has-red-background-color a, .has-dark-red-background-color a, .has-light-green-background-color a, .has-bright-green-background-color a, .has-light-orange-background-color a, .has-light-blue-background-color a, .has-light-red-background-color a, .has-light-purple-background-color a, .has-light-yellow-background-color a, .has-yellow-background-color a, .has-primary-background-color .is-style-outline > .wp-element-button, .has-secondary-background-color .is-style-outline > .wp-element-button, .has-tertiary-background-color .is-style-outline > .wp-element-button, .has-primary-alt-background-color .is-style-outline > .wp-element-button, .has-secondary-alt-background-color .is-style-outline > .wp-element-button, .has-tertiary-alt-background-color .is-style-outline > .wp-element-button, .has-highlight-background-color .is-style-outline > .wp-element-button, .has-highlight-alt-background-color .is-style-outline > .wp-element-button, .has-dark-gray-background-color .is-style-outline > .wp-element-button, .has-very-dark-gray-background-color .is-style-outline > .wp-element-button, .has-green-background-color .is-style-outline > .wp-element-button, .has-dark-bright-green-background-color .is-style-outline > .wp-element-button, .has-midnight-blue-background-color .is-style-outline > .wp-element-button, .has-dark-midnight-blue-background-color .is-style-outline > .wp-element-button, .has-orange-background-color .is-style-outline > .wp-element-button, .has-dark-orange-background-color .is-style-outline > .wp-element-button, .has-blue-background-color .is-style-outline > .wp-element-button, .has-dark-blue-background-color .is-style-outline > .wp-element-button, .has-purple-background-color .is-style-outline > .wp-element-button, .has-dark-purple-background-color .is-style-outline > .wp-element-button, .has-red-background-color .is-style-outline > .wp-element-button, .has-dark-red-background-color .is-style-outline > .wp-element-button, .has-light-green-background-color .is-style-outline > .wp-element-button, .has-bright-green-background-color .is-style-outline > .wp-element-button, .has-light-orange-background-color .is-style-outline > .wp-element-button, .has-light-blue-background-color .is-style-outline > .wp-element-button, .has-light-red-background-color .is-style-outline > .wp-element-button, .has-light-purple-background-color .is-style-outline > .wp-element-button, .has-light-yellow-background-color .is-style-outline > .wp-element-button, .has-yellow-background-color .is-style-outline > .wp-element-button, .has-primary-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-secondary-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-tertiary-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-primary-alt-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-secondary-alt-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-tertiary-alt-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-highlight-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-highlight-alt-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-dark-gray-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-very-dark-gray-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-green-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-dark-bright-green-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-midnight-blue-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-dark-midnight-blue-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-orange-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-dark-orange-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-blue-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-dark-blue-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-purple-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-dark-purple-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-red-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-dark-red-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-light-green-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-bright-green-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-light-orange-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-light-blue-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-light-red-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-light-purple-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-light-yellow-background-color [class*=is-style-button-outline-] > .wp-element-button, .has-yellow-background-color [class*=is-style-button-outline-] > .wp-element-button {
  color: var(--wp--custom--color--highlight);
}

.has-dark-background-color :where(a:not(.wp-element-button):hover), .has-dark-alt-background-color :where(a:not(.wp-element-button):hover), .has-almost-black-background-color :where(a:not(.wp-element-button):hover), .has-not-quite-black-background-color :where(a:not(.wp-element-button):hover), .has-black-background-color :where(a:not(.wp-element-button):hover), .has-contrast-background-color :where(a:not(.wp-element-button):hover), .has-neutral-background-color :where(a:not(.wp-element-button):hover), .has-neutral-alt-background-color :where(a:not(.wp-element-button):hover), .has-foreground-alt-background-color :where(a:not(.wp-element-button):hover), .has-white-background-color :where(a:not(.wp-element-button):hover), .has-off-white-background-color :where(a:not(.wp-element-button):hover), .has-very-light-gray-background-color :where(a:not(.wp-element-button):hover), .has-light-gray-background-color :where(a:not(.wp-element-button):hover), .has-gray-background-color :where(a:not(.wp-element-button):hover), .has-base-background-color :where(a:not(.wp-element-button):hover) {
  opacity: 1;
}

/* 
 * Black and near-black colors, default light text but leave link color alone
 */
.has-dark-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark, var(--wp--custom--color--contrast--default-black, var(--wp--preset--color--foreground-alt)));
}

.has-dark-alt-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-alt, var(--wp--custom--color--contrast--default-black, var(--wp--preset--color--foreground-alt)));
}

.has-almost-black-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--almost-black, var(--wp--custom--color--contrast--default-black, var(--wp--preset--color--foreground-alt)));
}

.has-not-quite-black-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--not-quite-black, var(--wp--custom--color--contrast--default-black, var(--wp--preset--color--foreground-alt)));
}

.has-black-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--black, var(--wp--custom--color--contrast--default-black, var(--wp--preset--color--foreground-alt)));
}

.has-contrast-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--contrast, var(--wp--preset--color--base));
}

/* 
 * Accent colors (Primary, Secondary, etc.), default light text and links
 */
.has-primary-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--primary, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--primary, inherit);
}

.has-secondary-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--secondary, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--secondary, inherit);
}

.has-tertiary-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--tertiary, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--tertiary, inherit);
}

.has-primary-alt-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--primary-alt, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--primary-alt, inherit);
}

.has-secondary-alt-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--secondary-alt, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--secondary-alt, inherit);
}

.has-tertiary-alt-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--tertiary-alt, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--tertiary-alt, inherit);
}

.has-highlight-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--highlight, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--highlight, inherit);
}

.has-highlight-alt-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--highlight-alt, var(--wp--preset--color--foreground-alt));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--highlight-alt, inherit);
}

/* 
 * Dark colors, default light text and links
 */
.has-dark-gray-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-gray, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--dark-gray, inherit);
}

.has-very-dark-gray-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--very-dark-gray, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--very-dark-gray, inherit);
}

.has-green-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--green, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--green, inherit);
}

.has-dark-bright-green-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-bright-green, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--dark-bright-green, inherit);
}

.has-midnight-blue-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--midnight-blue, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--midnight-blue, inherit);
}

.has-dark-midnight-blue-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-midnight-blue, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--dark-midnight-blue, inherit);
}

.has-orange-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--orange, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--orange, inherit);
}

.has-dark-orange-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-orange, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--dark-orange, inherit);
}

.has-blue-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--blue, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--blue, inherit);
}

.has-dark-blue-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-blue, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--dark-blue, inherit);
}

.has-purple-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--purple, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--purple, inherit);
}

.has-dark-purple-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-purple, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--dark-purple, inherit);
}

.has-red-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--red, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--red, inherit);
}

.has-dark-red-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--dark-red, var(--wp--preset--color--off-white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--dark-red, inherit);
}

/* 
 * Medium colors, default light text and links
 */
.has-light-green-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--light-green, var(--wp--preset--color--white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--light-green, inherit);
}

.has-bright-green-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--bright-green, var(--wp--preset--color--white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--bright-green, inherit);
}

.has-light-orange-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--light-orange, var(--wp--preset--color--white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--light-orange, inherit);
}

.has-light-blue-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--light-blue, var(--wp--preset--color--white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--light-blue, inherit);
}

.has-light-red-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--light-red, var(--wp--preset--color--white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--light-red, inherit);
}

.has-light-purple-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--light-purple, var(--wp--preset--color--white));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--light-purple, inherit);
}

/* 
 * Light Colors, default dark text and links
 */
.has-light-yellow-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--light-yellow, var(--wp--preset--color--almost-black));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--light-yellow, inherit);
}

.has-yellow-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--yellow, var(--wp--preset--color--almost-black));
  --wp--custom--color--highlight: var(--wp--custom--color--highlight--yellow, inherit);
}

/* 
 * White and near-white colors, default dark text but leave the link color alone
 */
.has-neutral-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--neutral, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-neutral-alt-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--neutral-alt, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-foreground-alt-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--foreground-alt, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-white-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--white, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-off-white-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--off-white, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-very-light-gray-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--very-light-gray, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-light-gray-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--light-gray, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-gray-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--gray, var(--wp--custom--color--contrast--default-white, var(--wp--preset--color--contrast)));
}

.has-base-background-color {
  --wp--custom--color--contrast: var(--wp--custom--color--contrast--base, var(--wp--preset--color--contrast));
}

/* Set the contrast color on colored backgrounds and buttons */
:root :where(.has-background),
:root :where(.wp-block-background.has-background .wp-element-button, .wp-block-background.has-background .wp-block-button__link) {
  color: var(--wp--custom--color--contrast);
}

/* Set the text color on gradient backgrounds */
:root :where([class*=-gradient-background]:not(.has-gray-gradient-background):not(.has-yellow-gradient-background)) {
  color: var(--wp--preset--color--foreground-alt);
}

:root :where(.has-primary-gradient-background, .has-primary-to-secondary-gradient-background, .has-secondary-to-primary-gradient-background, .has-primary-to-tertiary-gradient-background, .has-tertiary-to-primary-gradient-background) {
  color: var(--wp--custom--color--contrast--primary, var(--wp--preset--color--foreground-alt));
}

:root :where(.has-secondary-gradient-background, .has-secondary-to-tertiary-gradient-background, .has-tertiary-to-secondary-gradient-background) {
  color: var(--wp--custom--color--contrast--secondary, var(--wp--preset--color--foreground-alt));
}

:root :where(.has-tertiary-gradient-background) {
  color: var(--wp--custom--color--contrast--tertiary, var(--wp--preset--color--foreground-alt));
}

/* Inherit the link and outline button color on gradient backgrounds */
:root :where([class*=-gradient-background]) a:where(:not(.wp-element-button)), :root :where([class*=-gradient-background]) .is-style-outline > .wp-element-button, :root :where([class*=-gradient-background]) [class*=is-style-button-outline-] > .wp-element-button {
  color: inherit;
}

/* 
 * On Cover blocks, default the text color to white, but set it back to black
 * on light backgrounds with dim 30% or less
 */
:where(.wp-block-cover-image.is-light:not(.has-text-color)), :where(.wp-block-cover.is-light:not(.has-text-color)) {
  color: #fff;
}
:where(.wp-block-cover-image.is-light:not(.has-text-color)):has(.has-background-dim-10), :where(.wp-block-cover-image.is-light:not(.has-text-color)):has(.has-background-dim-20), :where(.wp-block-cover-image.is-light:not(.has-text-color)):has(.has-background-dim-30), :where(.wp-block-cover.is-light:not(.has-text-color)):has(.has-background-dim-10), :where(.wp-block-cover.is-light:not(.has-text-color)):has(.has-background-dim-20), :where(.wp-block-cover.is-light:not(.has-text-color)):has(.has-background-dim-30) {
  color: #000;
}

/*-----------------------------------------------------------------------------
# CRITICAL BLOCK STYLES
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
# Cover
-----------------------------------------------------------------------------*/
/* LIMIT cover image inner content to standard unless wide or full */
.wp-block-cover .wp-block-cover__inner-container > *:not(.alignfull):not(.alignwide) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-cover .wp-block-cover__inner-container > *.alignwide,
.wp-block-cover .wp-block-cover__inner-container > *.alignfull {
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}

/* If cover used as site header, make sure it is layered above other covers */
header > .wp-block-cover {
  overflow: visible;
  z-index: 3;
}

/*-----------------------------------------------------------------------------
# Group
-----------------------------------------------------------------------------*/
/* Padding for colored backgrounds on groups */
.wp-block-group.has-background {
  padding: var(--wp--preset--spacing--60);
}

/* Padding for top-level non-colored groups */
:where(.wp-block-post-content > .wp-block-group:not(.has-background):not(.is-style-no-padding)) {
  padding-top: var(--wp--style--block-gap);
  padding-bottom: var(--wp--style--block-gap);
}

/* 
 * If global padding, then OVERRIDE horizontal padding on tablet and mobile
 *
 * Note: Breakpoint of 781 is what is hard-coded in WordPress for tablet
 */
@media only screen and (max-width: 781px) {
  .site-header.has-global-padding.wp-block-group,
  .site-footer.has-global-padding.wp-block-group {
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
  }
}
/* Even when nowrap is set, go ahead and collapse on mobile
 * 
 * Note: Breakpoint of 601 is what is hard-coded in WordPress for mobile 
 */
@media only screen and (max-width: 601px) {
  .is-nowrap.is-layout-flex.wp-block-group {
    flex-wrap: wrap;
  }
}
/*-----------------------------------------------------------------------------
# Group: Custom
-----------------------------------------------------------------------------*/
/* Group borders */
.wp-block-group.is-style-rounded-border.is-layout-flex,
.wp-block-group.is-style-thick-rounded-border.is-layout-flex {
  overflow: hidden;
}

/* Group no padding */
.wp-block-group.is-style-no-padding {
  padding-top: 0;
  padding-bottom: 0;
}

.wp-block-group.is-style-no-padding:not(.has-global-padding) {
  padding-left: 0;
  padding-right: 0;
}

/* Position the fixed header using sticky so we don't have to have top site margin */
.wp-site-blocks > header.wp-block-template-part:has(header.is-position-sticky),
.wp-site-blocks > header:has(.is-style-fixed-header) {
  position: sticky;
  top: 0;
  background-color: var(--wp--preset--color--base, var(--wp--preset--color--background));
  box-shadow: var(--wp--custom--shadow--default);
  z-index: 10;
}

/* If WordPress Admin Bar, then adjust fixed header position so its underneath it */
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(header.is-position-sticky),
.admin-bar .wp-site-blocks > header:has(.is-style-fixed-header) {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Position the fixed footer using sticky, but only on large screens */
.wp-site-blocks > footer.wp-block-template-part:has(footer.is-position-sticky) {
  position: relative;
  bottom: 0;
  z-index: 9;
}

@media only screen and (min-width: 1100px) {
  .wp-site-blocks > footer.wp-block-template-part:has(footer.is-position-sticky) {
    position: sticky;
  }
}
/*-----------------------------------------------------------------------------
# Navigation
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
# Style Nav Menus
-----------------------------------------------------------------------------*/
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
  min-width: var(--wp--custom--navigation--width, 260px);
}

/* FIX for padding on level 2+ nav menu and pages list drop-downs */
.wp-block-navigation__submenu-container .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
  padding-left: 1em;
}

/* Default nav link opacity on hover */
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item:active > .wp-block-navigation-item__content.wp-block-navigation-item__content {
  opacity: var(--wp--custom--color--link--hover-opacity, 0.8);
}

/*-----------------------------------------------------------------------------
# Style Nav Menus with a background
-----------------------------------------------------------------------------*/
/* Reduce vertical gap when Nav menu wraps */
.wp-block-navigation__container {
  row-gap: var(--wp--preset--spacing--20);
}

/* When the nav itself has a colored background, set link color and padding */
.wp-block-navigation.has-background:not(.has-text-color) .wp-block-navigation__responsive-container, .wp-block-navigation.has-background:not(.has-text-color) .wp-block-navigation__submenu-container {
  color: inherit;
}
.wp-block-navigation.has-background .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(:first-child) > a:not(.wp-element-button), .wp-block-navigation.has-background .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-submenu:not(:first-child) {
  padding-left: 0;
}
.wp-block-navigation.has-background .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child) > a:not(.wp-element-button), .wp-block-navigation.has-background .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-submenu:not(:last-child) {
  padding-right: 0;
}

/*-----------------------------------------------------------------------------
# On HEADER MENU, highlight on HOVER and on CURRENT active menu item
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
# On DESKTOP, highlight TOP-LEVEL links
-----------------------------------------------------------------------------*/
header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:active > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item:hover > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item:active > *:not(.wp-block-navigation__submenu-container) {
  color: var(--wp--custom--color--highlight, var(--wp--preset--color--highlight));
}
header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:has(.current-menu-ancestor) > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > a[aria-current=page], header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item.current-menu-ancestor > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item.current-menu-item > a[aria-current=page] {
  color: var(--wp--custom--color--highlight, var(--wp--preset--color--highlight));
  font-weight: var(--wp--custom--typography--font-weight--medium);
}

/*-----------------------------------------------------------------------------
# On MOBILE, highlight TOP-LEVEL links
-----------------------------------------------------------------------------*/
header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.open-on-click):hover > *, header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.open-on-click):active > *, header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item:not(.has-child):hover > *, header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item:not(.has-child):active > * {
  color: var(--wp--preset--color--highlight-alt);
}
header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .current-menu-ancestor > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item.current-menu-ancestor > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-page-list > .wp-block-navigation-item.current-menu-item > *:not(.wp-block-navigation__submenu-container) {
  color: var(--wp--preset--color--highlight);
  font-weight: var(--wp--custom--typography--font-weight--medium);
}

/*-----------------------------------------------------------------------------
# Handle highlight on SUB MENU items WITHOUT it's own background and PAGES LIST
-----------------------------------------------------------------------------*/
header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item:hover > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item:active > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation .wp-block-page-list .wp-block-pages-list__item.has-child .wp-block-pages-list__item:hover > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation .wp-block-page-list .wp-block-pages-list__item.has-child .wp-block-pages-list__item:active > *:not(.wp-block-navigation__submenu-container) {
  color: var(--wp--preset--color--highlight-alt);
}
header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item:has(.current-menu-ancestor) > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item.current-menu-item > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation .wp-block-page-list .wp-block-pages-list__item.has-child .wp-block-pages-list__item:has(.current-menu-ancestor) > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation .wp-block-page-list .wp-block-pages-list__item.has-child .wp-block-pages-list__item.current-menu-item > *:not(.wp-block-navigation__submenu-container) {
  color: var(--wp--preset--color--highlight);
  font-weight: var(--wp--custom--typography--font-weight--medium);
}

/*-----------------------------------------------------------------------------
# Handle highlight on SUB MENU items WITH it's own background
-----------------------------------------------------------------------------*/
header .wp-block-navigation.has-background .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item:hover > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation.has-background .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item:active > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation__submenu-container.has-background .wp-block-navigation-item:hover > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation__submenu-container.has-background .wp-block-navigation-item:active > *:not(.wp-block-navigation__submenu-container) {
  color: var(--wp--custom--color--highlight, var(--wp--preset--color--highlight-alt));
}
header .wp-block-navigation.has-background .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item:has(.current-menu-ancestor) > *:not(.wp-block-navigation__submenu-container), header .wp-block-navigation.has-background .wp-block-navigation__submenu-container:not(.has-background) .wp-block-navigation-item.current-menu-item > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation__submenu-container.has-background .wp-block-navigation-item:has(.current-menu-ancestor) > *:not(.wp-block-navigation__submenu-container),
header .wp-block-navigation__submenu-container.has-background .wp-block-navigation-item.current-menu-item > *:not(.wp-block-navigation__submenu-container) {
  color: var(--wp--custom--color--highlight, var(--wp--preset--color--highlight));
  font-weight: var(--wp--custom--typography--font-weight--medium);
}

/*-----------------------------------------------------------------------------
# On MOBILE nav, don't hover on non-clickable links
-----------------------------------------------------------------------------*/
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.open-on-click:hover > .wp-block-navigation-item__content, header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.open-on-click:active > .wp-block-navigation-item__content {
  cursor: unset;
  opacity: 1;
}

/*-----------------------------------------------------------------------------
# Style the Mobile Nav Menu
-----------------------------------------------------------------------------*/
/* Style the mobile nav open and close buttons */
.wp-block-navigation .wp-block-navigation__responsive-container-open,
.wp-block-navigation .wp-block-navigation__responsive-container-close {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--wp--custom--color--border, var(--wp--preset--color--neutral-alt));
  border-radius: var(--wp--custom--button--radius);
  padding: var(--wp--preset--spacing--20);
}

.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
  margin-top: var(--wp--preset--spacing--60);
}

/* 
 * On navs with colored backgrounds, round out the mobile nav container 
 * to match our open / close menu buttons
 */
.wp-block-navigation.has-background:has(.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open)) {
  border-radius: var(--wp--custom--button--radius);
}

/*
 * Responsive menu container padding. This behavior may be built into the 
 * Block Editor in the future.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  padding-top: calc(var(--wp--preset--spacing--40) + 14.5px);
  padding-bottom: var(--wp--preset--spacing--60);
  padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50));
  padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50));
}

/* Set padding on drop-down menus for mobile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  padding: 0 var(--wp--preset--spacing--40);
}

/* Increase animation TIME on nav menu drop-downs */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  -webkit-transition-duration: var(--wp--custom--animation--duration--short);
  -moz-transition-duration: var(--wp--custom--animation--duration--short);
  transition-duration: var(--wp--custom--animation--duration--short);
}

/* Increase animation DELAY on nav drop-downs when NOT requiring a click */
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
  -webkit-transition-delay: var(--wp--custom--animation--duration--short);
  -moz-transition-delay: var(--wp--custom--animation--duration--short);
  transition-delay: var(--wp--custom--animation--duration--short);
}

/*-----------------------------------------------------------------------------
# Custom: Fixed Navigation Menu
-----------------------------------------------------------------------------*/
/* Navigation Fixed menu */
nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-open,
nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-close {
  background: rgba(0, 0, 0, 0.25);
  padding: var(--wp--preset--spacing--20);
  color: white;
  border: none;
  border-radius: 0;
}

/* On the front-end only, position the fixed nav menu to the top left */
.wp-site-blocks:not(.is-root-container) nav.wp-block-navigation.is-style-fixed-menu {
  position: fixed;
  top: calc(var(--wp--preset--spacing--60) + 1px * var(--wp--style--root--padding-top, 0));
  left: max(0.5 * (100% - var(--wp--style--global--wide-size)), var(--wp--style--root--padding-left, calc(2 * var(--wp--preset--spacing--50))));
  right: auto;
  z-index: 9999;
}

/* If WordPress Admin Bar, adjust fixed menu top position so its underneath */
.admin-bar .wp-site-blocks:not(.is-root-container) nav.wp-block-navigation.is-style-fixed-menu {
  top: calc(var(--wp--preset--spacing--60) + 1px * var(--wp--style--root--padding-top, 0) + var(--wp-admin--admin-bar--height, 0));
}

/* 
 * On the front-end and Editor, default the fixed menu's drop-down and close
 * button also to the left 
 */
nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container,
nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-close {
  left: 0;
  right: auto;
}

nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container {
  width: var(--wp--custom--navigation--wide-width, 360px);
}

/* If right justified, position the fixed menu and its drop-down to the right */
.site-header.is-content-justification-right > nav.wp-block-navigation.is-style-fixed-menu,
.site-header.is-content-justification-right > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu {
  right: max(0.5 * (100% - var(--wp--style--global--wide-size)), var(--wp--style--root--padding-right, calc(2 * var(--wp--preset--spacing--50))));
  left: auto;
}

.site-header.is-content-justification-right > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container,
.site-header.is-content-justification-right > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container,
.site-header.is-content-justification-right > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-close,
.site-header.is-content-justification-right > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-close {
  right: 0;
  left: auto;
}

/* 
 * If center justified, position the fixed menu and its drop-down in the 
 * center 
 */
.site-header.is-content-justification-center > nav.wp-block-navigation.is-style-fixed-menu,
.site-header.is-content-justification-center > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu {
  left: calc(50% - 12px - var(--wp--preset--spacing--20));
  right: auto;
}

.site-header.is-content-justification-center > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container,
.site-header.is-content-justification-center > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container {
  left: calc(50% - 180px);
  right: auto;
}

.site-header.is-content-justification-center > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-close,
.site-header.is-content-justification-center > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-close {
  left: calc(50% - 12px - 0.5 * var(--wp--preset--spacing--20));
  right: auto;
}

/*-----------------------------------------------------------------------------
# Paragraph
-----------------------------------------------------------------------------*/
/* Padding for colored backgrounds on paragraphs */
.wp-block-paragraph.has-background {
  padding: var(--wp--preset--spacing--40);
}

/* 
 * Note: Breakpoint of 781 is what is hard-coded in WordPress 
 * v6.0+ to collapse columns
 */
@media only screen and (max-width: 781px) {
  /* If no global padding, then set paragraphs like colored groups */
  p.has-background:not(.has-global-padding) {
    padding-left: calc(2 * var(--wp--style--block-gap));
    padding-right: calc(2 * var(--wp--style--block-gap));
  }
  /* If global padding, then OVERRIDE horizontal padding on mobile */
  .has-global-padding p.has-background {
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
  }
}
/*-----------------------------------------------------------------------------
# Paragraph: Custom
-----------------------------------------------------------------------------*/
/* Alignwide */
p.is-style-alignwide {
  max-width: var(--wp--style--global--wide-size) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Arrow icon */
p.is-style-arrow-icon-no-text {
  font-size: 0; /* hide the text */
}

p.is-style-arrow-icon > a,
p.is-style-arrow-icon-no-text > a {
  color: inherit;
  display: block;
  text-decoration: none !important;
  outline: none !important;
  text-align: center;
  margin: var(--wp--style--block-gap) auto;
}

p.is-style-arrow-icon > a:focus,
p.is-style-arrow-icon > a:active,
p.is-style-arrow-icon-no-text > a:focus,
p.is-style-arrow-icon-no-text > a:active {
  opacity: 1;
}

p.is-style-arrow-icon > a:after,
p.is-style-arrow-icon-no-text > a:after {
  display: block;
  font-family: dashicons;
  content: "\f347";
  font-size: var(--wp--preset--font-size--larger);
  line-height: 1;
}

p.is-style-arrow-icon > a:after {
  white-space: pre-wrap; /* adds line break */
}

/*-----------------------------------------------------------------------------
# Site Logo
-----------------------------------------------------------------------------*/
/* Don't shrink the site logo */
.wp-block-site-logo {
  flex-shrink: 0;
}

/*-----------------------------------------------------------------------------
# ADDITIONAL BASE STYLES
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
# Dashicons
-----------------------------------------------------------------------------*/
/**
 * Override core WordPress base Dashicon styles. Don't let it alter height, 
 * width, font-size or line-height. Note: Need higher specificity here than 
 * just ".dashicons".
 */
[class*=dashicons-].dashicons {
  display: block;
  width: auto;
  height: auto;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--wp--custom--typography--font-weight--normal);
  line-height: inherit;
  text-align: center;
  text-transform: inherit;
}

[class*=dashicons-].dashicons:before {
  display: inline-block;
  width: auto;
  height: auto;
  font-family: dashicons;
  font-size: 1em;
  line-height: 1;
  font-weight: inherit;
  vertical-align: text-top;
}

/* Add some right margin on inline dashicons before the text */
.dashicons-before:before,
.dashicons-above:before,
.dashicons-below:before {
  font-family: dashicons;
  margin-right: var(--wp--preset--spacing--20);
}

.dashicons-after {
  display: flex;
}
.dashicons-after:before {
  font-family: dashicons;
  order: 2;
  margin-left: var(--wp--preset--spacing--20);
}

/* Don't underline dashicons links */
.dashicons a {
  text-decoration: none;
}

/* Style Dashicons in Nav menus */
.wp-block-navigation-item.dashicons {
  display: flex;
  flex-direction: row;
}

/* Nav menus already have transitions and text align, so inherit them */
.wp-block-navigation .dashicons {
  transition: inherit;
  text-align: inherit;
}

/* Don't display icons on mobile menu because they can't be placed inline */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.dashicons:before, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu.dashicons:before {
  content: none;
}

/*-----------------------------------------------------------------------------
# Dashicons: Custom
-----------------------------------------------------------------------------*/
.is-style-no-icon:before {
  display: none;
}

/*------------------------------------------------------------------------------
# Margins (Vertical spacing)
------------------------------------------------------------------------------*/
/* 
 * Core Wordpress controls vertical spacing by adding the gap setting as top
 * margin between all blocks on the site. However, certain things like 
 * template parts get this too and we want the theme and users to be able to 
 * control it, so push this down to the block level.
 */
/* Remove top margin and padding from the containers */
header,
main,
footer,
.wp-block-template-part,
.wp-block-post-content {
  margin-block-start: 0 !important;
}

/* 
 * Add top margin to the container's first block. This is mainly for pages with
 * sidebars as well as legacy non-block page content.
 */
main > *:first-child:not(.wp-block-template-part):not(.wp-block-post-content):not(.wp-block-query),
.wp-block-query > *:first-child:not(.wp-block-cover),
main > .wp-block-post-content > *:first-child:not(.wp-block-cover) {
  margin-block-start: var(--wp--style--block-gap);
}

/* But don't add top or bottom margin to template part within a column. e.g. Footers. */
.wp-block-column > .wp-block-template-part > *:first-child,
.wp-block-column > .wp-block-group > .wp-block-template-part > .wp-block-social-links {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Also add bottom margin on the last block for convenience */
.wp-block-query > *:last-child,
.wp-block-post-content > *:last-child {
  margin-block-end: var(--wp--style--block-gap);
}

/* But don't add bottom margin to a template part within a column. e.g. Footers. */
.wp-block-column > .wp-block-template-part > *:last-child,
.wp-block-column > .wp-block-group > .wp-block-template-part > .wp-block-social-links {
  margin-block-end: 0;
}

/*-----------------------------------------------------------------------------
# Padding (Horizontal and vertical spacing)
-----------------------------------------------------------------------------*/
/* Remove padding from containers */
main.wp-block-group:not(.has-global-padding),
.wp-block-template-part {
  padding: 0;
}

/* FIX alignfull in WordPress.org theme preview */
.has-global-padding > #wporg-pattern-preview > div > .alignfull {
  margin-right: calc(var(--wp--style--root--padding-right) * -1);
  padding-right: var(--wp--style--root--padding-right);
  margin-left: calc(var(--wp--style--root--padding-left) * -1);
  padding-left: var(--wp--style--root--padding-left);
}

/*-----------------------------------------------------------------------------
# Flat Blocks Theme Compatibility with Prior Versions
#
# This is so that user's CONTENT created with prior theme versions will still
# work as before. These styles have been DEPRECATED though and will be removed
# at some point, so its best to update the site content.
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
# Flat Blocks Colors (for theme < v1.6)
-----------------------------------------------------------------------------*/
.has-foreground-color {
  color: var(--wp--preset--color--contrast);
}

.has-foreground-background-color {
  background-color: var(--wp--preset--color--contrast);
}

.has-foreground-border-color {
  border-color: var(--wp--preset--color--contrast);
}

.has-background-color {
  color: var(--wp--preset--color--base);
}

.has-background-background-color {
  background-color: var(--wp--preset--color--base);
}

.has-background-border-color {
  border-color: var(--wp--preset--color--base);
}

/*-----------------------------------------------------------------------------
# Flat Blocks Custom Styles (for theme < v1.6.4)
-----------------------------------------------------------------------------*/
.is-style-cover-rounded-corners {
  border-radius: var(--wp--custom--border--radius);
  overflow: hidden;
}

.is-style-cover-border,
.is-style-media-text-border {
  border: 1px solid var(--wp--custom--color--border);
  border-radius: var(--wp--custom--border--radius);
  padding: var(--wp--preset--spacing--40);
}

/*-----------------------------------------------------------------------------
# Utilities
-----------------------------------------------------------------------------*/
/* 
 * Note: These utility classes must be added manually in the 
 * Advanced section of the block settings.
 */
/* 
 * Clearfix (Clear floats)
 * 
 * Note: Be carefull as this will mess up fixed headers, Row 
 * Groups (flex boxes), etc. We've tried to style around those 
 * though.
 */
.is-style-clearfix:not(.is-layout-flex):not(.is-style-fixed-header):after {
  content: "";
  clear: both;
  display: table;
}

/* Flexbox No Shrink
 * 
 * Note: This only works on elements within a Flex Box (Group)
 */
.is-layout-flex .is-style-no-shrink {
  flex-shrink: 0;
}

/*-----------------------------------------------------------------------------
# Color compatibility with other themes
#
# This is so that user's CONTENT created with CORE WORDPRESS THEMES will look
# OK before they update it for the Flat Blocks theme. These styles are
# temporary and could be removed in future versions of Flat Blocks.
-----------------------------------------------------------------------------*/
/* 
 * TwentyTwentyFour theme uses base and contrast in numbered 
 * shades. It also uses accent colors in numbered shades instead 
 * of primary, secondary, and tertiary.
 *
 * TwentyTwentyFive theme uses the same as TwentyTwentyFour except accent is
 * accent-1.
 *
 * Note: TwentyTwentyThree theme uses the same base, contrast, 
 * primary, secondary, and tertiary colors as Flat Blocks.
 */
.has-base-2-color,
.has-base-3-color {
  color: var(--wp--preset--color--foreground-alt);
}

.has-base-2-background-color,
.has-base-3-background-color {
  background-color: var(--wp--preset--color--light-gray);
}

.has-base-2-border-color,
.has-base-3-border-color {
  border-color: var(--wp--preset--color--gray);
}

.has-contrast-2-color,
.has-contrast-3-color {
  color: var(--wp--preset--color--contrast);
}

.has-contrast-2-background-color,
.has-contrast-3-background-color {
  background-color: var(--wp--preset--color--contrast);
}

.has-contrast-2-border-color,
.has-contrast-3-border-color {
  border-color: var(--wp--preset--color--contrast);
}

.has-accent-color,
.has-accent-1-color,
.has-accent-2-color,
.has-accent-3-color,
.has-accent-4-color,
.has-accent-5-color {
  color: var(--wp--preset--color--primary);
}

.has-accent-background-color,
.has-accent-1-background-color,
.has-accent-2-background-color,
.has-accent-3-background-color,
.has-accent-4-background-color,
.has-accent-5-background-color {
  background-color: var(--wp--preset--color--primary);
}

.has-accent-border-color,
.has-accent-1-border-color,
.has-accent-2-border-color,
.has-accent-3-border-color,
.has-accent-4-border-color,
.has-accent-5-border-color {
  border-color: var(--wp--preset--color--primary);
}