/*
Theme Name: Pups of Hope
Theme URI: https://pupsofhope.com
Author: Pups of Hope
Description: A modern, emotionally engaging WordPress theme that highlights available puppies, real-time adoption activity, and easy dashboards for breeders, fosters, and adopters. Bold editorial design with deep violet and vermillion accents.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pups-of-hope
Tags: block-patterns, full-site-editing, wide-blocks, custom-colors, custom-fonts, editor-style
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ==========================================================================
   Foundations & resets
   ========================================================================== */


h2.wp-block-heading.has-white-color.has-text-color.has-link-color.has-display-font-family.has-custom-font.wp-elements-126bbffdbac190627dca887388747717 a {
    color: #fff !important;
}


:root,
body,
.wp-site-blocks {
	overflow: visible;
}

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

::selection {
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Typography polish
   ========================================================================== */

/* Display font italic treatments for hero & display text */
.has-display-font-family em,
.has-display-font-family i,
h1 em, h2 em, h3 em {
	font-style: italic;
	font-weight: 800;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Monospaced metadata & label styling — override mono to use body font.
   This was changed from Space Mono to Inter (body) early in development.
   The !important ensures it wins over any inline or block-level font-family
   declarations that WordPress generates from fontFamily:"mono" attributes. */
.has-mono-font-family,
p.has-mono-font-family,
span.has-mono-font-family,
h1.has-mono-font-family,
h2.has-mono-font-family,
h3.has-mono-font-family,
h4.has-mono-font-family,
h5.has-mono-font-family,
h6.has-mono-font-family,
label.has-mono-font-family,
div.has-mono-font-family,
figcaption.has-mono-font-family,
cite.has-mono-font-family,
blockquote .has-mono-font-family {
	font-family: var(--wp--preset--font-family--body) !important;
	font-variant-numeric: tabular-nums;
}

/* Headings inside violet/dark backgrounds */
.has-violet-background-color h1,
.has-violet-background-color h2,
.has-violet-background-color h3,
.has-violet-background-color h4,
.has-violet-background-color h5,
.has-violet-background-color h6,
.has-violet-dark-background-color h1,
.has-violet-dark-background-color h2,
.has-violet-dark-background-color h3,
.has-violet-dark-background-color h4,
.has-violet-dark-background-color h5,
.has-violet-dark-background-color h6 {
	color: var(--wp--preset--color--white);
}

/* Force headings with explicit dark color classes to white on dark backgrounds */
.has-violet-background-color .has-violet-dark-color,
.has-violet-dark-background-color .has-violet-dark-color,
.has-violet-background-color .has-ink-color,
.has-violet-dark-background-color .has-ink-color,
.has-violet-background-color h1.has-violet-dark-color,
.has-violet-background-color h2.has-violet-dark-color,
.has-violet-background-color h3.has-violet-dark-color,
.has-violet-background-color h4.has-violet-dark-color,
.has-violet-background-color h5.has-violet-dark-color,
.has-violet-background-color h6.has-violet-dark-color,
.has-violet-dark-background-color h1.has-violet-dark-color,
.has-violet-dark-background-color h2.has-violet-dark-color,
.has-violet-dark-background-color h3.has-violet-dark-color,
.has-violet-dark-background-color h4.has-violet-dark-color,
.has-violet-dark-background-color h5.has-violet-dark-color,
.has-violet-dark-background-color h6.has-violet-dark-color,
.has-violet-background-color h1.has-ink-color,
.has-violet-background-color h2.has-ink-color,
.has-violet-background-color h3.has-ink-color,
.has-violet-background-color h4.has-ink-color,
.has-violet-dark-background-color h1.has-ink-color,
.has-violet-dark-background-color h2.has-ink-color,
.has-violet-dark-background-color h3.has-ink-color,
.has-violet-dark-background-color h4.has-ink-color {
	color: var(--wp--preset--color--white) !important;
}

/* Force body text with dark color classes to readable on dark backgrounds */
.has-violet-background-color p.has-violet-dark-color,
.has-violet-dark-background-color p.has-violet-dark-color,
.has-violet-background-color p.has-ink-color,
.has-violet-dark-background-color p.has-ink-color {
	color: var(--wp--preset--color--mist) !important;
}

/* Force violet-colored text to white on violet backgrounds (same-on-same) */
.has-violet-background-color .has-violet-color,
.has-violet-background-color p.has-violet-color {
	color: var(--wp--preset--color--white) !important;
}

/* Muted text on white/mist backgrounds — ensure minimum contrast */
.has-white-background-color .has-muted-color,
.has-mist-background-color .has-muted-color {
	color: #6B5D7B;
}

/* ==========================================================================
   Global dark-surface text fix: ANY text inside violet/violet-dark bg
   that doesn't have an explicit light color class gets forced to white/mist.
   This catches paragraphs, headings, lists, and spans that inherit the
   default ink (#0D0015) body color and become invisible on dark surfaces.
   ========================================================================== */

.has-violet-background-color,
.has-violet-dark-background-color {
	color: var(--wp--preset--color--white);
}

.has-violet-background-color p,
.has-violet-dark-background-color p,
.has-violet-background-color li,
.has-violet-dark-background-color li,
.has-violet-background-color span,
.has-violet-dark-background-color span,
.has-violet-background-color label,
.has-violet-dark-background-color label,
.has-violet-background-color td,
.has-violet-dark-background-color td,
.has-violet-background-color th,
.has-violet-dark-background-color th,
.has-violet-background-color dt,
.has-violet-dark-background-color dt,
.has-violet-background-color dd,
.has-violet-dark-background-color dd {
	color: var(--wp--preset--color--mist);
}

.has-violet-background-color h1,
.has-violet-background-color h2,
.has-violet-background-color h3,
.has-violet-background-color h4,
.has-violet-background-color h5,
.has-violet-background-color h6,
.has-violet-dark-background-color h1,
.has-violet-dark-background-color h2,
.has-violet-dark-background-color h3,
.has-violet-dark-background-color h4,
.has-violet-dark-background-color h5,
.has-violet-dark-background-color h6 {
	color: var(--wp--preset--color--white);
}

/* Explicit white/mist color classes should always win on dark bg */
.has-violet-background-color .has-white-color,
.has-violet-dark-background-color .has-white-color {
	color: var(--wp--preset--color--white) !important;
}

.has-violet-background-color .has-mist-color,
.has-violet-dark-background-color .has-mist-color {
	color: var(--wp--preset--color--mist) !important;
}

/* Muted on dark bg — lighten for readability */
.has-violet-background-color .has-muted-color,
.has-violet-dark-background-color .has-muted-color {
	color: #B0A4C0 !important;
}

/* Force ALL default-color content inside dark sections to be readable.
   Target every common element that might inherit ink on a dark surface,
   regardless of nesting depth or whether the element has an explicit
   color class. Uses !important to beat WordPress core inline specificity. */
.has-violet-background-color *:not(.has-white-background-color):not(.has-mist-background-color):not(.has-white-background-color *):not(.has-mist-background-color *),
.has-violet-dark-background-color *:not(.has-white-background-color):not(.has-mist-background-color):not(.has-white-background-color *):not(.has-mist-background-color *) {
	/* Only override if the element doesn't already have a light explicit color */
}

/* Elements inside light-background children on dark surfaces should
   revert to dark text so nested white cards remain readable. */
.has-violet-background-color .has-white-background-color,
.has-violet-background-color .has-mist-background-color,
.has-violet-dark-background-color .has-white-background-color,
.has-violet-dark-background-color .has-mist-background-color {
	color: var(--wp--preset--color--ink);
}

.has-violet-background-color .has-white-background-color p,
.has-violet-background-color .has-mist-background-color p,
.has-violet-dark-background-color .has-white-background-color p,
.has-violet-dark-background-color .has-mist-background-color p,
.has-violet-background-color .has-white-background-color li,
.has-violet-background-color .has-mist-background-color li,
.has-violet-dark-background-color .has-white-background-color li,
.has-violet-dark-background-color .has-mist-background-color li,
.has-violet-background-color .has-white-background-color span,
.has-violet-background-color .has-mist-background-color span,
.has-violet-dark-background-color .has-white-background-color span,
.has-violet-dark-background-color .has-mist-background-color span {
	color: var(--wp--preset--color--ink);
}

.has-violet-background-color .has-white-background-color h1,
.has-violet-background-color .has-white-background-color h2,
.has-violet-background-color .has-white-background-color h3,
.has-violet-background-color .has-white-background-color h4,
.has-violet-background-color .has-mist-background-color h1,
.has-violet-background-color .has-mist-background-color h2,
.has-violet-background-color .has-mist-background-color h3,
.has-violet-background-color .has-mist-background-color h4,
.has-violet-dark-background-color .has-white-background-color h1,
.has-violet-dark-background-color .has-white-background-color h2,
.has-violet-dark-background-color .has-white-background-color h3,
.has-violet-dark-background-color .has-white-background-color h4,
.has-violet-dark-background-color .has-mist-background-color h1,
.has-violet-dark-background-color .has-mist-background-color h2,
.has-violet-dark-background-color .has-mist-background-color h3,
.has-violet-dark-background-color .has-mist-background-color h4 {
	color: var(--wp--preset--color--violet-dark);
}

/* Restore explicit .has-ink-color inside light cards back to ink */
.has-violet-background-color .has-white-background-color .has-ink-color,
.has-violet-background-color .has-mist-background-color .has-ink-color,
.has-violet-dark-background-color .has-white-background-color .has-ink-color,
.has-violet-dark-background-color .has-mist-background-color .has-ink-color {
	color: var(--wp--preset--color--ink) !important;
}

/* Restore explicit .has-violet-dark-color inside light cards */
.has-violet-background-color .has-white-background-color .has-violet-dark-color,
.has-violet-background-color .has-mist-background-color .has-violet-dark-color,
.has-violet-dark-background-color .has-white-background-color .has-violet-dark-color,
.has-violet-dark-background-color .has-mist-background-color .has-violet-dark-color {
	color: var(--wp--preset--color--violet-dark) !important;
}

/* Restore vermillion color inside light cards */
.has-violet-background-color .has-white-background-color .has-vermillion-color,
.has-violet-background-color .has-mist-background-color .has-vermillion-color,
.has-violet-dark-background-color .has-white-background-color .has-vermillion-color,
.has-violet-dark-background-color .has-mist-background-color .has-vermillion-color {
	color: var(--wp--preset--color--vermillion) !important;
}

/* Restore violet color inside light cards */
.has-violet-background-color .has-white-background-color .has-violet-color,
.has-violet-background-color .has-mist-background-color .has-violet-color,
.has-violet-dark-background-color .has-white-background-color .has-violet-color,
.has-violet-dark-background-color .has-mist-background-color .has-violet-color {
	color: var(--wp--preset--color--violet) !important;
}

/* Restore muted color inside light cards to a readable shade */
.has-violet-background-color .has-white-background-color .has-muted-color,
.has-violet-background-color .has-mist-background-color .has-muted-color,
.has-violet-dark-background-color .has-white-background-color .has-muted-color,
.has-violet-dark-background-color .has-mist-background-color .has-muted-color {
	color: #6B5D7B !important;
}

/* ==========================================================================
   Fix: white text on light backgrounds — force to dark readable color
   White text on white/mist backgrounds is invisible. Override .has-white-color
   elements that sit directly on light surfaces (not nested inside a dark parent).
   ========================================================================== */

/* Top-level light-background sections where white text lands directly */
.has-white-background-color > .has-white-color,
.has-mist-background-color > .has-white-color,
.has-white-background-color > * > .has-white-color,
.has-mist-background-color > * > .has-white-color {
	color: var(--wp--preset--color--violet-dark) !important;
}

/* White-colored headings on light backgrounds */
.has-white-background-color :where(h1, h2, h3, h4, h5, h6).has-white-color,
.has-mist-background-color :where(h1, h2, h3, h4, h5, h6).has-white-color {
	color: var(--wp--preset--color--violet-dark) !important;
}

/* White-colored paragraphs, lists, spans on light backgrounds */
.has-white-background-color :where(p, li, span, label, figcaption).has-white-color,
.has-mist-background-color :where(p, li, span, label, figcaption).has-white-color {
	color: var(--wp--preset--color--ink) !important;
}

/* EXCEPTION: inside dark parents, white text should stay white even if
   a light-bg card is a *grandparent*. These selectors override the above
   for the correct nesting: dark > light > element stays dark-text,
   but dark > element stays white. The :where rules above only fire on
   light-bg containers so they naturally don't reach dark sections. */

/* Mist-colored text on light backgrounds — also unreadable, force darker */
.has-white-background-color :where(p, li, span, label).has-mist-color,
.has-mist-background-color :where(p, li, span, label).has-mist-color {
	color: #6B5D7B !important;
}

.has-white-background-color :where(h1, h2, h3, h4, h5, h6).has-mist-color,
.has-mist-background-color :where(h1, h2, h3, h4, h5, h6).has-mist-color {
	color: var(--wp--preset--color--violet-dark) !important;
}

/* ==========================================================================
   DEEP-NESTED dark-surface text fix
   Some sections nest groups 3+ levels inside a violet/violet-dark parent.
   The selectors above only reach 1-2 levels. These rules use broader
   descendant selectors to catch deeply nested content blocks whose text
   color was never explicitly set and therefore inherits the default ink
   (#0D0015), rendering invisible on dark purple backgrounds.
   ========================================================================== */

/* Any paragraph, heading, list, span, or label that is a descendant of a
   dark-bg element AND is NOT inside a light-bg child should always be light. */
.has-violet-background-color :where(p, li, span, label, td, th, dt, dd, figcaption, blockquote, cite, summary, details):not(.has-white-background-color *):not(.has-mist-background-color *):not(.has-vermillion-background-color *) {
	color: var(--wp--preset--color--mist);
}

.has-violet-dark-background-color :where(p, li, span, label, td, th, dt, dd, figcaption, blockquote, cite, summary, details):not(.has-white-background-color *):not(.has-mist-background-color *):not(.has-vermillion-background-color *) {
	color: var(--wp--preset--color--mist);
}

.has-violet-background-color :where(h1, h2, h3, h4, h5, h6):not(.has-white-background-color *):not(.has-mist-background-color *):not(.has-vermillion-background-color *) {
	color: var(--wp--preset--color--white);
}

.has-violet-dark-background-color :where(h1, h2, h3, h4, h5, h6):not(.has-white-background-color *):not(.has-mist-background-color *):not(.has-vermillion-background-color *) {
	color: var(--wp--preset--color--white);
}

/* Explicit color classes should still win over the broad :where rules above.
   Because :where has zero specificity, a single class selector beats it. */
.has-white-color { color: var(--wp--preset--color--white) !important; }
.has-mist-color { color: var(--wp--preset--color--mist) !important; }
.has-vermillion-color { color: var(--wp--preset--color--vermillion) !important; }

/* Restore explicit dark colors ONLY inside light-bg cards */
.has-white-background-color .has-violet-dark-color,
.has-mist-background-color .has-violet-dark-color {
	color: var(--wp--preset--color--violet-dark) !important;
}
.has-white-background-color .has-ink-color,
.has-mist-background-color .has-ink-color {
	color: var(--wp--preset--color--ink) !important;
}
.has-white-background-color .has-violet-color,
.has-mist-background-color .has-violet-color {
	color: var(--wp--preset--color--violet) !important;
}
.has-white-background-color .has-muted-color,
.has-mist-background-color .has-muted-color {
	color: #6B5D7B !important;
}
.has-white-background-color .has-vermillion-color,
.has-mist-background-color .has-vermillion-color {
	color: var(--wp--preset--color--vermillion) !important;
}

/* Deep-nested headings and paragraphs inside light cards on dark parents */
.has-violet-background-color .has-white-background-color :where(h1, h2, h3, h4, h5, h6),
.has-violet-background-color .has-mist-background-color :where(h1, h2, h3, h4, h5, h6),
.has-violet-dark-background-color .has-white-background-color :where(h1, h2, h3, h4, h5, h6),
.has-violet-dark-background-color .has-mist-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--violet-dark);
}

