/*
Theme Name: Pool Defence
Theme URI: https://pooldefenceus.com
Author: Pool Defence
Description: A premium Full Site Editing theme for Pool Defence, a California pool fencing company.
Version: 1.7.6
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pool-defence
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks, block-styles
*/

/* Custom properties */
:root {
	--pd-box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.14);
	--pd-card-radius: 16px;
}

/* ==========================================================================
   Default text color pairings by background color.
   Light backgrounds get dark text, dark backgrounds get light text.
   No !important — these are defaults that can be overridden.
   ========================================================================== */

/* Light backgrounds → dark text */
.has-base-background-color     { color: var(--wp--preset--color--contrast); }
.has-base-alt-background-color { color: var(--wp--preset--color--contrast); }
.has-border-background-color   { color: var(--wp--preset--color--contrast); }

/* Dark backgrounds → light text */
.has-contrast-background-color       { color: var(--wp--preset--color--base); }
.has-accent-background-color         { color: var(--wp--preset--color--base); }
.has-accent-hover-background-color   { color: var(--wp--preset--color--base); }
.has-muted-background-color          { color: var(--wp--preset--color--base); }

/* Light-toned backgrounds → dark text */
.has-primary-background-color        { color: var(--wp--preset--color--contrast); }
.has-primary-light-background-color  { color: var(--wp--preset--color--contrast); }

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   Fixed header
   The <header> template part is fixed to the top of the viewport.
   --pd-header-height is set via JS or estimated here as a fallback.
   ========================================================================== */
:root {
	--pd-header-height: 120px;
}

.wp-block-template-part > header,
header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}

/* Push page content below the fixed header */
.wp-site-blocks {
	padding-top: var(--pd-header-height);
}

/* Logged-in admin bar offset */
.admin-bar .wp-block-template-part > header,
.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-block-template-part > header,
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* ==========================================================================
   Primary header bar (logo + nav)
   On mobile, center the logo and absolutely position the hamburger to the
   right so the logo reads as the visual anchor.
   ========================================================================== */
@media (max-width: 781px) {
	.pd-header-main > .wp-block-group.alignwide {
		position: relative;
		justify-content: center !important;
	}

	.pd-header-main > .wp-block-group.alignwide > .wp-block-image {
		margin: 0 auto;
	}

	/*
	 * Center via inset + align-items, NOT transform. A transformed ancestor
	 * becomes the containing block for fixed descendants, which trapped the
	 * mobile menu overlay (.wp-block-navigation__responsive-container.is-menu-open
	 * uses position: fixed; inset: 0) inside the 24px hamburger box.
	 */
	.pd-header-main .wp-block-navigation {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		align-items: center;
	}

	/* Hamburger trigger: swap the WP default 2-line "=" SVG for fa-bars. */
	.pd-header-main .wp-block-navigation__responsive-container-open {
		width: 32px;
		height: 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.pd-header-main .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.pd-header-main .wp-block-navigation__responsive-container-open::before {
		content: "\f0c9";
		font-family: "Font Awesome 7 Sharp";
		font-weight: 300;
		font-size: 28px;
		line-height: 1;
		color: var(--wp--preset--color--contrast);
	}

	/* Open overlay: stack links vertically, fill the viewport, leave room
	   for the close button. */
	.pd-header-main .wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--50);
	}

	.pd-header-main .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.pd-header-main .wp-block-navigation__responsive-container-content {
		flex: 1;
		padding-top: var(--wp--preset--spacing--60);
		align-items: stretch !important;
	}

	.pd-header-main .wp-block-navigation__responsive-container .wp-block-navigation__container {
		position: static;
		width: 100%;
		flex-direction: column;
		align-items: stretch !important;
		gap: var(--wp--preset--spacing--30);
	}

	.pd-header-main .wp-block-navigation__responsive-container .wp-block-navigation-item {
		align-items: stretch !important;
		width: 100%;
	}

	.pd-header-main .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		text-align: center;
		font-size: var(--wp--preset--font-size--x-large);
		font-weight: 600;
		padding: var(--wp--preset--spacing--30) 0;
	}

	/* Close button: visible, larger tap target, well-positioned. */
	.pd-header-main .wp-block-navigation__responsive-container-close {
		width: 44px;
		height: 44px;
		top: var(--wp--preset--spacing--30);
		right: var(--wp--preset--spacing--30);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.pd-header-main .wp-block-navigation__responsive-container-close svg {
		width: 32px;
		height: 32px;
		fill: var(--wp--preset--color--contrast);
	}
}

