/*********************************************************************************************************************
 * Theme Name: Improvise
 * Description: A simple, Gutenberg supported WordPress custom theme built by Crack Ajax as a starter theme to quickly develop children themes for clients.
 * Author: Crack-Ajax Web Technologies
 * Author URI: http://improvise.com
 * Text Domain: improvise
 * Version: 5.12
 ********************************************************************************************************************/

/****************************************** WordPress User Edit Link ************************************************/

.edit-this-link {
    display: none;
    width: 100%;
}

/*********************************************************************************************************************
 *********** General Purpose Classes
 *
 * @class .no-margin-top			| Sets margin-top to 0 !important
 * @class .no-margin-bottom			| Sets margin-bottom to 0 !important
 * @class .restricted-width			| Sets the user defined restricted width to a block
 * @class .portrait-image			| Centers image and limits width to 450px
 * 
 *********** Media Text Block Custom Classes ( styling for plugin /inc/gutenberg//blocks/block-media-text.js )
 *
 * @class .media-text-cta 			| Create polished CTA for the Media-Text block
 * @class .media-padded				| Media image has padding around the outside edges, good for background color
 * @class .content-flush			| If no background-color & no alignfull, removes outside edge padding of content
 *
 *********** Cover Block Custom Classes ( styling for plugin /inc/gutenberg//blocks/block-cover.js )
 *
 * @class .is-style-cover-cta		| Cover Block with Resticted Width for CTA setup
 * @class .a-left					| Align the CTA to the left
 * @class .a-right					| Align the CTA to the right
 *
 ********************************************************************************************************************/

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

.no-margin-bottom {
	margin-bottom: 0!important;
}

.restricted-width,
/* Block editor: core's root-container layout rule
   (.block-editor-block-list__layout.is-root-container > :where(...) { max-width }) is (0,2,0)
   and outranks the plain class there; the front end has no such rule. */
body .is-root-container > .restricted-width {
	max-width: var(--restricted-width);
	margin-left: auto;
    margin-right: auto;
}

.portrait-image {
	margin: 0 auto;
	max-width: 450px;
}

/****************************************** Text and Anchor Tag Settings ******************************************/
*, *::after, *::before {
	box-sizing: border-box;
}

h1, h2, h3, h4, p, a, span, div, label {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
}

h1 {
	color: var(--color-dark-text);
	font-family: var(--font-primary-heading);
	margin-bottom: var(--m-spacing);
	font-size: 2rem;
}

h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.8rem; }

h2, h3, h4, h5, h6 {
	color: var(--color-dark-text);
	font-family: var(--font-secondary-heading);
	margin-bottom: var(--s-spacing);
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	line-height: 1.2;
}

h1.has-background,
h2.has-background,
h3.has-background,
h4.has-background,
h5.has-background,
h6.has-background {
	padding: var(--l-spacing);
	@media (max-width: 992px) { padding: var(--m-spacing); }
	@media (max-width: 480px) { padding: var(--s-spacing); }
}

h2[id]:not(.block-editor-rich-text__editable):before {
	display: block;
    content: " ";
    margin-top: calc( calc( var(--s-spacing) + var(--xl-spacing) ) * -1 );
    height: calc( var(--s-spacing) + var(--xl-spacing) );
    visibility: hidden;
    pointer-events: none;
}

p, li, pre, .wp-block-verse {
	color: var(--color-light-text);
	font-family: var(--font-primary);
	font-size: var(--fontsize-base);
	line-height: 1.6;
}

p, pre, .wp-block-verse {
	margin-bottom: var(--s-spacing);
}

sup {
	font-size: 0.5em;
    font-weight: bold;
}

/* body:where(.editor-styles-wrapper) is the block editor iframe's body, which has no
   <article>: same specificity as `article`, so the editor matches the front end. */
article li,
body:where(.editor-styles-wrapper) li {
	margin: 10px 0;
}

.wp-block-verse {
	font-style: italic;
    font-weight: 600;
}

a {
	font-weight: 500;
	text-decoration: none;
	&:link { color: var(--color-light-text); }
	&:visited { color: var(--color-dark-text); }
	&:hover, &:active { color: var(--color-accent); }
}

/* A heading that's entirely wrapped in a link (e.g. a card title that's
   also its "See the site" link) should read as a heading, not as body
   copy — but without this, its color is an accident of the visitor's
   own browser history: a:link/a:visited above target the <a> itself,
   giving --color-light-text (white, invisible on a white card) if
   they've never visited that URL, --color-dark-text if they have.
   Scoped to real headings only — body-copy links still use the normal
   a:link/a:visited treatment above.
   !important is required: a:link's pseudo-class outweighs this rule's
   two bare elements in raw CSS specificity ((0,1,1) vs (0,0,2) — a
   pseudo-class counts the same as a real class, ranking above element
   count regardless of source order), so a plain declaration here
   cannot reliably win even though it reads as "more specific". */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit !important; }

/* ...which also beats a:hover above, so heading links never changed colour on
   hover. Give them the accent back, except where the colour was chosen on
   purpose and stayed put on hover before: a link colour set on the heading in
   the editor (.has-link-color), a block with its own text colour around it,
   and the blog/archive card titles (white on the card). */
:is(h1, h2, h3, h4, h5, h6):not(.has-link-color) a:is(:hover, :active):not(:is(.has-text-color:not(h1, h2, h3, h4, h5, h6), main.blog:not(.search) article) *) {
	color: var(--color-accent) !important;
}

article a,
body:where(.editor-styles-wrapper) a {
	text-decoration: underline;
}

.wp-block-group.has-text-color *,
.wp-block-media-text.has-text-color * {
	color: inherit;
}

@media (max-width: 540px) {
	h1 { font-size: 2rem; }
	h2 { font-size: 1.625rem; }
	h3 { font-size: 1.375rem; }
	h4 { font-size: 1.125rem; }
	h5 { font-size: 1rem; }
	h6 { font-size: 1rem; }
}

/******************************************* WordPress Alignment Settings *******************************************/

.alignright {
	float: right;
	max-width: 100%;
}

.alignleft {
	float: left;
	max-width: 100%;
}

.aligncenter {
    display: block;
    margin: 0 auto;
	max-width: 100%;
}

.alignwide {
	width: calc(100% + calc(var(--xl-spacing) * 2));
	max-width: var(--wide-width);
	margin-left: calc(var(--xl-spacing) * -1);
	@media (max-width: 1200px) { width: calc(100% + calc(var(--l-spacing) * 2)); margin-left: calc(var(--l-spacing) * -1); }
	@media (max-width: 992px) { width: calc(100% + calc(var(--s-spacing) * 2)); margin-left: calc(var(--s-spacing) * -1); }
	@media (max-width: 480px) { width: calc(100% + calc(calc(var(--s-spacing) / 2) * 2)); margin-left: calc(calc(var(--s-spacing) / 2) * -1); }
}

.alignfull {
	margin-left: calc( -100vw / 2 + 100% / 2 );
	margin-right: calc( -100vw / 2 + 100% / 2 );
	max-width: 100vw !important;
	width: 100vw !important;
}

img.alignleft {
	margin-top: var(--s-spacing);
	margin-right: var(--s-spacing);
	margin-bottom: var(--s-spacing);
}

img.center {
	margin-top: var(--s-spacing);
	margin-bottom: var(--s-spacing);
}

img.alignright {
	margin-top: var(--s-spacing);
	margin-left: var(--s-spacing);
	margin-bottom: var(--s-spacing);
}

.alignfull .alignfull {
	@media (max-width: 1200px) { margin-left: 0; margin-right: 0; max-width: 100% !important; }
}

/* Root-padding-aware alignments (theme.json) add .has-global-padding to constrained containers, and core's
   .has-global-padding > .alignfull rule (root padding 0) zeroes the bleed margins above. Legacy content built
   on the 100vw bleed then sits shifted right by the container offset, e.g. an alignfull heading inside a
   Cover block. Restore the bleed, keeping the nested-alignfull reset at <=1200px. */
.improvise-legacy-layout {
	.has-global-padding > .alignfull {
		margin-left: calc( -100vw / 2 + 100% / 2 );
		margin-right: calc( -100vw / 2 + 100% / 2 );
	}
	.alignfull .has-global-padding > .alignfull {
		@media (max-width: 1200px) { margin-left: 0; margin-right: 0; }
	}

	/* Groups saved with a constrained layout now render .is-layout-constrained, and core's
	   margin: auto !important on its children cancels .alignwide's negative margin above. An
	   alignwide child is wider than the group, so auto margins resolve to 0 on the left and it
	   overflows to the right (1.5.13 never output the layout class). Centre it explicitly:
	   (container - rendered width) / 2, which equals the old negative margin until the width
	   hits --wide-width. Columns stop bleeding at <=1200px (max-width: 100% in the Columns
	   section), so their bleed is 0 there. Full-width background groups are skipped: their
	   alignwide children are sized to 100% and centred by their own rule above 1200px.
	   Pullquotes size themselves with margins, not this width, and are left alone. */
	:not(.wp-block-group.alignfull.has-background).is-layout-constrained > .alignwide:not(.wp-block-pullquote) {
		--improvise-wide-bleed: var(--xl-spacing);
		@media (max-width: 1200px) { --improvise-wide-bleed: var(--l-spacing); }
		@media (max-width: 992px) { --improvise-wide-bleed: var(--s-spacing); }
		@media (max-width: 480px) { --improvise-wide-bleed: calc(var(--s-spacing) / 2); }
		&.wp-block-columns { @media (max-width: 1200px) { --improvise-wide-bleed: 0px; } }
		margin-left: calc((100% - min(100% + var(--improvise-wide-bleed) * 2, var(--wide-width))) / 2) !important;
		margin-right: calc((100% - min(100% + var(--improvise-wide-bleed) * 2, var(--wide-width))) / 2) !important;
	}
}

.wp-block-image {
	/* Keep wrapping text off floated images. Covers the old markup (alignment
	   class on a nested <figure>) and the current one (on .wp-block-image). */
	&.alignleft, .alignleft { padding-right: var(--s-spacing); }
	&.alignright, .alignright { padding-left: var(--s-spacing); }
	/* ...and that padding is the only space on the text side: core gives the old nested
	   figure a 1em margin there too (.wp-block-image .alignleft { margin: .5em 1em .5em 0 }).
	   The current markup already has none. */
	.alignleft { margin-right: 0; }
	.alignright { margin-left: 0; }
	/* Core shows a floated figure as a table and its caption as a table-caption, which spans
	   the figure's padding: pad the caption the same way so it lines up with the image. */
	&.alignleft > figcaption, .alignleft > figcaption { padding-right: var(--s-spacing); }
	&.alignright > figcaption, .alignright > figcaption { padding-left: var(--s-spacing); }
	/* At <=480px the figure is un-floated with display: block (below). A table-caption then
	   gets an anonymous table of its own, shrink-wrapped to its longest word: one word per line. */
	&.alignleft > figcaption, .alignleft > figcaption, &.alignright > figcaption, .alignright > figcaption {
		@media (max-width: 480px) { display: block; padding-left: 0; padding-right: 0; }
	}

	.alignright { @media (max-width: 480px) { display: block; margin-left: 0; padding-left: 0; float: none; width: 100%; } }
	.alignleft { @media (max-width: 480px) { display: block; margin-right: 0; padding-right: 0; float: none; width: 100%; } }

	/* Current WP markup puts the alignment class on the <figure.wp-block-image>
	   itself instead of on a nested <figure>, so the descendant selectors above
	   no longer match and the image stayed floated beside the following heading
	   on phones. */
	&.alignright { @media (max-width: 480px) { display: block; margin-left: 0; padding-left: 0; float: none; width: 100%; } }
	&.alignleft { @media (max-width: 480px) { display: block; margin-right: 0; padding-right: 0; float: none; width: 100%; } }
}

.wp-block-group__inner-container .alignwide {
	@media (max-width: 480px) { max-width: 100%; margin-left: 0; }
}

.no-margin-bottom-mobile {
	@media (max-width: 480px) { margin-bottom: 0; }
}

.inherit-color p, .inherit-color a, .inherit-color li, .inherit-color li::before {
	color: inherit!important;
}

/****************************************** Image & Video Default Settings *******************************************/

.wp-block-image figure {
	margin-bottom: 1em!important;
	@media (max-width: 540px) { display: block; }
}

.wp-block-image .aligncenter>figcaption {
	text-align: center;
}

video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
	/*-webkit-appearance: none;    Try this if still don't work */
}

iframe {
	max-width: 100%;
	width: 100%;
}

figcaption {
	font-size: 0.8rem;
	font-family: var(--font-accent);
}

/********************************************* Blockquotes & Pullquotes **********************************************/

caption,
blockquote,
blockquote p {
	font-family: var(--font-accent);
}

blockquote {
	position: relative;
	border: none;
	max-width: var(--restricted-width);
	quotes: "\201C""\201D""\2018""\2019";
	@media (max-width: 480px) { margin: 1em 0; }
	&.is-style-default {
		margin: calc(var(--l-spacing) + var(--m-spacing)) auto;
		@media (max-width: 992px) { max-width: calc(100% - calc(var(--m-spacing) * 2)); }
		@media (max-width: 480px) { margin: calc(var(--m-spacing) + var(--m-spacing)) auto; }
		&:before, &:after { content: ''; border: 5px solid var(--color-accent); width: calc(100% + calc(var(--m-spacing) * 2)); position: absolute; left: calc(var(--m-spacing) * -1); height: var(--s-spacing); }
		&:before { top: calc(var(--m-spacing) * -1); border-bottom: 0; }
		&:after { border-top: 0; bottom: calc(var(--m-spacing) * -1); }
	}
	cite { font-family: var(--font-primary); font-size: 0.8rem; }
	a, cite { color: var(--color-accent) !important; text-decoration: none; }
	a:hover { text-decoration: underline; }
}

