/**
 * Alta hardcoded primary nav — standalone styles.
 * Decoupled from compiled Tailwind so it works without a rebuild.
 */

/* Panels: hidden by default, shown via .is-open or desktop hover */
.alta-nav-panel { display: none; }
.alta-nav-item.is-open > .alta-nav-panel { display: block; }

/* ========== DESKTOP (>=1024px) ========== */
@media (min-width: 1024px) {

	.alta-nav-item { position: relative; }
	.alta-nav-item--mega { position: static; }

	.alta-nav-item:hover > .alta-nav-panel,
	.alta-nav-item:focus-within > .alta-nav-panel,
	.alta-nav-item.is-open > .alta-nav-panel { display: block; }

	/* shared panel chrome */
	.alta-nav-panel {
		position: absolute;
		top: 100%;
		z-index: 40;
		background: #ffffff;
		box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
		border-top: 1px solid #f3f4f6;
	}

	/* Standard dropdown — anchored under trigger */
	.alta-nav-dropdown {
		left: 50%;
		transform: translateX(-50%);
		margin-top: 0.75rem;
		min-width: 320px;
		border-radius: 20px;
		border: 1px solid #f3f4f6;
		padding: 1.5rem;
	}
	/* Invisible bridge over the 0.75rem gap — keeps :hover alive while
	   the cursor crosses from the trigger to the panel. Without this,
	   the hover dies in the gap and the dropdown closes mid-traverse. */
	.alta-nav-dropdown::before {
		content: '';
		position: absolute;
		top: -0.75rem;
		left: 0;
		right: 0;
		height: 0.75rem;
	}
	.alta-nav-dropdown--long {
		min-width: 520px;
	}
	.alta-nav-dropdown__list {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.alta-nav-dropdown--long .alta-nav-dropdown__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
		row-gap: 0.25rem;
	}
	.alta-nav-dropdown__list a {
		display: block;
		font-size: 0.875rem;
		line-height: 1.4;
		padding: 0.375rem 0;
		color: #1f2937;
		text-decoration: none;
		transition: color 0.15s ease;
	}
	.alta-nav-dropdown__list a:hover { color: #78d64b; }
	.alta-nav-dropdown__list a.is-featured {
		font-weight: 700;
		color: #004c45;
	}

	/* Mega menu — anchored to viewport so middle 4 sub-columns get real
	   space. The nav element is only as wide as its content, so we can't
	   use simple left:0/right:0. */
	.alta-mega {
		left: 50%;
		right: auto;
		width: 90vw;
		max-width: 100vw;
		transform: translateX(-50%);
		border-radius: 20px;
        border: 1px solid #f3f4f6;
	}
	.alta-mega__inner {
		max-width: 1560px;
		margin: 0 auto;
		padding: 2.5rem 2.5rem;
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr) 220px;
		gap: 2.5rem;
	}
	/* Override theme's .menu-item a { white-space: nowrap } so long item
	   labels wrap inside the panel instead of overflowing the column. */
	.alta-mega__col a,
	.alta-mega__promo-link,
	.alta-nav-dropdown__list a {
		white-space: normal;
	}
	.alta-mega__promo-eyebrow,
	.alta-mega__col-label,
	.alta-mega__cta-eyebrow {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}
	.alta-mega__promo-eyebrow { color: #004c45; }
	.alta-mega__promo-title {
		font-size: 22px;
		line-height: 1.2;
		font-weight: 700;
		letter-spacing: -0.015em;
		color: #111827;
		margin: 0.5rem 0;
	}
	.alta-mega__promo-lede {
		font-size: 0.875rem;
		line-height: 1.5;
		color: #4b5563;
		max-width: 28ch;
		margin: 0;
	}
	.alta-mega__promo-link {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-top: 1rem;
		font-size: 13px;
		font-weight: 700;
		color: #004c45;
		border-bottom: 1px solid #004c45;
		padding-bottom: 2px;
		text-decoration: none;
	}
	.alta-mega__promo-link:hover { opacity: 0.8; }
	.alta-mega__cols {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 1.5rem;
		row-gap: 1.75rem;
	}
	.alta-mega__col-label {
		color: #6b7280;
		margin-bottom: 0.75rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid #f3f4f6;
	}
	.alta-mega__col ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.alta-mega__col a {
		display: block;
		font-size: 0.875rem;
		line-height: 1.4;
		padding: 0.375rem 0;
		color: #1f2937;
		text-decoration: none;
		transition: color 0.15s ease;
	}
	.alta-mega__col a:hover { color: #78d64b; }
	.alta-mega__cta {
		background: #0f2e22;
		color: #ffffff;
		border-radius: 16px;
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 260px;
	}
	.alta-mega__cta-eyebrow {
		color: #78d64b;
		letter-spacing: 0.16em;
	}
	.alta-mega__cta-title {
		font-size: 22px;
		font-weight: 700;
		letter-spacing: -0.015em;
		line-height: 1.15;
		margin-top: 0.625rem;
	}
	.alta-mega__cta-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		background: #78d64b;
		color: #0f2e22;
		font-weight: 700;
		font-size: 0.875rem;
		padding: 0.75rem 1rem;
		border-radius: 999px;
		text-decoration: none;
		transition: background-color 0.15s ease;
	}
	.alta-mega__cta-button:hover { background: #85f054; }
	.alta-mega__cta-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.375rem;
		margin-top: 0.75rem;
		font-size: 0.75rem;
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none;
	}
	.alta-mega__cta-phone:hover { color: #ffffff; }
}

/* ========== MOBILE (<1024px) ========== */
@media (max-width: 1023.98px) {
	.alta-nav-panel {
		width: 100%;
		background: transparent;
		padding: 0.5rem 1.15rem 0.75rem;
	}
	.alta-nav-dropdown__list,
	.alta-mega__col ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	.alta-nav-dropdown__list a,
	.alta-mega__col a,
	.alta-mega__promo-link,
	.alta-mega__cta-button,
	.alta-mega__cta-phone {
		display: block;
		font-size: 0.875rem;
		padding: 0.5rem 0;
		color: #ffffff;
		text-decoration: none;
	}
	.alta-mega__inner {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}
	.alta-mega__cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
	.alta-mega__col-label,
	.alta-mega__promo-eyebrow,
	.alta-mega__cta-eyebrow {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: #c8ed5f;
		margin-bottom: 0.5rem;
	}
	.alta-mega__promo-title,
	.alta-mega__cta-title {
		font-size: 1rem;
		font-weight: 700;
		color: #ffffff;
		margin: 0 0 0.5rem;
	}
	.alta-mega__promo-lede {
		font-size: 0.8125rem;
		color: rgba(255, 255, 255, 0.8);
		margin: 0 0 0.5rem;
	}
	.alta-mega__cta {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 12px;
		padding: 1rem;
	}
	.alta-mega__cta-button {
		background: #78d64b;
		color: #0f2e22;
		font-weight: 700;
		text-align: center;
		border-radius: 999px;
		padding: 0.625rem 1rem;
		margin-top: 0.5rem;
	}

	/* Top-level menu rows: left-align, full-width, with dividers */
	#primary-menu .alta-nav-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	#primary-menu .alta-nav-item .nav-item-content {
		justify-content: space-between;
		margin: 0;
		padding: 0 1.15rem;
		width: 100%;
	}
	#primary-menu .alta-nav-item .alta-nav-trigger {
		justify-content: flex-start;
		margin: 0;
		padding: 1.1rem 0;
		flex: 1;
		text-align: left;
	}
	#primary-menu .alta-nav-item .alta-nav-trigger .item-name {
		text-align: left;
		font-size: 1rem;
	}
	#primary-menu .alta-nav-item .alta-nav-caret {
		padding: 0 0.5rem;
		flex-basis: auto;
	}

	/* Bottom CTA block inside the mobile drawer */
	.alta-nav-mobile-cta {
		list-style: none;
		padding: 1.5rem 1.15rem 2rem;
		display: flex;
		flex-direction: column;
		gap: 0.875rem;
		align-items: stretch;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		margin-top: 0.5rem;
	}
	.alta-nav-mobile-cta__button {
		background: #78d64b;
		color: #0f2e22;
		font-weight: 700;
		font-size: 0.95rem;
		padding: 0.875rem 1.5rem;
		border-radius: 999px;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		transition: background-color 0.15s ease;
	}
	.alta-nav-mobile-cta__button:hover {
		background: #85f054;
	}
	.alta-nav-mobile-cta__phone {
		color: #ffffff;
		font-weight: 600;
		font-size: 0.95rem;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}
	.alta-nav-mobile-cta__phone svg {
		flex-shrink: 0;
	}
}

