/*
Theme Name: Seluno
Theme URI: https://seluno.app
Author: Seluno
Author URI: https://seluno.app
Description: The custom WordPress block theme for Seluno - a directory of independent floral designers. Uses the Interactivity API for the public browse/search experience and ships a React dashboard via the companion seluno-core plugin.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seluno
Tags: block-theme, full-site-editing, custom-colors, custom-logo
*/

/*
 * Root font-size scale.
 *
 * theme.json's body slug is 1.125rem (= 18px against the browser default
 * of 16px). The dashboard SPA renders body text at the same 1.125rem,
 * but its CSS additionally sets the same value on the `html` element,
 * making 1rem = 18px throughout. The net effect is that every rem-based
 * size on the dashboard renders ~12.5% larger than its public-site
 * counterpart - the design system reads at one scale on the dashboard
 * and a tighter scale on the public site.
 *
 * We mirror the dashboard's html font-size here so both surfaces share
 * one type ramp. Body becomes 1.125rem * 18px = 20.25px, headings keep
 * their preset rem values (47px -> 53px etc.), and spacings/radii
 * scale up proportionally - exactly the comfortable rhythm the
 * dashboard already has.
 */
html {
	font-size: var(--wp--preset--font-size--body);
}

/*
 * Flowing copy — `text-wrap: pretty` reduces single-word widows on the last
 * line of paragraph-like text. Scoped with :where() so block overrides stay
 * easy. Omits UI chrome (nav pills, nowrap labels, form controls, headings).
 */
:where(
	p,
	li,
	blockquote,
	figcaption,
	.wp-block-post-excerpt,
	.seluno-proposal-sections__description,
	.seluno-work-modal__excerpt,
	.seluno-florist-meta__availability--inline,
	a.seluno-public-work-card__title
) {
	text-wrap: pretty;
}

/*
 * Editorial metadata labels (eyebrows, section labels, field labels).
 * Italic Lora at caption size — readable small serif, distinct from
 * Cormorant Upright headings.
 */