.wp-block-quote p:before,
.wp-block-quote p:after,
.wp-block-pullquote blockquote:before,
.wp-block-pullquote blockquote:after {
    color: var(--color-accent);
    content: open-quote;
    font-size: 3.5em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

.wp-block-quote p:after,
.wp-block-pullquote blockquote:after {
    content: close-quote;
    margin-right: 0;
}

.wp-block-quote.is-style-large cite {
	display: block;
}

.wp-block-quote,
.wp-block-quote.is-style-large {
	margin: var(--l-spacing) auto;
	@media (max-width: 480px) { margin: var(--m-spacing) auto; }
}

.wp-block-pullquote {
	position: relative;
	margin: var(--l-spacing) auto;
	padding: 0;
	max-width: var(--restricted-width);

	blockquote p { display: block; font-size: 1.5rem; }
	blockquote:after { position: absolute; opacity: 0; }

	&:not(.is-style-solid-color) {
		border-top: 3px solid var(--color-dark-text);
		border-bottom: 3px solid var(--color-dark-text);
		padding: var(--xl-spacing) 0 var(--m-spacing);
		blockquote:before {
			content: open-quote;
			quotes: "\201C""\201D""\2018""\2019";
			font-size: 10rem;
			position: absolute;
			left: 0;
			width: 100%;
			@media (max-width: 480px) { left: 0; transform: translate(-5%); }
		}
	}

	&.alignright, &.alignleft { margin-top: var(--m-spacing); margin-bottom: var(--m-spacing); max-width: var(--restricted-width); }
	&.alignright { margin-left: var(--m-spacing); }
	&.alignleft { margin-right: var(--m-spacing); }

	&.alignwide {
		margin: var(--l-spacing) calc(var(--xl-spacing) * -1);
		max-width: none;
		@media (max-width: 1200px) { margin: var(--l-spacing) auto; margin-left: calc(var(--l-spacing) * -1); }
		@media (max-width: 992px) { margin: var(--l-spacing) auto; margin-left: calc(var(--s-spacing) * -1); }
		@media (max-width: 480px) { margin: var(--m-spacing) auto; margin-left: calc(calc(var(--s-spacing) / 2) * -1); }
		&:not(.is-style-solid-color) blockquote {
			margin: 1em auto;
			@media (max-width: 480px) { padding: 0 var(--s-spacing); }
		}
	}

	&.alignfull {
		margin: var(--l-spacing) calc( -100vw / 2 + 100% / 2 );
		max-width: none;
		@media (max-width: 480px) { margin: var(--m-spacing) auto; margin-left: calc(calc(var(--s-spacing) / 2) * -1); }
		&:not(.is-style-solid-color) blockquote {
			max-width: var(--restricted-width);
			margin: 0 auto;
			@media (max-width: 480px) { padding: 0 var(--s-spacing); }
		}
	}

	&.is-style-solid-color {
		blockquote {
			position: relative;
			background-color: #eee;
			padding: var(--l-spacing);
			max-width: var(--restricted-width);
			margin: 0;
			@media (max-width: 768px) { padding: var(--s-spacing); }
			&:before {
				font-size: 8em;
				color: var(--color-accent);
				position: absolute;
				left: var(--m-spacing);
				top: var(--xl-spacing);
				@media (max-width: 768px) { left: 0; top: calc(var(--l-spacing) + var(--s-spacing)); }
			}
			p {
				padding-left: var(--xl-spacing);
				font-size: 1.3rem;
				text-align: left;
				margin-bottom: var(--s-spacing);
				&:last-child { margin-bottom: 0; }
				@media (max-width: 768px) { padding-left: var(--l-spacing); }
			}
		}
		&.alignwide blockquote { max-width: none; }
		&.alignfull blockquote { margin: 0; padding: var(--xl-spacing); max-width: none; @media (max-width: 992px) { padding: var(--l-spacing); } @media (max-width: 768px) { padding: var(--s-spacing); } }
		cite, .wp-block-pullquote__citation { display: block; text-align: right; }
	}
}

/********************************************** Verse Block Styles ***********************************************/
.wp-block-verse.has-background {
	padding: var(--s-spacing);
}

/********************************************** Block Separator Styles ***********************************************/

/* core/separator's block.json now only supports a "Background" color
   control (text: false, no border support) — the editor's color panel
   sets background-color/background, not border-color. WordPress's own
   global-styles CSS already emits a !important background rule per
   palette slug and per registered gradient (.has-primary-background-
   color, .has-brand-colors-bar-gradient-background, etc.), generated
   from the same ACF colors this theme's vars come from — so the old
   per-slug border-color mappings below were both the wrong property and
   redundant with that. The has-X-color (non-background) variants below
   them were already dead: this block hasn't had a text-color control
   since the block.json update, and a DB check confirmed no published
   content here still uses those classes. */
.wp-block-separator {
	background-color: var(--color-accent);
	height: 2px;
	border: none;
	margin: var(--l-spacing) auto;

	&:not(.is-style-dots):not(.is-style-wide),
	&.is-style-default { max-width: calc(var(--xl-spacing) * 2); }

	&.is-style-dots {
		margin: var(--m-spacing) auto;
		&:before {
			font-size: 2.5rem;
			color: var(--color-accent);
			@media (max-width: 480px) { letter-spacing: 1em; padding-left: 1em; }
		}
	}
}

/****************************************** Gutenberg Color Palette Styles *******************************************/

:root .has-white-background-color { background-color: var(--color-white); }
.has-white-color { color: var(--color-white); }
:root .has-black-background-color { background-color: var(--color-black); }
.has-black-color { color: var(--color-black); }
:root .has-primary-background-color { background-color: var(--color-primary); }
.has-primary-color { color: var(--color-primary); }
:root .has-secondary-background-color { background-color: var(--color-secondary); }
.has-secondary-color { color: var(--color-secondary); }
:root .has-accent-background-color { background-color: var(--color-accent); }
.has-accent-color { color: var(--color-accent); }
:root .has-light-text-background-color { background-color: var(--color-light-text); }
.has-light-text-color { color: var(--color-light-text); }
:root .has-dark-text-background-color { background-color: var(--color-dark-text); }
.has-dark-text-color { color: var(--color-dark-text); }

/********************************************** Gutenberg Button Styles ***********************************************/

.wp-block-buttons,
.wp-block-buttons.aligncenter {
	margin: var(--l-spacing) auto;
	@media (max-width: 480px) { margin: var(--s-spacing) auto; }
}

.button:not(.read-more),
.wp-block-button__link,
.wp-block-button__link.add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.alt.disabled {
	display: inline-block;
	border: 2px solid white;
	border-radius: 0;
	background-color: var(--color-primary);
	color: white;
	font-family: var(--font-primary-heading);
	padding: calc(var(--s-spacing) / 2 ) var(--m-spacing);
	text-decoration: none;
	transition: none;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border-color: var(--color-primary);
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
	display: block;
	padding: 1em;
}

.button:not(.read-more),
.wp-block-button__link {
	@media (max-width: 480px) { padding: 10px 15px; }
}

.button:not(.read-more):hover,
.wp-block-button__link:hover,
.wp-block-button__link.add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.disabled:hover,
.woocommerce #respond input#submit:disabled:hover,
.woocommerce #respond input#submit:disabled[disabled]:hover,
.woocommerce a.button.disabled:hover,
.woocommerce a.button:disabled:hover,
.woocommerce a.button:disabled[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled[disabled]:hover,
#add_payment_method .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	border: 2px solid white;
	background-color: var(--color-accent);
	color: white;
	text-decoration: none;
	transition: all .2s ease-in;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.disabled:hover,
.woocommerce #respond input#submit:disabled:hover,
.woocommerce #respond input#submit:disabled[disabled]:hover,
.woocommerce a.button.disabled:hover,
.woocommerce a.button:disabled:hover,
.woocommerce a.button:disabled[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled[disabled]:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	border-color: var(--color-accent);
}

.is-style-outline .wp-block-button__link {
	border: 2px solid;
}

/* Fill buttons with no text colour set: Fill is the editor's default style and saves no
   class, so that's any button not using Outline. The editor shows them with white text and
   no border; match that on the front end:
   - white text: `color: white` above loses to a:link (a pseudo-class counts as a class), so
     these rendered in the grey link colour;
   - transparent border: keeps the 2px box (same size as Outline) without a visible line;
   - hover, with a palette background: flips like the colour pairs below, to a white
     background with the text and border in the button's colour (--button-fill). A white
     button gets dark text instead (white on white), and flips to dark. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color) {
	color: var(--color-white);
	border-color: transparent;
	&:hover { color: var(--color-white); border-color: transparent; }

	&.has-black-background-color      { --button-fill: var(--wp--preset--color--black); }
	&.has-primary-background-color    { --button-fill: var(--wp--preset--color--primary); }
	&.has-secondary-background-color  { --button-fill: var(--wp--preset--color--secondary); }
	&.has-tertiary-background-color   { --button-fill: var(--wp--preset--color--tertiary); }
	&.has-quaternary-background-color { --button-fill: var(--wp--preset--color--quaternary); }
	&.has-accent-background-color     { --button-fill: var(--wp--preset--color--accent); }
	&.has-dark-text-background-color  { --button-fill: var(--wp--preset--color--dark-text); }
	&.has-light-text-background-color { --button-fill: var(--wp--preset--color--light-text); }
	&:is(.has-black-background-color, .has-primary-background-color, .has-secondary-background-color,
		.has-tertiary-background-color, .has-quaternary-background-color, .has-accent-background-color,
		.has-dark-text-background-color, .has-light-text-background-color):hover {
		background-color: var(--color-white) !important; /* the preset background classes are !important */
		color: var(--button-fill);
		border-color: var(--button-fill);
	}

	&.has-white-background-color {
		color: var(--color-dark-text);
		&:hover {
			background-color: var(--color-dark-text) !important;
			color: var(--color-white);
			border-color: var(--color-dark-text);
		}
	}
}

/* Outline buttons with colours left unset: text and border default to --color-light-text
   (otherwise a:link's colour, or core's currentColor in the editor), the background to
   --color-accent (core makes it transparent). Hover keeps the button hover above. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(:hover) {
	&:not(.has-text-color) {
		color: var(--color-light-text);
		border-color: var(--color-light-text);
	}
	&:not(.has-background) { background-color: var(--color-accent); }
}

/** Button Color Combinations */
.wp-block-button__link {
	/** Black & White */
	&.has-white-color.has-black-background-color,
	&.has-black-color.has-white-background-color:hover {
		color: var(--color-white) !important;
		border-color: var(--color-white) !important;
		background-color: var(--color-black) !important;
	}
	&.has-black-color.has-white-background-color,
	&.has-white-color.has-black-background-color:hover {
		color: var(--color-black) !important;
		border-color: var(--color-black) !important;
		background-color: var(--color-white) !important;
	}

	/** Primary & White */
	&.has-white-color.has-primary-background-color,
	&.has-primary-color.has-white-background-color:hover {
		color: var(--color-white) !important;
		border-color: var(--color-white) !important;
		background-color: var(--color-primary) !important;
	}
	&.has-primary-color.has-white-background-color,
	&.has-white-color.has-primary-background-color:hover {
		color: var(--color-primary) !important;
		border-color: var(--color-primary) !important;
		background-color: var(--color-white) !important;
	}
	/** Secondary & White */
	&.has-white-color.has-secondary-background-color,
	&.has-secondary-color.has-white-background-color:hover {
		color: var(--color-white) !important;
		border-color: var(--color-white) !important;
		background-color: var(--color-secondary) !important;
	}
	&.has-secondary-color.has-white-background-color,
	&.has-white-color.has-secondary-background-color:hover {
		color: var(--color-secondary) !important;
		border-color: var(--color-secondary) !important;
		background-color: var(--color-white) !important;
	}

	/** Accent & White */
	&.has-white-color.has-accent-background-color,
	&.has-accent-color.has-white-background-color:hover {
		color: var(--color-white) !important;
		border-color: var(--color-white) !important;
		background-color: var(--color-accent) !important;
	}
	&.has-accent-color.has-white-background-color,
	&.has-white-color.has-accent-background-color:hover {
		color: var(--color-accent) !important;
		border-color: var(--color-accent) !important;
		background-color: var(--color-white) !important;
	}
	/** Light Text & White */
	&.has-white-color.has-light-text-background-color,
	&.has-light-text-color.has-white-background-color:hover {
		color: var(--color-white) !important;
		border-color: var(--color-white) !important;
		background-color: var(--color-light-text) !important;
	}
	&.has-light-text-color.has-white-background-color,
	&.has-white-color.has-light-text-background-color:hover {
		color: var(--color-light-text) !important;
		border-color: var(--color-light-text) !important;
		background-color: var(--color-white) !important;
	}
	/** Dark Text & White */
	&.has-white-color.has-dark-text-background-color,
	&.has-dark-text-color.has-white-background-color:hover {
		color: var(--color-white) !important;
		border-color: var(--color-white) !important;
		background-color: var(--color-dark-text) !important;
	}
	&.has-dark-text-color.has-white-background-color,
	&.has-white-color.has-dark-text-background-color:hover {
		color: var(--color-dark-text) !important;
		border-color: var(--color-dark-text) !important;
		background-color: var(--color-white) !important;
	}
	/** Primary & Black */
	&.has-black-color.has-primary-background-color,
	&.has-primary-color.has-black-background-color:hover {
		color: var(--color-black) !important;
		border-color: var(--color-black) !important;
		background-color: var(--color-primary) !important;
	}
	&.has-primary-color.has-black-background-color,
	&.has-black-color.has-primary-background-color:hover {
		color: var(--color-primary) !important;
		border-color: var(--color-primary) !important;
		background-color: var(--color-black) !important;
	}
	/** Secondary & Black */
	&.has-black-color.has-secondary-background-color,
	&.has-secondary-color.has-black-background-color:hover {
		color: var(--color-black) !important;
		border-color: var(--color-black) !important;
		background-color: var(--color-secondary) !important;
	}
	&.has-secondary-color.has-black-background-color,
	&.has-black-color.has-secondary-background-color:hover {
		color: var(--color-secondary) !important;
		border-color: var(--color-secondary) !important;
		background-color: var(--color-black) !important;
	}
	/** Accent & Black */
	&.has-black-color.has-accent-background-color,
	&.has-accent-color.has-black-background-color:hover {
		color: var(--color-black) !important;
		border-color: var(--color-black) !important;
		background-color: var(--color-accent) !important;
	}
	&.has-accent-color.has-black-background-color,
	&.has-black-color.has-accent-background-color:hover {
		color: var(--color-accent) !important;
		border-color: var(--color-accent) !important;
		background-color: var(--color-black) !important;
	}
	/** Light Text & Black */
	&.has-black-color.has-light-text-background-color,
	&.has-light-text-color.has-black-background-color:hover {
		color: var(--color-black) !important;
		border-color: var(--color-black) !important;
		background-color: var(--color-light-text) !important;
	}
	&.has-light-text-color.has-black-background-color,
	&.has-black-color.has-light-text-background-color:hover {
		color: var(--color-light-text) !important;
		border-color: var(--color-light-text) !important;
		background-color: var(--color-black) !important;
	}
	/** Dark Text & Black */
	&.has-black-color.has-dark-text-background-color,
	&.has-dark-text-color.has-black-background-color:hover {
		color: var(--color-black) !important;
		border-color: var(--color-black) !important;
		background-color: var(--color-dark-text) !important;
	}
	&.has-dark-text-color.has-black-background-color,
	&.has-black-color.has-dark-text-background-color:hover {
		color: var(--color-dark-text) !important;
		border-color: var(--color-dark-text) !important;
		background-color: var(--color-black) !important;
	}
	/** Primary & Secondary */
	&.has-secondary-color.has-primary-background-color,
	&.has-primary-color.has-secondary-background-color:hover {
		color: var(--color-secondary) !important;
		border-color: var(--color-secondary) !important;
		background-color: var(--color-primary) !important;
	}
	&.has-primary-color.has-secondary-background-color,
	&.has-secondary-color.has-primary-background-color:hover {
		color: var(--color-primary) !important;
		border-color: var(--color-primary) !important;
		background-color: var(--color-secondary) !important;
	}
	/** Primary & Accent */
	&.has-accent-color.has-primary-background-color,
	&.has-primary-color.has-accent-background-color:hover {
		color: var(--color-accent) !important;
		border-color: var(--color-accent) !important;
		background-color: var(--color-primary) !important;
	}
	&.has-primary-color.has-accent-background-color,
	&.has-accent-color.has-primary-background-color:hover {
		color: var(--color-primary) !important;
		border-color: var(--color-primary) !important;
		background-color: var(--color-accent) !important;
	}
	/** Primary & Light Text */
	&.has-light-text-color.has-primary-background-color,
	&.has-primary-color.has-light-text-background-color:hover {
		color: var(--color-light-text) !important;
		border-color: var(--color-light-text) !important;
		background-color: var(--color-primary) !important;
	}
	&.has-primary-color.has-light-text-background-color,
	&.has-light-text-color.has-primary-background-color:hover {
		color: var(--color-primary) !important;
		border-color: var(--color-primary) !important;
		background-color: var(--color-light-text) !important;
	}
	/** Primary & Dark Text */
	&.has-dark-text-color.has-primary-background-color,
	&.has-primary-color.has-dark-text-background-color:hover {
		color: var(--color-dark-text) !important;
		border-color: var(--color-dark-text) !important;
		background-color: var(--color-primary) !important;
	}
	&.has-primary-color.has-dark-text-background-color,
	&.has-dark-text-color.has-primary-background-color:hover {
		color: var(--color-primary) !important;
		border-color: var(--color-primary) !important;
		background-color: var(--color-dark-text) !important;
	}
	/** Secondary & Accent */
	&.has-accent-color.has-secondary-background-color,
	&.has-secondary-color.has-accent-background-color:hover {
		color: var(--color-accent) !important;
		border-color: var(--color-accent) !important;
		background-color: var(--color-secondary) !important;
	}
	&.has-secondary-color.has-accent-background-color,
	&.has-accent-color.has-secondary-background-color:hover {
		color: var(--color-secondary) !important;
		border-color: var(--color-secondary) !important;
		background-color: var(--color-accent) !important;
	}
	/** Secondary & Light Text */
	&.has-light-text-color.has-secondary-background-color,
	&.has-secondary-color.has-light-text-background-color:hover {
		color: var(--color-light-text) !important;
		border-color: var(--color-light-text) !important;
		background-color: var(--color-secondary) !important;
	}
	&.has-secondary-color.has-light-text-background-color,
	&.has-light-text-color.has-secondary-background-color:hover {
		color: var(--color-secondary) !important;
		border-color: var(--color-secondary) !important;
		background-color: var(--color-light-text) !important;
	}
	/** Secondary & Dark Text */
	&.has-dark-text-color.has-secondary-background-color,
	&.has-secondary-color.has-dark-text-background-color:hover {
		color: var(--color-dark-text) !important;
		border-color: var(--color-dark-text) !important;
		background-color: var(--color-secondary) !important;
	}
	&.has-secondary-color.has-dark-text-background-color,
	&.has-dark-text-color.has-secondary-background-color:hover {
		color: var(--color-secondary) !important;
		border-color: var(--color-secondary) !important;
		background-color: var(--color-dark-text) !important;
	}
	/** Accent & Light Text */
	&.has-light-text-color.has-accent-background-color,
	&.has-accent-color.has-light-text-background-color:hover {
		color: var(--color-light-text) !important;
		border-color: var(--color-light-text) !important;
		background-color: var(--color-accent) !important;
	}
	&.has-accent-color.has-light-text-background-color,
	&.has-light-text-color.has-accent-background-color:hover {
		color: var(--color-accent) !important;
		border-color: var(--color-accent) !important;
		background-color: var(--color-light-text) !important;
	}
	/** Accent & Dark Text */
	&.has-dark-text-color.has-accent-background-color,
	&.has-accent-color.has-dark-text-background-color:hover {
		color: var(--color-dark-text) !important;
		border-color: var(--color-dark-text) !important;
		background-color: var(--color-accent) !important;
	}
	&.has-accent-color.has-dark-text-background-color,
	&.has-dark-text-color.has-accent-background-color:hover {
		color: var(--color-accent) !important;
		border-color: var(--color-accent) !important;
		background-color: var(--color-dark-text) !important;
	}
	/** Light Text & Dark Text */
	&.has-dark-text-color.has-light-text-background-color,
	&.has-light-text-color.has-dark-text-background-color:hover {
		color: var(--color-dark-text) !important;
		border-color: var(--color-dark-text) !important;
		background-color: var(--color-light-text) !important;
	}
	&.has-light-text-color.has-dark-text-background-color,
	&.has-dark-text-color.has-light-text-background-color:hover {
		color: var(--color-light-text) !important;
		border-color: var(--color-light-text) !important;
		background-color: var(--color-dark-text) !important;
	}
}

