/* ==========================================================================
   Archives & Specialty Pages — Lee's Supper Club
   --------------------------------------------------------------------------
   Styles for archive.php, category.php, search.php, 404.php,
   page-recipes.php, page-about.php, page-contact.php, and page.php.

   Contents:
     1.  Archive Hero Band
     2.  Recipe Grid
     3.  Post Cards
     4.  Pagination
     5.  Browse by Category Circles
     6.  No Results / Empty State
     7.  About Page
     8.  Contact Page
     9.  404 Page
    10.  Generic Page Content
   ========================================================================== */


/* ==========================================================================
   1. Archive Hero Band
   ========================================================================== */

.archive-hero {
	background: var(--page-hero-bg, var(--color-teal));
	color: var(--page-hero-text, var(--color-white));
	padding: var(--space-xl) 0;
	text-align: center;
}

.archive-hero h1,
.archive-hero .page-title {
	font-size: 2rem;
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-xs);
	color: var(--color-white);
}

.archive-hero .archive-description,
.archive-hero .page-description {
	opacity: 0.9;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.archive-hero .archive-description p:last-child {
	margin-bottom: 0;
}

/* Left-aligned variant (category pages) */
.archive-hero--left {
	text-align: left;
}

.archive-hero--left .archive-description {
	max-width: 720px;
	margin: 0;
}

.archive-hero .breadcrumbs {
	font-size: 0.85rem;
	opacity: 0.8;
	margin-bottom: var(--space-sm);
}

.archive-hero .breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
}

.archive-hero .breadcrumbs .breadcrumb-separator {
	margin: 0 0.4em;
	opacity: 0.7;
}

.archive-hero .breadcrumbs a {
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.archive-hero .breadcrumbs a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   2. Recipe Grid
   ========================================================================== */

.recipe-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
	gap: var(--space-md);
	padding: var(--space-2xl) 0;
}


/* ==========================================================================
   3. Post Cards
   ========================================================================== */

.post-card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	text-decoration: none;
	cursor: pointer;
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Thumbnail */
.post-card .post-thumbnail-link {
	display: block;
	overflow: hidden;
}

.post-card .post-thumbnail img,
.post-card .post-thumbnail .post-thumbnail__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	transition: transform var(--transition-base);
}

.post-card:hover .post-thumbnail img,
.post-card:hover .post-thumbnail .post-thumbnail__img {
	transform: scale(1.03);
}

.post-card .post-thumbnail--placeholder {
	aspect-ratio: 4 / 3;
}

.post-card .post-thumbnail--placeholder svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Card content */
.post-card .card-content {
	padding: var(--space-sm);
}

.post-card .category-badge {
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: var(--fw-medium);
	color: var(--color-teal);
	text-decoration: none;
	margin-bottom: var(--space-xs);
}

.post-card .category-badge:hover,
.post-card .category-badge:focus-visible {
	text-decoration: underline;
}

.post-card .card-title {
	font-weight: var(--fw-medium);
	font-size: 1rem;
	margin-bottom: var(--space-xs);
	line-height: 1.4;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.post-card .card-title a {
	color: var(--color-black);
	text-decoration: none;
}

/* Stretch title link over entire card for full-card clickability */
.post-card .card-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.post-card .card-title a:hover,
.post-card .card-title a:focus-visible {
	color: var(--color-teal);
}

/* Category badge stays independently clickable (above the overlay) */
.post-card .category-badge {
	position: relative;
	z-index: 2;
}

.post-card .card-excerpt {
	font-size: 0.9rem;
	color: var(--color-gray);
	line-height: 1.5;
}

.post-card .card-excerpt p {
	margin: 0;
}


/* ==========================================================================
   4. Pagination
   ========================================================================== */

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-lg) 0 var(--space-2xl);
}

.pagination ul.page-numbers {
	list-style: none;
	display: flex;
	gap: var(--space-xs);
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
	justify-content: center;
}

.pagination .page-numbers li {
	display: inline-block;
}

.pagination .page-numbers li > a,
.pagination .page-numbers li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--color-gray-light);
	border-radius: 4px;
	text-decoration: none;
	color: var(--color-black);
	font-weight: var(--fw-medium);
	font-size: 0.9rem;
	transition: all var(--transition-fast);
	overflow: hidden;
}

.pagination .page-numbers li > a:hover,
.pagination .page-numbers li > a:focus-visible {
	background: var(--color-teal);
	color: var(--color-white);
	border-color: var(--color-teal);
}

.pagination .page-numbers .current {
	background: var(--color-teal);
	color: var(--color-white);
	border-color: var(--color-teal);
}

