/* Full-screen, cross-fading background gallery for the whole site. */

/* Let the fixed gallery (below) show through the theme's own backgrounds. */
html,
body {
	background: transparent !important;
}

/* The gallery sits behind all page content. */
#aa-bg-gallery {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background-color: #10141a; /* fallback while the first image loads */
}

/* Each photo is a full-viewport layer; only the active one is visible. */
#aa-bg-gallery .aa-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
	will-change: opacity;
}

#aa-bg-gallery .aa-slide.is-active {
	opacity: 1;
}

/*
 * Readability veil, scoped to blog post content only. The photos stay at full
 * strength everywhere else (header, footer, margins, gaps); a translucent
 * "reading panel" sits behind the post text so it stays legible.
 * Tune the alpha (0 = transparent, 1 = solid white) to taste.
 */
.wp-block-post-content,
.wp-block-post-template li.wp-block-post {
	background-color: rgba(255, 255, 255, 0.72);
	border-radius: 10px;
	padding: clamp(1.25rem, 2vw, 2rem);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Keep the single-post reading panel a centered column, not full width. */
.wp-block-post-content {
	max-width: min(100%, 820px);
	margin-inline: auto;
}

/*
 * Text sitting directly over the photos (header, footer, and the single
 * post/page title) is made to stand out with a light color, a heavy shadow,
 * and a thin dark outline — no background band. Sizes are bumped up too.
 */
header.wp-block-template-part,
header.wp-block-template-part a,
footer.wp-block-template-part,
footer.wp-block-template-part a,
.wp-singular .wp-block-post-title,
.wp-singular .wp-block-post-title a {
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 2px 14px rgba(0, 0, 0, 0.8);
	-webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.55);
}

/* Larger header (site title + nav) and footer text. */
header.wp-block-template-part .wp-block-site-title,
header.wp-block-template-part .wp-block-navigation,
footer.wp-block-template-part {
	font-size: 1.25rem;
	font-weight: 600;
}

/* Larger, bolder single post/page title. */
.wp-singular .wp-block-post-title {
	font-size: clamp(2.75rem, 5.5vw, 4.5rem);
	font-weight: 700;
}

/* Home/blog intro heading ("Mindblown...") styled to match the post title. */
.home .wp-block-heading,
.blog .wp-block-heading {
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 2px 14px rgba(0, 0, 0, 0.8);
	-webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.55);
	font-size: clamp(2.75rem, 5.5vw, 4.5rem);
	font-weight: 700;
}

/*
 * Post meta (date, author, categories) and query pagination also sit over the
 * photos, so give them a white + shadow treatment. Single-post meta is scoped
 * to .wp-singular so the dates inside the index cards stay dark on their panels.
 */
.wp-singular .wp-block-post-date,
.wp-singular .wp-block-post-date a,
.wp-singular .wp-block-post-author,
.wp-singular .wp-block-post-author a,
.wp-singular .wp-block-post-terms,
.wp-singular .wp-block-post-terms a,
.wp-block-query-pagination,
.wp-block-query-pagination a,
/* The "Posted / in / by / Tags:" label words next to the meta values. The
   :has(> ...) keeps this to the small meta group only, not the content panel. */
.wp-singular .wp-block-group:has(> .wp-block-post-date) > p,
.wp-singular .wp-block-group:has(> .wp-block-post-terms) > p,
.wp-singular .wp-block-group:has(> .wp-block-post-author) > p {
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 2px 12px rgba(0, 0, 0, 0.8);
}

/* Home call-to-action ("Got any book recommendations?") sitting over the photo. */
.home .has-x-large-font-size {
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 2px 12px rgba(0, 0, 0, 0.8);
}

/* Respect users who prefer reduced motion: no cross-fade animation. */
@media (prefers-reduced-motion: reduce) {
	#aa-bg-gallery .aa-slide {
		transition: none;
	}
}