/** is-style-fill: border color matches the active background */
.is-style-fill .wp-block-button__link {
	/** black background → black border */
	&.has-white-color.has-black-background-color,
	&.has-black-color.has-white-background-color:hover,
	&.has-primary-color.has-black-background-color,
	&.has-black-color.has-primary-background-color:hover,
	&.has-secondary-color.has-black-background-color,
	&.has-black-color.has-secondary-background-color:hover,
	&.has-accent-color.has-black-background-color,
	&.has-black-color.has-accent-background-color:hover,
	&.has-light-text-color.has-black-background-color,
	&.has-black-color.has-light-text-background-color:hover,
	&.has-dark-text-color.has-black-background-color,
	&.has-black-color.has-dark-text-background-color:hover { border-color: var(--color-black) !important; }
	/** white background → white border */
	&.has-black-color.has-white-background-color,
	&.has-white-color.has-black-background-color:hover,
	&.has-primary-color.has-white-background-color,
	&.has-white-color.has-primary-background-color:hover,
	&.has-secondary-color.has-white-background-color,
	&.has-white-color.has-secondary-background-color:hover,
	&.has-accent-color.has-white-background-color,
	&.has-white-color.has-accent-background-color:hover,
	&.has-light-text-color.has-white-background-color,
	&.has-white-color.has-light-text-background-color:hover,
	&.has-dark-text-color.has-white-background-color,
	&.has-white-color.has-dark-text-background-color:hover { border-color: var(--color-white) !important; }
	/** primary background → primary border */
	&.has-white-color.has-primary-background-color,
	&.has-primary-color.has-white-background-color:hover,
	&.has-black-color.has-primary-background-color,
	&.has-primary-color.has-black-background-color:hover,
	&.has-secondary-color.has-primary-background-color,
	&.has-primary-color.has-secondary-background-color:hover,
	&.has-accent-color.has-primary-background-color,
	&.has-primary-color.has-accent-background-color:hover,
	&.has-light-text-color.has-primary-background-color,
	&.has-primary-color.has-light-text-background-color:hover,
	&.has-dark-text-color.has-primary-background-color,
	&.has-primary-color.has-dark-text-background-color:hover { border-color: var(--color-primary) !important; }
	/** secondary background → secondary border */
	&.has-white-color.has-secondary-background-color,
	&.has-secondary-color.has-white-background-color:hover,
	&.has-black-color.has-secondary-background-color,
	&.has-secondary-color.has-black-background-color:hover,
	&.has-primary-color.has-secondary-background-color,
	&.has-secondary-color.has-primary-background-color:hover,
	&.has-accent-color.has-secondary-background-color,
	&.has-secondary-color.has-accent-background-color:hover,
	&.has-light-text-color.has-secondary-background-color,
	&.has-secondary-color.has-light-text-background-color:hover,
	&.has-dark-text-color.has-secondary-background-color,
	&.has-secondary-color.has-dark-text-background-color:hover { border-color: var(--color-secondary) !important; }
	/** accent background → accent border */
	&.has-white-color.has-accent-background-color,
	&.has-accent-color.has-white-background-color:hover,
	&.has-black-color.has-accent-background-color,
	&.has-accent-color.has-black-background-color:hover,
	&.has-primary-color.has-accent-background-color,
	&.has-accent-color.has-primary-background-color:hover,
	&.has-secondary-color.has-accent-background-color,
	&.has-accent-color.has-secondary-background-color:hover,
	&.has-light-text-color.has-accent-background-color,
	&.has-accent-color.has-light-text-background-color:hover,
	&.has-dark-text-color.has-accent-background-color,
	&.has-accent-color.has-dark-text-background-color:hover { border-color: var(--color-accent) !important; }
	/** light-text background → light-text border */
	&.has-white-color.has-light-text-background-color,
	&.has-light-text-color.has-white-background-color:hover,
	&.has-black-color.has-light-text-background-color,
	&.has-light-text-color.has-black-background-color:hover,
	&.has-primary-color.has-light-text-background-color,
	&.has-light-text-color.has-primary-background-color:hover,
	&.has-secondary-color.has-light-text-background-color,
	&.has-light-text-color.has-secondary-background-color:hover,
	&.has-accent-color.has-light-text-background-color,
	&.has-light-text-color.has-accent-background-color:hover,
	&.has-dark-text-color.has-light-text-background-color,
	&.has-light-text-color.has-dark-text-background-color:hover { border-color: var(--color-light-text) !important; }
	/** dark-text background → dark-text border */
	&.has-white-color.has-dark-text-background-color,
	&.has-dark-text-color.has-white-background-color:hover,
	&.has-black-color.has-dark-text-background-color,
	&.has-dark-text-color.has-black-background-color:hover,
	&.has-primary-color.has-dark-text-background-color,
	&.has-dark-text-color.has-primary-background-color:hover,
	&.has-secondary-color.has-dark-text-background-color,
	&.has-dark-text-color.has-secondary-background-color:hover,
	&.has-accent-color.has-dark-text-background-color,
	&.has-dark-text-color.has-accent-background-color:hover,
	&.has-light-text-color.has-dark-text-background-color,
	&.has-dark-text-color.has-light-text-background-color:hover { border-color: var(--color-dark-text) !important; }
}

/********************************************* Popup and Overlay **********************************************/

.overlay {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,0.8);
	z-index: 1000;
	cursor: pointer;
}

.pop-up {
	position: fixed;
	width: 100%;
	max-width: 500px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--l-spacing);
	z-index: 10000;
}

.custom-message {
	display: none;
	background: var(--color-primary);
	box-shadow: 0px 0px 10px 8px var(--color-secondary);
	h1, h2, h3, h4, h5, h6, p, li, a { color: white; }
	:last-child { margin-bottom: 0; }
	.close-x { position: absolute; right: var(--s-spacing); top: var(--s-spacing); }
	@media (max-width: 768px) { max-width: 90%; padding: var(--l-spacing) 10px var(--m-spacing); }
}

.no-scroll .overlay,
.no-scroll .custom-message { display: block; }

/********************************************* Primary Content Styling **********************************************/

html {
	scroll-behavior: smooth;
	font-size: var(--fontsize-base);
	font-family: var(--font-primary);
	line-height: 1.6rem;
	color: var(--color-dark-text);
	overflow-x: hidden;
}

/* Block editor iframe body: wp-admin stylesheets that reach the editor set a system font on
   :where(body). The front-end body sets none and inherits the above from html, so give the
   editor's body the same inherited values. */
body:where(.editor-styles-wrapper) {
	font-family: var(--font-primary);
	line-height: 1.6rem;
	color: var(--color-dark-text);
}

body.improvise {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	min-height: 100vh;
	/* No overflow-x here on purpose — html (above) already sets
	   overflow-x: hidden and is the element that actually governs the
	   page's horizontal clipping (the CSS Overflow spec routes viewport
	   scrolling/clipping to the root element whenever it declares a
	   non-visible overflow, which html does here), so this was always
	   redundant for its stated purpose. It was also actively harmful:
	   per the same spec, whenever one axis computes to a non-'visible'
	   value and the other axis is unset (defaults to 'visible'), the
	   'visible' axis gets silently upgraded to 'auto' — so body's
	   unset overflow-y was computing to 'auto', not 'visible'. That
	   made BODY its own independently-scrollable box, nested inside
	   html's real page scroll, any time its rendered content height
	   came out even slightly taller than its own box (which varies by
	   breakpoint/content — confirmed live at a 768px viewport, where
	   body had a ~115px internal scroll range). Wheel/trackpad input
	   scrolls whatever box is directly under the pointer first, so that
	   phantom inner scrollbar silently absorbed the first ~115px of
	   scroll input before the real page ever started moving — verified
	   via Playwright (real wheel events, not scrollTo()) as the actual
	   cause of a "have to scroll a while before anything happens, then
	   it works" symptom users were seeing, distinct from the separate
	   .document-header/main transition-sync issue fixed above. Removing
	   this line stops body from ever establishing its own scroll
	   container — confirmed via the same live wheel-scroll test that
	   scrollY then advances on every single tick, and confirmed html's
	   own overflow-x:hidden alone is still sufficient to prevent any
	   horizontal scrollbar (scrollWidth === clientWidth after the
	   change). */
	/* overflow-x: clip, not hidden: html's hidden stops the desktop
	   scrollbar, but on touch devices the visual viewport still panned
	   into content wider than the page (e.g. a 100vw ::before with
	   large text). clip contains that without making body a scroll
	   container, so the phantom-scroll problem above doesn't return,
	   and position: sticky inside body keeps working. */
	overflow-x: clip;
	font-size: var(--fontsize-base);

	/* theme.json no longer defines a "normal" font size, so content saved with
	   has-normal-font-size falls back to core's common.css value (16px), as on
	   1.5.13. Modern sites saved it while theme.json had normal: 1rem; keep that. */
	&:not(.improvise-legacy-layout) { --wp--preset--font-size--normal: 1rem; }
}

html:has(body.menu-open),
body.menu-open {
	overflow: hidden;
}

.document-header {
	position: fixed;
	top: 0;
	width: 100%;
	* { transition: all 0.5s ease; }
	div.social { width: 25%; max-width: 50%; }
	.fixed & { min-height: var(--l-spacing) !important; max-height: var(--l-spacing) !important; }
	/* Unconditional on .admin-bar alone — NOT gated behind .fixed (a
	   separate, scroll-triggered class) like this used to be. .fixed
	   toggles independently of the admin bar and independently of
	   whether the mobile hamburger menu is open, so a page freshly
	   loaded (not yet scrolled, .fixed absent) with the admin bar
	   showing had no explicit top at all here before — position:fixed's
	   "auto behaves as if static" fallback isn't reliable enough to
	   depend on for this, and in practice the header would slide up
	   underneath the admin bar, most visibly on <1200px breakpoints
	   when the hamburger menu was opened. Since .document-header is
	   position:fixed (permanently pinned to the viewport) regardless of
	   scroll state, its top offset should always be explicit — 0
	   normally, or the admin bar's own height whenever it's showing —
	   not conditional on an unrelated scroll-state class. */
	.admin-bar & { top: 32px; @media (max-width: 782px) { top: 46px; } }
}

body:not(.has-top-bar) .document-header,
body.has-top-bar .document-header .main-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--xl-spacing);
	max-height: var(--xl-spacing);
	padding: 0 var(--l-spacing);
	background-color: var(--color-header-bg);
	border-bottom: 1px solid var(--color-header-text);
	z-index: 99999;
	transition: all 0.5s ease;
}

body.has-top-bar .document-header {
	display: flex;
	flex-direction: column;
	z-index: 99999;
}

main {
	position: relative;
	padding-top: var(--xl-spacing);
	/* Must match .document-header's own transition (min-height/max-height,
	   "transition: all 0.5s ease" on the rule above) exactly — duration
	   and easing both. A prior version of this rule removed the
	   transition entirely on the theory that an animated padding-top was
	   "fighting" the user's scroll input. Verified with real wheel-driven
	   scroll events (not just class-toggle checks) that this was wrong:
	   .document-header is position:fixed and its own height shrink was
	   never removed, so making ONLY main's padding-top instant meant main
	   snapped to its final (smaller) padding immediately while the
	   still-tall header kept animating over the following 0.5s — the
	   header physically overlapped/covered the top of main's content for
	   that whole window, which is what actually produced the "scroll
	   hangs, have to scroll again" symptom (confirmed by sampling
	   .document-header's rendered height alongside main's padding-top
	   across a real wheel-scroll: the header took ~15 scroll ticks to
	   settle while main's padding had already snapped on tick 1). Keeping
	   both on the same transition means they always shrink in lockstep —
	   no window where one has finished and the other hasn't. */
	transition: padding-top 0.5s ease;
	.has-top-bar & { padding-top: calc(var(--xl-spacing) + var(--m-spacing)); }
	.fixed & { padding-top: var(--l-spacing); }
	.has-top-bar.fixed & { padding-top: calc(var(--l-spacing) + var(--m-spacing)); }
}

/* Anchor-scroll offset: `scroll-padding-top` on the actual scroll root
   (html, per the overflow decision documented above on body.improvise) so
   clicking any in-page `<a href="#id">` — or a browser tab landing
   directly on a `#id` URL — stops with the target's top just below
   .document-header's bottom edge, not underneath it. Mirrors main's own
   padding-top states one rule up (base/.fixed/.has-top-bar combinations)
   rather than a second, independently-maintained copy of the header-height
   math, on the same "single source of truth" reasoning as this project's
   other shared-token refactors. Layered on top of WP core's own
   admin-bar.min.css rule (`html { scroll-padding-top: var(
   --wp-admin--admin-bar--height) }`) via that same variable — falls back to
   0px so the calc is still valid when core's admin-bar CSS isn't enqueued
   (logged-out visitors) and its custom property is undefined. Uses :has()
   because .fixed/.has-top-bar live on body, not html, matching the
   existing html:has(body.menu-open) precedent above. Deliberately keys off
   .fixed's *current* state rather than a single static value: if the page
   hasn't scrolled yet (.fixed absent, tall header) this uses the taller
   offset, which is correct AND is also the safe direction if .fixed
   happens to toggle mid-scroll on a long jump — the target lands with a
   little extra clearance rather than getting hidden under the header. */
html:has(body:not(.fixed):not(.has-top-bar)) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--xl-spacing));
}

html:has(body.fixed:not(.has-top-bar)) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--l-spacing));
}

html:has(body.has-top-bar:not(.fixed)) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--xl-spacing) + var(--m-spacing));
}

html:has(body.has-top-bar.fixed) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--l-spacing) + var(--m-spacing));
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

article {
	position: relative;
	padding: 0 var(--xl-spacing) var(--xl-spacing);
	@media (max-width: 1200px) { padding: 0 var(--l-spacing) var(--l-spacing); }
	@media (max-width: 992px) { padding: 0 var(--s-spacing) var(--l-spacing); }
	@media (max-width: 480px) { padding: 0 calc(var(--s-spacing) / 2); }
	ul { @media (max-width: 480px) { padding-left: var(--s-spacing); } }

	/* A page that ends in a Cover or a background Group sits right on the
	   footer: no bottom padding here and no bottom margin on that block, so
	   no white strip shows between the colour and the footer. "Ends in" means
	   nothing with content follows it: plugins append empty elements after the
	   content (e.g. Mailmunch's hidden div), so it's the last child *with
	   content*, not :last-child. Empty paragraphs at the end are removed by
	   improvise_remove_trailing_empty_paragraphs() in functions.php. */
	&:has(> .page-content > :is(.wp-block-cover, .wp-block-group.has-background):nth-last-child(1 of :not(:empty, script, style, template))) { padding-bottom: 0; }
	> .page-content > :is(.wp-block-cover, .wp-block-group.has-background):nth-last-child(1 of :not(:empty, script, style, template)) { margin-bottom: 0; }
}

/* Block editor iframe body (no <article> there); see `article li` above. */
body:where(.editor-styles-wrapper) ul { @media (max-width: 480px) { padding-left: var(--s-spacing); } }

.page-title {
	padding-top: var(--xl-spacing);
	@media (max-width: 992px) { padding-top: var(--l-spacing); }
}

.row {
	margin: 0 auto;
	max-width: var(--wide-width);
	@media (max-width: 480px) { max-width: 100%; }
}

#wpadminbar { @media (max-width: 600px) { position: fixed; } }

/******************************************** Site Logo Styling ********************************************/

.site-info {
	height: var(--xl-spacing);
	max-height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--color-header-text);
	transition: max-height 0.5s ease;
	a, p { color: var(--color-header-text); line-height: calc(var(--l-spacing) / 2); font-size: 1.125rem; margin-bottom: 0; text-decoration: none; }
	p { font-size: 0.9rem; max-height: var(--xl-spacing); }
	.fixed & { max-height: 50px; flex-direction: row; justify-content: space-between; align-items: center; p { display: none; } }
}

.document-header .logo {
	max-width: 250px;
	padding: 5px 0;
	a { display: block; position: relative; z-index: 999; }
	img {
		/* Wide logos (wider than 250 × (xl-spacing - 10)) would otherwise overflow the
		   250px box at full max-height; 1.5.13's global img { max-width: 100% } capped them. */
		max-width: 100%;
		max-height: calc(var(--xl-spacing) - 10px);
		width: auto;
		height: 100%;
		margin-bottom: 0;
		transition: all 0.5s ease;
		vertical-align: middle;
		@media (max-width: 480px) { max-width: 100%; }
	}
	.fixed & img { max-height: calc(var(--l-spacing) - 10px); }
}

body:not(.has-top-bar) .document-header,
body.has-top-bar .document-header .main-bar {
	@media (max-width: 1200px) { flex-wrap: wrap; padding: 0 var(--l-spacing); }
	@media (max-width: 992px) { padding: 0 var(--s-spacing); }
	@media (max-width: 480px) { padding: 0 calc(var(--s-spacing) / 2); }
}

/******************************************** Primary Navigation Styling ********************************************/
.primary-nav,
.top-bar {
	align-items: center;
	display: flex;
    position: relative;
}

.primary-nav .navbar-nav,
.top-bar .top-nav {
	display: flex;
	justify-content: space-between;
	margin: 0;
}

.primary-nav div.navbar-header {
    display: none;
}

.primary-nav ul,
.top-bar .top-nav {
    list-style-type: none;
}

.primary-nav .dropdown.inactive {
	background-color: transparent;
}

.primary-nav ul li,
.top-bar .top-nav li {
	line-height: normal;
	position: relative;
	margin-bottom: 0;
}

.primary-nav.tab-underline ul li {
	padding: 0 15px;
}

.primary-nav ul li a {
	color: var(--color-header-text);
	font-size: 1rem;
	font-family: var(--font-primary-nav);
	font-weight: 600;
	text-decoration: none;
}

.primary-nav:not(.tab-underline) ul li a,
.top-bar .top-nav li a {
	display: block;
	padding: 0 15px;
	line-height: calc(var(--xl-spacing) - 1px);
	max-height: calc(var(--xl-spacing) - 1px);
}

.fixed .primary-nav:not(.tab-underline) ul li a {
	line-height: calc(var(--l-spacing) - 1px);
	max-height: calc(var(--l-spacing) - 1px);
}

.primary-nav .dropdown.inactive a {
	background-color: transparent;
}

.primary-nav.tab-underline ul li:not(.touch-start):hover a,
.primary-nav.tab-underline ul li.current-menu-item a {
    border-bottom: 2px solid var(--color-header-text);
}

.primary-nav.tab-underline ul li.current-menu-item a[href*='#'] {
    border-bottom: none;
}

.primary-nav.tab-hover ul li:not(.touch-start):hover a,
.primary-nav.tab-hover ul li.current-menu-item a {
	color: var(--color-header-hover);
}

.primary-nav.tab-hover ul li.current-menu-item a[href*='#'] {
	color: inherit;
}

.primary-nav.tab-button ul li:not(.touch-start):hover a,
.primary-nav.tab-button ul li.current-menu-item a {
	color: var(--color-header-bg);
	background-color: var(--color-header-text);
}

/* The caret <b> is empty (see the matching comment in functions.php's
   start_el()) — the visible glyph is a single ▼ drawn via ::before content,
   rotated 180deg in place for the expanded state instead of swapping to a
   separate ▲ character. A ▼ rotated 180deg is visually identical to ▲ (same
   glyph, same bounding box, just reoriented around its own center), which
   guarantees the shape can never appear to shift/slide the way two
   different-but-similar glyphs swapped via content could — this replaced an
   earlier version of this fix that did swap distinct ▼/▲ characters and,
   at the <=1200px mobile menu's fixed-size caret box in particular, visibly
   slid between states instead of turning cleanly in place. */
.primary-nav .dropdown .caret,
.primary-nav .dropdown.inactive .caret {
	margin-left: 5px;
    display: inline-block;
	font-size: 0.65rem;
}

.primary-nav .dropdown .caret::before,
.primary-nav .dropdown.inactive .caret::before {
	content: "\25BC";
	display: inline-block;
	transition: transform 0.25s linear;
}

.primary-nav.tab-underline .dropdown .caret,
.primary-nav.tab-underline .dropdown.inactive .caret {
	vertical-align: text-bottom;
}