/* ==========================================================================
   Price match bar (top strip — "Price Match Guarantee" + phone + Call Now)
   Desktop shows the phone number inline with the button. Mobile hides the
   phone, splits the two remaining cells 50/50, and keeps "CALL NOW" on one
   line.
   ========================================================================== */
@media (max-width: 781px) {
	.pd-price-match-bar > .wp-block-group.alignwide {
		align-items: center !important;
		gap: var(--wp--preset--spacing--20);
	}

	.pd-price-match-bar > .wp-block-group.alignwide > p,
	.pd-price-match-bar > .wp-block-group.alignwide > .pd-call-group {
		flex: 0 0 50%;
		max-width: 50%;
		margin: 0;
	}

	.pd-price-match-bar .pd-call-group {
		justify-content: flex-end;
	}

	.pd-price-match-bar .pd-header-phone {
		display: none;
	}

	.pd-price-match-bar .wp-block-button__link {
		white-space: nowrap;
	}
}

/* ==========================================================================
   Header Font paragraph style
   Applies the Sink display font to any paragraph.
   ========================================================================== */
.is-style-header-font {
	font-family: var(--wp--preset--font-family--sink);
	font-weight: 400;
}

/* ==========================================================================
   Thin CTA block style (core/group)
   A full-width accent bar with a row of text + button. Stacks on mobile.
   ========================================================================== */
.is-style-thin-cta {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}

.is-style-thin-cta .wp-block-group {
	margin-block-start: 0;
}

@media (max-width: 600px) {
	.is-style-thin-cta .wp-block-group.is-layout-flex {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center;
	}
}

/* ==========================================================================
   Cutouts — Dynamic wave dividers (injected via PHP render_block)
   ========================================================================== */
.has-cutout-top,
.has-cutout-bottom {
	position: relative;
}

.has-cutout-top {
	padding-top: calc(clamp(40px, 6vw, 80px) + var(--wp--preset--spacing--30)) !important;
}

.has-cutout-bottom {
	padding-bottom: calc(clamp(40px, 6vw, 80px) + var(--wp--preset--spacing--30)) !important;
}

.cutout {
	position: absolute;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: clamp(40px, 6vw, 80px);
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

.cutout svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
}

/* ==========================================================================
   Hero with left-side gradient (used on new Leran-mockup hero variant)
   Heavy black gradient on the left for legible white text over photo,
   fading to transparent on the right so the family/dog/pool stay visible.
   ========================================================================== */
.pd-hero-gradient .wp-block-cover__background {
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.70) 22%,
		rgba(0, 0, 0, 0.35) 45%,
		rgba(0, 0, 0, 0) 65%
	) !important;
	opacity: 1 !important;
}

/* Mobile: diagonal fade from the top-left corner so the stacked headline
   stays legible against the photo while the family/dog/pool corner
   remains uncovered. */
@media (max-width: 781px) {
	.pd-hero-gradient .wp-block-cover__background {
		background: linear-gradient(
			to bottom right,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0) 60%,
			rgba(0, 0, 0, 0) 100%
		) !important;
	}
}

/* Seam hairline fix — SVG `preserveAspectRatio="none"` stretches the viewBox to
   fractional pixel dimensions, leaving an anti-aliased 1px sliver between the
   <rect class="cutout-current"> and <path class="cutout-adjacent"> at the
   section boundary. Bleeding each cutout container 1px past its edge pushes
   the sliver into the neighboring section, where the adjacent color matches
   and the bleed is invisible. */
.cutout-top {
	top: 0;
	transform: translateY(-1px);
}

.cutout-bottom {
	bottom: 0;
	overflow: hidden;
	transform: translateY(1px);
}

/* ---------- Cutout fill colors via CSS classes ---------- */
/* "Current" = the rect (section body color).                */
/* "Adjacent" = the wave path (neighboring section color).   */
/* One rule per palette slug — stays in sync with theme.json */
.cutout-current--transparent  .cutout-current  { fill: transparent; }
.cutout-current--base         .cutout-current  { fill: var(--wp--preset--color--base); }
.cutout-current--base-alt     .cutout-current  { fill: var(--wp--preset--color--base-alt); }
.cutout-current--contrast     .cutout-current  { fill: var(--wp--preset--color--contrast); }
.cutout-current--primary      .cutout-current  { fill: var(--wp--preset--color--primary); }
.cutout-current--primary-light .cutout-current { fill: var(--wp--preset--color--primary-light); }
.cutout-current--accent       .cutout-current  { fill: var(--wp--preset--color--accent); }
.cutout-current--accent-hover .cutout-current  { fill: var(--wp--preset--color--accent-hover); }
.cutout-current--accent-deep  .cutout-current  { fill: var(--wp--preset--color--accent-deep); }
.cutout-current--muted        .cutout-current  { fill: var(--wp--preset--color--muted); }
.cutout-current--border       .cutout-current  { fill: var(--wp--preset--color--border); }