:where(
	.seluno-florist-meta__eyebrow,
	.seluno-florist-meta__label,
	.wp-block-seluno-florist-meta .seluno-florist-meta__availability,
	.seluno-proposal-header__label,
	.seluno-work-modal__tag-group-label,
	.seluno-work-tags__label,
	.seluno-auth-menu__menu-label,
	.seluno-footer__label,
	.seluno-color-browse__count,
	.seluno-style-browse__count,
	.seluno-installation-browse__count,
	.seluno-venue-browse__count,
	.seluno-season-browse__count
) {
	font-family: var(--wp--preset--font-family--lora);
	font-style: italic;
	text-transform: none;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

/*
 * Interactive UI — Inter on buttons, chips, nav pills, and
 * form controls so Lora body copy stays readable without softening
 * tap targets.
 */
:where(
	button,
	input,
	select,
	textarea,
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-site-title,
	.wp-block-site-title a,
	.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content,
	.wp-block-seluno-heart-button.seluno-heart-button,
	.wp-block-seluno-work-florist.seluno-work-florist,
	.wp-block-seluno-work-tags .seluno-work-tags__pill,
	.seluno-work-explore__filter-trigger,
	.seluno-work-explore__filter-search,
	.seluno-work-explore__filter-option,
	.seluno-work-explore__sort-link,
	.seluno-work-explore__clear,
	.seluno-site-search__input,
	.seluno-site-search__scope-select,
	.seluno-work-modal__tag,
	.seluno-work-modal__florist,
	.seluno-work-modal__round-btn,
	.seluno-work-modal__florist-name,
	.seluno-public-work-card__florist,
	.seluno-public-work-card__florist-name,
	.seluno-florist-meta__availability-pill,
	.seluno-auth-menu__trigger,
	.seluno-auth-menu__user-name,
	.seluno-auth-menu__user,
	.seluno-auth-menu__menu-item,
	.seluno-auth-menu__link
) {
	font-family: var(--wp--preset--font-family--inter);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

/*
 * Stack gap between header / main / footer (.wp-site-blocks direct children).
 *
 * Core emits `margin-block-start: var(--wp--style--block-gap)` from
 * theme.json `styles.spacing.blockGap`, while horizontal inset uses
 * `--wp--style--root--padding-*` (`.has-global-padding`). Align vertical
 * separation with that inset so header-to-content gutters match sideways.
 *
 * Depends on `global-styles` (seluno-theme dependency) for root padding vars.
 */
body .wp-site-blocks > *:not(:first-child) {
	margin-block-start: min(
		var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
		var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
	);
}

/*
 * Visually hidden archive intros (H1 + deck) — kept for SEO and a11y.
 * Matches core’s screen-reader-text behaviour; theme does not depend on
 * wp-block-library for this class.
 */
.screen-reader-text {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/*
 * Body links - granular underline styling.
 *
 * theme.json's elements.link enables underline on/off (and the on default
 * is set in theme.json), but the underline color, thickness, and offset
 * aren't currently exposed there. We add them here so body links read as
 * "soft Mist Gray underline by default, Valley Green underline + green
 * text on hover" rather than the browser's heavy default underline.
 *
 * Scoped via :where() so block-level overrides (pill links, card links,
 * etc., which set text-decoration: none) keep winning without needing
 * !important. The .wp-element-button exclusion stops button-styled
 * <a> tags getting the underline treatment.
 */
:where(a:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--mist-gray);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 120ms ease,
	            text-decoration-thickness 120ms ease,
	            color 120ms ease;
}

:where(a:not(.wp-element-button)):hover,
:where(a:not(.wp-element-button)):focus-visible {
	text-decoration-color: var(--wp--preset--color--valley-green);
	text-decoration-thickness: 2px;
}

/*
 * Sticky site header.
 *
 * Targets the <header> rendered by the header template part (tagName: 'header').
 * Stays pinned to the top while scrolling so navigation is always one click away.
 * z-index 100 sits above body content but well below modal/dialog overlays.
 *
 * Offset for the WP admin bar:
 * - Desktop (>=783px): admin bar is position:fixed, 32px tall - we drop the
 *   sticky header below it via the --seluno-sticky-offset variable.
 * - Mobile (<783px): admin bar is position:absolute and scrolls away with
 *   the page, so the offset stays 0.
 *
 * Released in print so paper output isn't repeated on every page.
 */
.wp-site-blocks > header {
	position: sticky;
	top: var(--seluno-sticky-offset, 0);
	z-index: 100;
}

@media screen and (min-width: 783px) {
	body.admin-bar {
		--seluno-sticky-offset: 32px;
	}
}

@media print {
	.wp-site-blocks > header {
		position: static;
	}
}

/*
 * Header bar: three-column grid so site search sits on the true viewport
 * centre (equal 1fr side tracks). Class `seluno-site-header` is on the outer
 * group in themes/seluno/parts/header.html; overrides core’s flex layout
 * for that row only.
 */
.wp-site-blocks > header .wp-block-group.alignfull.seluno-site-header,
header .wp-block-group.alignfull.seluno-site-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--16);
	row-gap: var(--wp--preset--spacing--16);
	width: 100%;
	box-sizing: border-box;
}

.wp-site-blocks > header .seluno-site-header > :nth-child(1),
header .seluno-site-header > :nth-child(1) {
	justify-self: start;
	min-width: 0;
}

.wp-site-blocks > header .seluno-site-header > :nth-child(2),
header .seluno-site-header > :nth-child(2) {
	justify-self: center;
	min-width: 0;
}

.wp-site-blocks > header .seluno-site-header > :nth-child(3),
header .seluno-site-header > :nth-child(3) {
	justify-self: end;
	min-width: 0;
}

/*
 * Narrow viewports: keep Explore / Florists visible (overlayMenu never in
 * header.html), avatar-only account trigger (auth-menu CSS), and move
 * site search to a full-width row beneath brand/nav + auth.
 */
