/*!
Theme Name: Photo AS
Theme URI: https://underscores.me/
Author: Andrew Spittle
Author URI: https://andrewspittle.com
Description: A simple photo theme.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: photo-as
Tags: custom-logo, custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Simple AS is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Variables and Styles
--------------------------------------------- */
/* Root styles and variables */
* {
	margin: 0;
	padding: 0;
}
:root {
	--padding: 1rem;
	--color-black: #000;
	--color-white: #fff;
	--color-grey: #666;
	--color-light-grey: #999;
	--color-light: #efefef;
	--color-selection: #ffeb3b;
	--color-text: var(--color-black);
	--color-text-grey: var(--color-grey);
	--color-light-background: #f9f7fb;
	--color-medium-background: #f2edf8;
	--color-dark-background: #e6deef;
	--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
html {
	background-color: var(--color-white);
	font-family: var(--font-family-mono);
	color: var(--color-text);
}
body {
	background-color: var(--color-white);
	font-size: 0.8125rem;
}
html, body {
	height: 100%;
	margin: 0;
}
body {
	display: flex;
	flex-direction: column;
}
::selection {
	background: var(--color-selection);
}
h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
img {
	width: 100%;
}
li {
	list-style: none;
}
a {
	color: currentColor;
	text-decoration: none;
}
button {
	font: inherit;
	background: none;
	border: 0;
	color: currentColor;
	cursor: pointer;
}
strong, b {
	font-weight: 600;
}
small {
	font-size: inherit;
	color: var(--color-text-grey);
}
.wp-block-separator {
	border: none;
}
hr {
	border: none;
	margin-bottom: 1.5rem;
}
hr:after {
	display: block;
	text-align: center;
	letter-spacing: 0.75em;
	content: '\22B9\22B9\22B9';
	color: var(--color-textdim);
	font-size: 1rem;
}
.video,
.img {
	position: relative;
	display: block;
	--w: 1;
	--h: 1;
	padding-bottom: calc(100% / var(--w) * var(--h));
	background: var(--color-black);
}
.img img,
.video iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.img[data-contain] img {
	object-fit: contain;
}
.img-caption,
.video-caption {
	padding-top: .75rem;
	line-height: 1.5em;
}
.map {
	--w: 2;
	--h: 1;
	padding-bottom: calc(100% / var(--w) * var(--h));
	position: relative;
	overflow: hidden;
	background: var(--color-black);
}
.map iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Container & Structure
--------------------------------------------- */
#page::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px; /* height instead of width */
	pointer-events: none;
	background: linear-gradient(
		to top,
		#f9f7fb 0 8px,    /* lightest stripe */
		#f6f3fa 8px 16px,
		#f2edf8 16px 24px,
		#ece4f3 24px 32px,
		#e6deef 32px 40px /* darkest edge */
	);
	mix-blend-mode: darken; /* allows wrapper background to bleed naturally */
	z-index: 1;
}
#page {
	padding-top: 2.5rem;
}
#page article {
	background: #fff;
	position: relative;
	width: 90%;
	max-width: 720px;
	margin: 0 auto;
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
}
.home article {
	margin-top: 2rem;
}
.post{
	margin: 0 0 2rem;
}
.page {
	margin: 0 0 4rem;
}
.updated:not(.published) {
	display: none;
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color-black);
	line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
p {
	margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	border-left: 4px solid #e6deef;
	padding: 0 0 0 1rem;
}
address {
	margin: 0 0 1.5em;
}
pre {
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5rem;
	padding: 1.6em;
	background: #eee;
	border-radius: 4px;
	overflow-x: auto;
	box-sizing: border-box;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}
code,
kbd,
tt,
var {
	font-family: var(--font-family-mono);
}
abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}
big {
	font-size: 125%;
}
.nav-links a,
.site-footer .site-info a {
	color: var(--color-text-grey);
	text-decoration: underline;
	text-decoration-color: var(--color-light-grey);
	text-underline-offset: 0.1rem;
	transition: color 0.25s ease;
}
.nav-links a:hover,
.site-footer .site-info a:hover {
	color: var(--color-text);
	text-decoration-color: var(--color-text);
}

/* Entry Content
--------------------------------------------- */
#page article {
	margin-bottom: 2rem;
}
.entry-thumbnail {
	margin-bottom: 1.5rem;
}
.entry-thumbnail img {
	width: 100%;
	height: auto;
}
.entry-title {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.entry-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-selection);
	text-decoration-thickness: 3px;
	text-decoration-skip: none;
	text-underline-offset: 0.1rem;
	transition: background 0.25s ease;
}
article .container {
	display: grid;
	grid-template-columns: 2fr 1fr; /* content wider, about-me narrower */
	gap: 2rem;
	align-items: start;
}
.entry-content {
	max-width: 400px;
	margin-left: 0;
}
.entry-content a,
.about-me a {
	text-decoration: underline;
	text-decoration-color: var(--color-selection);
	text-decoration-thickness: 3px;
	text-decoration-skip: none;
	text-underline-offset: 0.1rem;
	transition: background 0.25s ease;
}
.entry-content a:hover,
.about-me a:hover {
	background-color: var(--color-selection);
}
.about-me {
	color: var(--color-text-grey);
	font-size: 0.735rem;
}
.author-description p {
	margin-bottom: 0;
}

/* Navigation
--------------------------------------------- */
.posts-navigation {
	//background: var(--color-light-background);
	font-size: 0.735rem;
	font-weight: 600;
	margin: 0;
	padding: 1rem;
	width: 100%;
}
.posts-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	text-align: center; /* centers nav-home by default */
}
.posts-navigation .nav-newer {
	justify-self: end;
	margin-right: 2rem;
	text-align: right;
}
.posts-navigation .nav-home {
	justify-self: center;
	text-align: center;
}
.posts-navigation .nav-older {
	justify-self: start;
	margin-left: 2rem;
	text-align: left;
}
.posts-navigation .nav-links a {
	text-decoration: none;
}
.posts-navigation .nav-links svg,
.posts-navigation .nav-links img {
	border-radius: 0.25rem;
	width: 2rem;
	height: 2rem;
	fill: currentColor;
	vertical-align: middle;
	display: inline-block;
}
.posts-navigation li {
	flex: 1;
}
.posts-navigation li.nav-older {
	text-align: right;
}
.posts-navigation .nav-arrow {
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
	position: relative;
	top: -0.05em;
}

/* Site Footer
--------------------------------------------- */
.site-footer {
	background: var(--color-medium-background);
	flex-grow: 1;
}
.site-info {
	color: var(--color-grey);
	font-size: 0.735rem;
	width: 90%;
	max-width: 720px;
	margin: 0 auto;
	padding: 1rem 0 0;
}

/* When logged in, move the top stripe below the admin bar */
body.customize-support #page::before {
	top: 32px; /* desktop admin bar height */
}

@media screen and (max-width: 782px) {
	body.customize-support #page::before {
		top: 46px; /* mobile admin bar height */
	}
}

/* Small Screens
--------------------------------------------- */
@media (max-width: 660px) {
	article .container {
		grid-template-columns: 1fr;
	}
	#page article {
		width: calc(100% - 2rem);
	}
	.entry-thumbnail img {
		width: calc(100% + 2rem);
		max-width: none;
		margin: 0 -1rem;
		height: auto;
		display: block;
	}
	.about-me {
		color: var(--color-text-grey);
		font-size: 0.735rem;
		max-width: 400px;
	}
}