/**
 * Global Responsive Styles
 *
 * Responsive overrides for the PSL WordPress theme.
 * Standard breakpoints:
 * - >= 1200px: Desktop (default)
 * - 768px - 1199px: Tablet
 * - 480px - 767px: Large phone
 * - < 480px: Mobile
 *
 * @package PSL_Theme
 * @since 1.0.0
 */

/* ============================================
   TABLET (768px - 1199px)
   ============================================ */
@media (max-width: 1199px) {
	/* Reduce horizontal padding on constrained containers */
	.wp-block-group.has-background {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}
}

/* ============================================
   LARGE PHONE (480px - 767px)
   ============================================ */
@media (max-width: 767px) {
	/* ── Header ── */
	/* Allow header flex containers to wrap */
	header.wp-block-group > .wp-block-group {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--30);
	}

	/* Navigation container - allow wrapping */
	header .wp-block-group .wp-block-group:has(.wp-block-navigation) {
		flex-wrap: wrap !important;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
	}

	/* Hide desktop nav links when mobile overlay is active */
	header .wp-block-navigation.has-modal-open .wp-block-navigation__container {
		display: none;
	}

	/* ── Buttons ── */
	/* Reduce button padding for touch targets */
	.wp-block-button__link {
		padding: 0.75rem 1.25rem !important;
		font-size: 0.8125rem !important;
	}

	/* Header buttons - smaller on mobile */
	header .wp-block-buttons {
		gap: var(--wp--preset--spacing--10);
	}

	header .wp-block-button__link {
		padding: 0.625rem 1rem !important;
		font-size: 0.75rem !important;
	}

	/* ── Footer ── */
	/* Start stacking footer columns */
	footer .wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--50) !important;
	}

	footer .wp-block-column {
		flex-basis: 45% !important;
		min-width: 140px;
	}

	/* First column (brand) takes full width */
	footer .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	/* ── Hero Section ── */
	/* Reduce hero heading size */
	.psl-hero h1,
	.wp-block-cover h1 {
		font-size: clamp(2rem, 8vw, 3rem) !important;
	}

	/* Hero buttons stack on mobile */
	.psl-hero .wp-block-buttons,
	.wp-block-cover .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.psl-hero .wp-block-button,
	.wp-block-cover .wp-block-button {
		width: 100%;
	}
}

/* ============================================
   MOBILE (< 480px)
   ============================================ */
@media (max-width: 479px) {
	/* ── Header ── */
	/* Center header content */
	header.wp-block-group > .wp-block-group {
		justify-content: center !important;
	}

	/* Hide site title on very small screens, keep logo */
	header .wp-block-site-title {
		display: none;
	}

	/* Stack header buttons */
	header .wp-block-buttons {
		flex-direction: column;
		width: 100%;
	}

	header .wp-block-button {
		width: 100%;
	}

	header .wp-block-button__link {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	/* ── Buttons ── */
	/* Even smaller padding on mobile */
	.wp-block-button__link {
		padding: 0.625rem 1rem !important;
	}

	/* Ensure minimum touch target size (44px) */
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* ── Footer ── */
	/* Full single column layout */
	footer .wp-block-columns {
		flex-direction: column !important;
	}

	footer .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Center footer bottom row */
	footer > .wp-block-group:last-child {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--wp--preset--spacing--20);
	}

	/* ── General ── */
	/* Reduce section padding */
	.wp-block-group.has-background {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
	}

	/* Reduce heading sizes */
	h1 {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}

	h2 {
		font-size: clamp(1.5rem, 6vw, 2rem) !important;
	}

	h3 {
		font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
	}

	/* Prevent horizontal overflow */
	body {
		overflow-x: hidden;
	}

	/* Images should not exceed viewport */
	img {
		max-width: 100%;
		height: auto;
	}
}

/* ============================================
   WORDPRESS NAVIGATION MOBILE OVERLAY
   ============================================ */
/* Style the mobile menu toggle button */
.wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
	border-radius: 4px;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus {
	background: var(--wp--preset--color--muted);
}

/* Mobile overlay styles */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.125rem;
	padding: var(--wp--preset--spacing--20) 0;
}

/* Close button styling */
.wp-block-navigation__responsive-container-close {
	padding: 0.5rem;
	border-radius: 4px;
}

.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus {
	background: var(--wp--preset--color--muted);
}