@media (max-width: 781px) {
	.wp-site-blocks > header .wp-block-group.alignfull.seluno-site-header,
	header .wp-block-group.alignfull.seluno-site-header {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		align-items: center;
	}

	.wp-site-blocks > header .seluno-site-header > :nth-child(1),
	header .seluno-site-header > :nth-child(1) {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.wp-site-blocks > header .seluno-site-header > :nth-child(2),
	header .seluno-site-header > :nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
		width: 100%;
		max-width: none;
	}

	.wp-site-blocks > header .seluno-site-header > :nth-child(3),
	header .seluno-site-header > :nth-child(3) {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.wp-site-blocks > header .seluno-site-header .wp-block-seluno-site-search.seluno-site-search,
	header .seluno-site-header .wp-block-seluno-site-search.seluno-site-search {
		width: 100%;
		max-width: none;
	}

	.wp-site-blocks > header .seluno-site-header > .wp-block-group:first-of-type {
		gap: var(--wp--preset--spacing--16);
	}
}

/*
 * Header primary nav (Explore / Florists) — pill hover + current page
 * match the dashboard sidebar (.seluno-dashboard__nav-link).
 *
 * --wp--style--block-gap overrides the navigation block's inline blockGap
 * so items stay tight even if the template was saved with spacing-24 (pills
 * + a large gap read as double padding).
 */
.wp-site-blocks > header .wp-block-navigation {
	--wp--style--block-gap: var(--wp--preset--spacing--8);
}

.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--nav-items, 0.25rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--stone-moss);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	outline: none;
}

.wp-site-blocks > header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--forest-dew);
	color: var(--wp--preset--color--valley-green);
}

/*
 * Footer brand wordmark — mirrors the header site title (Inter, tight
 * tracking, 1rem, no underline) so it reads as a logo, not body copy.
 */
.seluno-footer__brand a,
.seluno-footer__brand a:hover,
.seluno-footer__brand a:focus-visible {
	text-decoration: none;
}

/*
 * Florist archive grid responsive collapse.
 *
 * The Query Loop's post-template renders a CSS grid via WordPress core,
 * but core only honours columnCount at all viewport sizes - it doesn't
 * collapse to fewer columns on narrow screens. We add the same
 * 3 -> 2 -> 1 breakpoints that florist-works and work-explore use
 * so the Florists archive grid collapses like those work grids.
 *
 * The triple-class selector wins over WP's per-instance generated
 * .wp-container-content-X.wp-container-content-X grid-template-columns
 * (specificity 0,0,2,0).
 *
 * Column gap matches work-explore / florist-works; row gap is looser than
 * column gap for clearer separation between grid rows. Neither exceeds root
 * inline padding (`.has-global-padding` / --wp--style--root--padding-*).
 */
.seluno-florist-archive-grid.wp-block-post-template.is-layout-grid {
	column-gap: min(
		var(--wp--preset--spacing--32),
		var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
		var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
	);
	row-gap: min(
		var(--wp--preset--spacing--64),
		var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
		var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
	);
}

@media (max-width: 900px) {
	.seluno-florist-archive-grid.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: min(
			var(--wp--preset--spacing--24),
			var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
			var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
		);
		row-gap: min(
			var(--wp--preset--spacing--48),
			var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
			var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
		);
	}
}

@media (max-width: 540px) {
	.seluno-florist-archive-grid.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
		column-gap: min(
			var(--wp--preset--spacing--16),
			var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
			var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
		);
		row-gap: min(
			var(--wp--preset--spacing--40),
			var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
			var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
		);
	}
}

/*
 * Single work — hero featured image matches gallery thumbs and explore cards
 * (`--wp--custom--radius--images`).
 */
.single-seluno_work .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--images, 0.125rem);
}

/*
 * Florist archive card hover convention - matches work-explore,
 * florist-works, and proposal-sections so all four browse grids
 * share the same micro-interaction:
 *   - featured image scales 1.03 (240ms ease)
 *   - title shifts to valley-green
 *
 * Trigger is on the post <li> so hovering anywhere in the card area
 * (image, empty space, title, meta, excerpt) fires the same effect.
 *
 * Card titles also opt out of the global underline-on-links treatment:
 * inside a clickable card the underline reads as inline-text noise.
 */
.seluno-florist-archive-grid > li .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--images, 0.125rem);
}

