/*
 * Ensure spacing and padding are correct theme-wide.
 */

* {
	box-sizing: border-box;
}

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25ch;
}

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

a:active {
	text-decoration-thickness: 2px;
}

h1 a {
       text-decoration: none;
       text-underline-offset: 0.1ch;
}

h1 a:hover {
        text-decoration: underline;
	text-decoration-thickness: 8px;
        text-decoration-color: var(--wp--custom--color--accent);
}

.wp-block-site-title a:hover {
	text-decoration-color: var(--wp--preset--color--foreground);
	text-decoration-thickness: 4px;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
}

footer .wp-block-query .wp-block-post-title a {
	text-decoration: none;
}

footer .wp-block-query .wp-block-post-title a:hover,
footer .wp-block-query .wp-block-post-title a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-color: var(--wp--custom--color--accent);
}

/*
 * Heading styles.
 * Slight modifications to spacing around headings to help
 * distinguish content sections within the post content only.
 *
 * Using !important as the blockGap value overrides it without.
 */

.wp-block-post-content p + h1:not([style*="margin-top"]),
.wp-block-post-content p + h2:not([style*="margin-top"]),
.wp-block-post-content p + h3:not([style*="margin-top"]),
.wp-block-post-content p + h4:not([style*="margin-top"]),
.wp-block-post-content span + h1:not([style*="margin-top"]),
.wp-block-post-content span + h2:not([style*="margin-top"]),
.wp-block-post-content span + h3:not([style*="margin-top"]),
.wp-block-post-content span + h4:not([style*="margin-top"]) {
        margin-top: var(--wp--custom--spacing--medium, 6rem) !important;
}

/*
 * Colossal font size.
 * If added to the theme.json file, it makes the font size control not great.
 */
.font-size-colossal {
	font-size: var(--wp--custom--typography--font-size--colossal) !important;
}

/*
 * Code styles.
 * Slight tweaks to the code blocks.
 */
.wp-block-code {
	border-width: 0;
	overflow: hidden;
	overflow-x: auto;
	white-space: pre;
}

p code {
        background: var(--wp--preset--color--background-alt);
        border-radius: 4px;
        border: 1px solid rgba(128, 128, 128, 0.25);
        display: inline-block;
        font-size: 72.5%;
        padding: 0.05rem 0.5rem;
        position: relative;
        top: -2px;
	color: var(--wp--custom--color--code);
}

p code a {
        color: var(--wp--custom--color--code);
        text-decoration-thickness: 1px !important;
}


/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Wabi. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: var(--wp--custom--spacing--outer);
	padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
	margin-left: auto !important;
	margin-right: auto !important;
	width: inherit;
}

/*
 * Search input styles.
 * A bit hacky but core does not support styling
 * inputs via theme.json or block styles.
 */

.wp-block-search__input {
	border: 0;
	background: transparent;
	color: currentcolor;
	z-index: 3;
	position: relative;
	padding: 12px;
	line-height: 1;
}

/* Remove hard-coded border. */
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border: 0;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
	padding: 12px;
}

.wp-block-search__button {
	cursor: pointer;
}

.has-accent-background-color .wp-block-search {
	background-color: var(--wp--custom--color--hero-text, var(--wp--preset--color--foreground));
	color: var(--wp--preset--color--accent);
}

.has-accent-background-color .wp-block-search__input::placeholder {
        color: var(--wp--preset--color--accent);
}

.has-accent-background-color .wp-block-search__input::-ms-input-placeholder {
        color: var(--wp--preset--color--accent);
}

.has-accent-background-color .wp-block-search__input:-ms-input-placeholder {
        color: var(--wp--preset--color--accent);
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: transparent;
	border-radius: 4px;
	border: none;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
	margin-left: 0;
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}

/*
 * Remove the auto-padding added to group blocks
 * with background colors applied.
 */

.wp-block-group:where(.has-background) {
        padding: 0;
}

/*
 * Add more gap between items in the loop block.
 * Once the block supports blockGap, this can be removed.
 */

@media (min-width: 600px) {

	.wp-block-post-template.is-flex-container, .wp-block-query-loop.is-flex-container {
		gap: 4rem;
	}

	.wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li {
		width: calc(33.33333% - 3rem);
	}
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--custom--spacing--outer);
	padding-bottom: var(--wp--custom--spacing--large, 8rem);
	padding-right: var(--wp--custom--spacing--outer);
	padding-left: var(--wp--custom--spacing--outer);
}

