/*
	Service pages (/counselling, /trauma-therapy and so on).
	They copy the look of the home page (style.css): the fixed photo
	background, white panels, Raleway type, and the same buttons and fields.
*/

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	background: #313a3d;
}

body {
	margin: 0;
	color: #6f7577;
	font: 400 12pt/1.75em "Raleway", "Helvetica", sans-serif;
}

	/* The photo stays still while the page scrolls. A fixed layer also works on phones. */
	body::before {
		content: '';
		position: fixed;
		inset: 0;
		z-index: -1;
		background-color: #313a3d;
		background-image: url("images/overlay.png"), url("../images/bg.jpg");
		background-position: top left, center center;
		background-repeat: repeat, no-repeat;
		background-size: auto, cover;
	}

a {
	border-bottom: dotted 1px;
	color: #4b61cb;
	text-decoration: none;
	transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
}

	a:hover {
		border-bottom-color: transparent;
	}

strong, b {
	color: #61686b;
	font-weight: 700;
}

p, ul, ol {
	margin: 0 0 2em 0;
}

ul, ol {
	padding-left: 1.25em;
}

li {
	margin-bottom: 0.5em;
}

h1, h2, h3 {
	color: #61686b;
	font-weight: 800;
	letter-spacing: 0.075em;
	line-height: 1.5em;
	margin: 0 0 1em 0;
	text-transform: uppercase;
}

h2 {
	font-size: 1.35em;
	margin-top: 2em;
}

h3 {
	font-size: 1em;
	margin: 1.5em 0 0.5em 0;
}

/* Buttons (the same as style.css) */

.button {
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 2px #dddddd;
	color: #61686b !important;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	height: 3em;
	letter-spacing: 0.05em;
	line-height: 3.15em;
	padding: 0 2em;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	white-space: nowrap;
}

	.button:hover {
		background-color: rgba(144, 144, 144, 0.075);
	}

	.button.special {
		background-color: #4b61cb;
		box-shadow: none;
		color: #ffffff !important;
	}

		.button.special:hover {
			background-color: #4117ea;
		}

	.button:disabled {
		cursor: default;
		opacity: 0.25;
	}

/* Header: white text over the photo, like the home page title */

.site-header {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 7em);
	color: #ffffff;
	text-align: center;
	text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.8);
}

	.site-nav {
		align-items: center;
		display: flex;
		gap: 0.75em 1.5em;
		margin: 0 auto;
		max-width: 80rem;
		padding: 1em 1.5em;
		text-align: left;
	}

		.site-nav .brand {
			border: 0;
			color: #ffffff;
			flex: none;
			font-size: 0.9em;
			font-weight: 800;
			letter-spacing: 0.075em;
			text-transform: uppercase;
			white-space: nowrap;
		}

		.site-nav .links {
			display: flex;
			flex: 1 1 auto;
			flex-wrap: wrap;
			font-size: 0.85em;
			gap: 0.25em 1.25em;
			justify-content: flex-end;
			min-width: 0;
		}

			.site-nav .links a {
				border: 0;
				color: rgba(255, 255, 255, 0.85);
			}

				.site-nav .links a:hover,
				.site-nav .links a[aria-current="page"] {
					color: #ffffff;
				}

		.site-nav .button {
			flex: none;
			font-size: 0.8em;
		}

	.page-title {
		margin: 0 auto;
		max-width: 50em;
		padding: 5em 1.5em 4.5em 1.5em;
	}

		.page-title h1 {
			color: #ffffff;
			font-size: 2.5em;
			line-height: 1.25em;
			margin: 0 0 0.75em 0;
		}

		.page-title p {
			color: #ffffff;
			font-weight: 700;
			letter-spacing: 0.05em;
			margin: 0;
			text-transform: uppercase;
		}

/* Panels: the white boxes of the home page */

