/*
Theme Name: Erich Sparks
Theme URI: https://erichsparks.com
Author: Erich Sparks
Description: Personal landing site for Erich Sparks. Monogram, Jost type, Ink Slate / Bone / Ember palette. Block theme.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erichsparks
*/

/* ---------- Brand mark (inline SVG in HTML blocks) ---------- */
.es-mark { display: block; line-height: 0; }
.es-mark svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ---------- Home hero ---------- */
.es-hero.wp-block-cover { min-height: 600px; }
.es-hero .es-mark { width: 104px; margin: 0 auto 1.5rem; }
.es-hero .es-mark { color: var(--wp--preset--color--bone); }
.es-wordmark {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	font-weight: 500;
	letter-spacing: 0.38em;
	padding-left: 0.38em; /* balances the trailing letter-space so it centers */
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
	line-height: 1.2;
}

/* ---------- Home intro + link tiles ---------- */
.es-intro {
	max-width: 40rem;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.es-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}
.es-tiles > * { margin: 0 !important; }

.es-tile {
	position: relative;
	border: 1px solid rgba(30, 35, 39, 0.18);
	padding: 1.75rem 1.5rem;
	transition: border-color 0.15s ease;
}
.es-tile:hover { border-color: var(--wp--preset--color--ink); }
.es-tile:focus-within {
	outline: 2px solid var(--wp--preset--color--ember);
	outline-offset: 3px;
}
.es-tile > * { margin: 0 !important; }
.es-tile > * + * { margin-top: 0.625rem !important; }

.es-tile__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.es-tile__title::after { content: "→"; color: var(--wp--preset--color--ember); letter-spacing: 0; font-size: 1.125rem; }
.es-tile__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.es-tile__title a:focus { outline: none; }
/* whole tile is clickable */
.es-tile__title a::after { content: ""; position: absolute; inset: 0; }

.es-tile__desc { color: var(--wp--preset--color--granite-text); font-size: 0.9375rem; }

/* ---------- Inner-page header ---------- */
.es-header {
	border-bottom: 1px solid rgba(30, 35, 39, 0.14);
}
.es-brand { display: flex; align-items: center; gap: 1rem; color: var(--wp--preset--color--ink); text-decoration: none; }
.es-brand .es-mark { width: 34px; }
.es-brand .es-mark { color: var(--wp--preset--color--ink); }
.es-brand__name { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; }

.es-nav .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.es-nav .wp-block-navigation-item__content:hover,
.es-nav .current-menu-item > .wp-block-navigation-item__content,
.es-nav [aria-current="page"] { color: var(--wp--preset--color--ember); }

/* ---------- Page title on inner pages ---------- */
.es-page-title { font-size: var(--wp--preset--font-size--x-large); font-weight: 400; }

/* ---------- Galleries ---------- */
.wp-block-gallery.has-nested-images { gap: 0.75rem; }

/* ---------- Project cards ---------- */
.es-project { border-top: 1px solid rgba(30, 35, 39, 0.18); padding-top: 1.5rem; }
.es-project__name { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; }
.es-project__desc { color: var(--wp--preset--color--granite-text); }

/* ---------- Footer ---------- */
.es-footer {
	border-top: 1px solid rgba(30, 35, 39, 0.14);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--granite-text);
}
.es-footer p { margin: 0; }
.es-footer a { color: var(--wp--preset--color--granite-text); }
.es-footer a:hover { color: var(--wp--preset--color--ember); }

/* ---------- Focus visibility ---------- */
a:focus-visible { outline: 2px solid var(--wp--preset--color--ember); outline-offset: 3px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.es-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phone: tiles become a simple list ---------- */
@media (max-width: 600px) {
	.es-hero.wp-block-cover { min-height: 440px; }
	.es-hero .es-mark { width: 72px; }
	.es-intro { text-align: left; }
	.es-tiles { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(30, 35, 39, 0.18); }
	.es-tile { border: 0; border-bottom: 1px solid rgba(30, 35, 39, 0.18); padding: 1.125rem 0; }
	.es-tile__desc { display: none; }
	.es-footer { flex-direction: column; align-items: flex-start !important; gap: 0.5rem; }
}

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

/* ---------- Home spacing ---------- */
.es-home { padding-bottom: 4rem; }
.es-home > .es-intro { margin-top: 4rem !important; }
.es-home > .es-tiles { margin-top: 2.75rem !important; }
.es-inner { padding-top: 4rem; padding-bottom: 5rem; }
.wp-site-blocks > footer { margin-top: 0 !important; }

/* =========================================================
   Gallery pages: floating photos over a blurred background
   Applies only to pages that contain a Gallery block.
   The background image comes from --es-bg (the page's
   featured image). Without it, the background is Ink Slate.
   ========================================================= */

body:has(.wp-block-gallery) {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

/* Blurred featured image, fixed behind the page */
body:has(.wp-block-gallery)::before {
	content: "";
	position: fixed;
	inset: -80px; /* hides the soft edges the blur creates */
	z-index: -2;
	background-image: var(--es-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(48px) brightness(0.85);
}

/* Dark wash so light text stays readable */
body:has(.wp-block-gallery)::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(30, 35, 39, 0.45);
}

/* Let the background show through the page layers */
body:has(.wp-block-gallery) .wp-site-blocks { background: transparent; }

/* Light text on gallery pages */
body:has(.wp-block-gallery) .es-header { border-bottom-color: rgba(243, 239, 232, 0.16); }
body:has(.wp-block-gallery) .es-brand,
body:has(.wp-block-gallery) .es-brand .es-mark,
body:has(.wp-block-gallery) .es-nav .wp-block-navigation-item__content,
body:has(.wp-block-gallery) .es-page-title,
body:has(.wp-block-gallery) h2,
body:has(.wp-block-gallery) h3 { color: var(--wp--preset--color--bone); }
body:has(.wp-block-gallery) .es-nav .wp-block-navigation-item__content:hover,
body:has(.wp-block-gallery) .es-nav [aria-current="page"] { color: #D2714A; }
body:has(.wp-block-gallery) p { color: #D9D4CB; }
body:has(.wp-block-gallery) .es-footer { border-top-color: rgba(243, 239, 232, 0.16); color: #D9D4CB; }
body:has(.wp-block-gallery) .es-footer a { color: #D9D4CB; }

/* Floating thumbnails: 1px border + soft shadow */
body:has(.wp-block-gallery) .wp-block-gallery.has-nested-images { gap: 2.25rem; }
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border: 1px solid rgba(243, 239, 232, 0.55);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}
.wp-block-gallery.has-nested-images figure.wp-block-image { overflow: visible; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: none;
	color: #D9D4CB;
	font-size: var(--wp--preset--font-size--small);
}

/* Zoomed-in view (WordPress "Expand on click" lightbox) */
.wp-lightbox-overlay .scrim {
	background-color: rgba(20, 24, 27, 0.45) !important;
	opacity: 1 !important;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}
.wp-lightbox-overlay img {
	border: 1px solid rgba(243, 239, 232, 0.55);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
	box-sizing: border-box;
}
.wp-lightbox-overlay .close-button {
	color: var(--wp--preset--color--bone);
	fill: var(--wp--preset--color--bone);
}
.wp-lightbox-overlay .close-button svg { fill: var(--wp--preset--color--bone); }

@media (max-width: 600px) {
	body:has(.wp-block-gallery) .wp-block-gallery.has-nested-images { gap: 1rem; }
	.wp-block-gallery.has-nested-images figure.wp-block-image img { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
}