/*
 * allardcharolais.com
 *
 * 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.
 * Breakpoints as in the theme: 30em and 48em (and 43.75em for the gallery).
 * 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: 740px;
	--nav-height: 4.5rem;
}

/* Base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 5rem; /* keeps link targets and focused fields clear of the sticky menu */
}

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: 70vh;
	min-height: 70svh;
}

.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;
	text-transform: uppercase;
}

/* 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;
}

.lead {
	font-size: 1.25rem;
}

/* Gallery: one column, two from 700px, images in their original order down each column */

.gallery {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gallery li {
	margin: 0 0 1.5rem;
	break-inside: avoid;
}

.gallery img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* 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; /* the label above stays clear of the sticky menu too */
}

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;
}

/* Larger screens */

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

	body {
		font-size: 1.125rem;
	}
}

@media (min-width: 43.75em) {
	.gallery {
		columns: 2;
		column-gap: 1.5rem;
	}
}

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

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

	/* The photo fills the window above the menu bar, as on the old site. */
	.site-header--hero {
		min-height: calc(100vh - var(--nav-height));
		min-height: clamp(24rem, calc(100vh - var(--nav-height)), 75rem);
		min-height: clamp(24rem, calc(100svh - var(--nav-height)), 75rem);
	}

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

	.site-header--hero .site-branding {
		padding-bottom: 3rem;
	}

	.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;
	}
}