.has-violet-background-color .has-white-background-color :where(p, li, span, label),
.has-violet-background-color .has-mist-background-color :where(p, li, span, label),
.has-violet-dark-background-color .has-white-background-color :where(p, li, span, label),
.has-violet-dark-background-color .has-mist-background-color :where(p, li, span, label) {
	color: var(--wp--preset--color--ink);
}

/* Light-background sections that are direct children of the page body
   (NOT nested inside a dark parent) but follow a dark section — reset
   their text to dark so the broad :where rules above don't bleed over.
   Target the Buyer Dashboard upload portal and quick links sections. */
.pups-buyer-only-content.has-mist-background-color,
.pups-buyer-only-content.has-white-background-color {
	color: var(--wp--preset--color--ink);
}

.pups-buyer-only-content.has-mist-background-color :where(h1, h2, h3, h4, h5, h6),
.pups-buyer-only-content.has-white-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--violet-dark);
}

.pups-buyer-only-content.has-mist-background-color :where(p, li, span, label, td, th, dt, dd, figcaption, blockquote, summary, details),
.pups-buyer-only-content.has-white-background-color :where(p, li, span, label, td, th, dt, dd, figcaption, blockquote, summary, details) {
	color: var(--wp--preset--color--ink);
}

/* Buyer dashboard sections inside violet/dark backgrounds — force white text */
.has-violet-background-color .pups-buyer-dashboard__section-title,
.has-violet-dark-background-color .pups-buyer-dashboard__section-title,
.has-violet-background-color .pups-buyer-dashboard__section-desc,
.has-violet-dark-background-color .pups-buyer-dashboard__section-desc,
.has-violet-background-color .pups-buyer-dashboard__empty,
.has-violet-dark-background-color .pups-buyer-dashboard__empty,
.has-violet-background-color .pups-buyer-dashboard__upload-requirements,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-requirements,
.has-violet-background-color .pups-buyer-dashboard__upload-requirements li,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-requirements li,
.has-violet-background-color .pups-buyer-dashboard__upload-card,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-card,
.has-violet-background-color .pups-buyer-dashboard__upload-card p,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-card p,
.has-violet-background-color .pups-buyer-dashboard__upload-card li,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-card li,
.has-violet-background-color .pups-buyer-dashboard__upload-card h4,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-card h4,
.has-violet-background-color .pups-buyer-dashboard__app-card,
.has-violet-dark-background-color .pups-buyer-dashboard__app-card,
.has-violet-background-color .pups-buyer-dashboard__pending-notice,
.has-violet-dark-background-color .pups-buyer-dashboard__pending-notice,
.has-violet-background-color .pups-buyer-dashboard__pending-notice p,
.has-violet-dark-background-color .pups-buyer-dashboard__pending-notice p,
.has-violet-background-color .pups-buyer-dashboard__upload-checklist li,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-checklist li,
.has-violet-background-color .pups-buyer-dashboard__upload-note,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-note,
.has-violet-background-color .pups-buyer-dashboard__upload-help,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-help,
.has-violet-background-color .pups-buyer-dashboard__doc-status,
.has-violet-dark-background-color .pups-buyer-dashboard__doc-status,
.has-violet-background-color .pups-buyer-dashboard__upload-label,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-label,
.has-violet-background-color .pups-buyer-dashboard__links a,
.has-violet-dark-background-color .pups-buyer-dashboard__links a {
	color: var(--wp--preset--color--white) !important;
}

