/*
Theme Name: Hooves & Paws
Author: Hooves & Paws Ltd
Description: Block theme for Hooves & Paws Ltd — dog grooming and equine services. Built from the Hooves & Paws design system.
Version: 1.0.7
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hooves-and-paws
*/

/* Brand utility classes (used by the patterns) */

.hp-eyebrow {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-700);
	margin: 0;
}

.has-brown-700-background-color .hp-eyebrow,
.hp-band .hp-eyebrow {
	color: var(--wp--preset--color--green-400);
}

.hp-rule {
	width: 56px;
	height: 3px;
	background: var(--wp--preset--color--tan-500);
	border: 0;
	margin: 0;
}

/* Header */

.hp-header {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	background: rgba(252, 250, 247, 0.92);
	-webkit-backdrop-filter: saturate(120%) blur(10px);
	backdrop-filter: saturate(120%) blur(10px);
	z-index: 20;
}

.hp-brand {
	text-decoration: none;
}

.hp-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--brown-700);
	line-height: 1.1;
	margin: 0;
}

.hp-strapline {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-700);
	line-height: 1.1;
	margin: 0;
}

.hp-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	padding-bottom: 2px;
}

.hp-header .wp-block-navigation a:hover,
.hp-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--brown-700);
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--green-700);
}

/* Cards: white fill, hairline border AND soft shadow, always */

.hp-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--sm);
	overflow: hidden;
}

.hp-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.hp-card--lift {
	transition: box-shadow 220ms cubic-bezier(0.16, 0.84, 0.44, 1), transform 220ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.hp-card--lift:hover {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.hp-price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--brown-700);
}

.hp-price-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	margin: 0;
	font-size: 14px;
}

.hp-price-row:first-of-type {
	border-top: 0;
}

/* Badges */

.hp-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0;
}

.hp-badge--tan { background: var(--wp--preset--color--tan-50); color: #8E5C38; }
.hp-badge--brand { background: var(--wp--preset--color--brown-50); color: var(--wp--preset--color--brown-700); }
.hp-badge--accent { background: var(--wp--preset--color--green-50); color: var(--wp--preset--color--green-800); }

/* Image placeholders: hatched, never a fabricated image. Replace with real photos. */

.hp-ph {
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: repeating-linear-gradient(135deg, var(--wp--preset--color--page-alt) 0 12px, var(--wp--preset--color--tan-50) 12px 24px);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.hp-ph--tall { min-height: 440px; }
.hp-ph--flat { border-radius: 0; border: 0; min-height: 150px; }

/* Portrait */

.hp-portrait { margin: 0; }
.hp-portrait img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--md);
}

.hp-portrait--hero img { height: 560px; object-position: 40% 50%; }

.hp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.hp-gallery-item { margin: 0; }
.hp-gallery-item img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--sm);
}

/* Carousel */

.hp-carousel-controls { display: flex; gap: 8px; }

.hp-carousel-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--brown-700);
	background: transparent;
	color: var(--wp--preset--color--brown-700);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

.hp-carousel-btn:hover:not(:disabled) { background: var(--wp--preset--color--brown-50); }
.hp-carousel-btn:disabled { border-color: var(--wp--preset--color--hairline); color: var(--wp--preset--color--border); cursor: not-allowed; }
.hp-carousel-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(62, 119, 66, 0.28); }

.hp-carousel-track {
	display: flex !important;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 12px;
}

.hp-carousel-track:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(62, 119, 66, 0.28); border-radius: 10px; }

.hp-carousel-slide {
	flex: 0 0 min(86%, 400px);
	scroll-snap-align: start;
	margin: 0;
}

.hp-carousel-slide img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--hairline);
	box-shadow: var(--wp--preset--shadow--sm);
	display: block;
}

.hp-gallery-item--tall img { height: 460px; object-position: 50% 30%; }

/* FAQ accordion */

.hp-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding: 0;
	margin: 0;
}

.hp-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--hairline); }

.hp-faq .wp-block-details summary {
	cursor: pointer;
	padding: 18px 40px 18px 0;
	font-weight: 500;
	color: var(--wp--preset--color--brown-700);
	list-style: none;
	position: relative;
	min-height: 44px;
}

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

.hp-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--wp--preset--color--green-700);
}

.hp-faq .wp-block-details[open] summary::after { content: "\2212"; }
.hp-faq .wp-block-details summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(62, 119, 66, 0.28); border-radius: 6px; }
.hp-faq .wp-block-details > p { margin: 0 0 20px; max-width: 70ch; }

/* Credentials list */

.hp-point-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-50);
	color: var(--wp--preset--color--green-700);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-weight: 600;
}

/* Testimonials on the brown band */

.hp-quote {
	background: rgba(252, 250, 247, 0.06);
	border: 1px solid rgba(252, 250, 247, 0.14);
	border-radius: 10px;
}

.hp-quote-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: 24px;
	align-items: stretch;
}

.hp-quote { display: flex; flex-direction: column; gap: 16px; }
.hp-band-note, .hp-band-note a { color: rgba(252, 250, 247, 0.82); }
.hp-quote p { color: var(--wp--preset--color--page); }
.hp-quote .hp-quote-meta { color: rgba(252, 250, 247, 0.72); font-size: 12px; }
.hp-stars { color: var(--wp--preset--color--tan-300); letter-spacing: 2px; margin: 0; }

/* Footer */

.hp-footer a { color: var(--wp--preset--color--page); }
.hp-footer .hp-footer-meta { color: rgba(252, 250, 247, 0.62); font-size: 12px; }

.hp-logo-disc {
	background: var(--wp--preset--color--page);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	flex: 0 0 auto;
}

.hp-logo-disc img { width: 76px; height: auto; }

/* Contact details */

.hp-contact-line { margin: 0; font-size: 14px; color: var(--wp--preset--color--body); }

@media (max-width: 1100px) {
	.hp-logo img { width: 110px !important; }
	.hp-wordmark { font-size: 21px; }
}

@media (max-width: 781px) {
	.hp-logo img { width: 88px !important; }
	.hp-wordmark { font-size: 20px; }
	.hp-ph--tall { min-height: 280px; }
}

/* Grid children must not inherit the flow-layout top margin */
.hp-service-grid > *,
.hp-quote-grid > *,
.hp-gallery > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hp-carousel-track > * { margin-block-start: 0 !important; }