/*
Theme Name: Event Portraiture
Theme URI: https://www.eventportraiture.com
Author: Rivers Studios
Description: Custom block theme for Event Portraiture, the event division of Rivers Studios. Libre Baskerville, black and night-blue, with SEO, redirects and LocalBusiness schema built in.
Version: 1.6.1
Requires at least: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: event-portraiture
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}
img { height: auto; }

/* ---------- Typography ----------
   Libre Baskerville carries the headings, where its character is the point.
   Body copy and UI are set in Jost, a geometric sans in the Futura lineage --
   the classic counterpart to a transitional serif, and much lighter on the
   page than Baskerville was when it was doing every job itself. */
h1, h2, h3, .ep-price {
	text-wrap: balance;
	letter-spacing: -0.015em;
}
h2 { line-height: 1.22; font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.25rem); }
p { text-wrap: pretty; }

/* Tracked uppercase micro-type. The thing the design was missing: on a dark
   luxury layout this is what separates "considered" from "default". Used for
   eyebrows, nav and buttons, never for anything longer than a few words. */
.ep-eyebrow,
.ep-header .wp-block-navigation a,
.wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.74rem;
	font-weight: 500;
}
.ep-eyebrow {
	display: block;
	color: var(--wp--preset--color--brass);
	letter-spacing: 0.2em;
	margin-bottom: 0.65rem;
}

/* ---------- Header ---------- */
.ep-header {
	padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	background: var(--wp--preset--color--ink);
	gap: 1.5rem;
}
.ep-header .wp-block-site-logo img { max-height: 56px; width: auto; }
.ep-header .wp-block-navigation { font-size: 0.74rem; }
.ep-header .wp-block-navigation a { transition: color 0.3s ease; }
.ep-header .wp-block-navigation a:hover { color: var(--wp--preset--color--brass); }
.ep-header .wp-block-button__link { padding: 0.8rem 1.6rem; }
/* The menu toggle is the only way to navigate on a phone, and the block ships it
   as a bare 24px icon — well under the ~44px a thumb needs. Pad it out without
   moving the icon; negative margins keep the header height unchanged. */
.ep-header .wp-block-navigation__responsive-container-open,
.ep-header .wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
	box-sizing: content-box;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	padding: 1rem 2.1rem;
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--night);
}

/* ---------- Hero ---------- */
.ep-hero {
	background: var(--wp--preset--color--night);
	padding-top: clamp(3.5rem, 9vw, 7rem);
	padding-bottom: clamp(3rem, 7vw, 5rem);
}
.ep-hero h1 {
	/* Was 4.75rem, which wrapped to three lines and shouted. Poise comes from
	   restraint plus tight tracking, not size. */
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.05;
	letter-spacing: -0.022em;
	max-width: 17ch;
	margin-inline: auto;
	text-wrap: balance;
}
.ep-hero .ep-lede {
	color: var(--wp--preset--color--silver);
	/* 46ch forced breaks mid-phrase ("brought / to weddings"). Wider measure plus
	   pretty wrapping lets the lines fall where the sense does. */
	max-width: 54ch;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.75;
	text-wrap: pretty;
	margin-top: 1.5rem;
}

/* ---------- Portrait strip (signature element) ----------
   Twelve portraits shown as narrow slices; the one you hover or focus opens up. */