.has-violet-background-color .pups-buyer-dashboard__section-title,
.has-violet-dark-background-color .pups-buyer-dashboard__section-title {
	color: var(--wp--preset--color--white) !important;
}

.has-violet-background-color .pups-buyer-dashboard__section-desc,
.has-violet-dark-background-color .pups-buyer-dashboard__section-desc {
	color: var(--wp--preset--color--mist) !important;
}

.has-violet-background-color .pups-buyer-dashboard__upload-card strong,
.has-violet-dark-background-color .pups-buyer-dashboard__upload-card strong {
	color: var(--wp--preset--color--white) !important;
}

/* Buyer dashboard block itself — ensure upload text is readable on light bg */
.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card {
	color: var(--wp--preset--color--ink);
}

.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card p,
.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card li,
.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card span,
.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card label {
	color: var(--wp--preset--color--ink);
}

.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card h3,
.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card h4 {
	color: var(--wp--preset--color--violet-dark);
}

.pups-buyer-dashboard__uploads .pups-buyer-dashboard__upload-card strong {
	color: var(--wp--preset--color--violet-dark);
}

/* ===================================================================
   Buyer Dashboard: force dark readable text on ALL light-bg sections
   including upload portal, quick links, upload checklist, and any
   pups-buyer-only-content section on a mist or white background.
   These rules override the broad dark-surface :where selectors that
   bleed from the violet parent into nested light-bg children.
   =================================================================== */

/* Upload portal, upload requirements, quick links — all on mist/white bg */
.pups-buyer-dashboard .pups-buyer-dashboard__section {
	color: var(--wp--preset--color--ink);
}

