/* ABOUTME: Styles Yak/Genesis main navigation items flagged as YCVDS mega menus. */
/* ABOUTME: Turns menu-class hierarchy into guided, token-aligned content panels. */

.yak-main-nav {
	--ycvds-mega-panel-max-width: min(52rem, calc(100vw - 1.5rem));
	--ycvds-mega-panel-width: var(--ycvds-mega-panel-max-width);
	--ycvds-mega-panel-bg: var(--ycvds-color-surface, #fff);
	--ycvds-mega-panel-border: color-mix(
		in srgb,
		var(--ycvds-color-text, #1a1a2e) 14%,
		transparent
	);
	--ycvds-mega-panel-shadow: 0 24px 70px rgb(18 24 66 / 16%);
	--ycvds-mega-card-bg: color-mix(
		in srgb,
		var(--ycvds-color-muted, #dce3ea) 24%,
		var(--ycvds-color-surface, #fff)
	);
	--ycvds-mega-card-border: color-mix(
		in srgb,
		var(--ycvds-color-text, #1a1a2e) 12%,
		transparent
	);
	--ycvds-mega-focus: var(--ycvds-color-accent, #f26522);

	position: relative;
}

.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega {
	position: static;
}

.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > a {
	position: relative;
}

@media (min-width: 782px) {
	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) {
		position: relative;
	}

	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu {
		position: absolute;
		z-index: 998;
		top: calc(100% + 0.35rem);
		left: 0;
		right: auto;
		display: grid;
		gap: 0.1rem;
		width: min(12.75rem, calc(100vw - 1.5rem));
		margin: 0;
		padding: 0.7rem 0.85rem;
		list-style: none;
		background: var(--ycvds-mega-panel-bg);
		border: 1px solid var(--ycvds-mega-panel-border);
		border-radius: var(--ycvds-radius-lg, 0.75rem);
		box-shadow: var(--ycvds-mega-panel-shadow);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(0.35rem);
		transition:
			opacity 180ms ease,
			visibility 180ms ease,
			transform 180ms ease;
	}

	/* Covers the pointer tunnel between a regular trigger and its dropdown. */
	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 0.45rem;
	}

	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega):is(:hover, :focus-within) > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu li {
		margin: 0;
		list-style: none;
	}

	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		padding: 0.38rem 0.5rem;
		font-size: var(--ycvds-font-size-base, 1rem);
		font-weight: var(--ycvds-weight-bold, 700);
		line-height: 1.2;
		color: var(--ycvds-color-text, #1a1a2e);
		text-decoration: none;
		border-radius: var(--ycvds-radius-sm, 0.25rem);
		background: transparent;
		transition: color 160ms ease, background 160ms ease;
	}

	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu a:visited {
		color: var(--ycvds-color-text, #1a1a2e);
	}

	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu a:hover,
	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu a:focus-visible {
		color: var(--ycvds-color-accent, #f26522);
		background: color-mix(in srgb, var(--ycvds-color-text, #1a1a2e) 6%, transparent);
		text-decoration: none;
	}

	.yak-main-nav:not(.yak-mobile-menu) > .menu-item-has-children:not(.yak-has-mega) > .sub-menu a:focus-visible {
		outline: 2px solid var(--ycvds-mega-focus);
		outline-offset: 3px;
	}

	/* Arrow indicator — all top-level dropdown triggers (mega + regular one-level),
	   not column headings. Keeps Voter Guide, Get Involved, and About chevrons identical. */
	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega > a::after,
	.yak-main-nav:not(.yak-mobile-menu) > li.menu-item-has-children:not(.yak-has-mega) > a::after {
		content: "";
		display: inline-block;
		width: 0.45em;
		height: 0.45em;
		margin-left: 0.45em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-0.18em) rotate(45deg);
		transition: transform 180ms ease;
	}

	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega:is(:hover, :focus-within, .is-mega-open) > a::after,
	.yak-main-nav:not(.yak-mobile-menu) > li.menu-item-has-children:not(.yak-has-mega):is(:hover, :focus-within) > a::after {
		transform: translateY(0) rotate(225deg);
	}

	/* Panel — top-level mega triggers only. Column headings (.yak-mega-column) also carry
	   .yak-has-mega but must NOT get flyout treatment; they are scoped out by > li. */
	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega > .sub-menu {
		position: absolute;
		z-index: 999;
		top: calc(100% + 0.35rem);
		right: 0;
		left: auto;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: stretch;
		gap: clamp(0.65rem, 1vw, 0.9rem);
		width: var(--ycvds-mega-panel-width);
		max-width: var(--ycvds-mega-panel-max-width);
		margin: 0;
		padding: clamp(0.75rem, 1.2vw, 1rem);
		list-style: none;
		background: var(--ycvds-mega-panel-bg);
		border: 1px solid var(--ycvds-mega-panel-border);
		border-radius: var(--ycvds-radius-lg, 0.75rem);
		box-shadow: var(--ycvds-mega-panel-shadow);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(0.35rem);
		transition:
			opacity 180ms ease,
			visibility 180ms ease,
			transform 180ms ease;
	}

	/* Smart column count — JS sets .ycvds-mega-count-N on the panel. */
	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega > .sub-menu.ycvds-mega-count-1 {
		grid-template-columns: 1fr;
		--ycvds-mega-panel-width: 16rem;
	}
	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega > .sub-menu.ycvds-mega-count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--ycvds-mega-panel-width: 30rem;
	}
	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega > .sub-menu.ycvds-mega-count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		--ycvds-mega-panel-width: 42rem;
	}
	/* 4+ columns keep the default 4-col grid and panel-max-width. */

	/* Covers the pointer tunnel between the top-level item and the panel. */
	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega > .sub-menu::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 0.45rem;
	}

	.yak-main-nav:not(.yak-mobile-menu) > li.yak-has-mega:is(:hover, :focus-within, .is-mega-open) > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column {
		grid-column: span 1;
		min-width: 0;
		margin: 0;
		padding: clamp(0.65rem, 1vw, 0.85rem);
		list-style: none;
		background: var(--ycvds-mega-card-bg);
		border: 1px solid var(--ycvds-mega-card-border);
		border-radius: var(--ycvds-radius, 0.375rem);
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > a {
		display: inline-flex;
		align-items: center;
		max-width: 100%;
		margin: 0 0 0.32rem;
		padding: 0;
		font-family: var(--ycvds-font-heading, inherit);
		font-size: var(--ycvds-font-size-base, 1rem);
		font-weight: var(--ycvds-weight-bold, 700);
		line-height: 1.18;
		color: var(--ycvds-color-text, #1a1a2e);
		text-decoration: none;
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > a[href="#"],
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > a.ycvds-mega-column-heading {
		display: block;
		margin-bottom: 0.42rem;
		font-family: var(--ycvds-font-heading, inherit);
		font-size: var(--ycvds-font-size-md, 1.0625rem);
		font-weight: var(--ycvds-weight-extrabold, 800);
		line-height: 1.15;
		text-transform: none;
		letter-spacing: 0;
		color: var(--ycvds-color-text, #1a1a2e);
		cursor: default;
		text-decoration: none;
	}

	/* Column heading: orange on hover (hash-link headings are non-interactive but real-URL ones get hover). */
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > a:hover,
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > a:focus-visible {
		color: var(--ycvds-color-accent, #f26522);
		text-decoration: none;
	}
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > a[href="#"]:visited,
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > a.ycvds-mega-column-heading:visited {
		color: var(--ycvds-color-text, #1a1a2e);
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu {
		position: static;
		display: grid;
		gap: 0.06rem;
		width: auto;
		margin: 0;
		padding: 0;
		list-style: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu li {
		margin: 0;
		list-style: none;
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding: 0.18rem 0;
		font-size: var(--ycvds-font-size-sm, 0.875rem);
		font-weight: var(--ycvds-weight-medium, 500);
		line-height: 1.18;
		color: var(--ycvds-color-text, #1a1a2e);
		text-decoration: none;
		border-radius: var(--ycvds-radius-sm, 0.25rem);
		background: transparent;
		transition: color 160ms ease;
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu a:visited {
		color: var(--ycvds-color-text, #1a1a2e);
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu a:hover,
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu a:focus-visible {
		color: var(--ycvds-color-accent, #f26522);
		background: transparent;
		text-decoration: none;
	}

	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu a:focus-visible {
		outline: 2px solid var(--ycvds-mega-focus);
		outline-offset: 3px;
	}

	/* Level-3 items with children: suppress superfish/yak dropdown arrows — they are
	   regular links; level-4 children appear inline below them. */
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu li.menu-item-has-children > a > span.sf-with-ul,
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu li.menu-item-has-children > a > span[class=""] {
		display: none;
	}

	/* Level-4 sub-menu: always static/inline, no flyout, slight indent. */
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu .sub-menu {
		position: static;
		display: grid;
		gap: 0.04rem;
		margin: 0.06rem 0 0.3rem 6px;
		padding: 0;
		list-style: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu .sub-menu li {
		margin: 0;
		list-style: none;
	}
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu .sub-menu a {
		display: block;
		padding: 0.1rem 0;
		font-size: var(--ycvds-font-size-sm, 0.875rem);
		font-weight: var(--ycvds-weight-normal, 400);
		line-height: 1.3;
		color: var(--ycvds-color-text-light, #6b7280);
		text-decoration: none;
		transition: color 160ms ease;
	}
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu .sub-menu a:hover,
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu .sub-menu .sub-menu a:focus-visible {
		color: var(--ycvds-color-accent, #f26522);
		background: transparent;
	}
}

@media (min-width: 960px) {
	.yak-main-nav:not(.yak-mobile-menu) .yak-has-mega > .sub-menu > .yak-mega-column > .sub-menu a {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		padding: 0.18rem 0;
		line-height: 1.18;
	}
}

/* Mobile drawer styles target the cloned menu (.yak-mobile-menu) only, and run to
   959px to match the theme's drawer breakpoint — the drawer is in play from 959px
   down, while the desktop rules above start at 782px. Scoping both sides prevents
   the desktop flyout treatment from leaking into the drawer between 782–959px. */
@media (max-width: 959px) {
	/* Mobile panel — top-level only; column headings show sub-items inline. */
	.yak-main-nav.yak-mobile-menu > li.yak-has-mega > .sub-menu {
		position: static;
		display: none;
		width: auto;
		margin: 0.25rem 0 0;
		padding: 0;
		list-style: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* .is-open is the drawer's own toggle state (yak-mobile-menu.js) — the drawer's
	   plus button sets it; :focus-within alone is unreliable (iOS taps don't focus). */
	.yak-main-nav.yak-mobile-menu > li.yak-has-mega > .sub-menu.is-open,
	.yak-main-nav.yak-mobile-menu > li.yak-has-mega.is-mega-open > .sub-menu,
	.yak-main-nav.yak-mobile-menu > li.yak-has-mega:focus-within > .sub-menu {
		display: block;
	}

	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu > .yak-mega-column {
		margin: 0;
		padding: 0.45rem 0;
		list-style: none;
		border-bottom: 1px solid var(--ycvds-mega-card-border);
	}

	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu > .yak-mega-column:last-child {
		border-bottom: 0;
	}

	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu > .yak-mega-column > a {
		display: block;
		margin: 0 0 0.25rem;
		font-weight: var(--ycvds-weight-bold, 700);
		line-height: 1.2;
		color: var(--ycvds-color-text, #1a1a2e);
		text-decoration: none;
	}

	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu > .yak-mega-column > a[href="#"],
	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu > .yak-mega-column > a.ycvds-mega-column-heading {
		margin-bottom: 0.35rem;
		font-size: var(--ycvds-font-size-base, 1rem);
		font-weight: var(--ycvds-weight-extrabold, 800);
		line-height: 1.15;
		text-transform: none;
		letter-spacing: 0;
		text-decoration: none;
		cursor: default;
	}

	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu .sub-menu {
		position: static;
		display: grid;
		gap: 0.06rem;
		width: auto;
		margin: 0;
		padding: 0;
		list-style: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu .sub-menu a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding: 0.22rem 0;
		line-height: 1.2;
		color: var(--ycvds-color-text, #1a1a2e);
		text-decoration: none;
	}

	/* Level-3 parents: suppress superfish arrows (same as desktop). */
	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu .sub-menu li.menu-item-has-children > a > span.sf-with-ul,
	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu .sub-menu li.menu-item-has-children > a > span[class=""] {
		display: none;
	}

	/* Level-4 mobile — same indent/size as desktop. */
	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu .sub-menu .sub-menu {
		margin: 0.06rem 0 0.3rem 6px;
	}
	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu .sub-menu .sub-menu a {
		font-size: var(--ycvds-font-size-sm, 0.875rem);
		color: var(--ycvds-color-text-light, #6b7280);
	}

	.yak-main-nav.yak-mobile-menu .yak-has-mega > .sub-menu a:focus-visible {
		outline: 2px solid var(--ycvds-mega-focus);
		outline-offset: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yak-main-nav .yak-has-mega > a::after,
	.yak-main-nav .yak-has-mega > .sub-menu,
	.yak-main-nav .yak-has-mega > .sub-menu .sub-menu a {
		transition: none;
	}
}