@import "../components/header/header";
@import "../components/footer/footer";

.template-block {
	.site-header,
	.site-footer {
		padding: #{map-deep-get($config-global, "spacing", "unit")};

		@include media(mobile) {
			padding: #{map-deep-get($config-global, "spacing", "vertical")} 0;
		}
	}

	.wp-block-cover,
	.wp-block-cover-image {
		.site-title,
		.site-description {
			background: transparent;
			color: inherit;	
		}
	}
}

.a8c-template-editor {
	.wp-block-cover,
	.wp-block-cover-image {
		.site-title,
		.site-description {
			background: transparent;
			color: inherit;	
		}
	}
}

.site-header {
	.site-title {
		font-size: 21.6px;
		font-weight: 700;
		text-decoration: underline;
	}

	.site-description {
		font-size: 15px;
	}

	.main-navigation {
		@import "../blocks/button/style";
	}
}

.post-content__block {
	margin-bottom: 160px;
	margin-top: 36px;

	// Minimum z-index to appear above the Template block overlay.
	// @see https://github.com/WordPress/gutenberg/blob/f198997e2c8e377423beb230ce5283914076d396/packages/block-editor/src/components/block-list/style.scss#L495-L496
	// @see https://github.com/WordPress/gutenberg/blob/f198997e2c8e377423beb230ce5283914076d396/assets/stylesheets/_z-index.scss#L8
	z-index: 20;
}

.site-footer {
	@include media(tablet) {
		display: block;
	}

	.main-navigation {
		@extend .footer-navigation;
		
		.footer-menu {
			color: inherit;
		}

		display: block;
		& > div {
			display: block;
		}

		.hide-visually,
		#toggle-menu {
			display: none;
		}

		@include media(mobile-only) {
			> div {
				display: block;
			}
			li {
				width: auto;

				.sub-menu {
					display: none;
				}
			}
		}
	}
}

.site-header,
.site-footer {
	.site-title,
	.site-description {
		&.has-background {
			border-radius: 0;
			padding: #{map-deep-get($config-global, "spacing", "unit")};
		}
	}

	.main-navigation {
		.main-menu.footer-menu li {
			a {
				font-size: inherit;
			}
			&.menu-item-has-children > a::after {
				font-size: 0.6em;
				vertical-align: middle;
			}
		}
		.has-text-color > .main-menu.footer-menu > li > a {
			color: inherit;
		}
		.has-text-align-left > .main-menu.footer-menu {
			justify-content: flex-start;
		}
		.has-text-align-center > .main-menu.footer-menu {
			justify-content: center;
		}
		.has-text-align-right > .main-menu.footer-menu {
			justify-content: flex-end;
		}
		.has-background > .main-menu.footer-menu {
			padding: #{map-deep-get($config-global, "spacing", "unit")};
		}
	}
}