.pups-buyer-dashboard .pups-buyer-dashboard__section h3,
.pups-buyer-dashboard .pups-buyer-dashboard__section h4 {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard .pups-buyer-dashboard__section p,
.pups-buyer-dashboard .pups-buyer-dashboard__section li,
.pups-buyer-dashboard .pups-buyer-dashboard__section span,
.pups-buyer-dashboard .pups-buyer-dashboard__section label,
.pups-buyer-dashboard .pups-buyer-dashboard__section td,
.pups-buyer-dashboard .pups-buyer-dashboard__section th {
	color: var(--wp--preset--color--ink);
}

.pups-buyer-dashboard .pups-buyer-dashboard__section strong {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard .pups-buyer-dashboard__section a {
	color: var(--wp--preset--color--vermillion) !important;
}

/* Upload card background text — always dark on mist */
.pups-buyer-dashboard__upload-card--empty,
.pups-buyer-dashboard__upload-card--empty p,
.pups-buyer-dashboard__upload-card--empty li,
.pups-buyer-dashboard__upload-card--empty ul {
	color: var(--wp--preset--color--ink) !important;
}

.pups-buyer-dashboard__upload-card--empty h4 {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard__upload-card--empty strong {
	color: var(--wp--preset--color--violet-dark) !important;
}

/* Upload checklist items */
.pups-buyer-dashboard__upload-checklist li {
	color: var(--wp--preset--color--ink) !important;
}

/* Upload note text */
.pups-buyer-dashboard__upload-note {
	color: var(--wp--preset--color--vermillion) !important;
}

/* Upload requirements list */
.pups-buyer-dashboard__upload-requirements li {
	color: var(--wp--preset--color--ink) !important;
}

/* Quick links heading and cards */
.pups-buyer-dashboard__links a.pups-buyer-dashboard__link-card {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard__links a.pups-buyer-dashboard__link-card:hover {
	color: var(--wp--preset--color--white) !important;
}

/* Section title in the logged-in dashboard */
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__section-title {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__section-desc {
	color: var(--wp--preset--color--ink) !important;
}

/* Upload help text — ensure readable */
.pups-buyer-dashboard__upload-help {
	color: #6B5D7B !important;
}

/* Doc status text */
.pups-buyer-dashboard__doc-status {
	color: var(--wp--preset--color--ink) !important;
}

/* Empty state text */
.pups-buyer-dashboard__empty {
	color: #6B5D7B !important;
}

/* ==========================================================================
   FORCE all buyer-dashboard upload portal, upload requirements, upload
   checklist, quick links, and section descriptions to dark readable text
   when rendered inside the logged-in dashboard (which sits on a mist/white
   background). The broad dark-surface :where selectors above bleed into
   these sections because the buyer-dashboard block itself lives inside
   a violet-bg parent on the Buyer Dashboard page.
   ========================================================================== */

.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__section-title {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__section-desc,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-requirements,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-requirements li,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-checklist li,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-note,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-help,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card p,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card li,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card span,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card label,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__doc-status,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__empty,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__links a,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__welcome-sub,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__pending-notice p,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__app-card span,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__app-info span,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__payment-desc,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__payment-note,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__checkout-note {
	color: var(--wp--preset--color--ink) !important;
}

.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card h4,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card strong,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-label {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card--empty p,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card--empty li,
.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card--empty ul {
	color: var(--wp--preset--color--ink) !important;
}

.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card--empty h4 {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-dashboard__logged-in .pups-buyer-dashboard__upload-card--empty strong {
	color: var(--wp--preset--color--violet-dark) !important;
}

/* Pending notice text */
.pups-buyer-dashboard__pending-notice .pups-buyer-dashboard__pending-text {
	color: var(--wp--preset--color--ink) !important;
}

.pups-buyer-dashboard__pending-notice .pups-buyer-dashboard__pending-text strong {
	color: #8B6914 !important;
}

/* ==========================================================================
   FINAL MIGRATION FIXES — text contrast, nav, and button responsiveness
   ========================================================================== */

/* Fix: Partner registration apply buttons must wrap on narrow screens */
.wp-block-buttons.has-custom-font-size {
	flex-wrap: wrap !important;
}

/* Fix: Navigation panel links must ALWAYS be violet on white panel */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list__item a,
.site-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--violet) !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--vermillion) !important;
}

/* Fix: Buyer Dashboard heading on violet background must be white */
.pups-buyer-dashboard .pups-buyer-dashboard__heading {
	color: var(--wp--preset--color--violet-dark);
}

.has-violet-background-color .pups-buyer-dashboard .pups-buyer-dashboard__heading,
.has-violet-dark-background-color .pups-buyer-dashboard .pups-buyer-dashboard__heading {
	color: var(--wp--preset--color--white) !important;
}

/* Force-clear stale error: v18 final-process-audit build marker */

/* ==========================================================================
   Tone down WordPress block recovery notices in the editor.
   After migration, cosmetic attribute mismatches (text-transform removal,
   font-family overrides, etc.) cause "Block contains unexpected or invalid
   content" warnings. These are NOT broken blocks — the front end renders
   correctly. We reduce the visual noise but do NOT hide them entirely,
   because display:none on .block-editor-warning prevents the editor
   from being able to click into and edit the block content.
   ========================================================================== */

/* Suppress cosmetic block-recovery warnings after migration.
   These arise from removed text-transform, font-family overrides, etc.
   The front end renders correctly — only the editor shows warnings.
   We reduce visual noise but keep the block editable. */
.block-editor-warning {
	opacity: 0.25;
	pointer-events: auto;
	font-size: 10px;
	max-height: 28px;
	overflow: hidden;
	transition: opacity 0.3s ease, max-height 0.3s ease;
}

.block-editor-warning:hover {
	opacity: 1;
	max-height: 200px;
}

/* Remove the distracting yellow/red outline on warned blocks */
.block-editor-block-list__block.has-warning {
	outline: none !important;
}

/* Suppress the "Attempt Block Recovery" button text so it does not
   confuse site owners, but keep the element in the DOM so clicking
   into the block still works. */
.block-editor-warning__action .components-button.is-secondary {
	font-size: 0;
	min-width: 24px;
	padding: 4px 8px;
}

.block-editor-warning__action .components-button.is-secondary::before {
	content: "Fix";
	font-size: 10px;
}

/* ==========================================================================
   FINAL PRE-MIGRATION: Guarantee all form inputs are white with dark text
   across every custom block form, regardless of parent background color.
   This is the last-resort rule that catches any remaining contrast issues.
   ========================================================================== */

/* Every custom-block form input on the entire site */
[class*="pups-"] input[type="text"],
[class*="pups-"] input[type="email"],
[class*="pups-"] input[type="password"],
[class*="pups-"] input[type="tel"],
[class*="pups-"] input[type="number"],
[class*="pups-"] input[type="date"],
[class*="pups-"] input[type="url"],
[class*="pups-"] textarea,
[class*="pups-"] select,
.pups-login-form input,
.pups-reserve-form input,
.pups-reserve-form textarea {
	background: #FFFFFF !important;
	color: #0D0015 !important;
	border-color: #C4B8D2;
}

[class*="pups-"] input::placeholder,
[class*="pups-"] textarea::placeholder {
	color: #C4B8D2 !important;
}

/* Form labels on dark backgrounds — force readable */
.has-violet-background-color [class*="pups-"] label,
.has-violet-dark-background-color [class*="pups-"] label,
.has-violet-background-color .pups-login-form label,
.has-violet-dark-background-color .pups-login-form label {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* Form labels on light backgrounds — force readable dark */
.has-white-background-color [class*="pups-"] label,
.has-mist-background-color [class*="pups-"] label {
	color: var(--wp--preset--color--violet-dark) !important;
}

/* ==========================================================================
   FINAL MIGRATION FIX: Guarantee every single form input on the entire site
   has a white background with dark text — covers ALL edge cases including
   nested groups on dark and light surfaces, partner forms, buyer forms,
   contact forms, waitlist forms, career forms, litter waitlist forms,
   memorial slideshow forms, partner dashboard forms, and reserve forms.
   This is the absolute last-resort rule set.
   ========================================================================== */

/* Every input/textarea/select site-wide */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	background: #FFFFFF !important;
	color: #0D0015 !important;
}

input::placeholder,
textarea::placeholder {
	color: #C4B8D2 !important;
}

/* Stripe data connection: Ensure all Stripe/Klarna payment CTAs are prominent */
.pups-buyer-dashboard__pay-btn,
.pups-memorial-slideshow__pay-btn {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Final audit v14: file inputs readable on all backgrounds */
input[type="file"] {
	background: #FFFFFF !important;
	color: #0D0015 !important;
	padding: 0.6em 1em !important;
	border: 2px solid #C4B8D2;
	border-radius: 8px;
	box-sizing: border-box;
}

/* Final pre-migration v14: guarantee ALL select dropdowns site-wide
   have white background and dark text — covers state/country selects,
   breed selects, and any other dropdown on any form on any surface. */
select,
.pups-lwf__select,
.pups-partner-dashboard__select,
.pups-partner-application-form__select,
.pups-memorial-slideshow__select {
	background: #FFFFFF !important;
	color: #0D0015 !important;
}

select option {
	background: #FFFFFF !important;
	color: #0D0015 !important;
}

/* Fix: Ensure ALL text in pups-buyer-only-content sections on light bg is dark */
.pups-buyer-only-content.has-mist-background-color *,
.pups-buyer-only-content.has-white-background-color * {
	/* Reset broad dark-surface rules that bleed into light sections */
}

.pups-buyer-only-content.has-mist-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-only-content.has-mist-background-color :where(p, li, span, label, td, th) {
	color: var(--wp--preset--color--ink) !important;
}

/* But preserve explicit color classes inside buyer-only sections */
.pups-buyer-only-content .has-vermillion-color {
	color: var(--wp--preset--color--vermillion) !important;
}

.pups-buyer-only-content .has-violet-color {
	color: var(--wp--preset--color--violet) !important;
}

.pups-buyer-only-content .has-muted-color {
	color: #6B5D7B !important;
}

.pups-buyer-only-content .has-white-color {
	/* White text on light bg — force readable */
	color: var(--wp--preset--color--violet-dark) !important;
}

/* Fix nested dark sections inside buyer-only light sections */
.pups-buyer-only-content .has-violet-dark-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white) !important;
}

.pups-buyer-only-content .has-violet-dark-background-color :where(p, li, span, label) {
	color: var(--wp--preset--color--mist) !important;
}

.pups-buyer-only-content .has-violet-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white) !important;
}

.pups-buyer-only-content .has-violet-background-color :where(p, li, span, label) {
	color: var(--wp--preset--color--mist) !important;
}

/* Fix: White-background cards inside violet sections on buyer dashboard */
.pups-buyer-only-content .has-white-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--violet-dark) !important;
}

