@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';

.page-section {
	padding-top: layout.$large-gap;
	padding-bottom: layout.$large-gap;

	@media screen and (min-width: layout.$breakpoint) {
		padding: layout.$large-gap;
	}

	&.inverse {
		$link-color: colors.$yellow-500;
		color: colors.$inverse-text;
		background-color: colors.$blue-800;

		@include colors.coderdojo-theme {
			background-color: colors.$brown-800;
			$link-color: colors.$green-500;
		}

		h2:after {
			background-color: colors.$gray-50;
		}

		:any-link,
		a[href] {
			color: colors.$gray-300;

			&:hover {
				color: $link-color;
			}
		}

		.cta-link {
			border-color: colors.$gray-300;

			&:hover {
				border-color: $link-color;
			}
		}
	}

	&.footer {
		background-color: colors.$teal-500;

		@include colors.coderdojo-theme {
			background-color: colors.$gray-100;
		}
	}
}

main:not(.expand) + .page-section.footer {
	margin-top: layout.$huge-gap;
}