/* =========================================================
   MERIDIAN HEADER + FOOTER

   Astra retains structural/menu behavior.
   Meridian owns visual presentation.

   RESPONSIVE SYSTEM — MATERIAL WINDOW SIZE CLASSES

   Compact       < 600px
   Medium        600px — 839.98px
   Expanded      840px — 1199.98px
   Large         1200px — 1599.98px
   Extra-large   >= 1600px

   Responsive principle:
   - One width-query entry per class.
   - No overlapping Meridian breakpoint systems.
   - WordPress platform-specific breakpoints remain separate.
   ========================================================= */


/* =========================================================
   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;
}



/* =========================================================
   PRIMARY NAVIGATION — BOOK APPOINTMENT CTA
   ========================================================= */

/* Default CTA */
#masthead .main-header-menu
.menu-item.meridian-nav-booking > .menu-link,
#masthead .main-header-menu
.menu-item.meridian-nav-booking > .menu-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding: 0 20px;

    background-color: #0B6B3A;
    border-radius: 8px;

    color: #FFFFFF !important;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;

    transition:
        background-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

/* Hover — desktop pointer devices only */
@media (hover: hover) and (pointer: fine) {
    #masthead .main-header-menu
    .menu-item.meridian-nav-booking > .menu-link:hover {
        background-color: #084d2b;
        color: #FFFFFF !important;
        transform: translateY(-3px);
        box-shadow: 0 7px 18px rgba(11, 107, 58, 0.22);
        text-decoration: none !important;
    }
}

/* Current Appointment page */
#masthead .main-header-menu
.menu-item.meridian-nav-booking.current-menu-item > .menu-link {
    background-color: #084d2b;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Accessible keyboard focus */
#masthead .main-header-menu
.menu-item.meridian-nav-booking > .menu-link:focus-visible {
    outline: 2px solid #084d2b;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(11, 107, 58, 0.18);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    #masthead .main-header-menu
    .menu-item.meridian-nav-booking > .menu-link {
        transition: none;
    }

    #masthead .main-header-menu
    .menu-item.meridian-nav-booking > .menu-link:hover {
        transform: none;
    }
}



/* =========================================================
   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;
}


/* =========================================================
   5. POINTER / HOVER INTERACTION
   Capability query — not a layout breakpoint.
   ========================================================= */

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

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


/* =========================================================
   6. STICKY HEADER
   ========================================================= */

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

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


/* =========================================================
   7. WORDPRESS ADMIN BAR

   WordPress itself changes Admin Bar height at these widths.
   These are platform-specific rules, not Meridian layout
   breakpoints, so they remain separate.
   ========================================================= */

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;
	}
}


/* =========================================================
   8. ASTRA MOBILE NAVIGATION

   Astra controls when its mobile navigation is visible.
   Meridian only controls presentation.

   Because these selectors target Astra mobile-menu markup,
   they do not require a Meridian viewport breakpoint.
   ========================================================= */

#masthead #ast-hf-mobile-menu > .main-header-menu {
	background: #EAF4FA !important;
}

#masthead .main-header-bar-navigation.toggle-on {
	min-height: calc(100dvh - 128px);
	background: #EAF4FA;
}

#masthead #ast-hf-mobile-menu > .main-header-menu > .menu-item > .menu-link {
	min-height: 52px;
	padding: 14px 20px;

	background: transparent !important;

	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.35;
}

#masthead #ast-hf-mobile-menu > .main-header-menu > .menu-item {
	border-bottom: 1px solid rgb(11 46 79 / 8%);
}


/* =========================================================
   ASTRA MOBILE MENU — BOOK APPOINTMENT CTA SPACING
   ========================================================= */

/* Inset the booking menu item */
#masthead #ast-hf-mobile-menu
li.menu-item.meridian-nav-booking {
    box-sizing: border-box;
    padding: 12px 20px !important;
}

/* Fit the green button inside the padded menu item */
#masthead #ast-hf-mobile-menu
li.menu-item.meridian-nav-booking > a.menu-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    min-height: 48px;

    margin: 0 !important;
    padding: 12px 18px !important;

    background: #0B6B3A !important;
    border-radius: 8px;

    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Hover and keyboard focus */