.primary-nav ul li:not(.touch-start):hover .caret,
.primary-nav .dropdown.active .caret{
	margin-right: 3px;
	margin-left: 2px;
}

.primary-nav ul li:not(.touch-start):hover .caret::before,
.primary-nav .dropdown.active .caret::before {
	transform: rotate(180deg);
}

.primary-nav .dropdown .dropdown-menu {
	display: flex;
	width: 300px;
	width: max-content;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	left: 0;
	right: auto;
	z-index: 100;
	padding: 0;
	background-color: transparent;
	z-index: -1;
	transition: all 0.25s linear;
	margin-left: -2px;
	border: 2px solid rgba(255,255,255,0.1);
	border-top: 0;
}

.primary-nav.tab-underline .dropdown .dropdown-menu {
	padding-top: 37px;
}

.fixed .primary-nav.tab-underline .dropdown .dropdown-menu {
	padding: 11px 0 0;
}

.primary-nav ul li:nth-last-child(-n+2) .dropdown-menu {
    right: 0;
	left: auto;
	text-align: right;
}

.primary-nav ul li:not(.touch-start):hover .dropdown-menu,
.primary-nav .dropdown.active .dropdown-menu {
	visibility: visible;
	opacity: 1;
	z-index: 10;
}

.primary-nav .dropdown-menu li {
	background-color: var(--color-header-text);
}

.primary-nav.tab-underline .dropdown-menu li {
	padding: 10px 15px;
}

.primary-nav.tab-underline li.dropdown .dropdown-menu li:last-child {
	padding-bottom: var(--s-spacing);
}

.primary-nav .dropdown-menu li a {
	position: relative;
    z-index: 99;
}

.primary-nav:not(.tab-underline) .dropdown:not(.touch-start) .dropdown-menu li a {
	line-height: var(--l-spacing);
	background-color: var(--color-header-dropdown);
}

.primary-nav.tab-button:not(.tab-underline) .dropdown:not(.touch-start) .dropdown-menu li a  {
	color: var(--color-header-dropdown-text);
	background-color: var(--color-header-dropdown);
}

.primary-nav .dropdown-menu li a {
	color: var(--color-header-bg);
}

.primary-nav.tab-hover .dropdown:not(.touch-start) .dropdown-menu li a {
	color: var(--color-header-text);
}

.primary-nav.tab-underline .dropdown-menu li.current-menu-item a {
	border-bottom: 2px solid var(--color-header-bg);
}

.primary-nav.tab-underline :not(.touch-start) .dropdown-menu li:hover a {
	border-color: var(--color-header-bg);
}

.primary-nav.tab-hover :not(.touch-start) .dropdown-menu li:hover a,
.primary-nav.tab-hover .dropdown:not(.touch-start) .dropdown-menu li.current-menu-item a {
	color: var(--color-header-hover);
}

.primary-nav.tab-button:not(.tab-underline) ul li:not(.touch-start) .dropdown-menu li:hover a,
.primary-nav.tab-button:not(.tab-underline) .dropdown:not(.touch-start) .dropdown-menu li.current-menu-item a {
	color: var(--color-header-dropdown);
	background-color: var(--color-header-dropdown-text);
}

.primary-nav .dropdown-menu .dropdown-submenu .caret,
.primary-nav .dropdown-menu ul.dropdown-submenu {
	display: none;
}

@media (max-width: 1200px) {

	.primary-nav {
		position: absolute;
		top: var(--xl-spacing);
		left: 0;
		width: 100%;
		height: auto;
		max-height: 0;
		background-color: var(--color-header-bg);
		overflow: hidden;
	    z-index: 9;
		transition: all 0.25s linear;
		/* .primary-nav's own base rule (>1200px, desktop) is
		   "display:flex; align-items:center;" — fine there, since it's
		   just centering a short row of horizontal nav items within the
		   header bar's own height. At this breakpoint .primary-nav
		   becomes the absolutely-positioned, height-bounded mobile
		   dropdown container instead, and align-items:center keeps
		   cascading in unchanged (never overridden here before) — so
		   once .navbar-nav (its flex child) grows TALLER than
		   .primary-nav's own bounded box, which is exactly what happens
		   the moment a top-level item's dropdown expands past the
		   max-height fixed above, "center" vertically centers that
		   overflowing child INSIDE the box instead of anchoring it to
		   the top, making it spill out equally above AND below —
		   confirmed live: with .navbar-nav taller than .primary-nav's
		   600px box by ~96px, it rendered from -49px to +47px past the
		   box's own top/bottom edges, a near-even split, the signature
		   of centering rather than a scroll-position bug (scrollTop
		   measured 0 throughout). flex-start anchors it to the top
		   instead, so overflow only ever happens on the bottom edge,
		   which .primary-nav's own overflow:auto + max-height (fixed in
		   an earlier entry) is what's actually meant to handle via
		   scrolling. */
		align-items: flex-start;
	}

	.fixed .primary-nav {
		top: var(--l-spacing);
	}
	
	.menu-open .primary-nav {
		overflow: visible;
		height: var(--l-spacing);
		max-height: var(--l-spacing);
	}

	.navbar-collapse .navbar-nav {
		justify-content: space-around;
		align-items: center;
		height: 100%;
		width: 100%;
		padding: 0;
		border-bottom: 1px solid var(--color-header-text);
	}
	
	.primary-nav ul li a {
		color: var(--color-header-text);
	}
	
	.primary-nav:not(.tab-underline) ul li a {
		height: auto;
		max-height: 0;
		line-height: calc(var(--l-spacing) - 1px);
		overflow: hidden;
		transition: max-height 0.25s linear;
	}
	
	.menu-open .primary-nav:not(.tab-underline) ul li a {
		max-height: calc(var(--l-spacing) - 1px);
		height: calc(var(--l-spacing) - 1px);
	}
	
	.primary-nav ul li:not(.touch-start):hover a,
	.primary-nav ul li.current-menu-item a {
		border-color: var(--color-header-text);
	}
	
	.menu-open .primary-nav.tab-underline .dropdown .dropdown-menu {
		padding: 12px 0 0;
	}
	
	.menu-open .primary-nav.tab-underline .dropdown.active .dropdown-menu,
	.menu-open .primary-nav.tab-underline .dropdown:not(.touch-start):hover .dropdown-menu {
		border-bottom: 1px solid var(--color-header-bg);
	}
	
	.primary-nav ul li:not(.touch-start):hover .dropdown-menu li a {
		border-color: var(--color-header-text);
	}
	
	.primary-nav ul li:not(.touch-start) .dropdown-menu li:hover a,
	.primary-nav ul li .dropdown-menu li.current-menu-item a {
		border-color: var(--color-header-bg);
	}
	
	.primary-nav.tab-underline ul li:not(.touch-start):hover .dropdown-menu li,
	.primary-nav.tab-underline .dropdown.active .dropdown-menu li {
		border-left: 1px solid var(--color-header-bg);
		border-right: 1px solid var(--color-header-bg);
	}
}

@media (max-width: 850px) { 
	
	.primary-nav {
		border-bottom: 0;;
		transition: max-height 0.25s linear;
		background-color: none;
	}
	
	/* max-height must be the REMAINING viewport height below wherever
	   .primary-nav actually starts, not a flat 100dvh — .primary-nav is
	   position:absolute relative to the fixed .document-header, offset
	   by top: var(--xl-spacing) (or var(--l-spacing) once .fixed, and
	   the admin bar's own height on top of either when .admin-bar is
	   present). A flat 100dvh box starting that far down the viewport
	   extends past the bottom of the screen by exactly that offset —
	   and since the whole subtree lives inside a position:fixed
	   ancestor, that overflow is invisible AND unreachable (the page
	   itself has nothing to scroll; only this element's own overflow:
	   auto can reveal it, and only for the portion of its box that's
	   actually within the viewport). Each variant below subtracts
	   whatever combination of header-shrink state and admin-bar height
	   actually applies — specificity (more body classes = more
	   specific) picks the right one automatically when several classes
	   are present at once, no !important needed.
	   dvh, not vh: plain vh is the LARGEST possible viewport (browser
	   chrome fully retracted) and doesn't shrink when transient mobile
	   UI — the address bar, or Chrome for Android's newer bottom tab
	   panel — is showing, so a vh-based max-height would let this box's
	   bottom edge sit right under whatever bar is currently on screen.
	   dvh tracks the ACTUAL current viewport and shrinks/grows with
	   that UI in real time, so the nav's bottom edge stays above it. */
	.menu-open .primary-nav {
		height: auto;
		max-height: calc(100dvh - var(--xl-spacing));
		overflow: auto;
	}

	.menu-open.fixed .primary-nav {
		max-height: calc(100dvh - var(--l-spacing));
	}

	.admin-bar.menu-open .primary-nav {
		max-height: calc(100dvh - var(--xl-spacing) - 32px);
	}

	.admin-bar.menu-open.fixed .primary-nav {
		max-height: calc(100dvh - var(--l-spacing) - 32px);
	}

	@media (max-width: 782px) {
		.admin-bar.menu-open .primary-nav {
			max-height: calc(100dvh - var(--xl-spacing) - 46px);
		}
		.admin-bar.menu-open.fixed .primary-nav {
			max-height: calc(100dvh - var(--l-spacing) - 46px);
		}
	}

	/* Top bar adds --m-spacing above the main bar, pushing .primary-nav down by
	   the same amount. Uses WP's own admin-bar height variable (undefined, so
	   0px, for logged-out visitors) in place of the hard-coded 32/46px above. */
	.has-top-bar.menu-open .primary-nav {
		max-height: calc(100dvh - var(--xl-spacing) - var(--m-spacing) - var(--wp-admin--admin-bar--height, 0px));
	}
	.has-top-bar.menu-open.fixed .primary-nav {
		max-height: calc(100dvh - var(--l-spacing) - var(--m-spacing) - var(--wp-admin--admin-bar--height, 0px));
	}

	.navbar-collapse .navbar-nav {
		flex-direction: column;
		align-items: normal;
		background-color: var(--color-header-bg);
		border-bottom: 0;
		/* Override the >1200px rule's justify-content: space-around and
		   height: 100% (still cascading in from the @media(max-width:
		   1200px) block above — same selector/specificity, so this later
		   rule wins). space-around distributes EQUAL space before,
		   between, and after every flex item based on (container height
		   − total items' own height); once an item's own height grows
		   past a FIXED 100% container (exactly what happens when one
		   item's dropdown expands past the .primary-nav max-height fixed
		   above), that leftover-space calculation goes negative — and a
		   negative half-unit of space BEFORE the first item shoves it up
		   past the container's own top edge, where it's clipped by
		   .primary-nav's overflow:auto and unreachable (confirmed live:
		   the first item's rendered top went from 100px, correctly under
		   the header, to -133.8px after expanding its own dropdown,
		   with scrollTop staying 0 throughout — a flex layout shove, not
		   a scroll position bug). height: auto here lets .navbar-nav
		   grow to its own real content height (including any expanded
		   dropdown) instead of being pinned to a size smaller than its
		   content demands, and flex-start simply stacks items from the
		   top with no redistributed gaps — the actual bounding/clipping/
		   scrolling job belongs entirely to .primary-nav's own
		   overflow:auto + calc()-bounded max-height, not to this. */
		justify-content: flex-start;
		height: auto;
	}
	
	.primary-nav ul li,
	.primary-nav.tab-underline ul li {
		padding: 0;
	}
	
	.primary-nav ul.navbar-nav>li {
		border-bottom: 1px solid var(--color-header-text);
		border-top: 1px solid transparent;
	}
	
	.primary-nav ul.navbar-nav>li:hover {
		border-top: 1px solid var(--color-header-bg);
	}
	
	.primary-nav ul.navbar-nav>li a {
		line-height: 45px;
	}
	
	.primary-nav ul li a {
		display: block;
		width: 100%;
		padding: 0 0 0 20px;
		border: 0 !important;
	}
	
	.menu-open .primary-nav:not(.tab-underline) ul li a {
		height: auto;
	}
	
	.primary-nav:not(.tab-button) li:not(.touch-start) a:hover {
		font-weight: bold !important;
	}
	
	/* Extra space above the caret block to separate from no-border
	.primary-nav .dropdown > a,
	.primary-nav:not(.tab-underline) ul li a {
		padding-top: 1px;
	} */
	
	/* On Mobile menu do not hover drop down menu item
	.primary-nav.tab-button ul li.dropdown:not(.touch-start):hover>a {
		color: var(--color-header-text);
    	background-color: var(--color-header-bg);
	}  */
	
	.primary-nav .dropdown .dropdown-toggle {
		display: flex;
		justify-content: space-between;
		padding-right: 0;
	}
	
	/* max-height 0 -> a real pixel value (not 100vh) is what makes this
	   transition actually read as smooth: a submenu here only ever needs
	   roughly 200-300px (the tallest current one, "Websites", is 5 items),
	   so animating toward 100vh meant the visible content finished growing
	   in a small fraction of the transition's duration — reaching its real
	   height almost instantly, then continuing to "animate" invisibly
	   toward a target far past anything actually rendered. 480px gives
	   headroom for a few more submenu items than exist today while keeping
	   the animated distance close enough to the real content height that
	   the growth itself is visible for most of the transition. ease (not
	   linear) matches how a physical panel actually decelerates as it
	   opens. Scoped to the two properties that actually change here rather
	   than `all`, per this project's general preference for targeted
	   transitions — opacity never actually changes at this breakpoint
	   (it's a flat 1 in both the closed and open rules; visibility is
	   handled entirely by max-height + the overflow:hidden inherited from
	   the base >850px rule), so only max-height needs a transition. */
	.primary-nav .dropdown .dropdown-menu {
		position: relative;
		width: 100%;
		height: auto;
		max-height: 0;
		opacity: 1;
    	box-shadow: none;
		margin-left: 0;
    	text-align: left;
		transition: max-height 0.3s ease;
	}
	
	.primary-nav.tab-underline .dropdown .dropdown-menu,
	.menu-open .primary-nav.tab-underline .dropdown .dropdown-menu,
	.fixed .primary-nav.tab-underline .dropdown .dropdown-menu {
		padding: 0;	
	}
	
	.menu-open .primary-nav .dropdown.active .dropdown-menu {
		border-bottom: 0;
		border-top-color: var(--color-header-bg);
	}
	
	.primary-nav .dropdown.active .dropdown-menu,
	.primary-nav ul li:not(.touch-start):hover .dropdown-menu {
    	padding: 0;
		height: auto;
		max-height: 480px;
		border-bottom: 0;
		border-top: 1px solid var(--color-header-bg);
	}
	
	.primary-nav ul li:nth-last-child(-n+2) .dropdown-menu {
		text-align: left;
	}
	
	.primary-nav .navbar-nav .dropdown .dropdown-menu li {
		border-bottom: 1px solid var(--color-header-bg);
		padding: 0 0 0 20px;
	}
	
	.primary-nav:not(.tab-underline) .navbar-nav .dropdown .dropdown-menu li  {
		background-color: var(--color-header-hover);
	}
	
	.primary-nav.tab-underline ul li:not(.touch-start):hover .dropdown-menu li,
	.primary-nav.tab-underline .dropdown.active .dropdown-menu li {
		border-left: 0;
		border-right: 0;
    	width: 100%;
		padding: 0 0 0 20px;
	}
	
	.primary-nav.tab-underline li.dropdown .dropdown-menu li:last-child,
	.primary-nav.tab-underline .dropdown.active .dropdown-menu li:last-child,
	.primary-nav.tab-underline li:not(.touch-start):hover .dropdown-menu li:last-child,
	.primary-nav.tab-underline .dropdown.active .dropdown-menu li:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
	
	.primary-nav.tab-button :not(.touch-start) .dropdown-menu li:hover,
	.primary-nav.tab-button .dropdown-menu li.current-menu-item {
	    background-color: var(--color-header-text);
	}
	
	.primary-nav .dropdown .dropdown-menu li a {
		padding: 0 0 0 20px;
	}
	
	.primary-nav.tab-button :not(.touch-start) .dropdown-menu li:hover a,
	.primary-nav.tab-button .dropdown-menu li.current-menu-item a {
	    background-color: inherit;
	}
	
	.primary-nav .dropdown .caret {
		height: 45px;
    	width: 45px;
		margin: 0;
    	text-align: center;
    	position: relative;
		background: var(--color-header-text);
    	color: var(--color-header-bg);
    	font-size: 0.65rem;
		transition: none !important;
	}
	
	.primary-nav ul li:not(.touch-start):hover .caret,
	.primary-nav .dropdown.active .caret {
		margin: 0;
	}
	
	.primary-nav .dropdown .caret,
	.primary-nav .dropdown.inactive .caret {
		margin-left: 0;
	}
	
}

/****************************************** Transparent Nav Styling ******************************************/

.has-transparent-nav {
	&:not(.fixed) .document-header,
	&:not(.fixed) .document-header .main-bar { background-color: transparent !important; }
	.document-header,
	.document-header .main-bar { border-bottom: 0 !important; }

	/* No main padding-top override here. This used to set it to 0, which (same
	   specificity, later source order) beat main's own header-height padding rules
	   in every state (base / .fixed / .has-top-bar) and slid page content up
	   under the fixed header. main keeps its normal padding-top — which matches
	   the header height (--xl-spacing, --l-spacing once .fixed) at every
	   breakpoint — and because it's padding, not margin, main::before (the
	   Theme Settings default_bg_image, see header-root.php) still starts at the
	   top of the viewport, showing through the transparent header. */

	/* Legacy layout keeps 1.5.13's padding-top: 0 in every state. Those sites
	   open with a full-bleed Cover that is meant to run up under the
	   transparent header, and the Cover's own top padding clears the header;
	   the new padding pushed the hero down by the header height. Source order
	   beats main's .fixed / .has-top-bar rules at equal specificity. */
	&.improvise-legacy-layout main { padding-top: 0; }

	/* With main's padding gone, the blog index / archive title needs back the
	   header clearance that .blog .row .page-title { padding-top: 0 } removes
	   (that reset assumes main is padded). Same values as .page-title itself,
	   matching 1.5.13. */
	&.improvise-legacy-layout .blog:not(.search) .row .page-title {
		padding-top: var(--xl-spacing);
		@media (max-width: 992px) { padding-top: var(--l-spacing); }
	}

	/* Mobile hamburger nav (≤1200px): its dropdown panel is solid
	   --color-header-bg, so an unscrolled transparent header above it looked
	   detached. Give the header its background while the menu is open. */
	@media (max-width: 1200px) {
		&.menu-open .document-header,
		&.menu-open .document-header .main-bar { background-color: var(--color-header-bg) !important; }
	}

	/* These two compensate for the transparent header's absolute-positioned
	   desktop flyout dropdown (see .primary-nav .dropdown .dropdown-menu
	   above) sitting differently once the header has no background/border.
	   The mobile hamburger nav takes over at max-width: 1200px and uses a
	   completely different accordion-style dropdown-menu (position:relative,
	   max-height-driven) — these offsets don't apply to that layout and were
	   breaking it by being left unscoped. */
	@media (min-width: 1201px) {
		.primary-nav.tab-underline .dropdown .dropdown-menu { padding-top: 0; margin-top: 10px; }
		.primary-nav.tab-hover .dropdown .dropdown-menu { margin-top: -27px; }
	}
}

