/* =====================================================================
 * Pages — scoped polish for every standard page template.
 *
 * Loaded only on WP pages / 404 / search contexts (see
 * /add-ons/utils/template-styles.php). Selectors are scoped under
 * body.page / body.error404 / body.search so nothing leaks into the
 * homepage, blog, account, cart, checkout, or product contexts that
 * have their own dedicated stylesheets.
 *
 * Sections:
 *   1.  Page body defaults
 *   2.  Hero banner (#page_banner with image)
 *   3.  Plain-title fallback (.page-title without banner image)
 *   4.  Prose / content typography inside .container
 *   5.  Images, figures, blockquotes
 *   6.  Tables
 *   7.  Bootstrap Blocks spacing rhythm
 *   8.  Gravity Forms polish
 *   9.  Feature callout card pattern
 *  10.  404 experience
 *  11.  Search experience
 *  12.  Mobile refinements
 * =================================================================== */

/* ---------------------------------------------------------------------
 * 1. Page body defaults
 * ------------------------------------------------------------------- */
body.page,
body.error404,
body.search {
	background: #fdfdfd;
}

/* ---------------------------------------------------------------------
 * 2. Hero banner — #page_banner (from partials/banner.php and its
 *    ~15 banner-* variants). Structure is a .ratio with an image,
 *    a .bg-black overlay, and a centered / bottom-left title block.
 * ------------------------------------------------------------------- */
body.page #page_banner.ratio,
body.search #page_banner.ratio,
body.error404 #page_banner.ratio {
	--bs-aspect-ratio: 50%;
	min-height: 360px;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	isolation: isolate;
}

body.page #page_banner.ratio > img,
body.search #page_banner.ratio > img,
body.error404 #page_banner.ratio > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}

/* Gradient overlay (darker at bottom for legible title) */
body.page #page_banner.ratio > .bg-black,
body.search #page_banner.ratio > .bg-black,
body.error404 #page_banner.ratio > .bg-black {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.9) 100%) !important;
	opacity: 1 !important;
	z-index: 1;
}

/* Title container sits above the overlay */
body.page #page_banner.ratio > .d-flex,
body.search #page_banner.ratio > .d-flex,
body.error404 #page_banner.ratio > .d-flex {
	position: relative;
	z-index: 2;
}

body.page #page_banner .page-title,
body.search #page_banner .page-title,
body.error404 #page_banner .page-title {
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.08 !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
	font-size: clamp(1.875rem, 5vw, 3.25rem) !important;
	max-width: 920px;
	color: #fff !important;
	margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
 * 3. .page-hero — polished fallback hero rendered by banner.php when
 *    no ACF page_banner image is set. Gradient background, orange
 *    accent rule, optional kicker (page ancestor), title, optional lede.
 * ------------------------------------------------------------------- */
body.page .page-hero {
	position: relative;
	padding: 2.5rem 0 1.75rem;
	margin-bottom: 1.5rem;
	background: linear-gradient(180deg, #fdfdfd 0%, #faf3ef 100%);
	border-bottom: 1px solid #f3e7df;
	overflow: hidden;
}

body.page .page-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, #F26322 15%, #d14d16 35%, transparent 55%);
}

body.page .page-hero__inner {
	max-width: 880px;
}

body.page .page-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #F26322;
	margin-bottom: 0.75rem;
}

body.page .page-hero__kicker .bi {
	font-size: 0.85rem;
}

body.page .page-hero__title {
	font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: #111 !important;
	margin: 0 0 0.625rem !important;
}

body.page .page-hero__title::before {
	display: none;
}

body.page .page-hero__lede {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #4b5563;
	max-width: 620px;
	margin: 0;
}

@media (max-width: 767.98px) {
	body.page .page-hero {
		padding: 1.5rem 0 1.25rem;
	}

	body.page .page-hero__lede {
		font-size: 1rem;
	}
}

/* Legacy plain-title fallback (kept as a safety net for any third-party
 * partial still emitting the old `.page-title.fw-normal` pattern). */
body.page .container > .page-title.fw-normal {
	position: relative;
	padding-top: 2rem;
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: #111 !important;
	font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
	line-height: 1.15;
	display: inline-block;
	max-width: 100%;
}

