/* ============================================
   BERNAL REAL ESTATE — Header & Navigation Polish
   Paste this into Appearance → Customize → Additional CSS
   (or Editor → Styles → Additional CSS, depending on your theme)
   ============================================ */

/* Sticky header — stays visible as visitors scroll down the page */
.wp-block-template-part[data-type="header"],
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Navigation link spacing and hover effect */
.wp-block-navigation .wp-block-navigation-item a {
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.5rem 0.9rem !important;
	transition: color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
	opacity: 0.65;
}

/* Submenu (dropdown) visual polish — clean shadow, spacing, no cut-off */
.wp-block-navigation__submenu-container {
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 0.5rem 0;
	min-width: 220px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item a {
	padding: 0.6rem 1.2rem !important;
}

/* Mobile menu (overlay) polish — full-screen, centered, larger tap targets */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-size: 1.15rem;
	padding: 0.75rem 0 !important;
}

/* Mobile menu toggle (hamburger) button — larger, easier to tap */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.5rem !important;
}

/* "Book a Consultation" style button, if you add one to the header */
.wp-block-navigation .wp-block-button__link {
	background: #1a1a1a;
	color: #fff;
	border-radius: 4px;
	padding: 0.6rem 1.3rem !important;
	font-weight: 600;
	font-size: 0.9rem;
}

.wp-block-navigation .wp-block-button__link:hover {
	background: #333;
	opacity: 1;
}

/* ============================================
   MOBILE NAV COLLAPSE — force the menu to hide
   behind the hamburger button on small screens
   ============================================ */

@media (max-width: 782px) {
	/* Hide the full nav item list by default on mobile */
	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: none !important;
	}

	/* Make sure the hamburger toggle button is visible */
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	/* When the menu IS open (tapped), show it as a clean overlay */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 9999;
		padding: 2rem;
		overflow-y: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column;
		gap: 1rem;
	}
}