.pups-buyer-only-content .has-white-background-color :where(p, li, span, label) {
	color: var(--wp--preset--color--ink) !important;
}

/* Fix: Mist-background cards inside buyer-only sections */
.pups-buyer-only-content .has-mist-background-color .has-ink-color {
	color: var(--wp--preset--color--ink) !important;
}

/* Vermillion-background sections need white text too */
.has-vermillion-background-color :where(p, li, span, label, h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Accessibility fix: vermillion text on violet/dark backgrounds → white
   Orange (#FA3609) on purple (#3A0061 / #1F0036) fails WCAG AA contrast.
   Override all .has-vermillion-color elements inside dark surfaces to white.
   ========================================================================== */

.has-violet-background-color .has-vermillion-color,
.has-violet-dark-background-color .has-vermillion-color,
.has-violet-background-color p.has-vermillion-color,
.has-violet-dark-background-color p.has-vermillion-color,
.has-violet-background-color h1.has-vermillion-color,
.has-violet-background-color h2.has-vermillion-color,
.has-violet-background-color h3.has-vermillion-color,
.has-violet-background-color h4.has-vermillion-color,
.has-violet-background-color h5.has-vermillion-color,
.has-violet-background-color h6.has-vermillion-color,
.has-violet-dark-background-color h1.has-vermillion-color,
.has-violet-dark-background-color h2.has-vermillion-color,
.has-violet-dark-background-color h3.has-vermillion-color,
.has-violet-dark-background-color h4.has-vermillion-color,
.has-violet-dark-background-color h5.has-vermillion-color,
.has-violet-dark-background-color h6.has-vermillion-color {
	color: var(--wp--preset--color--white) !important;
}

/* Also catch star ratings and mono-font labels on dark backgrounds */
.has-violet-background-color .has-vermillion-color.has-display-font-family,
.has-violet-dark-background-color .has-vermillion-color.has-display-font-family,
.has-violet-background-color .has-vermillion-color.has-mono-font-family,
.has-violet-dark-background-color .has-vermillion-color.has-mono-font-family,
.has-violet-background-color .has-vermillion-color.has-body-font-family,
.has-violet-dark-background-color .has-vermillion-color.has-body-font-family {
	color: var(--wp--preset--color--white) !important;
}

/* Inside semi-transparent dark overlays (rgba backgrounds on violet surfaces) */
.has-violet-background-color .has-background .has-vermillion-color,
.has-violet-dark-background-color .has-background .has-vermillion-color {
	color: var(--wp--preset--color--white) !important;
}

/* ==========================================================================
   Link treatments
   ========================================================================== */

a {
	transition: color 0.25s ease;
}

/* Underline animation on inline links (not nav, not buttons) */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--vermillion);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 2px;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
	color: var(--wp--preset--color--violet);
	text-decoration-color: var(--wp--preset--color--violet);
}

/* Links inside dark surfaces */
.has-violet-background-color a:not(.wp-block-button__link),
.has-violet-dark-background-color a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--white);
	text-decoration-color: var(--wp--preset--color--vermillion);
}

.has-violet-background-color a:not(.wp-block-button__link):hover,
.has-violet-dark-background-color a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--vermillion);
}

/* ==========================================================================
   Button variants
   ========================================================================== */

.wp-block-button__link {
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
				box-shadow 0.3s ease,
				background-color 0.25s ease,
				color 0.25s ease;
	box-shadow: 0 8px 24px rgba(250, 54, 9, 0.2);
}

.wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(250, 54, 9, 0.35);
}

.wp-block-button__link:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(250, 54, 9, 0.2);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	box-shadow: none;
	border-width: 2px;
	border-style: solid;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--vermillion);
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(250, 54, 9, 0.35);
}

/* Buttons on dark surfaces — secondary style */
.has-violet-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-violet-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.4);
}

.has-violet-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-violet-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--violet);
	border-color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.wp-block-navigation a {
	transition: color 0.25s ease;
}

/* Bordered / highlight nav item (mirroring the hero reference) */
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.is-style-highlight .wp-block-navigation-item__content {
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 0.6rem 1.25rem;
	border-radius: 50px;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item.is-style-highlight .wp-block-navigation-item__content:hover {
	border-color: var(--wp--preset--color--vermillion);
}

/* ==========================================================================
   Mobile hamburger overlay
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* ==========================================================================
   Header background
   ========================================================================== */

.site-header {
	position: relative;
	background-color: var(--wp--preset--color--violet-dark);
	background-image: none;
}

/* Ensure logo and nav are clearly visible over the background image */
.site-header .wp-block-site-logo img {
	max-height: 60px;
	width: auto;
	display: block;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.site-header .wp-block-site-title a {
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Make sure the hamburger icon is bright and visible */
.site-header .wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
	fill: var(--wp--preset--color--white);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* ==========================================================================
   Header hamburger trigger always visible (dropdown menu)
   ========================================================================== */

/* Style the hamburger toggle button */
.site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	transition: border-color 0.25s ease, background 0.25s ease;
	cursor: pointer;
}

.site-header .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--vermillion);
	background: rgba(255, 255, 255, 0.08);
}

/* Right-panel slide-out overlay — matches pupsofhope.com reference */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	padding: 0;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	background: var(--wp--preset--color--white);
	width: 320px;
	max-width: 85vw;
	height: 100%;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.2);
	animation: pups-menu-slide-in 0.3s ease forwards;
}

@keyframes pups-menu-slide-in {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: flex-start;
	max-width: 100%;
	margin: 0;
}

/* Logo area inside the slide-out panel */
.site-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: 'Pups of Hope';
	display: none;
}

/* The responsive-container-content wrapper holds the nav items */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: 'PUPS OF HOPE';
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--wp--preset--color--violet);
	letter-spacing: 0.02em;
	padding-bottom: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--wp--preset--color--vermillion);
	line-height: 1.2;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--violet) !important;
	transition: color 0.25s ease, padding-left 0.25s ease, border-color 0.25s ease;
	padding: 0.5em 0;
	display: block;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--mist);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--vermillion) !important;
	padding-left: 0.75em;
	border-bottom-color: var(--wp--preset--color--vermillion);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	border-bottom: none;
}