.cutout-adjacent--transparent  .cutout-adjacent  { fill: transparent; }
.cutout-adjacent--base         .cutout-adjacent  { fill: var(--wp--preset--color--base); }
.cutout-adjacent--base-alt     .cutout-adjacent  { fill: var(--wp--preset--color--base-alt); }
.cutout-adjacent--contrast     .cutout-adjacent  { fill: var(--wp--preset--color--contrast); }
.cutout-adjacent--primary      .cutout-adjacent  { fill: var(--wp--preset--color--primary); }
.cutout-adjacent--primary-light .cutout-adjacent { fill: var(--wp--preset--color--primary-light); }
.cutout-adjacent--accent       .cutout-adjacent  { fill: var(--wp--preset--color--accent); }
.cutout-adjacent--accent-hover .cutout-adjacent  { fill: var(--wp--preset--color--accent-hover); }
.cutout-adjacent--accent-deep  .cutout-adjacent  { fill: var(--wp--preset--color--accent-deep); }
.cutout-adjacent--muted        .cutout-adjacent  { fill: var(--wp--preset--color--muted); }
.cutout-adjacent--border       .cutout-adjacent  { fill: var(--wp--preset--color--border); }

/* Card shadow utility */
.has-card-shadow {
	box-shadow: var(--pd-box-shadow);
	gap: 0;
}

/* Eyebrow paragraph style */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0;
}

/* Remove gap between eyebrow and the heading that follows */
.is-style-eyebrow + h1,
.is-style-eyebrow + h2,
.is-style-eyebrow + h3,
.is-style-eyebrow + h4,
.is-style-eyebrow + h5,
.is-style-eyebrow + h6,
.is-style-eyebrow + .wp-block-heading {
	margin-top: 0;
}

/* ==========================================================================
   Testimonial Cards columns style
   Apply "Testimonial Cards" style to a Columns block. Child column Groups
   get equal padding, rounded corners, and the alt background.
   ========================================================================== */
.is-style-testimonial-cards > .wp-block-column > .wp-block-group {
	padding: var(--wp--preset--spacing--40);
	border-radius: 16px;
	background-color: var(--wp--preset--color--base-alt);
}

/* ==========================================================================
   Icon Pods columns style
   A 4-column layout that collapses to a 2×2 grid on mobile instead of
   fully stacking. Apply "Icon Pods" style to a Columns block.
   ========================================================================== */
@media (max-width: 781px) {
	.is-style-icon-pods {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.is-style-icon-pods > .wp-block-column {
		flex-basis: auto !important;
	}
}

/* ==========================================================================
   Image Cards columns style
   Apply "Image Cards" style to a Columns block. Each column should contain
   a Group (card) with: Image → Group (content with heading, text, button).
   The style enforces 16/9 images, uniform padding, and bottom-aligned buttons.
   ========================================================================== */
.is-style-image-cards > .wp-block-column > .wp-block-group {
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: var(--pd-box-shadow);
	gap: 0;
}

/* Force 16/9 on any image inside a card */
.is-style-image-cards .wp-block-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	display: block;
	border-radius: 0;
}

.is-style-image-cards .wp-block-image {
	margin: 0;
}

/* Consistent padding on the content group below the image */
.is-style-image-cards > .wp-block-column > .wp-block-group > .wp-block-group:not(:has(img)) {
	padding: var(--wp--preset--spacing--40);
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-top: 0;
}

/* Kill WP layout-flow margins inside image cards */
.is-style-image-cards .wp-block-group > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Push buttons to the bottom of the card */
.is-style-image-cards .wp-block-buttons {
	margin-top: auto;
}

/* ==========================================================================
   Promise Pods block style (core/group)
   Apply "Promise Pods" style to a Group block. Child Groups become pods
   in a 2×2 grid on desktop, stacked on tablet, horizontal scroll on mobile.
   All styling cascades from the single .is-style-promise-pods parent.
   ========================================================================== */

