/*
 * PetConnect – Products by Breed
 * Frontend styles: breed pages, grids, cards, search, FAQ, CTA.
 */

:root {
	/* Falls back to the plugin's own orange only if the theme's Elementor
	   global color variable isn't defined on a given page. */
	--pc-ink: #1f2430;
	--pc-ink-soft: #5b6472;
	--pc-surface: #ffffff;
	--pc-surface-alt: #f6f7f9;
	--pc-border: #e7e9ee;
	--pc-radius-lg: 18px;
	--pc-radius-md: 12px;
	--pc-radius-sm: 8px;
	--pc-shadow: 0 6px 24px rgba(31, 36, 48, 0.08);
	--pc-shadow-hover: 0 12px 32px rgba(31, 36, 48, 0.14);
}

/* No prefers-color-scheme override here on purpose — the site itself has no
   dark mode (background stays white regardless of OS setting), so swapping
   these to light-on-dark values for visitors with system dark mode turned
   the text near-invisible against the still-white page. */

.pc-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

ul.pc-breed-products-list li.product {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Breadcrumbs */
.pc-breadcrumbs {
	font-size: 0.85rem;
	color: var(--pc-ink-soft);
	padding: 14px 20px;
	max-width: 1160px;
	margin: 0 auto;
}

.pc-breadcrumbs a {
	color: var(--pc-ink-soft);
	text-decoration: none;
}

.pc-breadcrumbs a:hover {
	color: var(--e-global-color-primary);
}

.pc-breadcrumb-sep {
	opacity: 0.5;
	margin: 0 2px;
}

/* Hero */
.pc-breed-header {
	position: relative;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 96px 0 56px;
	border-radius: 0 0 32px 32px;
	overflow: hidden;
	background-attachment: fixed;
}

.pc-breed-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 22, 28, 0.15) 0%, rgba(20, 22, 28, 0.75) 100%);
}

.pc-breed-header .pc-container {
	position: relative;
	z-index: 1;
}

.pc-breed-header h1 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin: 0 0 12px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pc-breed-intro {
	max-width: 640px;
	font-size: 1.05rem;
	opacity: 0.95;
}

/* Characteristics */
.pc-breed-content {
	padding: 48px 20px 80px;
}

.pc-breed-content h2 {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--pc-ink);
	margin: 0 0 24px;
}

.pc-characteristics {
	margin-bottom: 48px;
}

.pc-chars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.pc-char-item {
	background: var(--pc-surface-alt);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	padding: 14px 16px;
	color: var(--pc-ink);
}

.pc-char-item strong {
	display: block;
	color: var(--pc-ink-soft);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

/* Description */
.pc-description {
	max-width: 780px;
	line-height: 1.7;
	color: var(--pc-ink);
	margin-bottom: 48px;
}

/* Quick-nav pills — jump to a specific care section without scrolling */
.pc-care-quicknav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 36px;
}

.pc-care-quicknav a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--pc-surface-alt);
	border: 1px solid var(--pc-border);
	color: var(--pc-ink);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.pc-care-quicknav a:hover,
.pc-care-quicknav a:focus-visible {
	background: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	color: #fff;
	transform: translateY(-1px);
}

/* Care sections */
.pc-care-section {
	scroll-margin-top: 24px; /* offset so a jump-link target isn't flush against the viewport top */
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--pc-border);
}

.pc-care-section:last-child {
	border-bottom: none;
}

.pc-care-section h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pc-ink);
	margin-bottom: 8px;
}

.pc-section-desc {
	color: var(--pc-ink-soft);
	margin-bottom: 20px;
	max-width: 720px;
}

.pc-breed-grid-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

.pc-grid-item {
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	box-shadow: var(--pc-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.pc-grid-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--pc-shadow-hover);
}

.pc-grid-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.pc-grid-item img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

.pc-grid-item h4 {
	font-size: 1rem;
	font-weight: 600;
	margin: 12px 14px 4px;
	color: var(--pc-ink);
}

/* Recommended products inside a care section: deliberately NO custom card
   CSS here — content-product.php (WooCommerce's own template) renders these,
   so they inherit the theme's real shop-listing styling untouched. Only the
   carousel layout/controls below are ours. */
.pc-breed-carousel {
	position: relative;
	margin-top: 20px;
}

.pc-breed-products-list {
	display: flex !important; /* the theme's ziggy-woocommerce-style.css loads AFTER this file with an equal/higher-specificity .products rule (display/flex-wrap), so plain declarations lose the cascade — !important is a deliberate, narrow override of just these two layout properties, not a general pattern used elsewhere in this stylesheet. */
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 20px;
	margin: 0;
	padding: 4px 4px 12px;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
}

.pc-breed-products-list::-webkit-scrollbar {
	display: none; /* Chrome/Safari — buttons + touch/trackpad scroll remain */
}

.pc-breed-products-list li.product {
	position: relative;
	flex: 0 0 220px;
	scroll-snap-align: start;
}

.pc-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* The theme's own .add_to_cart_button sits at z-index:99 and overlaps
	   the edge card underneath these arrows — must clear that or clicks
	   land on the product's Add to Cart link instead of the nav button. */
	z-index: 200;
	width: 40px;
	height: 40px;
	border: 1px solid var(--pc-border);
	border-radius: 50%;
	background: var(--pc-surface);
	color: var(--pc-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--pc-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
	padding: 10px;
}

.pc-carousel-nav:hover {
	background: var(--e-global-color-primary);
	color: #fff;
}

.pc-carousel-nav:disabled {
	display: none;
}

.pc-carousel-prev {
	left: -8px;
}

.pc-carousel-next {
	right: -8px;
}