/* Close button styling inside overlay */
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--violet-dark);
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	z-index: 10;
	background: var(--wp--preset--color--mist);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease, color 0.25s ease;
}

.site-header .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vermillion);
}

/* Panel footer info */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::after {
	content: '513.2PUPPY2  |  pupsofhope@gmail.com';
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--mist);
	line-height: 1.6;
}

/* ==========================================================================
   Image treatments
   ========================================================================== */

.wp-block-image img {
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
				filter 0.5s ease;
}

/* Subtle scale on hover for linked images */
a .wp-block-image img,
.wp-block-image a img,
figure.wp-block-image a img {
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
				filter 0.5s ease;
}

a:hover .wp-block-image img,
.wp-block-image a:hover img,
figure.wp-block-image a:hover img {
	transform: scale(1.04);
}

/* Cover block image overlay polish */
.wp-block-cover::after {
	transition: opacity 0.4s ease;
}

/* Image cards — overflow clip for zoom */
.wp-block-image.is-style-rounded img {
	border-radius: 50%;
}

/* Gallery consistent rounding */
.wp-block-gallery .wp-block-image img {
	border-radius: 8px;
}

/* ==========================================================================
   Cards & surface treatments
   ========================================================================== */

/* Generic card pattern for groups with mist or violet-dark background */
.has-mist-background-color {
	border-radius: 12px;
}

.has-violet-dark-background-color {
	border-radius: 12px;
}

/* Puppy card hover lift — apply to post-template items */
.wp-block-post-template .wp-block-post {
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
				box-shadow 0.35s ease;
	border-radius: 12px;
}

.wp-block-post-template .wp-block-post:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(31, 0, 54, 0.16);
}

/* Puppy name prominence — post titles in grids */
.wp-block-post-template .wp-block-post-title {
	font-weight: 900;
}

.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
	transition: color 0.25s ease;
}

.wp-block-post-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--vermillion);
}

/* ==========================================================================
   Hero / cover block editorial treatments
   ========================================================================== */

/* Diagonal slash accent — hero pattern from reference design */
.wp-block-cover.is-style-hero-slash {
	overflow: hidden;
}

.wp-block-cover.is-style-hero-slash::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 48vw;
	height: 100%;
	background: var(--wp--preset--color--vermillion);
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
	z-index: 1;
	pointer-events: none;
}

/* ==========================================================================
   Activity ribbon — real-time stat strip
   ========================================================================== */

.activity-ribbon {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.activity-ribbon::-webkit-scrollbar {
	display: none;
}

.activity-ribbon > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Pulse dot from reference design */
@keyframes poh-pulse {
	0% { box-shadow: 0 0 0 0 rgba(250, 54, 9, 0.6); }
	70% { box-shadow: 0 0 0 10px rgba(250, 54, 9, 0); }
	100% { box-shadow: 0 0 0 0 rgba(250, 54, 9, 0); }
}

.pulse-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--vermillion);
	animation: poh-pulse 2s infinite;
	vertical-align: middle;
	margin-right: 0.5em;
}

/* ==========================================================================
   Separator styling
   ========================================================================== */

.wp-block-separator {
	opacity: 1;
}

.wp-block-separator:not(.is-style-dots):not(.is-style-wide) {
	border-bottom-width: 2px;
}

/* ==========================================================================
   Quote / pullquote
   ========================================================================== */

.wp-block-quote cite,
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--20);
	display: block;
}

.wp-block-pullquote {
	border-top: 4px solid var(--wp--preset--color--vermillion);
	border-bottom: 4px solid var(--wp--preset--color--vermillion);
}

.wp-block-pullquote blockquote {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--violet);
}

/* ==========================================================================
   Form elements (search, contact, login, registration)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.8em 1.2em;
	border: 2px solid var(--wp--preset--color--muted);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--violet);
	box-shadow: 0 0 0 3px rgba(58, 0, 97, 0.15);
}

.has-violet-background-color input,
.has-violet-dark-background-color input,
.has-violet-background-color textarea,
.has-violet-dark-background-color textarea,
.has-violet-background-color select,
.has-violet-dark-background-color select {
	border-color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.has-violet-background-color input:focus,
.has-violet-dark-background-color input:focus,
.has-violet-background-color textarea:focus,
.has-violet-dark-background-color textarea:focus {
	border-color: var(--wp--preset--color--vermillion);
	box-shadow: 0 0 0 3px rgba(250, 54, 9, 0.25);
}

.has-violet-background-color input::placeholder,
.has-violet-dark-background-color input::placeholder,
.has-violet-background-color textarea::placeholder,
.has-violet-dark-background-color textarea::placeholder {
	color: var(--wp--preset--color--muted);
}

/* Search block */
.wp-block-search__button {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 100px;
	padding: 0.8em 1.5em;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.wp-block-search__button:hover {
	background: var(--wp--preset--color--violet-dark);
	transform: translateY(-2px);
}

/* ==========================================================================
   Table styling
   ========================================================================== */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--muted);
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: left;
	color: var(--wp--preset--color--violet-dark);
}

.wp-block-table tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--mist);
}

/* ==========================================================================
   Post / puppy featured-image overflow clip
   ========================================================================== */

.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 8px;
}

.wp-block-post-featured-image img {
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* ==========================================================================
   Slideshow / gallery transitions
   ========================================================================== */

.wp-block-gallery.has-nested-images figure.wp-block-image {
	border-radius: 12px;
	overflow: hidden;
}

/* ==========================================================================
   Footer polish
   ========================================================================== */

footer .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.25s ease;
}

footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--vermillion);
}

/* Social links in footer */
.wp-block-social-links .wp-social-link {
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.wp-block-social-links .wp-social-link:hover {
	transform: scale(1.15);
	opacity: 0.9;
}

/* ==========================================================================
   Scroll progress / accent bar
   ========================================================================== */

.wp-block-separator.is-style-wide {
	border-bottom: 4px solid var(--wp--preset--color--vermillion);
}

/* ==========================================================================
   Wishlist heart button
   ========================================================================== */

.pups-wishlist-heart {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
				background 0.25s ease,
				box-shadow 0.25s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	color: var(--wp--preset--color--muted);
	padding: 0;
	line-height: 1;
}

.pups-wishlist-heart:hover {
	transform: scale(1.15);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	color: var(--wp--preset--color--vermillion);
}

.pups-wishlist-heart.is-active {
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	box-shadow: 0 4px 16px rgba(250, 54, 9, 0.35);
}

.pups-wishlist-heart.is-active svg {
	fill: var(--wp--preset--color--white);
}

.pups-wishlist-heart.is-active:hover {
	transform: scale(1.15);
	background: var(--wp--preset--color--violet-dark);
}

.pups-wishlist-heart svg {
	width: 20px;
	height: 20px;
	transition: fill 0.25s ease;
}

/* ==========================================================================
   Rehomed badge overlay
   ========================================================================== */

.pups-rehomed-badge {
	position: absolute;
	top: 12px;
	right: 60px;
	z-index: 9;
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	padding: 0.5em 1.1em;
	border-radius: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15em;
	box-shadow: 0 4px 14px rgba(250, 54, 9, 0.35);
	pointer-events: none;
}

.pups-rehomed-badge__text {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.3;
}

.pups-rehomed-badge__location {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0.95;
}

/* ==========================================================================
   Partner badge on puppy cards
   ========================================================================== */

.pups-partner-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35em 0.75em 0.35em 0.35em;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	border-radius: 100px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pups-partner-badge__img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: 50%;
}

