/*
Theme Name: PSAS
Author: Moondog Development, LLC
Version: 1.0.1288
Description: A clean, modern Full Site Editing block theme baseline.
Text Domain: psas
Date Updated: 07/01/2026
*/

/* ==========================================================================
CSS CUSTOM PROPERTIES / THEME MAPPER
========================================================================== */
:root {
	/* Theme Colors */
	--primary: var(--wp--preset--color--primary, #52544f);
	--footer: var(--wp--preset--color--footer, #525a56);
	--text: var(--wp--preset--color--text, #2e2e2e);
	--background: var(--wp--preset--color--background, #ffffff);
	--blue: var(--wp--preset--color--blue, #5baec2);
	--blue-border: #00b4d8;
	--orange: var(--wp--preset--color--orange, #e66245);
	--yellow: var(--wp--preset--color--yellow, #eec25e);
	--green: var(--wp--preset--color--green, #c4cc43);
	--blue-light: var(--wp--preset--color--blue-light, #EEF6F9);
	--white: #ffffff;
	--black: #000000;
	--top-bar-background: var(--text, #2E2E2E);
	--body-background-color: #333537;
	--main-background-color: var(--background, #ffffff);
	--mobile-menu-background: #ffffff;
	--mobile-overlay-border-color: #dbe8ed;

	/* Typography */
	--fontTheme: var(--wp--preset--font-family--tt-commons-pro, "tt-commons-pro", sans-serif);

	/* Font Sizes */
	--wp--preset--font-size--x-small: 0.85rem;
	--font-size-small: 0.9rem;
	--font-size-normal: 1.3rem;
	--font-size-h6: 1.1rem;
	--font-size-h5: 1.25rem;
	--font-size-h4: 1.5rem;
	--font-size-h3: 2rem;
	--font-size-h2-footer: 3rem;
	--font-size-h2-clamp: clamp(2rem, 5vw, 3.5rem);
	--font-size-h2: 3.5rem;
	--font-size-h2-cover-slider: 4.9rem;
	--font-size-h1-clamp: clamp(2.5rem, 6vw, 4.5rem);
	--font-size-h1: 4.5rem;
	--font-size-h2-cover-slider-laptop: 3.5rem;
	--font-size-h2-cover-slider-mobile: 2rem;
	--font-size-h2-hero-laptop: 3.5rem;
	--font-size-h2-hero-mobile: 1.5rem;
	--font-title-decorative-mobile: 2rem;

	/* Layout & UI Variables */
	--max-width: 1920px;
	--header-height-calc: 145px;
	--aspect-ratio-animal-cards: 3 / 4;
	--box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
	--anchor-offset: 400px;
	--padding-top-bar-top: 10px;
	--padding-standard: 25px;
	--laptop-padding: 95px;
	--mobile-padding: 55px;
	--hero-cover-mobile-padding: 45px;
	--mobile-dots-margin-bottom: clamp(70px, 24vw, 175px);
	--column-gap-mobile: 80px;
	--padding-section-block: 5rem;
	--padding-sub-section-block: 1.75rem;

}

/* HTML5 Reset
---------------------------------------------------------------------------- */

/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
---------------------------------------------------------------------------- */
/* stylelint-disable */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
/* stylelint-enable */

/* Box Sizing
--------------------------------------------- */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}


/* Defaults
---------------------------------------------------------------------------- */

/* Typographical Elements
--------------------------------------------- */

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body {
	background: var(--body-background-color, #333537);

}
body > .wp-site-blocks {
	background: var(--main-background-color, #ffffff);
}

/* ==========================================================================
TYPOGRAPHY & HEADING OVERRIDES
========================================================================== */
h1, .has-h-1-font-size {
	font-size: var(--font-size-h1);
}

h2, .has-h-2-font-size {
	font-size: var(--font-size-h2);
}

.cover-slider h2 {
	font-size: var(--font-size-h2-cover-slider);
}

h3, .has-h-3-font-size {
	font-size: var(--font-size-h3);
}

h4, .has-h-4-font-size {
	font-size: var(--font-size-h4);
}

h5, .has-h-5-font-size {
	font-size: var(--font-size-h5);
}

h6, .has-h-6-font-size {
	font-size: var(--font-size-h6);
}

/* Global Heading Base Styles */
h1, h2, h3, h4, h5, h6 {
	/*! font-family: var(--fontTheme); */
	/*! line-height: 1.25; */
	/*! font-weight: 700; */
	/* margin-top: 0; */
	/* margin-bottom: 1.25rem; */
}
.wp-block-cover h1,
.wp-block-cover h2 {
	line-height: 1;
}
/* Buttons */
/* Base Transition Coverage */
.button,
.wp-block-button__link {
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out !important;
}

/* Hover States */
.button:hover,
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--orange) !important;
	color: #fff !important;

}
.buttons-donation .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--blue) !important;
	color: #fff !important;
}


main {
	margin: 0;
}
body .margin-left-auto {
	margin-left: auto;
}
.margin-right-auto {
	margin-right: auto;
}
.margin-auto {
	margin: 0 auto;
}
.mw-1250 {
	max-width: 1250px;
}
.mw-1000 {
	max-width: 1000px;
}
.mw-75per {
	max-width: 75%;
}
.mw-60per {
	max-width: 60%;
}
.is-padding-standard {
	padding-inline: var(--padding-standard);
}
/* Page Section */
.page-section {
	margin-top: 0;
	> .wp-block-group, > .wp-block-columns {
		padding-inline: var(--padding-standard, 25px);
	}
	&.under-hero {
		--size: 150px;
		padding: 0;
		margin-top: calc(var(--size) - calc(var(--size)*2));
		> .wp-block-group:first-of-type {
			padding: 0;
			margin: 0;
			> iframe {
				margin: 0;
				padding-top: var(--size);
			}
		}
	}
	.wp-block-table {
		border-radius: 45px;
		font-size: 1rem;
		background: var(--blue-light);
		overflow: hidden; /* Ensures rounded corners clip table headers cleanly */

		thead {
			border: 0;
			background: var(--blue);
			color: #fff;
		}

		tr, th, td, table.has-fixed-layout {
			border: 0;
		}

		td {
			border-bottom: 1px solid rgba(0,0,0, .04);
		}

		/* 1. Reset alignment and add clean padding to all cells */
		th, td {
			padding: 12px 20px;
			vertical-align: middle;
		}

		/* 2. Center the species columns (Cats, Dogs, Other Species and their fees) */
		th:not(:first-child),
			td:not(:first-child) {
				text-align: center;
		}

		/* 3. First column styling (Desktop) */
		th:first-child,
			td:first-child {
				padding-left: 62px;
				text-align: left;
				font-weight: 700;
		}

		/* ==========================================================================
		MOBILE RESPONSIVE OVERRIDES (768px & below)
		========================================================================== */
		@media (max-width: 768px) {
			border-radius: 24px; /* Tighter border-radius for small mobile viewports */
			font-size: 0.875rem;  /* Slightly smaller font to preserve column layout */

			th, td {
				padding: 10px 8px; /* Reduce default cell padding */
			}

			th:first-child,
			td:first-child {
				padding-left: 16px; /* Override 62px padding to free up horizontal space */
				word-break: normal;  /* Prevents breaking words awkwardly like "Vaccin e:" */
				hyphens: none;
			}

			th:not(:first-child),
			td:not(:first-child) {
				white-space: nowrap; /* Keep prices ($25, N/A) cleanly on one line */
				width: 22%;          /* Allocate consistent width for fee columns */
			}
		}
	}
}

.donate-bar {
	background: var(--blue-light);
	border-radius: 20px;
	padding: var(--padding-standard);
	display: flex;
	align-items: center;
	padding: var(--padding-standard);
	> .wp-block-group {
		margin: 0;
	}
}
/* Styled Hero */
.page-hero > article,
.page-section-subservice > article,
.page-section-slider > article {
	border-bottom-right-radius: 105px;
	border-bottom-left-radius: 105px;
	padding: 0;
}
/* Root-Only SVG Background Utility Class */
.is-svg-background {
	position: relative;
	overflow: hidden;

	&::after {
		content: '';
		position: absolute;
		bottom: -160px;
		left: -50px;
		width: 710px;
		height: 710px;
		background-image: url('assets/svg/logo.svg');
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: contain;
		opacity: 0.15; /* Default opacity for light/normal backgrounds */
		pointer-events: none;
		z-index: 0;
		transition: opacity 0.2s ease, filter 0.2s ease;
	}
	&.svg-right {
		&::after {
			right: 30px;
			left: unset;
			bottom: -190px;
		}
	}
	&.wp-block-cover {
		&::after {
			z-index: 1;
		}
	}
	/* Target specific WordPress preset background colors on the same element */
	&.has-orange-background-color,
	&.has-primary-background-color,
	&.has-blue-background-color {
		&::after {
			opacity: 0.25;
			filter: brightness(0%) invert(100%); /* Force white logo on dark/colored presets */
		}
	}

	/* Elevates direct inner content above the watermark */
	> * {
		position: relative;
		z-index: 1;
	}
}
/* Base Callout Style for Quotes */
.wp-block-quote {
	/* Default Callout Styling (Fallback / Default Accent) */
	--callout-accent: var(--wp--preset--color--blue, #0073aa);

	position: relative;
	margin: 1.75em 0;
	padding: 1.25rem 1.5rem;
	background-color: color-mix(in srgb, var(--callout-accent) 8%, transparent);
	border-left: 4px solid var(--callout-accent);
	border-radius: 0 6px 6px 0;
	font-style: normal; /* Removes default italic quote look */
}

/* Color Modifier Classes (Applied via Gutenberg "Additional CSS Class(es)") */
.wp-block-quote.is-style-blue,
.wp-block-quote.has-blue-color {
	--callout-accent: var(--wp--preset--color--blue, #2196f3);
}

.wp-block-quote.is-style-orange,
.wp-block-quote.has-orange-color {
	--callout-accent: var(--wp--preset--color--orange, #ff9800);
}

.wp-block-quote.is-style-red,
.wp-block-quote.has-red-color {
	--callout-accent: var(--wp--preset--color--red, #f44336);
}

.wp-block-quote.is-style-green,
.wp-block-quote.has-green-color {
	--callout-accent: var(--wp--preset--color--green, #4caf50);
}

/* --------------------------------------------------
Typography & Child Elements (Headings, Paragraphs, Lists)
-------------------------------------------------- */

/* Reset default quote citations and inner block margins */
.wp-block-quote > :first-child {
	margin-top: 0;
}

.wp-block-quote > :last-child {
	margin-bottom: 0;
}

/* Styling Paragraphs inside the quote */
.wp-block-quote p {
	font-style: normal;
	font-size: 1rem;
	line-height: 1.6;
	color: inherit;
	margin-bottom: 0.75em;
}

/* Styling Headings inside the quote */
.wp-block-quote h1,
.wp-block-quote h2,
.wp-block-quote h3,
.wp-block-quote h4,
.wp-block-quote h5,
.wp-block-quote h6 {
	color: var(--callout-accent);
	font-style: normal;
	margin-top: 0;
	margin-bottom: 0.5em;
	font-weight: 600;
}

/* Styling Lists inside the quote */
.wp-block-quote ul,
.wp-block-quote ol {
	margin-bottom: 0.75em;
	padding-left: 1.25rem;
}

.wp-block-quote cite {
	display: block;
	font-style: normal;
	font-size: 0.875rem;
	opacity: 0.8;
	margin-top: 0.75em;
}
/* ==========================================================================
No-Jump Sticky Header (Pure JS Clone Method)
========================================================================== */

/* 1. Base Header (Natural flow at page top) */
header.wp-block-template-part {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06), 0 5px 15px rgba(0, 0, 0, 0.04);
}

/* 2. Cloned Header Default State (Fixed, Off-Screen) */
.psas-sticky-header-clone {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999; /* Higher than WP Admin Bar / Mega Menus */

	/* Off-screen position and transition handling */
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none; /* Prevents clicks while hidden */
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
		opacity 0.3s ease,
		box-shadow 0.4s ease,
		background-color 0.4s ease;

	/* Visual Styling */
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Adjust top position if WP Admin Bar is present */
body.admin-bar .psas-sticky-header-clone {
	top: 32px;
}

/* 3. Active State (Triggered when scrolled past threshold) */
.psas-sticky-header-clone.is-active {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.lang-picker .wp-block-navigation-item__label {
	font-weight: 700;
}
.lang-picker svg {
	border-radius: 50%;
}

/* ==========================================================================
WordPress Core Gap / Margin Override
========================================================================== */
.wp-site-blocks > header + * {
	margin-block-start: 0;
}

.strong-is-colored strong {
	color: var(--wp--preset--color--blue);
}



.wp-block-button__link.wp-element-button:has(svg) {
	display: flex;
	align-items: center;
	gap: 4px;
}
.wp-block-button__link.wp-element-button svg {
	fill: #fff;
}
/* Target lists inside your custom column/section layout wrapper */
.wp-block-list.list-style-none,
.wp-block-list:has(.has-location-icon), .wp-block-list:has(.has-phone-icon),
.wp-block-list.has-checkmark {
	list-style: none; /* Strip standard bullet markup */
	padding-left: 0;   /* Drop standard browser indentation metrics */
	margin-left: 0;
}
.wp-block-list:has(.has-location-icon) li, .wp-block-list:has(.has-phone-icon) li,
.wp-block-list.has-checkmark li {
	position: relative;
	padding-left: 2rem; /* Clean room for the 1.25rem icon + a small gap */
	margin-bottom: 0.85rem; /* Vertical baseline separation */
	line-height: 1.5;
	display: block;
}

/* Inject the native circular checkmark vector */
.wp-block-list.has-checkmark li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em; /* Precisely centers the vector ring to your line height */

	/* Box boundaries */
	width: 1.35rem;
	height: 1.35rem;
	display: inline-block;

	/* Clean, sanitized SVG data string using your exact path coordinates and theme orange */
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23e66245"%3E%3Cpath d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
/* Inject the native map pin location vector variant */
.wp-block-list li.has-location-icon::before {
	content: "";
	position: absolute;
	top: 0.15em; /* Keeps the map pin perfectly level with the text line-height */

	/* Box boundaries matching your checkmark frame size */
	width: 1.35rem;
	height: 1.35rem;
	display: inline-block;

	/* Sanitized Data-URI containing both paths from your location SVG (#53AABF -> %2353AABF) */
	background-image: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12 24C11.882 24 11.764 23.958 11.669 23.875C11.315 23.562 3 16.144 3 9C3 4.037 7.038 0 12 0C16.962 0 21 4.037 21 9C21 16.144 12.685 23.562 12.331 23.875C12.236 23.958 12.118 24 12 24ZM12 1C7.589 1 4 4.589 4 9C4 14.918 10.451 21.358 12 22.819C13.549 21.358 20 14.918 20 9C20 4.589 16.411 1 12 1Z" fill="%2353AABF"/%3E%3Cpath d="M12 14C9.243 14 7 11.757 7 9C7 6.243 9.243 4 12 4C14.757 4 17 6.243 17 9C17 11.757 14.757 14 12 14ZM12 5C9.794 5 8 6.794 8 9C8 11.206 9.794 13 12 13C14.206 13 16 11.206 16 9C16 6.794 14.206 5 12 5Z" fill="%2353AABF"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-left: -2rem;
}
/* ==========================================================================
PARTNER LOGO CAROUSEL (.is-carousel)
========================================================================== */

/* Outer Clip & Edge Masking */
.is-carousel {
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 1.5rem 0;
	mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Base Track */
.is-carousel .carousel-track {
	display: flex;
	align-items: center;
	gap: 1.5rem; /* 24px gap between cards */
	width: max-content;
	will-change: transform;
	animation: logoMarquee 28s linear infinite;
}

/* Pause Scrolling on Hover */
.is-carousel:hover .carousel-track {
	animation-play-state: paused;
}

/* Scaled Up Card Sizing & Background Tiles */
.page-section-signup .wp-block-image.size-full,
.is-carousel .wp-block-image {
	background: #eef6f9;
	border-radius: 12px;
	padding: 1.25rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* Prevents flexbox compression on narrow screens */
	width: 240px;  /* Card width */
	height: 120px; /* Card height */
	margin: 0;
	box-sizing: border-box;
}

/* Logo Image Max Height */
.is-carousel .wp-block-image img {
	max-height: 100px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Dynamic Loop Keyframe */
@keyframes logoMarquee {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(var(--marquee-shift, -1000px), 0, 0);
	}
}
/* Inject the native retro handset phone vector variant */
.wp-block-list li.has-phone-icon::before {
	content: "";
	position: absolute;
	top: 0.15em; /* Keeps the handset vertically true to your line height text baseline */

	/* Box boundaries matching your checkmark and map-pin frames */
	width: 1.35rem;
	height: 1.35rem;
	display: inline-block;

	/* Sanitized Data-URI string combining all three paths (%2353AABF -> #53AABF) */
	background-image: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M18.9677 14.8676C18.4763 14.356 17.8837 14.0825 17.2556 14.0825C16.6326 14.0825 16.0348 14.3509 15.5232 14.8625L13.9226 16.4581C13.7909 16.3872 13.6592 16.3214 13.5326 16.2555C13.3502 16.1643 13.178 16.0782 13.0311 15.9871C11.5317 15.0348 10.1691 13.7937 8.86229 12.188C8.22912 11.3877 7.80362 10.714 7.49464 10.0302C7.91 9.65028 8.29497 9.25518 8.6698 8.87528C8.81163 8.73345 8.95346 8.58655 9.09529 8.44472C10.159 7.381 10.159 6.00322 9.09529 4.93949L7.71245 3.55665C7.55542 3.39962 7.39333 3.23753 7.24137 3.07544C6.93745 2.76139 6.61833 2.4372 6.28908 2.13328C5.79774 1.64701 5.21016 1.38867 4.59218 1.38867C3.97421 1.38867 3.3765 1.64701 2.86996 2.13328C2.86489 2.13835 2.86489 2.13835 2.85983 2.14341L1.13761 3.88083C0.489239 4.5292 0.119467 5.31939 0.0384214 6.23623C-0.0831474 7.71531 0.352474 9.09309 0.686788 9.99473C1.50738 12.2083 2.7332 14.2598 4.56179 16.4581C6.78042 19.1073 9.44987 21.1993 12.4992 22.6733C13.6643 23.2255 15.2193 23.8789 16.9567 23.9903C17.0631 23.9954 17.1745 24.0005 17.2759 24.0005C18.446 24.0005 19.4286 23.58 20.1986 22.7442C20.2036 22.7341 20.2138 22.7291 20.2188 22.7189C20.4822 22.3998 20.7862 22.1111 21.1053 21.8021C21.3231 21.5944 21.546 21.3766 21.7638 21.1487C22.2652 20.6269 22.5286 20.0191 22.5286 19.396C22.5286 18.7679 22.2602 18.1652 21.7486 17.6586L18.9677 14.8676ZM20.7811 20.2014C20.776 20.2014 20.776 20.2065 20.7811 20.2014C20.5835 20.4142 20.3809 20.6067 20.1631 20.8194C19.8339 21.1335 19.4996 21.4627 19.1855 21.8325C18.6739 22.3795 18.0711 22.6379 17.2809 22.6379C17.2049 22.6379 17.1239 22.6379 17.0479 22.6328C15.5435 22.5366 14.1455 21.949 13.0969 21.4475C10.2299 20.0596 7.71245 18.0892 5.62045 15.592C3.89316 13.5101 2.73826 11.5852 1.97339 9.51858C1.50231 8.25731 1.33009 7.27463 1.40607 6.34766C1.45672 5.75502 1.68466 5.26368 2.10509 4.84325L3.83238 3.11596C4.08058 2.88295 4.34398 2.75632 4.60231 2.75632C4.92143 2.75632 5.17977 2.9488 5.34186 3.1109C5.34692 3.11596 5.35199 3.12103 5.35705 3.12609C5.66604 3.41482 5.95983 3.71367 6.26882 4.03279C6.42585 4.19488 6.58794 4.35698 6.75003 4.52413L8.13287 5.90698C8.6698 6.44391 8.6698 6.94031 8.13287 7.47724C7.98598 7.62414 7.84415 7.77103 7.69725 7.91286C7.27176 8.34848 6.86653 8.75371 6.42585 9.14881C6.41572 9.15894 6.40558 9.16401 6.40052 9.17414C5.9649 9.60976 6.04594 10.0352 6.13712 10.324C6.14219 10.3392 6.14725 10.3544 6.15232 10.3696C6.51196 11.2408 7.01849 12.0614 7.78843 13.039L7.79349 13.0441C9.19153 14.7663 10.6656 16.1086 12.2915 17.1369C12.4992 17.2686 12.712 17.375 12.9146 17.4763C13.0969 17.5674 13.2692 17.6536 13.416 17.7447C13.4363 17.7549 13.4566 17.7701 13.4768 17.7802C13.6491 17.8663 13.8111 17.9068 13.9783 17.9068C14.3987 17.9068 14.6621 17.6434 14.7482 17.5573L16.4806 15.825C16.6528 15.6527 16.9263 15.4451 17.2455 15.4451C17.5595 15.4451 17.8179 15.6426 17.9749 15.8148C17.9799 15.8199 17.9799 15.8199 17.985 15.825L20.776 18.616C21.2978 19.1326 21.2978 19.6645 20.7811 20.2014Z" fill="%2353AABF"/%3E%3Cpath d="M12.9711 5.7081C14.2982 5.93098 15.5038 6.55909 16.4662 7.5215C17.4286 8.48392 18.0516 9.68948 18.2796 11.0166C18.3353 11.3509 18.624 11.5839 18.9533 11.5839C18.9938 11.5839 19.0293 11.5789 19.0698 11.5738C19.4446 11.513 19.6928 11.1584 19.632 10.7836C19.3585 9.17788 18.5987 7.71399 17.4387 6.55402C16.2788 5.39405 14.8149 4.63425 13.2092 4.36072C12.8343 4.29993 12.4848 4.54814 12.419 4.91791C12.3531 5.28768 12.5962 5.64732 12.9711 5.7081Z" fill="%2353AABF"/%3E%3Cpath d="M23.9723 10.5869C23.5215 7.94279 22.2754 5.53674 20.3607 3.62203C18.446 1.70732 16.04 0.461243 13.3958 0.0104253C13.0261 -0.0554245 12.6766 0.197844 12.6107 0.567615C12.5499 0.942452 12.7981 1.29196 13.173 1.35781C15.5334 1.75798 17.6862 2.87742 19.3983 4.58445C21.1104 6.29654 22.2248 8.44932 22.6249 10.8098C22.6807 11.1441 22.9694 11.3771 23.2986 11.3771C23.3392 11.3771 23.3746 11.372 23.4151 11.367C23.7849 11.3113 24.0382 10.9567 23.9723 10.5869Z" fill="%2353AABF"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-left: -2rem;
}

.wp-block-list.list-style-none,
.wp-block-list.list-style-none li {
	padding:0;
}
.wp-block-list.list-style-none li:before {
	display: none;
}
/* 1. Force the grid to expand past the narrow WordPress content container limit */
.page-section-signup .wp-block-group-is-layout-grid {
	max-width: 100%;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;

	/* 2. Ditch auto-fit logic and build an explicit 4-column responsive grid template */
	grid-template-columns: repeat(4, minmax(0, 1fr));

	/* 3. Drop your alignment logic back in place */
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: 2rem; /* Adjust spacing between your logo blocks */
}

svg#logo .cls-1 {fill: #fff;}
svg#logo .cls-2 {fill: #231f20;}
svg#logo .cls-3 {fill: #fbf5ec;}
svg#logo .cls-4 {fill: #53aabf;}
svg#logo .cls-5 {fill: #e66245;}
svg#logo .cls-6 {fill: #c3ca44;}

.page-section-donate {
	margin-top: calc(-1.75rem + -20px);
	position: relative;
	z-index: 3;
}
/* ==========================================================================
COVER SLIDER (Existing Styles + Dynamic UI Controls Hookup)
========================================================================== */
body:not(.block-editor-iframe__body ) .cover-slider {
	position: relative;
	overflow: hidden;
	min-height: 860px;

	.cover-slide:not(.cover-slide-1),
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:empty {
		display: none;
	}
	.slider-slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		z-index: 1;
		transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
	}
	.slider-slide.is-active {
		opacity: 1;
		visibility: visible;
		z-index: 2;
	}
	h2 {
		font-size: var(--font-size-h2-cover-slider);
		strong {
			color: #125262;
		}
	}
	img[src] {
		/*z-index: 1;*/
	}
	.slider-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		background: rgba(18, 82, 98, 0.4); /* Primary brand dark teal */
		color: #ffffff;
		border: none;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
		left: 2rem;
	}
	.slider-arrow:hover {
		background: rgba(18, 82, 98, 0.85);
		transform: translateY(-50%) scale(1.08);
	}
	.slider-next {
		right: 2rem;
		left: auto;
	}

	.slider-dots {
		position: relative; /* Removes absolute positioning so it flows in normal block stack */
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: flex-start; /* Left-justified inside the text column */
		gap: 0.75rem;
		margin-top: 1.75rem; /* Generates natural, clean breathing room directly under the buttons */
	}
	.slider-dot {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		border: 2px solid #ffffff;
		background: transparent;
		cursor: pointer;
		padding: 0;
		transition: background-color 0.3s ease, transform 0.2s ease;
	}
	.slider-dot.is-active, .slider-dot:hover {
		background: #ffffff;
		transform: scale(1.15);
	}

}


/* ==========================================================================
COVER TYPOGRAPHY & BUTTON STYLES
========================================================================== */

body:not(.home) {
	.wp-block-cover:has(.has-green-background-color) {
		.wp-block-heading,.wp-block-post-title, .wp-block-breadcrumbs *, .wp-block-paragraph {
			color: var(--text);
		}
	}
	.wp-block-breadcrumbs li {
		&:first-of-type a {
			font-weight: 700;
			text-decoration: none;
		}
		&:last-of-type span {
			opacity: .75;
			font-weight: 400;
		}
	}
	.wp-block-breadcrumbs a {
		text-decoration: none;
		font-weight: 700;
	}
	& .page-hero .wp-block-cover {
		min-height: 860px;
		h1:has(+ h2) {
			/* Styled on-page to look like breadcrumbs */
			font-size: 0.875rem;
		}

		h1 + h2 {
			/*
			Min: 2rem (~32px) on small screens
			Ideal: 5vw (scales smoothly with screen width)
			Max: 4.5rem (~72px) on desktop screens
			*/
			/* Support, Services, Adopt, About, Favorites */
			/* font-size: clamp(2rem, 5vw, 4.9rem); */
			font-size: 4.9rem;
		}
		/* Services > Lost Your Pet, Garden Cats, Found A Pet, Adopt a Cat/Dog/Other */
		.wp-block-breadcrumbs + .wp-block-heading {
			/* font-size: clamp(2rem, 5vw, 4.9rem); */
			font-size: 4.9rem;
		}
	}

}


.is-style-outline .wp-block-button__link.wp-element-button {
	border-width: 1px;
	padding-top: 15.5px;
	padding-bottom: 15.5px;
	padding-left: 2.25rem;
	padding-right: 2.25rem;
}

/* Page Section Cards Base Utility */
.page-section-cards {

	.wp-block-button__link.wp-element-button::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}


	.wp-block-column p + p {
		font-size: 1rem;
		padding: 0 15px 15px;
		&:hover {
			color: #000;
		}
	}



	.wp-block-column .wp-block-buttons,
	.wp-block-group-is-layout-grid .wp-block-buttons {
		margin-top: auto;
		width: 100%;
	}

	/* ==========================================================================
	TARGET BOTH: 1. Columns layout groups, 2. Grid layout child groups
	========================================================================== */
	.wp-block-column > .wp-block-group,
	.wp-block-group-is-layout-grid > .wp-block-group {
		display: flex;
		flex-direction: column;
		height: 100%;

		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06), 0 5px 15px rgba(0, 0, 0, 0.04);
		transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
		transform: translateY(0);
		position: relative;

		background: var(--blue-light);
		max-width: 391px;
		margin-inline: auto;
		width: 100%;
		padding-inline: var(--mobile-padding, 25px);
		.wp-block-image.size-full.has-custom-border {
			margin-top: 15px;
		}


		&:hover {
			transform: translateY(-4px);
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
			background: var(--blue);

		}


		h2 a, h3 a {
			color: var(--text);
			font-size: 1.75rem;
			line-height: 1.2;
			text-decoration: none;

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 1;
			}

			&:hover {
				color: var(--text);
			}
		}

		&:has(a:hover) {
			background: var(--blue) !important;

			h2, h3, h3 a, p {
				color: #fff;
			}

			.wp-block-button .wp-block-button__link.wp-element-button {
				background: #fff;
				color: var(--text);
			}
		}
	}

	/* ==========================================================================
	Inner block wrapper adjustments to handle flex expansions elegantly
	========================================================================== */
	.wp-block-column > .wp-block-group > .wp-block-group-is-layout-constrained,
	.wp-block-column > .wp-block-group > [class*="is-layout-"],
	.wp-block-group-is-layout-grid > .wp-block-group > .wp-block-group-is-layout-constrained,
	.wp-block-group-is-layout-grid > .wp-block-group > [class*="is-layout-"] {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		height: 100%;
		justify-content: flex-end;
	}
}

/* Top Bar Base Settings */
.top-bar {
	position: relative;
	font-size: var(--wp--preset--font-size--x-small, 0.85rem);
	background: var(--top-bar-background);
	color: var(--white);
}
.top-bar .top-bar-wrap {
	padding: var(--padding-top-bar-top, 10px) var(--padding-standard, 25px);
	justify-content: space-between;
}

/* Force all inner elements inside the top bar to inherit the top bar's font size & color */
.top-bar p,
.top-bar span,
.top-bar div,
.top-bar .wp-block-paragraph,
.top-bar a:not(.favorites-link-button) {
	color: inherit;
	font-size: inherit;
}
.top-bar p,
.top-bar span,
.top-bar .wp-block-paragraph {
	font-weight: 400;
	opacity: .8;
}

/* Absolute Positioning for the Close X Graphic */
.top-bar-close {
	position: absolute;
	margin: 0;
	right: 1.5rem;             /* Pushes it neatly away from the right edge margin */
	top: 50%;
	transform: translateY(-50%); /* Locks the vertical centering track perfectly */
	background: transparent;
	border: none;
	color: #ffffff;   /* Matches white notification color specs */
	font-size: 1.5rem;          /* Clean scaling for an readable X shape */
	cursor: pointer;
	line-height: 1;
	padding: 0.25rem;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	margin-right: 240px;
}

.top-bar-close:hover {
	opacity: 1;
}

/* Hard Utility Class applied via JS to ensure it stays hidden across page reloads */
.top-bar.top-bar-hidden {
	display: none;
}
/* Header */
.header-buttons {
	gap: var(--padding-standard, 25px);
}

/* Section Events */
.page-section-events {
	h2 {
		/*! font-size: 5rem; */
		line-height: 1;
	}
	.wp-block-column:first-of-type p {
		padding-right: 25px;
	}
}
/* Site Footer */
footer:has(.site-footer-wrap) {
	background: var(--footer);
	color: var(--background);
	padding: var(--padding-section-block, 5rem) var(--padding-standard, 25px);
	margin-top: 0;
	.site-footer-wrap {

	}
	> .wp-block-group, > .wp-block-columns {

	}
	h2 {
		font-size: var(--font-size-h2-footer);

	}
	.footer-donate-button {
		min-width: 220px;
	}
	.site-credit {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: var(--padding-sub-section-block, 1.75rem) 0;
		> .wp-block-group {
			margin-top: 0;
			margin-bottom: 0;
		}
		.site-credit-socials {
			display: flex;
			gap: 30px;
		}
	}
	a {
		color: var(--white, #fff);
	}
	a:not(.wp-block-button__link.wp-element-button):hover {
		color: var(--blue, #fff) !important;
	}
	a.wp-block-button__link.wp-element-button:hover {
		border-color: var(--orange, #fff) !important;
	}
}
/* Page Section: Event Cards */
.page-section-event-cards > .wp-block-group {
	position: relative;
}
.page-section-event-cards > .wp-block-query .wp-block-post {
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
	background: var(--white);
	border-radius: 25px;
	padding: var(--wp--preset--spacing--50);
	/*! padding-right: 80px; */ /* 👈 Leave space on the right for your mock button */

	/* 1. Style the Card Title */
	h3 {
		margin: 0 0 30px;

		/* 2. Build the True Overlay Link */
		padding-right: 60px;
		a {
			color: var(--text);
			text-decoration: none;

			/* This makes the entire event card clickable */
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1; /* Sits over card text, but below interactive actions if any */
			}
		}

		/* 3. Build the Mock Button with the SVG Arrow */
		&::after {
			content: "";
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2; /* Keeps it visually on top of the card link overlay */
			pointer-events: none; /* Let clicks pass straight through to the anchor underneath */

			/* Mock button layout/colors */
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background-color: var(--blue, #ff6b00);
			transition: transform 0.25s ease, background-color 0.25s ease;

			/* Native WP SVG Chevron (White stroke to contrast against the button background) */
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4 1.5L8 6L4 10.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 16px 16px;
		}
	}

	/* 4. Hover states on the entire post card */
	&:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

		/* Trigger a smooth reaction on our mock button */
		h3::after {
			background-color: var(--orange, #2b3b4c);
			/*transform: translateY(-50%) scale(1.05); /* keep vertical centering and scale slightly */
		}
	}
}
.page-section-event-cards .wp-block-buttons {
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: 0;
	padding: 0;
	left: 0;
	right: 0;
	width: 100%;
	text-align: right;
	justify-content: flex-end;
	padding-right: 15px;
}
.page-section-event-cards > .wp-block-group .wp-block-button__link.wp-element-button::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}
.page-section-event-cards > .wp-block-query .wp-block-post:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12),
		0 5px 15px rgba(0, 0, 0, 0.06);
}
.wp-block-buttons.is-card-button.is-layout-flex.wp-block-buttons-is-layout-flex a {
	font-size: 0;
	padding: 0;
	margin: 0;
}
/* ==========================================================================
UPDATED COHERENT MEGA MENU ARCHITECTURE
========================================================================== */
.site-header-wrapper {
	position: relative;
}

.mega-menu-item .wp-block-column h2 {
	font-size: 1.4rem;
}
.mega-menu-item .wp-block-column h2 + .wp-block-paragraph {
	font-size: 1rem;
}
.mega-menu-item .wp-block-column .wp-block-button .wp-block-button__link{
	background: var(--blue);
}
/* Base structural styles for your floating panels */
.mega-menu-item {
	/* overflow stays off to help with mouseover height */
	/* overflow: hidden; */
	.wp-block-custom-event-date {
		font-size: .875rem;
	}
	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 40px;
		background: transparent;
		z-index: 1;
		width: 100%;
		margin-top: -40px;
	}
	/* SVG Watermark Background */
	> .wp-block-group {
		position: relative;
		overflow: hidden;
		padding: 40px;
		&:after {
			content: '';
			position: absolute;
			bottom: -100px; /* Bleeds off the bottom edge */
			left: 50px;  /* Bleeds off the left edge */
			width: 380px;  /* Scale to match reference proportions */
			height: 380px;
			background-image: url('assets/svg/logo.svg'); /* Use icon-only SVG if available, e.g., badge.svg */
			background-repeat: no-repeat;
			background-position: bottom left;
			background-size: contain;
			opacity: 0.15; /* Soft white/light contrast */
			pointer-events: none;
			z-index: 0;
		}
		/* Elevate internal content above the watermark layer */
		> * {
			position: relative;
			z-index: 2;
		}
	}

	&.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 100%;

	opacity: 0;
	background: var(--blue-light);
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	z-index: 9999;

	/* ---------------------------------------------------------
	MIDDLE COLUMN: NAVIGATION & DYNAMIC QUERY LOOP BLOCK MOTOR
	--------------------------------------------------------- */
	.wp-block-navigation,
	.wp-block-column:not(:last-of-type) .wp-block-query { /* Targets the wrapper container of your dynamic lists */
		width: 100%;

		/* Shared styling for both Gutenberg nav containers and dynamic query template lists */
		ul.wp-block-navigation__container,
		ul.wp-block-post-template {
			gap: 16px 24px;
			padding: 0;
			margin: 0;
			list-style: none;
			display: flex;
			flex-direction: column;

			/* Shared wrapper styling for standard nav items and the PHP-morphed paragraph item */
			li.wp-block-post,
			.wp-block-navigation-item {
				margin: 0;
				display: inline-flex;
				align-items: center;

				.event-list-query-item.wp-block-post-title {
					margin: 0;
					line-height: 1;
				}

				/* Shared SVG arrow glyph logic */
				&::before {
					content: "";
					display: inline-block;
					width: 12px;
					height: 12px;
					margin-right: 10px;
					vertical-align: middle;

					/* URL-encoded version of the WP core chevron SVG */
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.5 4L6 8L10.5 4' stroke='%232b3b4c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;

					/* Rotate the downward-pointing core SVG 90deg left so it points RIGHT */
					transform: rotate(-90deg);
					transition: transform 0.2s ease, opacity 0.2s ease;
				}

				/* Shared text and hover metrics */
				a.wp-block-navigation-item__content,
				a {
					font-size: 1rem;
					font-weight: 700; /* Crisp, readable weight */
					line-height: 1.4;
					color: var(--blue-dark, #2b3b4c);
					text-decoration: none;
					transition: color 0.15s ease-in-out;

					&:hover {
						color: var(--blue-brand, #3182ce);
						text-decoration: underline;
					}
				}
			}
		}

		/* Shared Dynamic Layout Grid (for cases where either block is set to horizontal) */
		&.is-horizontal.wp-block-navigation-is-layout-flex,
		ul.wp-block-post-template.is-layout-flex {
			ul.wp-block-navigation__container,
			& {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.wp-block-navigation-item,
				.wp-block-post {
					/* Dynamically calculates perfect 2-column tracks accounting for your 24px column gaps */
					flex: 0 0 calc(50% - 12px);
				}
			}
		}
	}

	.wp-block-columns {
		display: flex;
		gap: 40px;
		.wp-block-column:has(.wp-block-columns) {
			flex: 1 1 33.333%;
			max-width: 33.333%;
			min-width: 0;
		}
		.wp-block-column:not(:last-of-type) {

		}
		.wp-block-column:not(:first-of-type):not(:last-of-type) {

			.wp-block-columns {
				gap: 8px;
			}
			h3 {
				font-size: 1.2rem;
			}

		}
		.wp-block-column:last-of-type:has(img) {
			position: relative;
			display: flex;
			flex-direction: column;
			text-align: center;

			img {
				width: 100%;
				height: auto;
				aspect-ratio: 1 / 1;
				object-fit: cover;
				border-radius: 50%;
				border-color: var(--orange);
				border-width: 5px;
				border-style: solid;
				transition: filter 0.25s ease-in-out;
			}

			/* ---------------------------------------------------------
			TYPOGRAPHY & DYNAMIC CLICK OVERLAY
			--------------------------------------------------------- */
			h3, .wp-block-heading {
				font-size: 1rem;
				color: var(--text);
				margin: 10px 0;

				a {
					color: inherit;
					text-decoration: none;

					&::after {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 10;
						cursor: pointer;
					}
				}
			}

			/* ---------------------------------------------------------
			CASE A: Single Image Layout (e.g., Adopt)
			--------------------------------------------------------- */
			> .wp-block-image {
				position: relative;
				width: 100%;
				max-width: 290px;
				margin-left: auto;
				margin-right: auto;

				/* The Hidden Hover Arrow Badge */
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					/* Preserves your original scale/translate animation behavior */
					transform: translate(-50%, -50%) scale(0.8);
					z-index: 5;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 44px;
					height: 44px;
					background-color: rgba(255, 255, 255, 0.85);
					border-radius: 50%;
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
					opacity: 0;
					visibility: hidden;
					pointer-events: none;
					transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;

					/* URL-encoded WP Chevron (pre-rotated to point RIGHT inside the SVG string) */
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4 1.5L8 6L4 10.5' stroke='%232b3b4c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-position: center;
					background-size: 16px 16px; /* Sized nicely inside the 44px white circle */
				}
			}

			/* HOVER INTERFACE FOR CASE A:
			When a user hovers over the parent container track, drill down to update the image states
			*/
			&:hover {
				h3 a {
					text-decoration: underline;
				}
				> .wp-block-image {
					&::after {
						opacity: 1;
						visibility: visible;
						transform: translate(-50%, -50%) scale(1);
					}
					img {
						filter: brightness(0.9);
					}
				}
			}

			/* ---------------------------------------------------------
			CASE B: Double-Image Flex Group Layout (Static Support & Dynamic Query Loop)
			--------------------------------------------------------- */
			> .wp-block-group.is-layout-flex,
			> .wp-block-query > .wp-block-post-template {
				width: 100%;
				display: flex;
				gap: 20px;
				max-width: 100%;
				align-items: flex-start; /* Keeps titles alignment tidy regardless of length */

				/* Strict direct child targeting handles static layout and dynamic list items cleanly */
				> .wp-block-group,
				> .wp-block-post {
					position: relative;
					flex: 1 1 50%;
					max-width: 180px;
					transition: transform 0.2s ease-in-out;

					/* Target Core Image & Featured Image Containers to neutralize native margins */
					.wp-block-image,
					.wp-block-post-featured-image {
						margin: 0;
					}

					/* Standardize title text alignment across different core blocks */
					h3, .wp-block-post-title {
						font-size: 1rem;
						color: var(--text);
						margin: 10px 0 4px 0; /* Tightened bottom margin to bridge with the date node */
						line-height: 1.3;

						/* Turn off any upstream or default icons targeting headers */
						&::before,
						&::after {
							display: none;
							content: none;
						}

						a {
							color: inherit;
							text-decoration: none;

							/* The Dynamic Click Overlay that spans the entire card container */
							&::after {
								content: "";
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								z-index: 10;
								cursor: pointer;
							}
						}
					}

					/* ---------------------------------------------------------
					DYNAMIC POST DATE TYPOGRAPHY MOTOR
					--------------------------------------------------------- */
					.wp-block-post-date {
						display: block;
						font-size: 0.85rem;
						font-weight: 500;
						color: var(--blue-dark, #2b3b4c);
						opacity: 0.8;
						margin: 0 0 10px 0;
						line-height: 1.2;
					}

					/* The SINGLE Hidden Hover Arrow Badge tied explicitly to the container root */
					&::after {
						content: "";
						position: absolute;
						top: 40%;
						left: 50%;
						transform: translate(-50%, -50%) scale(0.8);
						z-index: 5;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 44px;
						height: 44px;
						background: rgba(255, 255, 255, 0.85);
						border-radius: 50%;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
						opacity: 0;
						visibility: hidden;
						pointer-events: none;
						transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;

						/* Native WP SVG Chevron ( pre-rotated to point RIGHT ) */
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4 1.5L8 6L4 10.5' stroke='%232b3b4c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
						background-repeat: no-repeat;
						background-position: center;
						background-size: 16px 16px;
					}

					/* Safely target images inside core wrappers (<figure>) or direct image components */
					img,
					.wp-block-post-featured-image img {
						width: 100%;
						height: auto;
						aspect-ratio: 1 / 1;
						object-fit: cover;
						border-radius: 50%;
						border-color: var(--orange);
						border-width: 5px;
						border-style: solid;
						transition: filter 0.25s ease-in-out;
					}

					/* Color swap for the last card item */
					&:last-of-type:not(:first-of-type) {
						img,
						.wp-block-post-featured-image img {
							border-color: var(--blue);
						}
					}

					/* UNIFIED HOVER INTERFACE */
					&:hover {
						transform: translateY(-4px);

						h3 a,
						.wp-block-post-title a {
							text-decoration: underline;
						}

						&::after {
							opacity: 1;
							visibility: visible;
							transform: translate(-50%, -50%) scale(1);
						}

						img,
						.wp-block-post-featured-image img {
							filter: brightness(0.9);
						}
					}
				}
			}
		}
	}
}

/* ==========================================================================
BLOCK EDITOR VISIBILITY OVERRIDE
========================================================================== */

/* ==========================================================================
SIMPLE BLOCK EDITOR WORKSPACE CLEANUP
========================================================================== */

/* Automatically detect if this stylesheet is running inside the WordPress Block Editor */
.editor-styles-wrapper {


	/* * 2. EDIT SIGHT: Only force open visibility if we are NOT in the standard page editor
	* (i.e. editing the Header template part directly)
	*/
	body:not(.is-not-header-editor) & {
		.mega-menu-item {
			/* Force full visibility so staff can easily click and configure elements */
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			display: block;
			height: auto;

			/* Stop absolute layout rules from breaking the block editor container flow */
			position: relative;
			top: 0;
			left: 0;
			transform: none;
			width: 100%;
			margin-bottom: 30px;

			/* Smooth out backend interactions */
			transition: none;

			/* Strip out the absolute card stretching mechanics inside the builder canvas */
			.wp-block-column:last-of-type {
				position: relative;
				transform: none;

				h3, .wp-block-heading {
					a.card-trigger::after {
						content: none; /* Disables the overlay loop so titles can be typed into directly */
					}
				}

				> .wp-block-group.is-layout-flex > .wp-block-group {
					position: relative;
					transform: none;
				}
			}
		}
	}
}

/* --------------------------------------------------------------------------
DESKTOP NAVIGATION CLEANUP & HOVER BRIDGES
-------------------------------------------------------------------------- */



.tribe-common a:focus {
	outline: none;
}
.tribe-events-page-template:not(.single-tribe_events) {
	h1 {
		margin: 0;
	}
	.wp-block-breadcrumbs {
		display: none !important;
	}
	.tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container {
		padding: 0;
	}
}
.single-tribe_events {
	.tribe-events-event-image {
		width: 100%;
	}
	.tribe-events-event-image > img {
		/* object-fit: contain; */
		height: auto;
		margin-inline: auto;
		display: block;
	}
	.page-section-subservice {
		.tribe-events-schedule__datetime {
			color: var(--white);
			display: inline-block;
			font-size: 1.2em;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			margin-bottom: 0;
		}
		.tribe-events-schedule__all-day, .tribe-events-schedule__separator, .tribe-events-schedule__timezone {
			color: var(--white);
			font-size: 15px;
			font-weight: 500;
		}
	}
	.tribe-events-event-meta {
		display: flex;
		margin: 0;
		.tribe-events-meta-group {
			box-sizing: border-box;
			display: inline-block;
			float: left;
			margin: 0 0 20px;
			padding: 0 4%;
			text-align: left;
			vertical-align: top;
			width: 50%;
			zoom: 1;
		}
		.tribe-events-event-cost {
			align-items: center;
			display: inline-flex;
			float: none;
			margin: 0;
		}
		.tribe-event-tags-label.tribe-events-meta-label {
			margin-right: 5px;
		}
	}
	.tribe-block__events-link {
		padding: 0;
		margin: 0;
	}

}
/* Animals */
/* Animals Singular */
body.animals-template-default {
	header.wp-block-template-part {
		& + section, & + main {
			margin-top: 0;
		}
	}
	/* Container layout for multiple pills (if applicable) */
	.sheltersync-attributes-container {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 10px;
	}

	/* Base Pill Styling */
	.sheltersync-attribute-pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		/* Reset native button styles since we upgraded the HTML tag */
		background: none;
		border: none;
		margin: 0;
		width: auto;
		overflow: visible;
		-webkit-appearance: none;

		/* Typography matching your clean theme fonts */
		font-family: inherit;
		font-size: 0.85rem;
		font-weight: 600;
		line-height: 1;
		color: #2c3e50; /* Deep off-black/navy for crisp readability */

		/* Shape and spacing */
		background-color: #f1f5f9; /* Soft, clean neutral background */
		padding: 8px 16px;
		border-radius: 100px; /* Perfect pill rounded edges */
		border: 1px solid #e2e8f0;

		/* Performance optimized transition states */
		transform: translateY(0);
		transition: background-color 0.2s ease-in-out,
			border-color 0.2s ease-in-out,
			color 0.2s ease-in-out,
			transform 0.2s ease-in-out,
			box-shadow 0.2s ease-in-out;
		cursor: default;
		user-select: none;
	}

	/* Interactive States for Single Animal Filters */
	.sheltersync-attribute-pill.sheltersync-interactive-pill {
		cursor: pointer;
	}

	.sheltersync-attribute-pill.sheltersync-interactive-pill:hover {
		color: #1e293b; /* Slightly darker text on hover */
		background-color: #e2e8f0; /* Darker slate shade */
		border-color: #cbd5e1;
		transform: translateY(-1px); /* Micro-lift effect */
	}

	.sheltersync-attribute-pill.sheltersync-interactive-pill:active {
		transform: translateY(1px); /* Tactile click response */
	}

	/* Accessibility: Ensure safe keyboard focus indications */
	.sheltersync-attribute-pill.sheltersync-interactive-pill:focus-visible {
		outline: 2px solid #3b82f6; /* Modern blue focus ring */
		outline-offset: 2px;
	}
}
/* Card Image Container */
.sheltersync-image-wrapper {
	width: 100%;
	/*! background-color: var(--blue-light, #f0f4f8); */
	/* allow badge to bleed out */
	position: relative;
}

.sheltersync-image-wrapper .image-frame {
	width: 100%;
	aspect-ratio: var(--aspect-ratio-animal-cards);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sheltersync-image-wrapper .animal-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
	transform: scale(1);
}

.sheltersync-image-wrapper:not(.is-fallback-image):hover .animal-card-img {
	transform: scale(1.14);
}

/* Fallback Branding Styles - Restores full height aspect ratio */
.sheltersync-image-wrapper.is-fallback-image {
	display: flex;
	flex-direction: column;
}

.sheltersync-image-wrapper.is-fallback-image .image-frame {
	aspect-ratio: var(--aspect-ratio-animal-cards);
	height: auto;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 16px;
	text-decoration: none;
}

.sheltersync-image-wrapper.is-fallback-image .animal-card-img {
	object-fit: contain;
	width: 50%;
	height: auto;
	max-height: 45%;
	opacity: 0.85;
	filter: grayscale(10%);
}

.sheltersync-fallback-notice-box {
	padding: 8px 16px;
	text-align: center;
	background: rgba(74, 144, 226, 0.08);
	border: 1px dashed rgba(74, 144, 226, 0.3);
	border-radius: 20px;
	display: inline-block;
	margin-top: 0;
}

p.sheltersync-fallback-notice {
	margin: 0;
	font-size: 0.8rem;
	color: #334155;
	text-align: center;
	line-height: 1.3;
	font-weight: 500;
}

.sheltersync-animal-image-link {
	text-decoration: none;
	border-radius: 25px;
	overflow: hidden;
	display: block;
}
.sheltersync-fallback-heading {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	color: #1e293b;
	text-decoration: none;
}

.sheltersync-image-wrapper .no-photo-placeholder {
	color: #6b7280;
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
}

/* Base Heart Action Overlay Layout */
.shelterluv-favorite-toggle {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 10;

	/* Clean button normalization defaults */
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Smooth scaling transition effect */
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Target the SVG icon details */
.shelterluv-favorite-toggle .favorite-icon {
	width: 28px;
	height: 28px;
	color: var(--orange);
	filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3)); /* Drop shadow to ensure high visibility against bright animal photos */
	transition: fill 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Hover micro-interactions */
.shelterluv-favorite-toggle:hover {
	transform: scale(1.15);
}

/* Active clicked state fallback pattern helper */
.shelterluv-favorite-toggle.is-active .favorite-icon {
	fill: #ff007f; /* Completely fills out the heart upon interaction/activation */
}
/* 1. Universal Setup for the Main Content Container */
.single-animals main#wp--skip-link--target {
	position: relative; /* Gives the pseudo-gradient a baseline layout block */
}

.single-animals main#wp--skip-link--target::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 350px; /* Controls how deep the colored glow goes down the page */
	pointer-events: none; /* Allows clicks to pass straight through to buttons/links */
	z-index: 0; /* Keeps it behind text and images */
}

/* Ensure inner content blocks sit securely over the gradient wrapper */
.single-animals main#wp--skip-link--target > * {
	position: relative;
	z-index: 1;
	padding-top: 200px;
}


/* 2. ♀️ Female Animal Profile Page Accent (Palm Springs Brand Green) */
.single-animals.gender-female main#wp--skip-link--target::before {
	background: linear-gradient(to bottom, var(--green) 0%, transparent 100%);
}


/* 3. ♂️ Male Animal Profile Page Accent (Palm Springs Brand Teal/Blue) */
.single-animals.gender-male main#wp--skip-link--target::before {
	background: linear-gradient(to bottom, var(--blue) 0%, transparent 100%);
}
/* Component Grid Wrappers */
.wp-block-sheltersync-related-animals-wrapper {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px dashed #ccd0d4;
}

.related-animals-title {
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	color: #2c3e50;
}

.related-animals-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

/* Individual Card Styling */
.related-animal-card {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-animal-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Image Aspect-Ratio Box */
.related-card-image-wrapper {
	position: relative;
	width: 100%;
	padding-top: 75%; /* Forces a clean 4:3 Aspect Ratio standard shape */
	background-color: #f1f5f9;
	overflow: hidden;
}

.related-card-image-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Card Metadata Text Content */
.related-card-content {
	padding: 15px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.related-card-name {
	margin: 0 0 10px 0;
	font-size: 1.2rem;
}

.related-card-name a {
	text-decoration: none;
	color: #1a1a1a;
}

.related-card-name a:hover {
	color: #2b7a91; /* Highlight with theme blue on link hovers */
}

/* Inline Pills Layout for Cards */
.related-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto; /* Pushes meta tags down cleanly to the baseline */
}

.related-meta-item {
	font-size: 0.75rem;
	font-weight: 600;
	background: #f1f5f9;
	color: #4b5563;
	padding: 4px 8px;
	border-radius: 4px;
}
/* Container and Hero Image */
.animal-gallery-wrapper .main-hero-container {
	position: relative;
	overflow: hidden;
}

.animal-gallery-wrapper .main-animal-hero {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 25px;
}

/* Navigation Arrows */
.animal-gallery-wrapper .nav-prev,
.animal-gallery-wrapper .nav-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	background: rgba(255, 255, 255, 0.7);
	border: none;
	padding: 10px;
	z-index: 10;
}

.animal-gallery-wrapper .nav-prev { left: 10px; }
.animal-gallery-wrapper .nav-next { right: 10px; }

/* Thumbnail Navigation */
.animal-gallery-wrapper .thumbnail-slider-nav {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	overflow-x: auto;
}

.animal-gallery-wrapper .thumb-btn {
	cursor: pointer;
	padding: 0;
	border: 2px solid transparent; /* Default state */
	transition: 0.3s;
	flex-shrink: 0;
}

.animal-gallery-wrapper .thumb-btn img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
}

/* Active State for visual feedback */
.animal-gallery-wrapper .thumb-btn.is-active {
	border-color: #0073aa; /* Matches your theme accent color */
	opacity: 1;
}

.animal-gallery-wrapper .thumb-btn:not(.is-active) {
	opacity: 0.6;
}

/* Container holds a 3-column grid structure */
.animal-meta-wrapper.is-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	width: 100%;
}

/* Stacking fallback option */
.animal-meta-wrapper.is-stacked {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Base Card Styles */
.animal-meta-wrapper .meta-item {
	display: flex;
	flex-direction: column;
	background-color: #f8fafc; /* Lightweight off-white background */
	border-radius: 6px;
	padding: 12px 16px;
	justify-content: flex-start;
}

/* Small, Uppercased Grid Labels */
.animal-meta-wrapper .meta-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #6b7280; /* Neutral slate-gray */
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

/* Bold Primary Data Display */
.animal-meta-wrapper .meta-value {
	font-size: 14px;
	font-weight: 600;
	color: #111827; /* Rich near-black color */
	line-height: 1.25;
}

/* Secondary calculated dynamic age text displayed under the DOB */
.animal-meta-wrapper .meta-extra {
	font-size: 13px;
	font-weight: 500;
	color: #4b5563; /* Slightly softer gray to represent calculated status */
	margin-top: 2px;
	line-height: 1.2;
}

/* Smooth responsiveness transitions for smaller viewports */
.animal-title-age-stack {
	display: flex;
	flex-direction: column;
	gap: 4px; /* Tight spacing between Title and Age */
	margin-bottom: 20px;
}

/* Big bold pet name */
.animal-title-age-stack .animal-stacked-title {
	font-size: 3rem; /* Adjust size to fit your theme's scale */
	font-weight: 800;
	color: #111827; /* Deep near-black */
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Pink, capitalized calculated age */
.animal-title-age-stack .animal-stacked-age {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--blue);
	letter-spacing: 0.05em;
	line-height: 1.2;
}


/* Badge Layout Container */
.sheltersync-badge-container {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
}

/* Yellow Badge trigger button */
.sheltersync-badge-trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background-color: #f1c40f; /* Vibrant APR Yellow */
	color: #111827; /* High-contrast text */
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 6px 10px;
	border-radius: 4px;
	cursor: help;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: background-color 0.2s ease;
}
a > .sheltersync-badge-trigger {
	cursor: pointer;
}
.sheltersync-badge-trigger:hover {
	background-color: #e6b800; /* Darker yellow on hover */
}

/* Small icon inside badge */
.sheltersync-badge-trigger .badge-icon {
	display: block;
	stroke: currentColor;
}

/* --- Pure CSS Tooltip Engine --- */
.sheltersync-badge-tooltip {
	position: absolute;
	bottom: calc(100% + 10px); /* Hangs directly above the badge */
	left: 0;
	width: 220px;
	background-color: #f1c40f; /* Tooltip yellow */
	color: #111827;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 12px;
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	pointer-events: none; /* Prevents cursor interference */

	/* Initial state (hidden) */
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 9999;
}

/* Tooltip Little Triangle Pointer */
.sheltersync-badge-tooltip .tooltip-arrow {
	position: absolute;
	bottom: -6px; /* Hang below the tooltip */
	left: 20px; /* Aligns pointer left-side with trigger */
	width: 12px;
	height: 12px;
	background-color: #f1c40f;
	transform: rotate(45deg); /* Rotates square to form arrow pointer */
}

/* Hover Actions to Reveal Tooltip */
.sheltersync-badge-container:hover .sheltersync-badge-tooltip {
	opacity: 1;
	transform: translateY(0);
}
/* --- Overrides: Downward Tooltip Specifically in the Gallery Wrapper --- */

/* 1. Hang the tooltip below the badge instead of above */
.animal-gallery-wrapper .sheltersync-badge-tooltip {
	bottom: auto; /* Clear the bottom positioning */
	top: calc(100% + 10px); /* Position below the badge */
	transform: translateY(-5px); /* Invert entry glide direction (slides down) */
}

/* 2. Position the arrow indicator on the top edge */
.animal-gallery-wrapper .sheltersync-badge-tooltip .tooltip-arrow {
	bottom: auto; /* Clear the bottom arrow positioning */
	top: -6px; /* Place on the top border of the tooltip box */
}

/* 3. Smooth transition hover reveal matching the reversed entry slide */
.animal-gallery-wrapper .sheltersync-badge-container:hover .sheltersync-badge-tooltip {
	opacity: 1;
	transform: translateY(0);
}

/* Sitemap Shortcode Container */
/* Container styling */
.sitemap-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1e293b; /* Dark slate instead of pure black */
	max-width: 800px;
}

/* Base tree structure */
.sitemap-list {
	list-style-type: none;
	padding-left: 28px; /* Slightly wider indent for clear hierarchy */
	margin: 0;
}

.sitemap-item {
	margin: 2px 0;
	display: block;
}

/* * Row Container
* Added a soft background hover effect so users know exactly which row they are on
*/
.sitemap-item-content {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border-radius: 6px;
	transition: background-color 0.15s ease;
	vertical-align: middle;
}

.sitemap-item-content:hover {
	background-color: #f1f5f9; /* Super soft grey-blue hover */
}

/* Touch-friendly Checkbox */
.sitemap-checkbox {
	width: 16px;
	height: 16px;
	margin: 0 8px 0 0;
	cursor: pointer;
	accent-color: #0284c7; /* Modern sky blue for checked state */
}

/* * Touch-friendly Edit Icon Link
* Padding expanded to 8px to guarantee a comfortable mobile tap-target (min 40px hit area)
*/
.sitemap-edit-link {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	margin: -8px 2px -8px -4px; /* Offset the padding so it doesn't push elements away */
	border-radius: 4px;
	transition: background-color 0.2s, fill 0.2s;
}

.sitemap-edit-link svg {
	fill: #64748b; /* Soft slate gray */
	width: 18px;   /* Scaled up for better visibility */
	height: 18px;
}

.sitemap-edit-link:hover {
	background-color: #e2e8f0;
}

.sitemap-edit-link:hover svg {
	fill: #0f172a; /* Darken on hover */
}

/* Modernized Title Link (Goodbye default blue!) */
.sitemap-title-link {
	color: #334155;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	transition: color 0.15s ease;
}

.sitemap-title-link:hover {
	color: #0284c7; /* Interactive blue highlight on hover only */
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Elegant, smaller Date Indicator */
.sitemap-date {
	color: #94a3b8; /* Light slate gray */
	font-size: 0.75rem; /* Smaller (12px equivalent) */
	font-weight: 400;
	margin-left: 8px;
	white-space: nowrap;
}

/* Let's style a subtle bullet divider before the date instead of ugly parentheses */
.sitemap-date::before {
	content: "•";
	margin-right: 6px;
	color: #cbd5e1;
}
/* Media */
/* 1. target the <li> children using :has() on the wrapper */
.is-cards > li:has(.wp-block-post-excerpt__more-link) {
	position: relative;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

/* Hover effects applied to the individual <li> cards */
.is-cards > li:has(.wp-block-post-excerpt__more-link):hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 2. Absolute overlay extended relative to the <li> container */
.is-cards > li .wp-block-post-excerpt__more-link::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* 3. Ensure internal blocks stack nicely over the overlay */
/* Keeps the image contained neatly inside the new list item cards */
.is-cards > li .wp-block-post-featured-image img {
	border-radius: 6px;
	width: 100%;
	height: auto;
	object-fit: cover;
}
/* 1. Target the specific meta group container */
.wp-block-column .wp-block-group:has(.wp-block-post-time-to-read) {
	display: flex;
	align-items: center;
	gap: 12px;
	background: transparent; /* Strips the weird background box */
	padding: 0;
	margin-top: 16px;
	font-size: 0.85rem;
	opacity: 0.9;
	color: #ffffff; /* Forces it to match your white text theme */
}

/* 2. Format the individual tracking blocks side-by-side */
.wp-block-column .wp-block-post-time-to-read {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: currentColor;
	padding: 0;
}

/* 3. Inject a dynamic clean middle dot separator between them */
.wp-block-column .wp-block-post-time-to-read + .wp-block-post-time-to-read::before {
	content: "•";
	margin-right: 12px;
	opacity: 0.5;
}
.single-post {
	/* Narrow the scope specifically to the subservice page-section header */
	.page-section.page-section-subservice {

		.wp-block-cover h1, .wp-block-cover h2 {
			font-size: 4rem;
			line-height: 1;
		}

		/* Reset text elements for maximum readability */
		.wp-block-post-date {
			font-size: 0.95rem;
			opacity: 0.85;
			color: #ffffff;
			background: transparent;
			padding: 0;
		}

		/* Format the excerpt text side cleanly */
		.wp-block-post-excerpt__excerpt {
			font-size: 1.1rem;
			line-height: 1.5;
			opacity: 0.95;
			color: #ffffff;
			margin-bottom: 16px;
		}

		/* Target the specific Read More paragraph link layout safely */
		p.wp-block-paragraph:has(> a) {
			background: transparent;
			padding: 0;
			margin-bottom: 20px;

			a {
				display: inline-block;
				color: #ffffff;
				text-decoration: underline;
				font-weight: 600;
				font-size: 1rem;
				transition: opacity 0.2s ease;

				&:hover {
					opacity: 0.8;
				}
			}
		}

		/* Target the reading meta block container precisely */
		.wp-block-group:has(.wp-block-post-time-to-read) {
			margin-top: 12px;
			color: #ffffff;
			font-size: 0.85rem;
			opacity: 0.8;

			.wp-block-post-time-to-read {
				background: transparent;
				padding: 0;
			}
		}
	}
	/* ==========================================================================
	2. MAIN CONTENT BODY: Target the middle reading section explicitly
	========================================================================== */
	main#content > .page-section {
		max-width: 860px;

		/* Clean up spacing and readability for the native core content block */
		.entry-content.wp-block-post-content {
			font-size: 1.125rem;
			line-height: 1.75;
			color: #2c3e50;

			/* Give paragraphs breathing room */
			p.wp-block-paragraph {
				margin-bottom: 24px;
			}

			/* Style editorial subheadings within the text (like "Public Statement") */
			h2.wp-block-heading {
				font-size: 2rem;
				font-weight: 700;
				margin-top: 48px;
				margin-bottom: 20px;
				color: #111111;
				letter-spacing: -0.01em;
			}
		}

		/* Clean styling for post meta values if they appear inside the body layout */
		.wp-block-post-title {
			font-size: 2.5rem;
			font-weight: 700;
			margin-bottom: 12px;
		}

		.wp-block-post-author-name {
			font-size: 1rem;
			font-weight: 600;
			color: #555555;
		}
	}
	/* Target the related posts wrapper section explicitly */
	.page-section.section-related-posts {
		background-color: #f9f9f9;
		padding: 60px 20px;
		margin-top: 40px;

		/* Quiet down the main section header */
		h3.wp-block-heading {
			font-size: 1.75rem;
			color: #333333;
			margin-bottom: 32px;
			font-weight: 700;
			letter-spacing: -0.02em;
		}

		/* Style the WordPress Query Loop grid */
		.wp-block-post-template {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			gap: 32px;

			/* 1. Establish the relative positioning boundary on the individual post card */
			li {
				position: relative;
				display: flex;
				flex-direction: column;
				transition: transform 0.2s ease, box-shadow 0.2s ease;

				/* Optional: Slight visual cue on whole card hover */
				&:hover {
					transform: translateY(-2px);

					/* Underline the title when any part of the card is hovered */
					.wp-block-post-title a {
						text-decoration: underline;
					}
				}
			}
		}

		/* Format the featured images cleanly within the clickable card container */
		.wp-block-post-featured-image {
			margin-bottom: 16px;

			img {
				border-radius: 4px;
				display: block;
				width: 100%;
				height: auto;
			}
		}

		/* Format the meta date to look secondary */
		.wp-block-post-date {
			font-size: 0.85rem;
			color: #666666;
			margin-bottom: 6px;
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

		/* Subdue the title sizes and stretch the link overlay */
		.wp-block-post-title {
			font-size: 1.25rem;
			line-height: 1.4;
			font-weight: 600;
			margin: 0;

			a {
				color: #2b7a91;
				text-decoration: none;

				/* 2. Stretch pseudo-element overlay to make the whole card clickable */
				&::after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: 1;
				}
			}
		}

		/* Clean up native block layout pagination if it shows up */
		.wp-block-query-pagination {
			margin-top: 40px;
			padding-top: 20px;
			border-top: 1px solid #e0e0e0;
			font-size: 0.9rem;

			a {
				color: #666666;
				text-decoration: none;
				margin-right: 12px;

				&:hover {
					color: #2b7a91;
				}
			}
		}
	}
}
/* ==========================================================================
BLOOMERANG FOOTER FORM ANIMATION WRAPPER
========================================================================== */

/* 1. Sets the initial hidden state and prepares smooth transition tracks */
#bloomerang-form-wrapper {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(15px);
	transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s ease,
		transform 0.4s ease,
		padding 0.4s ease;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* 2. The expanded class triggered dynamically via our jQuery engine */
#bloomerang-form-wrapper.form-expanded {
	max-height: 1200px; /* High boundary allowance to fit all fields comfortably */
	opacity: 1;
	transform: translateY(0);
	padding: 2.5rem 0;
}

/* ==========================================================================
FORM CONTAINER & FIELD STYLING
========================================================================== */

/* Keeps the form layout beautifully tight and centered */
#email-registration-form-container {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
	font-family: inherit;
}

/* Hide the redundant "Contact Information" header inside the embedded script */
#email-registration-form-container h3 {
	display: none;
}