/******************************************** Top Bar Nav Styling ********************************************/
.top-bar {
	background-color: var(--color-topbar-bg);
	justify-content: flex-end;
	max-height: var(--m-spacing);
	min-height: var(--m-spacing);
	@media (max-width: 1200px) { justify-content: center; }
	.top-nav {
		margin: 0;
		padding: 0 var(--l-spacing);
		li a {
			color: var(--color-topbar-text);
			line-height: calc(var(--m-spacing) - 1px);
			@media (max-width: 500px) { font-size: 14px; }
		}
		li:not(.touch-start):hover a { color: var(--color-topbar-text-hover); background-color: var(--color-topbar-bg-hover); }
	}
}

/* Scrolled (.fixed) state with the top bar showing: the generic .fixed rule
   above caps .document-header at --l-spacing, which ignores the top bar's own
   height, and .main-bar never shrank at all — so the bar stayed full height
   while the mobile nav below (top: --l-spacing + --m-spacing) assumed it had,
   landing the open menu on top of the logo. Header = top bar + shrunken main
   bar, matching main's own padding-top for this state. */
body.has-top-bar.fixed .document-header {
	min-height: calc(var(--l-spacing) + var(--m-spacing)) !important;
	max-height: calc(var(--l-spacing) + var(--m-spacing)) !important;
}
body.has-top-bar.fixed .document-header .main-bar {
	min-height: var(--l-spacing);
	max-height: var(--l-spacing);
}

@media (max-width: 1200px) {
	body.has-top-bar .document-header .primary-nav { top: calc(var(--xl-spacing) + var(--m-spacing)); }
	.fixed.has-top-bar .document-header .primary-nav { top: calc(var(--l-spacing) + var(--m-spacing)); }
}

/******************************************** Mobile Hamburger Styling ********************************************/

.mobile-hamburger {
	display: none;
	@media (max-width: 1200px) {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 40px;
		height: 40px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		transform: rotate(0deg);
		transition: 0.25s ease-in-out;
		z-index: 2;
		padding: 0;
		background: transparent;
		border: 0;
		.fixed & { margin-top: -5px; }
		span { position: relative; background: var(--color-header-text); border-radius: 9px; height: 3px; width: 40px; transform: rotate(0deg); transition: .25s ease-in-out; }
		.primary-nav:not(.tab-underline) &:hover span { background: var(--color-header-hover); }
		&.toggled .wrapper { max-height: 1000px; }
		&.toggled span:nth-child(1) { top: 11px; transform: rotate(135deg); }
		&.toggled span:nth-child(2) { transform: rotate(495deg); }
		&.toggled span:nth-child(3) { top: -10px; transform: rotate(-135deg); }
	}
}

/******************************************** Mobile Telephone Styling ********************************************/

.mobile-telephone-button {
	background-color: var(--color-accent);
	display: none;
	position: fixed;
	bottom: 0;
	text-align: center;
	width: 100%;
	z-index: 99;
	.icon-phone { color: white; margin-left: 15px; vertical-align: middle; }
	@media (max-width: 480px) {
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
		display: block;
		a {
			color: var(--color-white);
			display: block;
			font-size: 1.125rem;
			padding: 10px;
			text-decoration: none;
			.icon-phone { vertical-align: text-bottom; }
		}
	}
}

/******************************************** Section Styling ********************************************/

.image-slider {
	margin-bottom: var(--l-spacing);
	h2 { font-size: 2.25rem; }
	.blurb-back {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		padding: 0 var(--l-spacing);
		a { max-width: 300px; width: 100%; }
	}
}

.wp-block-columns.three-column-background {
	@media (max-width: 1020px) {
		flex-direction: column;
		.wp-block-column:not(:last-of-type) { margin: 0 0 var(--l-spacing); }
		.wp-block-buttons { margin: 0 auto; max-width: 300px; width: 100%; }
	}
}

.three-column-background .wp-block-column {
	border: 1px solid black;
	border-radius: 5px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--s-spacing) var(--m-spacing);
	text-align: center;
	@media (max-width: 1020px) { margin-left: 0; }
	@media (max-width: 480px) { padding: var(--s-spacing); }
	.wp-block-button, .wp-block-button a { display: block; }
	p { padding: 0; }
}

article .image-slider {
	@media (max-width: 480px) { display: block; }
}

.heading-column {
	display: flex;
	align-items: center;
}

/******************************************** Footer Styling ********************************************/

.document-footer {
	position: relative;
	clear: both;
	padding: var(--l-spacing) 0 var(--m-spacing);
	background-color: var(--color-footer-bg);
	@media (max-width: 1300px) { padding: var(--m-spacing) var(--l-spacing); }
	@media (max-width: 992px) { padding: var(--m-spacing) var(--s-spacing); }
	@media (max-width: 480px) { padding: var(--m-spacing) calc(var(--s-spacing) / 2) 80px; }

	a, p, li, h2, table { color: var(--color-footer-text); }
	a:hover { text-decoration: underline; opacity: 0.7; }

	.social-menu li a[href*="facebook.com"],
	.social-menu li a[href*="instagram.com"],
	.social-menu li a[href*="pinterest.com"] { --social-color: var(--color-footer-text); }
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 32%);
	grid-gap: 2%;
	list-style: none;
	padding: 0;
	margin: 0 0 var(--l-spacing);
	> li { margin-bottom: 0; }

	/* Automatically switch to 4 columns when the optional 4th footer
	   widget area is active — #footer4 only exists in the markup at all
	   when is_active_sidebar('footer4') is true (see footer.php), so :has()
	   is enough to detect it without any PHP-computed class/inline style. */
	&:has(#footer4) {
		grid-template-columns: repeat(4, 23.5%);
	}

	/* 1200px, not the more common 992px — matches .document-header's own
	   mobile-nav breakpoint (@media(max-width:1200px) on .primary-nav
	   elsewhere in this file), so the footer switches into its mobile,
	   reflowed layout at the same point the header does, instead of the
	   two disagreeing about where "mobile" starts. */
	@media (max-width: 1200px) {
		grid-template-columns: repeat(2, 48%);
		grid-row-gap: var(--l-spacing);
		> li:first-child { grid-row: 2/3; grid-column: 1/3; text-align: center; }

		&:has(#footer4) {
			grid-template-columns: repeat(3, 32%);
			> li:first-child { grid-column: 1/4; }
		}
	}
	@media (max-width: 768px) {
		max-width: 350px;
		margin: 0 auto var(--l-spacing);
		grid-template-columns: 100%;
		grid-column-gap: 0;
		> li:first-child { grid-row: 3/4; grid-column: 1/2; text-align: center; }
		> li:nth-child(2) { grid-row: 1/2; }
		> li:nth-child(3) { grid-row: 2/3; }

		/* :has(#footer4) carries ID-level specificity (from the #footer4
		   inside it), which otherwise beats this plain-class rule and would
		   keep the desktop 4-column layout even at this breakpoint — so
		   grid-template-columns has to be explicitly re-asserted here too. */
		&:has(#footer4) {
			grid-template-columns: 100%;
			> li:first-child { grid-row: 4/5; }
			> li:nth-child(4) { grid-row: 3/4; }
		}
	}
	@media (max-width: 540px) {
		grid-template-columns: repeat(1, 100%);
		> li, > li:first-of-type { width: 100%; }

		&:has(#footer4) {
			grid-template-columns: repeat(1, 100%);
		}
	}
}

.widget-area {
	.widgets:not(:last-child) { margin-bottom: var(--s-spacing); }
	.widgets ul { padding: 0; list-style-type: none; }
	.widgets .menu ul { list-style-type: square; padding-left: 40px; }
	.widgets li { margin-bottom: 0; }
	.widgets ul.wp-block-social-links { @media (max-width: 992px) { justify-content: center; } }
}

/* Same list resets as .widget-area .widgets above, duplicated onto
   .widget_nav_menu directly. A Nav Menu widget placed via a Legacy
   Widget block (e.g. the footer menu columns) renders its live
   preview, inside the block-based Widgets screen, in its own iframe
   using WordPress core's generic widget-preview template — which
   wraps the widget's output in a plain #page/#content shell, not the
   theme's own .widget-area/.widgets markup from register_sidebar()'s
   before_widget (that only gets added by dynamic_sidebar() on the
   real front end). So the rules above never match inside that
   preview, even though the exact same theme stylesheet is loaded
   there (confirmed live) — .widget_nav_menu itself is the one class
   present in both contexts, since it comes from the widget's own
   output, not the sidebar wrapper. Same reasoning applies to the text
   color below: .document-footer's own `a, p, li, h2, table { color:
   var(--color-footer-text); }` rule needs the <footer class=
   "document-footer"> ancestor, which is equally absent from this
   preview, so links render in the default dark body-text color
   instead of the light footer color — confirmed as the cause of a
   reported "text should be light but is dark" bug in the widget
   editor. Scoped to .widget_nav_menu rather than the more generic
   .widget (which .document-footer's own rule doesn't use either) —
   .widget_nav_menu is currently the ONLY widget type placed anywhere
   on this site (confirmed via wp_get_sidebars_widgets(): every
   sidebar except footer1-4 is empty), so there's no risk yet of this
   footer-specific light color leaking onto a widget in a
   non-dark-background sidebar; revisit if that ever changes. */
.widget_nav_menu {
	ul { padding: 0; list-style-type: none; }
	.menu ul { list-style-type: square; padding-left: 40px; }
	li { margin-bottom: 0; }
	/* :link/:visited (not a bare `a`) deliberately, to match
	   .document-footer's own a:link/a:visited rule in cawt-2026's
	   style.css at the SAME specificity tier (one class + element +
	   pseudo-class) rather than a lower one — needed because that
	   child-theme rule doesn't just outrank a plain `.widget_nav_menu
	   a`, it's competing against cawt-2026's OTHER, unscoped, lower-
	   specificity `a:link { color: var(--color-primary); }`, which is
	   the one actually reachable inside the widget-preview iframe
	   (.document-footer isn't present there — see the block above).
	   Matching the SAME tier, rather than reaching for !important,
	   keeps this correct on the real front end too: there,
	   .document-footer's own equally-specific rule still wins the tie
	   by loading later (child after parent, same as every other
	   parent/child specificity tie on this site) — this rule only
	   actually decides anything in contexts .document-footer's own
	   rule can't reach. */
	a:link, a:visited {
		color: var(--color-footer-text);
		&:hover { text-decoration: underline; opacity: 0.7; }
	}
}

.textwidget *:last-child { margin-bottom: 0; }

.widgets {
	select[name=archive-dropdown],
	select[name=cat] { max-width: 240px; width: 100%; height: 35px; font-size: 0.8em; background: var(--color-footer-bg); color: var(--color-footer-text); }
	.calendar_wrap { margin-right: var(--m-spacing); border: 1px solid var(--color-footer-text); padding: 10px; table { width: 100%; } }
	.wp-calendar-nav span { color: var(--color-footer-text); }
	.searchform {
		display: grid;
		grid-template-columns: calc(100% - 35px) 35px;
		input[type=text] { height: 35px; font-size: 0.8rem; padding: 0 15px; }
		button[type=submit] {
			background-color: var(--color-primary);
			border: 1px solid var(--color-white);
			color: var(--color-white);
			height: 35px;
			padding: 0 12px;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			&:hover { background-color: var(--color-dark-text); }
		}
	}
}

.widget-area .wp-block-social-links {
	.wp-social-link {
		background: none;
		&:not(:last-child) { margin-right: 20px; }
	}
	a, a:hover { background: var(--color-light-text); opacity: 1; padding: 0; }
	svg { height: 32px; width: 32px; filter: grayscale(100%); }
	a:hover svg { opacity: 0.7; }
	a[aria-label=LinkedIn] svg { height: 34px; width: 34px; }
	a[aria-label=YouTube] svg { height: 36px; width: 36px; }
}


/******************************************** Footer Bottom ********************************************/

/* Media queries can't take var(): these three used (max-width: var(--wide-width)),
   which is invalid, so the browser dropped them and the footer's centering,
   wrapping and copyright spacing never applied. 1200px matches the header's
   mobile-nav breakpoint. */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding-top: 10px;
	border-top: 1px solid var(--color-footer-text);

	a { color: var(--color-footer-text); text-decoration: none; font-size: 0.8rem; line-height: 1rem; }

	.copyright {
		display: flex;
		@media (max-width: 1200px) { justify-content: center; flex-basis: 100%; margin-bottom: var(--m-spacing); }
		@media (max-width: 768px) { flex-direction: column; align-items: center; a { margin-top: calc(var(--s-spacing) / 2); order: 1; } }
	}

	.legal-menu-items {
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: flex;
		.menu-item { margin-bottom: 0; line-height: 1; }
		@media (max-width: 365px) { flex-direction: column; align-items: center; .menu-item { margin-bottom: calc(var(--s-spacing) / 2); } }
	}

	.pipe {
		color: var(--color-footer-text);
		padding: 0 8px;
		vertical-align: text-top;
		display: inline-block;
	}

	li:first-child .pipe { @media (max-width: 768px) { display: none; } }
	li .pipe { @media (max-width: 365px) { display: none; } }

	@media (max-width: 1200px) { flex-wrap: wrap; }
	@media (max-width: 768px) { flex-direction: column; }
}

.crack-ajax-plug {
	padding-left: 8px;
	@media (max-width: 1200px) { justify-content: center; flex-basis: 100%; padding-left: 0; text-align: center; }
}

/******************************************** Blog Styling ********************************************/
.blog:not(.search) {
	> .row {
		padding: var(--l-spacing) var(--xl-spacing) var(--xl-spacing);
		@media (max-width: 996px) { padding: var(--l-spacing); }
		@media (max-width: 480px) { padding: var(--l-spacing) 15px; }
	}

	.row {
		.page-title { text-align: center; }

		.article-container {
			display: grid;
			grid-template-columns: repeat(3, 31%);
			grid-column-gap: 3.5%;
			grid-row-gap: var(--l-spacing);
			margin-bottom: var(--l-spacing);
			@media (max-width: 1200px) { grid-template-columns: repeat(2, calc(50% - calc(var(--s-spacing) / 2))); grid-column-gap: var(--s-spacing); }
			@media (max-width: 768px) { grid-template-columns: repeat(1, 100%); width: 100%; }
		}

		article {
			background: var(--color-primary);
			border-radius: 10px;
			padding: 0;
			position: relative;
			height: 100%;
			transition: all .1s ease-in;

			&:hover {
				box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.4);
				transform: scale(1.05, 1.05);
				@media (max-width: 768px) { box-shadow: 0 var(--s-spacing) var(--l-spacing) 10px rgba(0,0,0,0.4); transform: none; }
			}

			&:not(.has-post-thumbnail) {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0;
				h1 { padding: 0; text-align: center; }
				.post-info { margin-left: 0 !important; }
				.post-info p { margin-top: 0; }
			}

			@media (max-width: 768px) { width: 100%; }

			h1 {
				line-height: 1;
				width: 100%;
				cursor: pointer;
				text-align: center;
				/* On the h1, not just the link: the heading-link rule
				   (h1 a { color: inherit !important }) makes the link take
				   the h1's colour, so the a's white below never applied and
				   titles rendered --color-dark-text on the card. */
				color: var(--color-white);
				a {
					border-radius: 10px;
					color: var(--color-white);
					font-size: 1.625rem;
					padding: 0;
					text-align: center;
					text-decoration: none;
				}
			}

			.post-header {
				display: flex;
				flex-wrap: wrap;
				@media (max-width: 768px) { .post-info { margin-left: 0; width: 100%; } }
			}

			.post-thumbnail {
				height: 200px;
				overflow: hidden;
				img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 10px 10px 0 0; }
				@media (max-width: 1200px) { height: 275px; }
				@media (max-width: 996px) { height: 225px; }
				@media (max-width: 480px) { height: 200px; }
			}

			.post-content {
				max-width: var(--restricted-width);
				padding: 25px 25px 75px;
				p { color: var(--color-white); }
				.read-more {
					border: 2px solid var(--color-white);
					color: var(--color-white);
					font-weight: 700;
					padding: 10px;
					position: absolute;
					bottom: 25px;
					left: 25px;
					text-align: center;
					text-decoration: none;
					width: calc(100% - var(--l-spacing));
					&:hover { background: var(--color-dark-text); }
				}
			}
		}
	}
}

.blog .pagination {
	margin: var(--l-spacing) auto;
	display: inline-block;
	text-align: center;
	width: 100%;
	a {
		background-color: var(--color-primary);
		color: var(--color-white);
		font-size: 1.375rem;
		padding: 10px;
		&:hover { background-color: var(--color-dark-text); }
	}
	span {
		border: 2px solid var(--color-primary);
		font-size: 1.375rem;
		padding: 8px;
	}
}

@media (min-width: 769px) and (max-width: 1200px) {
	.improvise .blog:not(.search).has-sidebar .row .article-container {
		grid-template-columns: repeat(1, 100%);
		grid-column-gap: 0;
	}
}

