/********************************************************/
/*
/*      Utility CSS
/*
/********************************************************/
/******************************/
/* Modifier classes
/******************************/
/* Layout/alignment */
.flex {
	&													{ display: flex; }
	
	/* Direction */
	&.direction-row										{ flex-direction: row; }
	&.direction-row-reverse								{ flex-direction: row-reverse; }
	&.direction-column									{ flex-direction: column; }
	&.direction-column-reverse							{ flex-direction: column-reverse; }
	
	/* Wrapping */
	&.wrap												{ flex-wrap: wrap; }
	&.nowrap											{ flex-wrap: nowrap; }
	
	/* Since justify-self is ignored in flexbox layouts, simulate it using margins */
	&:not([class*="direction-column"]) {
		.justify-self {
			&.start												{ margin-inline-end: auto; }
			&.center											{ margin-inline: auto; }
			&.end												{ margin-inline-start: auto; }
			&.stretch											{ margin-inline: 0; }
		}
	}
	&[class*="direction-column"] {
		.justify-self {
			&.start												{ margin-block-end: auto; }
			&.center											{ margin-block: auto; }
			&.end												{ margin-block-start: auto; }
			&.stretch											{ margin-block: 0; }
		}
	}
}

.justify-content {
	&.start												{ justify-content: start; }
	&.center											{ justify-content: center; }
	&.end												{ justify-content: end; }
	&.space-around										{ justify-content: space-around; }
	&.space-between										{ justify-content: space-between; }
	&.space-evenly										{ justify-content: space-evenly; }
	&.stretch											{ justify-content: stretch; }
}

.justify-self {
	&.start												{ justify-self: start; }
	&.center											{ justify-self: center; }
	&.end												{ justify-self: end; }
	&.stretch											{ justify-self: stretch; }
}

.align-items {
	&.start												{ align-items: start; }
	&.baseline											{ align-items: baseline; }
	&.center											{ align-items: center; }
	&.end												{ align-items: end; }
	&.stretch											{ align-items: stretch; }
}

.align-self {
	&.start												{ align-self: start; }
	&.baseline											{ align-self: baseline; }
	&.center											{ align-self: center; }
	&.end												{ align-self: end; }
	&.stretch											{ align-self: stretch; }
}

/* Color */
.zodiac-blue,
.focus-zodiac-blue:is(:hover, :focus, :active),
.focus-zodiac-blue:is(:hover, :focus, :active) > a			{ color: var(--wp--preset--color--zodiac-blue); }
.yellowish-orange,
.focus-yellowish-orange:is(:hover, :focus, :active),
.focus-yellowish-orange:is(:hover, :focus, :active) > a		{ color: var(--wp--preset--color--yellowish-orange); }
.mako-blue,
.focus-mako-blue:is(:hover, :focus, :active),
.focus-mako-blue:is(:hover, :focus, :active) > a			{ color: var(--wp--preset--color--mako-blue); }
.mid-gray,
.focus-mid-gray:is(:hover, :focus, :active),
.focus-mid-gray:is(:hover, :focus, :active) > a				{ color: var(--wp--preset--color--mid-gray); }
.parchment-beige,
.focus-parchment-beige:is(:hover, :focus, :active),
.focus-parchment-beige:is(:hover, :focus, :active) > a		{ color: var(--wp--preset--color--parchment-beige); }
.bridal-heath-white,
.focus-bridal-heath-white:is(:hover, :focus, :active),
.focus-bridal-heath-white:is(:hover, :focus, :active) > a	{ color: var(--wp--preset--color--bridal-heath-white); }

.bg-zodiac-blue 									{ background-color: var(--wp--preset--color--zodiac-blue); }
.bg-yellowish-orange 								{ background-color: var(--wp--preset--color--yellowish-orange); }
.bg-mako-blue 										{ background-color: var(--wp--preset--color--mako-blue); }
.bg-mid-gray 										{ background-color: var(--wp--preset--color--mid-gray); }
.bg-parchment-beige 								{ background-color: var(--wp--preset--color--parchment-beige); }
.bg-bridal-heath-white 								{ background-color: var(--wp--preset--color--bridal-heath-white); }