/* Field grouping layout spacing */
.email-registration-form .field {
	margin-bottom: 1.5rem;
}

/* Typography styles for the field labels */
.email-registration-form label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
	color: #222;
}

/* Stylized error star spacer */
.email-registration-form .required-star {
	color: #cc0000;
	margin-left: 0.25rem;
}

/* Modernized structural design for inputs */
.email-registration-form .field input[type="text"],
.email-registration-form .field input[type="email"] {
	width: 100%; /* Overrides Bloomerang's hardcoded 275px width */
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	font-size: 1rem;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background-color: #ffffff;
	color: #333;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Sleek interactive focus ring matching your site accents */
.email-registration-form .field input:focus {
	outline: none;
	border-color: #5bb3cc; /* Soft teal match */
	box-shadow: 0 0 0 3px rgba(91, 179, 204, 0.15);
}

/* Styling for the consent text row */
.email-registration-form .consent {
	font-size: 0.9rem;
	color: #555;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
PREMIUM TEAL SUBMIT BUTTON STYLE
========================================================================== */
.email-registration-form .btn-group {
	margin-top: 1.5rem;
}

.email-registration-form input.btn-submit-email {
	width: 100%;
	display: block;
	background-color: #5bb3cc; /* Soft Teal palette matching your layout hero button */
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	padding: 14px 24px;
	border: none;
	border-radius: 30px; /* Elegant pill shape matches your trigger button styling */
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
	text-transform: none;
}

/* Interactive hover feedback states */
.email-registration-form input.btn-submit-email:hover {
	background-color: #4ea2ba; /* Slightly darker teal accent depth */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.email-registration-form input.btn-submit-email:active {
	transform: scale(0.98);
}
/* ==========================================================================
NON-PROFIT INFORMATION GLOBAL DRAWER PANEL
========================================================================== */

/* Sets initial invisible state right above the copyright row line */
#nonprofit-info-wrapper {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(10px);
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.3s ease,
		transform 0.3s ease,
		padding 0.3s ease;
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	border-top: 1px dashed rgba(255, 255, 255, 0.15); /* Soft structural accent border rule */
}

/* Expansion state class called via jQuery */
#nonprofit-info-wrapper.info-expanded {
	max-height: 500px; /* Safe upper ceiling allowance for legal text data */
	opacity: 1;
	transform: translateY(0);
	padding: 2rem 0 1rem 0;
}