.pagination .page-numbers .dots {
	border: none;
	color: var(--color-gray);
}


/* ==========================================================================
   5. Browse by Category Circles (Recipes Page)
   ========================================================================== */

.browse-categories-section {
	padding: var(--space-2xl) 0 var(--space-lg);
}

.browse-categories {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-lg);
}

/* Reuse .category-circle styles from homepage.css.
   Add recipe-page-specific overrides here. */
.browse-categories .category-circle {
	text-align: center;
	text-decoration: none;
	color: var(--color-black);
}

.browse-categories .circle-image {
	width: 120px;
	height: 120px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto var(--space-xs);
}

.browse-categories .circle-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.browse-categories .category-circle:hover .circle-image img,
.browse-categories .category-circle:focus-visible .circle-image img {
	transform: scale(1.08);
}

.browse-categories .circle-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gray-light);
	border-radius: 50%;
}

.browse-categories .circle-placeholder span {
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: 1.8rem;
	color: var(--color-gray);
}

.browse-categories .circle-name {
	display: block;
	font-weight: var(--fw-medium);
	font-size: 0.9rem;
}


/* ==========================================================================
   6. No Results / Empty State
   ========================================================================== */

.no-results {
	text-align: center;
	padding: var(--space-3xl) 0;
	max-width: var(--content-width);
	margin: 0 auto;
}

.no-results h2 {
	font-size: 1.5rem;
	margin-bottom: var(--space-sm);
}

.no-results p {
	color: var(--color-gray);
	margin-bottom: var(--space-lg);
	line-height: 1.6;
}

.no-results .search-form {
	max-width: 400px;
	margin: 0 auto;
}


/* ==========================================================================
   7. About Page
   ========================================================================== */

/* Hero with teal band behind featured image */
.page-about .about-hero {
	position: relative;
	padding-bottom: var(--space-2xl);
}

.page-about .about-hero__teal-band {
	background: var(--color-teal);
	height: 300px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
}

.page-about .about-hero .container {
	position: relative;
	z-index: 1;
}

.page-about .about-hero__image-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: var(--space-xl);
}