.seluno-florist-archive-grid > li .wp-block-post-featured-image img {
	transition: transform 240ms ease;
}

.seluno-florist-archive-grid > li .wp-block-post-title a {
	transition: color 240ms ease;
	text-decoration: none;
}

.seluno-florist-archive-grid > li:hover .wp-block-post-featured-image img,
.seluno-florist-archive-grid > li:focus-within .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.seluno-florist-archive-grid > li:hover .wp-block-post-title a,
.seluno-florist-archive-grid > li:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--valley-green);
}

/*
 * Florist archive cards — control vertical rhythm per block so the
 * studio name and location read as one unit (tight) without shrinking
 * image-to-title or excerpt spacing.
 */
.seluno-florist-archive-grid > li > .wp-block-group {
	gap: 0;
}

.seluno-florist-archive-grid > li > .wp-block-group > * + * {
	margin-block-start: var(--wp--preset--spacing--16);
}

.seluno-florist-archive-grid > li > .wp-block-group > .wp-block-post-title + .wp-block-seluno-florist-meta {
	margin-block-start: 0.125rem;
}

.seluno-florist-archive-grid > li .wp-block-post-title {
	margin-block-end: 0;
}

.seluno-florist-archive-grid .wp-block-seluno-florist-meta.is-compact .seluno-florist-meta__location {
	font-family: var(--wp--preset--font-family--lora);
	font-style: italic;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: var(--wp--custom--letter-spacing--normal);
	color: var(--wp--preset--color--deep-earth);
}

.seluno-florist-archive-grid .wp-block-seluno-florist-meta.is-compact .seluno-florist-meta__icon {
	display: none;
}

/*
 * Single florist profile — hero banner sits flush under the site header;
 * main has no top padding so alignfull cover meets the header edge.
 */
body.single-seluno_florist .wp-site-blocks > main.seluno-florist-profile {
	margin-block-start: 0;
	padding-top: 0;
}

/*
 * Single florist profile hero — avatar + intro column (matches dashboard-style
 * hero: eyebrow, title + availability, bio, then meta footer).
 */
.seluno-florist-hero__main {
	align-items: flex-start;
}

/* Vertical inset for hero without a cover banner (cover uses __inner padding). */
.single-seluno_florist
	.seluno-florist-profile
	> .wp-block-seluno-florist-hero-banner:not(.seluno-florist-hero-banner--has-cover)
	.seluno-florist-hero__main {
	padding-block: var(--wp--preset--spacing--48);
}

.seluno-florist-hero__main > .wp-block-post-featured-image {
	flex-shrink: 0;
	margin: 0;
}

.seluno-florist-hero__intro {
	flex: 1 1 min(100%, 22rem);
	min-width: 0;
	align-items: flex-start;
}

body.single-seluno_florist .seluno-florist-hero__title-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*
	 * Baseline-align the closed-bookings line with the florist name; the open
	 * pill uses center alignment (see :has rules below). blockGap in the
	 * template should stay in sync with gap here.
	 */
	align-items: baseline;
	gap: var(--wp--preset--spacing--16);
}

body.single-seluno_florist .seluno-florist-hero__title-row:has(.seluno-florist-meta__availability-pill) {
	align-items: center;
}

body.single-seluno_florist .seluno-florist-hero__title-row .wp-block-post-title {
	margin: 0;
	min-width: 0;
	/* Sit status immediately after the title; wrap as a pair on narrow viewports. */
	flex: 0 1 auto;
	width: fit-content;
	max-width: 100%;
}

body.single-seluno_florist .seluno-florist-hero__title-row .wp-block-seluno-florist-meta {
	flex: 0 0 auto;
	align-self: baseline;
	width: auto;
	max-width: 100%;
}

body.single-seluno_florist .seluno-florist-hero__title-row .wp-block-seluno-florist-meta:has(.seluno-florist-meta__availability-pill) {
	align-self: center;
}

.seluno-florist-hero__intro .wp-block-post-content {
	margin-block: 0;
}

.seluno-florist-hero__intro .wp-block-post-content > :first-child {
	margin-top: 0;
}