/* Interior layout rules alignment adjustments */
#nonprofit-info-wrapper h4 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
}

#nonprofit-info-wrapper p {
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 0.5rem;
	color: rgba(255, 255, 255, 0.85); /* Clean text color match inside dark footer theme space */
}
/* ==========================================================================
FOOTER TRUST BADGES INTERACTIVE HOVER TRACKS
========================================================================== */

/* 1. Prepares transitions, base opacity, and alignment behaviors */
footer a[href*="guidestar.org"],
footer a[href*="candid.org"],
footer a[href*="gpsanimalallies.org"] {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease,
		filter 0.25s ease;
	opacity: 0.85; /* Softly blends them into the dark background by default */
}

/* 2. Elegant hardware-accelerated lift and drop-shadow glow on hover interaction */
footer a[href*="guidestar.org"]:hover,
footer a[href*="candid.org"]:hover,
footer a[href*="gpsanimalallies.org"]:hover {
	transform: translateY(-4px); /* Clean upward physical lift */
	opacity: 1; /* Pops to full vivid brightness */
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)); /* Smooth shadow depth layer */
}
.page-section-team .wp-block-image img {
	max-width: 300px;
}
.team-modals-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	align-items: center;
	justify-content: center;
}

/* Flex wrapper layout state toggle */
.team-modals-container.modal-open {
	display: flex;
}

