/* ==========================================================================
   Single Post — Lee's Supper Club
   --------------------------------------------------------------------------
   Styles for single.php: the teal hero band, two-column content + sidebar
   layout, entry content typography, recipe card overrides, post tags, and
   post navigation.
   ========================================================================== */


/* ==========================================================================
   1. Single Hero — Teal band at top
   ========================================================================== */

.single-hero {
	background: var(--post-hero-bg, var(--color-teal));
	color: var(--post-hero-text, var(--color-white));
	padding: var(--space-md) 0;
	text-align: left;
	width: 100%;
}

.single-hero .container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--space-md);
}

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

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

.single-hero .breadcrumbs li {
	display: inline-flex;
	align-items: center;
	font-size: 0.85rem;
}

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

.single-hero .breadcrumbs a {
	color: var(--color-white);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

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

.single-hero .entry-title {
	font-size: var(--post-title-size, clamp(1.3rem, 3vw, 2rem));
	font-family: var(--post-title-font, var(--font-headings, var(--font-primary)));
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-sm);
	max-width: 700px;
	line-height: 1.3;
	color: var(--color-white);
}

.single-hero .post-meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: 0.9rem;
}

.single-hero .post-meta img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.single-hero .post-meta a {
	color: var(--color-white);
	text-decoration: none;
}

.single-hero .post-meta a:hover,
.single-hero .post-meta a:focus-visible {
	text-decoration: underline;
}

.single-hero .post-meta .meta-separator {
	opacity: 0.6;
}

.single-hero .post-meta .byline {
	color: var(--color-white);
}

.single-hero .post-meta .entry-date {
	color: var(--color-white);
	opacity: 0.9;
}


/* ==========================================================================
   2. Hero Actions Row (Jump to Recipe + Social Share)
   ========================================================================== */

.single-hero__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-sm);
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* --- Social Share Buttons -------------------------------------------- */

.social-share {
	display: flex;
	gap: var(--space-xs);
}

.social-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-white);
	padding: 0.4rem 0.8rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: var(--fw-medium);
	font-family: var(--font-primary);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.social-share__btn:hover,
.social-share__btn:focus-visible {
	background: rgba(255, 255, 255, 0.3);
	color: var(--color-white);
}

.social-share__btn svg {
	flex-shrink: 0;
}

/* ==========================================================================
   2b. Jump to Recipe Button
   ========================================================================== */

.btn-jump-recipe {
	background: var(--color-black);
	color: var(--color-white);
	padding: 0.5rem 1.5rem;
	border-radius: 25px;
	text-decoration: none;
	font-weight: var(--fw-medium);
	font-size: 0.85rem;
	transition: background var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
}

.btn-jump-recipe:hover,
.btn-jump-recipe:focus-visible {
	background: var(--color-teal);
	color: var(--color-white);
}


/* ==========================================================================
   3. Two-Column Layout — Content + Sidebar
   ========================================================================== */

.single-content-area {
	display: flex;
	gap: var(--space-3xl);
	padding-top: var(--space-2xl);
	max-width: var(--container-width);
	margin: 0 auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
	padding-bottom: var(--space-2xl);
}

.content-area {
	flex: 1;
	min-width: 0;
	max-width: var(--content-width);
}

.sidebar-area {
	width: var(--sidebar-width);
	flex-shrink: 0;
}


/* ==========================================================================
   4. Entry Content Typography
   ========================================================================== */

.entry-content {
	line-height: 1.8;
	font-size: 1.05rem;
}

/* Prevent ads/embeds from stretching content beyond max-width */
.entry-content > * {
	max-width: 100%;
	overflow-x: hidden;
}

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

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

.entry-content h2 {
	font-size: 1.6rem;
}

.entry-content h3 {
	font-size: 1.3rem;
}

.entry-content h4 {
	font-size: 1.15rem;
}

.entry-content img {
	border-radius: 8px;
	margin: var(--space-md) 0;
	max-width: 100%;
	height: auto;
}

.entry-content blockquote {
	border-left: 4px solid var(--color-teal);
	padding-left: var(--space-md);
	margin: var(--space-lg) 0;
	font-style: italic;
	color: var(--color-gray-dark);
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: var(--space-md);
	padding-left: var(--space-lg);
}

.entry-content li {
	margin-bottom: var(--space-xs);
}

.entry-content a {
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--color-teal);
}

.entry-content figure {
	margin: var(--space-lg) 0;
}

.entry-content figcaption {
	font-size: 0.9rem;
	color: var(--color-gray);
	text-align: center;
	margin-top: var(--space-xs);
}

