/*
Theme Name: Kindling
Theme URI: https://github.com/matchboxdesigngroup/kindling
Author: Matchbox Design Group
Author URI: https://matchboxdesigngroup.com
Description: A modern, responsive, and accessible block theme for WordPress.
Version: 4.0.0
Requires at least: 6.7
Tested up to: 6.7.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kindling
Tags: full-site-editing, block-theme, accessibility-ready, editor-style, block-patterns, responsive-layout

Kindling WordPress Theme, (C) 2025 Matchbox Design Group, LLC.
Kindling is distributed under the terms of the GNU GPL.
*/

/**
 * 1.0 CSS Reset
 *
 * Resetting the CSS to a more sane starting point.
 */

/* Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Allow percentage-based heights in the application. */
html,
body,
.wp-site-blocks {
	min-height: 100%;
}

/* Remove height from the admin bar of the overall height. */
html {
	height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
}

/* Ensure the best type rendering. */
:root {
	font-feature-settings: 'kern';
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

/* Improve text rendering. */
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Improve media defaults. */
img,
picture,
video,
canvas,
svg {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Remove built-in form typography styles. */
input,
button,
textarea,
select {
	font: inherit;
}

/* Avoid text overflows. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
	text-wrap: pretty;
	/* pretty is the nicer result but it isn't supported as well. So balance is here as a fallback */
}

p {
	text-wrap: pretty;
}

/* Create a root stacking context. */
.wp-site-blocks {
	isolation: isolate;
}

/* Ensure the alt text is visible when an image is missing. */
img {
	font-size: 1rem;
	font-style: italic;
	line-height: 1.5;
}

/* Set the scroll behavior to smooth. */
html {
	scroll-behavior: smooth;
}

/* Enable view transitions. */
@view-transition {
	navigation: auto;
}

/* Hide the element visually but keep it accessible to screen readers. */
.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* NKS — image with paw print decoration.
   Per Figma node 32984:12161 (Statewide Movement / Split Content 2) the paw
   straddles the image's right edge: ~70% sits over the lower-right of the image,
   ~30% protrudes past into the column gutter. Visible paw cluster ≈ 177×154px on
   a 686×514 image cell that is itself 92.95% of the 738px column (paw column-width
   ≈ 24%, image column-width ≈ 92.95%, paw bottom ≈ 7.4% from image bottom). The
   same wrapper class is used for Split Content 01 (32929:11049) and Split Content
   4 (32975:312) where the paw protrudes more — those nodes share this anchor. */
.nks-image-with-paw {
	position: relative;
	/* Don't stretch to the grid row height — keep the wrapper at the image's natural
	   height so the paw's bottom: 7.4% lands relative to the image bounds. */
	align-self: center;
}
.nks-image-with-paw > figure.wp-block-image:not(.nks-paw-decoration),
.nks-image-with-paw.is-layout-constrained > figure.wp-block-image:not(.nks-paw-decoration) {
	/* Image leaves ~7% of column on the right so the paw can bleed past its edge.
	   The !important is needed to override WP constrained-layout's auto-centering,
	   which is applied with !important on .is-layout-constrained > :where(...). */
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0 !important;
	margin-right: auto !important;
	width: 92.95%;
	max-width: 100%;
}
.nks-image-with-paw .nks-paw-decoration {
	position: absolute;
	right: 0;
	bottom: 7.4%;
	/* Width is relative to the column (wrapper), not the image — so the paw's right
	   edge sits at the column edge while ~30% of its mass overflows the image. */
	width: 24%;
	max-width: 180px;
	margin: 0;
	pointer-events: none;
	z-index: 2;
}
.nks-image-with-paw .nks-paw-decoration img {
	display: block;
	width: 100%;
	height: auto;
}
/* Default rule — let the photo image fill its figure container even when the
   uploaded asset's natural pixel width is smaller than the column. */
.nks-image-with-paw > figure.wp-block-image:not(.nks-paw-decoration) img {
	width: 100%;
	height: auto;
}

/* NKS Split Content 4 (Historic Milestone) variant — image fills its column
   100% (no internal right gutter); the paw overlaps the image's bottom-right
   and protrudes past the column edge into the column gap. Per Figma
   32984:12182 the paw is 41.26% of image width, overlaps image right by
   20.05%, protrudes 21.21% past image right; paw bottom sits 15.66% of
   image height above the image bottom. */
.nks-image-with-paw--full-width > figure.wp-block-image:not(.nks-paw-decoration),
.nks-image-with-paw--full-width.is-layout-constrained > figure.wp-block-image:not(.nks-paw-decoration) {
	width: 100% !important;
	margin-right: 0 !important;
}
.nks-image-with-paw--full-width .nks-paw-decoration {
	width: 41.26%;
	max-width: 220px;
	right: -21.21%;
	bottom: 15.66%;
}

/* Custom 2-col grid for NKS Split Content 4 — image col fixed at 400px so
   the text col gets ~649px, matching the Figma 32984:12182 wrap point where
   "Becomes a No Kill State!" fits on one line at 56px. The shared
   .nks-split-image-emphasized rule was the wrong fit here (image-emphasized
   1.5fr:1fr). At/above 720px we override; below 720px the existing
   .is-style-kindling-grid-50-50 collapse rule handles single-column stack. */
@media (min-width: 720px) {
	.nks-split-content-4-grid.is-layout-grid {
		grid-template-columns: 400px 1fr !important;
	}
}

@media (max-width: 720px) {
	/* On mobile the column collapses to full width. Keep the image full-bleed and
	   the paw anchored to the image's right edge (no protrusion past the viewport). */
	.nks-image-with-paw > figure.wp-block-image:not(.nks-paw-decoration) {
		width: 100%;
	}
	.nks-image-with-paw .nks-paw-decoration {
		width: 28%;
		max-width: 140px;
	}
	.nks-image-with-paw--full-width .nks-paw-decoration {
		width: 32%;
		max-width: 160px;
		right: 0;
	}
}

/* NKS — CTA frame with brown texture and paw print decoration outside box */
.nks-cta-wrapper {
	position: relative;
}
.nks-cta-wrapper .nks-cta-paw {
	position: absolute;
	right: -32px;
	bottom: -64px;
	width: 132px;
	height: 116px;
	margin: 0;
	pointer-events: none;
	z-index: 2;
}
.nks-cta-wrapper .nks-cta-paw img {
	width: 132px;
	height: 116px;
	object-fit: contain;
}

/* NKS — Video Feature: brown frame with soft-light texture, video card overlapping
   above the frame, paw print at the bottom-left. Mirrors Figma node 32984:12149. */
.nks-video-feature {
	position: relative;
	padding-top: 157px;
}
.nks-video-feature .nks-video-feature-frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0;
}
.nks-video-feature .nks-video-feature-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url("/wp-content/uploads/2026/05/petco-hero-texture-rot90.png");
	background-size: cover;
	background-position-y: 0;
	mix-blend-mode: soft-light;
	opacity: 0.69;
}
.nks-video-feature .nks-video-feature-card {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: min(908px, 67%);
	aspect-ratio: 908 / 480;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	z-index: 2;
}
.nks-video-feature .nks-video-feature-paw {
	position: absolute;
	left: -31px;
	bottom: -32px;
	width: 200px;
	height: 116px;
	margin: 0;
	pointer-events: none;
	z-index: 3;
}
.nks-video-feature .nks-video-feature-paw img {
	width: 200px;
	height: 116px;
	object-fit: contain;
}