.wp-block-gallery.has-nested-images.is-style-ep-strip {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	height: clamp(240px, 38vw, 420px);
	margin-top: clamp(2.5rem, 6vw, 4rem);
}
.wp-block-gallery.has-nested-images.is-style-ep-strip figure.wp-block-image:not(#individual-image) {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	transition: flex-grow 0.5s ease;
}
.wp-block-gallery.has-nested-images.is-style-ep-strip figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}
.wp-block-gallery.has-nested-images.is-style-ep-strip figure.wp-block-image:not(#individual-image):hover,
.wp-block-gallery.has-nested-images.is-style-ep-strip figure.wp-block-image:not(#individual-image):focus-within {
	flex-grow: 5;
}
/* On a phone, twelve equal slices come out ~25px wide each: a barcode of dark
   slivers, and the hover-to-open interaction doesn't exist on touch. Give each
   portrait a readable width instead and let the strip scroll sideways, so all
   twelve are still there to swipe through. The scrolling is inside the strip,
   so the page itself never scrolls sideways. */
@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.is-style-ep-strip {
		gap: 4px;
		height: clamp(280px, 62vw, 380px);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wp-block-gallery.has-nested-images.is-style-ep-strip::-webkit-scrollbar { display: none; }
	.wp-block-gallery.has-nested-images.is-style-ep-strip figure.wp-block-image:not(#individual-image) {
		flex: 0 0 min(42vw, 190px);
		scroll-snap-align: center;
	}
	/* Hover-expand is meaningless on touch and would fight the swipe. */
	.wp-block-gallery.has-nested-images.is-style-ep-strip figure.wp-block-image:not(#individual-image):hover,
	.wp-block-gallery.has-nested-images.is-style-ep-strip figure.wp-block-image:not(#individual-image):focus-within {
		flex-grow: 0;
	}
}

/* ---------- Portfolio gallery (keeps tall portraits uncropped) ---------- */
.wp-block-gallery.has-nested-images.is-style-ep-masonry {
	display: block;
	column-count: 3;
	column-gap: 12px;
}
.wp-block-gallery.has-nested-images.is-style-ep-masonry figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	break-inside: avoid;
}
@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.is-style-ep-masonry { column-count: 2; column-gap: 8px; }
	.wp-block-gallery.has-nested-images.is-style-ep-masonry figure.wp-block-image:not(#individual-image) { margin-bottom: 8px; }
}

/* ---------- Packages ---------- */
.ep-package {
	border: 1px solid var(--wp--preset--color--graphite);
	padding: clamp(2rem, 4.5vw, 3.25rem);
	/* NOT height:100%. The card is itself the flex column, and a percentage
	   height against an indefinite track makes it collapse to its content,
	   which is what left the two cards (and their buttons) uneven. Letting
	   flex stretch do the work keeps the pair level. */
	align-self: stretch;
	transition: border-color 0.35s ease;
}
.ep-package:hover { border-color: var(--wp--preset--color--ash); }
/* The two cards hold different amounts of copy, so their buttons landed at
   different heights and the pair looked misaligned. Let the content column
   stretch and push the button to the bottom of each card. */
.ep-package {
	display: flex;
	flex-direction: column;
}
.ep-package > .wp-block-buttons:last-child,
.ep-package > .wp-block-button:last-child {
	margin-top: auto;
	padding-top: 1.75rem;
}
.ep-package--featured { border-color: var(--wp--preset--color--silver); }
.ep-package h3 {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.74rem;
	color: var(--wp--preset--color--brass);
	margin-bottom: 0.9rem;
}
.ep-price {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-size: clamp(1.8rem, 3.2vw, 2.35rem);
	line-height: 1;
	margin-top: 0;
	letter-spacing: -0.02em;
}
.ep-price-note { color: var(--wp--preset--color--ash); font-size: 0.9rem; }
.ep-package ul { padding-left: 1.1em; }
.ep-package li { margin-bottom: 0.45em; }
.ep-package li::marker { color: var(--wp--preset--color--ash); }

/* ---------- Sections ---------- */
.ep-section { padding-top: clamp(4.5rem, 10vw, 8rem); padding-bottom: clamp(4.5rem, 10vw, 8rem); }
.ep-section--night { background: var(--wp--preset--color--night); }
.ep-rule { border-top: 1px solid var(--wp--preset--color--graphite); }
.ep-section > * + h2 { margin-top: 0; }
.ep-muted { color: var(--wp--preset--color--silver); }

/* Testimonial */
.ep-testimonial.wp-block-quote {
	border: 0;
	padding: 0;
	text-align: center;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	line-height: 1.45;
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-style: italic;
	max-width: 24ch;
	margin-inline: auto;
	text-wrap: balance;
}
.ep-testimonial.wp-block-quote cite {
	display: block;
	margin-top: 1.75rem;
	font-size: 0.74rem;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--brass);
}

/* ---------- FAQ ----------
   Each question needs to read as the start of a new block, not a continuation
   of the answer above it. */
.ep-faq-q, .page-id-7013 .entry-content h2 {
	margin-top: 3.25rem;
}
.page-id-7013 .entry-content h2 + p {
	margin-top: 0.85rem;
}
.page-id-7013 .entry-content p {
	max-width: 68ch;
}

/* Portfolio index cards */
.ep-collection .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.ep-collection h2 { margin-top: 1rem; }
.ep-collection h2 a { text-decoration: none; }
.ep-collection h2 a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Forms (Jetpack) ---------- */
.wp-block-jetpack-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea {
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 0;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: 1rem;
}
.wp-block-jetpack-contact-form label { color: var(--wp--preset--color--mist); }

/* ---------- Footer ---------- */
.ep-footer {
	border-top: 1px solid var(--wp--preset--color--graphite);
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem) 2rem;
	font-size: 0.95rem;
}
.ep-footer a { text-decoration: none; }
.ep-footer a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.ep-footer .ep-footer__legal { color: var(--wp--preset--color--ash); font-size: 0.85rem; }
.ep-footer ul { list-style: none; padding: 0; margin: 0; }
.ep-footer li { margin-bottom: 0.4rem; }
/* Footer links stack about 25px apart on a phone — too tight to hit reliably,
   and these are the phone number and email. Space them out on small screens. */
@media (max-width: 781px) {
	.ep-footer li { margin-bottom: 0; }
	.ep-footer li a { display: inline-block; padding: 0.55rem 0; }
}

/* Portfolio cards are H2s for a sane heading order; keep the H3 size they had. */
.ep-collection h2 { font-size: var(--wp--preset--font-size--large); }