/*
 * elp-ltd.com (from the allardcharolais.com template)
 *
 * The look of the WordPress theme Twenty Seventeen (dark colour scheme), with its
 * colours, font sizes, weights and letter-spacing, as one small mobile-first sheet.
 * Front page with the header photo filling the window, no menu, a footer note.
 * Breakpoints as in the theme: 30em and 48em.
 * The Content-Security-Policy allows no inline styles, so all styling lives here.
 */

/* Libre Franklin, latin subset (SIL Open Font License, see ../fonts/LICENSE.txt). */
@font-face {
	font-family: "Libre Franklin";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/libre-franklin-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Libre Franklin";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/libre-franklin-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Libre Franklin";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/libre-franklin-latin-800-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: dark;
	--font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bg: #222;
	--bg-header: #262626;
	--bg-field: #333;
	--line: #333;
	--text: #eee;
	--text-soft: #ccc;
	--link: #ddd;
	--link-hover: #fff;
	--nav-hover: #bbb;
	--field-text: #ccc;
	--field-text-focus: #ddd;
	--field-border: #767676; /* the theme's #555, lightened to 3:1 against the page */
	--field-border-focus: #eee;
	--button: #fff;
	--button-text: #222;
	--button-hover: #bbb;
	--error: #f28b82;
	--notice-error: #ffb900;
	--notice-success: #46b450;
	--gutter: 1.25rem;
	--wrap: 1000px;
	--column: 644px; /* the theme's front-page text column: 740px less its 3em padding */
}

/* Base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.66;
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover,
a:active {
	color: var(--link-hover);
}

:focus-visible {
	outline: 2px solid var(--link-hover);
	outline-offset: 2px;
}

strong {
	font-weight: 800;
}

p,
ul {
	margin: 0 0 1.5em;
}

ul {
	padding-left: 1.25em;
}

h1,
h2 {
	line-height: 1.4;
	margin: 0 0 0.75em;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Skip link: hidden until it receives keyboard focus */

.skip-link {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100;
	padding: 15px 23px 14px;
	border-radius: 3px;
	background: #f1f1f1;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	color: #21759b;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: normal;
}

.skip-link:not(:focus) {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Header: photo with the site title and tagline over it */

.site-header {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--bg-header);
	color: #fff;
}

.site-header__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.site-header--hero {
	min-height: 75vh;
	min-height: 75svh;
}

.site-header--band {
	min-height: 10rem;
}

/* The shading keeps the white title and tagline at WCAG AA contrast even over the white
   cow in the photo. In the hero it reaches 0.5 black at 5rem, where the text starts
   (keep that stop equal to the top padding). */
.site-branding {
	position: relative;
	padding: 5rem 0 1.75rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 5rem, rgba(0, 0, 0, 0.6));
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 1em rgba(0, 0, 0, 0.4);
}

.site-header--band .site-branding {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
	padding: 1.5rem 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4));
}

.site-title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

.site-title a {
	color: inherit;
}

.site-title a:hover,
.site-title a:focus {
	opacity: 0.7;
}

.site-description {
	margin: 0;
	color: #fff;
	font-size: 0.8125rem;
}

/* Scroll-down arrow at the bottom right of the photo (from 48em, as in the theme). */
.site-branding .wrap {
	position: relative;
}

.scroll-down {
	display: none;
	position: absolute;
	right: 0;
	bottom: -0.75em;
	padding: 1em;
	color: #fff;
	line-height: 0;
}

.scroll-down:hover,
.scroll-down:focus {
	opacity: 0.7;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Main menu: stays at the top of the window while scrolling; wraps on small screens */

.site-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--bg);
	font-size: 0.875rem;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0.25rem calc(var(--gutter) - 0.75rem);
	list-style: none;
}

.site-nav a {
	display: block;
	padding: 0.75rem;
	color: var(--link);
	font-weight: 600;
	line-height: 1.5;
}

.site-nav a:hover {
	color: var(--nav-hover);
}