@media (max-width: 781px) {
	.nks-video-feature {
		padding-top: 0;
	}
	.nks-video-feature .nks-video-feature-frame {
		min-height: 0 !important;
		padding: 16px !important;
	}
	.nks-video-feature .nks-video-feature-card {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
	}
	.nks-video-feature .nks-video-feature-paw {
		left: auto;
		right: -8px;
		bottom: -40px;
		width: 132px;
		height: 76px;
	}
	.nks-video-feature .nks-video-feature-paw img {
		width: 132px;
		height: 76px;
	}
}

/* Zero the FSE root block-gap that creates a white strip between
   the page's last section and the footer (and between header and main).
   The CSS variable override alone isn't enough — the global-styles rule that
   applies the gap inlines the px value, so override the margin directly. */
.wp-site-blocks {
	--wp--style--block-gap: 0;
}
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Region shelters list — equal-height cards + aligned title/phone/address rows.
   Without these, post-template's grid uses align-items: normal (= start),
   so 1-line-title cards shrink while 2-line-title cards grow, and the
   phone/address rows on different cards in the same row don't align. */
.region-shelters-grid {
	align-items: stretch;
}
.region-shelters-grid .shelter-card {
	align-self: stretch;
}
.region-shelters-grid .shelter-card-arrow {
	/* Lock the arrow circle to a uniform 36×36 across all cards.
	   Without flex-shrink:0, cards with longer shelter names/addresses
	   compress the arrow below its flex-basis. */
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	/* Align with the address row at the bottom of the info column,
	   not the vertical center of the card (matches Figma items-end). */
	align-self: flex-end;
	/* Nudge so the arrow's vertical center matches the address line's
	   center — arrow is taller than the body line-height. */
	margin-bottom: -4px;
}
.region-shelters-grid .shelter-info .wp-block-post-title {
	/* Slightly looser line-height than the heading's inline 1.2 so descenders
	   stay inside the line box on 2-line titles. */
	line-height: 1.3;
	/* Reserve 2 lines of height so titles, phones, and addresses align
	   horizontally across cards in the same row, regardless of how many
	   lines the heading wraps to. */
	min-height: calc(2 * 1.3em);
	/* Guarantee clearance between the heading and the phone row that's
	   independent of descender extents and theme block-gap. */
	margin-bottom: 16px;
}