.seluno-florist-hero__intro .wp-block-post-content > :last-child {
	margin-bottom: 0;
}

@media (max-width: 540px) {
	.seluno-florist-hero__main {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Public work cards — shared by work-explore, florist-works, proposal-sections.
 * Thumbnail-led: title + florist sit on a bottom overlay; heart pill top-right.
 */
.seluno-public-work-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	color: var(--wp--preset--color--ink);
}

.seluno-public-work-card__media {
	position: relative;
	border-radius: var(--wp--custom--radius--images, 0.125rem);
	background-color: var(--wp--preset--color--stone-moss);
	overflow: hidden;
}

.seluno-public-work-card__media-link {
	position: relative;
	z-index: 0;
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.seluno-public-work-card__thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.seluno-public-work-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.seluno-public-work-card__thumb--empty {
	background: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--canvas-ice),
		var(--wp--preset--color--canvas-ice) 4px,
		var(--wp--preset--color--stone-moss) 4px,
		var(--wp--preset--color--stone-moss) 5px
	);
}

/* Bottom overlay: title + florist; scrim for legibility (see hover rules below). */
.seluno-public-work-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
	padding: 2.5rem var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 0.82) 0%,
		rgb(0 0 0 / 0.55) 42%,
		rgb(0 0 0 / 0.2) 72%,
		transparent 100%
	);
	transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.seluno-public-work-card__overlay {
		transition: none;
	}

	.seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button {
		transition: none;
	}
}

/*
 * Fine-pointer + hover: hide overlay and heart until hover or focus-within.
 * Coarse / no-hover devices: both stay visible.
 */
@media (hover: hover) and (pointer: fine) {
	.seluno-public-work-card__overlay {
		opacity: 0;
		pointer-events: none;
	}

	.seluno-public-work-card:hover .seluno-public-work-card__overlay,
	.seluno-public-work-card:focus-within .seluno-public-work-card__overlay {
		opacity: 1;
		pointer-events: auto;
	}

	.seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button {
		opacity: 0;
		pointer-events: none;
	}

	.seluno-public-work-card:hover .seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button,
	.seluno-public-work-card:focus-within .seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Compact pill on the image; fades in with overlay on fine-pointer + hover (see above). */
.seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button {
	position: absolute;
	top: var(--wp--preset--spacing--16);
	right: var(--wp--preset--spacing--16);
	z-index: 3;
	gap: 0.25em;
	padding: 0.2em 0.45em;
	font-size: var(--wp--preset--font-size--caption);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
	width: fit-content;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--16));
	transition: opacity 200ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

/*
 * Default heart-button styles give the count `min-width: 1.5em` so full-page
 * pills don't jitter when the number ticks — that reads as a fixed-width
 * gap for single digits on these small overlay pills. Match the block
 * selector chain so we win the cascade (heart-button/style.css loads later).
 */
.seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button .seluno-heart-button__count {
	min-width: 0;
	width: auto;
	text-align: center;
}

a.seluno-public-work-card__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
	/* High contrast on photo + scrim; avoid dark theme greens (e.g. valley-green) here — they vanish on shadowed images. */
	color: #fff;
	text-shadow:
		0 0 1px rgb(0 0 0 / 0.9),
		0 1px 2px rgb(0 0 0 / 0.75),
		0 2px 12px rgb(0 0 0 / 0.45);
	text-decoration: none;
	transition: color 160ms ease, text-shadow 160ms ease;
}

.seluno-public-work-card:hover a.seluno-public-work-card__title,
.seluno-public-work-card:focus-within a.seluno-public-work-card__title {
	color: #fff;
	text-shadow:
		0 0 1px rgb(0 0 0 / 0.95),
		0 1px 3px rgb(0 0 0 / 0.85),
		0 2px 16px rgb(0 0 0 / 0.55);
}

a.seluno-public-work-card__title:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/*
 * Florist credit on the image overlay — avatar + name only (no chip
 * chrome). Matches title treatment: white type + shadow on the scrim.
 */
.seluno-public-work-card__florist {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0;
	border: 0;
	background: transparent;
	flex-shrink: 0;
	min-width: 0;
	max-width: 48%;
	text-decoration: none;
	color: #fff;
	transition: opacity 160ms ease;
}