/* Desktop: 2×2 grid */
.is-style-promise-pods {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

/* Pod cards */
.is-style-promise-pods > .wp-block-group {
	margin-block-start: 0;
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base-alt);
	box-shadow: var(--pd-box-shadow);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

/* Main content group — kill default margin-block-start */
main.wp-block-group {
	margin-block-start: 0;
}

/* Post content — kill WP's default top margin */
.wp-site-blocks .entry-content {
	margin-block-start: 0;
}

/* Pod icons */
.is-style-promise-pods > .wp-block-group .wp-block-image {
	margin: 0 auto;
}

/* Kill WP layout-flow margins inside pods */
.is-style-promise-pods > .wp-block-group > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Mobile: horizontal scroll strip */
@media (max-width: 600px) {
	.is-style-promise-pods {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin-right: calc(-1 * var(--wp--preset--spacing--50));
		padding-right: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--30);
		gap: var(--wp--preset--spacing--30);
	}

	.is-style-promise-pods > .wp-block-group {
		min-width: 220px;
		flex: 0 0 70%;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Location Grid block style (core/group)
   2×2 grid of child Groups. Stays 2×2 on all breakpoints.
   ========================================================================== */
.is-style-location-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

.is-style-location-grid > .wp-block-group {
	margin-block-start: 0;
}

.is-style-location-grid > .wp-block-group > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* ==========================================================================
   Vs-Pair columns block style (core/columns)
   Apply "Vs Pair" to a 2-column block where each column wraps a single
   core/group containing the comparison content. Used for "Where others
   fall short" / "What we do differently" treatments throughout the
   product page. Padding and radius are tokenized so they stay in sync
   with the rest of the card system.
   ========================================================================== */
.is-style-vs-pair > .wp-block-column > .wp-block-group {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--pd-card-radius);
	box-shadow: var(--pd-box-shadow);
	height: 100%;
}

.is-style-vs-pair > .wp-block-column:first-child > .wp-block-group {
	border-top: 4px solid var(--wp--preset--color--muted);
}

.is-style-vs-pair > .wp-block-column:last-child > .wp-block-group {
	border-top: 4px solid var(--wp--preset--color--accent);
}

/* Inline check / xmark FA icons inside vs-pair list items get spaced
   consistently. Color is set inline per-icon so authors can override. */
.is-style-vs-pair li > i.fa-sharp {
	margin-right: 0.5em;
}

/* ==========================================================================
   Vs-List block style (core/list) — strips the default disc bullet so the
   inline FA icon at the start of each <li> becomes the visual marker.
   Designed to pair with .is-style-vs-pair cards but works anywhere a list
   already has its own per-item icon prefix.
   ========================================================================== */
.is-style-vs-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.is-style-vs-list > li {
	margin-left: 0;
}

/* ==========================================================================
   Vertical thumbnail stack (Amazon-style product gallery, 3 thumbs in a
   column to the right of the main hero image). Apply pd-thumb-stack to a
   wp:column wrapping 3 wp:image blocks. Forces a uniform 4:3 ratio with
   tokenized spacing between images.
   ========================================================================== */
.pd-thumb-stack > .wp-block-image {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pd-thumb-stack > .wp-block-image:last-child {
	margin-bottom: 0;
}

.pd-thumb-stack > .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Wave cutout — kill the default block gap on either side of a cutout so
   the section below butts directly up against the wave. WP's default block
   spacing adds margin-block-start between sibling sections, which produces
   a thin background-color strip between the wave and the next section.
   ========================================================================== */
.has-cutout-bottom + * {
	margin-block-start: 0 !important;
}

.has-cutout-top {
	margin-block-start: 0 !important;
}

/* The <footer> template-part wrapper picks up WP's default block-spacing
   margin-block-start. Kill it so the footer pattern's top wave butts directly
   against the previous section. Pairs with cutoutTopAdjacent:accent in
   patterns/footer.php so the wave reads orange-to-blue, matching the accent
   CTA every page is expected to end on. */
footer.wp-block-template-part,
.wp-block-template-part > footer,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ==========================================================================
   Product page: flip 2-column section on mobile so the right column appears
   above the left column (used on the mesh product headliner where we want
   product info to read first on small screens, hero gallery beneath).
   ========================================================================== */
@media (max-width: 781px) {
	.pd-flip-on-mobile.wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* ==========================================================================
   Product page: force the headliner thumbnail gallery to a uniform 4:3
   landscape ratio so all four cells are rectangles regardless of source
   image dimensions.
   ========================================================================== */
.pd-product-thumbs.wp-block-gallery .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* ==========================================================================
   Mosaic gallery block style (core/gallery)
   4-column CSS grid with alternating 1-row / 2-row images.
   Pattern repeats every 8 images:
     Col 1: 1-row, 2-row  |  Col 2: 2-row, 1-row
     Col 3: 1-row, 2-row  |  Col 4: 2-row, 1-row
   ========================================================================== */
.is-style-mosaic {
	--mosaic-gap: var(--wp--preset--spacing--30, 20px);
	--mosaic-cell: calc((100% - 3 * var(--mosaic-gap)) / 4);
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, var(--mosaic-cell));
	gap: var(--mosaic-gap);
}

.is-style-mosaic .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	width: 100% !important;
	max-width: 100% !important;
}

.is-style-mosaic .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Col 1: image 1 = 1 row, image 2 = 2 rows */
.is-style-mosaic .wp-block-image:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 2;
}