.site-nav a[aria-current="page"] {
	color: var(--link-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* Under 360px (also 320px, a 1280px screen at 400% zoom) the menu still fits on one
   row, so it never covers more than scroll-padding-top allows for. 12px + 8px keeps
   the labels in line with the 20px gutter. */
@media (max-width: 22.49em) {
	.site-nav ul {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}

	.site-nav a {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
}

/* Content */

.site-main {
	padding: 2.5rem 0 1.5rem;
}

.content {
	max-width: calc(var(--column) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.content a {
	box-shadow: inset 0 -1px 0 #f0f0f0;
}

.content a:hover,
.content a:focus {
	color: var(--link-hover);
	box-shadow: 0 3px 0 var(--link-hover);
}

.page-title {
	margin-bottom: 2rem;
	color: var(--link);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.content h2 {
	margin-top: 1.5em;
	color: var(--text);
	font-size: 1.25rem;
	font-weight: 800;
}

.content h2:first-child {
	margin-top: 0;
}

/* The front page's own title is an h2 (as in the theme), styled as the page title. */
.content h2.page-title {
	color: var(--link);
	font-size: 0.875rem;
}

.lead {
	font-size: 1.25rem;
}

/* Contact form */

.field {
	margin: 0 0 1.5em;
}

label {
	display: block;
	margin: 0 0 0.5em;
	color: var(--text);
	font-weight: 800;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.7em;
	border: 1px solid var(--field-border);
	border-radius: 3px;
	background: var(--bg-field);
	color: var(--field-text);
	font: inherit;
	font-size: max(1rem, 1em); /* at least 16px, or iOS Safari zooms in on focus */
	scroll-margin-top: 2.5rem; /* keeps the label above the field in view */
}

textarea {
	resize: vertical;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border-color: var(--field-border-focus);
	color: var(--field-text-focus);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--error);
}

.field-error {
	margin: 0.5em 0 0;
	color: var(--error);
}

button {
	display: inline-block;
	padding: 1em 2em;
	border: 0;
	border-radius: 2px;
	background: var(--button);
	color: var(--button-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
}

button:hover,
button:focus {
	background: var(--button-hover);
}

.form-submit {
	margin: 0;
}

.notice {
	margin: 0 0 2em;
	padding: 0.75em 1em;
	border: 2px solid var(--notice-error);
}

.notice--success {
	border-color: var(--notice-success);
}

.notice p {
	margin: 0;
}

.notice ul {
	margin: 0.5em 0 0;
}

/* Honeypot: off screen (not display: none), so only bots fill it in */

.hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Footer */

.site-footer {
	border-top: 1px solid var(--line);
	color: var(--text-soft);
	font-size: 0.875rem;
	line-height: 1.6;
}

.site-footer .wrap {
	padding-top: 2em;
	padding-bottom: 2em;
}

.site-footer p {
	margin: 0;
}

/* The footer note (the theme's second footer widget column: the right 58% from 48em). */
.footer-note {
	margin: 0 0 2em;
	color: var(--text);
}

.footer-note__title {
	margin: 0 0 1.5em;
	color: var(--text);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Larger screens */

@media (min-width: 30em) {
	:root {
		--gutter: 2rem;
	}

	body {
		font-size: 1.125rem;
	}
}


@media (min-width: 48em) {
	:root {
		--gutter: 3rem;
	}

	body {
		font-size: 1rem;
		line-height: 1.5;
	}

	/* The photo fills the window, as on the old site (there is no menu bar). */
	.site-header--hero {
		min-height: 100vh;
		min-height: 100svh;
	}

	.site-header--band {
		min-height: 10.5rem;
	}

	/* The theme kept room for a menu bar under the title even without a menu. */
	.site-header--hero .site-branding {
		padding-bottom: 5.5rem;
	}

	.scroll-down {
		display: block;
	}

	.footer-note {
		margin-left: 42%;
	}

	.site-title {
		font-size: 2.25rem;
	}

	.site-description {
		font-size: 1rem;
	}

	.site-nav ul {
		padding: 0.75em calc(var(--gutter) - 1.25em);
	}

	.site-nav a {
		padding: 1em 1.25em;
	}

	.site-main {
		padding: 5.5rem 0 3.25rem;
	}

	.page-title {
		margin-bottom: 3.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}