body.page .container > .page-title.fw-normal::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 3px;
	background: linear-gradient(90deg, #F26322 0%, #d14d16 100%);
	border-radius: 2px;
}

/* ---------------------------------------------------------------------
 * 3b. .entry-page wrapper (emitted by content.php and its variants).
 *     Sets prose column width + vertical rhythm for every editor-authored
 *     WP page. .entry-page--fullwidth opts out of the max-width cap for
 *     marketing pages that use the nocontainer template.
 * ------------------------------------------------------------------- */
body.page .entry-page {
	padding: 0.5rem 0 2rem;
}

body.page .entry-page .entry-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #1f2937;
}

body.page .entry-page .entry-content > :first-child {
	margin-top: 0;
}

body.page .entry-page .entry-content > :last-child {
	margin-bottom: 0;
}

body.page .entry-page--fullwidth .entry-content {
	max-width: none;
}

/* ---------------------------------------------------------------------
 * 4. Prose / content typography inside .container on page templates.
 *    Scoped tightly so it doesn't touch blog / product / account /
 *    cart / checkout content.
 * ------------------------------------------------------------------- */
body.page .container {
	color: #1f2937;
}

body.page .container > p,
body.page .container .entry-content > p,
body.page .container .content > p,
body.page .container > h2 + p,
body.page .container > h3 + p {
	line-height: 1.7;
	font-size: 1.0625rem;
}

body.page .container h2:not(.card h2):not(.page-title):not(.blog-masthead__title):not(.post-card__title):not(.post-featured__title):not(.breed-title):not(.offcanvas-title) {
	font-weight: 700;
	color: #111;
	letter-spacing: -0.01em;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	line-height: 1.25;
}