.is-style-mosaic .wp-block-image:nth-child(2) {
	grid-column: 1;
	grid-row: 2 / 4;
}

/* Col 2: image 3 = 2 rows, image 4 = 1 row */
.is-style-mosaic .wp-block-image:nth-child(3) {
	grid-column: 2;
	grid-row: 1 / 3;
}

.is-style-mosaic .wp-block-image:nth-child(4) {
	grid-column: 2;
	grid-row: 3 / 4;
}

/* Col 3: image 5 = 1 row, image 6 = 2 rows */
.is-style-mosaic .wp-block-image:nth-child(5) {
	grid-column: 3;
	grid-row: 1 / 2;
}

.is-style-mosaic .wp-block-image:nth-child(6) {
	grid-column: 3;
	grid-row: 2 / 4;
}

/* Col 4: image 7 = 2 rows, image 8 = 1 row */
.is-style-mosaic .wp-block-image:nth-child(7) {
	grid-column: 4;
	grid-row: 1 / 3;
}

.is-style-mosaic .wp-block-image:nth-child(8) {
	grid-column: 4;
	grid-row: 3 / 4;
}

/* Mobile: collapse to 2 columns */
@media (max-width: 600px) {
	.is-style-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}

	.is-style-mosaic .wp-block-image:nth-child(1) { grid-column: 1; grid-row: 1 / 2; }
	.is-style-mosaic .wp-block-image:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
	.is-style-mosaic .wp-block-image:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
	.is-style-mosaic .wp-block-image:nth-child(4) { grid-column: 2; grid-row: 3 / 4; }
	.is-style-mosaic .wp-block-image:nth-child(5) { grid-column: 1; grid-row: 4 / 5; }
	.is-style-mosaic .wp-block-image:nth-child(6) { grid-column: 1; grid-row: 5 / 7; }
	.is-style-mosaic .wp-block-image:nth-child(7) { grid-column: 2; grid-row: 4 / 6; }
	.is-style-mosaic .wp-block-image:nth-child(8) { grid-column: 2; grid-row: 6 / 7; }
}

/* Stat pods — tighten gap between number and label */
.is-style-header-font.has-xx-large-font-size {
	margin-bottom: 0;
	line-height: 1.1;
}

/* Star ratings */
.star-rating {
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.1em;
}

/* Details/FAQ styling */
.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	float: right;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

.wp-block-details > *:not(summary) {
	padding: 1rem 0 0.5rem;
}

/* Gallery uniform images */
.wp-block-gallery .wp-block-image img {
	border-radius: 12px;
}

/* ==========================================================================
   Icon Separator — decorative pool icon between sections.
   Zero-height container with an absolutely centered SVG.
   ========================================================================== */
.pd-icon-separator {
	position: relative;
	height: 0;
	overflow: visible;
	z-index: 2;
	pointer-events: none;
}

.pd-icon-separator svg {
	position: absolute;
	top: 50%;
	width: var(--pd-icon-size, 80px);
	height: var(--pd-icon-size, 80px);
}

/* Alignment */
.pd-icon-align--left svg {
	left: 10%;
	transform: translateY(-50%);
}

.pd-icon-align--center svg {
	left: 50%;
	transform: translate(-50%, -50%);
}

.pd-icon-align--right svg {
	right: 10%;
	transform: translateY(-50%);
}

