@charset "UTF-8";

html {
	--market-field-fc-green: #1db9b8;
	--bg01-fadeto: #929b5f;

	background: white;
	color: black;
	font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
	font-weight: normal;
	font-size: 150%;/* Vertical rhythm: 24 pixels */
}

body {
	/* Allow footer to position itself at the bottom of the viewport using margin-top:auto when page content is shorter */
	display: flex;
	flex-direction: column;
	min-height: 100vh;

	margin: 0;
	border-style: none;
}

a {
	color: black;
	font-weight: bold;
	vertical-align: top;/* Stop bold links from taking up more vertical space than line-height would suggest - see https://stackoverflow.com/questions/8376795/bold-text-line-height-is-higher-than-normal-text-line-height */
}

p a {
	/* Stop bold links from taking up more vertical space than line-height would suggest - see https://stackoverflow.com/questions/8376795/bold-text-line-height-is-higher-than-normal-text-line-height */
	line-height: 1;
	vertical-align: baseline;
}

picture img {
	display: block;/* Stop the img from taking up extra vertical space inside the picture element */
}

.visually-hidden {
	/* See:
	  - https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-visually-hidden
	  - https://github.com/alphagov/govuk-frontend/blob/v5.13.0/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss#L54-L68
	  */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
	user-select: none;
}