@media (max-width: 640px) {
	/* Buttons overlap card edges on narrow screens — rely on native touch
	   scroll there instead and free up the width for the cards. */
	.pc-carousel-nav {
		display: none;
	}
}

/* FAQ */
.pc-faq {
	margin-bottom: 48px;
}

.pc-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 780px;
}

.pc-faq-item {
	background: var(--pc-surface-alt);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	padding: 4px 18px;
}

.pc-faq-item summary {
	cursor: pointer;
	padding: 14px 0;
	font-weight: 600;
	color: var(--pc-ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pc-faq-item summary::-webkit-details-marker {
	display: none;
}

.pc-faq-item summary::after {
	content: "+";
	font-size: 1.3rem;
	color: var(--e-global-color-primary);
	transition: transform 0.2s ease;
}

.pc-faq-item[open] summary::after {
	transform: rotate(45deg);
}

.pc-faq-answer {
	padding: 0 0 16px;
	color: var(--pc-ink-soft);
	line-height: 1.6;
}

/* Related breeds */
.pc-related-breeds {
	margin-bottom: 48px;
}

/* CTA */
.pc-cta {
	background: linear-gradient(135deg, var(--e-global-color-primary), var(--e-global-color-primary-dark));
	color: #fff;
	border-radius: var(--pc-radius-lg);
	padding: 40px;
	text-align: center;
}

.pc-cta h2 {
	color: #fff;
	margin-bottom: 10px;
}

.pc-cta p {
	opacity: 0.95;
	max-width: 560px;
	margin: 0 auto 20px;
}

.pc-cta-button {
	display: inline-block;
	background: #fff;
	color: var(--e-global-color-primary-dark) !important;
	font-weight: 700;
	padding: 12px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.pc-cta-button:hover {
	transform: scale(1.04);
}

/* Breed search widget */
.pc-breed-search-wrapper {
	position: relative;
	max-width: 420px;
}

.pc-live-breed-search {
	width: 100%;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var(--pc-border);
	background: var(--pc-surface);
	color: var(--pc-ink);
	font-size: 0.95rem;
}

.pc-live-breed-search:focus {
	outline: none;
	border-color: var(--e-global-color-primary);
	box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.2);
}

.pc-search-results {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	box-shadow: var(--pc-shadow-hover);
	z-index: 20;
	overflow: hidden;
}

.pc-search-item a {
	display: block;
	padding: 10px 16px;
	color: var(--pc-ink);
	text-decoration: none;
}

.pc-search-item a:hover {
	background: var(--pc-surface-alt);
	color: var(--e-global-color-primary-dark);
}

.pc-search-empty {
	padding: 12px 16px;
	color: var(--pc-ink-soft);
	font-size: 0.9rem;
}

/* Breed card / featured breed widgets */
.pc-breed-card,
.pc-featured-breed {
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	box-shadow: var(--pc-shadow);
	max-width: 360px;
}

.pc-breed-card .pc-card-image img,
.pc-featured-breed .pc-featured-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.pc-breed-card h3,
.pc-featured-breed h3 {
	margin: 14px 16px 0;
	color: var(--pc-ink);
}

.pc-breed-card .button,
.pc-featured-breed .button {
	display: inline-block;
	margin: 12px 16px 16px;
	background: var(--e-global-color-primary);
	color: #fff !important;
	padding: 8px 16px;
	border-radius: var(--pc-radius-sm);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
}

/* Breed categories widget */
.pc-breed-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pc-breed-category-pill {
	background: var(--pc-surface-alt);
	border: 1px solid var(--pc-border);
	color: var(--pc-ink);
	padding: 8px 16px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

.pc-breed-category-pill:hover {
	background: var(--e-global-color-primary);
	color: #fff;
}

@media (max-width: 640px) {
	.pc-breed-header {
		padding: 72px 0 40px;
		border-radius: 0 0 20px 20px;
	}

	.pc-breed-content {
		padding: 32px 16px 56px;
	}

	.pc-cta {
		padding: 28px 20px;
	}
}

/* ======================================================
   Breed archive (directory) — e.g. /races/. Full-width,
   no theme sidebar/blog widgets; grouped by animal type.
   ====================================================== */
.pc-breed-archive {
	padding: 32px 20px 80px;
}

.pc-archive-intro {
	max-width: 760px;
	margin: 24px 0 48px;
}

.pc-archive-intro h1 {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pc-ink);
	margin: 0 0 12px;
}

.pc-archive-intro p {
	font-size: 1.05rem;
	color: var(--pc-ink-soft);
	margin: 0;
}

.pc-archive-group {
	margin-bottom: 48px;
}

.pc-archive-group h2 {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--pc-ink);
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--pc-border);
}

.pc-grid-item-placeholder {
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	background: var(--pc-surface-alt);
}

.pc-archive-empty {
	color: var(--pc-ink-soft);
	font-size: 1.05rem;
	padding: 40px 0;
}

/* The theme's own site-wide breadcrumb (WooCommerce's woocommerce_breadcrumb(),
   via an Elementor "ziggy-breadcrumb" template) renders on every page, breed
   pages included — its default text color is too low-contrast to read
   clearly. Scoped to breed pages only, so the site-wide template/other pages
   are untouched. */
body.single-pc_breed .woocommerce-breadcrumb,
body.post-type-archive-pc_breed .woocommerce-breadcrumb {
	color: var(--pc-ink);
	font-weight: 500;
	opacity: 1;
}

body.single-pc_breed .woocommerce-breadcrumb a,
body.post-type-archive-pc_breed .woocommerce-breadcrumb a {
	color: var(--pc-ink);
	opacity: 0.7;
}

body.single-pc_breed .woocommerce-breadcrumb a:hover,
body.post-type-archive-pc_breed .woocommerce-breadcrumb a:hover {
	color: var(--e-global-color-primary);
}