/**
 *	MIXIN: RANGE
 *
 *	@version 1.1
 *	@date    2026-03-11
 *	@author  michael@mdg.agency
 *
 *	This SASS mixin creates a media query for one or more predefined ranges of
 *	screen widths. It requires a map of named ranges with min and/or max values (in
 *	pixels). Example:
 *
 *		$ranges: (
 *			small:   (max: 500),
 *			medium:  (min: 501, max: 768),
 *			large:   (min: 769)
 *		);
 *
 *	Bootstrap ranges are created by default, but may be overwritten in your
 *	stylesheet after this file is included. It was designed to be used on documents
 *	with at least one finite range (with both min and max), but should work equally
 *	well with a mobile-first design.
 *
 *	Use examples:
 *
 *		@include range.query(small) { ... }
 *
 *		@include range.query(small, medium) { ... }
 *
 *		@include range.query(medium, large) { ... }
 *
 *		@include range.query(alpha, bravo, charlie) { ... }
 *
 *	Argument order does not matter. The ranges are merged inclusively, meaning each
 *	included range can only expand the total scope of the final media query, not
 *	contract it. This means that if ANY included range has a "null" max or min, the
 *	final media query will not have a max-width or min-width constraint,
 *	respectively. It also means that if there are gaps between the included ranges,
 *	they will be ignored, since both min and max will have been provided.
 *
 *	A more sophisticated version of this mixin would detect gaps in the included
 *	ranges and output multiple media queries.

*/
.section-content {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
  padding-block: calc(2 * var(--wp--context--gap));
  padding-inline: var(--wp--context--gap);
  container-type: inline-size;
}

.editor-styles-wrapper .section {
  border: 2px dashed var(--wp--custom--color--neutral);
  padding: 1rem;
  position: relative;
}
.is-style-neutral .editor-styles-wrapper .section, .editor-styles-wrapper .is-style-neutral .section {
  border-color: color-mix(in srgb, var(--wp--custom--color--neutral), var(--wp--custom--color--black) 50%);
}

.editor-styles-wrapper .section::before {
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  padding: 0.5em;
  font-size: 0.75rem;
  line-height: 1;
  background-color: #888;
  color: white;
  font-weight: normal;
  text-transform: uppercase;
}