/*
 * Image block, within post content.
 * Add additional margin to the image block, so that
 * it displays with the same spacing as paragraphs do.
 */

.wp-block-post-content p + .wp-block-image {
        margin-top: calc(var(--wp--style--block-gap) * 1.5) !important;
	margin-bottom: calc(var(--wp--style--block-gap) * 1.5) !important;
}

/*
 * Image block, when alignfull within post content.
 */

.wp-block-post-content p + .wp-block-image.alignfull {
	margin-top: calc( 1.25 * var(--wp--custom--spacing--medium, 8rem)) !important;
	margin-bottom: calc( 1.25 * var(--wp--custom--spacing--medium, 8rem)) !important;
}

/*
 * Featured image styles.
 * Add styles to the post featured image so its
 * different than other block themes.
 */

.wp-block-post-featured-image {
	border-radius: var(--wp--custom--img-radius, 10px);
        background-color: var(--wp--custom--color--accent);
}

.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--img-radius, 10px);
        position: relative;
        z-index: 1;
}

.wp-block-post-featured-image a:hover img {
        opacity: 0.75;
}

/*
 * Creates the effect where the accent color is halfway
 * behind the featured image.
 */

.is-single-featured .wp-block-post-featured-image::before {
        background: var(--wp--preset--color--background);
        bottom: 0;
        clip-path: var(--wp--custom--featured-image-clip);
        content: "";
        height: 50%;
        left: 0;
        position: absolute;
        right: 0;
        width: 100%;
        z-index: 0;
}

/*
 * Post author styles.
 * Minor tweaks to customize the appearance of the
 * core/post-author block.
 */

.is-style-avatar-only .wp-block-post-author__content {
	display: none;
}

.wp-block-post-author__content {
        align-self: center;
}

.wp-block-post-author__avatar img {
        border-radius: 100%;
        vertical-align: bottom;
}

/*
 * Post excerpt styles.
 * Remove excess margin from the block.
 */

.wp-block-post-excerpt__excerpt {
        margin-top: initial;
        margin-bottom: initial;
}

/*
 * Social link styles.
 * Use currentColor for social links to better support style variants.
 * Remove the social link transform transition.
 */

.wp-block-social-links.is-style-logos-only > .wp-social-link {
        color: currentColor;
}

.wp-block-social-link {
        transition: none;
        transform: none !important;
}

/*
 * Query Pagination styles.
 * Remove margin that throws this off alignment.
 */

.wp-block-query-pagination > .wp-block-query-pagination-previous {
	margin-left: 0;
	margin-right: 0;
}

/*
 * Registered block styles.
 * Applied to easily add accent colored borders
 * to media (core/image, core/video an ideabox/image-comparison blocks).
 */

.is-style-center,
.is-style-bottom-left,
.is-style-bottom-right {
	--spacing: calc( 2 * var(--wp--custom--spacing--small));
	border-radius: var(--wp--custom--img-radius, 10px);
}

.is-style-center.alignwide,
.is-style-bottom-left.alignwide,
.is-style-bottom-right.alignwide,
.wp-block[data-align="wide"] > .is-style-center,
.wp-block[data-align="wide"] > .is-style-bottom-left,
.wp-block[data-align="wide"] > .is-style-bottom-right {
	--spacing: calc( 2 * var(--wp--custom--spacing--medium));
}

.is-style-center.alignfull,
.is-style-bottom-left.alignfull,
.is-style-bottom-right.alignfull,
.wp-block[data-align="full"] > .is-style-center,
.wp-block[data-align="full"] > .is-style-bottom-left,
.wp-block[data-align="full"] > .is-style-bottom-right {
	--spacing: calc( 3.25 * var(--wp--custom--spacing--small));
	border-radius: 0;
}

.is-style-bottom-left {
	border-bottom-left-radius: 0;
}

.is-style-bottom-left img,
.is-style-bottom-left video {
        background: var(--wp--custom--color--accent);
        padding-right: var(--spacing);
        padding-top: var(--spacing);
}

.is-style-bottom-right {
	border-bottom-right-radius: 0;
}