.pups-partner-badge__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--violet);
	line-height: 1.2;
}

.pups-partner-badge__sublabel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	display: block;
}

.pups-partner-badge--senior .pups-partner-badge__label {
	color: #9B7B2C;
}

.pups-partner-badge--senior {
	border: 2px solid rgba(155, 123, 44, 0.5);
	background: rgba(255, 248, 220, 0.95);
}

.pups-partner-badge--senior .pups-partner-badge__img {
	width: 36px;
	height: 36px;
}

.pups-partner-badge--medium .pups-partner-badge__label {
	color: #B8860B;
}

.pups-partner-badge--medium {
	border: 1px solid rgba(184, 134, 11, 0.3);
}

.pups-partner-badge--medium .pups-partner-badge__img {
	width: 32px;
	height: 32px;
}

.pups-partner-badge--standard {
	border: 1px solid rgba(56, 0, 97, 0.15);
}

.pups-partner-badge--standard .pups-partner-badge__img {
	width: 24px;
	height: 24px;
}

/* Partner application form — ensure inputs are always interactive */
.pups-partner-application-form input,
.pups-partner-application-form textarea,
.pups-partner-application-form select {
	pointer-events: auto !important;
	-webkit-user-select: text !important;
	user-select: text !important;
}

/* Login form — ensure inputs are always interactive */
.pups-login-form input,
.pups-login-form button {
	pointer-events: auto !important;
	-webkit-user-select: text !important;
	user-select: text !important;
}

/* All wp:html block forms — ensure interactivity */
.wp-block-html form input,
.wp-block-html form textarea,
.wp-block-html form select,
.wp-block-html form button {
	pointer-events: auto !important;
	-webkit-user-select: text !important;
	user-select: text !important;
	-webkit-appearance: none;
}

/* ==========================================================================
   Global form field overflow fix — prevent inputs bleeding into adjacent fields
   ========================================================================== */

/* Every form row/grid cell must clip children and set min-width: 0 so
   flex/grid items containing inputs don't overflow their lane. */
[class*="__row"],
[class*="__fields"],
[class*="__form-row"] {
	min-width: 0;
}

[class*="__row"] > *,
[class*="__fields"] > *,
[class*="__form-row"] > * {
	min-width: 0;
	overflow: hidden;
}

/* Labels that contain inputs must also not overflow */
label[class*="__label"] {
	min-width: 0;
	overflow: hidden;
}

/* Ensure every input/textarea/select inside a custom block form is box-sized */
[class*="pups-"] input,
[class*="pups-"] textarea,
[class*="pups-"] select {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

/* Partner badge positioned on puppy cards */
.pups-partner-badge-wrap {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 8;
}

/* Single puppy page partner badge */
.pups-single-partner-badge {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
}

.pups-single-partner-badge .pups-partner-badge {
	background: var(--wp--preset--color--white);
}

.pups-single-partner-badge .pups-partner-badge__img {
	width: 36px;
	height: 36px;
}

.pups-single-partner-badge .pups-partner-badge__label {
	font-size: 0.7rem;
}

.pups-single-partner-badge .pups-partner-badge__sublabel {
	font-size: 0.55rem;
}

/* Single puppy page rehomed banner */
.pups-single-rehomed-banner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: 8px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.pups-single-rehomed-banner__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.pups-single-rehomed-banner__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.pups-single-rehomed-banner__location {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	opacity: 0.95;
}

/* ==========================================================================
   Hero banner — never-disappear layout
   ========================================================================== */

.pups-hero-columns {
	min-height: 0;
}

.pups-hero-columns .wp-block-columns {
	margin-bottom: 0 !important;
	align-items: stretch;
}

.pups-hero-columns .wp-block-column:first-child {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pups-hero-columns .wp-block-column:first-child .wp-block-image {
	margin-bottom: 0;
	flex: 1;
	display: flex;
}

.pups-hero-columns .wp-block-column:first-child .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 50vh;
	display: block;
	flex: 1;
}

/* Make the text column stretch to match */
.pups-hero-columns .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
}

.pups-hero-columns .wp-block-column:last-child > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 781px) {
	.pups-hero-columns .wp-block-column:first-child .wp-block-image img {
		min-height: 40vh;
		max-height: 55vh;
	}
}

/* ==========================================================================
   Parent photos on single puppy page
   ========================================================================== */

.pups-parent-photo {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.pups-parents-section .pups-parent-photo-placeholder {
	overflow: hidden;
	border-radius: 8px;
}

/* Parent details list — shows breed, DOB, weight, color, registration, health */
.pups-parent-details-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.pups-parent-details-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0.3rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	gap: var(--wp--preset--spacing--20);
}

.pups-parent-details-row:last-child {
	border-bottom: none;
}

.pups-parent-details-row--full {
	flex-direction: column;
	gap: 0.2rem;
}

.pups-parent-details-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.5);
	flex-shrink: 0;
	min-width: 100px;
}

.pups-parent-details-value {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	text-align: right;
	line-height: 1.4;
}

.pups-parent-details-row--full .pups-parent-details-value {
	text-align: left;
	font-weight: 400;
	color: var(--wp--preset--color--mist);
	line-height: 1.6;
}

/* ==========================================================================
   Puppy photo aspect ratio — consistent sizing to prevent warped images
   Recommended upload size: 1080 x 820 (roughly 4:3 landscape)
   ========================================================================== */

.wp-block-post-featured-image img,
.wp-block-post-template .wp-block-post .wp-block-post-featured-image img {
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Puppy cards on archive and homepage — enforce consistent 3:2 crop */
.wp-block-post-template .wp-block-post .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.wp-block-post-template .wp-block-post .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Single puppy page hero — enforce 4:3 aspect on the main image */
.single-pups_puppy .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.single-pups_puppy .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   Upcoming Litters — Reserve Now section
   ========================================================================== */

.pups-upcoming-reserve__loading {
	text-align: center;
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	opacity: 0.7;
	padding: var(--wp--preset--spacing--50) 0;
}

.pups-upcoming-reserve__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 500px) {
	.pups-upcoming-reserve__grid {
		grid-template-columns: 1fr;
	}
}

.pups-upcoming-reserve__card {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
}

.pups-upcoming-reserve__parents {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--violet-dark);
}

.pups-upcoming-reserve__parent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	flex: 1;
	max-width: 160px;
}

.pups-upcoming-reserve__parent-img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--wp--preset--color--vermillion);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.pups-upcoming-reserve__parent-placeholder {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pups-upcoming-reserve__parent-placeholder span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.35);
	text-align: center;
}

.pups-upcoming-reserve__parent-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--vermillion);
	font-weight: 700;
}

.pups-upcoming-reserve__parent-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--wp--preset--color--white);
	text-align: center;
	line-height: 1.2;
}

.pups-upcoming-reserve__parent-x {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.25);
	flex-shrink: 0;
}

.pups-upcoming-reserve__details {
	padding: var(--wp--preset--spacing--40);
	flex: 1;
}

.pups-upcoming-reserve__breed {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--violet-dark);
	margin: 0 0 0.25rem;
	letter-spacing: -0.02em;
}

.pups-upcoming-reserve__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
	color: var(--wp--preset--color--vermillion);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pups-upcoming-reserve__meta {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.pups-upcoming-reserve__meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--wp--preset--color--mist);
}

.pups-upcoming-reserve__meta-row:last-child {
	border-bottom: none;
}

.pups-upcoming-reserve__meta-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pups-upcoming-reserve__meta-value {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--violet-dark);
	font-weight: 700;
}