/* Gentle rocking animation */
@keyframes pd-icon-rock {
	0%, 100% { rotate: -12deg; }
	50%      { rotate: 12deg; }
}

.pd-icon-rotate svg {
	animation: pd-icon-rock 15s ease-in-out infinite;
}

/* Editor preview — give the block some height so it's selectable */
.block-editor-block-list__block .pd-icon-separator {
	min-height: 40px;
}

/* ==========================================================================
   Fixed CTA Footer — sticky "Call Now" bar at the bottom of the viewport.
   Includes an SVG wave along the top edge via ::before pseudo-element.
   ========================================================================== */
.pd-fixed-cta-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 998;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	text-align: center;
}

.pd-fixed-cta-footer::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23CFE7F5' d='M0,80 C180,40 360,10 600,50 C840,90 1080,30 1260,55 C1360,68 1410,85 1440,75 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom;
	background-size: 100% 100%;
	pointer-events: none;
}

.pd-fixed-cta-footer a {
	text-decoration: none !important;
	color: inherit !important;
}

/* Add bottom padding to the page so the fixed CTA doesn't cover content */
.wp-site-blocks {
	padding-bottom: 60px;
}

/* Admin bar offset for fixed CTA */
.admin-bar .pd-fixed-cta-footer {
	bottom: 0;
}

/* ==========================================================================
   Built for Child Safety block (acf/child-safety)
   Bridged from Leran's mockup. Honors the typography choreography (orange
   eyebrow + split-color "BUILT FOR / CHILD SAFETY" headline + emphasized
   blurb) and the BUILT FOR PROTECTION shield badge + dark navy bottom CTA
   banner — but uses theme tokens so it sits in the site design system.
   ========================================================================== */
.pd-child-safety {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
}

.pd-child-safety__inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
}

