@use "abstracts/__index" as *;

:root {
	--color-primary: var(--color-primary);
	--color-secondary: var(--color-secondary);
	--color-tertiary: var(--color-primary);
	--color-darkest: var(--color-heading);
	--color-darker: var(--color-heading);
	--color-dark: var(--color-body);
	--color-medium: var(--color-body);
	--color-light: var(--color-shadow);
	--color-lighter: var(--color-border);
	--color-lightest: var(--color-white);
}

$colors: (
	primary: var(--color-primary),
	secondary: var(--color-secondary),
	tertiary: var(--color-tertiary),
	success: var(--color-success),
	danger: var(--color-danger),
	warning: var(--color-warning),
	info: var(--color-info),
	black: var(--color-heading), // Fallback for .has-black- classes.
	darkest: var(--color-heading),
	darker: var(--color-darker),
	dark: var(--color-dark),
	medium: var(--color-medium),
	light: var(--color-light),
	lighter: var(--color-lighter),
	lightest: var(--color-white),
	white: var(--color-white), // Fallback for .has-white- classes.
) !default;

@each $color-name, $color-value in $colors {

	.has-#{"#{$color-name}" }-color,
	.has-#{"#{$color-name}" }-color:hover,
	.has-#{"#{$color-name}" }-color:focus {
		color: #{$color-value};
	}

	.has-#{"#{$color-name}" }-background-color {
		background-color: #{$color-value};
	}
}

.before-header .wrap,
.before-footer .wrap,
.site-footer .wrap,
.footer-credits .wrap {
	display: var(--wrap-display, (flex));
	flex-wrap: var(--wrap-flex-wrap, wrap);
	align-items: var(--wrap-align-items, start);
	justify-content: var(--wrap-justify-content, space-between);
}

.before-header {
	z-index: 11; /* 1 more than .site-header so sub-menus are on top. */
	width: 100%;
	min-height: calc(var(--spacing-md) * 2);
	font-size: var(--font-size-sm);
	line-height: 1;
	border-bottom: var(--border);

	--content-max-width: var(--breakpoint-xl);
	--widget-margin: var(--spacing-sm) 0;
	--heading-margin-top: 0;
	--heading-margin-bottom: 0;
	--paragraph-margin: 0;
	--button-margin: 0;
	--wrap-justify-content: center;
	--wrap-align-items: center;
	--menu-item-width: auto;
	--menu-item-margin: 0;
	--menu-item-link-padding: var(--spacing-xs) var(--spacing-sm);

	.widget {
		flex: var(--widget-flex, 1 1 auto);
	}

	&.has-1-widgets {
		text-align: center;

		--wrap-align-items: end;
		--menu-justify-content: end;
	}

	&:not(.has-1-widgets) {
		--widget-width: auto;
	}

	@media (min-width: 800px) {
		--wrap-justify-content: space-between;
		--wrap-flex-wrap: nowrap;
	}

	@media (min-width: 1000px) {
		--wrap-width: 100%;

		.widget:first-of-type {
			margin-left: 0;
		}

		.widget:last-of-type {
			margin-right: 0;
		}
	}
}

@media (min-width: 1000px) {

	.header-left {
		--widget-margin: 0 var(--spacing-md) 0 0;
	}

	.header-right {
		--widget-margin: 0 0 0 var(--spacing-md);
	}
}

.site-footer {
	width: 100%;
	background: var(--site-footer-background, var(--color-white));
	border-top: var(--border);

	--content-max-width: var(--breakpoint-xl);
	--widget-margin: 0;
	--alignfull-margin-right: calc(50% - 50vw);
	--alignfull-margin-left: calc(50% - 50vw);
	--entry-title-margin-bottom: var(--spacing-xxs);
	--menu-justify-content: center;
}

.before-footer,
.footer {
	--paragraph-margin: 0 0 var(--spacing-xs);
}

.before-footer {
	--wrap-justify-content: space-between;
}

.footer-credits {
	padding: var(--footer-credits-padding, (var(--spacing-lg) 0));
	font-size: smaller;
	text-align: var(--footer-credits-text-align, center);

	--wrap-justify-content: center;
	--paragraph-margin: 0;
	--paragraph-width: 100%;
}

.has-boxed-container {

	@media (min-width: 1000px) {

		.site-footer {
			--alignfull-margin-right: calc((var(--site-container-max-width) - var(--content-max-width)) - var(--side-spacing));
			--alignfull-margin-left: calc((var(--site-container-max-width) - var(--content-max-width)) - var(--side-spacing));
		}
	}
}