/* Default hidden state for individual bio layouts inside the wrapper */
.team-modals-container .team-modal {
	display: none;
	background: #ffffff;
	border-radius: 12px;
	padding: 40px;
	max-width: 800px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
	animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Active targeted state display */
.team-modals-container .team-modal.active-bio {
	display: block;
}
.team-modal .wp-block-paragraph {
	font-size: 15px;
}

/* Standard CSS close button injection layout */
.modal-close-trigger {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
	color: #333333;
	cursor: pointer;
	z-index: 10;
	transition: transform 0.2s ease;
}
.modal-close-trigger:hover {
	transform: scale(1.15);
}

@keyframes modalSlideUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
.team-modal > .wp-block-columns {
	margin: 0;
}

/* ==========================================================================
FORM WRAPPER CONTAINER (WordPress Group Block Custom Class)
========================================================================== */
.form-wrap {
	max-width: 650px;
	margin: 2rem auto; /* Centers the heading + form entirely on the page */
	padding: 0 1rem;   /* Prevents content from hitting screen edges on mobile */
	box-sizing: border-box;
}

/* Captures your initial H2 title perfectly inside the new bounds */
.form-wrap h2 {
	margin-bottom: 1.5rem;
}

/* ==========================================================================
BLOOMERANG FORM CLEAN STYLING
========================================================================== */
#interaction-form-container {
	width: 100%;
}