.page-about .about-hero__image {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.page-about .about-hero__placeholder {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.page-about .about-hero__placeholder svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Bio section */
.about-bio {
	padding: var(--space-2xl) 0;
}

.about-bio__content {
	max-width: var(--content-width);
	margin: 0 auto;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.8;
}

/* "Meet Lee" heading in script font */
.about-bio__content h2:first-child,
.about-bio .meet-lee-heading {
	font-family: 'LadyClementineScript', var(--font-primary);
	font-size: 2.5rem;
	font-weight: normal;
	margin-bottom: var(--space-md);
}

.about-bio__content p {
	margin-bottom: var(--space-md);
}

/* Photo band with pomegranate pattern */
.about-photo-band {
	position: relative;
	padding: var(--space-3xl) 0;
	overflow: visible;
}

.about-photo-band__pattern {
	position: absolute;
	top: var(--space-xl);
	left: 0;
	right: 0;
	bottom: var(--space-xl);
	background-color: var(--color-pink);
	/* Pomegranate-inspired pattern — matches homepage about-banner */
	background-image:
		radial-gradient(circle 40px at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
		radial-gradient(circle 25px at 60% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 70%),
		radial-gradient(circle 35px at 80% 60%, rgba(255, 255, 255, 0.07) 0%, transparent 70%),
		radial-gradient(circle 20px at 40% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
		radial-gradient(circle 30px at 10% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 70%),
		radial-gradient(circle 45px at 90% 15%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
		radial-gradient(ellipse 8px 12px at 50% 50%, rgba(160, 27, 34, 0.12) 0%, transparent 100%),
		repeating-radial-gradient(
			circle at 25px 25px,
			transparent 0px,
			transparent 18px,
			rgba(255, 255, 255, 0.03) 18px,
			rgba(255, 255, 255, 0.03) 20px
		);
	background-size:
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		50px 50px,
		50px 50px;
	z-index: 0;
}

.about-photo-band .container {
	position: relative;
	z-index: 1;
}

.about-photo-band__images {
	display: flex;
	justify-content: center;
	gap: var(--space-lg);
	max-width: 900px;
	margin: 0 auto;
}

.about-photo-band__photo {
	flex: 1;
	max-width: 280px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Offset photos to break out of the band edges */
.about-photo-band__photo--1 {
	transform: translateY(-20px);
}

.about-photo-band__photo--2 {
	transform: translateY(20px);
}

.about-photo-band__photo--3 {
	transform: translateY(-10px);
}

.about-photo-band__photo img {
	width: 100%;
	height: auto;
	display: block;
}

.about-photo-band__photo .photo-placeholder {
	background: var(--color-gray-light);
}

.about-photo-band__photo .photo-placeholder svg {
	width: 100%;
	height: auto;
	display: block;
}


/* ==========================================================================
   8. Contact Page
   ========================================================================== */

.page-contact .contact-form-wrapper {
	max-width: 600px;
	margin: 0 auto;
	padding: var(--space-2xl) 0;
}

.page-contact .contact-form .form-field {
	margin-bottom: var(--space-md);
}

.page-contact .contact-form label {
	display: block;
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-xs);
	font-size: 0.9rem;
}

.page-contact .contact-form .required {
	color: var(--color-red);
}

.page-contact .contact-form input[type="text"],
.page-contact .contact-form input[type="email"],
.page-contact .contact-form textarea {
	width: 100%;
	padding: var(--space-sm);
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: var(--font-primary);
	font-size: 1rem;
	transition: border-color var(--transition-fast);
	box-sizing: border-box;
}

.page-contact .contact-form input:focus,
.page-contact .contact-form textarea:focus {
	border-color: var(--color-teal);
	outline: none;
}

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

.page-contact .contact-form .form-submit {
	text-align: center;
	margin-top: var(--space-lg);
}

.page-contact .contact-form .submit {
	display: inline-block;
	background: var(--color-teal);
	color: var(--color-white);
	padding: var(--space-sm) var(--space-xl);
	border: none;
	border-radius: 4px;
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: 1rem;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.page-contact .contact-form .submit:hover,
.page-contact .contact-form .submit:focus-visible {
	background: var(--color-black);
}


/* ==========================================================================
   9. 404 Page
   ========================================================================== */

.error-404-content {
	text-align: center;
	padding: var(--space-3xl) 0;
	max-width: var(--content-width);
	margin: 0 auto;
}

.error-404-title {
	font-size: 2.5rem;
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-md);
	color: var(--color-teal);
}

.error-404-message {
	font-size: 1.1rem;
	color: var(--color-gray-dark);
	line-height: 1.6;
	margin-bottom: var(--space-xl);
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.error-404-search {
	max-width: 400px;
	margin: 0 auto var(--space-lg);
}

.error-404-search .search-form {
	margin: 0 auto;
}


/* ==========================================================================
   10. Generic Page Content
   ========================================================================== */

.page-default .page-content,
.page-content {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--space-2xl) 0;
	line-height: 1.8;
	font-size: 1.05rem;
}

.page-content p {
	margin-bottom: var(--space-md);
}

.page-content h2,
.page-content h3,
.page-content h4 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
}

.page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}


/* ==========================================================================
   11. Recipe Search & Sort Toolbar (category pages, Recipes page)
   ========================================================================== */

.archive-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-xl) 0 var(--space-md);
}

.archive-toolbar__search {
	position: relative;
	flex: 1 1 280px;
	max-width: 440px;
}

.archive-toolbar__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-gray);
	pointer-events: none;
}

.archive-toolbar input[type="search"],
.archive-toolbar select {
	height: 44px;
	border: 1px solid var(--color-gray);
	border-radius: 0;
	background: var(--color-white);
	color: var(--color-body-text);
	font-family: var(--font-primary);
	font-size: 1rem;
}

.archive-toolbar input[type="search"] {
	width: 100%;
	padding: 0 var(--space-sm) 0 42px;
}

.archive-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-left: auto;
}

.archive-toolbar__sort label {
	font-size: 0.9rem;
	color: var(--color-gray-dark);
	white-space: nowrap;
}

.archive-toolbar select {
	padding: 0 var(--space-sm);
	cursor: pointer;
}

.archive-toolbar__submit {
	height: 44px;
	padding: 0 var(--space-md);
	border: none;
	background: var(--color-teal);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 0.95rem;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.archive-toolbar__submit:hover,
.archive-toolbar__submit:focus-visible {
	background: var(--color-green);
}

/* The toolbar already spaces the grid; drop the grid's own top padding. */
.archive-toolbar + .recipe-grid,
.archive-toolbar__status + .recipe-grid {
	padding-top: var(--space-sm);
}

.archive-toolbar__status {
	margin: 0 0 var(--space-md);
	color: var(--color-gray-dark);
}

.archive-toolbar__status a {
	margin-left: var(--space-xs);
	color: var(--color-teal);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.archive-toolbar {
		margin-top: var(--space-lg);
	}

	.archive-toolbar__search {
		flex-basis: 100%;
		max-width: none;
	}

	.archive-toolbar__sort {
		margin-left: 0;
		flex: 1;
	}

	.archive-toolbar select {
		flex: 1;
	}
}