/*
 * iowwater.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. No menu: the site is one page.
 * 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;
	--line: #333;
	--text: #eee;
	--text-soft: #ccc;
	--link: #ddd;
	--link-hover: #fff;
	--gutter: 1.875rem; /* Twenty Seventeen: 2em of 15px */
	--wrap: 700px; /* Twenty Seventeen's .wrap below 48em; 1000px from 48em */
	--column: 740px;
}

/* Base */

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

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

/* The footer stretches to the bottom of the window on short pages, so the fixed home-page
   photo never shows below it. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	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;
}

/* Home page: three quarters of the window on small screens, as in Twenty Seventeen. As on the
   old front page, the photo stays put (filling the window) while the page scrolls over it, so
   everything below the header has its own background. */
.site-header--hero {
	min-height: 75vh;
}

.site-header--hero .site-header__image {
	position: fixed;
}

.site-header--hero ~ .site-main,
.site-header--hero ~ .site-footer {
	position: relative;
	background: var(--bg);
}

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

.site-branding {
	position: relative;
	z-index: 2;
	padding: 5rem 0 1rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 1em rgba(0, 0, 0, 0.4);
}

/* Home page: Twenty Seventeen's shading over the photo, under the title (the whole photo on
   small screens, its lowest third from 48em). The photo's lower part is dark water, so the
   white title stays well above WCAG AA contrast. */
.site-header--hero {
	isolation: isolate;
}

.site-header--hero::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3));
}

/* Other pages (the 404 page): a band of the photo, shaded so the title stays readable. */

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

/* Twenty Seventeen's "Scroll down to content" arrow beside the title on the home page:
   shown from 48em, as on the old site. */
.menu-scroll-down {
	display: none;
}

.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Content */

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

.content {
	max-width: min(var(--wrap), 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;
}

/* Home page: "Coming Soon…" spaced and placed like Twenty Seventeen's front-page panel (its
   heading starts at the left edge of the site title, not in the narrower text column). */
.site-header--hero + .site-main {
	padding-bottom: 0.75rem;
}

.site-header--hero + .site-main .content {
	max-width: var(--wrap);
}

.site-header--hero + .site-main .page-title {
	margin-bottom: 0;
}

/* Footer */

.site-footer {
	flex: 1 0 auto;
	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: 2.25rem; /* 2em of 18px */
	}

	body {
		font-size: 1.125rem;
	}

	/* Twenty Seventeen's front-page panel at this size: 3.5em of 18px above the heading; its
	   4.5em bottom margin and the panel's 2em below it. */
	.site-header--hero + .site-main {
		padding-top: 3.9375rem;
		padding-bottom: 7.3125rem;
	}

	/* Twenty Seventeen: 3em (of 18px) under the title from this size. */
	.site-header--hero .site-branding {
		padding-bottom: 3.375rem;
	}
}

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

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

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

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

	.site-header--hero::before {
		height: 33%;
	}

	/* The title sits where Twenty Seventeen put it: 3em below it (the theme's script sets the
	   branding's bottom margin to 0 when there is no menu). */
	.site-header--hero .site-branding {
		padding-bottom: 3rem;
	}

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

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

	.site-branding .wrap {
		position: relative;
	}

	.menu-scroll-down {
		display: block;
		position: absolute;
		top: 2em;
		right: 0;
		padding: 1em;
		color: #999;
	}

	.menu-scroll-down svg {
		display: block;
		width: 18px;
		height: 18px;
		fill: currentColor;
		transform: rotate(90deg);
	}

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

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

	/* Twenty Seventeen: 6em above the heading; its 4.5em bottom margin, the panel's 4.5em and
	   the footer's 3em (of 14px) below it. */
	.site-header--hero + .site-main {
		padding-top: 6rem;
		padding-bottom: 11.875rem;
	}

	.site-header--hero + .site-main .page-title {
		margin-bottom: 0;
	}

	/* The footer line sits 0.7em lower, as Twenty Seventeen's site-info did. */
	.site-footer p {
		padding-top: 0.7em;
	}
}

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