/* ============================================================
   Full-screen accordion mobile menu (.nt-mnav)
   Built by js/mobile-nav.js as progressive enhancement.
   Spec: docs/superpowers/specs/2026-08-29-mobile-nav-fullscreen-accordion-design.md

   Lives in its own file (moved out of style.css 2026-08-30) so the menu's
   styles are enqueued under a fresh URL no browser has ever cached —
   style.css was pinned to the parent theme's ?ver= and went stale on
   riders' phones. Version lives in functions.php ('nt-mobile-nav-css').
   ============================================================ */

/* Hide Salient's own dropdown once the enhancement is active — from
   everyone, including assistive tech (it must never be announced twice). */
body.nt-mobile-nav-enhanced #header-outer #mobile-menu {
	display: none !important;
}

/* Scroll lock that preserves position (iOS-safe: overflow:hidden alone
   does not stop body scroll in Safari; position:fixed does). JS stores
   the scroll offset in body.style.top and restores it on close. */
body.nt-mnav-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

.nt-mnav {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above #header-outer and admin bar */
	background: #ffffff;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.nt-mnav[hidden] {
	display: none;
}

.nt-mnav.is-open {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.nt-mnav {
		transition: none;
		transform: none;
	}
}

/* Top bar: mirrors the site's contained header — rounded outlined box with
   the cloned logo left and Close where the hamburger was. Shown at every
   width (the closed phone header is flat, but the user wants the outline
   kept inside the open menu). */
.nt-mnav__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 23px 12px;
	padding: 12px 18px;
	border: 1px solid #000014;
	border-radius: 10px;
}

.nt-mnav__title {
	font-weight: 700;
	font-size: 15px;
	color: #12242b;
}

/* Cloned header logo. When the logo couldn't be found, the "Menu" title
   remains as the fallback label — otherwise the logo replaces it. */
.nt-mnav__brand {
	display: block;
}

/* Fallback size only — on open, JS copies the header logo's actual rendered
   height onto the clone so the logo stays the same size as the closed header. */
.nt-mnav__brand img {
	display: block;
	height: 40px;
	width: auto;
}

.nt-mnav__brand + .nt-mnav__title {
	display: none;
}

/* Wider margins in the tablet band, matching the contained header there. */
@media (min-width: 1000px) {
	.nt-mnav__bar {
		margin: 24px 8% 14px;
		padding: 15px 24px;
	}

}

.nt-mnav__close {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: #12242b;
	padding: 6px 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.nt-mnav__close:focus-visible {
	outline: 2px solid #00677f;
	outline-offset: 2px;
}

/* Scroll area */
.nt-mnav__scroll {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	position: relative; /* anchor for offsetTop scroll-to-open-bar */
}

.nt-mnav__sections {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nt-mnav__sections > li {
	margin: 0;
}

/* Section bars — 4-step brand gradient by position; anything past the
   fourth section falls back to the darkest navy (the default below). */
.nt-mnav__secbtn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 17px 20px;
	border: 0;
	cursor: pointer;
	background: #042935;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	font-family: inherit;
	line-height: 1.3;
}

/* Square corners: the Customizer's "slightly rounded" button option injects
   body[data-button-style*="slightly_rounded"] button { border-radius: 5px !important }
   (specificity 0,1,2) — needs two classes plus !important to beat it. */
.nt-mnav .nt-mnav__secbtn,
.nt-mnav .nt-mnav__close {
	border-radius: 0 !important;
}

.nt-mnav__sections > li:nth-child(1) .nt-mnav__secbtn { background: #005D72; }
.nt-mnav__sections > li:nth-child(2) .nt-mnav__secbtn { background: #07495F; }
.nt-mnav__sections > li:nth-child(3) .nt-mnav__secbtn { background: #053747; }
.nt-mnav__sections > li:nth-child(4) .nt-mnav__secbtn { background: #042935; }

.nt-mnav__secbtn:focus-visible {
	outline: 3px solid #FFD166;
	outline-offset: -3px;
}

.nt-mnav__chev {
	flex: none;
	display: inline-flex;
	transition: transform 0.25s;
}

@media (prefers-reduced-motion: reduce) {
	.nt-mnav__chev {
		transition: none;
	}
}

.nt-mnav__sections > li.is-open .nt-mnav__chev {
	transform: rotate(180deg);
}

/* Leaf rows (Service Alerts) */
.nt-mnav__leaf {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 17px 20px;
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a !important;
	text-decoration: none;
	border-bottom: 1px solid #e6e6e2;
	box-sizing: border-box;
}

.nt-mnav__leaf--alert {
	background: #FFE2A1;
	color: #1a2e35 !important;
	border-bottom: 0;
}

.nt-mnav__leaf:focus-visible {
	outline: 3px solid #053747;
	outline-offset: -3px;
}

/* Open-section panel: grey ground, every link a white pill (approved
   pill-demo, 2026-08-29). Icons and descriptions flow from the WP menu —
   Salient's menu icon (image or font icon) and the item description. */
.nt-mnav__panel {
	background: #ECECE8;
	border-bottom: 1px solid #e0e0dc;
	padding: 6px 14px 16px;
}

.nt-mnav__group {
	padding: 16px 8px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #54636a;
}

.nt-mnav__link {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: #ffffff;
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.3;
	color: #1a1a1a !important;
	text-decoration: none;
}

.nt-mnav__link:focus-visible {
	outline: 2px solid #00677f;
	outline-offset: -2px;
}

.nt-mnav__link-label {
	display: block;
	font-weight: 600;
}

.nt-mnav__text {
	min-width: 0;
}

.nt-mnav__icon {
	flex: none;
	width: 23px;
	height: 23px;
	margin-top: 1px;
}

.nt-mnav__icon--img {
	object-fit: contain;
	border-radius: 5px;
}

.nt-mnav__icon--font {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #00677f;
	line-height: 1;
}

.nt-mnav__desc {
	display: block;
	font-size: 13px;
	color: #5d6b70;
	font-weight: 400;
	margin-top: 3px;
	line-height: 1.4;
}

/* Footer: white pill grid (socials + double-width Customer Service) on the
   same grey as the open panels; the JS sets grid-template-columns to fit
   however many social links the theme options provide. */
.nt-mnav__footer {
	background: #ECECE8;
	padding: 14px 14px 20px;
}

.nt-mnav__social {
	display: grid;
	gap: 8px;
}

.nt-mnav__spill {
	background: #ffffff;
	border-radius: 10px;
	padding: 12px 4px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: #12242b !important;
	text-decoration: none;
	text-align: center;
}

.nt-mnav__spill:focus-visible {
	outline: 2px solid #00677f;
	outline-offset: -2px;
}

.nt-mnav__spill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #00677f;
}

.nt-mnav__spill-icon i {
	font-size: 20px;
	color: #00677f;
	line-height: 1;
}

.nt-mnav__spill-icon img,
.nt-mnav__spill-icon svg {
	width: 22px;
	height: 22px;
}

.nt-mnav__spill-label {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
}

/* Defensive: no outside stylesheet may inject spacing, markers, or borders
   into the menu list — the structure below must always render flush. */
.nt-mnav__sections,
.nt-mnav__sections > li,
.nt-mnav__sections > li > .nt-mnav__secbtn,
.nt-mnav__sections > li > .nt-mnav__leaf {
	margin: 0 !important;
	list-style: none !important;
}

.nt-mnav__sections > li::before,
.nt-mnav__sections > li::after {
	content: none !important;
	display: none !important;
}

.nt-mnav__panel[hidden] {
	display: none !important;
}