
/* Widths */

.entry-content,
header,
footer {
	margin: 0;
	padding: 0;

	> * {
		margin: 0;
		padding: calc(var(--bl) * 4) var(--col-gap);

		&:not(.wrapper-width--full) > * {
			max-width: var(--wrap-width--standard);
			width: 100%;
		}

		@media(min-width: 782px) {
			padding: calc(var(--bl) * 6) var(--col-gap);
		}
	}
}

a.wp-block-group {
	text-decoration: none;
}

.wp-block-group {
	position: relative;

	>* {
		position: relative;
		z-index: 1;
	}

	/* Background Colours */

	&:not(.has-background) + &:not(.has-background),
	&.has-contrast-background-color + &.has-contrast-background-color,
	&.has-base-background-color + &.has-base-background-color,
	&.has-accent-background-color + &.has-accent-background-color,
	&.has-body-background-color + &.has-body-background-color,
	&.has-mid-grey-background-color + &.has-mid-grey-background-color,
	&.has-light-grey-background-color + &.has-light-grey-background-color,
	&.has-accent-2-background-color + &.has-accent-2-background-color,
	&.has-accent-3-background-color + &.has-accent-3-background-color,
	&.has-accent-4-background-color + &.has-accent-4-background-color { 
		padding-top: 0; 
	}

	/* Background Overlay */

	&.background-overlay--dark,
	&.background-overlay--light,
	&.background-overlay--colour {
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: var(--wp--preset--color--contrast);
			opacity: 0.75;
			z-index: 0;
		}
	}

	&.background-overlay--light::after { background-color: var(--wp--preset--color--base); }
	&.background-overlay--colour::after { background-color: var(--wp--preset--color--accent); }

	/* Widths */

	&.wrapper-width--large > * { max-width: var(--wrap-width--large); }
	&.wrapper-width--small > * { max-width: var(--wrap-width--small); }
	&.wrapper-width--tiny > * { max-width: var(--wrap-width--tiny); }

	&.auto-width { display: inline-flex; }

	/* Mobile Content Alignment */

	@media(max-width: 781px) {
		&.mobile-content-alignment--left {
			text-align: left;
			justify-content: flex-start;
			p,h1,h2,h3,h4,h5,h6,img,.wp-block-group,.wp-block-buttons,.wp-block-social-links,nav,a {
				text-align: left;
				justify-content: flex-start;
			}

			.wp-block-navigation { align-self: left; text-align: left; }
			.wp-block-navigation.is-vertical { align-items: flex-start; }
			.wp-block-image img { margin-right: auto; }
		}

		&.mobile-content-alignment--center {
			text-align: center;
			justify-content: center;
			p,h1,h2,h3,h4,h5,h6,img,.wp-block-group,.wp-block-buttons,.wp-block-social-links,nav,a {
				text-align: center;
				justify-content: center;
			}

			.wp-block-navigation { align-self: center; text-align: center; }
			.wp-block-navigation.is-vertical { align-items: center; }
			.wp-block-image img { margin-left: auto; margin-right: auto; }
		}

		&.mobile-content-alignment--right {
			text-align: right;
			justify-content: flex-end;
			p,h1,h2,h3,h4,h5,h6,img,.wp-block-group,.wp-block-buttons,.wp-block-social-links,nav,a {
				text-align: right;
				justify-content: flex-end;
			}

			.wp-block-navigation { align-self: right; text-align: right; }
			.wp-block-navigation.is-vertical { align-items: flex-end; }
			.wp-block-image img { margin-left: auto; }
		}
	}
}

/* Padding - Mobile */

.wp-block-group {
	.wp-block-group,
	.wp-block-column {
		@media (max-width: 781px) {
			&[style*="padding-top:var(--wp--preset--spacing--40)"],
			&[style*="padding-top:var(--wp--preset--spacing--50)"],
			&[style*="padding-top:var(--wp--preset--spacing--60)"],
			&[style*="padding-top:var(--wp--preset--spacing--80)"] { 
				padding-top: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-top:var(--wp--preset--spacing--100)"],
			&[style*="padding-top:var(--wp--preset--spacing--120)"],
			&[style*="padding-top:var(--wp--preset--spacing--150)"] { 
				padding-top: calc(var(--bl) * 3)!important; 
			}

			&[style*="padding-bottom:var(--wp--preset--spacing--40)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--50)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--60)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--80)"] { 
				padding-bottom: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-bottom:var(--wp--preset--spacing--100)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--120)"],
			&[style*="padding-bottom:var(--wp--preset--spacing--150)"] { 
				padding-bottom: calc(var(--bl) * 3)!important; 
			}

			&[style*="padding-right:var(--wp--preset--spacing--40)"],
			&[style*="padding-right:var(--wp--preset--spacing--50)"],
			&[style*="padding-right:var(--wp--preset--spacing--60)"],
			&[style*="padding-right:var(--wp--preset--spacing--80)"] { 
				padding-right: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-right:var(--wp--preset--spacing--100)"],
			&[style*="padding-right:var(--wp--preset--spacing--120)"],
			&[style*="padding-right:var(--wp--preset--spacing--150)"] { 
				padding-right: calc(var(--bl) * 3)!important; 
			}

			&[style*="padding-left:var(--wp--preset--spacing--40)"],
			&[style*="padding-left:var(--wp--preset--spacing--50)"],
			&[style*="padding-left:var(--wp--preset--spacing--60)"],
			&[style*="padding-left:var(--wp--preset--spacing--80)"] { 
				padding-left: calc(var(--bl) * 2)!important; 
			}
			
			&[style*="padding-left:var(--wp--preset--spacing--100)"],
			&[style*="padding-left:var(--wp--preset--spacing--120)"],
			&[style*="padding-left:var(--wp--preset--spacing--150)"] { 
				padding-left: calc(var(--bl) * 3)!important; 
			}
		}
	}
}

/* Show Animations */

.entry-content > .wp-block-group:not(.no-animation) {
	.wp-block-group,
	.wp-block-column,
	p,
	h1,h2,h3,h4,h5,h6,
	img,
	.wp-block-safe-svg-svg-icon,
	li,
	a,
	form,
	cite,
	.wp-block-details,
	.wp-block-slider {
		opacity: 0;
	}

	&.show {
		.wp-block-group,
		.wp-block-column,
		p,
		h1,h2,h3,h4,h5,h6,
		img,
		.wp-block-safe-svg-svg-icon,
		li,
		a,
		form,
		cite,
		.wp-block-details,
		.wp-block-slider {
			animation-name: slideDownShow;
	  		animation-duration: .75s;
	  		animation-iteration-count: 1;
	  		animation-direction: normal;
  			animation-fill-mode: forwards;
	  		animation-timing-function: ease;
	  		animation-delay: .5s;
	  	}

		.wp-block-group,.wp-block-column,.wp-block-details > *:not(summary) { animation-delay: .3s; }
		img,.pre-title,.wp-block-safe-svg-svg-icon { animation-delay: .45s; }
		h1,h2 { animation-delay: .6s; }
		h3,h4,h5,h6 { animation-delay: .75s; }
	  	p,li,a,form,cite,.wp-block-details,.wp-block-slider { animation-delay: .9s; }
	}
}

@keyframes slideDownShow {
	0% {
		opacity: 0;
		transform: translateY(-2rem);
	}
  	100% {
  		opacity: 1;
  		transform: translateY(0);
  	}
}