#interaction-form-container .interaction-form {
	width: 100%;
}

/* 1. Structural Section Layout */
#interaction-form-container .section {
	background: transparent;
	padding: 0 0 1.5rem 0;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #e2e8f0;
}

#interaction-form-container h3 {
	font-size: 1.35rem;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 1rem;
}

/* 2. Modern Vertical Stack Layout */
#interaction-form-container .field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.625rem 0;
	width: 100%;
}

/* 3. Labels & Required Indicators */
#interaction-form-container label,
#interaction-form-container .label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #2d3748;
}

#interaction-form-container .required-star {
	color: #e53e3e;
	margin-left: 0.25rem;
}

/* 4. Text Fields, Dropdowns, and Textareas */
#interaction-form-container input:not([type=checkbox]),
#interaction-form-container select,
#interaction-form-container textarea {
	width: 100%; /* Spans full width of the contained group column */
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: #2d3748;
	background-color: #ffffff;
	border: 1px solid #cbd5e0;
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#interaction-form-container input:focus,
#interaction-form-container select:focus,
#interaction-form-container textarea:focus {
	outline: none;
	border-color: #4ba3c3; /* Brand Accent Teal */
	box-shadow: 0 0 0 3px rgba(75, 163, 195, 0.15);
}

#interaction-form-container textarea {
	min-height: 120px;
	resize: vertical;
}

/* 5. Clean Checkbox Styling */
#interaction-form-container .checkboxes {
	border: 1px solid #cbd5e0;
	border-radius: 6px;
	background-color: #ffffff;
	overflow: hidden;
	width: 100%;
}

#interaction-form-container .checkbox {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #edf2f7;
	color: #2d3748;
}

#interaction-form-container .checkbox:last-child {
	border-bottom: none;
}

#interaction-form-container .checkbox input[type=checkbox] {
	width: 18px;
	height: 18px;
	margin-right: 12px;
	cursor: pointer;
}

/* 6. Submit Button & Group Alignment */
#interaction-form-container .btn-group {
	padding-top: 1rem;
	display: flex;
	justify-content: flex-start;
}

#interaction-form-container .btn-submit-interaction {
	display: inline-block;
	min-width: 200px;
	padding: 0.875rem 2rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: #ffffff;
	background-color: #4ba3c3; /* Brand CTA Color */
	border: none;
	border-radius: 30px;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s ease;
}

#interaction-form-container .btn-submit-interaction:hover {
	background-color: #3b8da9;
}
/* Hide favorites query wrapper on initial load to prevent content flashing */
.favorites-query-wrapper {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Class injected by JS once filtering calculations complete */
.favorites-query-wrapper.is-loaded {
	opacity: 1;
	visibility: visible;
}
/* =========================================================================
ShelterSync Custom Animal Filters - Premium Card Layout
========================================================================= */

.sheltersync-filter-bar-container {
	width: 100%;
	max-width: 1300px; /* Aligns with your site content layout wrapper */
	margin: -40px auto 32px auto; /* Negative margin pulls it up into the banner area slightly if wanted, adjust as needed */
	padding: 0 20px;
	position: relative;
	z-index: 10;
}

/* The White Floating Card Module */
.sheltersync-filter-bar-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 24px 32px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
	display: flex;
	gap: 32px;
	align-items: flex-end;
}

/* Individual Dropdown Wrapper Blocks */
.sheltersync-filter-bar-card .filter-group {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1; /* Makes them fill out space evenly */
}

/* Hard constraint sizes to mimic the example design widths */
.sheltersync-filter-bar-card .filter-group:nth-child(1),
.sheltersync-filter-bar-card .filter-group:nth-child(2) {
	flex: 0 1 240px;
}

/* Small Uppercase Headers over Dropdowns */
.sheltersync-filter-bar-card .filter-group label {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	color: #111111;
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

/* Minimalist Bottom Border Input Text Field */
.sheltersync-filter-bar-card select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	border: none;
	border-bottom: 2px solid #111111;
	border-radius: 0;
	padding: 8px 24px 8px 0;
	font-size: 15px;
	font-weight: 500;
	color: #374151;
	cursor: pointer;
	width: 100%;
	transition: border-color 0.2s ease;
	font-family: var(--fontTheme);
}

/* Custom dropdown icon anchor arrow indicator placement rules */
.sheltersync-filter-bar-card .filter-group::after {
	content: "";
	position: absolute;
	right: 4px;
	bottom: 14px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #111111;
	pointer-events: none;
}

/* Focus and Active States */
.sheltersync-filter-bar-card select:focus {
	outline: none;
	border-bottom-color: #4f46e5; /* Accent color change on active focus */
}


/* =========================================================================
ShelterSync Suggested Filters & Results Meta Panel Layout
========================================================================= */

/* 1. Meta Actions Container */
.sheltersync-filter-meta-actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
	padding: 0 35px;
}

/* 2. Structural Parent Layout Wrapper (Anti-CLS Baseline Space) */
.sheltersync-suggested-filters-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	min-height: 70px; /* Prevents Cumulative Layout Shift while JS populates pills */
}
body:has(.favorites-query-wrapper) .sheltersync-suggested-filters-wrapper {
	min-height: unset; /* Prevents Cumulative Layout Shift while JS populates pills */
}
/* 3. Collapsible Container Clamping Base */
#pet-suggested-filters-container,
.suggested-filters-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
	min-height: 70px;
	max-height: 70px; /* Clamps layout space to 1 row of pills */
	overflow: hidden;
	will-change: max-height;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded Accordion Override State via JS */
#pet-suggested-filters-container.is-expanded,
.suggested-filters-inner.is-expanded {
	max-height: 600px;
}

/* 4. Section Label Styling */
.suggested-label {
	font-size: 14px;
	font-weight: 600;
	color: #4b5563;
}

/* 5. Pills List Flex Wrapper */
.suggested-pills-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
}

/* 6. Individual Interactive Pill Buttons */
.suggested-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	font-family: var(--fontTheme);
	font-size: 13px;
	font-weight: 600;
	color: #0369a1;
	background-color: #e0f2fe;
	border: none;
	border-radius: 20px;
	box-sizing: border-box;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.suggested-pill:hover {
	color: #0369a1;
	background-color: #bae6fd;
}

/* Selected Active Highlight State */
.suggested-pill.is-active {
	color: #ffffff;
	background-color: #d946ef;
	box-shadow: 0 2px 8px rgba(217, 70, 239, 0.3);
}

/* 7. Accordion Toggle Button ("Show All" / "Hide") */
.sheltersync-toggle-filters-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 0;
	font-family: var(--fontTheme);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #0073aa;
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.sheltersync-toggle-filters-btn:hover,
.sheltersync-toggle-filters-btn:focus {
	color: #005177;
	background: transparent;
	outline: none;
	text-decoration: underline;
}

