:root {
	--k2-layout-system-container-padding-left: var(--container-padding-left);
	--k2-layout-system-container-padding-right: var(--container-padding-right);

	--k2-spacing-multiplier: 1;
	--k2-spacing-small: 3rem;
	--k2-spacing-medium: 6rem;
	--k2-spacing-large: 9rem;

	--k2-layout-system-text-max-width: 60ch;
}

body:not(.wp-admin),
.editor-styles-wrapper,
.block-editor-iframe__body {
	font-family: var(--k2-font, sans-serif);
	background-color: var(--page-background);
	color: var(--page-text);
}

/**
 * Buttons
 */
html .wp-block-button .wp-block-button__link,
html .wp-block-button .wp-element-button,
html .editor-styles-wrapper .wp-element-button,
html .editor-styles-wrapper .wp-block-button__link,
.wpcf7 .wpcf7-submit,
html .btn {
	color: var(--primary-color-contrast);
	background-color: var(--primary-color);
	border-radius: var(--roundness-button);
	padding: 0.8em 1.2em;
	text-decoration: none;
}

:is(html .wp-block-button .wp-block-button__link,
html .wp-block-button .wp-element-button,
html .editor-styles-wrapper .wp-element-button,
html .editor-styles-wrapper .wp-block-button__link,
.wpcf7 .wpcf7-submit,
html .btn):hover {
	color: var(--primary-color-contrast);
	background-color: var(--primary-color-hover);
	cursor: pointer;
}

/* k2-button-contrast */
html .wp-block-button.is-style-k2-button-contrast .wp-block-button__link,
html .wp-block-button.is-style-k2-button-contrast .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-contrast .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-contrast .wp-block-button__link,
html .btn.is-style-k2-button-contrast {
	color: var(--primary-color);
	background-color: var(--primary-color-contrast);
}

:is(html .wp-block-button.is-style-k2-button-contrast .wp-block-button__link,
html .wp-block-button.is-style-k2-button-contrast .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-contrast .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-contrast .wp-block-button__link,
html .btn.is-style-k2-button-contrast):hover {
	text-decoration: underline;
}

/* k2-button-outline */
html .wp-block-button.is-style-k2-button-outline .wp-block-button__link,
html .wp-block-button.is-style-k2-button-outline .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-outline .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-outline .wp-block-button__link,
html .btn.is-style-k2-button-outline {
	color: var(--primary-color);
	background-color: transparent;
	outline: 2px solid var(--primary-color);
}

:is(html .wp-block-button.is-style-k2-button-outline .wp-block-button__link,
html .wp-block-button.is-style-k2-button-outline .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-outline .wp-element-button,
html .editor-styles-wrapper.is-style-k2-button-outline .wp-block-button__link,
html .btn.is-style-k2-button-outline):hover {
	color: var(--primary-color-contrast);
	background-color: var(--primary-color);
}

/**
 * Accessibility
 */
:focus-visible {
	outline: 2px dotted #000;
	outline-offset: 3px;
}

/**
 * Container Layout
 */
.container,
html body :is(.is-layout-constrained, .is-layout-flow, .wp-block-post-content, .wp-site-blocks) > :where(:not(.wp-block-post-content,.wp-block-template-part):not(.is-layout-constrained):not(.is-layout-flow):not(.alignleft):not(.alignright):not(.alignfull)),
.editor-styles-wrapper :is(.is-layout-constrained, .is-layout-flow, .wp-block-post-content) > :where(:not(.wp-block-post-content,.wp-block-template-part):not(.is-layout-constrained):not(.is-layout-flow):not(.alignleft):not(.alignright):not(.alignfull)) {
	--_pagewidth: calc(100% - var(--k2-layout-system-container-padding-left) - var(--k2-layout-system-container-padding-right));
	max-width: min(var(--container-max-width), var(--_pagewidth));
	margin-right: auto;
	margin-left: auto;
}

.container {
	--_pagewidth: calc(100% - var(--container-padding-left) - var(--container-padding-right));
}

:is(.container,
html body :is(.is-layout-constrained, .is-layout-flow, .wp-block-post-content, .wp-site-blocks) > :where(:not(.wp-block-post-content,.wp-block-template-part):not(.is-layout-constrained):not(.is-layout-flow):not(.alignleft):not(.alignright):not(.alignfull)),
.editor-styles-wrapper :is(.is-layout-constrained, .is-layout-flow, .wp-block-post-content) > :where(:not(.wp-block-post-content,.wp-block-template-part):not(.is-layout-constrained):not(.is-layout-flow):not(.alignleft):not(.alignright):not(.alignfull))) > * {
	--k2-layout-system-container-padding-left: 0;
	--k2-layout-system-container-padding-right: 0;
}

.is-layout-flex {
	gap: var(--layout-gap);
}

:where(.wp-site-blocks) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

:where(.wp-site-blocks .entry-content) {
	flex: 1;
}

/**
 * HappyTextWidth
 * Controlling Text Width Within a Fixed Container
**/
/* Selector:
   - Applies to content elements like p, li, h1, h2, etc.
   - Ignores elements within footer, header, and those with class .has-text-align-center.
   - The class .ignore_text_max_width acts as a killswitch to disable the feature for the current or following elements.
   - Conversely, the class .use_text_max_width can be applied to copy text not covered by the listed selectors.
*/
:is(.editor, .wp-site-content, .wp-site-blocks) :is(
   p, li, ol, h1, h2, h3, h4, .h1, .h2, .h3, .h4, .wp-block-heading, .use_text_max_width
):not(
   footer *, header *, nav *, .wpcf7 *, .has-text-align-center, .ignore_text_max_width, .ignore_text_max_width *
) {
	/* Padding Trick for Max Width:
	   - The padding-right property is used to achieve the desired max-width effect on the content element.
	   - The min function calculates the smaller value between two calculations:
		 1. 100% minus the custom CSS variable --k2-layout-system-text-max-width
		 2. The container's maximum width minus the text's maximum width.
	   - This ensures that text content doesn't exceed the available space and starts at the same line as full-width content.
	*/
	padding-right: min(
			calc(100% - var(--k2-layout-system-text-max-width)),
			calc(var(--container-max-width) - var(--k2-layout-system-text-max-width))
	);

	/* Box Sizing Adjustment:
	   - Ensure that the box-sizing property includes padding in the total width calculation.
	*/
	box-sizing: border-box;
}

/*
 * TinyMCE
 * TinyMCE adds the following classes to images when the user
 * sets the alignment via TinyMCE, but the required styles are
 * not added, so we add them here.
 */
img.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

img.alignleft {
	margin-right: auto;
}

img.alignright {
	margin-left: auto;
}