.seluno-public-work-card__florist:hover,
.seluno-public-work-card__florist:focus-visible {
	opacity: 0.92;
}

.seluno-public-work-card__florist:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.seluno-public-work-card__florist:hover .seluno-public-work-card__florist-name,
.seluno-public-work-card__florist:focus-visible .seluno-public-work-card__florist-name {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.seluno-public-work-card__florist-avatar {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--wp--preset--color--mist-gray);
}

.seluno-public-work-card__florist-avatar--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	flex-shrink: 0;
	font-size: 0.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--tight, 0);
	user-select: none;
	color: var(--wp--preset--color--canvas-ice);
	background: var(--wp--preset--color--valley-green);
}

.seluno-public-work-card__florist-name {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--tight, -0.04em);
	color: inherit;
	text-shadow:
		0 0 1px rgb(0 0 0 / 0.9),
		0 1px 2px rgb(0 0 0 / 0.75),
		0 2px 8px rgb(0 0 0 / 0.45);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/*
 * Explore + florist profile work grids — roomier card insets than
 * proposal sections (uses spacing 24 / "card padding" token).
 */
.seluno-work-explore__item .seluno-public-work-card__overlay,
.wp-block-seluno-florist-works .seluno-florist-works__item .seluno-public-work-card__overlay {
	padding: 2.5rem var(--wp--preset--spacing--24) var(--wp--preset--spacing--24);
}

.seluno-work-explore__item .seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button,
.wp-block-seluno-florist-works .seluno-florist-works__item .seluno-public-work-card__heart.wp-block-seluno-heart-button.seluno-heart-button {
	top: var(--wp--preset--spacing--24);
	right: var(--wp--preset--spacing--24);
	max-width: calc(100% - 2 * var(--wp--preset--spacing--24));
}

/* ---- Homepage ---- */

/*
 * Homepage hero — equal space above the title and below the deck.
 * Top = main stack gap (theme.json root padding) + hero gutter.
 * Bottom uses the same total via padding only (no extra paragraph margin).
 */
.seluno-home-hero {
	--seluno-home-hero-gutter: var(--wp--preset--spacing--48);
	--seluno-home-hero-stack: min(
		var(--wp--style--root--padding-left, var(--wp--preset--spacing--16)),
		var(--wp--style--root--padding-right, var(--wp--preset--spacing--16))
	);
	text-align: center;
	border-bottom: 1px solid var(--wp--preset--color--stone-moss);
	padding-top: var(--seluno-home-hero-gutter);
	padding-bottom: calc(var(--seluno-home-hero-gutter) + var(--seluno-home-hero-stack));
}

.seluno-home-hero .wp-block-heading {
	max-width: 28ch;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.seluno-home-hero .wp-block-heading + p {
	max-width: 52ch;
	margin-top: var(--wp--preset--spacing--16);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	text-align: center;
}

/* Homepage: alignwide sections (1440px); children fill the section width. */
.seluno-home-section .wp-block-heading {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.seluno-home-section .wp-block-seluno-home-recent-work,
.seluno-home-section .wp-block-seluno-color-browse,
.seluno-home-section .wp-block-seluno-style-browse,
.seluno-home-section .wp-block-seluno-installation-browse,
.seluno-home-section .wp-block-seluno-venue-browse,
.seluno-home-section .wp-block-seluno-season-browse {
	width: 100%;
}

.seluno-home-recent__more {
	width: 100%;
	margin-top: var(--wp--preset--spacing--32);
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-button.is-style-seluno-outline .wp-block-button__link {
	color: var(--wp--preset--color--ink);
	background: transparent;
	border-color: var(--wp--preset--color--stone-moss);
}

.wp-block-button.is-style-seluno-outline .wp-block-button__link:hover,
.wp-block-button.is-style-seluno-outline .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--stone-moss);
	border-color: var(--wp--preset--color--stone-moss);
}

.seluno-marketing-hero {
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--stone-moss);
}

