/* ============================================
   LAYOUT & COMPONENTS
   ============================================ */

.site-content {
	min-height: calc(100vh - 200px);
}

.page-container {
	padding: var(--spacing-2xl) 0;
}

/* HERO SECTION */
.hero {
	padding: var(--spacing-2xl) 0;
	color: var(--color-white);
	position: relative;
	overflow: hidden;
}

.hero-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-2xl);
	align-items: center;
}

.hero-content {
	z-index: 2;
}

.hero-title {
	font-size: 3.5rem;
	margin-bottom: var(--spacing-md);
	line-height: 1.1;
	color: var(--color-white);
}

.hero-subtitle {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-xl);
	color: var(--color-cream);
	line-height: 1.6;
}

.hero-buttons {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.hero-image {
	position: relative;
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* TRUST STRIP */
.trust-strip {
	background-color: var(--color-white);
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
}

.trust-item {
	text-align: center;
}

.trust-icon {
	font-size: 2.5rem;
	display: block;
	margin-bottom: var(--spacing-md);
}

.trust-item h3 {
	margin-bottom: var(--spacing-sm);
	font-size: 1.25rem;
}

.trust-item p {
	color: #666;
	margin: 0;
}

/* PUPPIES SECTION */
.puppies-section {
	background-color: var(--color-cream);
}

.section-header {
	margin-bottom: var(--spacing-2xl);
}

.section-title {
	margin-bottom: var(--spacing-md);
	text-align: center;
}

.section-subtitle {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.puppies-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.no-puppies {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-2xl);
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	color: #666;
}

/* PUPPY CARD */
.puppy-card {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.puppy-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-8px);
}

.puppy-image {
	width: 100%;
	height: 250px;
	overflow: hidden;
	background-color: var(--color-light-gray);
}

.puppy-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
}

.puppy-card:hover .puppy-image img {
	transform: scale(1.05);
}

/* POODLE PUPPIES PAGE */
.poodle-page {
	background-color: var(--color-forest-green);
}

.poodle-page-header {
	max-width: 720px;
	margin: 0 auto var(--spacing-2xl);
	text-align: center;
}

.poodle-page-header .page-title,
.poodle-page-header .page-subtitle,
.poodle-page-header .page-kicker {
	color: var(--color-white);
}

.page-kicker {
	margin-bottom: var(--spacing-xs);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.poodle-puppies-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
	padding-bottom: var(--spacing-2xl);
}

.poodle-puppy-card {
	min-width: 0;
}

.puppy-placeholder {
	display: grid;
	place-items: center;
	height: 250px;
	background: linear-gradient(145deg, #d9c8ab, #f6eee0);
	color: var(--color-forest-green);
	font-family: var(--font-heading);
	font-size: 4rem;
}

.puppy-placeholder span {
	transform: translateY(-4px);
}

.poodle-puppy-card .puppy-content {
	text-align: center;
}

.poodle-puppy-card .puppy-name {
	margin-bottom: var(--spacing-sm);
}

.puppy-description {
	min-height: 3.2em;
	margin-bottom: var(--spacing-md);
	color: #666;
	font-size: 0.95rem;
}

.poodle-puppy-card .puppy-details {
	margin-bottom: var(--spacing-lg);
}

.poodle-puppy-card .puppy-details p {
	margin-bottom: 0.25rem;
}

.poodle-contact-button {
	width: 100%;
}

.puppy-content {
	padding: var(--spacing-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.puppy-name {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-dark-text);
}

.puppy-name a {
	text-decoration: none;
	color: var(--color-navy);
	transition: var(--transition);
}

.puppy-name a:hover {
	color: var(--color-gold);
}

.puppy-details {
	flex: 1;
	margin-bottom: var(--spacing-md);
}

.puppy-details p {
	margin-bottom: var(--spacing-sm);
	font-size: 0.95rem;
	color: #666;
}

.puppy-details strong {
	color: var(--color-navy);
}

.puppy-actions {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.puppy-actions .btn {
	flex: 1;
	min-width: 120px;
	text-align: center;
}

/* RESPONSIBLE ADOPTION SECTION */
.adoption-responsibility {
	background-color: var(--color-white);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
}

.feature-block {
	text-align: center;
	padding: var(--spacing-lg);
	border-radius: var(--border-radius);
	background-color: var(--color-cream);
	transition: var(--transition);
}

.feature-block:hover {
	background-color: #f0e8d8;
	box-shadow: var(--shadow-md);
}

.feature-icon {
	font-size: 3rem;
	display: block;
	margin-bottom: var(--spacing-md);
}

.feature-block h3 {
	margin-bottom: var(--spacing-md);
	font-size: 1.25rem;
}

.feature-block p {
	color: #666;
	margin: 0;
}

/* HOW ADOPTION WORKS SECTION */
.how-adoption-works {
	background-color: var(--color-cream);
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
}

.step-item {
	text-align: center;
	padding: var(--spacing-lg);
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-sm);
	position: relative;
	transition: var(--transition);
}

.step-item:hover {
	box-shadow: var(--shadow-md);
}

.step-number {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--color-gold) 0%, #b8935a 100%);
	color: var(--color-navy);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 auto var(--spacing-md);
}

.step-item h3 {
	margin-bottom: var(--spacing-sm);
	font-size: 1.125rem;
}

.step-item p {
	margin: 0;
	color: #666;
	font-size: 0.95rem;
}

/* ABOUT SECTION */
.about-us {
	background-color: var(--color-white);
}

.about-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
	align-items: center;
}

