/*
Theme Name: At Home Sono
Theme URI:
Author: At Home Sono Design Team
Description: Custom FSE block theme for At Home Sono — mobile in-home keepsake ultrasound, Reno & Northern Nevada.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: at-home-sono
*/

/* ============================================================
   Genuinely custom CSS — everything that maps to a theme.json
   preset lives in theme.json instead. This file only covers:
   1) skinning core/button block markup to match the two button
      styles that aren't the theme.json default (ghost, inverted
      fill-on-dark), since a block's "className" lands on the
      wrapping <div>, not the inner <a class="wp-block-button__link">.
   2) the empty-state look of swappable core/image "photo slots" —
      real wp:image blocks with no photo uploaded yet.
   3) neutralizing WP's automatic block-gap spacing (see below).
   ============================================================ */

/* Every "flow"/"constrained" Group WordPress renders gets a free
   margin-top: 24px on each child (the default block-gap). site.css's
   whole spacing system already sets deliberate gap/margin values
   (.stack-N, .section-opener, flex/grid `gap`, h1–h4/p margins) on
   every one of these wrapper divs — so the WP default just stacks an
   extra, uncontrolled 24px on top of it throughout the site. This
   selector matches WP's own generated rule exactly (down to the
   :root :where() specificity) and, loading after it, wins outright. */
:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > * {
	margin-block-start: 0;
}
/* Same default, applied one level higher — WordPress also puts a free
   24px margin-top on every direct child of the template root (header/
   main/footer), which showed up as an unwanted gap above the footer. */
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

/* ── Ghost button (outline) — Packages, FAQ "call us" CTA ───
   Hover used to just tint the text/border to clay (--olive). Clay is
   a light, warm tone — against the cream/mushroom/champagne
   backgrounds these buttons normally sit on, that's as low as ~1.4:1
   contrast (WCAG AA needs 4.5:1), i.e. genuinely illegible. Hovering
   now fills solid instead, which stays well above 6:1 regardless of
   what's behind the button. */
