/*
Theme Name: Wherever We Roam
Theme URI: https://wherever-we-roam.com/
Author: Doug & Christy
Description: Block theme for wherever-we-roam.com. Palette and typography come
  from theme.json; this file only carries the few things blocks can't express.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.3
License: GPL-2.0-or-later
Text Domain: wwr
*/

/* Sticky header with the same translucency as the mockup. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 249, 246, .92);
	backdrop-filter: saturate(1.6) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Full-bleed hero image on a post: the featured image should not be boxed in
   by the content width the way the body text is. */
.wwr-hero { position: relative; }
.wwr-hero img { width: 100%; max-height: 70vh; object-fit: cover; display: block; }

/* Destination cards in a query loop. */
.wwr-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
}
.wwr-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(14,28,61,.10); }
.wwr-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* Post meta line under a title. */
.wwr-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Tag pills, matching the ones on the mockup cards. */
.wp-block-post-terms a {
	display: inline-block;
	font-size: 11.5px;
	letter-spacing: .04em;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 3px 10px;
	margin: 2px 4px 2px 0;
	text-decoration: none;
}

/* Galleries sit wider than the reading column. */
.wp-block-gallery.alignwide { margin-top: 2rem; margin-bottom: 2rem; }

@media (prefers-reduced-motion: reduce) {
	.wwr-card { transition: none; }
}

/* Footer link columns: plain lists, no bullets. */
.wwr-footer-list { list-style: none; margin: 0; padding: 0; }
.wwr-footer-list li { margin-bottom: 9px; font-size: 14.5px; }
.wwr-footer-list a { color: var(--wp--preset--color--soft); text-decoration: none; }
.wwr-footer-list a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

/* Affiliate disclosure inside a post. */
.wwr-affiliate {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: 2px 0 2px 14px;
}

/* A video still processing on YouTube. */
.wwr-pending-video {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 18px 20px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--surface);
}

/* Gallery captions.
   Core places these *on top of* the photograph behind a dark gradient, which
   covers the bottom third — routinely the part worth looking at, since that is
   where people stand. Move them underneath instead.
   Specificity is raised because core inlines its block CSS into wp_head, after
   this linked stylesheet, so an equal-specificity rule would lose. */
.wp-site-blocks .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
	text-shadow: none;
	padding: 8px 2px 0;
	margin: 0;
	max-height: none;
	overflow: visible;
	flex-grow: 0;
}

/* In "cropped" mode core gives the image `flex:1 0 0%; height:100%`, which only
   works while the caption is absolutely positioned. With the caption taking
   real space that chain collapses and the image loses its height entirely, so
   give it an explicit shape instead. */
.wp-site-blocks .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > img,
.wp-site-blocks .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > a > img {
	/* !important is warranted: core inlines this rule into wp_head *after* the
	   theme stylesheet, and `flex:1 0 0%` in a column with no definite height
	   collapses the image to zero. Specificity alone does not beat load order
	   for the flex shorthand here. */
	flex: 0 0 auto !important;
	height: auto !important;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Let each tile size to its own caption rather than stretching to the tallest. */
.wp-site-blocks .wp-block-gallery.has-nested-images figure.wp-block-image {
	align-self: flex-start;
}

/* A caption under a single full-width image, same treatment. */
.wp-block-image figcaption {
	color: var(--wp--preset--color--muted);
	font-size: 13.5px;
	text-align: left;
}