/* 8. Structural Chevron Icon Animation */
.sheltersync-toggle-filters-btn .chevron {
	display: inline-block;
	flex-shrink: 0;
	transform: rotate(0deg);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sheltersync-toggle-filters-btn[aria-expanded="true"] .chevron {
	transform: rotate(180deg);
}

/* ==========================================================================
ShelterSync Grid Animation & Loading State
========================================================================== */

/* Target grid container smooth transition */
.wp-block-post-template[class*="columns-"] {
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
	will-change: opacity, transform;
}

/* 1. Fetching State: Smooth fade during AJAX update */
.wp-block-post-template[class*="columns-"].is-updating {
	opacity: 0.4;
	pointer-events: none;
}

/* 2. Entrance Animation: Keyframe trigger when grid content loads */
@keyframes sheltersyncGridFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Apply animation only when grid is updated/rendered */
.wp-block-post-template[class*="columns-"]:not(.is-updating) {
	animation: sheltersyncGridFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3. Replaced Style Implementations for Cleaned Animal Meta Container */
.sheltersync-animal-meta-wrapper {
	text-decoration: none;
	display: flex;
	gap: 12px;
}
.sheltersync-animal-meta-wrapper .meta-item.meta-weight::after,
.meta-weight .meta-value::after {
	content: ' lb.';
}
.sheltersync-animal-meta-wrapper.is-layout-inline {
	flex-wrap: wrap;
	align-items: center;
	margin: 0 10px;
}

.sheltersync-animal-meta-wrapper.is-layout-stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* 4. Meta Labels Badges Formatting */
.sheltersync-animal-meta-wrapper .meta-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Typography matching your clean theme fonts */
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	color: #2c3e50; /* Deep off-black/navy for crisp readability */

	/* Shape and spacing */
	background-color: #f1f5f9; /* Soft, clean neutral background */
	padding: 8px 12px;
	border-radius: 100px; /* Perfect pill rounded edges */
	border: 1px solid #e2e8f0;

	/* Smooth hover effect */
	transform: translateY(0);
	transition: all 0.2s ease-in-out;
	cursor: default;
	user-select: none;
}

/* Interactive subtle lift when hovered */
.sheltersync-animal-meta-wrapper .meta-item:hover {
	background-color: #e2e8f0;
	color: #000000;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
ShelterSync Pet Card Typography & Proximity Adjustments
========================================================================== */

/* 1. Eliminate the huge default spacing between the image and title */
.pet-card .wp-block-post-title {
	margin-top: 12px;    /* Forces WordPress core layout overrides down */
	margin-bottom: 6px;   /* Pulls the meta labels row up closer to the name */
	font-size: 1.4rem;              /* Clean up size scaling if needed */
	line-height: 1.2;
}

/* 2. Anchor link styling inside the H3 title */
.pet-card .wp-block-post-title a {
	color: #1a1a1a;                 /* Clean dark title */
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-block;
}

/* 3. Subtle interactive feedback when someone hovers anywhere near the name */
.pet-card .wp-block-post-title a:hover {
	color: #0073aa;                 /* Matches your theme or target link hover color */
	text-decoration: underline;     /* Optional: adds classic visual indicator */
}

/* ==========================================================================
ShelterSync Single Animal Profile Attribute Badges
========================================================================== */

/* Outer Layout block containment layer */
.sheltersync-attributes-container {
	margin-top: 15px;
	margin-bottom: 15px;
}

/* Attributes Header Configuration */
.sheltersync-attributes-label {
	margin: 0 0 10px 0;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #4b5563;
	font-weight: 600;
}

/* Dynamic Flex layout track rows */
.sheltersync-attributes-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}


/* =========================================================================
ShelterSync Standalone Animal Sorter Dropdown Layout
========================================================================= */

.sheltersync-sort-container .sheltersync-sort-select:focus {
	border-color: #0073aa;
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* =========================================================================
Gutenberg Editor Backend Block Layout Controls
========================================================================= */
.sheltersync-block-editor-placeholder-sorter {
	padding: 15px;
	background: #f3f4f6;
	border: 1px dashed #9ca3af;
	border-radius: 4px;
	font-style: italic;
	color: #4b5563;
}

/* =========================================================================
ShelterSync Bottom Counter & Sorting Row Actions Track
========================================================================= */

/* The Parent Wrapper Row: Stays perfectly balanced across the horizontal track */
.sheltersync-filter-meta-counter-row {
	border-top: 1px solid #f3f4f6;
	padding-top: 20px;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 24px;
}
/* Page Favorites */
.page-favorites  {
	.no-favorites-message .wp-block-button__link.wp-element-button {
		padding: 12px 32px;
		height: unset;
	}
	.sheltersync-suggested-filters-wrapper {
		display: none;
	}
	.sheltersync-filter-meta-counter-row {
		border-top: none;
	}
}

/* Left Grouping: Dynamic Counter Results Heading */
.filter-results-count-heading {
	font-size: 22px;
	font-weight: 700;
	color: #111111;
	margin: 0;
	padding: 0;
	font-family: var(--fontTheme);
	line-height: 1.2;
}

/* All Sort Logic Below Here */

/* Right Side Actions Track */
.sheltersync-filter-meta-right-actions {
	display: flex;
	align-items: center;
	gap: 16px; /* Clean spacing across Clear button, Dice, and Sorter */
}


/* -------------------------------------------------------------------------
Clear All Reset Trigger Action Link
------------------------------------------------------------------------- */
.sheltersync-filter-actions {
	display: inline-flex;
	align-items: center;
}

#pet-filter-reset {
	background-color: #fee2e2; /* Soft pill container red background layout */
	color: #991b1b;
	border: none;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 20px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--fontTheme);
	white-space: nowrap;

	/* Hidden layout preparation until filters change */
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Triggered layout active display setup via runtime JavaScript targeting block */
#pet-filter-reset.is-active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}


/* -------------------------------------------------------------------------
Reroll / Shuffle Dice Button
------------------------------------------------------------------------- */
.sheltersync-reroll-btn {
	background: transparent;
	border: none;
	padding: 4px;
	margin: 0;
	cursor: pointer;
	display: none; /* Hidden by default until sort === 'rand' */
	align-items: center;
	justify-content: center;
	line-height: 1;
	outline: none;
	transform: scale(1); /* Soft pop effect on hover */
	transition: transform 0.15s ease-in-out;

}

.sheltersync-reroll-btn:hover {
	transform: scale(1.15); /* Soft pop effect on hover */
}

.sheltersync-reroll-btn:active {
	transform: scale(0.95);
}

/* Visibility state toggle */
.sheltersync-reroll-btn.is-visible {
	display: inline-flex;
}

.reroll-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

/* One-shot 360-degree dice tumble animation */
.reroll-icon.is-spinning {
	animation: sheltersync-dice-tumble 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

.reroll-icon img.emoji {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	pointer-events: none;
}

@keyframes sheltersync-dice-tumble {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(180deg) scale(1.25);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}


/* -------------------------------------------------------------------------
Unified Inline Sorter Dropdown Component
------------------------------------------------------------------------- */
.sheltersync-sort-container {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* Standard horizontal spacing between text label and select field */
}

.sheltersync-sort-label {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	font-family: var(--fontTheme);
	white-space: nowrap;
}

/* Styled Minimal Dropdown with a Bottom Accent Underline */
.sheltersync-sort-select {
	padding: 4px 24px 4px 4px;
	border: none;
	border-bottom: 2px solid #111111;
	border-radius: 0;
	background-color: transparent;
	font-size: 14px;
	font-weight: 600;
	color: #111111;
	cursor: pointer;
	font-family: var(--fontTheme);
	outline: none;
	transition: border-color 0.15s ease-in-out;

	/* Clean custom native arrow layout setup */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
	background-repeat: no-repeat;
	background-position: calc(100% - 2px) center;
}

.sheltersync-sort-select:focus {
	border-bottom-color: #d946ef; /* Highlights to hot pink state on active select */
}

select.sheltersync-sort-select > option {
	padding-inline: 4px;
}

/* All Sort Logic Above Here */

/* =========================================================================
ShelterSync Branded Dynamic Card Enhancements
========================================================================= */

.pet-card {
	/*! background-color: #ffffff; */
	/*! border-radius: 12px; */
	/*! padding-bottom: 16px; */
	/*! transform: translateY(0); */
	/* Transition Layering for standard hovers */
	/*! transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
	box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); */
	/*! will-change: transform, box-shadow; */
}

/* Replicating the exact brand hover from your style sheet */
.pet-card:hover {
	/*! transform: translateY(-4px); */
	/*! box-shadow: var(--box-shadow); */
}

/* Text Layout Fix (Padding Alignment) */
.pet-card h3,
.pet-card .pet-name,
.pet-card .filter-results-count-heading {
	padding-left: 16px;
	padding-right: 16px;
	margin-top: 12px;
}

.pet-card .pet-meta-tags-row {
	padding-left: 16px;
	padding-right: 16px;
	margin-top: 8px;
}

/* Target only the inner card inputs wrapper and suggested tags on the favorites page */
body.page-favorites .sheltersync-filter-bar-card,
body.page-favorites #pet-suggested-filters-container,
body.page-favorites #toggleFiltersBtn {
	display: none;
}

/* Ensure the results row remains visible and neatly spaced */
body.page-favorites .pet-filter-results-counter-row {
	margin-top: 2rem;
}
/* Favorites Block Container */
.custom-favorites-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	line-height: 1;
}

/* Link Anchor */
.custom-favorites-block .favorites-link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	color: var(--orange, #e05a47); /* Uses theme orange CSS var with fallback */
	background: transparent;
	text-decoration: none;
	border: none;
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover & Focus Interaction */
.custom-favorites-block .favorites-link-button:hover,
.custom-favorites-block .favorites-link-button:focus {
	opacity: 0.8;
	transform: scale(1.08);
}

/* SVG Rendering Controls */
/* Custom Favorites Block - Base SVG (Outline) */
.custom-favorites-block .favorites-link-button svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: fill 0.25 ease, transform 0.2s ease;
}

/* Filled Heart state when user has 1+ favorites saved */
.custom-favorites-block .favorites-link-button.has-favorites svg {
	fill: currentColor; /* Fills in the heart with your theme orange/accent color */
}
/* ==========================================================================
FAVORITES ENGINE ANIMATIONS
========================================================================== */

/* 1. Card Heart Toggle Animation */
.shelterluv-favorite-toggle {
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: pointer;
}

.shelterluv-favorite-toggle:hover {
	transform: scale(1.15);
}

.shelterluv-favorite-toggle:active {
	transform: scale(0.85);
}

/* Play burst effect when favorited class is added */
.shelterluv-favorite-toggle.is-favorited svg {
	animation: heartPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes heartPop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.35) rotate(-8deg);
	}
	75% {
		transform: scale(0.9) rotate(3deg);
	}
	100% {
		transform: scale(1) rotate(0deg);
	}
}

/* 2. Custom Favorites Footer Block Animation Updates */
.custom-favorites-block .favorites-link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	color: var(--orange, #e05a47);
	background: transparent;
	text-decoration: none;
	border: none;
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom-favorites-block .favorites-link-button:hover,
.custom-favorites-block .favorites-link-button:focus {
	opacity: 0.85;
	transform: scale(1.12);
}

.custom-favorites-block .favorites-link-button svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: fill 0.3s ease, stroke 0.3s ease, transform 0.2s ease;
}

/* Trigger subtle pulse animation on footer heart when user has saved pets */
.custom-favorites-block .favorites-link-button.has-favorites svg {
	fill: currentColor;
	animation: footerHeartBeat 0.5s ease-in-out;
}

@keyframes footerHeartBeat {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.25);
	}
	40% {
		transform: scale(1);
	}
	60% {
		transform: scale(1.18);
	}
	100% {
		transform: scale(1);
	}
}

/* Gallery Grid Layout */
.sheltersync-gallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
	gap: var(--gallery-gap, 12px);
	margin-top: 15px;
}

/* Gallery Card Style */
.sheltersync-gallery-card {
	border: 1px solid #ccd0d4;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sheltersync-gallery-link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sheltersync-gallery-img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.sheltersync-gallery-card:hover .sheltersync-gallery-img {
	transform: scale(1.04);
}

/* Fallback Logo Styling in Gallery Grid */
.sheltersync-gallery-card.is-fallback-image {
	background-color: #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sheltersync-gallery-card.is-fallback-image .sheltersync-gallery-img {
	object-fit: contain;
	padding: 20px;
	opacity: 0.8;
}

/* Admin Message Placeholder */
.sheltersync-no-gallery.admin-placeholder {
	background: #f6f7f7;
	border: 1px dashed #ccd0d4;
	padding: 30px;
	text-align: center;
	color: #50575e;
	border-radius: 6px;
	font-size: 13px;
}

/* Fallback Outer Layout */
.animal-gallery-wrapper.is-fallback-display {
	width: 100%;
}

.animal-gallery-wrapper.is-fallback-display .main-hero-container {
	background-color: #f8fafc;
	border-radius: 25px;
	min-height: 380px;
	display: flex;
	flex-direction: column; /* Stacks image and notice text vertically */
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	box-sizing: border-box;
	position: relative; /* Keeps Foster Badge and Heart aligned */
}

/* Fallback Logo */
.animal-gallery-wrapper.is-fallback-display .main-animal-hero {
	width: auto;
	max-width: 65%;
	max-height: 180px;
	object-fit: contain;
	margin: 0 auto;
	border-radius: 0;
}

/* Cute Visual Feedback Text */
.sheltersync-fallback-notice {
	margin-top: 18px;
	font-size: 0.95rem;
	color: #64748b;
	text-align: center;
	max-width: 80%;
	line-height: 1.4;
	font-weight: 500;
}

.sheltersync-fallback-notice span {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: #334155;
	margin-bottom: 4px;
}


/* Top Bar Socials / Favorites */
.wp-block-social-link, .wp-block-social-link:hover {
	transform: scale(1) !important;
	transition: transform .2s ease-in-out !important;
}

.top-bar .wp-block-social-links {
	gap: 10px;
	font-size: 20px;
}
.top-bar .wp-block-social-links:after {
	content: '';
	display: block;
	height: 15px;
	width: 1px;
	background: #fff;
	opacity: .2;
}
.top-bar .custom-favorites-block svg {
	width: 20px;
	height: 20px;
}
.top-bar .wp-block-group.is-layout-flex:has(.wp-block-social-links) {
	gap: 10px;
}

/* ==========================================================================
Single Pet Video Section Layout & Responsiveness
========================================================================== */

.sheltersync-animal-video-wrapper {
	margin-top: 1.75rem;
	margin-bottom: 1.75rem;
	width: 100%;
}

.sheltersync-video-title {
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #2d3748;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sheltersync-video-item {
	margin-bottom: 1.25rem;
	width: 100%;
}

/* Responsive 16:9 Aspect Ratio Container for iFrames */
.sheltersync-video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	background-color: #000;
}

.sheltersync-video-container iframe,
.sheltersync-video-container object,
.sheltersync-video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Native HTML5 Video styling */
.sheltersync-native-video {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Fallback Text Link Styling */
.sheltersync-video-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background-color: #4a90e2;
	color: #ffffff;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.2s ease-in-out;
}

.sheltersync-video-link:hover {
	background-color: #357abd;
}

.custom-back-button,
.wp-block-button__link.custom-pet-donate-button {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	background: var(--blue);
	color: var(--blue-light);
	border: 0;
	svg {
		fill: var(--orange);
		stroke: var(--orange);
	}
	&:hover {
		background: var(--orange);
		svg {
			fill: var(--blue);
			stroke: var(--blue);
		}
	}
}
.custom-back-button svg {
	color: var(--text) !important;
	stroke: var(--text) !important;
	fill: var(--blue-light) !important;
}

/* ==========================================================================
ShelterSync - Share & Print Block Component
========================================================================== */

.sheltersync-share-block-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 20px 0;
	text-align: center;
}

.pet-share-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.pet-share-bar .share-label {
	font-weight: 600;
	font-size: 0.95rem;
	color: #444;
}

.pet-share-bar .share-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.pet-share-bar .share-icons a,
.pet-share-bar .share-icons .share-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #555;
	transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
	text-decoration: none;
}

.pet-share-bar .share-icons a:hover {
	color: #111;
	transform: translateY(-2px);
}

.pet-print-profile {
	margin-top: 4px;
}

.print-pet-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 0.9rem;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
	cursor: pointer;
}

.print-pet-link:hover {
	text-decoration: underline;
}

.print-pet-link svg {
	fill: currentColor;
}

/* ==========================================================================
ShelterSync - Explore Popular Results Block
========================================================================== */

.sheltersync-popular-results-wrapper {
	margin: 2rem 0;
}

.sheltersync-popular-results-wrapper .popular-results-card {
	background-color: var(--blue-light);
	border-radius: 24px;
	padding: 36px 24px;
	text-align: center;
	margin-bottom: 1.75rem;
}

.sheltersync-popular-results-wrapper .popular-results-heading {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #000000;
	margin: 0 0 24px 0;
}

.sheltersync-popular-results-wrapper .popular-results-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	max-width: 860px;
	margin: 0 auto;
}

.sheltersync-popular-results-wrapper .popular-result-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: 50px;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	transform: translateY(0);
	color: var(--text);
	cursor: pointer;
	background-color: var(--white);
}

/* Outlined Pills (Standard Options) */
.sheltersync-popular-results-wrapper .popular-result-pill.pill-outline {
	background-color: var(--white);
	border: 1.5px solid var(--blue-border);
}
.sheltersync-popular-results-wrapper .popular-result-pill.pill-highlight,
.sheltersync-popular-results-wrapper .popular-result-pill.pill-outline:hover {
	background-color: var(--blue);
	color: #fff;
	/*! border-color: var(--orange); */
	/*! box-shadow: var(--box-shadow); */
	/*! transform: translateY(-2px); */

}

/* Filled / Highlighted Pills ("See All" Options) */
.sheltersync-popular-results-wrapper .popular-result-pill.pill-highlight {
	background-color: var(--green);
	color: var(--text);
}

.sheltersync-popular-results-wrapper .popular-result-pill.pill-highlight:hover {
	/*! background-color: #4199ae; */
	/*! border-color: var(--text); */
}

/* Active Dynamic Filter Badge (Injected below 'Our Available Dogs') */
.sheltersync-active-filter-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 20px;
	padding: 6px 14px;
	background-color: #f0f4f8;
	border: 1px solid #d0dbe5;
	border-radius: 20px;
	font-size: 0.9rem;
	color: #333;
}

.sheltersync-active-filter-badge .filter-label {
	color: #666;
	font-weight: 500;
}

