/*
Theme Name: SL Macon Custom
Description: Custom Hello Elementor child theme for S.L. Sausage Company in Macon.
Author: ESCO
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sl-macon-custom
*/

:root {
	--site-vh: 1vh;
	--sl-color-ink: #231513;
	--sl-color-red: #f0140a;
	--sl-color-copy: #403a37;
	--sl-color-maroon: #341210;
	--sl-color-oxblood: #581a1b;
	--sl-color-bone: #f3eee6;
	--sl-color-paper: #fffdf9;
	--sl-color-white: #ffffff;
	--sl-color-gray-dark: #5c5653;
	--sl-color-gray-mid: #8a8481;
	--sl-color-gray-light: #d7d1cd;
	--sl-container: 80rem;
	--sl-section-block: 8rem;
	--sl-section-inline: 2rem;
}

html.lenis,
html.lenis body {
	height: auto;
}

.u-full-height {
	min-height: calc(var(--site-vh) * 100);
}

.u-clip {
	overflow: clip;
}

.u-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

[data-lenis-prevent] {
	overscroll-behavior: contain;
}

body {
	background: var(--sl-color-paper);
	color: var(--sl-color-copy);
}

body.sl-macon-custom {
	font-family: var(--font-body, "Barlow Semi Condensed"), Arial, sans-serif;
}

:where(body.sl-macon-custom) p {
	font-size: var(--type-body, 1.1rem);
	line-height: var(--leading-body, 1.65em);
}

/* Preserve typography assigned to a rich-text widget or an accent wrapper. */
:where(body.sl-macon-custom) :where(.elementor-widget-text-editor, .sl-body-large, .sl-script-large, .sl-script-eyebrow, .sl-accent) p {
	font-size: inherit;
	line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Teko", sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
}

.sl-accent {
	font-family: "Caveat", cursive;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.sl-hero-display {
	font-family: "Teko", sans-serif;
	font-size: clamp(4rem, 9vw, 8.5rem);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 0.95;
	text-transform: uppercase;
}

.sl-section {
	padding-block: var(--sl-section-block);
	padding-inline: var(--sl-section-inline);
}

.sl-container {
	margin-inline: auto;
	max-width: var(--sl-container);
	width: 100%;
}

/* Transparent paper layers preserve the section color and leave border pseudos free. */
body.sl-macon-custom :is(.sl-texture-wax-light, .sl-texture-wax-dark, .sl-texture-crumpled-light, .sl-texture-crumpled-dark) {
	background-image: var(--sl-paper-texture);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sl-texture-wax-light { --sl-paper-texture: url("assets/textures/wax-light.webp"); }
/* Aligned layers strengthen translucent highlights without adding new assets. */
.sl-texture-wax-dark { --sl-paper-texture: url("assets/textures/wax-dark.webp"), url("assets/textures/wax-dark.webp"); }
.sl-texture-crumpled-light { --sl-paper-texture: url("assets/textures/crumpled-light.webp"); }
.sl-texture-crumpled-dark { --sl-paper-texture: url("assets/textures/crumpled-dark.webp"), url("assets/textures/crumpled-dark.webp"); }

/* Keep the Style Guide swatches as full-width section examples. */
body.sl-macon-custom .elementor-element-sltextures {
	flex-direction: column;
	gap: 0;
}
body.sl-macon-custom .elementor-element-sltextures > .e-flexbox-base {
	width: 100%;
}

/* Extend the section's own solid background across an SVG torn edge. */
:is(.sl-border-paper-top, .sl-border-paper-bottom, .sl-border-rustic-top, .sl-border-rustic-bottom) {
	position: relative;
	overflow: visible;
	z-index: 1;
	--sl-border-height: 3rem;
}

:is(.sl-border-paper-top, .sl-border-rustic-top)::before,
:is(.sl-border-paper-bottom, .sl-border-rustic-bottom)::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--sl-border-height);
	background-color: inherit;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	mask-mode: alpha;
}

:is(.sl-border-paper-top, .sl-border-rustic-top)::before {
	top: auto;
	bottom: calc(100% - 1px);
}

:is(.sl-border-paper-bottom, .sl-border-rustic-bottom)::after {
	top: calc(100% - 1px);
	bottom: auto;
	transform: rotate(180deg);
}

.sl-border-paper-top::before,
.sl-border-paper-bottom::after {
	-webkit-mask-image: url("assets/borders/paper.svg");
	mask-image: url("assets/borders/paper.svg");
}

.sl-border-rustic-top::before,
.sl-border-rustic-bottom::after {
	-webkit-mask-image: url("assets/borders/rustic.svg");
	mask-image: url("assets/borders/rustic.svg");
}

/* Textured paper uses one background canvas across the section and both edges. */
body.sl-macon-custom :is(.sl-texture-wax-light, .sl-texture-wax-dark, .sl-texture-crumpled-light, .sl-texture-crumpled-dark):is(.sl-border-paper-top, .sl-border-paper-bottom, .sl-border-rustic-top, .sl-border-rustic-bottom) {
	--sl-edge-top: 0px;
	--sl-edge-bottom: 0px;
	background-image: none;
	isolation: isolate;
}