.wp-block-button.btn-ghost > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--copper, #4F5F3E);
	color: var(--copper, #4F5F3E);
}
.wp-block-button.btn-ghost > .wp-block-button__link:hover {
	background: var(--copper, #4F5F3E);
	border-color: var(--copper, #4F5F3E);
	color: var(--cream, #F4F0E4);
}
.wp-block-button.btn-ghost.on-dark > .wp-block-button__link {
	border-color: var(--cream, #F4F0E4);
	color: var(--cream, #F4F0E4);
}
.wp-block-button.btn-ghost.on-dark > .wp-block-button__link:hover {
	background: var(--cream, #F4F0E4);
	border-color: var(--cream, #F4F0E4);
	color: var(--charcoal, #3F3E41);
}

/* ── Inverted fill button — cream-on-charcoal CTAs (Book CTA, Consent) ── */
.wp-block-button.btn-invert > .wp-block-button__link {
	background-color: var(--cream, #F4F0E4) !important;
	color: var(--copper, #4F5F3E) !important;
	border-color: var(--cream, #F4F0E4) !important;
}
.wp-block-button.btn-invert > .wp-block-button__link:hover {
	background-color: var(--olive, #DB9F7D) !important;
	color: var(--charcoal, #3F3E41) !important;
	border-color: var(--olive, #DB9F7D) !important;
}

/* ── Arrow link — secondary CTA, rendered as a core/button so the
   label + URL stay editable. The glyph is generated (no empty
   decorative <span> in the markup, so nothing for RichText to
   strip when the client edits the label). Scoped to the inner
   <a class="wp-block-button__link"> only — a bare ".link-arrow"
   selector also matches the block's OUTER wrapper div (which
   carries the same className), and styling both drew the glyph
   twice, slightly offset. ── */
.wp-block-button.link-arrow > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0 32px 0 0;
	position: relative;
	font-family: var(--font-body, "Poppins", sans-serif);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: var(--copper, #4F5F3E);
}
.wp-block-button.link-arrow > .wp-block-button__link:hover {
	/* Clay (--olive) text against the cream/pattern backgrounds this
	   sits on is as low as ~2:1 contrast — charcoal keeps the "color
	   shifts on hover" cue without becoming illegible. */
	color: var(--charcoal, #3F3E41);
	background: transparent;
}
.wp-block-button.link-arrow > .wp-block-button__link::before {
	content: '';
	position: absolute;
	right: 0; top: 50%;
	width: 32px; height: 1px;
	background: currentColor;
}
.wp-block-button.link-arrow > .wp-block-button__link::after {
	content: '';
	position: absolute;
	right: 0; top: calc(50% - 3px);
	width: 7px; height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}
.wp-block-button.link-arrow.on-dark > .wp-block-button__link { color: var(--cream, #F4F0E4); }
.wp-block-button.link-arrow.on-dark > .wp-block-button__link:hover { color: var(--olive, #DB9F7D); }

/* ── Photo slots — real wp:image blocks. WordPress's core/image
   render callback refuses to output anything at all for a block
   with no `src` (see wp-includes/blocks/image.php), so each slot
   ships pointed at assets/placeholder-photo.png (a plain dashed
   mushroom box baked into the PNG) as its default — a real,
   swappable image, not an empty placeholder div. The caption
   underneath carries the "drag a photo in here" instruction until
   the client replaces the image and clears it. ── */
.wp-block-image.photo-placeholder {
	position: relative;
	margin: 0;
	display: block;
	line-height: 0;
	background: none;
	border: none;
	padding: 0;
}
.wp-block-image.photo-placeholder img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
/* The "drag a photo in here" caption only overlays while the block is
   still pointed at our placeholder asset — matched by URL, since the
   className/caption stick around after a real photo is swapped in
   (WordPress doesn't clear them for you) and the overlay would
   otherwise sit on top of the client's real photo forever. Taken out
   of normal flow (position:absolute) so it can't be squeezed by a
   grid/flex parent or by the image already filling the figure. */
.wp-block-image.photo-placeholder figcaption {
	display: none;
}
.wp-block-image.photo-placeholder img[src*="placeholder-photo.png"] + figcaption {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 1.5;
	font-family: var(--font-body, "Poppins", sans-serif);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fg-muted, rgba(79, 95, 62, 0.65));
	text-align: center;
	padding: 0 20px 15%;
}

/* ── Per-hero photo-slot placement — kept out of block attributes
   (position/inset aren't validated block supports) so each hero
   pattern's image block stays a plain, editor-safe wp:image. ── */
.hero-visual-photo-split .wp-block-image.photo-placeholder {
	position: absolute;
	left: 40px; top: 60px; right: 40px; bottom: 60px;
	z-index: 2;
	width: auto; height: auto;
}
.hero-visual-book .wp-block-image.photo-placeholder {
	position: absolute;
	left: 48px; top: 64px; right: 48px; bottom: 64px;
	z-index: 2;
	width: auto; height: auto;
}

/* ── Per-hero column-ratio / height variants (same reason as above) ── */
.hero-editorial { grid-template-columns: 1.05fr 1fr; }
.hero-about { grid-template-columns: 1fr 1fr; }
.hero-book { min-height: 720px; }
.hero-brand-showcase .hero-type { justify-content: center; gap: 36px; }
.hero-about .hero-type { justify-content: center; gap: 32px; }

/* ── Utility: sections that bleed a decorative shape past their edge
   clip it, instead of an inline style="overflow:hidden" (not a
   validated Group block support). ── */
.clip { overflow: hidden; }

/* ── Photo-slot aspect ratios per context (image block has no
   per-instance size attribute here, so scope by parent grid) ── */
.photo-strip-grid .wp-block-image,
.story-grid .wp-block-image,
.service-area-grid .wp-block-image { aspect-ratio: 4 / 5; width: 100%; }
.trust-grid .wp-block-image { width: 100%; max-width: 440px; aspect-ratio: 440 / 540; height: auto; }

/* ── Small standalone bits that were one-off inline styles before ── */
.sample-pill {
	font-family: var(--font-body, "Poppins", sans-serif);
	font-size: 9px;
	letter-spacing: 0.2em;
	color: var(--olive, #DB9F7D);
	border: 1px solid var(--olive, #DB9F7D);
	padding: 2px 8px;
	border-radius: 999px;
	margin: 0;
}
.footnote-muted {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-muted, rgba(79, 95, 62, 0.65));
}
.faq-still {
	margin: 0;
	font-family: var(--font-display, "Didot", serif);
	font-size: 24px;
	color: var(--charcoal, #3F3E41);
}
/* Clay-italic emphasis outside the .display-* heading classes (which
   already color their own <em>) — same "signature" treatment, scoped
   to the couple of plain-paragraph spots that use it. */
.story-pull-quote em,
.hero-brand-showcase .hero-visual em { color: var(--olive, #DB9F7D); font-style: italic; }

.value-card-body {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--copper, #4F5F3E);
	max-width: 32ch;
	margin-inline: auto;
}
.prep-card-body {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--copper, #4F5F3E);
	max-width: 40ch;
}
.prep-card > .stack-3 { flex: 1; }

/* .place-row now lays itself out natively (Group flex layout support);
   .place-name used to inherit its type from the row wrapper — restated
   directly since it's a standalone paragraph now. */
.place-row { align-items: baseline; }
.place-name {
	margin: 0;
	font-family: var(--font-display, "Didot", serif);
	font-size: 22px;
	line-height: 1;
	color: var(--charcoal, #3F3E41);
}
.footnote-small {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--fg-muted, rgba(79, 95, 62, 0.65));
}
.photo-slot-caption {
	margin-top: 14px;
	font-family: var(--font-body, "Poppins", sans-serif);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fg-muted, rgba(79, 95, 62, 0.65));
}
.consent-copy { margin: 0; font-size: 16px; line-height: 1.7; max-width: 60ch; }
.consent-copy-small { font-size: 14px; opacity: 0.85; }
.testimonials-head { text-align: center; }

/* "Three steps, one couch" — center each step to match the centered
   section opener above it. */
.steps { text-align: center; }
.step { align-items: center; }
.step-body { margin-inline: auto; }

/* Package cards — same cream look on all three by default; whichever
   one you're hovering goes to the charcoal/cream "featured" treatment
   instead of that being permanently pinned to Gender Reveal. Reuses
   the exact same color moves site.css already defines for
   .package.featured, just keyed off :hover instead. */
.package {
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.package:hover {
	background: var(--charcoal, #3F3E41);
	color: var(--cream, #F4F0E4);
	border-color: var(--charcoal, #3F3E41);
}
.package:hover .package-title,
.package:hover .package-price { color: var(--cream, #F4F0E4); }
.package:hover .package-meta { color: var(--mushroom, #D4CEC0); }
.package:hover .package-features li { color: var(--mushroom, #D4CEC0); }
.package:hover .package-features li::before { background: var(--olive, #DB9F7D); }
.package:hover .icon {
	filter: brightness(0) saturate(100%) invert(80%) sepia(28%) saturate(457%) hue-rotate(341deg) brightness(91%) contrast(86%);
}
.package:hover .wp-block-button.btn-ghost > .wp-block-button__link {
	border-color: var(--cream, #F4F0E4);
	color: var(--cream, #F4F0E4);
}
.package:hover .wp-block-button.btn-ghost > .wp-block-button__link:hover {
	background: var(--cream, #F4F0E4);
	border-color: var(--cream, #F4F0E4);
	color: var(--charcoal, #3F3E41);
}

@media (max-width: 768px) {
	/* Decorative house-shape backgrounds (Trust x2, Book CTA, Consent
	   Strip) are sized in fixed px for the desktop 2-column layouts
	   they were designed for (e.g. 560x720). On mobile those grids
	   stack to a single column, but the shape doesn't reflow with
	   them — at a fixed 720px tall, positioned absolutely, it bled
	   down over the text content stacked below the photo, hiding the
	   eyebrow/heading/opening lines behind it. They're purely
	   decorative, so simplest fix is to not show them below 768px. */
	.shape-bleed {
		display: none;
	}
}