/******************************************** Blog Single Styling ********************************************/
.single-post {
	.row { max-width: 996px; }

	article { padding-bottom: var(--l-spacing); }

	.hero-image-container {
		align-items: center;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		min-height: 70vh;
	}

	.post-header.has-featured-image .header-wrapper h1 {
		padding: 0 var(--xl-spacing);
		@media (max-width: 996px) { padding: 0 var(--l-spacing); }
		@media (max-width: 480px) { padding: 0 15px; }
	}

	.has-featured-image {
		h1 { color: var(--color-white); position: relative; z-index: 4; }
		.post-info p, .post-info a { color: var(--color-dark-text); }
	}

	.post-header:not(.has-featured-image) {
		margin: 0 auto;
		h1 { margin: var(--l-spacing) auto var(--m-spacing); }
	}

	h1 { margin: 0; }

	.wp-block-cover h2 { font-size: 2.25rem; }

	.posts {
		.post-footer {
			margin-top: var(--xl-spacing);
			@media (max-width: 480px) { margin-top: var(--l-spacing); }
		}
	}

	/* Previous / next post links: stacked, each full width (previous left, next right) so long
	   titles get the whole line instead of half of it; side padding keeps them off the screen edge. */
	.post-footer .wrapper {
		display: flex;
		padding: 0 var(--s-spacing);
		a {
			cursor: pointer;
			font-family: var(--font-primary-heading);
			font-size: 1.375rem;
			font-weight: 700;
			line-height: 1.25;
			margin: 0 10px;
			text-decoration: none;
		}
		.navigation {
			display: flex;
			flex-direction: column;
			width: 100%;
			> div {
				float: none;
				width: 100%;
				padding: var(--s-spacing) 0;
				&:empty { display: none; }
			}
			> div + div:not(:empty) { border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
			.prev-post { text-align: left; }
			.next-post { text-align: right; }
			a:hover { text-decoration: underline; }
		}
	}
}

/******************************************** Comments Styling ***********************************************/
/* comments.php: list + form. Colors derive from currentColor so the section reads on dark or light sites. */
.comments-section {
	max-width: var(--restricted-width);
	margin: var(--l-spacing) auto var(--xl-spacing);
	padding-top: var(--l-spacing);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);

	.comments-title, .comment-reply-title { margin-bottom: var(--m-spacing); }

	.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
	.comment-list .children { margin-left: var(--m-spacing); padding-left: var(--s-spacing); border-left: 2px solid color-mix(in srgb, currentColor 15%, transparent); }
	.comment-list li { margin: 0; }

	.comment-body { padding: var(--s-spacing) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
	.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 10px; font-size: .9rem; } /* px gap: content-sized flex row */
	.comment-author { display: flex; align-items: center; gap: 10px; } /* px gap: content-sized flex row */
	.comment-author .avatar { border-radius: 50%; margin: 0; }
	.comment-author .fn { font-style: normal; font-weight: 700; }
	.comment-author .says { display: none; }
	.comment-metadata a { color: inherit; opacity: .7; text-decoration: none; }
	.comment-awaiting-moderation { font-style: italic; opacity: .8; }
	.comment-content p { margin-bottom: 10px; }
	.reply a { font-family: var(--font-secondary-heading); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
	.bypostauthor > .comment-body .fn::after { content: "Author"; margin-left: 8px; padding: 1px 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--color-white); background: var(--color-primary); vertical-align: middle; }

	.comment-respond { margin-top: var(--m-spacing); }
	.comment-notes, .logged-in-as { font-size: .9rem; opacity: .8; }
	.comment-form label { display: block; margin-bottom: 4px; font-weight: 600; }
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.comment-form textarea {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
		border-radius: 0;
		background: color-mix(in srgb, var(--color-white) 70%, transparent);
		color: var(--color-dark-text);
		font: inherit;
	}
	.comment-form input:focus, .comment-form textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
	.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; } /* px gap: content-sized flex row */
	.comment-form-cookies-consent label { display: inline; font-weight: 400; }
	.form-submit .submit {
		padding: calc(var(--s-spacing) / 2) var(--m-spacing);
		border: 2px solid var(--color-primary);
		border-radius: 0;
		background-color: var(--color-primary);
		color: var(--color-white);
		font-family: var(--font-primary-heading);
		cursor: pointer;
		&:hover, &:focus-visible { background-color: var(--color-dark-text); border-color: var(--color-dark-text); }
	}
}

/**************************************** Blog Sidebar Layout *****************************************/

main.has-sidebar .row {
	display: flex;
	gap: var(--l-spacing);
	align-items: flex-start;
}

.single-post main.has-sidebar .row { max-width: var(--wide-width); }

main.has-sidebar .row > article,
main.has-sidebar .row > .post-content {
	flex: 1 1 0;
	min-width: 0;
}

.blog-sidebar {
	flex: 0 0 280px;
	width: 280px;
}

.blog-sidebar .widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-bottom: var(--s-spacing);
	border-bottom: 2px solid var(--color-primary);
	margin-bottom: var(--s-spacing);
}

.blog-sidebar #search-2 { margin-bottom: var(--m-spacing); }

main.blog.has-sidebar .row .page-title {
	text-align: left;
}

/* Not on legacy-layout sites: 1.5.13 had no such reset, so their blog/archive titles keep
   .page-title's own padding-top (or a child theme's override of it). :where() keeps the
   selector's specificity what it was before the gate. */
.blog:not(.search) .row .page-title:where(body:not(.improvise-legacy-layout) *) { padding-top: 0; }

main.blog.has-sidebar .row .article-container {
	grid-template-columns: repeat(2, calc(50% - calc(var(--s-spacing) / 2)));
	grid-column-gap: var(--s-spacing);
}

@media (max-width: 996px) {
	main.has-sidebar .row {
		gap: var(--m-spacing);
	}
}

@media (max-width: 768px) {
	main.has-sidebar .row {
		flex-direction: column;
		gap: var(--s-spacing);
	}
	.blog-sidebar {
		width: 100%;
		flex-basis: auto;
	}
}

@media (max-width: 650px) {
	main.blog.has-sidebar .row .article-container {
		grid-template-columns: repeat(1, 100%);
		width: 100%;
	}
}

/* Legacy sidebar markup (.row.sidebar-layout > .post-content.right-sidebar > .full-post + .sidebar-right),
   still output by pre-5.0 child themes that override the WooCommerce wrapper or blog templates.
   These rules were dropped in c04a764 for the has-sidebar layout; without them the sidebar falls below the content. */
.improvise-legacy-layout {
	.row.sidebar-layout { max-width: var(--wide-width); }
	.post-content.right-sidebar,
	.post-content.left-sidebar {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--l-spacing);
	}
	.sidebar-right,
	.sidebar-left { flex-basis: calc(100% - calc(70% + var(--l-spacing))); }
	.sidebar-layout .full-post { flex-basis: 70%; }
	.sidebar-layout #sidebar #search-2 { margin-bottom: var(--m-spacing); }

	@media (max-width: 850px) {
		.post-content.right-sidebar,
		.post-content.left-sidebar { flex-wrap: wrap; }
		.post-content.left-sidebar { flex-direction: column-reverse; }
		.sidebar-layout .full-post,
		.sidebar-right,
		.sidebar-left { flex-basis: 100%; }
	}
}

/********************************************* Search Page Styling *************************************************/
.search {
	> .row {
		padding: 0 var(--xl-spacing) var(--xl-spacing);
		@media (max-width: 996px) { padding: 0 var(--l-spacing) var(--l-spacing); }
		@media (max-width: 480px) { padding: 0 var(--l-spacing) 15px; }
	}
	article { padding: 0; }
	.row article a { font-family: var(--font-primary-heading); }
}

/***************************************** Gravity Forms Default Styling ******************************************/

:focus {
	outline-color: var(--color-accent);
}

.improvise .gform_wrapper {
	overflow-x: hidden;

	ul.gform_fields {
		li:first-child { margin-top: 0; }
		li.gfield {
			padding-right: 0;
			&.left-half { padding-right: 8px; }
			&.right-half { padding-left: 8px; }
			.gfield_label {
				color: var(--color-dark-text);
				font-size: 1.25rem;
				font-family: var(--font-primary-heading);
			}
			span label {
				color: var(--color-dark-text);
				font-size: 0.75rem;
				font-family: var(--font-primary-heading);
			}
		}
		.flex-row .gfield_radio li,
		.flex-column .gfield_radio li { flex-grow: 1; margin-left: 0 !important; }
	}

	input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
	textarea {
		color: var(--color-dark-text);
		background-color: transparent;
		font-size: 1rem;
		padding: 16px;
		margin: 0;
		border: 2px solid var(--color-primary);
	}

	input:focus:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
	textarea:focus,
	input[type=submit]:focus { outline-color: var(--color-accent); }

	input {
		color: var(--color-dark-text);
		font-family: var(--font-primary) !important;
		width: 100% !important;
	}

	select {
		appearance: none;
		background-color: transparent;
		border: 2px solid var(--color-primary);
		border-radius: 0 !important;
		color: var(--color-dark-text);
		font-family: var(--font-primary) !important;
		font-size: 1rem;
		margin: 0 !important;
		position: relative;
		padding: 14px 16px !important;
		width: 100% !important;
		z-index: 9;
	}

	.ginput_container_select {
		position: relative;
		&:after {
			background-image: url('images/down-arrow-black.png');
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			display: inline-block;
			height: 18px;
			position: absolute;
			right: 16px;
			top: 16px;
			width: 18px;
		}
		::placeholder { font-family: var(--font-primary) !important; }
	}

	textarea { height: 150px; }
	input[type=submit] { font-size: 1.25rem !important; width: 100% !important; max-width: 300px; }

	div.ginput_complex {
		display: flex;
		justify-content: space-between;
		width: 100% !important;
		span { width: 49% !important; padding: 0 !important; margin: 0; }
		&.ginput_container_address {
			flex-wrap: wrap;
			gap: 2%;
		}
		@media (max-width: 480px) {
			flex-direction: column;
			span { width: 100% !important; padding: 0 !important; }
		}
	}

	.full-width div.ginput_complex.ginput_container_address {
		.address_line_1, .address_line_2 { flex-basis: 49%; margin-bottom: 16px; }
	}
	.left-half div.ginput_complex.ginput_container_address,
	.right-half div.ginput_complex.ginput_container_address {
		.address_line_1, .address_line_2 { flex-basis: 100%; margin-bottom: 16px; }
	}
	.left-half div.ginput_complex.ginput_container_address,
	.right-half div.ginput_complex.ginput_container_address,
	.full-width div.ginput_complex.ginput_container_address {
		.address_city, .address_state, .address_zip { flex-basis: 32%; padding: 0 !important; margin: 0 !important; }
	}

	.address_country { margin-top: 0; }

	.flex-row ul.gfield_radio, .flex-column ul.gfield_radio {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 2%;
		max-width: 100%;
	}
	.left-half.flex-row, .left-half.flex-column { float: left; }
	.right-half.flex-row, .right-half.flex-column { float: right; }
	.flex-row ul.gfield_radio { flex-direction: row; }
	.flex-column ul.gfield_radio { flex-direction: column; }
	ul.gfield_radio li { display: inline-block; }
	.gfield_radio li label { font-size: 1rem; }
	.gfield_checkbox li input[type=checkbox] { vertical-align: unset; margin-top: 2px; }

	.gform_footer {
		.gform_button {
			background: white;
			border: 2px solid var(--color-dark-text);
			color: var(--color-dark-text);
			cursor: pointer;
			font-family: var(--font-primary-heading);
			&:hover { background: var(--color-dark-text); border-color: var(--color-dark-text); color: white; }
		}
		@media (max-width: 480px) { input[type=submit] { margin-bottom: 0; } }
	}

	div.ginput_complex.ginput_container_creditcard {
		span.ginput_full { width: 100% !important; }
	}

	@media only screen and (max-width: 641px) {
		input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) { line-height: 1; min-height: auto; }
		.ginput_container span:not(.ginput_price) { margin-bottom: 24px; }
		.ginput_container span.name_last { margin-bottom: 0; }
		ul.gform_fields li.gfield.left-half,
		ul.gform_fields li.gfield.right-half { width: 100%; padding-left: 0; padding-right: 0; }
	}
}

.left-half, .right-half { display: inline-block; width: 50%; }
.full-width { display: inline-block; width: 100%; }
.left-half.block, .right-half.block { display: block; }

.improvise div.ginput_complex.ginput_container.gf_name_has_2 span,
.improvise .top_label div.ginput_complex.ginput_container.gf_name_has_1,
.improvise .top_label div.ginput_complex.ginput_container.gf_name_has_2,
.improvise .top_label div.ginput_complex.ginput_container.gf_name_has_3 {
	@media only screen and (max-width: 641px) { width: 100%; padding-left: 0; padding-right: 0; }
}

.gform_wrapper ul.gfield_checkbox li label { font-size: 1rem; }
.gform_wrapper ul.gform_fields .gfield_radio li:not(:first-child) { margin-left: var(--m-spacing) !important; }
.gform_wrapper ul.gform_fields li.gfield input[type=radio] { margin-top: 1px; }

.improvise .gform_confirmation_message { margin-top: var(--m-spacing); }
.improvise .gform_card_icon_container { width: 100%; }

.improvise .ginput_container_creditcard {
	flex-wrap: wrap;
	.ginput_cardextras {
		flex-basis: 100%;
		flex-grow: 1;
		display: flex !important;
		gap: 2%;
		span.ginput_cardinfo_left,
		span.ginput_cardinfo_right { display: flex; flex-basis: 33%; gap: 2%; }
		span.ginput_cardinfo_left { flex-basis: 65%; }
		span.ginput_cardinfo_left span.ginput_card_expiration_container,
		span.ginput_cardinfo_right {
			display: flex;
			flex-basis: 100%;
			justify-content: space-between;
			align-items: center;
			width: auto !important;
			margin: 8px 0;
		}
		span.ginput_cardinfo_left span.ginput_card_expiration_container .ginput_card_expiration {
			flex-basis: 48%;
			font-size: 1rem;
			padding: 14px 15px !important;
		}
	}
	select { margin-bottom: 0; }
}