.seluno-marketing-hero .wp-block-post-title,
.seluno-marketing-hero .wp-block-post-excerpt,
.seluno-marketing-hero .wp-block-post-excerpt.has-text-align-center,
.seluno-marketing-hero .wp-block-post-excerpt p {
	text-align: left;
}

.seluno-marketing-hero .wp-block-post-excerpt {
	margin-top: var(--wp--preset--spacing--16);
	margin-bottom: var(--wp--preset--spacing--16);
}

.seluno-marketing-hero .wp-block-post-excerpt p {
	margin: 0;
}

.seluno-marketing-body .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* ---- For clients / for florists landing (Phase 5.1+) ---- */

.seluno-clients-hero,
.seluno-florists-hero {
	text-align: center;
}

.seluno-clients-hero .wp-block-post-title,
.seluno-clients-hero .wp-block-heading,
.seluno-florists-hero .wp-block-post-title,
.seluno-florists-hero .wp-block-heading {
	max-width: 20ch;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.seluno-florists-hero .wp-block-post-title,
.seluno-florists-hero .wp-block-heading {
	max-width: 22ch;
}

.seluno-clients-hero .wp-block-post-excerpt,
.seluno-florists-hero .wp-block-post-excerpt {
	max-width: 52ch;
	margin-top: var(--wp--preset--spacing--16);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	text-align: center;
}

.seluno-clients-hero .wp-block-post-excerpt p,
.seluno-florists-hero .wp-block-post-excerpt p {
	margin: 0;
}

.seluno-clients-hero__actions,
.seluno-clients-hero .wp-block-buttons.seluno-clients-hero__actions,
.seluno-florists-hero__actions,
.seluno-florists-hero .wp-block-buttons.seluno-florists-hero__actions {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--16);
	margin-left: auto;
	margin-right: auto;
}

.seluno-clients-body,
.seluno-florists-body {
	margin-top: var(--wp--preset--spacing--48);
}

.seluno-clients-features,
.seluno-florists-features {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--48);
	padding-top: var(--wp--preset--spacing--48);
	border-top: 1px solid var(--wp--preset--color--stone-moss);
}

/* Constrained groups use margin-block-start for blockGap, not flex gap — and
   margin: 0 on rows was clearing that. Space the second row explicitly. */
.seluno-clients-features > .seluno-clients-features__row + .seluno-clients-features__row,
.seluno-clients-body .seluno-clients-features__row + .seluno-clients-features__row,
.seluno-florists-features > .seluno-florists-features__row + .seluno-florists-features__row,
.seluno-florists-body .seluno-florists-features__row + .seluno-florists-features__row {
	margin-top: var(--wp--preset--spacing--40) !important;
}

.seluno-clients-features__row,
.seluno-florists-features__row {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}

.seluno-clients-feature .wp-block-heading,
.seluno-florists-feature .wp-block-heading {
	margin: 0;
}

.seluno-clients-feature p,
.seluno-florists-feature p {
	margin: 0;
}

/* CTA block (class is on the group in post content, not scoped to body wrapper). */
.seluno-clients-cta,
.seluno-florists-cta {
	text-align: center;
	border-top: 1px solid var(--wp--preset--color--stone-moss);
	padding-top: var(--wp--preset--spacing--48);
	padding-bottom: var(--wp--preset--spacing--64);
	max-width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.seluno-clients-cta .wp-block-heading,
.seluno-florists-cta .wp-block-heading {
	margin: 0;
}

.seluno-clients-cta > p,
.seluno-florists-cta > p {
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
}

.seluno-clients-body > .wp-block-post-content > :first-child,
.seluno-florists-body > .wp-block-post-content > :first-child {
	margin-top: 0;
}

@media (max-width: 781px) {
	.seluno-home-hero .wp-block-heading,
	.seluno-clients-hero .wp-block-post-title,
	.seluno-florists-hero .wp-block-post-title {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}

	.seluno-clients-features__row,
	.seluno-florists-features__row {
		flex-direction: column !important;
	}

	.seluno-clients-features__row > .wp-block-column,
	.seluno-florists-features__row > .wp-block-column {
		flex-basis: 100% !important;
	}
}