/* Whole shelter card is a link to the shelter's own website. The post-title
   carries the only <a> (it points at the /shelters/<slug> permalink, which
   302-redirects to des_website — see redirect_single_shelter_to_website()).
   Stretch that <a> over the card so the entire card — logo, info, arrow —
   is the click target. */
.region-shelters-grid .shelter-card {
	position: relative;
	transition: box-shadow 160ms ease, transform 160ms ease;
}
.region-shelters-grid .shelter-card:hover,
.region-shelters-grid .shelter-card:focus-within {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}
.region-shelters-grid .shelter-info .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.region-shelters-grid .shelter-info .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}
.region-shelters-grid .shelter-info .wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--theme-04, #002755);
	outline-offset: 3px;
}

.nks-cta-frame {
	position: relative;
	overflow: hidden;
}
.nks-cta-frame::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	aspect-ratio: 1;
	background: url('../../uploads/2026/05/cta-texture.png') center/cover no-repeat;
	transform: translate(-50%, -50%) rotate(-90deg);
	mix-blend-mode: soft-light;
	opacity: 0.5;
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
}
.nks-cta-frame > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* NKS — feature icon sizing */
.nks-feature-icon {
	margin: 0 0 8px 0;
}
.nks-feature-icon img {
	width: auto;
	max-height: 56px;
	display: block;
}

/* NKS footer — logo and contact layout */
.site-footer-nks .site-footer-row {
	gap: 24px;
}
.site-footer-nks .site-footer-logo {
	margin: 0;
	display: flex;
	align-items: flex-end;
}
.site-footer-nks .site-footer-logo img {
	height: auto;
	max-height: 120px;
	width: auto;
}
.site-footer-nks .site-footer-logo-petco img {
	max-height: 110px;
}
.site-footer-nks .site-footer-contact {
	align-items: flex-end;
	gap: 46px;
}
.site-footer-nks .site-footer-contact-line {
	display: flex;
	align-items: flex-start;
	font-size: 16px;
}
.site-footer-nks .site-footer-contact-line svg {
	flex: 0 0 auto;
	margin-top: 2px;
}
.site-footer-nks .site-footer-divider {
	border-bottom-width: 1px;
	opacity: 0.5;
}
.site-footer-nks .site-footer-legal {
	gap: 24px;
}

/* NKS hero — brown texture overlay, circular image, silhouettes */
.nks-hero {
	position: relative;
	overflow: hidden;
}
.nks-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('../../uploads/2026/05/hero-texture.png') center/cover no-repeat;
	mix-blend-mode: soft-light;
	opacity: 0.69;
	pointer-events: none;
	z-index: 1;
}
.nks-hero > .wp-block-cover__background {
	z-index: 0;
}
.nks-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
.nks-hero .nks-hero-image img {
	border-radius: 9999px;
	object-fit: cover;
}
.nks-hero .nks-hero-silhouettes {
	margin: 0;
}
.nks-hero .nks-hero-silhouettes img {
	height: auto;
	max-width: 100%;
}

/* Home + Region heroes — line-art animal silhouettes (mirrors .nks-hero-silhouettes) */
.home-hero .home-hero-silhouettes,
.region-hero .region-hero-silhouettes {
	margin: 0;
}
.home-hero .home-hero-silhouettes img,
.region-hero .region-hero-silhouettes img {
	height: auto;
	max-width: 100%;
}

/* Pull hero silhouettes flush with the bottom of the hero cover by canceling
   out each cover's padding-bottom. Values match each pattern's actual padding. */
.nks-hero .nks-hero-silhouettes {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--60));
}
.region-hero .region-hero-silhouettes {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--70));
}
/* Home hero cover has padding-bottom: 0 already, so silhouettes are flush
   without compensation. */

/* Region hero — line-art animals injected as background, mirroring
   .pickme-petco-hero::before so region pages match the home hero's
   decorative cartoon animals at the bottom-left of the cover. */