::placeholder { color: #999; }

/****************************************** Social Media Genericon Styling ******************************************/

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.social-menu {
	margin: 0 auto;
	width: 65%;
	ul { list-style: none; padding: 0; margin: 0; text-align: center; li { display: inline-block; position: relative; } }

	/* Icons: brand SVGs (Simple Icons, CC0) drawn as a CSS mask, so each one takes its colour from
	   --social-color (brand colour by default; a child theme can set it, e.g. to a site colour or
	   currentColor). Matched by URL like the old Genericons version; unknown links get a generic
	   external-link icon. Replaces the Genericons glyphs, which had no X, Threads, Bluesky,
	   Snapchat or TikTok. */
	li a::before {
		content: "";
		display: inline-block;
		width: 1.75em;
		height: 1.75em;
		margin: 0 5px;
		vertical-align: middle;
		background-color: var(--social-color, currentColor);
		-webkit-mask: var(--social-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")) center / contain no-repeat;
		mask: var(--social-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")) center / contain no-repeat;
	}
	li a[href*="facebook.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); --social-color: #0866FF; }
	li a[href*="instagram.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); --social-color: #E4405F; }
	li a[href*="youtube.com"], li a[href*="youtu.be"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); --social-color: #FF0000; }
	li a[href*="//x.com"], li a[href*="//www.x.com"], li a[href*="twitter.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'/%3E%3C/svg%3E"); --social-color: #000000; }
	li a[href*="threads.net"], li a[href*="threads.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z'/%3E%3C/svg%3E"); --social-color: #000000; }
	li a[href*="bsky.app"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026'/%3E%3C/svg%3E"); --social-color: #1185FE; }
	li a[href*="snapchat.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z'/%3E%3C/svg%3E"); --social-color: #FFFC00; }
	li a[href*="tiktok.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); --social-color: #000000; }
	li a[href*="pinterest.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E"); --social-color: #BD081C; }
	li a[href*="linkedin.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); --social-color: #0A66C2; }
	li a[href*="github.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); --social-color: #181717; }
	li a[href*="tumblr.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z'/%3E%3C/svg%3E"); --social-color: #36465D; }
	li a[href*="vimeo.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9765 6.4168c-.105 2.338-1.739 5.5429-4.894 9.6088-3.2679 4.247-6.0258 6.3699-8.2898 6.3699-1.409 0-2.578-1.294-3.553-3.881l-1.9179-7.1138c-.719-2.584-1.488-3.878-2.312-3.878-.179 0-.806.378-1.8809 1.132l-1.129-1.457a315.06 315.06 0 003.501-3.1279c1.579-1.368 2.765-2.085 3.5539-2.159 1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.5069.5389 2.45 1.1309 3.674 1.7759 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.8679 3.434-5.7568 6.7619-5.6368 2.4729.06 3.6279 1.664 3.4929 4.7969z'/%3E%3C/svg%3E"); --social-color: #1AB7EA; }
	li a[href*="wordpress.org"], li a[href*="wordpress.com"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/%3E%3C/svg%3E"); --social-color: #21759B; }
	li a[href*="codepen.io"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031c-.005.016-.01.031-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739c0-.028.002-.055.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12 0 18.627 5.373 24 12 24c6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z'/%3E%3C/svg%3E"); --social-color: #000000; }
}

/**************************************** Gutenberg Block (Frontend) Styles *****************************************/

/************************************* WP Cover Block Restricted Width Class **************************************/
			
.wp-block-cover {
	margin-bottom: var(--l-spacing);
	padding: 0;
	.wp-block-cover__image-background { max-height: 100%; }
	:last-child { margin-bottom: 0 !important; }
}

.page-content>.wp-block-cover:first-child {
	margin-bottom: var(--xl-spacing);
	@media (max-width: 480px) { margin-bottom: var(--l-spacing); }
}

.alignfull > .wp-block-cover__inner-container {
	margin: 0 auto;
	max-width: var(--wide-width);
	padding: var(--l-spacing) var(--xl-spacing);
	width: 100%;
	@media (max-width: 1200px) { padding: var(--l-spacing); }
	@media (max-width: 480px) { padding: var(--l-spacing) var(--s-spacing); }
}

.is-style-cover-cta {
	.wp-block-cover__inner-container {
		max-width: var(--restricted-width) !important;
		h1 { margin-bottom: 1em; }
		p:last-of-type {
			margin-bottom: 4em;
			@media (max-width: 480px) { margin-bottom: 3em; }
		}
		.wp-block-buttons { margin-top: 0; }
	}
	&.a-left .wp-block-cover__inner-container { margin-left: 0; }
	&.a-left.cols-left .wp-block-cover__inner-container {
		max-width: 100% !important;
		.wp-block-columns .wp-block-column:first-child {
			max-width: var(--restricted-width) !important;
			padding-right: calc(var(--xl-spacing) * 2);
		}
		.wp-block-columns .wp-block-column:last-child img {
			filter: drop-shadow(10px 10px 35px #333);
			max-height: 23rem;
		}
	}
	&.a-right .wp-block-cover__inner-container { margin-right: 0; }
	&.a-right.cols-right .wp-block-cover__inner-container {
		max-width: 100% !important;
		.wp-block-columns .wp-block-column:first-child img {
			filter: drop-shadow(10px 10px 35px #333);
			max-height: 23rem;
		}
		.wp-block-columns .wp-block-column:last-child {
			max-width: var(--restricted-width) !important;
			padding-left: calc(var(--xl-spacing) * 2);
		}
	}
}

/**************************************** Gutenberg Media Text Block Styles *****************************************/

.wp-block-media-text {
	margin-top: var(--l-spacing);
	margin-bottom: var(--l-spacing);
	@media (max-width: 480px) { margin-top: var(--m-spacing); margin-bottom: var(--m-spacing); }

	.wp-block-media-text__content { padding: var(--l-spacing); }
	&.is-image-fill:not(.has-background) .wp-block-media-text__content { padding: 0 var(--l-spacing); }
	.wp-block-media-text__content :last-child { margin-bottom: 0; }
	&:not(.has-media-on-the-right) .wp-block-media-text__media { text-align: left; }
	.wp-block-media-text__media img { max-width: 100%; }
	.wp-block-buttons .wp-block-button { margin-bottom: 0; }
	&:not(.has-media-on-the-right) .wp-block-media-text__content .wp-block-button:last-child { margin-right: 0; }
	&.has-media-on-the-right .wp-block-media-text__content .wp-block-button:first-child { margin-left: 0; }

	@media (min-width: 769px) and (max-width: 992px) {
		&[style*=grid-template-columns] { grid-template-columns: 50% auto !important; }
		.wp-block-buttons .wp-block-button + .wp-block-button { margin-top: calc(var(--s-spacing) / 2); }
		.wp-block-buttons.alignright .wp-block-button { float: right; clear: right; margin-right: 0; }
		.wp-block-buttons.alignleft .wp-block-button { float: left; clear: left; margin-left: 0; }
		.wp-block-buttons.aligncenter .wp-block-button { margin-left: 0; margin-right: 0; }
	}

	.wp-block-buttons .wp-block-button + .wp-block-button {
		@media (max-width: 480px) { margin-top: calc(var(--s-spacing) / 2); }
	}

	&.is-stacked-on-mobile {
		@media (max-width: 768px) {
			grid-template-columns: 100% !important;
			justify-items: center;
			.wp-block-media-text__media { grid-column: 1/2; grid-row: 1/2; width: 100%; }
			/* Legacy-layout sites: let the figure shrink to the image (centered by
			   justify-items above) instead of stretching it to the full column —
			   core's img { width: 100% } otherwise upscales images narrower than
			   the viewport (e.g. a 512px image at 768px) and makes the block
			   far taller than it used to be. */
			.improvise-legacy-layout & .wp-block-media-text__media { width: auto; max-width: 100%; }
			&.is-image-fill figure.wp-block-media-text__media { min-height: 500px; width: 100%; }
			/* grid-column too: core's own has-media-on-the-right rule puts the figure
			   in column 2, and its stacking breakpoint is 600px — between 601 and
			   768px that sent the figure into an implicit second column, off-screen. */
			&.has-media-on-the-right .wp-block-media-text__media { grid-row: 1; grid-column: 1/2; }
			.wp-block-media-text__media img { max-height: 500px; }
			.wp-block-media-text__content { grid-column: 1/2; grid-row: 2/3; }
			/* Bottom padding matches top (both var(--l-spacing)) rather
			   than 0 — needed for stacked-on-mobile spacing between
			   consecutive Media & Text blocks inside a Group: WP core's
			   own group-layout CSS zeroes each child block's own
			   margin-top/bottom in favor of the group's blockGap
			   spacing, so this block's own margin-bottom (set above,
			   unconditionally) doesn't actually create any gap once
			   nested in a group — this padding was the only real
			   spacing between stacked instances, and 0 collapsed them
			   flush together. :last-child zeroes it back out for
			   whichever instance is actually last in its stack, so it
			   doesn't leave trailing space before whatever follows the
			   group — matches the assumption that stacked Media & Text
			   blocks are direct siblings with nothing else between
			   them; revisit with :last-of-type or a more specific
			   selector if that's ever not true. */
			&:not(.has-background) .wp-block-media-text__content { padding: var(--l-spacing); }
			&:not(.has-background):last-child .wp-block-media-text__content { padding-bottom: 0; }
			/* Legacy-layout sites: the extra bottom padding above only compensates
			   for Group's blockGap zeroing this block's margins. Outside a Group
			   the block's own margin-bottom still does that job, so keep the
			   previous 0 and avoid doubling the gap. */
			.improvise-legacy-layout :not(.wp-block-group) > &:not(.has-background) .wp-block-media-text__content { padding-bottom: 0; }
			&.no-margin-bottom:not(.has-background):not(.alignwide):not(.alignfull) .wp-block-media-text__content { padding: var(--m-spacing) 0 var(--m-spacing); }
			&.alignwide.no-margin-bottom:not(.has-background) .wp-block-media-text__content,
			&.alignfull.no-margin-bottom:not(.has-background) .wp-block-media-text__content { padding-bottom: var(--m-spacing); }
			&.has-media-on-the-right .wp-block-media-text__content { grid-row: 2; }
			.wp-block-buttons .wp-block-button { margin-left: 0; }
			.wp-block-buttons .wp-block-button:last-child { margin-right: 0; }
		}
		@media (max-width: 480px) {
			.wp-block-media-text__content { padding: var(--l-spacing) var(--s-spacing); }
			/* Same fix, same reasoning, as the analogous 768px rule
			   above — bottom padding restored to match top instead of
			   0, :last-child zeroes it back out for whichever instance
			   is actually last in the stack. */
			&:not(.has-background) .wp-block-media-text__content { padding: var(--m-spacing) 0 var(--l-spacing); }
			/* Legacy-layout sites only (Theme Settings): earlier versions kept
			   15px of side padding on plain stacked media-text content so text
			   doesn't touch the screen edge. Gated so other sites are unchanged. */
			.improvise-legacy-layout &:not(.has-background) .wp-block-media-text__content { padding-left: calc(var(--m-spacing) / 2); padding-right: calc(var(--m-spacing) / 2); }
			&:not(.has-background):last-child .wp-block-media-text__content { padding-bottom: 0; }
			&.no-margin-bottom:not(.has-background):not(.alignwide):not(.alignfull) .wp-block-media-text__content { padding: var(--m-spacing) 0 calc(var(--m-spacing) / 2); }
			&.alignwide.no-margin-bottom:not(.has-background) .wp-block-media-text__content,
			&.alignfull.no-margin-bottom:not(.has-background) .wp-block-media-text__content { padding-bottom: var(--s-spacing); }
			.wp-block-buttons.alignright .wp-block-button { float: right; clear: right; margin-right: 0; }
			.wp-block-buttons.alignleft .wp-block-button { float: left; clear: left; margin-left: 0; }
			.wp-block-buttons.aligncenter .wp-block-button { margin-left: 0; margin-right: 0; }
		}
		@media (max-width: 375px) {
			.wp-block-buttons,
			.wp-block-buttons .wp-block-button { width: 100%; }
			.wp-block-buttons .wp-block-button .wp-block-button__link { display: block; }
		}
	}
}

/************************************* WP Block Media Text CTA Class **************************************/

.media-text-cta .wp-block-media-text__content {
	max-width: var(--restricted-width);
	box-sizing: content-box;
	h1, h2, h3, h4, h5, h6 { margin-bottom: 1em; }
	p:last-of-type {
		margin-bottom: 4em;
		@media (max-width: 480px) { margin-bottom: 2em; }
	}
	ul { padding-left: 20px; }
	p + .wp-block-buttons { margin-top: 0; }
}

.wp-block-media-text:not(.media-text-cta) .wp-block-media-text__content .wp-block-buttons {
	@media (max-width: 480px) { margin-top: var(--s-spacing); }
}

/************************************* WP Block Media Text Padded Class **************************************/

.media-padded.wp-block-media-text {
	&.has-media-on-the-right .wp-block-media-text__media,
	&:not(.has-media-on-the-right) .wp-block-media-text__media {
		padding-top: var(--l-spacing);
		padding-bottom: var(--l-spacing);
		@media (max-width: 768px) { padding-bottom: 0; padding-left: var(--l-spacing); padding-right: var(--l-spacing); }
		@media (max-width: 480px) { padding-top: var(--m-spacing); padding-left: var(--m-spacing); padding-right: var(--m-spacing); }
	}
	/* Desktop side padding only. Left unconditional, these sat later in source
	   than the ≤768/≤480px side padding above at equal specificity and
	   overrode it on phones (50px instead of 30px beside the image). */
	@media (min-width: 769px) {
		&.has-media-on-the-right .wp-block-media-text__media { padding-right: var(--l-spacing); }
		&:not(.has-media-on-the-right) .wp-block-media-text__media { padding-left: var(--l-spacing); }
	}
	&:not(.has-media-on-the-right) .wp-block-media-text__media { overflow: hidden; }
	&.is-vertically-aligned-top .wp-block-media-text__content { padding-top: var(--l-spacing); }
	&.is-vertically-aligned-bottom .wp-block-media-text__content { padding-bottom: var(--l-spacing); }
}

/********************************* WP Block Media Text Content Flush Class ***********************************/

.content-flush.wp-block-media-text {
	@media (min-width: 1250px) {
		&:not(.has-media-on-the-right):not(.has-background):not(.alignfull) .wp-block-media-text__content { padding-right: 0; }
		&.has-media-on-the-right:not(.has-background):not(.alignfull) .wp-block-media-text__content { padding-left: 0; }
	}
}

/******************************************* WP Group Block Styling *******************************************/

.wp-block-group {
	margin-top: var(--l-spacing);
	margin-bottom: var(--l-spacing);

	/* Since WP 6.1 the Group block no longer wraps InnerBlocks in a
	   .wp-block-group__inner-container div — content renders directly
	   inside .wp-block-group itself. The :not(:has(...)) guards keep these
	   from double-applying padding on any legacy content that was saved
	   before that change and still has the old wrapper in its stored HTML
	   (see the paired > .wp-block-group__inner-container rules below). */
	&.has-background:not(:has(> .wp-block-group__inner-container)),
	&.alignwide.has-background:not(:has(> .wp-block-group__inner-container)),
	&.alignfull.has-background:not(:has(> .wp-block-group__inner-container)) {
		box-sizing: border-box;
		width: 100%;
		@media (max-width: 480px) { max-width: 100%; }
	}

	/* Legacy-layout sites only (2026-10-02, Theme Settings): width:100% above
	   resolves against this element's immediate parent's content box, which on
	   legacy sites' existing saved content is often already narrowed by that
	   parent's own padding (e.g. a Cover block's inner-container) — pinning
	   this group to that reduced width instead of bleeding to the width the
	   base .alignwide rule (line 197) intends, matching the old theme. Modern
	   sites keep width:100% since newly-saved content doesn't have that
	   nesting. Reproduces that rule's own calc(), not just width:auto — auto
	   would size to the (already-narrowed) containing block same as 100%
	   does here, not bleed past it. Only .alignwide needs this: the plain
	   (unaligned) variant has no bleed formula to restore, and .alignfull's
	   own width:100vw is !important so this block's width never touched it
	   regardless of this override. */
	&.alignwide.has-background:not(:has(> .wp-block-group__inner-container)) {
		.improvise-legacy-layout & {
			width: calc(100% + calc(var(--xl-spacing) * 2));
			@media (max-width: 1200px) { width: calc(100% + calc(var(--l-spacing) * 2)); }
			@media (max-width: 992px) { width: calc(100% + calc(var(--s-spacing) * 2)); }
			@media (max-width: 480px) { width: calc(100% + calc(calc(var(--s-spacing) / 2) * 2)); max-width: var(--wide-width); }
		}
	}

	&.has-background:not(:has(> .wp-block-group__inner-container)) {
		padding: var(--l-spacing);
		/* Legacy-layout sites only (Theme Settings): matches the wrapper
		   version below, where plain background groups tighten their side
		   padding on phones. Gated so other sites render unchanged. */
		@media (max-width: 480px) { .improvise-legacy-layout & { padding: var(--l-spacing) var(--s-spacing); } }
	}

	&.alignwide.has-background:not(:has(> .wp-block-group__inner-container)),
	&.alignfull.has-background:not(:has(> .wp-block-group__inner-container)) {
		padding: var(--l-spacing) var(--xl-spacing);
		/* Both breakpoints target the same selector at equal specificity, so
		   they must stay ordered widest-to-narrowest here — a 480px rule
		   placed in a separate, earlier block would lose to this 1200px one
		   at any viewport ≤480px, since source order (not which max-width is
		   smaller) breaks the tie. */
		@media (max-width: 1200px) { padding: var(--l-spacing); }
		@media (max-width: 480px) { padding: var(--l-spacing) var(--s-spacing); }
	}

	&.alignfull.has-background:not(:has(> .wp-block-group__inner-container)) {
		.alignwide {
			margin-left: 0;

			/* Above 1200px the base .alignwide rule's width: calc(100% +
			   2×xl-spacing) "bleed into the parent's padding" formula gets
			   clipped by its own max-width: var(--wide-width) — this group
			   is alignfull (100vw), not itself capped to --wide-width like
			   a Cover block's .wp-block-cover__inner-container is, so
			   there's no already-centered wrapper for the bleed trick to
			   land inside. Once clipped, a fixed margin-left (0 here, or
			   the base rule's own negative value) can't center a capped-
			   width box — that needs proportional (auto) margins instead.
			   Using width:100% (not the bleed calc) instead of just adding
			   auto margins on top of the existing formula matters too: the
			   bleed calc's clipped width can still exceed this group's own
			   content-box between 1201–1400px (a real gap in a naive
			   auto-margin-only fix), which pins the box left with the
			   overflow spilling out the right instead of centering it.
			   width:100% never produces an over-wide box in the first
			   place, so max-width + auto margins center correctly — verified
			   live at 1201, 1300, 1400, 1440, 1600, and 1920px.
			   This used to apply above 1200px only. Below that the base rule's
			   bleed width stayed, and with margin-left: 0 the box ran 2× the
			   bleed past the group's right padding: off-screen (clipped) at
			   481–1200px, flush with the screen edge at ≤480px. 1.5.13 kept it
			   inside via .wp-block-group__inner-container .alignwide
			   { max-width: 100% }, which no longer matches. */
			width: 100%;
			max-width: var(--wide-width);
			margin-left: auto;
			margin-right: auto;
		}
	}

	/* Full-width Group with no background and no inner wrapper. Before WP 6.1
	   its content sat inside .wp-block-group__inner-container, which (see the
	   legacy fallback below) was capped at --wide-width and centered. Without
	   that wrapper the content runs the full viewport width, so the Group
	   itself gets the article's side padding at each breakpoint; above 1200px
	   that's --xl-spacing, or more where needed to hold the content to
	   --wide-width, centered.
	   Padding goes on the Group, not its children: text blocks never get side
	   padding of their own, and a child's own max-width (e.g. .restricted-width)
	   still applies. Only top-level Groups: inside a Cover, another Group,
	   Columns or Media & Text, the outer block already provides the padding. */
	&.alignfull:not(.has-background):not(:has(> .wp-block-group__inner-container)):not(:where(.wp-block-cover, .wp-block-group, .wp-block-columns, .wp-block-media-text) *) {
		--improvise-full-group-pad: max(var(--xl-spacing), calc((100vw - var(--wide-width)) / 2));
		@media (max-width: 1200px) { --improvise-full-group-pad: var(--l-spacing); }
		@media (max-width: 992px) { --improvise-full-group-pad: var(--s-spacing); }
		@media (max-width: 480px) { --improvise-full-group-pad: calc(var(--s-spacing) / 2); }
		box-sizing: border-box;
		padding-left: var(--improvise-full-group-pad);
		padding-right: var(--improvise-full-group-pad);

		/* Full-width children still reach the screen edges. Above 1200px the base
		   .alignfull 100vw bleed already does; at <=1200px .alignfull .alignfull
		   caps them to 100% (!important), i.e. inside this padding, so pull them
		   back out over it. */
		> .alignfull {
			@media (max-width: 1200px) {
				max-width: calc(100% + var(--improvise-full-group-pad) * 2) !important;
				margin-left: calc(var(--improvise-full-group-pad) * -1);
				margin-right: calc(var(--improvise-full-group-pad) * -1);
			}
		}
	}

	/* Legacy-layout sites only (Theme Settings): a full-width Group WITH a background. The old
	   inner container held its content to --wide-width inside the side padding; without it,
	   content ran the full width minus the padding (1240px at 1440, 1720px at 1920). Widen the
	   side padding instead of capping the children, so a narrower child (e.g. .restricted-width)
	   keeps its own max-width. Only matters above 1200px, where (100vw - wide) / 2 can exceed
	   --xl-spacing; the group is 100vw wide, so 100vw is its own width. */
	&.alignfull.has-background:not(:has(> .wp-block-group__inner-container)) {
		.improvise-legacy-layout & {
			@media (min-width: 1201px) {
				padding-left: max(var(--xl-spacing), calc((100vw - var(--wide-width)) / 2));
				padding-right: max(var(--xl-spacing), calc((100vw - var(--wide-width)) / 2));
			}
		}
	}

	> :last-child { margin-bottom: 0 !important; }
	> .wp-block-media-text { margin-top: 0; margin-bottom: 0; }

	&.is-style-column-last:not(:has(> .wp-block-group__inner-container)) {
		padding-bottom: calc(var(--l-spacing) - var(--m-spacing)) !important;
		.wp-block-columns:last-child .wp-block-column { margin-bottom: var(--m-spacing) !important; }
	}

	/* Legacy fallback: pre-WP-6.1 markup that still has the inner wrapper */
	&.alignfull > .wp-block-group__inner-container { margin: 0 auto; max-width: var(--wide-width); }

	&.has-background > .wp-block-group__inner-container,
	&.alignwide.has-background > .wp-block-group__inner-container,
	&.alignfull.has-background > .wp-block-group__inner-container {
		box-sizing: border-box;
		width: 100%;
		@media (max-width: 480px) { max-width: 100%; }
	}

	&.has-background > .wp-block-group__inner-container { padding: var(--l-spacing); }

	&.alignwide.has-background > .wp-block-group__inner-container,
	&.alignfull.has-background > .wp-block-group__inner-container {
		padding: var(--l-spacing) var(--xl-spacing);
		/* Same widest-to-narrowest ordering requirement as the current-markup
		   version of this rule above — see that comment. */
		@media (max-width: 1200px) { padding: var(--l-spacing); }
		@media (max-width: 480px) { padding: var(--l-spacing) var(--s-spacing); }
	}

	&.alignfull.has-background > .wp-block-group__inner-container {
		box-sizing: content-box;
		@media (max-width: 1200px) { box-sizing: border-box; }
		.alignwide { margin-left: 0; }
	}

	> .wp-block-group__inner-container :last-child { margin-bottom: 0 !important; }
	> .wp-block-group__inner-container .wp-block-media-text { margin-top: 0; margin-bottom: 0; }

	/* Current WP no longer outputs the inner container, so the two resets above match nothing; legacy
	   content was laid out with them (e.g. a trailing 10px margin inside a block collapsing out of it). */
	.improvise-legacy-layout &:not(:has(> .wp-block-group__inner-container)) {
		:last-child { margin-bottom: 0 !important; }
		.wp-block-media-text { margin-top: 0; margin-bottom: 0; }
	}

	.wp-block-columns {
		.wp-block-column .wp-block-buttons:first-child { margin-top: 0; }
		@media (max-width: 781px) and (min-width: 600px) {
			&.has-background { padding-bottom: 0; }
			.wp-block-column,
			.wp-block-column:last-child { margin-bottom: var(--l-spacing) !important; }
		}
	}

	&.has-background .wp-block-columns .wp-block-column {
		@media (min-width: 600px) { margin-bottom: 0; }
	}

	&.is-style-column-last > .wp-block-group__inner-container {
		padding-bottom: calc(var(--l-spacing) - var(--m-spacing)) !important;
		.wp-block-columns:last-child .wp-block-column { margin-bottom: var(--m-spacing) !important; }
	}
}

/****************************************** WP Column Block Styling *******************************************/

.wp-block-columns {
	margin-bottom: 0;
	&.has-background {
		padding: var(--l-spacing) var(--xl-spacing);
		@media (max-width: 1200px) { padding: var(--l-spacing); }
		@media (max-width: 480px) { padding: var(--l-spacing) var(--s-spacing); }
		.wp-block-column { @media (min-width: 600px) { margin-bottom: 0 !important; } }
		.wp-block-column:last-child { margin-bottom: 0 !important; }
	}
	&.alignwide {
		@media (max-width: 1200px) { max-width: 100%; margin-left: 0; margin-right: 0; }
	}
	&.no-stack-mobile {
		flex-wrap: nowrap !important;
		@media (min-width: 600px) { .wp-block-column:not(:first-child) { margin-left: 2em; } }
		@media (max-width: 600px) { gap: 4%; }
	}
	/* The two .wp-block-column boxes were ALREADY equal height without
	   any help from this rule — core's own .wp-block-columns { align-
	   items: initial !important; } computes to `normal`, which behaves
	   as `stretch` in a flex container. What the old rule actually
	   failed at: when a column wraps a single content block (a Group/
	   Cover used as a "card" — the pattern every card-grid section on
	   this site is actually built with), justify-content:space-between
	   has nothing to distribute with only one child, so that child just
	   sits at its own natural content height — its visible background/
	   border falls short of the taller sibling's, even though the
	   invisible outer column box was already equal all along. Verified
	   both the bug and the fix directly (not just reasoned about): a
	   two-column test with a background-colored Group nested in each
	   column showed equal 90px .wp-block-column boxes but UNEQUAL
	   (46px vs 90px) visible card heights before this fix, and equal
	   90px/90px after it. */
	&.equal-height {
		/* Explicit rather than relying on the implicit normal->stretch
		   computation above — harmless no-op for the already-working
		   case, but makes the actual mechanism self-evident instead of
		   silently depending on it, and needs !important to have any
		   chance of beating core's own !important align-items rule. */
		align-items: stretch !important;

		.wp-block-column {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			/* A column with its own "vertical alignment" chosen
			   (top/center/bottom, set via the block's own per-column
			   control) gets align-self set directly by core —
			   .wp-block-column.is-vertically-aligned-center { align-
			   self: center; }, etc. — which overrides whatever
			   align-items the parent computes to, REGARDLESS of the
			   parent's own value, since align-self on the item itself
			   always wins over the container's align-items. That
			   silently defeated the align-items:stretch two lines up
			   for any column with a chosen alignment: confirmed live
			   (a real ftc.crack-ajax.com page, verticalAlignment:
			   "center" + equal-height together) — the black-background
			   column stayed at its own short content height (~29px)
			   while its taller sibling stretched to ~200px, despite
			   align-items:stretch correctly computing on the parent.
			   !important needed for the same reason as align-items
			   above: matching core's own specificity/tie-breaking, not
			   just outranking it by selector count. */
			align-self: stretch !important;

			/* Stretches a column's sole content block (the common
			   "one card per column" pattern) to fill the column's full
			   equalized height. Scoped to :only-child so a column with
			   several direct children (e.g. heading + paragraph +
			   button) keeps the existing space-between behavior above
			   — pushing them apart — instead of every child growing to
			   fill the available space, which flex-grow and
			   justify-content can't both meaningfully do at once. */
			> *:only-child { flex: 1; }

			/* Once a column IS stretched taller than its own content
			   (the whole point of this block), its own chosen vertical
			   alignment should still mean something — a "center"-
			   aligned column's content should read as centered *within*
			   its new, taller box, not silently reverted to the
			   space-between spread above (which, for a short 2-item
			   column like a heading + address, would just shove them
			   apart to opposite ends of a now-much-taller box instead
			   of keeping them together as a centered group). Mirrors
			   core's own top/center/bottom semantics via justify-
			   content instead of align-self, since align-self is
			   already claimed by the stretch fix above. */
			&.is-vertically-aligned-top { justify-content: flex-start; }
			&.is-vertically-aligned-center { justify-content: center; }
			&.is-vertically-aligned-bottom { justify-content: flex-end; }
		}
	}
}

.wp-block-cover .wp-block-columns.alignwide {
	@media (max-width: 1200px) { width: 100%; margin-left: 0; }
}

.wp-block-column {
	margin-bottom: var(--m-spacing);
	:last-child { margin-bottom: 0 !important; }
	.wp-block-image, .is-type-video { margin: 0 0 1em; text-align: center; }
	&.has-background { padding: var(--s-spacing); }
	&.has-text-color p, &.has-text-color h2, &.has-text-color h3,
	&.has-text-color h4, &.has-text-color ul, &.has-text-color li { color: inherit; }

	/* Same fix as the List block's own <li> rule below, but a link needs
	   !important where those don't: the sitewide a:link/a:visited rule
	   targets <a> with a pseudo-class, and a pseudo-class counts the same
	   as a class in CSS specificity — so `.wp-block-column.has-text-color a`
	   (two classes + one element) only ties with it instead of reliably
	   beating it, and a tie falls back to source order, which isn't safe to
	   depend on across a parent/child theme pair (see the h1 a/h2 a rule
	   above, and the identical bug already fixed once in the ca-ai-chat
	   plugin's own CSS, for the same reasoning in more detail). */
	&.has-text-color a { color: inherit !important; }
}

.block-core-columns.has-background { padding: var(--s-spacing); }

.wp-block-group.has-background .wp-block-columns .wp-block-column:last-child {
	@media (max-width: 781px) and (min-width: 600px) { margin-bottom: var(--l-spacing) !important; }
}

/***************************************** WP Yoast FAQ Block Styling ******************************************/

/* Pairs with the render_block filter in functions.php that converts each
   FAQ item's <div>/<strong> markup into <details>/<summary> (same classes),
   giving a native, zero-JS accordion that stays open until re-clicked. */
.wp-block-yoast-faq-block {

	/* Below 850px the block otherwise had no horizontal padding of its
	   own, so .schema-faq-section's cards ran flush to the screen
	   edges — article/page-level padding narrows a lot at this
	   breakpoint (see the article rule elsewhere in this file) and
	   this block was never given any of its own to compensate. */
	@media (max-width: 850px) {
		padding: 0 var(--s-spacing);
		/* Legacy-layout sites keep their own article-level side padding at
		   this width (e.g. 10px at ≤480px), so this was stacking a second
		   20px on top of it — 30px total per side. */
		.improvise-legacy-layout & { padding: 0; }
	}

	& .schema-faq-section {
		background: var(--color-secondary);
    	border: 1px solid var(--color-accent);
    	border-radius: 6px;
		margin-bottom: var(--s-spacing);
	}

	& .schema-faq-question {
		position: relative;
		display: block;
		cursor: pointer;
		font-weight: 700; /* was the <strong> in the original Yoast markup */
		padding: var(--s-spacing);
		/* Dead code before this fix: an identical padding-right used to
		   sit BEFORE the shorthand above, so the shorthand immediately
		   overwrote it back down to a plain var(--s-spacing) again —
		   this line never actually took effect. That's very likely why
		   long question text could run into the +/- toggle (positioned
		   via ::before/::after at right:14px / right:var(--s-spacing),
		   i.e. within this same right-padding zone) — the intended
		   extra clearance silently never applied. Doubled rather than
		   just restored, to give the icon genuine breathing room. */
		padding-right: calc(var(--s-spacing) * 2);
		list-style: none;
		color: var(--color-light-text);

		&::-webkit-details-marker {
			display: none;
		}

		&::before, &::after {
			content: "";
			position: absolute;
			background: var(--color-accent);
    		border-radius: 1px;
		}

		&::before {
			width: 14px;
    		height: 2px;
			right: 14px;
			top: 29px;
		}

		&::after {
			width: 2px;
    		height: 14px;
			right: var(--s-spacing);
			top: 23px;
			transition: transform .2s ease;
		}

		&:focus {
			outline: none;
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}
	}

	& .schema-faq-section[open] .schema-faq-question::after {
		transform: rotate(90deg);
	}

	& .schema-faq-answer {
		padding: 0 var(--s-spacing) var(--s-spacing);
		margin-bottom: 0;
		color: var(--color-light-text);
	}
}

/*************************************** WP Is Type Video Block Styling ***************************************/

.is-type-video {
	.wp-block-embed__wrapper { position: relative; padding-bottom: 177.78%; iframe, .yt-facade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }
	&.wp-embed-aspect-16-9 .wp-block-embed__wrapper { padding-bottom: 56.25%; }
}

/* YouTube click-to-play facade (inc/youtube-facade.php + js/yt-facade.js): thumbnail + play button
   standing in for the player until clicked. Fills the same aspect box as the iframe above. */
.yt-facade {
	display: block;
	overflow: hidden;
	background-color: var(--color-black);
	cursor: pointer;

	.yt-facade__thumb {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
		transition: transform .4s ease;
	}

	/* YouTube-style rounded play button, in the theme's primary color on hover/focus. */
	.yt-facade__play {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 68px;
		height: 48px;
		border-radius: 12px;
		background-color: color-mix(in srgb, var(--color-black) 72%, transparent);
		transform: translate(-50%, -50%);
		transition: background-color .2s ease;

		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 53%;
			border-style: solid;
			border-width: 11px 0 11px 19px;
			border-color: transparent transparent transparent var(--color-white);
			transform: translate(-50%, -50%);
		}
	}

	&:hover .yt-facade__thumb,
	&:focus-visible .yt-facade__thumb { transform: scale(1.03); }

	&:hover .yt-facade__play,
	&:focus-visible .yt-facade__play { background-color: var(--color-primary); }

	&:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

	/* Portrait (Shorts) facade: smaller button to suit the narrow card. */
	&.yt-facade--portrait .yt-facade__play { width: 56px; height: 40px; }

	@media (prefers-reduced-motion: reduce) {
		.yt-facade__thumb { transition: none; }
		&:hover .yt-facade__thumb, &:focus-visible .yt-facade__thumb { transform: none; }
	}
}

/******************************************* WP Table Block Styling *******************************************/

figure.wp-block-table {
	@media (max-width: 768px) {
		display: block!important;
		max-width: 100%;
		overflow: auto;
		table { min-width: var(--restricted-width); }
	}
}

/******************************************* WP List Block Styling *********************************************/

/* A List block's own custom text color (from the block's Color settings)
   is set on the <ul> itself, and color is normally inherited — but the
   sitewide `p, li, pre, .wp-block-verse { color: ... }` rule above targets
   <li> directly, and a rule that targets an element itself always wins over
   an inherited value regardless of specificity. Without this, a List block
   with its own text color renders the <ul> correctly but every <li> falls
   back to the sitewide default color instead. */
.wp-block-list.has-text-color li { color: inherit; }

/**************************************** WP List Block Column Styling ****************************************/

ul.is-style-two-columns {
	column-count: 2;
	column-gap: 4%;
	li:first-child { margin-top: 0; }
	@media (max-width: 992px) { column-count: 1; }
	@media (max-width: 480px) { column-count: 1; }
}

ul.is-style-three-columns {
	column-count: 3;
	column-gap: 4%;
	li:first-child { margin-top: 0; }
	@media (max-width: 768px) { column-count: 2; }
	@media (max-width: 480px) { column-count: 1; }
}

ul.is-style-four-columns {
	column-count: 4;
	column-gap: 4%;
	li:first-child { margin-top: 0; }
	@media (max-width: 992px) { column-count: 2; }
	@media (max-width: 480px) { column-count: 1; }
}

/***************************************** Search Widget Block Styles *****************************************/

.wp-block-search {
	margin: var(--l-spacing) 0;
	max-width: 400px;
	.wp-block-search__input { color: var(--color-dark-text); background-color: transparent; font-size: 1rem; padding: 12px; margin: 0; border: 2px solid var(--color-primary); }
	.wp-block-search__button {
		margin-left: -2px;
		color: var(--color-white);
		border-color: var(--color-primary);
		border-width: 2px;
		background-color: var(--color-primary);
		svg { fill: var(--color-white); transform: scale(1.8) rotateY(180deg); }
		&:hover { color: var(--color-white); background-color: var(--color-accent); border-color: var(--color-accent); svg { fill: var(--color-white); } }
	}
}

/************************************** Gutenberg Block (Backend) Styles **************************************/
.block-editor-block-list__layout .wp-block-cover.restrict-content .wp-block-cover__inner-container {
	background:rgba(255,255,255, 0.7)!important;
}

/****************************************** New Gravity Form Styling ******************************************/
.improvise .gform_wrapper {
	input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
	textarea { padding: 8px 16px !important; }

	fieldset.gfield div.ginput_complex {
		span.name_first,
		span.address_line_1,
		span.address_city,
		span.address_state { padding-right: 1% !important; }

		span.name_last,
		span.address_line_2,
		span.address_zip { padding-left: 1% !important; }

		span.address_line_1, span.address_line_2 { max-width: 50% !important; }
		span.address_city, span.address_state, span.address_zip { max-width: 33.33%; }
	}

	fieldset.gfield .gfield_radio input,
	fieldset.gfield .gfield_checkbox input { width: 16px !important; height: 16px; }

	fieldset.gfield select,
	select { padding: 8px 16px !important; font-size: 1rem; border-radius: 5px !important; }

	fieldset.gfield .ginput_address_state {
		position: relative;
		&:after { height: 13px; background-image: url(https://speechprotectionunion.com/wp-content/themes/improvise/images/down-arrow-black.png); background-repeat: no-repeat; background-size: contain; content: ""; display: inline-block; position: absolute; right: 16px; top: 16px; width: 18px; }
	}

	div.ginput_complex.ginput_container_address { gap: 0; }

	.ginput_container_select:after { height: 13px; }

	input[type=submit],
	input[type=button] { color: white; max-width: 300px; font-size: 1rem !important; text-transform: uppercase; font-weight: bold; border-radius: 5px; font-family: var(--font-primary-heading) !important; padding: 8px 16px; }

	div.ginput_complex.ginput_container_password {
		span { width: 100% !important; }
		span.ginput_left { padding-right: 8px !important; }
		span.ginput_right { padding-left: 8px !important; }
	}

	&.gravity-theme {
		.ginput_container_address { margin-left: 0; margin-right: 0; }
		.gfield { padding: 0 2px; }
		.gfield_label { margin-bottom: 0; }
	}
}

.gform_wrapper.gravity-theme {
	.gfield_checkbox input { width: 16px !important; height: 16px; }
	.gform_page_footer { display: flex; justify-content: space-evenly; padding-top: 30px; margin-top: 30px; border-top: 2px solid var(--color-light-text); }
	.gform_previous_button.button {
		color: white; max-width: 300px; font-size: 1rem !important; text-transform: uppercase; font-weight: bold; border-radius: 5px; font-family: var(--font-primary-heading) !important; padding: 8px 16px;
		background-color: var(--color-primary);
		&:hover { background-color: var(--color-accent); }
	}
}

.improvise .gfield_password_strength {
	padding: 0; border: 0; font-weight: bold;
	&.bad { background-color: red; color: white; }
	&.short { background-color: #e3e3e3; }
	&.good { background-color: yellow !important; }
	&.strong { background-color: green !important; color: white; }
}

h3.gsection_title { margin-bottom: 0; margin-top: var(--m-spacing); }

/* ============================================================
   Reveal on scroll — .ca-reveal / .ca-in
   Toggled onto blocks via the "Reveal on Scroll" control in the
   "Improvise Animations" panel (see inc/gutenberg/blocks/native/
   block-reveal.js). The actual trigger — an IntersectionObserver
   that adds .ca-in the first time an element scrolls into view —
   lives in js/main.js, not here; this is just the two visual
   states.

   No editor-only override is needed here (unlike this theme's
   List-block color-inheritance fix): editor-style.css is a fully
   separate file that never @imports style.css, so a block with
   .ca-reveal in the block editor simply never receives this rule
   at all — it renders at its normal opacity/position there, with
   nothing to override, since main.js's IntersectionObserver only
   ever runs in the outer wp-admin window regardless.
   =========================================================== */

.ca-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s, transform .6s;

	&.ca-in {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ca-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}