/* =========================================================
   MERIDIAN HEADER + FOOTER
   Astra retains structural/menu behavior.
   Meridian owns visual presentation.
   ========================================================= */


/* =========================================================
   1. HEADER
   ========================================================= */

#masthead .main-header-bar,
#masthead .ast-primary-header-bar,
#masthead .ast-mobile-header-wrap .ast-mobile-header-content {
	background: var(--meridian-white);
}


/* =========================================================
   2. PRIMARY NAVIGATION
   ========================================================= */

#masthead .main-header-menu > .menu-item > .menu-link {
	display: flex;
	align-items: center;

	min-height: 44px;

	color: var(--meridian-deep);
}

#masthead .main-header-menu .menu-link:hover,
#masthead .main-header-menu .current-menu-item > .menu-link {
	color: var(--meridian-primary);

	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* =========================================================
   3. MOBILE MENU CONTROLS
   ========================================================= */

#masthead :where(
	.menu-toggle,
	.ast-menu-toggle
) {
	min-width: 44px;
	min-height: 44px;

	color: var(--meridian-deep);
}


/* =========================================================
   4. OPTIONAL ASTRA HEADER BUTTON
   ========================================================= */

#masthead .ast-custom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;

	padding: 12px 24px;

	border-radius: var(--meridian-radius-md);

	background: var(--meridian-primary);
	color: var(--meridian-white);

	font-weight: 600;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

	#masthead .ast-custom-button:hover {
		background: var(--meridian-deep);
		color: var(--meridian-white);
	}
}


/* =========================================================
   5. STICKY HEADER
   ========================================================= */

#masthead.meridian-header--sticky {
	position: sticky;
	top: 0;
	z-index: 99;
}

#masthead.meridian-header--scrolled {
	box-shadow: var(--meridian-shadow-1);
}


/* =========================================================
   6. WORDPRESS ADMIN BAR
   ========================================================= */

body.admin-bar #masthead.meridian-header--sticky {
	top: 32px;
}

@media (max-width: 782px) {

	body.admin-bar #masthead.meridian-header--sticky {
		top: 46px;
	}
}

@media (max-width: 600px) {

	body.admin-bar #masthead.meridian-header--sticky {
		top: 0;
	}
}


/* =========================================================
   7. FOOTER SHELL
   All footer internals are scoped beneath .meridian-footer
   to prevent collisions with Astra, plugins, or inner pages.
   ========================================================= */

.meridian-footer {
	padding: 52px 36px 20px;

	background: var(--meridian-deep);
	color: var(--meridian-white);
}


/* =========================================================
   8. FOOTER BRAND ROW
   ========================================================= */

.meridian-footer .footer-brand-row {
	display: grid !important;
	grid-template-columns: 128px minmax(0, 1fr);
	align-items: center;
	column-gap: 26px;

	margin: 0 0 28px;
}

.meridian-footer .footer-brand-row > .wp-block-column {
	flex-basis: auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

.meridian-footer .footer-logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
}

.meridian-footer .footer-logo img {
	display: block;
	width: 112px;
	max-width: 100%;
	height: auto;
	margin: 0;
}

.meridian-footer .footer-brand {
	min-width: 0;
}

.meridian-footer .footer-brand h4 {
	margin: 0 0 8px;

	color: var(--meridian-white);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
}

.meridian-footer .footer-brand p {
	max-width: 52ch;
	margin: 0;

	color: rgb(255 255 255 / 76%);
	font-size: 0.9rem;
	line-height: 1.65;
}


/* =========================================================
   9. FOOTER UTILITY GRID
   ========================================================= */

.meridian-footer .footer-grid {
	display: grid !important;
	grid-template-columns:
		minmax(0, 1.3fr)
		minmax(0, 0.75fr)
		minmax(0, 0.95fr);

	align-items: start;
	gap: 64px;

	margin: 0;
}