.sl-border-paper-top { --sl-edge-top-mask: url("assets/borders/paper.svg"); }
.sl-border-paper-bottom { --sl-edge-bottom-mask: url("assets/borders/paper-bottom.svg"); }
.sl-border-rustic-top { --sl-edge-top-mask: url("assets/borders/rustic.svg"); }
.sl-border-rustic-bottom { --sl-edge-bottom-mask: url("assets/borders/rustic-bottom.svg"); }

body.sl-macon-custom :is(.sl-texture-wax-light, .sl-texture-wax-dark, .sl-texture-crumpled-light, .sl-texture-crumpled-dark):is(.sl-border-paper-top, .sl-border-rustic-top) {
	--sl-edge-top: var(--sl-border-height);
}

body.sl-macon-custom :is(.sl-texture-wax-light, .sl-texture-wax-dark, .sl-texture-crumpled-light, .sl-texture-crumpled-dark):is(.sl-border-paper-bottom, .sl-border-rustic-bottom) {
	--sl-edge-bottom: var(--sl-border-height);
}

body.sl-macon-custom :is(.sl-texture-wax-light, .sl-texture-wax-dark, .sl-texture-crumpled-light, .sl-texture-crumpled-dark):is(.sl-border-paper-top, .sl-border-paper-bottom, .sl-border-rustic-top, .sl-border-rustic-bottom)::before {
	content: "";
	position: absolute;
	top: calc(0px - var(--sl-edge-top));
	bottom: calc(0px - var(--sl-edge-bottom));
	left: 0;
	right: 0;
	width: auto;
	height: auto;
	z-index: -1;
	transform: none;
	pointer-events: none;
	background-color: inherit;
	background-image: var(--sl-paper-texture);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-mask-image: var(--sl-edge-top-mask, none), linear-gradient(#000, #000), var(--sl-edge-bottom-mask, none);
	mask-image: var(--sl-edge-top-mask, none), linear-gradient(#000, #000), var(--sl-edge-bottom-mask, none);
	-webkit-mask-size: 100% var(--sl-edge-top), 100% calc(100% - var(--sl-edge-top) - var(--sl-edge-bottom) + 2px), 100% var(--sl-edge-bottom);
	mask-size: 100% var(--sl-edge-top), 100% calc(100% - var(--sl-edge-top) - var(--sl-edge-bottom) + 2px), 100% var(--sl-edge-bottom);
	-webkit-mask-position: center top, center calc(var(--sl-edge-top) - 1px), center bottom;
	mask-position: center top, center calc(var(--sl-edge-top) - 1px), center bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-composite: source-over;
	mask-composite: add;
}

body.sl-macon-custom :is(.sl-texture-wax-light, .sl-texture-wax-dark, .sl-texture-crumpled-light, .sl-texture-crumpled-dark):is(.sl-border-paper-top, .sl-border-paper-bottom, .sl-border-rustic-top, .sl-border-rustic-bottom)::after {
	content: none;
}

@media (max-width: 767px) {
	:is(.sl-border-paper-top, .sl-border-paper-bottom, .sl-border-rustic-top, .sl-border-rustic-bottom) {
		--sl-border-height: 1.5rem;
	}
}

.elementor-button,
button,
input[type="button"],
input[type="submit"] {
	background-image: linear-gradient(var(--sl-color-maroon), var(--sl-color-maroon));
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% 0;
	overflow: hidden;
	position: relative;
	transition: background-size 280ms cubic-bezier(0.2, 0.75, 0.25, 1), color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.elementor-button:hover,
.elementor-button:focus-visible,
button:hover,
button:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
	background-size: 100% 100%;
	box-shadow: 0 0.45rem 0 var(--sl-color-gray-mid);
	color: var(--sl-color-paper);
	transform: translateY(-0.15rem);
}

@media (max-width: 767px) {
	:root {
		--sl-section-block: 4rem;
		--sl-section-inline: 1rem;
	}
}

body.sl-macon-custom .e-atomic-element:has(.elementor-empty-view) {
	min-height: 0;
}

body.sl-macon-custom .elementor-location-header .e-atomic-element:has(.elementor-empty-view) {
	min-height: 0 !important;
}

.elementor-editor-active [data-gsap],
.elementor-editor-active .gsap-fade,
.elementor-editor-active .gsap-fade-up,
.elementor-editor-active .gsap-fade-down,
.elementor-editor-active .gsap-fade-left,
.elementor-editor-active .gsap-fade-right,
.elementor-editor-active .gsap-scale-in,
.elementor-editor-active .gsap-stagger,
.elementor-editor-active .gsap-parallax {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

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

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.elementor-button,
	button,
	input[type="button"],
	input[type="submit"] {
		transform: none !important;
	}
}