.sheltersync-active-filter-badge .filter-value {
	font-weight: 700;
	color: #111;
}

.sheltersync-active-filter-badge .clear-filter-btn {
	background: #e0e6ed;
	border: none;
	border-radius: 12px;
	padding: 2px 8px;
	margin-left: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #d9534f;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sheltersync-active-filter-badge .clear-filter-btn:hover {
	background: #d9534f;
	color: #fff;
}

/* Offset anchor targets so the filter bar remains visible at top of viewport */
#dogs,
#cats,
#critters,
.page-section-pet-cards {
	scroll-margin-top: var(--anchor-offset); /* Adjust px to match filter bar height + padding */
}

/* ShelterSync Filter Notice Banner Styles */
.sheltersync-filter-text-notice {
	margin-top: 10px;
	margin-bottom: 18px;
	font-size: 1.15rem;
	color: #444444;
	font-weight: 500;
	display: block;
	clear: both;
}

.sheltersync-filter-text-notice .sheltersync-filter-text-highlight {
	color: #111111;
}

/* ==========================================================================
ShelterSync Dynamic Pet Grid & Loader Overlay
========================================================================== */

/* 1. Outer Wrapper (Acts as the fixed anchor for the loader) */
.sheltersync-grid-loader-wrapper {
	position: relative;
	width: 100%;
	min-height: 450px; /* Locks height during fetch so page footer doesn't jump */
}

/* 2. Floating Zero-Impact Loader Overlay */
.sheltersync-loader-overlay {
	position: absolute;
	top: 120px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.sheltersync-loader-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Spinner Graphic */
.sheltersync-spinner {
	width: 40px;
	height: 40px;
	border: 3.5px solid rgba(0, 0, 0, 0.08);
	border-top-color: currentColor; /* Inherits parent accent color */
	border-radius: 50%;
	animation: shelterSyncSpin 0.7s infinite linear;
}

@keyframes shelterSyncSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 3. Dynamic Pet Grid Base Layout */
.sheltersync-pet-grid {
	display: grid;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;

	/* Fallback column count variable */
	--sheltersync-grid-cols: 3;
	grid-template-columns: repeat(var(--sheltersync-grid-cols), minmax(0, 1fr));

	/* Layout containment prevents children swaps from disturbing outside elements */
	/*! contain: layout paint; */
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------- */
/* Lifecycle State 1: Updating Grid (Dimmed during fetch)                     */
/* -------------------------------------------------------------------------- */
.sheltersync-pet-grid.is-updating {
	opacity: 0.25;
	pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Lifecycle State 2: Entrance Stagger for Cards                              */
/* -------------------------------------------------------------------------- */
.sheltersync-pet-grid.is-loaded {
	opacity: 1;
}

.sheltersync-pet-grid.is-loaded .sheltersync-pet-card-wrapper {
	animation: sheltersyncCardEntrance 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	will-change: transform, opacity;
}

@keyframes sheltersyncCardEntrance {
	0% {
		opacity: 0;
		transform: translateY(12px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ==========================================================================
ShelterSync Selected Attributes Tags Container
========================================================================== */

.selected-tags-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.selected-tags-container .filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background-color: #00bcd4; /* Cyan accent color matching your MVP pill style */
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	border-radius: 20px;
	line-height: 1.2;
	transition: background-color 0.2s ease;
}

.selected-tags-container .filter-tag:hover {
	background-color: #0097a7;
}

.selected-tags-container .filter-tag .remove-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 4px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.selected-tags-container .filter-tag .remove-tag:hover {
	opacity: 1;
	transform: scale(1.2);
}

/* Hide "Favorited First" option on Favorites page */
body.page-favorites #pet-sort-dropdown option[value="favorited"] {
	display: none;
}

/* -------------------------------------------------------------------------
Saved Favorites Quick Link Pill Button
------------------------------------------------------------------------- */
.sheltersync-favs-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #ffe4e6; /* Soft rose background */
	color: #e11d48;           /* Bold red-rose text */
	border: none;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 20px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--fontTheme);
	white-space: nowrap;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease-in-out;
	transform: translateY(0);
}
.page-favorites .sheltersync-favs-btn {
	display: none;
}

.sheltersync-favs-btn:hover {
	background-color: #fecdd3;
	color: #be123c;
	transform: translateY(-1px);
}

.sheltersync-favs-btn:active {
	transform: translateY(0);
}

.sheltersync-favs-btn .fav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	line-height: 1;
}

.sheltersync-favs-btn .fav-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}



/* ==========================================================================
PSAS Alert Modal Container & Overlay (Figma Frame 1013 Design)
========================================================================== */

/* Dark Outer Overlay Base */
.psas-alert-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.65);
	z-index: 99999;
	display: none; /* Managed by JS */
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Open State (Revealed via JS) */
.psas-alert-modal-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Modal Inner Container Frame */
.psas-alert-modal-container {
	position: relative;
	background-color: #E26043; /* Matches brand terracotta/orange background */
	border-radius: 20px; /* Soft rounded corners from Figma frame */
	max-width: 480px;
	width: 100%;
	padding: 32px 28px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;

	/* Set Transform Origin toward Top Left (Announcement Bar) */
	transform-origin: 10% 0%;
}