.region-hero {
	position: relative;
	overflow: hidden;
}
.region-hero::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: max(60px, calc(50% - 580px));
	width: min(680px, 50vw);
	height: clamp(120px, 14vw, 180px);
	background-image: url('/wp-content/uploads/2026/05/petco-hero-animals-transparent.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: contain;
	pointer-events: none;
	z-index: 2;
}
.region-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}
@media (max-width: 781px) {
	.region-hero::before {
		left: 50%;
		transform: translateX(-50%);
		width: min(90%, 500px);
	}
}

/* NKS — Figma-styled pill button with arrow circle */
.is-style-pill-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 5px 10px 5px 26px !important;
	border-radius: 9999px;
	line-height: 1.5;
	font-weight: 900;
}
.is-style-pill-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 33px;
	height: 33px;
	flex: 0 0 auto;
	border-radius: 9999px;
	background: #ffffff url('assets/svg/arrow-right-orange.svg') center center no-repeat;
	background-size: 18px 18px;
}

/* ---------------------------------------------------------------- */
/* Mobile-only adjustments for client-review fidelity (2026-05-08).  */
/* ---------------------------------------------------------------- */

/* Home stats section + center-content intro: per Figma mobile
   (32984:10192) both are desktop-only — mobile flows hero → Adoption
   Locations. Hide both below the FSE 782px breakpoint. */
@media (max-width: 781px) {
	.home-stats-section,
	.home-stats,
	.home-center-content {
		display: none !important;
	}
}

/* Home Adoption Locations cards: photo prepended via pattern 46. The image
   block sits inside each circular cover and is centered above the H3. */
.home-location-card-photo {
	margin-top: 0 !important;
	margin-bottom: 8px !important;
}
.home-location-card-photo img {
	display: block;
	margin-inline: auto;
}

/* ----- Utility bar / nav bar mobile layout per Figma 32984:13161 ----- */
@media (max-width: 781px) {
	.site-utility-bar {
		padding: 12px 24px !important;
	}
	.site-utility-bar .utility-bar-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px !important;
	}
	.site-utility-bar .utility-bar-info {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px !important;
	}
	.site-utility-bar .utility-divider {
		display: none;
	}
	.site-utility-bar .utility-socials {
		display: none;
	}
	.site-nav-bar {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.site-nav-bar .site-logo img {
		width: 144px !important;
	}
}

/* ----- Mobile navigation overlay: matches Figma 32984:12250 -----
   Rhythm:
     – outer padding 24px  – logo→first item 32px
     – top-level items 32px gap  – submenu items 16px gap
     – first sub under parent 16px gap (matches submenu rhythm)
*/
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #ffffff;
	padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 24px;
	display: block !important;
	width: 100%;
	max-width: 100%;
	text-align: left !important;
}
/* The close (X) icon — pin to top-right of the overlay, navy brand color */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	color: #002755;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 24px !important;
	right: 24px !important;
	z-index: 100;
}
/* The hamburger open trigger — navy bars per Figma */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-open {
	color: #002755;
}
/* Stack menu items vertically with Figma sizing/spacing.
   The Navigation block's flex layout normally right-justifies on desktop
   (justifyContent:"right" in the block attrs); force left-align on mobile. */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	text-align: left;
}
/* The Navigation block's layout adds .items-justified-right on the UL when
   the parent has justifyContent:"right" (used for desktop). Force-reset
   alignment on mobile so menu items start at the left edge. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .items-justified-right {
	align-items: flex-start !important;
	justify-content: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	justify-content: flex-start !important;
}
/* Each <li> is a column flex container with align-items: flex-end (cascaded
   from the parent Navigation block's justifyContent:"right"). On mobile the
   anchor needs to start at the left edge of the li, not the right. */
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-link,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	font-family: var(--wp--preset--font-family--area-normal-black);
	font-weight: 900;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #002755 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* Submenu chevron: keep on the same line as the label, match navy */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	color: #002755;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 16px;
	height: 16px;
}
/* Inline submenu when expanded: indent + lighter weight.
   Top padding (16px) creates the gap between parent label and first sub-item;
   gap (16px) sets the rhythm between sub-items — matches the visual block. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 16px 0 0 16px !important;
	gap: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}
/* Mobile menu logo: when the overlay is open, repeat the site logo at the top
   so the menu visually matches the Figma. The ::before sits inside the open
   container; the gap below it (32px) matches the top-level item rhythm so
   "logo → first item" feels like the same beat as item-to-item. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	width: 144px;
	height: 56px;
	margin: 0 0 32px 0;
	background: url('../../uploads/2026/05/petco-love-pickmesc-logo.png') left center / contain no-repeat;
}