/* Import CSS partials here.
 * Example: @import 'partials/footer.css';
 */

/* Defensive .alignfull mobile bleed.
 * WordPress's generated `.has-global-padding > .alignfull` rule depends on
 * --wp--style--root--padding-* CSS vars which can resolve empty (and the
 * specific .wp-container-core-group-XXX margin rule can race the generic one
 * on cold page-cache renders in iOS Safari), leaving 24px white gutters.
 * Force viewport-edge bleed below the desktop breakpoint. */
@media (max-width: 720px) {
	.has-global-padding > .alignfull {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	/* The petco-hero-texture PNG is a 683x1024 portrait with a strong
	   diagonal light beam baked in. At desktop widths cover heavily crops
	   the beam out; at mobile widths the same cover ratio leaves the beam
	   dominating the container as a visible seam. Scale the texture up
	   significantly on mobile so only a small uniform patch shows — same
	   "heavily cropped" effect desktop achieves by being much wider. */
	.pickme-petco-hero::after,
	.home-stories-stack > .home-stories-shelf::after {
		background-size: auto 250% !important;
		background-position: 30% 50% !important;
	}
	.home-cta-card::after {
		background-size: 250% auto !important;
		background-position: 50% 30% !important;
	}
}

/* PickMeSC pattern overrides — responsive grid collapse.
 * WordPress's grid layout with explicit columnCount doesn't auto-collapse on mobile.
 * Force 1-col stacking below 720px on the home stats grid, the home adoption-locations 50/50,
 * and the locations card grid; below 600px on the NKS feature-grid-icons 3-col.
 */

@media (max-width: 720px) {
	.wp-block-group.home-stats-grid.is-layout-grid,
	.wp-block-group.is-style-kindling-grid-50-50.is-layout-grid,
	.wp-block-group.home-locations-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/* Cover block defaults to min-height: 430px which, combined with aspect-ratio:1
	   on the location circles, forces each card wider than the viewport.
	   Let the aspect-ratio drive size from the grid track width instead. */
	.home-locations-grid > .wp-block-cover.has-aspect-ratio {
		min-height: 0 !important;
	}
}

/* HAL-1: Adoption Locations circles — Figma node 32984:10056. Subtle card shadow on
   each navy circle, and constrain the heading + body copy to ~273px (matches the
   Figma "Text" group width) so the text wraps the way the design does. */
.home-locations-grid > .wp-block-cover {
	box-shadow: 0 1px 1.5px rgba(16, 24, 40, 0.1), 0 1px 1px rgba(16, 24, 40, 0.06);
}
.home-locations-grid .wp-block-cover__inner-container > :where(h3, p) {
	max-width: 273px;
	margin-left: auto;
	margin-right: auto;
}

/* Header layering: keep the site header — and its navigation dropdown submenus —
   above page content. Without an explicit z-index, the hero `core/cover` section
   directly below the header paints over the absolutely-positioned submenu, clipping
   "Regions ▾" / "About Us ▾" menu items. */
.site-header {
	position: relative;
	z-index: 100;
}
.wp-block-navigation__submenu-container {
	z-index: 60;
}
/* The `.site-header` group's default block-gap puts a 24px margin between the
   navy utility bar and the white nav bar. Drop it on desktop so the nav sits
   flush under the utility bar. */
@media (min-width: 782px) {
	.site-header > .site-nav-bar {
		margin-top: 0;
	}
}

/* HFL-1: Find a Location — Google Maps embed surface and search input. The map div
   gets cleared by JS once the Maps SDK loads; until then a gray box + "Loading…"
   placeholder shows. `.is-loaded` is added by find-location.js when the map renders. */
.home-find-location-map {
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 533px;
	margin-left: auto;
	margin-right: auto;
}
.home-find-location-map > * {
	width: 100%;
	height: 100%;
}
.home-find-location-map.is-loaded { background-color: transparent !important; }
.home-find-location-section .home-find-location-search {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

/* HFL-2: two-column layout — scrollable shelter list (left) + map (right),
   built by find-location.js by wrapping the existing `.home-find-location-map`. */
.home-find-location-layout {
	display: grid;
	grid-template-columns: minmax(260px, 340px) 1fr;
	gap: 20px;
	margin-top: var(--wp--preset--spacing--40);
	align-items: stretch;
}
.home-find-location-layout .home-find-location-map {
	max-width: none;
	/* The map div is a core/group block with an inline `margin-top` from the
	   editor; that inline style outranks a plain rule here, leaving the map
	   pushed ~spacing-40 below the sidebar. !important neutralises it so both
	   columns start at the grid's top edge and end at the same 533px. */
	margin: 0 !important;
}
.home-find-location-list {
	display: flex;
	flex-direction: column;
	height: 533px;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.home-find-location-list__controls {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid #eee;
	font-size: 0.8125rem;
}
.home-find-location-list__filter {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: #444;
}
.home-find-location-list__filter select {
	font: inherit;
	padding: 4px 6px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
}
.home-find-location-list__count { color: #777; white-space: nowrap; }
.home-find-location-list__empty { padding: 16px 14px; color: #777; font-size: 0.875rem; margin: 0; }
.home-find-location-list__scroll { flex: 1 1 auto; overflow-y: auto; }
.pms-shelter-list__item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid #eee;
	padding: 11px 14px;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.pms-shelter-list__item[hidden] { display: none; }
.pms-shelter-list__item:hover { background: #f5f0e9; }
.pms-shelter-list__item.is-active { background: #efe6f6; box-shadow: inset 3px 0 0 #440b8c; }
.pms-shelter-list__item:focus-visible { outline: 2px solid #440b8c; outline-offset: -2px; }
.pms-shelter-list__name { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.25; }
.pms-shelter-list__region { display: block; margin-top: 2px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6a6a6a; }
.pms-shelter-list__address { display: block; margin-top: 3px; font-size: 0.8125rem; color: #555; line-height: 1.35; }
.pms-shelter-list__phone { display: block; margin-top: 2px; font-size: 0.8125rem; color: #555; }
@media (max-width: 781px) {
	.home-find-location-layout { grid-template-columns: 1fr; }
	.home-find-location-list { order: 2; height: 340px; }
	.home-find-location-layout .home-find-location-map { order: 1; height: 360px; }
}
/* Places API (New) autocomplete element (PlaceAutocompleteElement) replaces the
   core/search input at runtime. Force the light color scheme — the element
   otherwise resolves `light dark` to dark and renders as a black box. */
.home-find-location-section .home-find-location-search gmp-place-autocomplete,
.home-find-location-autocomplete {
	display: block;
	width: 100%;
	color-scheme: light;
	border-radius: 8px;
	z-index: 10000;
}
.home-find-location-section .home-find-location-search.wp-block-search.has-background {
	background-color: transparent !important;
	padding: 0;
}
/* Google's autocomplete dropdown can render under sticky headers; bump z-index. */
.pac-container { z-index: 10000; }

/* Shelter marker InfoWindow content. */
.pms-shelter-info { max-width: 240px; line-height: 1.4; font-size: 0.875rem; }
.pms-shelter-info__name { display: block; font-size: 1rem; }
.pms-shelter-info__region { color: #555; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.pms-shelter-info__address,
.pms-shelter-info__phone,
.pms-shelter-info__distance { display: block; margin-top: 4px; }
.pms-shelter-info__footer { margin-top: 8px; }
.pms-shelter-info__links { display: block; font-weight: 600; }
.pms-shelter-info__distance + .pms-shelter-info__links { margin-top: 4px; }

/* Places UI Kit (<gmp-place-details-compact>) card inside the InfoWindow. */
.pms-shelter-card { width: 300px; max-width: 100%; }
.pms-shelter-card .pms-shelter-card__header { font-size: 0.9375rem; line-height: 1.3; }
.pms-shelter-card .pms-shelter-card__header strong { display: block; }
.pms-shelter-card__footer { margin: 4px 0 10px; font-size: 0.8125rem; line-height: 1.5; }
.pms-shelter-card gmp-place-details-compact { display: block; width: 100%; }

/* HSV-1: Home Stories Video — purple "shelf" backdrop with the gray video card popping
   out the top, mirroring Figma node 32927:10115. The video extends 157px above the shelf
   at design width and overlaps the shelf by 323px (67.3% of video height). All sizing is
   percentage-based on the stack so the proportions hold at any viewport. */
.home-stories-section .home-stories-stack {
	width: 100%;
	max-width: 1378px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.home-stories-stack > .home-stories-video-frame {
	width: min(908px, 100%);
	aspect-ratio: 908 / 480;
	background-color: #D9D9D9;
	border-radius: 12px;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-stories-stack > .home-stories-video-frame > .wp-block-spacer { display: none; }
.home-stories-stack > .home-stories-shelf {
	width: 100%;
	aspect-ratio: 1378 / 396;
	background-color: #5F249F;
	border-radius: 26px;
	margin-top: -23.44%; /* 323/1378 — overlap so video pokes above */
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.home-stories-stack > .home-stories-shelf::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("/wp-content/uploads/2026/05/petco-hero-texture.png");
	background-size: cover;
	background-position: bottom center;
	mix-blend-mode: soft-light;
	opacity: 0.69;
	pointer-events: none;
	border-radius: inherit;
}
@media (max-width: 720px) {
	.home-stories-stack > .home-stories-shelf {
		aspect-ratio: 1378 / 480;
		margin-top: -10%;
	}
}

/* HCT-1: Home CTA "Open Your Heart" — purple card with white border and dalmatian
   illustration overlapping the bottom-right corner. Mirrors Figma node 32952:7770. */
.home-cta-section .home-cta-card-wrapper {
	position: relative;
	width: 100%;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-bottom: 70px; /* leaves room for the dog to extend below the card */
}
.home-cta-card {
	overflow: hidden;
	isolation: isolate;
}
.home-cta-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("/wp-content/uploads/2026/05/petco-hero-texture-rot90.png");
	background-size: cover;
	background-position-x: center;
	background-position-y: 0;
	mix-blend-mode: soft-light;
	opacity: 0.69;
	pointer-events: none;
	border-radius: inherit;
	z-index: 1;
}
.home-cta-card > .wp-block-cover__inner-container { position: relative; z-index: 2; }
.home-cta-card-wrapper .home-cta-dalmatian {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 213px;
	height: 172px;
	margin: 0;
	pointer-events: none;
	z-index: 3;
}
.home-cta-card-wrapper .home-cta-dalmatian img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Override the global is-style-fill arrow for the CTA pill: Figma uses a solid purple
   circle with a white arrow inside (vs. the global currentColor masked variant).
   Used on both the home CTA "Adopt Now" pill and the region hero "Adopt Now" pill.
   Uses !important because the global HE-4 ::after rule is later in this file. */
.home-cta-section .home-cta-button .wp-element-button::after,
.region-hero .region-hero-button .wp-element-button::after {
	-webkit-mask: none !important;
	mask: none !important;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 33' fill='none'><circle cx='16.5' cy='16.5' r='16.5' fill='%235F249F'/><path d='M11 16.5h11M16.5 11l5.5 5.5-5.5 5.5' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	width: 33px !important;
	height: 33px !important;
}
/* Bottom CTA "Adopt Now" pill — mirror the hero pill's hover: navy fill flips
   to white, white text flips to purple (the purple arrow circle stays). */
.home-cta-section .home-cta-button .wp-element-button,
.region-hero .region-hero-button .wp-element-button {
	/* Match the hero "Adopt Now" pill: 16px text (otherwise it inherits a smaller
	   size since is-style-fill sets no font-size) + cap-band trim so the glyph is
	   vertically centred in the pill the same way. */
	font-size: 1rem;
	line-height: 1.5;
	text-box: trim-both cap alphabetic;
	transition: background-color 200ms ease, color 200ms ease;
}
.home-cta-section .home-cta-button .wp-element-button:hover,
.home-cta-section .home-cta-button .wp-element-button:focus-visible {
	background-color: #ffffff !important;
	color: #5f249f !important;
}
@media (max-width: 720px) {
	/* Defeat the inline 120px outer padding + 56px heading baked into pattern 51,
	   which collapses the card to ~138px of usable width on a 430px viewport. */
	.home-cta-section {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}
	.home-cta-card {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		padding-left: var(--wp--preset--spacing--30) !important;
	}
	.home-cta-card h2.wp-block-heading {
		font-size: clamp(28px, 8vw, 40px) !important;
		line-height: 1.1 !important;
	}
	.home-cta-card-wrapper .home-cta-dalmatian {
		width: 140px;
		height: 113px;
	}
}

/* SF-1: Site footer rows. Top row (badge + socials) is justify-between; bottom legal
   row is also justify-between with three columns. */
.site-footer .site-footer-top { gap: var(--wp--preset--spacing--30); align-items: end; }
.site-footer .site-footer-legal { gap: var(--wp--preset--spacing--30); }
.site-footer .site-footer-divider { width: 100%; opacity: 1; height: 1px; border: 0; background-color: rgba(255,255,255,0.4); }
.site-footer .site-footer-badge img { display: block; }
.site-footer .site-footer-socials { gap: 16px; }
@media (max-width: 720px) {
	.site-footer .site-footer-top { flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }
	.site-footer .site-footer-legal { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20); }
}

/* HL-1: Adoption Locations — match Figma exactly:
   - Heading column: 329px fixed (forces "Adoption Locations" to break to 2 lines)
   - Outer gap: 50px between heading column and cards section
   - Cards: 2x2 of 375x375 perfect circles, 14px column gap, 18px row gap */
@media (min-width: 720px) {
	.wp-block-group.home-locations-outer.is-layout-grid {
		grid-template-columns: 329px minmax(0, 1fr) !important;
		gap: 50px !important;
	}
	.wp-block-group.home-locations-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 375px)) !important;
		column-gap: 14px !important;
		row-gap: 18px !important;
		justify-content: start !important;
	}
}

@media (max-width: 600px) {
	.wp-block-group.is-style-kindling-grid-three-col.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 720px) {
	.site-footer-nks .wp-block-group.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Header utility bar — Figma node 32974:195 ("nav bar desktop").
   Spec at 1440: bar 12px/80px padding, 53px between email→divider→calendar,
   13px gap inside email cluster, 18px gap inside calendar cluster, 16px
   gap between social icons, divider 1×18 solid white, body text 16px / 0.32px tracking. */
.site-header .utility-bar-row { gap: var(--wp--preset--spacing--30); }
.site-header .utility-bar-info { flex-wrap: wrap; gap: 53px; }

/* Per-cluster icon→text gaps (Figma spec) */
.site-header .utility-item--email { gap: 13px; }
.site-header .utility-item--cal   { gap: 18px; }

/* Body text: 16px / 0.32px letter-spacing */
.site-header .utility-bar-info p { letter-spacing: 0.32px; }

.site-header .utility-divider {
	width: 1px;
	background-color: #FFFFFF;
	height: 18px;
	flex-shrink: 0;
	border: 0;
}

/* Social icons: 16px between FB and IG (Figma) */
.site-header .utility-socials { gap: 16px !important; }

@media (max-width: 720px) {
	.site-header .utility-bar-info { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--10); }
	.site-header .utility-divider { display: none; }
	.site-header .utility-socials { display: none; }
}

/* Header logo sizing — keep the lockup readable across breakpoints */
.site-header .site-logo img { display: block; max-width: 200px; height: auto; }
@media (max-width: 720px) {
	.site-header .site-logo img { max-width: 150px; }
}

/* HE-6: Drop forced uppercase on filled CTAs site-wide. Theme.json puts
   text-transform:uppercase on .wp-element-button by default; Figma renders mixed-case. */
.wp-element-button,
.wp-block-button__link.wp-element-button {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* NK-4: Force area-normal-black on filled buttons. Without this the button text
   inherits the body family (area-normal-extralight) because wp-element-button's
   font-family declaration outranks the has-area-normal-black-font-family class. */
.wp-block-button.is-style-fill .wp-element-button,
.wp-block-button.is-style-fill.has-area-normal-black-font-family .wp-element-button {
	font-family: var(--wp--preset--font-family--area-normal-black) !important;
	font-weight: 900 !important;
}

/* NK-6: NKS hero shouldn't force 647px min-height on mobile. Already removed from
   pattern 52 markup; this rule covers any other hero cover that does. */
@media (max-width: 720px) {
	.wp-block-cover[style*="min-height:647px"],
	.wp-block-cover[style*="min-height:646px"] {
		min-height: unset !important;
	}
}

/* HE-1 / NK-1 / RH-1: Hero photo bleeds off the right edge of the cover with a curved
   left mask, instead of rendering as a contained circle. Applies to all 3 hero patterns
   via the shared `pickme-hero-cover` class.
   Photo must:
   - Be FULL height of the hero cover (top:0, bottom:0)
   - Be flush with VIEWPORT right edge (negative right offset to escape cover padding) */
.pickme-hero-cover {
	position: relative;
	overflow: hidden;
}
.pickme-hero-cover .home-hero-image,
.pickme-hero-cover .nks-hero-image,
.pickme-hero-cover .region-hero-image {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	/* Negate the cover's padding-right so the figure escapes to the viewport edge */
	right: calc(-1 * var(--wp--preset--spacing--60, 60px)) !important;
	width: 50% !important;
	max-width: 720px !important;
	/* Force full height; top + bottom alone aren't enough because the inner <img>'s
	   intrinsic aspect-ratio:1 was sizing the figure */
	height: auto !important;
	min-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 1;
	clip-path: ellipse(80% 100% at 80% 50%);
	-webkit-clip-path: ellipse(80% 100% at 80% 50%);
	display: block !important;
}
/* Override the inline aspect-ratio:1 + width:440px on the inner <img> so it stretches
   to fill the absolute-positioned figure (full hero height + half-viewport width). */
.pickme-hero-cover .home-hero-image img,
.pickme-hero-cover .nks-hero-image img,
.pickme-hero-cover .region-hero-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	aspect-ratio: auto !important;
}
/* WP auto-generates `position: relative` on every wp-block-group via runtime
   wp-container-core-group-… classes. That makes inner groups become the absolute
   figure's containing block, and they're content-sized (~409px) instead of full hero
   (646px). Override to position:static on every group ancestor inside the hero so
   the figure's containing block bubbles up to .pickme-hero-cover. */
.pickme-hero-cover .wp-block-cover__inner-container,
.pickme-hero-cover .wp-block-cover__inner-container .wp-block-group {
	position: static !important;
}
/* Text content elements (h1/h2/p/buttons) need to paint above the absolute figure.
   Apply position:relative directly to leaf elements so we don't accidentally make any
   ancestor group the figure's new containing block (siblings don't affect that). */
.pickme-hero-cover .wp-block-cover__inner-container h1,
.pickme-hero-cover .wp-block-cover__inner-container h2,
.pickme-hero-cover .wp-block-cover__inner-container p,
.pickme-hero-cover .wp-block-cover__inner-container .wp-block-buttons,
.pickme-hero-cover .wp-block-cover__inner-container .wp-block-button {
	position: relative !important;
	z-index: 2;
}

/* NS1/NS2/NS3/NS4-cluster — NKS Split content sections want a 60% image / 40% text
   ratio per Figma (image is the "lead" of each section). Image position varies per
   pattern (some are image-left, others image-right) so we use :has() to detect. */
@media (min-width: 720px) {
	/* Default: image LEFT, text RIGHT — make first column larger.
	   Matches both bare images and image+paw wrapper groups (.nks-image-with-paw). */
	.nks-split-image-emphasized.is-layout-grid:has(> figure.wp-block-image:first-child),
	.nks-split-image-emphasized.is-layout-grid:has(> .wp-block-image:first-child),
	.nks-split-image-emphasized.is-layout-grid:has(> .nks-image-with-paw:first-child) {
		grid-template-columns: 1.5fr 1fr !important;
	}
	/* When the image is the LAST child (text LEFT, image RIGHT), make second column larger */
	.nks-split-image-emphasized.is-layout-grid:has(> figure.wp-block-image:last-child),
	.nks-split-image-emphasized.is-layout-grid:has(> .wp-block-image:last-child),
	.nks-split-image-emphasized.is-layout-grid:has(> .nks-image-with-paw:last-child) {
		grid-template-columns: 1fr 1.5fr !important;
	}
	/* Vertically center the text column against the (taller) image column.
	   Without this, grid items stretch to the row height and the text content
	   sits at the top of its stretched column. */
	.nks-split-image-emphasized.is-layout-grid {
		align-items: center;
	}
}

/* RR-1 — Region "Ready to Meet" mobile: image should appear ABOVE text, not below */
@media (max-width: 720px) {
	.wp-block-group.is-style-kindling-grid-50-50 > .wp-block-image:last-child,
	.wp-block-group.is-style-kindling-grid-50-50 > .wp-block-group:has(> figure.wp-block-image:only-child):last-child {
		order: -1;
	}
}

@media (max-width: 720px) {
	/* On mobile, abandon the bleed-off and stack a circular photo below the text.
	   The narrow viewport doesn't have room for both side-by-side without clipping. */
	.pickme-hero-cover .home-hero-image,
	.pickme-hero-cover .nks-hero-image,
	.pickme-hero-cover .region-hero-image {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 280px !important;
		height: auto !important;
		margin: 1.5rem auto 0 !important;
		clip-path: none;
		-webkit-clip-path: none;
		border-radius: 9999px !important;
		aspect-ratio: 1 !important;
		overflow: hidden;
	}
	.pickme-hero-cover .home-hero-image img,
	.pickme-hero-cover .nks-hero-image img,
	.pickme-hero-cover .region-hero-image img {
		border-radius: 9999px !important;
		aspect-ratio: 1 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	.pickme-hero-cover { min-height: unset; }
}

/* HE-4: Add an arrow icon ::after to all filled CTAs (Adopt Now / Learn More / etc).
   The arrow sits inside a small darker circle, matching Figma. Reuses the SVG mask
   technique from core-button.css's .is-style-arrow but applied to .is-style-fill so
   filled CTAs keep their bg color. */
.wp-block-button.is-style-fill .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding-right: 1.25rem;
}
.wp-block-button.is-style-fill .wp-element-button::after {
	content: '';
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.18);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' fill='rgba(255,255,255,0.18)' stroke='none'/><path d='M8 12h8'/><path d='m12 8 4 4-4 4'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' fill='rgba(255,255,255,0.18)' stroke='none'/><path d='M8 12h8'/><path d='m12 8 4 4-4 4'/></svg>") no-repeat center / contain;
	background-color: currentColor;
	transition: transform 180ms ease;
	flex-shrink: 0;
}
.wp-block-button.is-style-fill .wp-element-button:hover::after,
.wp-block-button.is-style-fill .wp-element-button:focus-visible::after {
	transform: translateX(3px);
}

/* Mobile menu hamburger — replace WP's default 2-bar SVG with a 3-bar drawn from a
   single pseudo-element + two box-shadow stripes (matches Figma ≡ icon). */
.site-header .wp-block-navigation__responsive-container-open svg { display: none; }
.site-header .wp-block-navigation__responsive-container-open {
	position: relative;
	min-width: 32px;
	min-height: 22px;
	padding: 8px;
	color: var(--wp--preset--color--theme-04);
}
.site-header .wp-block-navigation__responsive-container-open::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 6px;
	right: 6px;
	height: 3px;
	background: currentColor;
	transform: translateY(-50%);
	box-shadow:
		0 -8px 0 currentColor,
		0 8px 0 currentColor;
}

/* HSV-2 / NVF-1: kindling/dynamic-video block fills its design "frame" so the
   embedded YouTube player covers the rounded card instead of sitting as a tiny
   300×150 default-sized iframe in the middle. Used in: home "Real Stories" +
   region "Video Card" (.home-stories-video-frame, aspect-ratio 908/480) and
   NKS "Video Feature" (.nks-video-feature-card, no fixed ratio → becomes 16/9). */
.home-stories-video-frame > .wp-block-kindling-dynamic-video,
.nks-video-feature-card > .wp-block-kindling-dynamic-video {
	margin: 0;
	width: 100%;
	max-width: none !important; /* beat the constrained-layout content-size cap inherited from the frame group */
	border-radius: inherit;
	overflow: hidden;
}
.home-stories-video-frame > .wp-block-kindling-dynamic-video {
	align-self: stretch;
	height: 100%;
}
/* bare iframe (no preview poster set) */
.home-stories-video-frame > .wp-block-kindling-dynamic-video > iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.nks-video-feature-card > .wp-block-kindling-dynamic-video > iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}
/* preview-poster / embed wrappers (when a preview image IS set) */
.home-stories-video-frame .dynamic-video-container,
.home-stories-video-frame .dynamic-video-embed,
.home-stories-video-frame .dynamic-video-preview,
.home-stories-video-frame .dynamic-video-preview > img {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
}
.nks-video-feature-card .dynamic-video-container,
.nks-video-feature-card .dynamic-video-embed { width: 100%; }