/* ==========================================================================
   Custom CSS — Navigation, footer, page builder compatibility
   ========================================================================== */

/* ── PRIMARY NAVIGATION ─────────────────────────────────────────────────────
   wp_nav_menu outputs: <ul class="primary-menu ..."><li><a>
   wp_page_menu outputs: <div class="primary-menu"><ul><li><a>
   These rules handle both structures.
   ──────────────────────────────────────────────────────────────────────── */

.primary-menu,
.primary-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.primary-menu,
div.primary-menu > ul {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.primary-menu li {
	position: relative;
}

.primary-menu li a {
	display: inline-block;
	position: relative;
	padding: 0.5rem 0;
	color: var(--color-header-text, #374151);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.primary-menu li a:hover,
.primary-menu li.current-menu-item > a,
.primary-menu li.current_page_item > a {
	color: var(--color-primary, #2563eb);
}

.primary-menu li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-primary, #2563eb);
	transition: width 0.3s ease;
}

.primary-menu li a:hover::after,
.primary-menu li.current-menu-item > a::after,
.primary-menu li.current_page_item > a::after {
	width: 100%;
}

/* Sub-menu dropdowns */
.primary-menu li ul.sub-menu {
	display: flex;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	flex-direction: column;
	min-width: 220px;
	padding: 0.5rem 0;
	border-radius: 0.75rem;
	background: #ffffff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
}

.primary-menu li:hover > ul.sub-menu,
.primary-menu li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu li ul.sub-menu li a {
	display: block;
	padding: 0.6rem 1.25rem;
	font-size: 0.9rem;
	font-weight: 400;
	white-space: nowrap;
}

.primary-menu li ul.sub-menu li a::after {
	display: none;
}

.primary-menu li ul.sub-menu li a:hover,
.primary-menu li ul.sub-menu li a:focus-visible {
	background-color: rgba(0, 0, 0, 0.03);
}

/* ── MOBILE NAVIGATION ──────────────────────────────────────────────────── */

.mobile-menu,
.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu li a {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	color: var(--color-header-text, #374151);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.mobile-menu li a:hover,
.mobile-menu li.current-menu-item > a,
.mobile-menu li.current_page_item > a {
	background-color: rgba(0, 0, 0, 0.05);
	color: var(--color-primary, #2563eb);
}

.mobile-menu li ul.sub-menu {
	padding-left: 1rem;
}

.mobile-menu li ul.sub-menu li a {
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	font-weight: 400;
}

/* ── FOOTER LINKS ───────────────────────────────────────────────────────── */

.footer-links,
.footer-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	list-style: none;
}

.footer-links li a {
	display: inline-block;
	padding: 0.3rem 0;
	color: var(--color-footer-text, #9ca3af);
	font-size: 0.95rem;
	text-decoration: none;
	transition:
		color 0.2s ease,
		padding-left 0.2s ease;
}

.footer-links li a:hover {
	padding-left: 4px;
	color: #ffffff;
}

/* ── FOOTER BOTTOM MENU ─────────────────────────────────────────────────── */

.footer-menu,
.footer-menu > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.footer-menu,
.footer-menu > ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.footer-menu li a {
	color: var(--color-footer-text, #6b7280);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-menu li a:hover {
	color: #ffffff;
}

/* ── KEYBOARD FOCUS STATES ──────────────────────────────────────────────── */

.primary-menu li a:focus-visible,
.mobile-menu li a:focus-visible,
.footer-links li a:focus-visible,
.footer-menu li a:focus-visible {
	outline: 3px solid var(--color-primary, #2563eb);
	outline-offset: 3px;
}

/* ── WIDGET AREA STYLING ────────────────────────────────────────────────── */

.widget .widget-title {
	margin-bottom: 1rem;
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: 700;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget ul li {
	padding: 0.25rem 0;
}

.widget ul li a {
	color: var(--color-footer-text, #9ca3af);
	text-decoration: none;
	transition: color 0.2s ease;
}

.widget ul li a:hover {
	color: #ffffff;
}

/* ── PAGE BUILDER COMPATIBILITY ─────────────────────────────────────────── */
/* Supports Elementor, Divi, Beaver Builder, Breakdance, Bricks,
   and Gutenberg block editors. */

.entry-content > .alignwide {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

.entry-content > .alignfull {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-right: -50vw;
	margin-left: -50vw;
}

/* Apply default content spacing to blog posts without affecting custom pages. */
.single-post .entry-content > * + * {
	margin-top: 1.5rem;
}

.page-builder-active .site-content {
	padding: 0;
}

.page-builder-active .site-content .entry-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.wp-block-columns {
	gap: 2rem;
}

.wp-block-cover {
	min-height: 400px;
}

.wp-block-button__link {
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

/* Prevent full-width blocks from creating horizontal page scroll. */
html,
body {
	overflow-x: clip;
}

/* ── SCROLL REVEAL ANIMATION ────────────────────────────────────────────── */
/* JavaScript sets the initial hidden state. Content remains visible if
   JavaScript fails. Do not set opacity: 0 here. */

[data-reveal] {
	transition:
		opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].visible {
	opacity: 1 !important;
	transform: none !important;
}

/* ── SITE TITLE / LOGO STYLING ──────────────────────────────────────────── */

/* Header logo */
.site-branding {
	flex: 0 1 340px;
	width: 340px;
	max-width: 34vw;
}

.site-branding .custom-logo-link {
	display: block;
	width: 100%;
	max-width: 340px;
}

.site-branding .custom-logo-link img,
.site-branding img.custom-logo {
	display: block;
	width: 100% !important;
	max-width: 340px !important;
	max-height: none !important;
	height: auto !important;
	object-fit: contain;
}

/* Footer logo */
.bedford-footer .bedford-footer__brand {
	width: 100%;
	max-width: 380px;
}

.bedford-footer .bedford-footer__logo {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 0 0 18px;
}

.bedford-footer .bedford-footer__logo .custom-logo-link {
	display: block;
	width: 100%;
	max-width: 340px;
}

.bedford-footer .bedford-footer__logo img,
.bedford-footer .bedford-footer__logo img.custom-logo {
	display: block;
	width: 100% !important;
	max-width: 340px !important;
	max-height: none !important;
	height: auto !important;
	object-fit: contain;
}

@media (max-width: 900px) {
	.site-branding {
		flex-basis: 300px;
		width: 300px;
		max-width: 55vw;
	}

	.site-branding .custom-logo-link,
	.site-branding .custom-logo-link img,
	.site-branding img.custom-logo {
		width: 100% !important;
		max-width: 300px !important;
	}
}

@media (max-width: 640px) {
	.site-branding {
		flex-basis: 250px;
		width: 250px;
		max-width: 70vw;
	}

	.site-branding .custom-logo-link,
	.site-branding .custom-logo-link img,
	.site-branding img.custom-logo {
		width: 100% !important;
		max-width: 250px !important;
	}

	.bedford-footer .bedford-footer__brand {
		max-width: none;
	}

	.bedford-footer .bedford-footer__logo,
	.bedford-footer .bedford-footer__logo .custom-logo-link,
	.bedford-footer .bedford-footer__logo img,
	.bedford-footer .bedford-footer__logo img.custom-logo {
		width: 100% !important;
		max-width: 260px !important;
	}

	ul.footer-menu,
	.footer-menu > ul {
		justify-content: center;
		gap: 0.75rem 1.25rem;
	}
}

.site-title {
	color: var(--color-header-text, #111827);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	text-decoration: none;
}

.site-title:hover {
	opacity: 0.85;
}

/* ── ALPINE.JS CLOAK ────────────────────────────────────────────────────── */

[x-cloak] {
	display: none !important;
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	.primary-menu li a,
	.primary-menu li a::after,
	.primary-menu li ul.sub-menu,
	.mobile-menu li a,
	.footer-links li a,
	.footer-menu li a,
	.wp-block-button__link {
		transition: none !important;
		animation: none !important;
	}
}