.is-style-bottom-right img,
.is-style-bottom-right video {
        background: var(--wp--custom--color--accent);
        padding-left: var(--spacing);
        padding-top: var(--spacing);
}

.is-style-center img,
.is-style-center video {
        background: var(--wp--custom--color--accent);
        padding-left: var(--spacing);
	padding-right: var(--spacing);
        padding-top: var(--spacing);
}

.is-style-transparent .wp-block-button__link {
        background-color: transparent;
	color: var(--wp--preset--color--foreground);
}

.is-style-buttons .page-numbers {
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	height: 36px;
	width: 36px;
	align-items: center;
	justify-content: center;
}

.is-style-buttons.wp-block-post-terms {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}
.is-style-buttons.wp-block-post-terms > a {
	display: inline-block;
	position: relative
}

.is-style-buttons.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

.is-style-buttons .page-numbers,
.is-style-buttons .wp-block-query-pagination-next,
.is-style-buttons .wp-block-query-pagination-previous,
.is-style-buttons.wp-block-post-terms > a {
	background-color:var(--wp--preset--color--background-alt);
	padding: 0.35rem 0.65rem 0.35rem;
	border-radius: 6px;
	text-decoration: none;
	position: relative;
	line-height: var(--wp--custom--typography--line-height--normal);
}

.is-style-buttons .page-numbers::after,
.is-style-buttons .wp-block-query-pagination-next::after,
.is-style-buttons .wp-block-query-pagination-previous::after,
.is-style-buttons.wp-block-post-terms > a::after {
	background-color:rgba(83, 83, 83, 0.1);
	border-radius: 6px;
	bottom: 0;
	content: '';
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 200ms cubic-bezier(0.7,0,0.3,1);
}

.is-style-buttons .page-numbers:hover::after,
.is-style-buttons .wp-block-query-pagination-next:hover::after,
.is-style-buttons .wp-block-query-pagination-previous:hover::after,
.is-style-buttons.wp-block-post-terms > a:hover::after {
	opacity: 1;
}

.wp-block-image.is-style-rounded img {
	border-radius: var(--wp--custom--img-radius, 10px);
}

.wp-block-column.is-style-rounded {
	border-radius: var(--wp--custom--img-radius, 10px);
}

/*
 * Hacks to ensure alternate accent colors display
 * properly on styles that do not support them.
 */
.single-post .has-accent-alt-color {
        color: var(--wp--custom--color--hero-text, #000000);
}

.single-post .has-accent-alt-color a {
        color: var(--wp--custom--color--hero-text, #000000);
}

.single-post .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	color: var(--wp--custom--color--hero-text, #000000);
}

/*
 * Footer.
 */

footer {
	margin-top: 0 !important;
}

/*
 * Custom styles for subscribe form patterns.
 */

.subscribe-form form {
	background-color: #fff;
	border-radius: 80px;
	display: flex;
	align-items: center;
	padding: 0.5rem 0 0.75rem;
}

.subscribe-form input {
	width: 100%;
	border: 0;
	background-color: #fff;
	margin-left: 1.5rem;
	vertical-align: middle;
	line-height: 1;
	padding: 0 8px 0 0;
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--large);
}

.subscribe-form input:focus {
	outline: 0;

}

.subscribe-form input[type="submit"] {
	color: #000;
	border-radius: 100px;
	flex-basis: 15%;
	padding: 0.25rem;
	margin-right: 0.25rem;
	transition: color 100ms cubic-bezier(0.7,0,0.3,1);
}

.subscribe-form input[type="submit"]:hover {
	color: var(--wp--custom--color--accent);
}

/*
 * Utility styles.
 * A couple utilities that are used throughout patterns and parts
 * where core does not support these functionalities.
 */

.my-0 {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.mt-0 {
        margin-top: 0 !important;
}

.mt-0 .wp-block-post-template {
        margin-top: 0 !important;
}

.items-start {
	align-items: flex-start !important;
}

.relative {
        position: relative;
}

@media (min-width: 781px) {
	.hide-on-desktop {
		display: none !important;
	}
}

@media (max-width: 782px) {
	.hide-on-tablet {
		display: none !important;
	}
}


@media (max-width: 599px) {
	.hide-on-mobile {
		display: none !important;
	}
}
}