.section {
  position: relative;
}
.main-inner > .section, .entry-content > .section {
  margin-block-start: 0;
}
.section .section {
  border-radius: 8px;
}
.section.section-width-normal {
  margin-inline: auto;
}
.section.section-width-normal.section-spacing-none {
  max-width: var(--wp--style--global--content-size);
}
.section.section-width-normal.section-spacing-normal {
  width: min(var(--wp--style--global--content-size) - 2 * var(--wp--context--gap), 100% - 2 * var(--wp--context--gap));
}
.section.section-width-wide {
  margin-inline: auto;
}
.section.section-width-wide.section-spacing-none {
  max-width: var(--wp--style--global--wide-size);
}
.section.section-width-wide.section-spacing-normal {
  width: min(var(--wp--style--global--wide-size) - 2 * var(--wp--context--gap), 100% - 2 * var(--wp--context--gap));
}
.section.section-width-full {
  margin-inline: auto;
}
.section.section-width-full.section-spacing-none {
  max-width: none;
}
.section.section-width-full.section-spacing-normal {
  max-width: calc(100% - 2 * var(--wp--context--gap));
}
.section.is-style-default, .section:not([class*=is-style-]) {
  --wp--context--background-color: var(--wp--custom--context--default--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--default--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--default--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--default--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--default--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--default--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--default--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--default--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--default--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--default--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--default--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--default--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--default--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
}
.section.is-style-primary {
  --wp--context--background-color: var(--wp--custom--context--primary--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--primary--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--primary--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--primary--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--primary--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--primary--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--primary--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--primary--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--primary--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--primary--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--primary--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--primary--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--primary--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
}
.section.is-style-secondary {
  --wp--context--background-color: var(--wp--custom--context--secondary--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--secondary--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--secondary--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--secondary--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--secondary--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--secondary--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--secondary--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--secondary--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--secondary--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--secondary--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--secondary--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--secondary--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--secondary--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
}
.section.is-style-tertiary {
  --wp--context--background-color: var(--wp--custom--context--tertiary--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--tertiary--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--tertiary--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--tertiary--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--tertiary--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--tertiary--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--tertiary--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--tertiary--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--tertiary--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--tertiary--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--tertiary--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--tertiary--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--tertiary--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
}
.section.is-style-contrast {
  --wp--context--background-color: var(--wp--custom--context--contrast--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--contrast--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--contrast--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--contrast--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--contrast--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--contrast--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--contrast--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--contrast--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--contrast--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--contrast--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--contrast--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--contrast--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--contrast--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
}
.section.is-style-neutral {
  --wp--context--background-color: var(--wp--custom--context--neutral--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--neutral--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--neutral--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--neutral--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--neutral--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--neutral--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--neutral--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--neutral--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--neutral--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--neutral--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--neutral--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--neutral--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--neutral--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
}
.section.is-style-hero {
  --wp--context--background-color: var(--wp--custom--context--primary--background-color);
  --wp--context--foreground-color: var(--wp--custom--context--primary--foreground-color);
  --wp--context--muted-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 33% );
  --wp--context--faint-color: color-mix( in srgb, var(--wp--context--foreground-color), var(--wp--context--background-color) 80% );
  --wp--context--heading-text-color: var(--wp--custom--context--primary--heading-text-color);
  --wp--context--link-text-color: var(--wp--custom--context--primary--link-text-color);
  --wp--context--link-hover-color: var(--wp--custom--context--primary--link-hover-color);
  --wp--context--link-text-decoration: var(--wp--custom--context--primary--link-text-decoration);
  --wp--context--button-base-color: var(--wp--custom--context--primary--button-base-color);
  --wp--context--button-hover-color: var(--wp--custom--context--primary--button-hover-color);
  --wp--context--button-text-color: var(--wp--custom--context--primary--button-text-color);
  --wp--context--button-hover-text-color: var(--wp--custom--context--primary--button-hover-text-color);
  --wp--context--input-background-color: var(--wp--custom--context--primary--input-background-color);
  --wp--context--input-foreground-color: var(--wp--custom--context--primary--input-foreground-color);
  --wp--context--input-border-color: var(--wp--custom--context--primary--input-border-color);
  background-color: var(--wp--context--background-color);
  color: var(--wp--context--foreground-color);
}

.section-inner {
  position: relative;
  width: 100%;
}

.section.content-width-normal > .section-inner > .section-content {
  max-width: var(--wp--style--global--content-size);
  margin: auto;
}
.section.content-width-wide > .section-inner > .section-content {
  max-width: var(--wp--style--global--wide-size);
  margin: auto;
}
.section.content-width-full > .section-inner > .section-content {
  max-width: none;
}
.section.content-spacing-normal > .section-inner > .section-content {
  padding-block: calc(2 * var(--wp--context--gap));
  padding-inline: calc(1 * var(--wp--context--gap));
}
.section .section.content-spacing-normal > .section-inner > .section-content {
  padding-block: calc(1 * var(--wp--context--gap));
}
.section.content-spacing-none > .section-inner > .section-content {
  padding-block: 0;
  padding-inline: 0;
}
.section.has-decoration .section-content {
  position: relative;
  z-index: var(--wp--custom--z--section-content);
}
.section.has-background-image > div > .section-content {
  position: relative;
  z-index: var(--wp--custom--z--section-content);
  backdrop-filter: blur(var(--section-background-blur));
}
.section.is-style-hero .section-content {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-background-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--wp--custom--z--section-background);
  background-image: var(--section-background-image-url);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.section-background-video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: var(--wp--custom--z--section-background);
  pointer-events: none;
}

.section-decoration-logo {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 37/48;
  width: 259px;
  max-width: 100%;
  opacity: 0.25;
  background-image: url(../../../common/images/section_decoration_logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  z-index: var(--wp--custom--z--section-decoration);
  pointer-events: none;
}

.section-decoration-animals {
  position: absolute;
  bottom: 0;
  left: -10%;
  aspect-ratio: 17/22;
  width: 500px;
  max-width: 100%;
  background-image: url(../../../common/images/section_decoration_animals.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  z-index: var(--wp--custom--z--section-decoration);
  pointer-events: none;
}

.editor-styles-wrapper .section::before {
  content: "Section";
}
.editor-styles-wrapper .section .section {
  margin-block-start: var(--wp--context--gap);
}