.panel {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: inset 0 1px 0 0 #dddddd;
	margin: 0 auto 3em auto;
	max-width: calc(100% - 3em);
	padding: 4em 2.5em 3em 2.5em;
	width: 45em;
}

	.panel > :first-child,
	.panel > .breadcrumb + * {
		margin-top: 0;
	}

	.panel > :last-child {
		margin-bottom: 0;
	}

	.breadcrumb {
		font-size: 0.8em;
		margin-bottom: 2em;
	}

	.lead {
		font-size: 1.1em;
	}

	.related {
		border-top: solid 1px #dddddd;
		font-size: 0.9em;
		padding-top: 1.5em;
	}

/* Contact panel: the same as the form on the home page */

.contact {
	padding-top: 5em;
	text-align: center;
}

	.contact h2 {
		font-size: 1.75em;
		margin-top: 0;
	}

	.contact form {
		margin: 0 0 1em 0;
	}

	.contact .fields {
		display: grid;
		gap: 1.5em;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 2em;
	}

		.contact .fields textarea {
			grid-column: 1 / -1;
		}

	.contact input,
	.contact textarea {
		appearance: none;
		background: rgba(144, 144, 144, 0.15);
		border: none;
		border-radius: 0;
		color: inherit;
		display: block;
		font: inherit;
		outline: 0;
		padding: 0 1em;
		width: 100%;
	}

	.contact input {
		height: 3em;
	}

	.contact textarea {
		padding: 0.75em 1em;
		resize: vertical;
	}

		.contact input:focus,
		.contact textarea:focus {
			box-shadow: inset 0 0 0 2px #4b61cb;
		}

		.contact ::placeholder {
			color: #a8b0b3;
			opacity: 1;
		}

	#contact-status {
		color: #61686b;
		font-weight: 700;
		margin: 0;
	}

		#contact-status:not(:empty) {
			margin-bottom: 1em;
		}

	.contact .form-note {
		font-size: 0.8em;
		margin-bottom: 1em;
	}

/* Footer over the photo, like the home page */

.site-footer {
	color: rgba(255, 255, 255, 0.5);
	padding: 0 1.5em 4em 1.5em;
	text-align: center;
}

	.site-footer a {
		color: inherit;
	}

		.site-footer a:hover {
			color: #ffffff;
		}

	.site-footer .logos {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		justify-content: center;
		margin-bottom: 1.5em;
	}

		.site-footer .logos img {
			height: 6em;
			width: auto;
		}

		.site-footer .logos .bacp {
			border: solid 5px #ffffff;
		}

	.site-footer ul {
		list-style: none;
		padding: 0;
	}

	.site-footer .site-links {
		margin: 0 0 1.5em 0;
	}

		.site-footer .site-links li {
			display: inline-block;
			margin: 0 0.75em;
		}

			.site-footer .site-links a {
				color: rgba(255, 255, 255, 0.85);
			}

	.site-footer .copyright {
		font-size: 0.8em;
		line-height: 1em;
		margin: 0;
	}

		.site-footer .copyright li {
			border-left: solid 1px rgba(255, 255, 255, 0.2);
			display: inline-block;
			margin: 0 0 0.5em 1em;
			padding: 0 0 0 1em;
		}

			.site-footer .copyright li:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}

/* Screen sizes, as in style-large.css to style-xsmall.css */

@media screen and (min-width: 1681px) {

	body {
		font-size: 15pt;
	}

}

@media screen and (max-width: 736px) {

	.site-nav {
		flex-wrap: wrap;
		justify-content: space-between;
	}

		.site-nav .links {
			justify-content: flex-start;
			order: 3;
			width: 100%;
		}

	.page-title {
		padding: 2.5em 1em 3em 1em;
	}

		.page-title h1 {
			font-size: 1.75em;
		}

	.panel {
		padding: 3em 1.5em 2em 1.5em;
	}

	.contact .fields {
		grid-template-columns: 1fr;
	}

	.site-footer .logos img {
		height: 4em;
	}

}

@media screen and (max-width: 480px) {

	.panel {
		max-width: 100%;
		padding: 2.5em 1em 1.5em 1em;
		width: 100%;
	}

}