/* Text */
.maison-neue										{ font-family: var(--wp--preset--font-family--maison-neue); }
.cooper-lt-bt										{ font-family: var(--wp--preset--font-family--cooper-lt-bt); }
.fontawesome										{ font-family: var(--wp--preset--font-family--fontawesome); }
.small												{ font-size: var(--wp--preset--font-size--small); }
.medium-size										{ font-size: var(--wp--preset--font-size--medium); }
.medium-large										{ font-size: var(--wp--preset--font-size--medium-large); }
.large												{ font-size: var(--wp--preset--font-size--large); }
.x-large											{ font-size: var(--wp--preset--font-size--x-large); }
.xx-large											{ font-size: var(--wp--preset--font-size--2-x-large); }
.omega												{ font-size: var(--wp--preset--font-size--omega); }
.thin												{ font-weight: 100; }
.extra-light										{ font-weight: 200; }
.light												{ font-weight: 300; }
.regular											{ font-weight: 400; }
.medium-weight										{ font-weight: 500; }
.semibold											{ font-weight: 600; }
.bold												{ font-weight: 700; }
.extra-bold											{ font-weight: 800; }
.heavy												{ font-weight: 900; }
.uppercase											{ text-transform: uppercase; }
.lowercase											{ text-transform: lowercase; }
.underline											{ text-decoration: underline; }
.text-deco-none,
.text-deco-none	a									{ text-decoration: none; }

/* Images */
.cover,
.cover img											{ object-fit: cover; }
.contain,
.contain img										{ object-fit: contain; }

/* Opacity */
.opacity-full										{ opacity: 1; }
.opacity-half										{ opacity: .5; }
.opacity-zero										{ opacity: 0; }

/* Other */
.user-select-none									{ user-select: none; }

/******************************/
/* Custom formats
/******************************/
span.custom-format {
	/* Strikethrough */
	&.strikethrough {
		position: relative;
		padding-inline: .5em;
		margin-inline: .5em;
		
		&::after {
			content: '';
			display: inline-block;
			position: absolute;
			top: calc(50% + 4px);
			left: 0;
			width: 100%;
			height: 3px;
			background-color: var(--wp--custom--color--default--accent--1);
			translate: 0 -50%;
			z-index: 1;
		}
		
		:has(> &) {
			display: flex;
		}
	}
}

/******************************/
/* Theme variables
/******************************/
body {
	@media (width <= 1200px) {
		& {
			--wp--preset--spacing--8	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--8-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--9	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--9-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--10	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--10-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--11	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--11-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--12	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--12-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--13	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--13-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--14	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--14-5	: var(--wp--preset--spacing--7-5);
			--wp--preset--spacing--15	: var(--wp--preset--spacing--7-5);
		}
	}
	
	@media (width <= 800px) {
		& {
			--wp--preset--spacing--5-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--6	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--7-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--8	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--8-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--9	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--9-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--10	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--10-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--11	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--11-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--12	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--12-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--13	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--13-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--14	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--14-5	: var(--wp--preset--spacing--5);
			--wp--preset--spacing--15	: var(--wp--preset--spacing--5);
		}
		#wpadminbar { display: none !important; }
	}
	
	@media (width <= 600px) {
		& {
			--wp--preset--spacing--4-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--5-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--6	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--7-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--8	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--8-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--9	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--9-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--10	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--10-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--11	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--11-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--12	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--12-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--13	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--13-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--14	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--14-5	: var(--wp--preset--spacing--4);
			--wp--preset--spacing--15	: var(--wp--preset--spacing--4);
		}
	}
	
	/* Replace with theme-specific variable responsiveness */
	@media (width <= 475px) {
		& {
			--wp--custom--header-height: 7.125rem;
		}
	}
	
	@media (width <= 320px) {
		& {
			--wp--custom--header-height: 5rem;
		}
	}
}