#masthead #ast-hf-mobile-menu
li.menu-item.meridian-nav-booking > a.menu-link:hover,
#masthead #ast-hf-mobile-menu
li.menu-item.meridian-nav-booking > a.menu-link:focus-visible {
    background: #084d2b !important;
    color: #FFFFFF !important;
}



/* =========================================================
   9. 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);
}


/* =========================================================
   10. 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;
}


/* =========================================================
   11. 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;
}


/* =========================================================
   12. 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;
}


/* =========================================================
   13. 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%);
}


/* =========================================================
   14. 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);
}


/* =========================================================
   15. FOOTER COPYRIGHT
   ========================================================= */

.footer-copyright {
	box-sizing: border-box;

	width: 100%;

	margin: 0 !important;
	padding: 12px 24px !important;

	border-top: 1px solid rgb(11 46 79 / 10%);

	background: var(--meridian-white);

	color: var(--meridian-deep);

	font-size: 0.8rem;
	line-height: 1.5;

	text-align: center !important;
}


/* =========================================================
   16. RESPONSIVE LAYOUT
   MATERIAL WINDOW SIZE CLASSES

   Compact       < 600px
   Medium        600px — 839.98px
   Expanded      840px — 1199.98px
   Large         1200px — 1599.98px
   Extra-large   >= 1600px

   Base footer styles are intentionally optimized for
   Large and Extra-large windows.

   Only classes requiring layout changes receive queries.
   ========================================================= */


/* =========================================================
   COMPACT
   < 600px

   Phones and other narrow application windows.
   ========================================================= */

@media (max-width: 599.98px) {

	.meridian-emergency.meridian-container {
		width: calc(100% - 72px) !important;
		max-width: none;
		margin-inline: auto !important;
		margin-bottom: 30px !important;
	}

	.home .meridian-trust-grid {
		padding-inline: 16px;
	}

	.home .meridian-doctors .doctors-grid {
		box-sizing: border-box;
		width: 100%;
		padding-inline: 16px;
	}

	.home .contact-grid {
		box-sizing: border-box;
		width: 100%;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 16px;
	}


	.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: 0;
	}

	.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;
	}

	.footer-copyright {
		box-sizing: border-box;

		width: 100%;

		margin: 0 !important;
		padding: 12px 16px !important;

		border-top: 1px solid rgb(11 46 79 / 10%);

		background: #ffffff !important;
		color: #0B2E4F !important;

		font-size: 0.78rem;
		line-height: 1.5;

		text-align: center !important;

		visibility: visible !important;
		opacity: 1 !important;
	}

	.about-cta {
		padding-top: var(--meridian-space-48) !important;
		padding-bottom: var(--meridian-space-64) !important;
	}

	.about-cta .meridian-container {
		width: calc(100% - 48px);
		max-width: none;
		margin-inline: auto;
	}

}


/* =========================================================
   MEDIUM
   600px — 839.98px

   Large phones, foldables and medium-width application
   windows.

   Footer remains single-column for stronger readability,
   but gains additional horizontal breathing room.
   ========================================================= */

@media (min-width: 600px) and (max-width: 839.98px) {

	.meridian-footer {
		padding: 46px 24px 22px;
	}

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

		align-items: start;

		gap: 18px;

		margin-bottom: 32px;
	}

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

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

	.meridian-footer .footer-brand p {
		max-width: 58ch;
	}

	.meridian-footer .footer-grid {
		grid-template-columns: 1fr;

		gap: 32px;
	}

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


/* =========================================================
   EXPANDED
   840px — 1199.98px

   Tablet landscape and expanded application windows.

   Three-column footer becomes practical without crowding.
   ========================================================= */

@media (min-width: 840px) and (max-width: 1199.98px) {

   #masthead #ast-hf-menu-1 {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: max-content;
        max-width: none;
    }

    /* Regular navigation links */
    #masthead #ast-hf-menu-1
    > .menu-item:not(.meridian-nav-booking) > .menu-link {
        padding-inline: 7px;
        white-space: nowrap;
    }

    /* Booking CTA */
    #masthead #ast-hf-menu-1
    > .menu-item.meridian-nav-booking > .menu-link {
        min-height: 44px;
        padding: 10px 12px;
        white-space: nowrap;
    }


	.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;
	}
}