.pups-upcoming-reserve__info-block {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
	background: var(--wp--preset--color--mist);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: 8px;
	margin-bottom: var(--wp--preset--spacing--20);
}

.pups-upcoming-reserve__info-block strong {
	color: var(--wp--preset--color--violet-dark);
}

.pups-upcoming-reserve__form-wrap {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--violet);
	border-top: 3px solid var(--wp--preset--color--vermillion);
}

.pups-upcoming-reserve__form-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--white);
	margin: 0 0 0.35rem;
}

.pups-upcoming-reserve__form-note {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pups-upcoming-reserve__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.pups-upcoming-reserve__form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 500px) {
	.pups-upcoming-reserve__form-row {
		grid-template-columns: 1fr;
	}
}

.pups-upcoming-reserve__input {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7em 1em;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: #FFFFFF !important;
	color: #0D0015 !important;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.25s ease;
}

.pups-upcoming-reserve__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--vermillion);
}

.pups-upcoming-reserve__input::placeholder {
	color: #C4B8D2 !important;
}

.pups-upcoming-reserve__btn {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 100px;
	padding: 0.9em 2em;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(250, 54, 9, 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.25s ease;
	width: 100%;
}

.pups-upcoming-reserve__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(250, 54, 9, 0.45);
	background: var(--wp--preset--color--violet-dark);
}

.pups-upcoming-reserve__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.pups-upcoming-reserve__status {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	margin: 0;
	min-height: 1.4em;
}

.pups-upcoming-reserve__success {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30) 0;
}

.pups-upcoming-reserve__success-pos {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 900;
	color: var(--wp--preset--color--white);
	line-height: 1;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pups-upcoming-reserve__success-text {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	color: var(--wp--preset--color--white);
}

.pups-upcoming-reserve__success-detail {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.6;
	max-width: 400px;
}

/* ==========================================================================
   Responsive refinements
   ========================================================================== */

@media (max-width: 781px) {
	/* Tighter spacing on mobile */
	.wp-block-post-template .wp-block-post {
		border-radius: 8px;
	}

	.wp-block-columns {
		gap: var(--wp--preset--spacing--30) !important;
	}

	/* Stack activity ribbon vertically on mobile */
	.activity-ribbon {
		flex-direction: row;
		gap: var(--wp--preset--spacing--20);
	}
}

@media (max-width: 600px) {
	/* Further reduce card lift on touch */
	.wp-block-post-template .wp-block-post:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 32px rgba(31, 0, 54, 0.12);
	}

	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

/* ==========================================================================
   Live Chat Widget — bottom right
   ========================================================================== */

.pups-chat-widget {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	font-family: var(--wp--preset--font-family--body);
}

.pups-chat-widget__trigger {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(250, 54, 9, 0.4);
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
				box-shadow 0.3s ease;
}

.pups-chat-widget__trigger:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 28px rgba(250, 54, 9, 0.5);
}

.pups-chat-widget__trigger svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.pups-chat-widget__panel {
	display: none;
	position: absolute;
	bottom: 72px;
	right: 0;
	width: 340px;
	max-height: 480px;
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	flex-direction: column;
}

.pups-chat-widget__panel.is-open {
	display: flex;
}

.pups-chat-widget__header {
	background: var(--wp--preset--color--violet);
	color: var(--wp--preset--color--white);
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pups-chat-widget__header-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.1rem;
	margin: 0;
}

.pups-chat-widget__header-sub {
	font-size: 0.8rem;
	opacity: 0.8;
	margin: 0;
}

.pups-chat-widget__close {
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-size: 1.25rem;
	padding: 0;
	line-height: 1;
}

.pups-chat-widget__body {
	padding: 1.25rem;
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pups-chat-widget__message {
	padding: 0.75rem 1rem;
	border-radius: 12px;
	font-size: 0.9rem;
	line-height: 1.5;
	max-width: 85%;
}

.pups-chat-widget__message--bot {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ink);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.pups-chat-widget__message--user {
	background: var(--wp--preset--color--violet);
	color: var(--wp--preset--color--white);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.pups-chat-widget__quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 1.25rem 0.75rem;
}

.pups-chat-widget__quick-btn {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.4rem 0.85rem;
	border-radius: 100px;
	border: 1px solid var(--wp--preset--color--muted);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--violet);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pups-chat-widget__quick-btn:hover {
	background: var(--wp--preset--color--violet);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--violet);
}

.pups-chat-widget__input-area {
	display: flex;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--wp--preset--color--mist);
	gap: 0.5rem;
}

.pups-chat-widget__input {
	flex: 1;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 100px;
	outline: none;
	transition: border-color 0.2s ease;
}

.pups-chat-widget__input:focus {
	border-color: var(--wp--preset--color--violet);
}

.pups-chat-widget__send {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--vermillion);
	color: var(--wp--preset--color--white);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s ease;
}

.pups-chat-widget__send:hover {
	background: var(--wp--preset--color--violet);
}

.pups-chat-widget__send svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (max-width: 600px) {
	.pups-chat-widget__panel {
		width: calc(100vw - 32px);
		right: -8px;
		bottom: 68px;
		max-height: 70vh;
	}
}

/* ==========================================================================
   Supporters / Partners logo strip
   ========================================================================== */

.pups-supporters-logos .wp-block-image img {
	filter: brightness(0) invert(1);
	opacity: 0.5;
	transition: opacity 0.3s ease, filter 0.3s ease;
	object-fit: contain;
}

.pups-supporters-logos .wp-block-image img:hover {
	opacity: 0.9;
	filter: brightness(0) invert(1);
}

/* ==========================================================================
   Puppy Protection Promise — equal-height orange squares
   ========================================================================== */

.pups-promise-columns .wp-block-columns {
	align-items: stretch;
}

.pups-promise-columns .wp-block-column {
	display: flex;
	flex-direction: column;
}

.pups-promise-columns .wp-block-column > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 180px;
}

@media (max-width: 781px) {
	.pups-promise-columns .wp-block-column > .wp-block-group {
		min-height: 140px;
	}
}

/* ==========================================================================
   Utility: visually hidden (a11y)
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--mist);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--violet-dark);
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Loop layout utilities
   ========================================================================== */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--muted);
	padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--muted);
	opacity: 0.3;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: '';
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--vermillion);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}
@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}

/* ==========================================================================
   Happy Families Slideshow — continuous infinite scroll
   ========================================================================== */

.pups-family-slideshow {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.pups-family-slideshow::before,
.pups-family-slideshow::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 60px;
	z-index: 2;
	pointer-events: none;
}

.pups-family-slideshow::before {
	left: 0;
	background: linear-gradient(to right, var(--wp--preset--color--mist), transparent);
}

.pups-family-slideshow::after {
	right: 0;
	background: linear-gradient(to left, var(--wp--preset--color--mist), transparent);
}

.pups-family-slideshow__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--wp--preset--spacing--30) !important;
	animation: pups-slideshow-scroll 24s linear infinite;
	width: max-content;
}

.pups-family-slideshow__track:hover {
	animation-play-state: paused;
}

.pups-family-slideshow__slide {
	flex: 0 0 280px !important;
	width: 280px !important;
	margin: 0 !important;
}

.pups-family-slideshow__slide img {
	width: 280px !important;
	height: 320px !important;
	object-fit: cover;
	border-radius: 12px;
}

@keyframes pups-slideshow-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@media (max-width: 781px) {
	.pups-family-slideshow__slide {
		flex: 0 0 220px !important;
		width: 220px !important;
	}

	.pups-family-slideshow__slide img {
		width: 220px !important;
		height: 260px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pups-family-slideshow__track {
		animation: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.pups-family-slideshow__slide {
		scroll-snap-align: start;
	}
}