/**
 * CW Mega Menu.
 *
 * Panel content uses only the site's (theme) and the blocks' styling. Block
 * settings and block Custom CSS take priority over this file, which only:
 * - positions the panel and styles the menu item that opens it,
 * - undoes the header's nav styles so they don't leak into panel content,
 * - draws the new-tab markers and the panel block styles' icons.
 */

.cwmm-has-panel {

	/* Open-item highlight is off; set a color here to turn it on. */
	--cwmm-active-bg: transparent;
	--cwmm-active-ink: inherit;
	--cwmm-active-extend: 0.6em;
	--cwmm-surface: #fff;
	--cwmm-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.25);
	--cwmm-content-width: 1440px;
	--cwmm-z: 1000;
	--cwmm-label-color: #5b6676;
	--cwmm-link-hover: #0038e1;
	--cwmm-current-bg: #0038e1;
	--cwmm-current-ink: #fff;

	/* Open-in-new-window icon (box with an arrow). */
	--cwmm-new-window: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272.6%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%20d=%27M11%204H7a3%203%200%200%200-3%203v10a3%203%200%200%200%203%203h10a3%203%200%200%200%203-3v-4M14%204h6v6M20%204l-9%209%27/%3E%3C/svg%3E);
	--cwmm-arrow-e: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%20d=%27M2.5%208h11M9%203.5L13.5%208%209%2012.5%27/%3E%3C/svg%3E);
}

/* Menu item: the link and the "submenu-expand" button use the theme's own
   markup and classes, so the theme styles them like its other dropdowns. */

/* Open highlight: a layer behind the item. JS sets --cwmm-hl-top/bottom so
   it spans the full height of the header bar, not just the item; it's also
   a little wider than the item, without shifting the other items. */

/* Lift the open item, and the panel inside it, above the page content.
   The item is position: relative on desktop (below), so z-index applies. */
.cwmm-has-panel.cwmm-is-open,
.cwmm-has-panel.cwmm-is-open.cwmm-current-fallback {
	z-index: var(--cwmm-z, 1000);
}

.cwmm-has-panel.cwmm-is-open::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--cwmm-hl-top, 0);
	right: calc(var(--cwmm-active-extend) * -1);
	bottom: var(--cwmm-hl-bottom, 0);
	left: calc(var(--cwmm-active-extend) * -1);
	background: var(--cwmm-active-bg);
	pointer-events: none;
}

/* Current section (a panel link points at this page). The theme styles the
   item through WordPress's current-menu-ancestor class; if it doesn't, the
   script adds .cwmm-current-fallback and this draws the background. */
.cwmm-has-panel.cwmm-current-fallback {
	z-index: 1;
}

.cwmm-has-panel.cwmm-current-fallback::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--cwmm-hl-top, 0);
	right: calc(var(--cwmm-active-extend) * -1);
	bottom: var(--cwmm-hl-bottom, 0);
	left: calc(var(--cwmm-active-extend) * -1);
	background: var(--cwmm-current-bg);
	pointer-events: none;
}

.cwmm-has-panel.cwmm-current-fallback > a,
.cwmm-has-panel.cwmm-current-fallback > .cwmm-toggle {
	color: var(--cwmm-current-ink);
}

.cwmm-has-panel.cwmm-is-open > a,
.cwmm-has-panel.cwmm-is-open > .cwmm-toggle {
	color: var(--cwmm-active-ink);
}

@media (min-width: 782px) {

	/* Anchor for the highlight layer. */
	.cwmm-has-panel {
		position: relative;
	}
}

/* Panel shell. JS stretches it full width, under the header bar. It starts
   from plain body text so the header's nav text styles don't carry in. */

.cwmm-has-panel .cwmm-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 100vw;
	box-sizing: border-box;
	background: var(--cwmm-surface);
	box-shadow: var(--cwmm-shadow);
	color: var(--newspack-theme-color-text-main, #111);
	font-family: var(--newspack-theme-font-body, inherit);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
}

.cwmm-has-panel .cwmm-panel[hidden] {
	display: none;
}

.cwmm-panel__inner {
	box-sizing: border-box;
	max-width: var(--cwmm-content-width);
	margin: 0 auto;
	padding: 2.5rem;
}

.cwmm-panel__inner > :first-child {
	margin-top: 0;
}

.cwmm-panel__inner > :last-child {
	margin-bottom: 0;
}

.cwmm-inline .cwmm-panel__inner {
	padding: 0 1rem 1rem;
}

.cwmm-inline .cwmm-panel__inner .wp-block-columns {
	flex-direction: column !important;
	gap: 0 !important;
}

/* Undo theme nav rules inside the panel, at the lowest priority that still
   works, so anything a block sets wins: presets, custom values, Link color,
   and block custom CSS.
   - Lists: :where() keeps these at one class, which block classes and block
     custom CSS tie or beat (block CSS prints later, so it wins ties).
   - Links: one class + element, enough to beat a theme rule like
     ".main-navigation a" (this file loads after the theme) while tying with
     block link rules like ".wp-elements-x a", which print later and win. */