.width-container {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (max-width: 576px) {
	.width-container {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

body > header,
nav,
footer{
	background: white;
}

body > header {
	padding-top: 1rem;
}

body > header > .width-container {
	display: flex;
	align-items: center;
}

body > header .logo {
	margin-right: 1rem;
}

body > header h1 {
	margin: 0;
	font-family:
		/* https://modernfontstacks.com */
		'Futura Bold',
		'Seravek',
		'Gill Sans Nova',
		'Ubuntu',
		'Calibri',
		'DejaVu Sans',
		'source-sans-pro',
		sans-serif;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1;
	text-transform: uppercase;
}

@media (max-width: 576px) {
	body > header {
		padding-top: .5rem;
	}

	body > header .logo {
		margin-right: .5rem;
	}
	body > header h1 {
		font-size: 1rem;
	}
}

nav {
	border-bottom: solid .125rem black;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 -1rem;
	padding: 0;
	font-family:
		/* https://modernfontstacks.com */
		'Futura Bold',
		'Seravek',
		'Gill Sans Nova',
		'Ubuntu',
		'Calibri',
		'DejaVu Sans',
		'source-sans-pro',
		sans-serif;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

nav ul a,
nav ul span {
	display: block;
	padding: .5rem 1rem;
	text-decoration: none;
	color: black;
}

nav ul .current {
	background:
		linear-gradient(
			var(--market-field-fc-green) 0px,
			var(--market-field-fc-green) 6px,
			transparent 7px,
			transparent 12px
		)
		bottom
		no-repeat;
	background-size: calc(100% - 2rem) .5rem;
}

@media (max-width: 576px) {
	nav ul {
		margin: .125rem -.5rem;
	}

	nav ul a,
	nav ul span {
		padding: .125rem .5rem;
		font-size: .75rem;
		line-height: 1rem;
	}

	nav ul .current {
		background-image: linear-gradient(
			var(--market-field-fc-green) 0px,
			var(--market-field-fc-green) 3px
		);
		background-size: calc(100% - 1rem) .125rem;
	}
}

main {
	flex: 1;
	padding: .875rem 0 5rem;
	background:
		var(--bg01-fadeto)
		url(../images/bg01.jpg)
			50% -5rem
			no-repeat
	;
	background-size: 100vw auto;
}

@media (max-width: 1024px), (orientation: portrait) {
	main {
		background-image: url(../images/bg01-narrow.jpg);
		background-position-y: -3em;
	}
}

@media (max-width: 576px) {
	main {
		padding-top: .5rem;
	}
}


main header {
	margin: 1rem 0;
	border-style: solid;
	border-color: black;
	border-width: .125rem;
	border-radius: 2rem;
	padding: .875rem 2rem .875rem;
	background: var(--market-field-fc-green);
}

main header .logo {
	float: left;
	margin: -2rem 1rem 0 -3rem;
}

main header h1 {
	margin: 0;
	font-size: 2rem;
	line-height: 1;
}

main header p {
	margin: 1rem 0 0 5rem;
	font-size: 1.25rem;
	line-height: 2rem;
}

main header p a {
	display: block;
	line-height: inherit;
}

@media (max-width: 576px) {

	main header {
		margin-top: 3rem;
		border-radius: .75rem;
		padding: 0 .5rem 2rem;
		text-align: center;
	}

	main header .logo {
		float: none;
		width: 144px;
		display: block;
		margin: -2.5rem auto 0;
	}

	main header h1 {
		margin: 0 0 .5rem;
		font-size: 1.5rem;
		line-height: 2rem;
	}

	main header p {
		margin: 0;
		font-size: 1.125rem;
		line-height: 1.5rem;
	}

	main header p a {
		margin-top: .5rem;
	}
}


main .news {
	border: solid .125rem black;
	padding: .875rem 1rem;
	background: white;
}

main .news h2 {
/*	margin: -.5rem 0 .375rem;*/
	margin: 0 0 .875rem;
	border-bottom: solid .125rem black;
	background: white;
	font-size: 1.5rem;
	line-height: 2rem;
}


@media (max-width: 576px) {
	main .news {
		padding: 0 .5rem;
	}

	main .news h2 {
		margin: .25rem 0 .5rem;
	}
}

main .news .articles {
	display: flex;
	column-gap: 1.5rem;
}

main .news article {
	flex: 1 1 50%;
/*	border:  solid .125rem black;
	padding: .875rem .5rem;
	background: white;*/
}

main .news article h3 {
	margin: 0;
	font-size: 1rem;
	line-height: 1;
}

main .news article p {
	margin: 0 0 1rem;
	font-size: .75rem;/* 18px */
	line-height: 1rem;/* 24px */
}

main .news article :last-child {
	margin-bottom: 0;
}

@media (max-width: 576px) {

	main .news .articles {
		display: block;
	}

	main .news article {
		margin-bottom: 1.5rem;
	}

	main .news article:last-child {
		margin-bottom: 1.375rem;
	}

	main .news article p {
		margin: .5rem 0 0;
	}

	main .news article p:last-child {
		margin: 0;
	}
}

main .content {
	border: solid .125rem black;
	padding: .875rem 1rem;
	background: white;
	font-size: .875rem;/* 21px */
	line-height: 1rem;/* 24px */
	overflow-wrap: break-word;
}

main .content h1 {
	margin: 0 0 1rem;
	font-size: 2rem;/* 48px */
	line-height: 2rem;/* 48px */
}

@media (max-width: 576px) {
	main .content {
		padding: .875rem .5rem;
	}

	main .content h1 {
		font-size: 1.75rem;/* 42px */
		line-height: 2rem;/* 48px */
	}
}

main .content h2 {
	margin: 0;
	font-size: 1.5rem;/* 36px */
	line-height: 2rem;
}

main .content p,
main .content ul {
	margin: 0 0 1rem;/* 0 0 24px */
}

main .content dl dt {
	font-weight: bold;
}


main .content.code-of-conduct h2 {
	margin-top: 2rem;
}

main .content.code-of-conduct h3,
main .content.code-of-conduct h4 {
	margin: 0 0 .5rem;
	padding-top: .5rem;
}

main .content.code-of-conduct h4 {
}

main .content.code-of-conduct ul {
	list-style-type: none;
	padding-left: 2rem;
}

main .content.code-of-conduct ul li {
	position: relative;
	margin-bottom: 1rem;
}

main .content.code-of-conduct ul li::before {
	content: "⚽️";
	position: absolute;
	left: -1.2rem;
/*	margin: 0 .5em 0 -.5em;*/
}


main .content ol.safeguarding {
	list-style-type: lower-roman;
}


main .content article {
	margin-bottom: 2rem;
}

main .content article h1 {
	margin: .75rem 0 0;
	font-size: 1.75rem;
}

main .content article h2 {
	padding-top: .5rem;
	padding-bottom: .25rem;
	font-size: 1rem;/* 24px */
	line-height: 1;
}

main .content article time {
	display: block;
	margin-bottom: .25rem;
	font-size: .75rem;
	line-height: 1rem;
}

main .content article .summary {
	margin: 0;
}

main .content article .read-more {
	display: block;
	padding: .5rem 0;
	font-size: .75rem;
	line-height: 1rem;
}

footer {
	padding-bottom: 1rem;
}

footer aside {
	margin-bottom: .875rem;
	border-bottom: solid .125rem black;
	padding: .5rem;
	background: #e3e8e2;
	text-align: center;
}

footer aside h2 {
	margin: -.25rem 0 .25rem;
	font-size: .5rem;
	line-height: 1rem;
	text-transform: uppercase;
	letter-spacing: .125rem;
}

footer aside img {
	display: block;
	margin: 0 auto;
}

footer p {
	margin: 0 0 1rem;/* 24px 0 */
	font-size: .75rem;/* 18px */
	line-height: 1rem;/* 24px */
}

footer .copyright {
	position: relative;
	padding-right: 3rem;
}

footer .copyright p {
	margin-bottom: 0;
}

footer .copyright::after,
footer .copyright p::after {
	position: absolute;
	bottom: 0;
	line-height: 1;
}
footer .copyright::after {
	content: "🥅";
	z-index: 1;
	right: 0;
	font-size: 3rem;
}
footer .copyright p::after {
	content: "⚽️";
	z-index: 2;
	padding: 0 .5rem;
	right: .75rem;
	font-size: 1.25rem;
}