.about-text h2 {
	margin-bottom: var(--spacing-lg);
}

.about-text p {
	color: #666;
	line-height: 1.8;
	margin-bottom: var(--spacing-lg);
}

/* TESTIMONIALS SECTION */
.testimonials {
	background-color: var(--color-cream);
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
}

.testimonial-card {
	background-color: var(--color-white);
	padding: var(--spacing-lg);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
}

.testimonial-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.stars {
	font-size: 1.125rem;
	margin-bottom: var(--spacing-md);
}

.testimonial-text {
	color: #666;
	line-height: 1.8;
	margin-bottom: var(--spacing-md);
	font-size: 0.95rem;
	font-style: italic;
}

.testimonial-author {
	margin: 0;
	font-weight: 600;
	color: var(--color-navy);
}

/* CONTACT CTA SECTION */
.contact-cta {
	padding: var(--spacing-2xl) 0;
}

.contact-cta-content h2 {
	margin-bottom: var(--spacing-md);
}

.contact-buttons {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	margin: var(--spacing-xl) 0;
	flex-wrap: wrap;
}

.contact-buttons .btn {
	min-width: 200px;
}

.contact-form-wrapper {
	margin-top: var(--spacing-2xl);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(255, 255, 255, 0.1);
	padding: var(--spacing-xl);
	border-radius: var(--border-radius);
	backdrop-filter: blur(10px);
}

.contact-form-wrapper h3 {
	color: var(--color-white);
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

/* CONTACT PAGE */
.contact-page {
	background: linear-gradient(135deg, #071026 0%, #172300 100%);
}

.contact-page-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--spacing-2xl);
	align-items: stretch;
	max-width: 1100px;
	margin: 0 auto;
}

.contact-page-intro {
	padding: var(--spacing-xl) 0;
	color: rgba(255, 255, 255, 0.82);
}

.contact-page-intro h1 {
	margin-bottom: var(--spacing-lg);
	color: var(--color-white);
	font-size: 2.35rem;
}

.contact-page-intro p {
	margin-bottom: var(--spacing-md);
	line-height: 1.8;
}

.contact-page-intro .page-kicker {
	color: var(--color-gold);
}

.contact-page-details {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-page-details a {
	color: var(--color-gold);
}

.contact-page-form {
	align-self: center;
	padding: var(--spacing-xl);
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-lg);
}

.contact-page-form h2 {
	margin-bottom: var(--spacing-xs);
	color: var(--color-navy);
	font-size: 1.7rem;
}

.contact-form-lead {
	margin-bottom: var(--spacing-lg);
	color: #666;
}

.contact-page-form .form-row {
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.contact-page-form .form-group {
	margin-bottom: var(--spacing-md);
}

.contact-page-form .adoption-form label {
	margin-bottom: 0.35rem;
	color: var(--color-navy);
	font-size: 0.85rem;
}

.contact-page-form .adoption-form input,
.contact-page-form .adoption-form textarea,
.contact-page-form .adoption-form select {
	padding: 9px 11px;
	font-size: 0.92rem;
}

.contact-page-form .adoption-form textarea {
	min-height: 105px;
	resize: vertical;
}

.contact-page-form .adoption-form .checkbox-wrapper {
	color: #555;
	font-size: 0.8rem;
}

.contact-page-form .adoption-form .checkbox-wrapper label {
	color: #555;
}

.contact-page-form .adoption-form .btn {
	padding: 11px 24px;
}

/* ADOPTION FORM */
.adoption-form {
	margin: 0;
}

.form-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

.form-group {
	margin-bottom: var(--spacing-lg);
}

.adoption-form label {
	color: var(--color-white);
	font-weight: 600;
	margin-bottom: var(--spacing-sm);
	display: block;
}

.adoption-form input,
.adoption-form textarea,
.adoption-form select {
	background-color: rgba(255, 255, 255, 0.95);
	border: 1px solid #ddd;
	color: var(--color-dark-text);
}

.adoption-form input:focus,
.adoption-form textarea:focus,
.adoption-form select:focus {
	background-color: var(--color-white);
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 92, 0.1);
}

.adoption-form .checkbox-wrapper {
	color: var(--color-cream);
}