body.page .container h3:not(.card h3):not(.post-card__title):not(.blog-masthead__title):not(.breed-title) {
	font-weight: 700;
	color: #111;
	letter-spacing: -0.005em;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

body.page .container h4:not(.card h4) {
	font-weight: 700;
	color: #111;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

/* Inline links inside page prose */
body.page .container p a:not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand),
body.page .container li a:not(.btn):not(.dropdown-item):not(.nav-link) {
	color: #F26322;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

body.page .container p a:not(.btn):not(.dropdown-item):not(.nav-link):hover,
body.page .container li a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
	color: #d14d16;
	text-decoration-thickness: 2px;
}

body.page .container strong {
	font-weight: 700;
	color: #111;
}

/* Lists inside page prose */
body.page .container > ul:not(.dropdown-menu):not(.nav):not(.navbar-nav):not(.pagination):not(.page-numbers):not(.list-unstyled),
body.page .container > ol:not(.list-unstyled),
body.page .container .entry-content ul:not(.dropdown-menu):not(.nav):not(.navbar-nav):not(.list-unstyled),
body.page .container .entry-content ol:not(.list-unstyled) {
	padding-left: 1.5rem;
	margin-bottom: 1.25rem;
}

body.page .container > ul:not(.dropdown-menu):not(.nav):not(.navbar-nav):not(.pagination):not(.page-numbers):not(.list-unstyled) li,
body.page .container > ol:not(.list-unstyled) li,
body.page .container .entry-content ul:not(.dropdown-menu):not(.nav):not(.navbar-nav):not(.list-unstyled) li,
body.page .container .entry-content ol:not(.list-unstyled) li {
	margin-bottom: 0.5rem;
	line-height: 1.65;
}

body.page .container > ul:not(.dropdown-menu):not(.nav):not(.navbar-nav):not(.pagination):not(.page-numbers):not(.list-unstyled) li::marker,
body.page .container > ol:not(.list-unstyled) li::marker {
	color: #F26322;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * 5. Images, figures, blockquotes inside page content
 * ------------------------------------------------------------------- */
body.page .container img:not(.logo):not(.card-img-top):not(.post-card__img):not(.navbar-brand img):not([class*="icon"]):not(.wp-block-button__link):not(.rank-math-logo) {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

body.page .container figure:not(.wp-block-image) {
	margin: 2rem 0;
}

body.page .container figure img,
body.page .container .wp-block-image img {
	border-radius: 0.5rem;
}

body.page .container figcaption,
body.page .container .wp-block-image figcaption {
	text-align: center;
	font-size: 0.875rem;
	color: #6b7280;
	margin-top: 0.625rem;
	line-height: 1.5;
}

body.page .container blockquote,
body.page .container .wp-block-quote,
body.page .container .wp-block-pullquote {
	position: relative;
	margin: 2rem 0;
	padding: 1.25rem 1.5rem 1.25rem 2rem;
	background: #fff7f3;
	border-left: 4px solid #F26322;
	border-radius: 0 0.5rem 0.5rem 0;
	font-size: 1.1rem;
	font-style: italic;
	color: #1f2937;
}

body.page .container blockquote p:last-child,
body.page .container .wp-block-quote p:last-child {
	margin-bottom: 0;
}

body.page .container blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-style: normal;
	font-size: 0.875rem;
	font-weight: 600;
	color: #6b7280;
}

body.page .container hr {
	margin: 2.5rem 0;
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}

/* ---------------------------------------------------------------------
 * 6. Tables inside page content (FAQ, pricing, comparison tables)
 * ------------------------------------------------------------------- */
body.page .container table:not(.woocommerce-orders-table):not(.shop_table):not(.variations):not(.cart):not(.woocommerce-MyAccount-content table) {
	width: 100%;
	margin: 1.75rem 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 0.5rem;
	overflow: hidden;
	font-size: 0.95rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.page .container table:not(.woocommerce-orders-table):not(.shop_table):not(.variations):not(.cart) th {
	background: #111;
	color: #fff;
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

body.page .container table:not(.woocommerce-orders-table):not(.shop_table):not(.variations):not(.cart) td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: top;
}

body.page .container table:not(.woocommerce-orders-table):not(.shop_table):not(.variations):not(.cart) tr:nth-child(even) td {
	background: #fafbfc;
}

body.page .container table:not(.woocommerce-orders-table):not(.shop_table):not(.variations):not(.cart) tr:last-child td {
	border-bottom: 0;
}

/* ---------------------------------------------------------------------
 * 7. Bootstrap Blocks (wp-block-wpbootstrapblocks-*) spacing rhythm.
 *    Most of the theme's CMS-authored pages use these blocks.
 * ------------------------------------------------------------------- */
body.page .wp-block-wpbootstrapblocks-row {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

body.page .wp-block-wpbootstrapblocks-row + .wp-block-wpbootstrapblocks-row {
	margin-top: 0;
}

body.page .wp-block-wpbootstrapblocks-column > :first-child {
	margin-top: 0;
}

body.page .wp-block-wpbootstrapblocks-column > :last-child {
	margin-bottom: 0;
}

body.page .wp-block-image.aligncenter,
body.page .wp-block-image.alignwide {
	margin-left: auto;
	margin-right: auto;
}

body.page .wp-block-buttons {
	margin: 1.75rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

body.page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: #F26322 !important;
	color: #fff !important;
	border: 0;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

body.page .wp-block-button__link:hover {
	background: #d14d16 !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(242, 99, 34, 0.3);
}

body.page .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #F26322 !important;
	border: 2px solid #F26322;
}

body.page .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #F26322 !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------
 * 8. Gravity Forms — polished look to match the theme. Used on
 *    contact, financing, puppy-packages, wishlist, and many other
 *    lead-capture pages.
 * ------------------------------------------------------------------- */
body.page .gform_wrapper,
body.search .gform_wrapper,
body.error404 .gform_wrapper {
	margin: 1.5rem 0;
}

body.page .gform_wrapper .gform_heading {
	margin-bottom: 1.25rem;
}

body.page .gform_wrapper .gform_title {
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	color: #111;
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem !important;
}

body.page .gform_wrapper .gform_description {
	color: #4b5563;
	line-height: 1.55;
}

body.page .gform_wrapper form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

body.page .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
}

body.page .gform_wrapper .gfield {
	grid-column: span 12;
}

body.page .gform_wrapper .gfield.gf_left_half,
body.page .gform_wrapper .gfield.gfield--width-half:first-of-type,
body.page .gform_wrapper .gfield.gfield--width-half {
	grid-column: span 12;
}

@media (min-width: 576px) {
	body.page .gform_wrapper .gfield.gf_left_half,
	body.page .gform_wrapper .gfield.gf_right_half,
	body.page .gform_wrapper .gfield.gfield--width-half {
		grid-column: span 6;
	}

	body.page .gform_wrapper .gfield.gfield--width-third {
		grid-column: span 4;
	}

	body.page .gform_wrapper .gfield.gfield--width-quarter {
		grid-column: span 3;
	}
}

body.page .gform_wrapper .gfield_label,
body.page .gform_wrapper .gfield > label {
	font-weight: 600;
	font-size: 0.875rem;
	color: #4b5563;
	margin-bottom: 0.375rem;
	display: block;
	line-height: 1.4;
}

body.page .gform_wrapper .gfield_required {
	color: #F26322;
	margin-left: 0.15rem;
}

body.page .gform_wrapper input[type="text"],
body.page .gform_wrapper input[type="email"],
body.page .gform_wrapper input[type="tel"],
body.page .gform_wrapper input[type="url"],
body.page .gform_wrapper input[type="number"],
body.page .gform_wrapper input[type="date"],
body.page .gform_wrapper input[type="password"],
body.page .gform_wrapper textarea,
body.page .gform_wrapper select {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	font-size: 0.95rem;
	background: #fff;
	color: #1f2937;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	min-height: 44px;
}

body.page .gform_wrapper textarea {
	min-height: 120px;
	resize: vertical;
	font-family: inherit;
}

body.page .gform_wrapper input:focus,
body.page .gform_wrapper textarea:focus,
body.page .gform_wrapper select:focus {
	outline: none;
	border-color: #F26322;
	box-shadow: 0 0 0 3px rgba(242, 99, 34, 0.15);
}

body.page .gform_wrapper input::placeholder,
body.page .gform_wrapper textarea::placeholder {
	color: #9ca3af;
}

/* Radio / checkbox groups */
body.page .gform_wrapper .gfield_radio,
body.page .gform_wrapper .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page .gform_wrapper .gfield_radio li,
body.page .gform_wrapper .gfield_checkbox li,
body.page .gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

body.page .gform_wrapper .gfield_radio label,
body.page .gform_wrapper .gfield_checkbox label,
body.page .gform_wrapper .gchoice label {
	font-weight: 400 !important;
	color: #1f2937;
	font-size: 0.95rem;
	margin-bottom: 0 !important;
	cursor: pointer;
}

body.page .gform_wrapper input[type="radio"],
body.page .gform_wrapper input[type="checkbox"] {
	width: auto;
	min-height: auto;
	accent-color: #F26322;
	margin-right: 0.25rem;
	flex-shrink: 0;
}

/* Submit button + footer row */
body.page .gform_wrapper .gform_footer {
	margin-top: 1rem !important;
	padding: 0 !important;
}

body.page .gform_wrapper .gform_footer input[type="submit"],
body.page .gform_wrapper .gform_button,
body.page .gform_wrapper button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 2rem;
	background: #F26322;
	color: #fff;
	border: 0;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	min-height: 44px;
}

body.page .gform_wrapper .gform_footer input[type="submit"]:hover,
body.page .gform_wrapper .gform_button:hover,
body.page .gform_wrapper button[type="submit"]:hover {
	background: #d14d16;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(242, 99, 34, 0.3);
}

/* Validation + confirmation messages */
body.page .gform_wrapper .validation_error,
body.page .gform_wrapper .gform_validation_errors {
	background: #fee2e2;
	border-left: 4px solid #dc2626;
	border-radius: 0 0.5rem 0.5rem 0;
	padding: 1rem 1.25rem;
	color: #991b1b;
	margin: 0 0 1.25rem;
	font-size: 0.925rem;
}

body.page .gform_wrapper .validation_message,
body.page .gform_wrapper .gfield_validation_message,
body.page .gform_wrapper .gfield_error .gfield_description {
	color: #dc2626;
	font-size: 0.825rem;
	margin-top: 0.375rem;
	font-weight: 600;
}

body.page .gform_wrapper .gfield_error input,
body.page .gform_wrapper .gfield_error textarea,
body.page .gform_wrapper .gfield_error select {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

body.page .gform_confirmation_message,
body.page .gform_confirmation_wrapper {
	padding: 1.25rem 1.5rem;
	background: #f0fdf4;
	border-left: 4px solid #16a34a;
	border-radius: 0 0.5rem 0.5rem 0;
	color: #166534;
	font-size: 1rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------
 * 8b. Contact page patterns (content-contact.php)
 *    .service-cta    — icon + copy + button callout card
 *    .contact-form-card — wrapped Gravity Form panel
 *    .locations-panel   — right-column sticky locations list
 *    .locations-accordion — per-location accordion item polish
 * ------------------------------------------------------------------- */
body.page .service-cta {
	display: flex;
	gap: 1rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.875rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

body.page .service-cta:hover {
	border-color: rgba(242, 99, 34, 0.3);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

body.page .service-cta__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #F26322 0%, #d14d16 100%);
	color: #fff;
	border-radius: 12px;
	font-size: 1.35rem;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(242, 99, 34, 0.25);
}

body.page .service-cta__body {
	flex: 1;
	min-width: 0;
}

body.page .service-cta__title {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: #111 !important;
	margin: 0 0 0.375rem !important;
	line-height: 1.3;
}

body.page .service-cta__title::before {
	display: none;
}

body.page .service-cta p {
	color: #4b5563;
	line-height: 1.55;
	font-size: 0.95rem;
	margin: 0 0 0.875rem;
}

body.page .service-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	background: #F26322;
	color: #fff;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.page .service-cta__btn:hover {
	background: #d14d16;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(242, 99, 34, 0.3);
}

body.page .contact-form-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	margin-top: 1rem;
}

body.page .contact-form-card__header {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid #f3f4f6;
}

body.page .contact-form-card__header > .bi {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #F26322 0%, #d14d16 100%);
	color: #fff;
	border-radius: 10px;
	font-size: 1.15rem;
}

body.page .contact-form-card__title {
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	color: #111 !important;
	margin: 0 0 0.25rem !important;
}

body.page .contact-form-card__title::before {
	display: none;
}

body.page .contact-form-card__lede {
	color: #6b7280;
	font-size: 0.925rem;
	margin: 0;
}

body.page .locations-panel {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 1.5rem;
}

body.page .locations-panel__header {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding-bottom: 0.875rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid #F26322;
}

body.page .locations-panel__header > .bi {
	font-size: 1.25rem;
	color: #F26322;
}

body.page .locations-panel__title {
	font-size: 1.125rem !important;
	font-weight: 800 !important;
	color: #111 !important;
	margin: 0 !important;
	letter-spacing: -0.01em;
}

body.page .locations-panel__title::before {
	display: none;
}

body.page .locations-panel__email {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	background: #fdf4ee;
	color: #F26322;
	border-radius: 0.5rem;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 1rem;
	transition: background 0.15s ease;
}

body.page .locations-panel__email:hover {
	background: #f9e3d6;
	color: #d14d16;
}

body.page .locations-accordion .accordion-item {
	background: #fdfdfd;
	border: 1px solid #e5e7eb !important;
	border-radius: 0.625rem !important;
	margin-bottom: 0.5rem;
	overflow: hidden;
}

body.page .locations-accordion .accordion-item:last-child {
	margin-bottom: 0;
}

body.page .locations-accordion .accordion-button {
	background: #fff;
	font-weight: 700;
	color: #111;
	padding: 0.875rem 1rem;
	font-size: 0.95rem;
}

body.page .locations-accordion .accordion-button:not(.collapsed) {
	background: linear-gradient(135deg, #F26322 0%, #d14d16 100%);
	color: #fff;
	box-shadow: none;
}

body.page .locations-accordion .accordion-button:focus {
	box-shadow: 0 0 0 3px rgba(242, 99, 34, 0.2);
	border-color: #F26322;
}

body.page .locations-accordion .accordion-body {
	padding: 1rem;
	background: #fff;
}

@media (max-width: 991.98px) {
	body.page .locations-panel {
		position: static;
	}
}

/* ---------------------------------------------------------------------
 * 8c. Breed finder search (content-breed-finder.php)
 * ------------------------------------------------------------------- */
body.page .breed-finder-search {
	position: relative;
	max-width: 560px;
	margin: 1.5rem 0 2.5rem;
}

body.page .breed-finder-search__icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	font-size: 1rem;
	pointer-events: none;
	z-index: 2;
}

body.page .breed-finder-search__input {
	width: 100%;
	padding: 0.875rem 2.75rem 0.875rem 2.75rem;
	border: 1px solid #d1d5db;
	border-radius: 0.75rem;
	font-size: 1rem;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.page .breed-finder-search__input:focus {
	outline: none;
	border-color: #F26322;
	box-shadow: 0 0 0 4px rgba(242, 99, 34, 0.15);
}

body.page .breed-finder-search__input::placeholder {
	color: #9ca3af;
}

body.page .breed-finder-search__clear {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #9ca3af;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

body.page .breed-finder-search__clear:hover {
	background: #f3f4f6;
	color: #111;
}

body.page .breed-finder-search__clear[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
 * 8d. Breed videos grid (content-breed-videos.php) —
 *     loop-video.php renders each card; this section reserves the grid
 *     wrapper spacing.
 * ------------------------------------------------------------------- */
body.page .breed-videos-grid-wrap {
	padding: 1rem 0 1.5rem;
}

body.page .breed-videos-grid {
	margin-bottom: 2.5rem !important;
}

/* ---------------------------------------------------------------------
 * 9. Feature callout / highlight card — reusable pattern for ACF-sourced
 *    content sections on marketing pages.
 * ------------------------------------------------------------------- */
body.page .page-callout,
body.page .section-callout,
body.page .callout {
	background: linear-gradient(135deg, #fff7f3 0%, #ffffff 100%);
	border: 1px solid rgba(242, 99, 34, 0.2);
	border-radius: 1rem;
	padding: 2rem;
	margin: 2rem 0;
	box-shadow: 0 4px 16px rgba(242, 99, 34, 0.06);
}

body.page .page-callout > :first-child,
body.page .section-callout > :first-child,
body.page .callout > :first-child {
	margin-top: 0;
}

body.page .page-callout > :last-child,
body.page .section-callout > :last-child,
body.page .callout > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * 10. 404 experience — polished branded error page
 * ------------------------------------------------------------------- */
body.error404 {
	background: linear-gradient(180deg, #ffffff 0%, #fdf4ee 100%);
}

body.error404 .page-404 {
	text-align: center;
	padding: 3rem 1.25rem 2.5rem;
	max-width: 680px;
	margin: 0 auto;
}

body.error404 .page-404__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	background: linear-gradient(135deg, #F26322 0%, #d14d16 100%);
	color: #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 1.25rem;
	box-shadow: 0 4px 12px rgba(242, 99, 34, 0.3);
}

body.error404 .page-404__code {
	font-size: clamp(4.5rem, 14vw, 8rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.05em;
	background: linear-gradient(135deg, #F26322 0%, #d14d16 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0 0 0.5rem;
	-webkit-text-fill-color: transparent;
}

body.error404 .page-404__title {
	font-size: clamp(1.5rem, 3.5vw, 2.125rem) !important;
	font-weight: 800 !important;
	color: #111 !important;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem !important;
	line-height: 1.2;
}

body.error404 .page-404__title::before {
	display: none;
}

body.error404 .page-404__lede {
	font-size: 1.0625rem;
	color: #4b5563;
	line-height: 1.6;
	margin: 0 auto 1.75rem;
	max-width: 520px;
}

body.error404 .page-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

body.error404 .page-404__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: all 0.15s ease;
}

body.error404 .page-404__btn--primary {
	background: #F26322;
	color: #fff;
}

body.error404 .page-404__btn--primary:hover {
	background: #d14d16;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(242, 99, 34, 0.3);
}

body.error404 .page-404__btn--secondary {
	background: #fff;
	color: #111;
	border: 1px solid #e5e7eb;
}

body.error404 .page-404__btn--secondary:hover {
	border-color: #F26322;
	color: #F26322;
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(242, 99, 34, 0.12);
}

/* ---------------------------------------------------------------------
 * 11. Search experience
 * ------------------------------------------------------------------- */
body.search .search-hero {
	padding: 2.5rem 0 1.5rem;
}

body.search .search-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #F26322;
	margin-bottom: 0.75rem;
}

body.search .search-hero__title {
	font-size: clamp(1.625rem, 3.5vw, 2.25rem) !important;
	font-weight: 800 !important;
	color: #111 !important;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem !important;
	line-height: 1.15;
}

body.search .search-hero__title::before {
	display: none;
}

body.search .search-hero__query {
	color: #F26322;
}

body.search .search-hero__meta {
	color: #6b7280;
	font-size: 0.95rem;
}

/* Search form — reused on search + no-results */
body.search .search-form,
body.error404 .search-form {
	display: flex;
	gap: 0.5rem;
	margin: 1.25rem 0;
	max-width: 520px;
}

body.search .search-form input[type="search"],
body.error404 .search-form input[type="search"] {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	font-size: 0.95rem;
	background: #fff;
	color: #1f2937;
}

body.search .search-form input[type="search"]:focus,
body.error404 .search-form input[type="search"]:focus {
	outline: none;
	border-color: #F26322;
	box-shadow: 0 0 0 3px rgba(242, 99, 34, 0.15);
}

body.search .search-form button,
body.error404 .search-form button {
	padding: 0.75rem 1.25rem;
	background: #F26322;
	color: #fff;
	border: 0;
	border-radius: 0.5rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: background 0.15s ease;
}

body.search .search-form button:hover,
body.error404 .search-form button:hover {
	background: #d14d16;
}

/* Search results list */
body.search .search-results {
	padding: 1rem 0 2.5rem;
}

body.search .search-result {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

body.search .search-result:hover {
	border-color: rgba(242, 99, 34, 0.35);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

body.search .search-result__thumb {
	flex: 0 0 180px;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #f3f4f6;
}

body.search .search-result__thumb img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}

body.search .search-result__body {
	flex: 1;
	min-width: 0;
}

body.search .search-result__kicker {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #F26322;
	margin-bottom: 0.35rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

body.search .search-result__title {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em;
	color: #111 !important;
	margin: 0 0 0.5rem !important;
	line-height: 1.3;
}

body.search .search-result__title::before {
	display: none;
}

body.search .search-result__title a {
	color: inherit;
	text-decoration: none;
}

body.search .search-result__title a:hover {
	color: #F26322;
}

body.search .search-result__excerpt {
	color: #4b5563;
	line-height: 1.55;
	font-size: 0.925rem;
	margin: 0 0 0.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.search .search-result__meta {
	font-size: 0.8rem;
	color: #6b7280;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

body.search .search-result__meta .bi {
	color: #F26322;
}

/* No-results state */
body.search .search-no-results {
	text-align: center;
	padding: 2.5rem 1.25rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	max-width: 560px;
	margin: 1.5rem auto 3rem;
}

body.search .search-no-results__icon {
	font-size: 3rem;
	color: #F26322;
	opacity: 0.7;
	margin-bottom: 1rem;
}

body.search .search-no-results__title {
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	color: #111 !important;
	margin: 0 0 0.5rem !important;
}

body.search .search-no-results__title::before {
	display: none;
}

body.search .search-no-results__lede {
	color: #4b5563;
	line-height: 1.55;
	margin-bottom: 1.25rem;
}

/* Search pagination — reuse blog pagination look */
body.search .search-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 2rem 0 3rem;
}

body.search .search-pagination a,
body.search .search-pagination span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.625rem 1rem;
	background: #fff;
	color: #111;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all 0.15s ease;
}

body.search .search-pagination a:hover {
	background: #F26322;
	color: #fff;
	border-color: #F26322;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
 * 12. Mobile refinements
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	body.page #page_banner.ratio,
	body.search #page_banner.ratio,
	body.error404 #page_banner.ratio {
		--bs-aspect-ratio: 65%;
		min-height: 280px;
	}

	body.page #page_banner .page-title,
	body.search #page_banner .page-title,
	body.error404 #page_banner .page-title {
		font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
	}

	body.page .container h2:not(.card h2):not(.page-title):not(.blog-masthead__title):not(.post-card__title):not(.post-featured__title):not(.breed-title):not(.offcanvas-title) {
		font-size: 1.375rem;
		margin-top: 2rem;
	}

	body.page .container h3:not(.card h3):not(.post-card__title):not(.blog-masthead__title):not(.breed-title) {
		font-size: 1.15rem;
	}

	body.search .search-result {
		flex-direction: column;
		padding: 1rem;
	}

	body.search .search-result__thumb {
		flex: 1;
		width: 100%;
	}

	body.search .search-result__thumb img {
		height: 180px;
	}

	body.error404 .page-404 {
		padding: 2rem 1.25rem;
	}

	body.page .gform_wrapper .gform_footer input[type="submit"],
	body.page .gform_wrapper .gform_button,
	body.page .gform_wrapper button[type="submit"] {
		width: 100%;
	}
}