.cwmm-panel :where(ul, ol) {
	display: revert;
	position: static;
	float: none;
	background: none;
	box-shadow: none;
}

.cwmm-panel :where(li) {
	display: revert;
	position: static;
	float: none;
	background: none;
}

/* stylelint-disable-next-line no-descending-specificity -- panel links */
.cwmm-panel a {
	display: inline;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: inherit;
}

.cwmm-panel a:hover {
	color: var(--cwmm-link-hover);
	text-decoration: underline;
}

.cwmm-panel :where(a:focus-visible) {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

/* Block styles (chosen in the editor's Styles panel). Layout and icons only. */

.cwmm-panel .is-style-cwmm-plain,
.cwmm-panel .is-style-cwmm-rows {
	list-style: none;
}

/* Link rows: title on the left, new-window icon pushed to the right. */
.cwmm-panel .is-style-cwmm-rows > li > a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
}

.cwmm-panel .is-style-cwmm-cta a::after,
.cwmm-panel .is-style-cwmm-cta-alt a::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.5em;
	vertical-align: -0.12em;
	background-color: currentcolor;
	-webkit-mask: var(--cwmm-arrow-e) center / contain no-repeat;
	mask: var(--cwmm-arrow-e) center / contain no-repeat;
	transition: transform 0.15s ease;
}

.cwmm-panel .is-style-cwmm-cta a:hover::after,
.cwmm-panel .is-style-cwmm-cta-alt a:hover::after {
	transform: translateX(3px);
}

.cwmm-panel .is-style-cwmm-note::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.35em;
	vertical-align: -0.05em;
	background-color: currentcolor;
	-webkit-mask: var(--cwmm-new-window) center / contain no-repeat;
	mask: var(--cwmm-new-window) center / contain no-repeat;
}

/* New-window icon on external text links. Blocks can't reach it, so its
   size is relative to the link and its color is a variable above.
   Inline-flex keeps the link's hover underline off it. */

.cwmm-ext {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	margin-left: 0.35em;
	color: var(--cwmm-label-color);
	font-size: 0.8em;
	font-weight: 400;
	white-space: nowrap;
}

/* The new-window icon follows the link's hover color. */
.cwmm-panel a:hover .cwmm-ext {
	color: inherit;
}

.cwmm-panel .is-style-cwmm-rows > li > a > .cwmm-ext {
	margin-left: 0;
}

.cwmm-ext-icon {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	background-color: currentcolor;
	-webkit-mask: var(--cwmm-new-window) center / contain no-repeat;
	mask: var(--cwmm-new-window) center / contain no-repeat;
}

@media (forced-colors: active) {

	.cwmm-ext-icon,
	.cwmm-panel .is-style-cwmm-note::before,
	.cwmm-panel .is-style-cwmm-cta a::after,
	.cwmm-panel .is-style-cwmm-cta-alt a::after {
		forced-color-adjust: none;
		background-color: LinkText;
	}
}

/* Inline mode: the script adds .cwmm-inline to items in the slide-out
   (mobile) menu and to every item on small screens. The panel then opens
   in place, under its item, like an accordion. */

.cwmm-has-panel.cwmm-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.cwmm-has-panel.cwmm-inline > .cwmm-toggle {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.25em;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.cwmm-has-panel.cwmm-inline > .cwmm-toggle svg {
	fill: currentcolor;
	transition: transform 0.15s ease;
}

.cwmm-has-panel.cwmm-inline > .cwmm-toggle.open-dropdown svg {
	transform: rotate(180deg);
}

.cwmm-has-panel.cwmm-inline::before {
	display: none;
}

.cwmm-has-panel.cwmm-inline .cwmm-panel {
	position: static;
	flex-basis: 100%;
	width: auto;
	background: transparent;
	box-shadow: none;
}

.cwmm-has-panel.cwmm-inline .cwmm-panel__inner {
	padding: 0.75rem 0 1rem;
}

.cwmm-has-panel.cwmm-inline .cwmm-panel .is-style-cwmm-rows > li > a {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

/* Show or hide a block per menu: add one of these in the block's
   Advanced > Additional CSS class(es). "Desktop" is the full-width panel
   under the header bar; "mobile" is the slide-out menu and small screens.
   !important so it also wins over a block's own layout display. */

.cwmm-has-panel:not(.cwmm-inline) .cwmm-panel .cwmm-hide-desktop,
.cwmm-has-panel.cwmm-inline .cwmm-panel .cwmm-hide-mobile {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.cwmm-has-panel.cwmm-inline > .cwmm-toggle svg {
		transition: none;
	}

	.cwmm-panel .is-style-cwmm-cta a::after,
	.cwmm-panel .is-style-cwmm-cta-alt a::after {
		transition: none;
	}
}