/* ==========================================================================
   Responsive Breakpoints — Lee's Supper Club
   --------------------------------------------------------------------------
   Global responsive overrides.  These sit at the end of the CSS cascade
   so they can override any template-level styles.

   Breakpoints:
     1200px — large desktop to desktop
      900px — tablet
      600px — mobile
      480px — small mobile
   ========================================================================== */


/* ==========================================================================
   1. 1200px — Large Desktop to Desktop
   ========================================================================== */

@media (max-width: 1200px) {

	/* Reduce container side padding */
	.container {
		padding-left: var(--space-md);
		padding-right: var(--space-md);
	}

	/* Recipe grid: 3 columns */
	.recipe-grid {
		--grid-cols: 3;
		grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
	}

	/* Post grid: 3 columns */
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* About photo band images */
	.about-photo-band__photo {
		max-width: 240px;
	}
}


/* ==========================================================================
   2. 900px — Tablet
   ========================================================================== */

@media (max-width: 900px) {

	/* --- Mobile Header / Hamburger Menu -------------------------------- */

	.menu-toggle {
		display: flex;
		padding: var(--space-sm);
		min-width: 48px;
		min-height: 48px;
		flex-shrink: 0;
	}

	/* Give the header container enough right padding */
	.site-header .container {
		overflow: visible;
		padding-right: var(--space-md);
	}

	/* Prevent logo from being squished — maintain aspect ratio */
	.site-branding img {
		max-width: min(220px, 50vw);
		height: auto;
		object-fit: contain;
	}

	/* Mobile menu dropdown — teal background with white text */
	.menu-container {
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: var(--color-teal);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		z-index: 100;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.35s ease, opacity 0.3s ease;
	}

	.menu-container.toggled {
		max-height: 500px;
		opacity: 1;
	}

	.menu-container .menu,
	.menu-container ul {
		flex-direction: column;
		text-align: center;
		padding: var(--space-sm) 0;
	}

	.menu-container .menu li,
	.menu-container ul li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.menu-container .menu li:last-child,
	.menu-container ul li:last-child {
		border-bottom: none;
	}

	.menu-container .menu a,
	.menu-container ul a {
		display: block;
		padding: var(--space-sm) var(--space-md);
		color: var(--color-white);
		font-size: 1rem;
	}

	/* Scrolled state: mobile menu adapts colors */
	.site-header.header-scrolled .menu-container {
		background: var(--mobile-menu-bg, var(--color-teal));
	}

	.site-header.header-scrolled .menu-container.toggled .menu a,
	.site-header.header-scrolled .menu-container.toggled ul a {
		color: var(--mobile-menu-text, var(--color-white));
	}

	/* --- Recipe Grid: 2 columns ---------------------------------------- */
	.recipe-grid {
		--grid-cols: 2;
		grid-template-columns: repeat(2, 1fr);
	}

	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Single Post: Stack content + sidebar -------------------------- */
	.single-content-area {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.sidebar-area {
		width: 100%;
	}

	.content-area {
		max-width: 100%;
	}

	/* Expand Meet Lee widget to full width on mobile */
	.widget-meet-lee {
		border-radius: 0;
		margin-left: calc(-1 * var(--space-md));
		margin-right: calc(-1 * var(--space-md));
		padding: var(--space-lg) var(--space-md);
	}

	/* --- Homepage Grids ------------------------------------------------ */
	.category-images-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.seasonal-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.latest-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- About Card: single column ------------------------------------- */
	.about-card {
		grid-template-columns: 1fr;
		text-align: center;
		max-width: 95%;
	}

	.about-card__image {
		order: -1;
		max-width: 250px;
		margin: 0 auto;
	}

	/* --- Footer: wrap navigation --------------------------------------- */
	.footer-nav .menu,
	.footer-nav ul {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* --- About Page photo band ----------------------------------------- */
	.about-photo-band__images {
		gap: var(--space-md);
	}

	.about-photo-band__photo {
		max-width: 200px;
	}

	/* --- Archive hero: reduce padding ---------------------------------- */
	.archive-hero {
		padding: var(--space-lg) 0;
	}

	/* --- Global mobile: ensure all content stays within viewport ------- */
	.site-main,
	.entry-content,
	.page-content {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* --- Global: minimum touch target size (44px per Apple HIG) ------- */
	.post-card a,
	.listing-item a,
	.category-circle,
	.category-image-card,
	.btn,
	.btn-outline,
	.btn-white {
		min-height: 44px;
	}
}


/* ==========================================================================
   3. 600px — Mobile
   ========================================================================== */

@media (max-width: 600px) {

	/* --- Card text: prevent overlap on mobile -------------------------- */
	.lsc-recipe-title {
		font-size: 0.95rem;
		padding: 10px;
		min-height: auto;
		line-height: 1.3;
	}

	.lsc-recipe-category {
		font-size: 0.75rem;
		padding: 6px 10px;
		line-height: 1.3;
	}

	/* --- Category circles: 3 per row ----------------------------------- */
	.browse-categories {
		gap: var(--space-md);
	}

	.browse-categories .circle-image {
		width: 90px;
		height: 90px;
	}

	.category-circles {
		justify-content: center;
		gap: var(--space-md);
	}

	.category-circle .circle-image {
		width: 90px;
		height: 90px;
	}

	/* --- Reduce section padding ---------------------------------------- */
	.browse-categories-section {
		padding: var(--space-lg) 0 var(--space-sm);
	}

	.recipe-grid {
		padding: var(--space-lg) 0;
	}

	/* --- Smaller heading fonts ----------------------------------------- */
	.archive-hero h1,
	.archive-hero .page-title {
		font-size: 1.5rem;
	}

	.section-heading {
		font-size: 1.4rem;
	}

	/* --- Single hero adjustments --------------------------------------- */
	.single-hero .entry-title {
		font-size: 1.4rem;
	}

	.single-hero .post-meta {
		flex-wrap: wrap;
		gap: var(--space-xs);
	}

	/* --- Search form full width ---------------------------------------- */
	.search-recipes-section .search-form {
		width: 100%;
		max-width: 100%;
	}

	/* --- Footer social icons slightly smaller -------------------------- */
	.footer-social .social-icon svg {
		width: 20px;
		height: 20px;
	}

	/* --- About page photo band ----------------------------------------- */
	.about-photo-band__images {
		flex-direction: column;
		align-items: center;
	}

	.about-photo-band__photo {
		max-width: 280px;
		transform: none !important;
	}

	.about-photo-band {
		padding: var(--space-2xl) 0;
	}

	/* --- Error 404 ----------------------------------------------------- */
	.error-404-title {
		font-size: 2rem;
	}

	.error-404-message {
		font-size: 1rem;
	}

	/* --- Post navigation stacked --------------------------------------- */
	.post-navigation .nav-links {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.post-navigation .nav-previous,
	.post-navigation .nav-next {
		max-width: 100%;
		text-align: left;
	}

	/* --- Contact page -------------------------------------------------- */
	.page-contact .contact-form-wrapper {
		padding: var(--space-lg) 0;
	}

	/* --- Homepage full-width fix --------------------------------------- */
	.homepage-content,
	.homepage-content .entry-content,
	.homepage-content .entry-content > .wp-block-group {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Restore padding on homepage blocks (may be lost to WP inline styles) */
	.homepage-content .entry-content > .wp-block-group {
		padding-left: var(--space-sm) !important;
		padding-right: var(--space-sm) !important;
	}

	/* Full-width background blocks keep zero side padding */
	.homepage-content .entry-content > .wp-block-group.has-background {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.homepage-content .entry-content > .wp-block-group.has-background > * {
		padding-left: var(--space-sm) !important;
		padding-right: var(--space-sm) !important;
	}

	/* Override WP core layout constraints on mobile */
	.homepage .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
	.homepage .is-layout-constrained > .alignwide {
		max-width: 100% !important;
	}

	/* --- Category cards: keep floating pill look, add spacing ---------- */
	.homepage .category-images-grid {
		margin-bottom: var(--space-3xl);
		padding-bottom: var(--space-md);
	}

	.first-category-section .lsc-category-index-list {
		padding-bottom: var(--space-lg);
	}
}


/* ==========================================================================
   4. 480px — Small Mobile
   ========================================================================== */

@media (max-width: 480px) {

	/* --- Category images grid: 2 columns ------------------------------- */
	.category-images-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Recipe / Latest / Seasonal grids: 1 column -------------------- */
	.recipe-grid {
		--grid-cols: 1;
		grid-template-columns: 1fr;
	}

	.post-grid {
		grid-template-columns: 1fr;
	}

	.latest-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.seasonal-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	/* --- Further reduce heading sizes ---------------------------------- */
	.archive-hero h1,
	.archive-hero .page-title {
		font-size: 1.3rem;
	}

	.section-heading {
		font-size: 1.2rem;
	}

	.single-hero .entry-title {
		font-size: 1.2rem;
	}

	/* --- Category circles: 2 per row ----------------------------------- */
	.browse-categories {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		gap: var(--space-sm);
	}

	.browse-categories .circle-image {
		width: 80px;
		height: 80px;
	}

	.category-circles {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		gap: var(--space-sm);
	}

	.category-circle .circle-image {
		width: 80px;
		height: 80px;
	}

	/* --- Floating buttons: slightly smaller ---------------------------- */
	.floating-buttons .floating-btn {
		width: 44px;
		height: 44px;
		font-size: 0.85rem;
	}

	/* --- Single content area padding ----------------------------------- */
	.single-content-area {
		padding-left: var(--space-sm);
		padding-right: var(--space-sm);
	}

	/* --- Container reduced padding ------------------------------------- */
	.container {
		padding-left: var(--space-sm);
		padding-right: var(--space-sm);
	}

	/* --- Hero padding -------------------------------------------------- */
	.single-hero {
		padding: var(--space-lg) 0 var(--space-md);
	}

	/* --- Comment form compact ------------------------------------------ */
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.comment-form textarea {
		padding: var(--space-xs);
	}

	/* --- About hero teal band shorter ---------------------------------- */
	.page-about .about-hero__teal-band {
		height: 200px;
	}
}


/* ==========================================================================
   5. Touch Devices — Disable Hover Effects & Animations
   --------------------------------------------------------------------------
   Hover states (scale, translateY, color shifts) cause "sticky hover" on
   touch devices and interfere with tap responsiveness.  This section
   neutralizes them for any device that cannot hover (phones, tablets).
   ========================================================================== */

@media (hover: none) {

	/* --- Remove card lift / scale transforms on tap -------------------- */
	.listing-item:hover,
	.latest-card:hover,
	.latest-card:focus-within,
	.seasonal-card:hover img,
	.seasonal-card:focus-visible img,
	.category-image-card:hover img,
	.category-image-card:focus-visible img,
	.category-circle:hover .circle-image,
	.category-circle:focus-visible .circle-image {
		transform: none !important;
		box-shadow: none !important;
	}

	/* --- Remove listing-item hover image scale ------------------------- */
	.listing-item:hover img,
	.latest-category-card .listing-item:hover img,
	.scheduled-category-card .listing-item:hover img,
	.latest-category-card .post-card:hover .post-thumbnail img,
	.scheduled-category-section .post-card:hover .post-thumbnail img {
		transform: none !important;
	}

	/* --- Remove background color transitions on tap -------------------- */
	.scheduled-category-card .listing-item:hover,
	.scheduled-category-card .listing-item:hover .lsc-recipe-title,
	.scheduled-category-card .listing-item:hover .lsc-recipe-category,
	.latest-category-card .listing-item:hover,
	.latest-category-card .listing-item:hover .lsc-recipe-title,
	.latest-category-card .listing-item:hover .lsc-recipe-category,
	.scheduled-category-section .post-card:hover,
	.scheduled-category-section .post-card:hover .card-content,
	.latest-category-card .post-card:hover,
	.latest-category-card .post-card:hover .card-content {
		background: inherit !important;
		color: inherit !important;
	}

	/* --- Remove category label hover color change ---------------------- */
	.homepage .category-image-card:hover .category-label {
		background: var(--color-teal) !important;
		color: var(--color-white) !important;
	}

	/* --- Disable transitions globally on touch devices ----------------- */
	.listing-item,
	.listing-item img,
	.latest-card,
	.seasonal-card img,
	.category-image-card img,
	.category-circle .circle-image,
	.scheduled-category-card .listing-item,
	.scheduled-category-card .listing-item .lsc-recipe-title,
	.latest-category-card .listing-item,
	.latest-category-card .lsc-recipe-title,
	.scheduled-category-section .post-card .card-content,
	.latest-category-card .post-card .card-content {
		transition: none !important;
	}

	/* --- Keep floating buttons usable ---------------------------------- */
	.floating-btn:hover {
		transform: none !important;
		background-color: var(--color-teal) !important;
	}
}


/* ==========================================================================
   6. Homepage Refinements
   --------------------------------------------------------------------------
   Card text sizing, About section height, and tighter mobile spacing.
   Scoped to .homepage and kept together here so they are easy to tune.
   ========================================================================== */

/* --- Seasonal + Latest cards: title larger than the category label and
       directly beneath it (overrides the 44px touch-target minimum) ----- */
.homepage .scheduled-category-section .post-card .category-badge,
.homepage .latest-category-card .post-card .category-badge {
	font-size: 0.7rem;
	min-height: 0;
	margin-bottom: 4px;
}

.homepage .scheduled-category-section .post-card .card-title,
.homepage .latest-category-card .post-card .card-title {
	font-size: 1.3rem;
	line-height: 1.3;
}

/* --- About Lee: roughly half the previous height on desktop ----------- */
@media (min-width: 769px) {
	.homepage .about-banner {
		padding: var(--space-lg) 0;
	}

	.homepage .about-card {
		max-width: min(900px, 90%);
		padding: var(--space-lg) var(--space-xl);
		grid-template-columns: 1fr auto;
		gap: var(--space-xl);
	}

	.homepage .about-card__image img {
		width: 220px;
		height: 300px;
		object-fit: cover;
		object-position: center 20%;
	}
}

/* --- Mobile spacing and two-up cards ---------------------------------- */
@media (max-width: 600px) {
	.homepage .category-section {
		padding-bottom: var(--space-md);
	}

	.homepage .category-section .category-images-grid {
		margin-bottom: var(--space-lg);
	}

	.homepage .search-recipes-section {
		padding-top: var(--space-md);
	}

	.homepage .search-recipes-section h2 {
		display: none;
	}

	.homepage .seasonal-section h2 {
		margin-top: 0;
		margin-bottom: var(--space-md);
	}

	.homepage .latest-section h2 {
		margin-bottom: var(--space-md);
	}

	.homepage .seasonal-section .recipe-grid,
	.homepage .latest-section .recipe-grid {
		--grid-cols: 2;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
		padding-top: 0;
	}

	.homepage .scheduled-category-section .post-card .card-content,
	.homepage .latest-category-card .post-card .card-content {
		padding: 8px 10px 12px;
	}

	.homepage .scheduled-category-section .post-card .category-badge,
	.homepage .latest-category-card .post-card .category-badge {
		font-size: 0.65rem;
		letter-spacing: 0.05em;
	}

	.homepage .scheduled-category-section .post-card .card-title,
	.homepage .latest-category-card .post-card .card-title {
		font-size: 1rem;
	}
}