/**
 * Peti Food – Main styles
 * Tailwind is built locally (npm run build); fonts are local (npm run copy-fonts).
 */

:root {
	--petifood-primary: #6ee619;
	--petifood-primary-dark: #5bc215;
	--petifood-bg-light: #f7f8f6;
	--petifood-bg-dark: #182111;
	--petifood-text-secondary: #64748b;
}

/* Base */
body.petifood-body {
	font-family: 'Vazirmatn', 'Plus Jakarta Sans', sans-serif;
	direction: rtl;
	background-color: var(--petifood-bg-light);
}
body.dark,
.dark body.petifood-body {
	background-color: var(--petifood-bg-dark);
}

/* Layout */
.petifood-wrap {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.site-main {
	flex: 1;
}

.container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 1024px) {
	.container { padding-left: 2rem; padding-right: 2rem; }
}

/* Accessibility */
.skip-link.screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.skip-link:focus {
	clip: auto;
	height: auto;
	width: auto;
	display: block;
	padding: 0.5rem 1rem;
	background: var(--petifood-primary);
	color: #fff;
	z-index: 100000;
}

/* Links and buttons */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Prose for content */
.prose { max-width: 65ch; }
.prose.max-w-none { max-width: none; }
.prose p { margin-bottom: 1em; }
.prose h2 { font-size: 1.5rem; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose ul, .prose ol { padding-right: 1.5em; }

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/*
 * Primary nav row: نمایش از md به بالا.
 * قبلاً از Tailwind `hidden md:block` استفاده می‌شد؛ کلاس `md:block` در build محلی tailwind.css تولید نشده بود
 * و در نتیجه منو همیشه display:none می‌ماند.
 */
.petifood-primary-nav {
	display: none;
}
@media (min-width: 768px) {
	.petifood-primary-nav {
		display: block;
	}
}

/* Site logo (header / footer / mobile) — raster + SVG */
.petifood-site-logo,
.site-branding .custom-logo-link,
.site-footer .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	max-width: 100%;
	text-decoration: none;
}
.petifood-site-logo__img,
.site-branding .custom-logo,
.site-footer .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}
/* Header logo — fixed dimensions (mobile vs desktop) */
.site-header .site-branding {
	flex-shrink: 1;
	min-width: 0;
	max-width: 8.5rem;
}
.site-header .site-branding .petifood-site-logo,
.site-header .site-branding .custom-logo-link {
	flex-shrink: 1;
	min-width: 0;
	max-width: 100%;
}
.site-header .site-branding .petifood-site-logo__img,
.site-header .site-branding .custom-logo,
.petifood-site-logo--size-header .petifood-site-logo__img {
	width: auto;
	height: 2rem;
	max-width: 8.5rem;
	max-height: none;
	object-fit: contain;
	object-position: right center;
}
@media (min-width: 768px) {
	.site-header .site-branding {
		max-width: 10.5rem;
	}
	.site-header .site-branding .petifood-site-logo__img,
	.site-header .site-branding .custom-logo,
	.petifood-site-logo--size-header .petifood-site-logo__img {
		height: 2.75rem;
		max-width: 10.5rem;
	}
}

.petifood-site-logo--size-footer .petifood-site-logo__img,
.site-footer .custom-logo {
	max-height: 2.5rem;
}
.petifood-site-logo--size-mobile .petifood-site-logo__img {
	max-height: 2.5rem;
}