/*
Theme Name: JL Selby
Theme URI: https://josephlselby.com
Description: Child theme of Extendable that recreates the dark editorial design of the previous Squarespace site josephlselby.net (near-black background, Superclarendon/Zilla Slab body, Ambroise Std/Playfair Display headings). Design tokens live in theme.json; web fonts are enqueued in functions.php.
Author: Joseph L. Selby
Template: extendable
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: jlselby
*/

/*
 * Almost everything is handled by theme.json. This file only carries the few
 * rules that are awkward to express there:
 *  - the home-page hero overlay (header pinned to the bottom-left of a full
 *    viewport image)
 *  - float layout for the Bio page photos
 *  - Goodreads widget colour fixes on the dark background
 */

/* ---- Home hero: header/nav/title overlaid bottom-left ------------------- */
.jls-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;      /* bottom */
	justify-content: flex-start; /* left   */
}
.jls-hero .wp-block-cover__image-background { object-fit: cover; }
.jls-hero .wp-block-cover__inner-container {
	width: auto;
	margin: 0;
	padding: 30px 35px;
}
.jls-hero .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 46px;
	line-height: 1.1;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #dcefed;
	text-decoration: none;
}
.jls-hero .wp-block-navigation {
	--wp--preset--color--contrast: #fff;
	margin-top: .4em;
}

/* ---- Bio page: legacy left-floated photos ------------------------------ */
.jls-float-left {
	float: left;
	max-width: 350px;
	margin: 0 1.5em 1em 0;
}
.jls-float-left img { display: block; width: 100%; height: auto; }
.jls-clear { clear: both; }
@media (max-width: 600px) {
	.jls-float-left { float: none; max-width: 100%; margin-right: 0; }
}

/* ---- Reads: Goodreads grid widget on dark bg ------------------------- */
.gr_grid_container,
.gr_grid_book_container { background: transparent !important; }
.gr_grid_book_container { border-color: #333 !important; }
#gr_grid_widget a,
.gr_grid_container a { color: #acc8fc !important; }