/*
Theme Name: EmhowArt-2025
Author: @jonmunson
Author URI: 
Theme URI: 
Tags: full-site-editing, editor-style, block-styles, block-patterns
Text Domain: emhowart-2025
Requires at least: 6.3
Requires PHP: 7.4
Tested up to: 6.3
Version: 1.0.1

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Blog card grid — 1 column mobile, 2 tablet, 3 desktop */
.wp-block-query .wp-block-post-template.is-flex-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-query .wp-block-post-template.is-flex-container > li {
	width: 100%;
}

@media (min-width: 600px) {
	.wp-block-query .wp-block-post-template.is-flex-container.columns-2 > li,
	.wp-block-query .wp-block-post-template.is-flex-container.columns-3 > li {
		width: calc(50% - (var(--wp--preset--spacing--40) / 2));
	}
}

@media (min-width: 1024px) {
	.wp-block-query .wp-block-post-template.is-flex-container.columns-3 > li {
		width: calc(33.333% - (var(--wp--preset--spacing--40) * 2 / 3));
	}
}

/* Force the cover inner container to stretch so the overlay fills the card */
.blog-card .wp-block-cover__inner-container {
	align-items: stretch;
	width: 100%;
}

/* Overlay fills full inner height, content centred */
.blog-card-overlay {
	flex: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: background-color 0.3s ease;
}

.blog-card:hover .blog-card-overlay {
	background-color: rgba(255, 255, 255, 0.97) !important;
}

.blog-card-overlay .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.blog-card-overlay .wp-block-post-title a:hover {
	text-decoration: underline;
}

.blog-card-overlay .wp-block-read-more {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 0.5em 1.5em;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.blog-card-overlay .wp-block-read-more:hover {
	background: transparent;
	color: var(--wp--preset--color--accent);
}

/*
 * Form controls are the one place the page font has to be restated: browsers
 * give <input>, <select> and friends their own system face rather than
 * inheriting. Everything else takes the body font from theme.json.
 *
 * This replaces a rule that also listed body, p, li and td and pointed at
 * `--wp--preset--font-family--gothic-a1`. No such preset exists — the slug is
 * `sans` — so the variable never resolved. An unresolvable custom property is
 * invalid at computed-value time, which for an inherited property means `unset`,
 * so body fell all the way back to the browser default and every paragraph on
 * the site rendered in Times. Headings were unaffected because they are set
 * separately, which is why the site looked like a deliberate serif/sans pairing
 * rather than a bug.
 *
 * The old rule described itself as overriding database global styles. It cannot
 * have been doing that, since it never produced a value — and theme.json is the
 * single source of truth for tokens, so a stylesheet fighting it is the wrong
 * shape regardless.
 */
input,
textarea,
select,
button {
	font-family: inherit;
}

/* Structural separators — full-width hairline, contrast at 10% opacity */
.wp-block-separator {
	border-color: var(--wp--preset--color--contrast);
	opacity: 0.1;
}

/* Section label line — short rule above uppercase section headings.
   Apply .section-label to any h6-style label to get the treatment. */
.section-label::before,
.homepage-split__label::before {
	content: '';
	display: block;
	width: 2rem;
	height: 1px;
	background-color: currentColor;
	margin-bottom: 0.75rem;
	opacity: 0.5;
}

/* Theme button refinement — slower transition, slight letter-spacing */
.wp-element-button,
.wp-block-button__link {
	letter-spacing: 0.08em;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Single post */
.single-post .wp-block-post-title,
.single-post .wp-block-post-date,
.single-post .wp-block-post-author-name {
	text-align: center;
}

/* Homepage split sections (Blog) */
.homepage-split-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
}

.homepage-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--60);
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
	align-items: center;
}

/*
 * Placed explicitly rather than ordered.
 *
 * These two used to be positioned with `order`, which relies on them being the
 * only children — auto-placement fills cells in order, so any third child takes
 * a cell and pushes everything along. On 2026-09-04 the live homepage grew
 * exactly that: wpautop ran over the pattern's output and left a stray `</p>`,
 * which the browser error-corrected into an empty paragraph with the default
 * `order: 0`. It took the first cell, the text moved to the second column and
 * the image dropped onto a row of its own.
 *
 * Naming the cells makes the layout independent of how many siblings there are,
 * and the `:empty` rule below stops a stray paragraph opening a gap on mobile
 * where there is only one column and placement cannot save us.
 */
.homepage-split > p:empty {
	display: none;
}

@media (min-width: 768px) {
	.homepage-split {
		grid-template-columns: 1fr 1fr;
	}

	.homepage-split--image-right .homepage-split__content {
		grid-column: 1;
		grid-row: 1;
	}

	.homepage-split--image-right .homepage-split__media {
		grid-column: 2;
		grid-row: 1;
	}
}

.homepage-split__label {
	font-size: var(--wp--preset--font-size--extra-small);
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.homepage-split__heading {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.homepage-split__title-link {
	text-decoration: none;
	color: inherit;
}

.homepage-split__title-link:hover {
	text-decoration: underline;
}

.homepage-split__body {
	color: var(--wp--preset--color--secondary);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.homepage-split__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.homepage-split__placeholder {
	width: 100%;
	aspect-ratio: 3 / 4;
	background-color: var(--wp--preset--color--surface);
}

/* Sticky header rules moved to assets/css/header.css so they also apply in the
   block editor via add_editor_style(). */

/* Scroll fade-in — applied to homepage sections.

   Driven entirely by CSS scroll-driven animations, with no JavaScript. The
   previous implementation set `opacity: 0` as a static rule and relied on an
   IntersectionObserver to add `.is-visible`; if that script failed to load or
   run, those sections stayed invisible permanently — a decorative effect taking
   the content down with it.

   Here `opacity: 0` exists ONLY inside a keyframe, so nothing is ever hidden
   unless a browser is actively driving the animation. No support, no CSS, a
   blocked script — the content is simply visible. The failure mode is "no
   animation" rather than "no content", which is the whole reason for the
   rewrite.

   @supports is what buys that: browsers without scroll-driven animations never
   apply the rule at all. Kept in style.css rather than assets/css because
   add_editor_style() would otherwise animate sections inside the block editor. */
@keyframes fade-in-section {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.fade-in-section {
			animation: fade-in-section linear both;
			animation-timeline: view();

			/* Finish well before the section is centred, so it is fully legible
			   by the time it matters rather than still resolving as it is read. */
			animation-range: entry 0% entry 40%;
		}
	}
}

/* Page transitions — CSS View Transitions API.
   Progressive enhancement: browsers without support skip silently. */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation: vt-fade-out 0.18s ease-out both;
	}

	::view-transition-new(root) {
		animation: vt-fade-in 0.18s ease-in both;
	}
}

@keyframes vt-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes vt-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}