/* Hide the mobile CTA on desktop */
@media (min-width: 1024px) {
	.alta-nav-mobile-cta {
		display: none;
	}
}

/* ========== Caret affordance (rotation when open) ========== */
.alta-nav-caret {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.alta-nav-item.is-open > div .alta-nav-caret {
	transform: rotate(180deg);
}

/* ========== Coming Soon (visually identical to clickable items, but disabled) ========== */
.alta-coming-soon {
	display: block;
	color: #1f2937;
	cursor: not-allowed;
	font-size: 0.875rem;
	line-height: 1.4;
	padding: 0.375rem 0;
	user-select: none;
}
/* Mobile drawer variant — match white link color and the regular item's
   font-size + padding so coming-soon rows don't look tighter than the
   clickable ones above/below. */
@media (max-width: 1023.98px) {
	.alta-mega__col .alta-coming-soon,
	.alta-nav-dropdown__list .alta-coming-soon,
	.alta-coming-soon {
		color: #ffffff !important;
		font-size: 0.875rem;
		padding: 0.5rem 0;
		line-height: 1.4;
	}
}
/* Top-level trigger marked coming-soon — dropdown still opens via
   hover/click; JS intercepts the click to prevent the href="#" jump. */
.alta-nav-trigger.is-coming-soon { cursor: default; }