/*
Theme Name: Joslyn 2
Theme URI: https://danjoslyn.com
Author: Dani Joslyn
Description: A quiet single-column block theme for a historian's author site, with a lavender dawn at the top of each page and mauveine links. Libre Caslon throughout, bibliography-style publication lists, and built-in meta description and schema markup.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joslyn-2
*/

/* Small refinements theme.json can't express. */

/* Lavender dawn: a wash of lavender behind the header and page title that
   fades to paper before the body text, the same depth on every page. */
body {
	background-color: var(--wp--preset--color--base);
	background-image: linear-gradient(180deg, var(--wp--preset--color--lavender) 0, var(--wp--preset--color--mist) 14rem, var(--wp--preset--color--base) 36rem);
	background-repeat: no-repeat;
	background-size: 100% 36rem;
}

/* Lavender dawn: a wash of lavender behind the header and page title that
   fades to paper before the body text begins. Fixed height, so it looks the
   same on short and long pages. */
body {
	background-image: linear-gradient(180deg,
		var(--wp--preset--color--lavender) 0,
		#EFE6F5 14rem,
		var(--wp--preset--color--base) 38rem);
	background-repeat: no-repeat;
	background-size: 100% 38rem;
}

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

body {
	font-variant-ligatures: common-ligatures;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

/* Old-style figures read better in running text; keep tabular lining figures in lists of dates. */
p, li { font-variant-numeric: oldstyle-nums proportional-nums; }

::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }

a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 1px;
}

.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--base); }

/* Header */
.site-header .wp-block-site-title a { text-decoration: none; }
.site-header .wp-block-navigation a { text-decoration: none; }
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

/* Statement: the one large display moment on the home page. */
.is-style-statement {
	font-family: var(--wp--preset--font-family--caslon-display);
	font-size: var(--wp--preset--font-size--statement);
	line-height: 1.12;
	letter-spacing: -0.012em;
	font-weight: 400;
	max-width: 21ch;
	text-wrap: balance;
	margin-block-end: var(--wp--preset--spacing--50) !important;
}

/* Lede paragraph that follows the statement. */
.is-style-lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

/* Bibliography list: Chicago-style hanging indent, no bullets. */
.wp-block-list.is-style-bibliography {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-bibliography > li {
	padding-left: 2em;
	text-indent: -2em;
	margin-block: 0 0.85em;
}
.wp-block-list.is-style-bibliography > li:last-child { margin-bottom: 0; }

/* Plain list: no bullets, tighter rhythm (courses, links). */
.wp-block-list.is-style-plain { list-style: none; padding-left: 0; }
.wp-block-list.is-style-plain > li { margin-block: 0 0.4em; }

/* Book entries */
.book-entry .book-title { font-style: italic; text-wrap: balance; }
.book-entry .book-subtitle { font-style: italic; color: var(--wp--preset--color--muted); margin-top: 0.15em !important; }
.book-entry .book-status { color: var(--wp--preset--color--muted); font-style: italic; }

/* Section headings need more air above than the block gap gives them. */
.wp-block-post-content > h2.wp-block-heading { margin-top: var(--wp--preset--spacing--50); }
.wp-block-post-content > h2.wp-block-heading:first-child { margin-top: 0; }
.wp-block-post-content > .book-entry:first-child { margin-top: 0 !important; }

/* Rules: one hairline in the rule color, whatever style is picked. */
.wp-block-separator,
.wp-block-separator.is-style-wide,
.wp-block-separator.is-style-default {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	background: none;
	height: 0;
	opacity: 1;
}
.wp-block-separator.is-style-wide { width: 100%; max-width: var(--wp--style--global--content-size); }

/* Books page: an image beside each description. On wide screens the image
   hangs in the left margin so the text keeps the site's full measure. */
.book-row { gap: var(--wp--preset--spacing--40) !important; align-items: flex-start !important; }
.book-row .book-entry { margin-top: 0 !important; }
.book-image { margin: 0; }
.book-image img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
@media (min-width: 1100px) {
	.wp-block-post-content > .book-row {
		width: calc(100% + 12rem);
		max-width: none !important;
		margin-left: -12rem !important;
		gap: 2.5rem !important;
	}
	.book-row > .book-row-image { flex: 0 0 9.5rem !important; }
	.book-row > .wp-block-column:not(.book-row-image) { flex: 1 1 auto !important; }
}
@media (max-width: 781px) {
	.book-image img { max-width: 10rem; }
}

/* Home page */
.home-portrait { margin: 0 0 var(--wp--preset--spacing--40) !important; }
.home-portrait img { display: block; width: 7.5rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.home-statement.is-style-statement {
	font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
	max-width: 24ch;
	margin-block-end: var(--wp--preset--spacing--30) !important;
}
.home-meta { color: var(--wp--preset--color--muted); }

.home-books { margin-top: var(--wp--preset--spacing--50) !important; }
.home-books > li { margin-bottom: 0.75em; }
.home-books .book-sub { display: block; color: var(--wp--preset--color--muted); font-style: italic; font-size: var(--wp--preset--font-size--small); }

/* Index variant: label column + entries, separated by hairlines. */
.home-index { list-style: none; padding: 0; margin-top: var(--wp--preset--spacing--50) !important; border-top: 1px solid var(--wp--preset--color--rule); }
.home-index > li {
	display: grid; grid-template-columns: 7rem 1fr; gap: 0 1.25rem;
	padding: 0.85rem 0; border-bottom: 1px solid var(--wp--preset--color--rule);
}
.home-index .idx-label { color: var(--wp--preset--color--muted); font-style: italic; font-size: var(--wp--preset--font-size--small); padding-top: 0.2em; }
.home-index .idx-label a { color: inherit; text-decoration: none; }
.home-index .idx-label a:hover { text-decoration: underline; }
@media (max-width: 520px) { .home-index > li { grid-template-columns: 1fr; } }

/* Content still to be filled in: shows plainly until replaced. */
mark.fill-in {
	background: #fff1a8;
	color: inherit;
	padding: 0 0.15em;
}

.site-footer a { color: inherit; }

@media (max-width: 600px) {
	.site-header .wp-block-navigation { row-gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}