.adoption-form .checkbox-wrapper a {
	color: var(--color-gold);
}

.form-message {
	padding: var(--spacing-lg);
	border-radius: var(--border-radius);
	text-align: center;
	color: var(--color-white);
}

.form-message.success {
	background-color: rgba(34, 139, 34, 0.2);
	border: 1px solid #228b22;
}

.form-message.error {
	background-color: rgba(220, 20, 60, 0.2);
	border: 1px solid #dc143c;
}

/* POSTS GRID */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.post-item {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	height: 100%;
}

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

.post-thumbnail {
	width: 100%;
	height: 200px;
	overflow: hidden;
	background-color: var(--color-light-gray);
}

.post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
}

.post-item:hover .post-thumbnail img {
	transform: scale(1.05);
}

.entry-header {
	padding: var(--spacing-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.entry-title {
	font-size: 1.375rem;
	margin-bottom: var(--spacing-md);
}

.entry-title a {
	color: var(--color-navy);
	text-decoration: none;
	transition: var(--transition);
}

.entry-title a:hover {
	color: var(--color-gold);
}

.entry-content {
	flex: 1;
	color: #666;
}

.entry-content p {
	margin-bottom: var(--spacing-md);
	line-height: 1.6;
}

/* 404 PAGE */
.error-404-wrapper {
	padding: var(--spacing-2xl) var(--spacing-lg);
}

.error-404-wrapper .page-title {
	font-size: 2rem;
	margin-bottom: var(--spacing-lg);
}

.error-404-wrapper .error-code {
	font-size: 6rem;
	font-weight: 700;
	color: var(--color-gold);
	margin: var(--spacing-xl) 0;
	opacity: 0.3;
}

.error-404-wrapper p {
	color: #666;
	margin-bottom: var(--spacing-lg);
}

/* PAGE HEADER */
.page-header {
	margin-bottom: var(--spacing-2xl);
	padding-bottom: var(--spacing-lg);
	border-bottom: 2px solid var(--color-beige);
}

.page-title {
	margin: 0;
	font-size: 2.5rem;
}

.archive-header {
	margin-bottom: var(--spacing-2xl);
}

.archive-description {
	color: #666;
	margin-top: var(--spacing-md);
}

/* SINGLE POST PAGE */
.single-post-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.entry-image {
	margin-bottom: var(--spacing-xl);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.entry-image img {
	width: 100%;
	height: auto;
	display: block;
}

.entry-meta {
	display: flex;
	gap: var(--spacing-lg);
	color: #999;
	font-size: 0.9rem;
	margin-bottom: var(--spacing-lg);
}

.entry-meta a {
	color: var(--color-gold);
}

.entry-footer {
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-lg);
	border-top: 1px solid #ddd;
}

.cat-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.cat-links a {
	display: inline-block;
	background-color: var(--color-beige);
	padding: 6px 12px;
	border-radius: 20px;
	text-decoration: none;
	color: var(--color-navy);
	transition: var(--transition);
}

.cat-links a:hover {
	background-color: var(--color-gold);
	color: var(--color-navy);
}

/* SEARCH PAGE */
.search-form {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-xl);
}

.search-input {
	flex: 1;
	padding: 12px 16px;
	border: 2px solid #ddd;
	border-radius: var(--border-radius);
	font-family: var(--font-primary);
	font-size: 1rem;
	transition: var(--transition);
}

.search-input:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 92, 0.1);
}

.search-button {
	padding: 12px 32px;
	background-color: var(--color-navy);
	color: var(--color-white);
	border: none;
	border-radius: var(--border-radius);
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
}

.search-button:hover {
	background-color: var(--color-forest-green);
}

/* COMMENTS */
.comments-area {
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-2xl);
	border-top: 2px solid var(--color-beige);
}

.comments-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-lg);
}

.comment-list {
	list-style: none;
	margin-bottom: var(--spacing-xl);
}

.comment-body {
	background-color: var(--color-cream);
	padding: var(--spacing-lg);
	border-radius: var(--border-radius);
	margin-bottom: var(--spacing-lg);
}

.comment-author {
	font-weight: 600;
	margin-bottom: var(--spacing-sm);
}

.no-comments {
	color: #666;
	font-size: 1.1rem;
	text-align: center;
	padding: var(--spacing-xl);
}

/* POSTS NAVIGATION */
.posts-navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-xl);
	border-top: 2px solid var(--color-beige);
}

.posts-navigation a {
	padding: var(--spacing-md) var(--spacing-lg);
	background-color: var(--color-white);
	border: 2px solid var(--color-gold);
	border-radius: var(--border-radius);
	color: var(--color-gold);
	text-decoration: none;
	font-weight: 600;
	transition: var(--transition);
	flex: 1;
	text-align: center;
}

.posts-navigation a:hover {
	background-color: var(--color-gold);
	color: var(--color-navy);
}