.meridian-footer .footer-grid > .wp-block-column {
	flex-basis: auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

.meridian-footer .footer-contact h4,
.meridian-footer .footer-links h4 {
	margin: 0 0 16px;

	color: var(--meridian-white);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
}

.meridian-footer .footer-hours h4 {
	margin: 0 0 18px;

	color: var(--meridian-white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.meridian-footer .footer-privacy h4 {
	margin: 0 0 16px;

	color: var(--meridian-white);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
}


/* =========================================================
   10. FOOTER CONTACT
   ========================================================= */

.meridian-footer .footer-contact-item {
	display: grid !important;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: start;
	gap: 12px;

	margin: 0 0 10px;
}

.meridian-footer .footer-contact-item:last-child {
	margin-bottom: 0;
}

.meridian-footer .footer-contact-item > .wp-block-column {
	flex-basis: auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

.meridian-footer .footer-contact-icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.meridian-footer .footer-contact-icon img {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.meridian-footer .footer-contact-text p,
.meridian-footer .footer-links p,
.meridian-footer .footer-privacy p {
	font-size: 0.84rem;
	line-height: 1.55;
}

.meridian-footer .footer-contact-text p {
	margin: 0;
	color: rgb(255 255 255 / 76%);
}

.meridian-footer .footer-contact-text a {
	color: rgb(255 255 255 / 88%) !important;
	text-decoration: none;

	transition:
		color 200ms ease,
		text-decoration-color 200ms ease;
}


/* =========================================================
   11. FOOTER QUICK LINKS / HOURS / PRIVACY
   ========================================================= */

.meridian-footer .footer-links p {
	margin: 0 0 10px;
	color: rgb(255 255 255 / 76%);
}

.meridian-footer .footer-links p:last-child {
	margin-bottom: 0;
}

.meridian-footer .footer-links a {
	color: rgb(255 255 255 / 80%) !important;
	text-decoration: none;

	transition: color 200ms ease;
}

.meridian-footer .footer-hours p {
	margin: 0 0 8px;

	color: rgb(255 255 255 / 76%);
	font-size: 0.9rem;
	line-height: 1.55;
}

.meridian-footer .footer-privacy p {
	max-width: 32ch;
	margin: 0 0 16px;
	color: rgb(255 255 255 / 76%);
}


/* =========================================================
   12. FOOTER INTERACTION + ACCESSIBILITY
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

	.meridian-footer .footer-contact-text a:hover,
	.meridian-footer .footer-links a:hover {
		color: var(--meridian-white) !important;

		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
}

.meridian-footer a:focus-visible {
	outline-color: var(--meridian-white);

	box-shadow:
		0 0 0 3px var(--meridian-deep);
}


/* =========================================================
   13. FOOTER COPYRIGHT BAND
   ========================================================= */

.meridian-footer .footer-bottom {
	position: relative;
	left: 50%;

	box-sizing: border-box;
	width: 100vw;
	max-width: none !important;

	margin: 0 0 0 -50vw !important;
	padding: 12px 24px !important;

	border-top: 1px solid rgb(11 46 79 / 10%);
	background: var(--meridian-white) !important;

	min-height: 0 !important;
}

.meridian-footer .footer-bottom p {
	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--meridian-deep) !important;

	font-size: 0.8rem;
	line-height: 1.4;
	text-align: center !important;
}


/* =========================================================
   14. FOOTER — TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

	.meridian-footer {
		padding: 48px 28px 22px;
	}

	.meridian-footer .footer-brand-row {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 20px;
	}

	.meridian-footer .footer-logo img {
		width: 76px;
	}

	.meridian-footer .footer-grid {
		grid-template-columns:
			minmax(0, 1.25fr)
			minmax(0, 0.9fr)
			minmax(0, 0.8fr);

		gap: 30px;
	}
}


/* =========================================================
   15. FOOTER — MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.meridian-footer {
		padding: 42px 20px 20px;
	}

	.meridian-footer .footer-brand-row {
		grid-template-columns: 68px minmax(0, 1fr);
		align-items: start;
		gap: 14px;

		margin-bottom: 32px;
	}

	.meridian-footer .footer-logo {
		align-items: flex-start;
	}

	.meridian-footer .footer-logo img {
		width: 60px;
	}

	.meridian-footer .footer-brand h4 {
		margin-bottom: 6px;

		font-size: 1rem;
		line-height: 1.35;
	}

	.meridian-footer .footer-brand p {
		max-width: none;

		font-size: 0.875rem;
		line-height: 1.6;
	}

	.meridian-footer .footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.meridian-footer .footer-bottom {
		margin-top: 30px !important;
	}
}