.entry-content .wp-block-image {
	margin: var(--space-lg) 0;
}


/* ==========================================================================
   5. Recipe Card Plugin Overrides
   ========================================================================== */

.wprm-recipe-container,
.tasty-recipes {
	max-width: 700px;
	margin: var(--space-lg) auto;
}


/* ==========================================================================
   6. Post Tags
   ========================================================================== */

.entry-footer {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-gray-light);
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
}

.post-tags .tags-label {
	font-weight: var(--fw-medium);
	margin-right: var(--space-xs);
}

.post-tags a {
	display: inline-block;
	background: var(--color-gray-light);
	color: var(--color-gray-dark);
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	font-size: 0.85rem;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.post-tags a:hover,
.post-tags a:focus-visible {
	background: var(--color-teal);
	color: var(--color-white);
}


/* ==========================================================================
   7. Post Navigation (Previous / Next)
   ========================================================================== */

/* Post Navigation — Previous / Next */
.post-navigation {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 2px solid var(--color-teal);
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--space-lg);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 1;
	max-width: 48%;
}

.post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
}

.post-navigation .nav-links a {
	display: block;
	padding: var(--space-md);
	background: var(--color-gray-light);
	border-radius: 8px;
	text-decoration: none;
	color: var(--color-black);
	transition: background var(--transition-base), transform var(--transition-base);
}

.post-navigation .nav-links a:hover {
	background: var(--color-teal);
	color: var(--color-white);
	transform: translateY(-2px);
}

.post-navigation .meta-nav {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-gray);
	margin-bottom: var(--space-xs);
	font-weight: var(--fw-medium);
}

.post-navigation .nav-links a:hover .meta-nav {
	color: rgba(255, 255, 255, 0.7);
}

.post-navigation .post-title {
	font-weight: var(--fw-medium);
	font-size: 1.05rem;
	line-height: 1.4;
}

.post-navigation .nav-subtitle {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-gray);
	margin-bottom: var(--space-xs);
	font-weight: var(--fw-medium);
}

.post-navigation .nav-links a:hover .nav-subtitle {
	color: rgba(255, 255, 255, 0.7);
}

.post-navigation .nav-title {
	display: block;
	font-weight: var(--fw-medium);
	font-size: 1.05rem;
	line-height: 1.4;
}


/* ==========================================================================
   8. Page Links (multi-page posts)
   ========================================================================== */

.page-links {
	margin-top: var(--space-lg);
	font-weight: var(--fw-medium);
}

.page-links .post-page-numbers {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	margin-right: 0.25rem;
	border: 1px solid var(--color-gray-light);
	border-radius: 4px;
	text-decoration: none;
	color: var(--color-black);
}

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


/* ==========================================================================
   9. Recipe Plugin Card — Prevent Clipping
   ========================================================================== */

/* Ensure recipe plugin cards are not clipped */
.entry-content .tasty-recipes,
.entry-content .wprm-recipe-container {
	overflow: visible;
	border-radius: 0;
}

.entry-content .tasty-recipes img {
	max-width: 100%;
	height: auto;
}


/* ==========================================================================
   10. Hide Old Plugin Jump to Recipe Buttons
   ========================================================================== */

/* Hide old plugin Jump to Recipe buttons embedded in post content —
   our theme renders its own in the hero band */
.entry-content .wp-block-button__link[href*="jump-to-recipe"],
.entry-content a[href*="#jump-to-recipe"].wp-block-button__link,
.entry-content .wp-block-buttons:has(a[href*="jump-to-recipe"]) {
	display: none !important;
}


/* ==========================================================================
   11. Colored Boxes in Post Content
   ========================================================================== */

/* Group blocks with a background color get inner padding so text never sits
   against the box edge. :where() keeps specificity at zero, so padding set
   on an individual block in the editor still wins. */
.entry-content :where(.wp-block-group.has-background) {
	padding: var(--space-md) var(--space-lg);
}

@media (max-width: 600px) {
	.entry-content :where(.wp-block-group.has-background) {
		padding: var(--space-md);
	}
}


/* ==========================================================================
   12. Scheduled Categories Block in Post Content
   ========================================================================== */

/* The block reuses the homepage section styles, whose large section padding
   leaves a big gap under the post's intro text. Tighten it inside posts. */
.entry-content .seasonal-section {
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

.entry-content .seasonal-section .recipe-grid {
	padding-top: 0;
}

/* Post-content typography (image and h3 margins) should not reach the cards. */
.entry-content .seasonal-section .post-card img {
	margin: 0;
}

.entry-content .seasonal-section .post-card .card-title {
	margin-top: 0;
}