/* 1. Entrance Animation: Springs out smoothly from top bar */
.psas-alert-modal-overlay.is-open .psas-alert-modal-container {
	animation: psasModalExpand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 2. Closing State: Backdrop Fades Out */
.psas-alert-modal-overlay.is-closing {
	opacity: 0;
	pointer-events: none;
}

/* 3. Exit Animation: Retracts back into top bar */
.psas-alert-modal-overlay.is-closing .psas-alert-modal-container {
	animation: psasModalShrink 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Keyframes: Spring out from top-left announcement bar */
@keyframes psasModalExpand {
	0% {
		opacity: 0;
		transform: translate(-120px, -180px) scale(0.15);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
}

/* Keyframes: Shrink back into top-left announcement bar */
@keyframes psasModalShrink {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-120px, -180px) scale(0.15);
	}
}

/* ==========================================================================
Styled Top Right 'X' Close Button
========================================================================== */
.psas-modal-close {
	position: absolute;
	top: -12px;
	right: -12px;
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ffffff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.psas-modal-close svg {
	width: 16px;
	height: 16px;
	stroke: #E26043; /* Matches brand terracotta color */
	stroke-width: 2.5;
	transition: transform 0.25s ease;
}

.psas-modal-close:hover {
	background-color: #ffffff;
	transform: scale(1.12);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.psas-modal-close:hover svg {
	transform: rotate(90deg);
}

/* ==========================================================================
Inner Content Stack Layout Overrides
========================================================================== */

/* Wrapper Group Reset */
.psas-alert-modal-content section.announcement-popup {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* 1. Optional Image (Full Width with Rounded Corners) */
.psas-alert-modal-content .image-wrap {
	width: 100% !important;
	margin: 0 0 24px 0 !important;
}

.psas-alert-modal-content .image-wrap figure {
	margin: 0 !important;
	width: 100% !important;
}

.psas-alert-modal-content .image-wrap img {
	width: 100% !important;
	height: 220px !important;
	object-fit: cover !important;
	border-radius: 12px !important;
	display: block !important;
	object-position: top;
}

/* 2. Required Header Text */
.psas-alert-modal-content .psas-announcement-text {
	color: #ffffff !important;
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	margin: 0 0 12px 0 !important;
}

/* 3. Optional Description Text */
.psas-alert-modal-content p.wp-block-paragraph {
	color: #ffffff !important;
	font-size: 0.95rem !important;
	line-height: 1.45 !important;
	text-align: center !important;
	margin: 0 0 24px 0 !important;
	opacity: 0.95;
}

/* 4. Optional Button with Link (Centered White Pill Button) */
.psas-alert-modal-content .wp-block-buttons {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 !important;
}

.psas-alert-modal-content .wp-block-button__link {
	background-color: #ffffff !important;
	color: #E26043 !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	padding: 12px 36px !important;
	border-radius: 50px !important; /* Rounded Pill shape */
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.psas-alert-modal-content .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
Back to Top Button
========================================================================== */
.back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary, #000000);
	color: #ffffff;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background-color: var(--wp--preset--color--secondary, #333333);
	color: #ffffff;
	transform: translateY(-2px);
	outline: 2px solid var(--wp--preset--color--primary, #000000);
	outline-offset: 2px;
}
/* Show floating button when scrolling page down */
body.scrolled .back-to-top {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Stack Back to Top button above UserWay widget when enabled */
body.has-userway .back-to-top {
	bottom: 88px;
}
/* ---------------------------------------------------------- */
/* --------------- MOBILE STYLE STARTS HERE ----------------- */
/* ---------------------------------------------------------- */

/* Container gutter for screens over 1920px */
@media (min-width: 1921px) {
	body {
		background: var(--body-background-color, #333537);
		& > .wp-site-blocks  {
			max-width: var(--max-width, 1920px);
			margin: 0 auto;
			box-shadow: 0 4px 24px 4px rgba(0,0,0,.5);
			background: var(--main-background-color, #ffffff);
		}
	}
}
@media (max-width: 1400px) {
	.top-bar .top-bar-wrap {

	}
	footer:has(.site-footer-wrap) {
		padding-inline: var(--laptop-padding, 24px);
	}
	.page-section > .wp-block-group:not(.donate-bar), .page-section > .wp-block-columns {
		padding-inline: var(--laptop-padding, 24px);
	}
	.page-section > .donate-bar {

	}
}

/* Header Mobile Menu  */
@media (max-width: 1200px) {
	/* 1. Force the hamburger menu button to show below your target breakpoint (e.g. 1024px) */
	/* Logo */
	.wp-block-site-logo.is-default-size img {
		/* height: auto; */
		/* width: 155px; */
	}
	.header-buttons {
		gap: var(--padding-standard, 25px);
	}
	nav.main-menu.is-responsive {
		margin: 0;
		order: 3;
		+ .margin-left-auto {
			margin: 0 0 0 auto;
		}
		.wp-block-navigation__responsive-container-open {
			padding: var(--padding-standard, 25px);
			margin-right: var(--padding-standard, 25px);
			margin-left: var(--padding-standard, 25px);
		}
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.header-wrap {
		padding-right: 0;
		gap: 0;
	}

	.mega-menu-item,
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	/* Turn off during testing */
	header.wp-block-template-part {
		/*! position: fixed; */
		/*! top: 0; */         /* Make sure top is pinned */
		/*! left: 0; */
		/*! right: 0; */
		/*! width: auto; */    /* Let left:0 and right:0 calculate full viewport width */
		/*! max-width: 100vw; */
		/*! box-sizing: border-box; */
		/*! z-index: 9999; */
	}

	body.admin-bar .psas-sticky-header-clone {
		display: none;
	}

	/* Mobile Overlay & Single Toggle Customization */
	.wp-block-navigation {
		position: relative;
		gap: 0;

		.has-modal-open .wp-block-navigation__responsive-dialog {
			margin-top: 0 !important;
		}

		/* 1. Permanent Toggle Button (=) */
		.wp-block-navigation__responsive-container-open {
			position: relative;
			z-index: 100002 !important;
			display: flex !important;
			align-items: center;
			justify-content: center;
			opacity: 1 !important;
			pointer-events: auto !important;
			padding: 0.5rem;
			background: transparent;
			border: none;
			color: #333;
			cursor: pointer;

			svg {
				width: 28px;
				height: 28px;
				transform: scale(1);
				transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				transform-origin: center center;

				path {
					transition: d 0.25s ease-in-out, opacity 0.2s ease;
				}
			}

			&:hover svg {
				transform: scale(1.08);
			}
		}

		/* 2. Smooth Transition when Menu is Open */
		&.has-modal-open .wp-block-navigation__responsive-container-open,
		&:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
			svg {
				transform: rotate(180deg) scale(0.95);

				path {
					d: path("m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z");
				}
			}
		}

		.wp-block-navigation__responsive-container-close {
			display: none !important;
			opacity: 0 !important;
			pointer-events: none !important;
		}

		/* Mobile Drawer Overlay */
		.wp-block-navigation__responsive-container.is-menu-open {
			position: fixed !important;
			top: var(--header-height-calc, 100px) !important;
			left: 0 !important;
			right: 0 !important;
			bottom: 0 !important;
			height: calc(100vh - var(--header-height-calc, 100px)) !important;
			background-color: #eef6f9 !important;
			padding: 0 !important;
			z-index: 100000 !important;
			overflow-y: auto;

			/* Menu Overlay Container */
			.wp-block-navigation__responsive-container-content {
				padding-top: 0rem;

				.wp-block-social-link {
					border-right: 1px solid var(--mobile-overlay-border-color, #dbe8ed);
					padding: 8px;
					border-radius: 0;
				}

				ul.wp-block-navigation__container.main-menu {
					width: 100%;
					position: relative;

					.wp-block-navigation-item {
						position: relative;
						border-bottom: 1px solid var(--mobile-overlay-border-color, #dbe8ed);
						width: 100%;

						&.has-child {
							padding-bottom: 0;
						}

						.wp-block-navigation-item__content {
							font-size: 1.25rem;
							font-weight: 700;
							color: #222;
							padding: 12px;
							display: block;
							width: 100%;
							text-align: left;
							transition: all 0.2s ease-in-out;
							line-height: 1;

							&:hover {
								font-weight: 700;
								background: var(--orange);
								padding-left: 15px;
							}
						}

						/* Submenu Toggle Chevron Icon */
						.wp-block-navigation__submenu-icon {
							display: flex !important; /* Overrides WP default that hides chevrons in overlay */
							position: absolute;
							top: 0;
							right: 0;
							z-index: 1;
							align-items: center;
							justify-content: center;
							width: 40px;
							height: 40px;
							margin: 0;
							padding: 8px;
							font-size: 20px;
							line-height: 1;
							transition: color 0.2s ease;

							&:hover {
								color: var(--orange);
							}

							svg {
								width: 20px;
								height: 20px;
								transition: transform 0.2s ease-in-out;
							}

							/* Rotate Chevron SVG 180° when expanded */
							&[aria-expanded="true"] svg {
								transform: rotate(180deg);
							}
						}

						/* Hidden Mobile Submenu Container */
						.wp-block-navigation__submenu-container {
							display: none;
							width: 100%;
							padding-top: 0;
							padding-inline: 0;

							.wp-block-navigation-item__content {
								display: block;
								font-size: 1rem;
								font-weight: 400;
								padding-block: 0.20rem;
								padding-inline-start: 10px;
								transition: all 0.2s ease-in-out;

								&:hover {
									font-weight: 700;
									background-color: var(--orange);
								}
							}
						}

						/* Reveal Submenu on Active Toggle or Open State */
						.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
						&.is-menu-open > .wp-block-navigation__submenu-container {
							display: block;
						}
					}
				}
			}
		}
	}

}
@media (min-width: 1201px) {
	body nav + .wp-block-group.margin-left-auto {
		padding-right: var(--padding-standard, 25px);

	}
	/* Suppress core submenu list blocks */
	.site-header-wrapper .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
		display: none;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	/* 2. Reset styles when the screen is larger than your target breakpoint (e.g. 1025px+) */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: flex;
	}
}
@media (min-width: 961px) and (max-width: 1140px) {
	body:not(.block-editor-iframe__body) .cover-slider {

		img[src] {
			/* Pulls subject inward from the right edge */
			object-position: 70% bottom;

			/* Prevents subject from expanding too aggressively into the arrow zone */
			max-width: 100%;
		}

		/* Keep slide container cleanly balanced */
		.slider-slide {
			justify-content: space-between;
		}
	}

}
@media (min-width: 961px) {
	body:not(.block-editor-iframe__body) .cover-slider {
		.wp-block-cover__background {
			display: none !important;
		}
	}
	.margin-left-auto-only-desktop {
		margin-left: auto;
	}
	.mw-75per-only-desktop {
		max-width: 75%;
	}
	.mw-60per-only-desktop {
		max-width: 60%;
	}
	.mw-65per-only-desktop {
		/* max-width: 65%; */
		max-width: 550px;
	}
	.page-section-event-cards .wp-block-buttons .wp-block-button__link.wp-element-button {
		font-size: 0;
		padding: .75rem;
		gap: 0;
	}
}
/* Official Mobile Styling */
@media (max-width: 960px) {
	.top-bar .top-bar-wrap {
		/* padding: var(--mobile-padding); */
	}
	.top-bar .wp-block-group.social-group .wp-block-social-links svg {
		fill: #fff !important;
	}

	footer:has(.site-footer-wrap) {
		padding-inline: var(--mobile-padding, 24px);
	}
	footer > .wp-block-group > .wp-block-columns {
		flex-wrap: wrap !important;
	}
	footer > .wp-block-group > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	.page-section > .wp-block-group:not(.donate-bar), .page-section > .wp-block-columns {
		padding-inline: var(--mobile-padding, 24px);
		flex-direction: column;
		justify-content: center;
	}
	.page-section > .wp-block-columns {
		gap: var(--column-gap-mobile, 80px);
		margin-top: 0;
		margin-bottom: 0;
	}
	.page-section > .donate-bar {
		flex-direction: column;
		justify-content: center;
	}



	body:not(.block-editor-iframe__body) .cover-slider {
		position: relative;
		overflow: hidden;
		display: grid;               /* Converts container to CSS Grid */
		grid-template-columns: 1fr;  /* Single column track */
		min-height: auto;

		> article .wp-block-columns {
			padding: var(--mobile-padding, 24px);
		}

		.cover-slide:not(.cover-slide-1),
		.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:empty {
			display: none;
		}

		/* Grid Stacked Slides */
		.slider-slide {
			grid-area: 1 / 1 !important;
			position: relative !important;
			top: auto;
			left: auto;
			width: 100%;
			height: auto;
			margin: 0;
			opacity: 0;
			visibility: hidden;
			z-index: 1;
			transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
			justify-content: flex-start;
			align-items: flex-start;
		}

		.slider-slide.is-active {
			opacity: 1;
			visibility: visible;
			z-index: 2;
		}

		h2 {
			font-size: var(--font-size-h2-cover-slider-laptop, 2.25rem);
			strong {
				color: #125262;
			}
		}

		/* Scaled 1920x1080 Image Pocket Alignment */
		img.wp-block-cover__image-background,
		img[src] {
			object-fit: contain;
			object-position: bottom right; /* Locks portrait subject into the bottom-right pocket */
		}

		.wp-block-cover__background {
			display: block;
			z-index: -1;
		}

		/* Dots: Fluid height expander for 600px-781px text unwrapping */
		.slider-dots {
			position: relative;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 0.75rem;
			margin-top: 1.5rem;
			margin-bottom: var(--mobile-dots-margin-bottom, clamp(70px, 24vw, 175px));
			margin-left: 5px;
		}

		.slider-dot {
			width: 14px;
			height: 14px;
			border-radius: 50%;
			border: 2px solid #ffffff;
			background: transparent;
			cursor: pointer;
			padding: 0;
			transition: background-color 0.3s ease, transform 0.2s ease;
		}

		.slider-dot.is-active, .slider-dot:hover {
			background: #ffffff;
			transform: scale(1.15);
		}

		/* Arrows: Fixed distance from bottom edge */
		.slider-arrow {
			position: absolute;
			z-index: 10;
			top: unset;
			bottom: 10%; /* Anchored neatly inside expanded bottom buffer */
			transform: none;
		}

		.slider-prev {
			left: var(--mobile-padding, 24px);
		}

		.slider-next {
			left: calc(var(--mobile-padding, 24px) + 55px);
		}

		.slider-arrow:hover {
			background: rgba(18, 82, 98, 0.85);
			transform: scale(1.08);
		}
	}
	/* Donate Bar Section Adjustments */
	.page-section-donate {
		margin-top: var(--padding-section-block);

		.donate-bar {
			text-align: center;
			flex-direction: column;
			border-radius: 0;
			padding: var(--mobile-padding, 25px);
		}
		.wp-block-paragraph {
			font-size: var(--font-title-decorative-mobile, 18px);
			margin-bottom: var(--mobile-padding, 25px);
			line-height: 1;
		}

		/* Button Wrap Container */
		.buttons-donation {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 0.75rem;
			width: 100%;

			.wp-block-button {
				flex: 1 1 calc(33.333% - 0.75rem); /* 3 per row on mid-size mobile */
				margin: 0;
			}
		}
	}


	.wp-block-columns.is-style-reverse-on-mobile {
		flex-direction: column-reverse !important;
	}
	/* Cards Stack*/
	.page-section.page-section-cards > .wp-block-columns {
		flex-direction: column;
		justify-content: center;
	}

	.page-section-cards .is-layout-grid {
		grid-template-columns: 1fr;
	}

}
@media (max-width: 992px) {
	.sheltersync-pet-grid {
		grid-template-columns: repeat(min(var(--sheltersync-grid-cols), 2), minmax(0, 1fr));
	}
}

@media (max-width: 840px) {
	:root {--font-size-h2-footer: 2.5rem; --font-size-h2: 2.5rem;}
}
@media (min-width: 782px) {


}
@media (max-width: 782px) {
	/* Completely turn off panels on mobile layouts */
	body.admin-bar .psas-sticky-header-clone {
		top: 46px;
	}
}
/* Guttenberg Mobile */
@media (max-width: 781px) {


}
@media (max-width: 768px) {
	.page-section-signup .wp-block-group-is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* -----------------------------------------------------------------
	1. FILTER BAR CONTAINER & CARD (Fixed bleed & containment)
	----------------------------------------------------------------- */
	.sheltersync-filter-bar-container {
		width: 100%;
		max-width: 100%;       /* Ensures it never exceeds the mobile viewport */
		margin: -20px auto 24px auto;
		padding: 0 16px;       /* Keeps 16px gutter off screen edges */
		box-sizing: border-box;
	}

	.sheltersync-filter-bar-card {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 20px 16px;
		box-sizing: border-box;
		overflow: hidden;      /* Clips any rogue child elements */
	}

	/* Reset desktop height/flex-basis overrides on mobile */
	.sheltersync-filter-bar-card .filter-group,
	.sheltersync-filter-bar-card .filter-group:nth-child(1),
	.sheltersync-filter-bar-card .filter-group:nth-child(2) {
		width: 100%;
		flex: 1 1 auto;
		box-sizing: border-box;
	}

	.sheltersync-filter-bar-card select {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}


	/* -----------------------------------------------------------------
	2. META ACTIONS & SUGGESTED FILTERS
	----------------------------------------------------------------- */
	.sheltersync-filter-meta-actions {
		width: 100%;
		padding: 0 16px;
		margin-top: 16px;
		box-sizing: border-box;
	}

	.sheltersync-suggested-filters-wrapper {
		min-height: auto;
		width: 100%;
	}

	.sheltersync-suggested-filters-list,
	.sheltersync-suggested-filters-wrapper > div {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}


	/* -----------------------------------------------------------------
	3. COUNTER & ROW ACTIONS
	----------------------------------------------------------------- */
	.sheltersync-filter-meta-counter-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-top: 16px;
		margin-top: 16px;
	}

	.filter-results-count-heading {
		font-size: 18px;
		width: 100%;
	}

	.sheltersync-filter-meta-right-actions {
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
	}

	.sheltersync-sort-container select {
		max-width: 100%;
	}

	/* Target the cover block directly or inside page-hero */
	.page-hero .wp-block-cover,
	header + section .wp-block-cover {
		min-height: 480px; /* Scaled down base height */
		padding-top: 170px;
		padding-bottom: 60px; /* Leaves room for negative-margin filter card */
		height: auto;
	}

	.animal-meta-wrapper.is-grid {
		grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
	}
}
@media (max-width: 720px) {
	:root {--font-size-h2-footer: 2.3rem; --font-size-h2: 2.3rem;}
}
@media (max-width: 690px) {

	/* ------------------------------------------------------------------------
	1. Header Controls
	------------------------------------------------------------------------ */
	header.wp-block-template-part nav + .wp-block-group .wp-block-buttons > .wp-block-button:first-of-type {
		display: none;
	}

	body:not(.block-editor-iframe__body) .cover-slider {
		position: relative;
		overflow: hidden;
		display: grid;               /* Converts container to CSS Grid */
		grid-template-columns: 1fr;  /* Single column track */
		min-height: auto;

		> article .wp-block-columns {
			padding: var(--hero-cover-mobile-padding, 24px);
		}

		.cover-slide:not(.cover-slide-1),
		.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:empty {
			display: none;
		}

		/* Grid Stacked Slides */
		.slider-slide {
			grid-area: 1 / 1 !important;
			position: relative !important;
			top: auto;
			left: auto;
			width: 100%;
			height: auto;
			margin: 0;
			opacity: 0;
			visibility: hidden;
			z-index: 1;
			transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
			justify-content: flex-start;
			align-items: flex-start;
		}

		.slider-slide.is-active {
			opacity: 1;
			visibility: visible;
			z-index: 2;
		}

		h2 {
			font-size: var(--font-size-h2-cover-slider-mobile, 2.25rem);
			strong {
				color: #125262;
			}
		}

		/* Scaled 1920x1080 Image Pocket Alignment */
		img.wp-block-cover__image-background,
		img[src] {
			object-fit: contain;
			object-position: bottom right; /* Locks portrait subject into the bottom-right pocket */
		}

		.wp-block-cover__background {
			z-index: -1;
		}

		/* Dots: Fluid height expander for 600px-781px text unwrapping */
		.slider-dots {
			position: relative;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 0.75rem;
			margin-top: 1.5rem;
			margin-bottom: var(--mobile-dots-margin-bottom, clamp(70px, 24vw, 175px));
			margin-left: 5px;
		}

		.slider-dot {
			width: 14px;
			height: 14px;
			border-radius: 50%;
			border: 2px solid #ffffff;
			background: transparent;
			cursor: pointer;
			padding: 0;
			transition: background-color 0.3s ease, transform 0.2s ease;
		}

		.slider-dot.is-active, .slider-dot:hover {
			background: #ffffff;
			transform: scale(1.15);
		}

		/* Arrows: Fixed distance from bottom edge */
		.slider-arrow {
			position: absolute;
			z-index: 10;
			top: unset;
			bottom: 10%; /* Anchored neatly inside expanded bottom buffer */
			transform: none;
		}

		.slider-prev {
			left: var(--hero-cover-mobile-padding, 24px);
		}

		.slider-next {
			left: calc(var(--hero-cover-mobile-padding, 24px) + 55px);
		}

		.slider-arrow:hover {
			background: rgba(18, 82, 98, 0.85);
			transform: scale(1.08);
		}
	}

}
@media (max-width: 670px) {
	/* TODO: Turn off margin on mobile menu icon */
	:root {--mobile-padding: 25px;--font-size-h2-footer: 2rem; --font-size-h2: 2rem;}
	.center-mobile {
		.wp-block-heading,
		.wp-block-button, .wp-block-buttons,
		.wp-block-paragraph {
			text-align: center;
			justify-content: center;
		}
		.wp-block-buttons {
			gap: 1rem;
		}
		.wp-block-button {
			width: 100%;
			display: block;
		}

	}
	.page-section-cards {
		.wp-block-column > .wp-block-group,
		.wp-block-group-is-layout-grid > .wp-block-group {
			padding-inline: var(--mobile-padding) !important;
		}
	}
	.page-section-event-cards > .wp-block-query .wp-block-post .wp-block-post-title {
		margin-bottom: 0;
	}
	footer:has(.site-footer-wrap) {
		padding-bottom: 0;
	}
	footer > .wp-block-group > .wp-block-columns, footer .wp-block-buttons {
		justify-content: center;
		margin-inline: auto;
		text-align: center;
	}
	footer > .wp-block-group > .wp-block-columns {
		margin: 0;
		gap: 0;
	}
	footer .wp-block-list {
		display: flex;
		flex-direction: column;
	}
	footer .site-footer-badges {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 30px;
	}
	footer .site-footer-badges .wp-block-image {
		margin: 0;
	}
	footer .site-footer-badges .wp-block-image img {
		max-width: 180px;
	}
	.wp-block-list:has(.has-location-icon) li, .wp-block-list:has(.has-phone-icon) li, .wp-block-list.has-checkmark li {
		line-height: 1.25;
		display: inline-block;
	}
	footer > .wp-block-group > .wp-block-columns > .wp-block-column:not(:last-of-type) {
		/* padding-bottom: 1.75rem; */
	}
	.site-footer-top-row:after,
	footer > .wp-block-group > .wp-block-columns:not(.site-footer-top-row) > .wp-block-column:after {
		content: '';
		display: block;
		width: 100%;
		max-width: 100px;
		margin-block: 2.75rem;
		margin-inline: auto;
		height: 1px;
		background: var(--white);
		opacity: 0.4;
	}
	footer > .wp-block-group > .wp-block-columns.site-footer-top-row > .wp-block-column:first-of-type  {
		padding-bottom: 1.75rem;
	}
	.site-footer-bottom-row .site-footer-badges::after {
		display: none !important;
	}
	.site-credit {
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		.wp-block-paragraph {
			font-size: 0.76rem;
			text-align: center;
		}
		.site-credit-socials {
			justify-content: center;
		}
	}
}
@media (max-width: 640px) {
	.animal-title-age-stack .animal-stacked-title {
		font-size: 2.25rem;
	}
	.animal-title-age-stack .animal-stacked-age {
		font-size: 12px;
	}
	.sheltersync-gallery-grid {
		grid-template-columns: repeat(2, 1fr); /* Responsive breakdown on mobile */
	}
}
@media (max-width: 576px) {
	.sheltersync-pet-grid {
		grid-template-columns: 1fr;
	}
}
@media (min-width: 521px) {
	.wp-block-group.social-group.social-group-injected {
		display: none !important;
	}
}
@media (max-width: 520px) {
	.top-bar .top-bar-wrap {
		justify-content: center;
		text-align: center;
	}
	.header-right .lang-picker,
	.top-bar .wp-block-group .wp-block-group.is-layout-flex.social-group { display: none; }
	.wp-block-navigation__responsive-container .wp-block-group.social-group.social-group-injected, .wp-block-navigation__responsive-container .wp-block-group.social-group.social-group-injected .wp-block-social-links {
		width: 100%;
		gap: 0;
	}
	.wp-block-navigation__responsive-container .wp-block-group.social-group.social-group-injected {
		padding-bottom: 0;
		border-bottom: 1px solid var(--mobile-overlay-border-color, #dbe8ed);
	}
	.wp-block-navigation__responsive-container .wp-block-group.social-group.social-group-injected .wp-block-social-links a,
	.wp-block-navigation__responsive-container .wp-block-group .favorites-link-button {

	}

	.wp-block-navigation__responsive-container .wp-block-group.social-group.social-group-injected .wp-block-social-links svg {
		fill: var(--text) !important;
		font-size: 20px;
		width: 20px;
	}
	/* Hover & Focus Interaction */
	.custom-favorites-block .favorites-link-button:hover,
	.custom-favorites-block .favorites-link-button:focus {
		opacity: 1;
		transform: scale(1);
	}
	.custom-favorites-block {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 8px;
		line-height: 1;
		border-right: 1px solid var(--mobile-overlay-border-color, #dbe8ed);
		border-left: 1px solid var(--mobile-overlay-border-color, #dbe8ed);
	}
	.wp-block-navigation__responsive-container .wp-block-group .favorites-link-button svg {
		color: var(--text);
		font-size: 20px;
		width: 20px;
	}
	.wp-block-navigation__responsive-container .lang-picker {
		margin: 0 auto 0 0;
		padding: 8px;
		font-size: 20px;
		line-height: 1;
	}

}
/* Legacy Mobile Screens */
@media (max-width: 490px){
	.wp-block-navigation__responsive-container-open {
		margin-inline: 0 !important;
	}

	.wp-block-site-logo img {
		height: auto;
		width: 115px;
	}

	.top-bar p {
		display: block;
		margin: 0 auto;
		font-size: 0.76rem;
	}

	body:not(.block-editor-iframe__body) .cover-slider {
		/*! min-height: 700px; */
	}
}
@media (max-width: 480px) {
	.page-section-donate .buttons-donation .wp-block-button {
		flex: 1 1 calc(50% - 0.75rem);

		&:last-child {
			flex: 1 1 100%; /* Makes 'Other' span full width on bottom row */
		}
	}
	.animal-meta-wrapper.is-grid {
		grid-template-columns: 1fr; /* Stacks to single column on mobile */
	}
}
@media (max-width: 440px){
	.header-right .lang-picker {
		display: none;
	}
}



/* Print Styles Override */
@media print {
	/* Hide header, navigation, and share links during print */
	header, footer, sidebar, nav, .pet-share-bar, .pet-print-profile {
		display: none;
	}

	/* Show QR Code container on printed document */
	.pet-print-qr-code {
		display: block;
		text-align: center;
		margin-top: 20px;
	}

	.pet-print-qr-code img {
		width: 120px;
		height: 120px;
	}

	.pet-print-qr-code p {
		font-size: 10px;
		color: #333;
		margin-top: 4px;
	}
}