.pd-child-safety--empty {
	border: 1px dashed var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

/* --- Top: copy left, visual right ------------------------------------- */
.pd-child-safety__top {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

/* Grid items must allow shrink below intrinsic content size, otherwise a
   wide placeholder image expands the right column and squashes the left. */
.pd-child-safety__copy,
.pd-child-safety__visual {
	min-width: 0;
}

.pd-child-safety__eyebrow {
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pd-child-safety__headline {
	font-family: var(--wp--preset--font-family--sink);
	font-weight: 400;
	line-height: 1.05;
	margin: 0 0 var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pd-child-safety__headline-top {
	font-size: var(--wp--preset--font-size--hero);
	color: var(--wp--preset--color--contrast);
}

.pd-child-safety__headline-bottom {
	font-size: var(--wp--preset--font-size--hero);
	color: var(--wp--preset--color--accent-deep);
}

.pd-child-safety__subline {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Reset margins on inner <p> tags injected by the WYSIWYG field. */
.pd-child-safety__subline > p,
.pd-child-safety__blurb-text > p {
	margin: 0;
}

.pd-child-safety__blurb {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--pd-card-radius);
	border-left: 4px solid var(--wp--preset--color--accent-deep);
}

.pd-child-safety__blurb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
	font-size: 1.5rem;
	flex-shrink: 0;
}

.pd-child-safety__blurb-text {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	min-width: 0;
}

.pd-child-safety__blurb-text strong {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* --- Right: image + shield badge overlay ------------------------------ */
.pd-child-safety__visual {
	position: relative;
}

.pd-child-safety__image {
	margin: 0;
	border-radius: var(--pd-card-radius);
	overflow: hidden;
}

.pd-child-safety__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.pd-child-safety__badge {
	position: absolute;
	bottom: 24px;
	right: 24px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	border: 4px solid var(--wp--preset--color--base);
	box-shadow: var(--pd-box-shadow);
}

.pd-child-safety__badge i {
	font-size: 2.25rem;
}

.pd-child-safety__badge-text {
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.1;
	max-width: 80%;
}

/* --- Bottom dark navy CTA banner -------------------------------------- */
.pd-child-safety__cta {
	margin-top: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
	border-radius: var(--pd-card-radius);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.pd-child-safety__cta-eyebrow {
	font-family: var(--wp--preset--font-family--sink);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	margin: 0 0 4px;
	color: var(--wp--preset--color--base);
}

.pd-child-safety__cta-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--base);
	opacity: 0.9;
}

.pd-child-safety__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 1rem 2.5rem;
	border-radius: 65px;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.pd-child-safety__cta-button:hover {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	.pd-child-safety__top {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.pd-child-safety__headline-top,
	.pd-child-safety__headline-bottom {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.pd-child-safety__badge {
		width: 100px;
		height: 100px;
	}

	.pd-child-safety__badge i {
		font-size: 1.75rem;
	}

	.pd-child-safety__cta {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   Price-Match Bar (header) — Wave 3 update
   Bigger font, navy text, shield-check icon flush left.
   ========================================================================== */
.pd-price-match-bar .pd-price-match-text {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-deep);
}

.pd-price-match-bar .pd-price-match-text i.fa-sharp {
	font-size: 1.25em;
	color: var(--wp--preset--color--accent-deep);
}

/* ==========================================================================
   Product Hero Gallery (pd-hero-gallery)
   Bigger main image, horizontal click-through thumbnail row underneath.
   Click handler in hero-gallery.js swaps the main image src on thumb tap.
   ========================================================================== */
.pd-hero-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.pd-hero-gallery__main {
	margin: 0;
	border-radius: var(--pd-card-radius);
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
}

.pd-hero-gallery__main img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.pd-hero-gallery__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wp--preset--spacing--20);
}

.pd-hero-gallery__thumb {
	margin: 0;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s ease;
	background: none;
	padding: 0;
	width: 100%;
}

.pd-hero-gallery__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.pd-hero-gallery__thumb:hover,
.pd-hero-gallery__thumb:focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.pd-hero-gallery__thumb.is-active {
	border-color: var(--wp--preset--color--accent-deep);
}

/* ==========================================================================
   Full-Width Button block style (core/button)
   Apply "Full Width" to a button block to make it span the full width of
   its parent buttons container. Works alongside core's button width controls.
   ========================================================================== */
.wp-block-button.is-style-full-width {
	width: 100%;
	flex: 1 0 100%;
}

.wp-block-button.is-style-full-width .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* ==========================================================================
   Tagline Banner pattern — 1-line accent strip used as a visual break
   between comparison sections. Switch the background between accent
   (orange) and accent-deep (navy) on alternating instances.
   ========================================================================== */
.pd-tagline-banner {
	text-align: center;
}

.pd-tagline-banner .fa-sharp {
	color: currentColor;
}

/* ==========================================================================
   Image Strip pattern — full-width 4-image row, no gutters, used as a
   visual break between comparison sections.
   ========================================================================== */
.pd-image-strip .wp-block-gallery.has-nested-images figure.wp-block-image {
	border-radius: 0;
}

.pd-image-strip .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 781px) {
	.pd-image-strip .wp-block-gallery.has-nested-images.columns-4 {
		--wp--style--unstable-gallery-gap: 0px;
	}
	.pd-image-strip .wp-block-gallery.has-nested-images.columns-4 > figure.wp-block-image {
		width: calc(50% - 0px);
	}
}

/* ==========================================================================
   Mesh Comparison block (acf/mesh-comparison)
   Bridged from Leran's "Pool Defence Difference" infographic mockups —
   honors the two-column compare, VS badge, and bottom-line tagline ideas
   while replacing the saturated orange/navy + Poppins 900 + heavy medallion
   icons with the existing site's tokens, Sink/Aloe Vera typography, and
   Sharp Light FA icons. Designed to read as part of the Pool Defence brand
   system rather than as an embedded infographic ad.
   ========================================================================== */
.pd-mesh-compare {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
}

.pd-mesh-compare__inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
}

.pd-mesh-compare--empty {
	border: 1px dashed var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

/* --- Section header (eyebrow + headline) ------------------------------- */
.pd-mesh-compare__header {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

.pd-mesh-compare__eyebrow {
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.5em;
}

.pd-mesh-compare__headline {
	font-family: var(--wp--preset--font-family--sink);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* --- 2-col grid with center VS ----------------------------------------- */
.pd-mesh-compare__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.pd-mesh-compare__card {
	background: var(--wp--preset--color--base);
	border-radius: var(--pd-card-radius);
	box-shadow: var(--pd-box-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Top stripe removed — the solid colored card-head now carries the
   "this side is X" identity on its own. */

/* Card header — solid brand color, white text. The badge stays as a white
   circle with the brand-colored icon, so it reads as a clean punched-out
   accent on the colored header (same effect Leran's mockups had). */
.pd-mesh-compare__card-head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--base);
}

.pd-mesh-compare__card--left .pd-mesh-compare__card-head {
	background: var(--wp--preset--color--accent);
}

.pd-mesh-compare__card--right .pd-mesh-compare__card-head {
	background: var(--wp--preset--color--accent-deep);
}

.pd-mesh-compare__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	font-size: 1.25rem;
	flex-shrink: 0;
}

.pd-mesh-compare__card--left .pd-mesh-compare__badge {
	color: var(--wp--preset--color--accent);
}

.pd-mesh-compare__card--right .pd-mesh-compare__badge {
	color: var(--wp--preset--color--accent-deep);
}

.pd-mesh-compare__card-title {
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

/* Title sits ON the colored header now, so it flips to white on both sides. */
.pd-mesh-compare__card--left .pd-mesh-compare__card-title,
.pd-mesh-compare__card--right .pd-mesh-compare__card-title {
	color: var(--wp--preset--color--base);
}

/* Rows — tinted lighter-companion bg under each colored header. */
.pd-mesh-compare__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pd-mesh-compare__card--left .pd-mesh-compare__rows {
	background: var(--wp--preset--color--base-alt);
}

.pd-mesh-compare__card--right .pd-mesh-compare__rows {
	background: var(--wp--preset--color--primary-light);
}

.pd-mesh-compare__row {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pd-mesh-compare__row:first-child {
	border-top: 0;
}

.pd-mesh-compare__row-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.pd-mesh-compare__card--left .pd-mesh-compare__row-icon {
	color: var(--wp--preset--color--accent);
}

.pd-mesh-compare__card--right .pd-mesh-compare__row-icon {
	color: var(--wp--preset--color--accent-deep);
}

.pd-mesh-compare__row-headline {
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.35em;
}

.pd-mesh-compare__card--right .pd-mesh-compare__row-headline {
	color: var(--wp--preset--color--accent-deep);
}

.pd-mesh-compare__row-subtext {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	margin: 0;
}

/* Center VS badge — sits in the gap between cards on desktop */
.pd-mesh-compare__vs {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, calc(var(--wp--preset--spacing--40) - 50%));
	z-index: 2;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
	border: 4px solid var(--wp--preset--color--base);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
}

/* --- Bottom-line tagline banner ---------------------------------------- */
.pd-mesh-compare__bottom {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary-light);
	border-radius: var(--pd-card-radius);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.pd-mesh-compare__bottom-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
	font-size: 1.5rem;
	flex-shrink: 0;
}

.pd-mesh-compare__bottom-eyebrow {
	font-family: var(--wp--preset--font-family--aloe-vera-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent-deep);
	margin: 0 0 0.25em;
}

.pd-mesh-compare__bottom-text {
	font-family: var(--wp--preset--font-family--sink);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 781px) {
	.pd-mesh-compare__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.pd-mesh-compare__vs {
		position: static;
		transform: none;
		margin: calc(var(--wp--preset--spacing--30) * -1) auto;
	}

	.pd-mesh-compare__bottom {
		flex-direction: column;
		text-align: center;
		gap: var(--wp--preset--spacing--30);
	}

	.pd-mesh-compare__row {
		grid-template-columns: 44px 1fr;
		gap: var(--wp--preset--spacing--20);
	}
}

/* ============================================================
   Archive / blog post grid (templates/archive.html)
   ============================================================ */

.pd-post-card {
	border: 1px solid var(--wp--preset--color--border);
	transition: transform 200ms ease, box-shadow 200ms ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.pd-post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(26, 26, 26, 0.08);
}

.pd-post-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.pd-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.pd-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.pd-post-card .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: 0;
	line-height: 1.25;
}

.pd-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.pd-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.pd-post-card .wp-block-post-excerpt {
	flex-grow: 1;
	margin-top: var(--wp--preset--spacing--20);
}

.pd-post-card .wp-block-post-excerpt__excerpt {
	margin-bottom: var(--wp--preset--spacing--30);
}

.pd-post-card .wp-block-post-excerpt__more-link,
.pd-post-card .wp-block-read-more {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
	margin-top: auto;
	display: inline-block;
}

.pd-post-card .wp-block-post-excerpt__more-link:hover,
.pd-post-card .wp-block-read-more:hover {
	text-decoration: underline;
}

/* Stretch grid items so every card in a row matches the tallest one */
.pd-post-grid > li,
.pd-post-grid.wp-block-post-template {
	align-items: stretch;
}

/* Archive page title spacing */
.wp-block-query-title {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.pd-post-card {
		padding: var(--wp--preset--spacing--20) !important;
	}
}