/* ==========================================================================
   Practice Areas mega menu (2026-09)
   Four groups in a rail, the chosen group's practice areas beside it with a
   one-line description each. The markup is the WordPress menu tree; these
   rules turn it into the panel above 1105px and into a drill-down below,
   and only ever apply to the item carrying the `rd-mega` class.
   ========================================================================== */

/* The current page used to be a direct child of Practice Areas, so main.css highlighted the item
   through `current-menu-parent`. Its practice areas are a level deeper now and WordPress marks the
   item `current-menu-ancestor` instead; without this the header stops showing where you are. */
.header-redesign-bar .menu-main nav > ul > li.rd-mega.current-menu-ancestor > a {
	color: #3CB7FF;
}

/* ---------------------------------------------------------------- desktop */
@media only screen and (min-width: 1106px) {

	/* The panel. main.css sizes every dropdown at 250px and animates all
	   properties; this one is wider, so only the open/close properties move. */
	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu {
		width: min(900px, calc(100vw - 48px));
		left: 50%;
		transform: translateX(-50%);
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		/* One row per group, each as tall as its rail item, plus a last row that takes up
		   whatever height the open pane adds. Without it the panes, which span every row,
		   stretch the rail items to a quarter of the panel each. The script sets the group
		   count; four is what the menu has today. */
		grid-template-rows: repeat(var(--rd-mega-groups, 4), min-content) 1fr;
		/* the rail's background, so its column is filled whatever the pane's height */
		background: linear-gradient(90deg, #F7F8FA 0 260px, #fff 260px);
		border-radius: 0 0 20px 20px;
		box-shadow: 0 24px 60px rgba(20, 30, 60, .18);
		overflow: hidden;
		column-count: initial;
		transition: opacity .25s linear, visibility .25s linear, top .25s linear;
	}

	/* Keyboard: main.css opens the panel on hover only. */
	.header-redesign-bar .menu-main nav > ul > li.rd-mega:focus-within > ul.sub-menu {
		top: 100%;
		opacity: 1;
		visibility: visible;
	}

	/* Escape closes it while the pointer or focus is still inside. */
	.header-redesign-bar .menu-main nav > ul > li.rd-mega.is-closed > ul.sub-menu {
		opacity: 0;
		visibility: hidden;
	}

	/* Each group puts its rail item in column 1 and its pane in column 2. */
	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li {
		display: contents;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > a {
		grid-column: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 16px 28px;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: #364049;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > a::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		opacity: .55;
		flex: none;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > a:hover,
	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li.is-active > a {
		background: #fff;
		color: #3454D1;
		box-shadow: inset 4px 0 0 #3454D1;
	}

	/* The panes all sit in the same cell; one is shown at a time. */
	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > ul.sub-menu {
		grid-column: 2;
		grid-row: 1 / -1;
		display: none;
		grid-template-columns: 1fr 1fr;
		gap: 4px 24px;
		align-content: start;
		padding: 30px 34px;
		background: #fff;
		margin: 0;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li.is-active > ul.sub-menu {
		display: grid;
	}

	/* Without JavaScript there is no active group: show the first, and whichever is hovered. */
	.header-redesign-bar .menu-main nav > ul > li.rd-mega:not(.rd-mega--js) > ul.sub-menu > li:first-child > ul.sub-menu,
	.header-redesign-bar .menu-main nav > ul > li.rd-mega:not(.rd-mega--js) > ul.sub-menu > li:hover > ul.sub-menu {
		display: grid;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega:not(.rd-mega--js) > ul.sub-menu:has(> li:hover) > li:first-child > ul.sub-menu {
		display: none;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > ul.sub-menu > li > a {
		display: block;
		padding: 12px 14px;
		border-radius: 12px;
		font-size: 17px;
		font-weight: 500;
		line-height: 1.3;
		color: #212121;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > ul.sub-menu > li > a:hover,
	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > ul.sub-menu > li > a:focus-visible {
		background: #EEF2FD;
		color: #212121;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega .rd-mega__desc {
		display: block;
		margin-top: 3px;
		font-family: 'robotoregular', Roboto, Arial, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.35;
		color: #626A74;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > ul.sub-menu > li.rd-mega__row {
		grid-column: 1 / -1;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega .rd-mega__panehead {
		display: block;
		margin: 0 0 12px;
		padding: 0 14px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: #3454D1;
	}

	/* The back link belongs to the phone drill-down. */
	.header-redesign-bar .menu-main nav > ul > li.rd-mega .rd-mega__back {
		display: none;
	}

	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > ul.sub-menu > li.rd-mega__row:empty,
	.header-redesign-bar .menu-main nav > ul > li.rd-mega > ul.sub-menu > li > ul.sub-menu > li.rd-mega__row:has(> .rd-mega__back) {
		display: none;
	}
}

/* ----------------------------------------------------------------- phone */
/* Below 1106px the header becomes the slide-in drawer. Practice Areas opens a
   list of the four groups; tapping one replaces it with that group's pages. */
@media only screen and (max-width: 1105px) {

	#append-span ul.nav > li.rd-mega > ul.sub-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		font-size: 16px;
		font-weight: 600;
		background-image: none;
		padding: 12px 0;
	}

	/* the same chevron the rail carries on desktop: these rows open a list, they do not navigate */
	#append-span ul.nav > li.rd-mega.rd-mega--js:not(.is-drill) > ul.sub-menu > li > a::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		opacity: .5;
		flex: none;
	}

	#append-span ul.nav > li.rd-mega.rd-mega--js > ul.sub-menu > li > ul.sub-menu {
		display: none;
	}

	#append-span ul.nav > li.rd-mega.rd-mega--js.is-drill > ul.sub-menu > li {
		display: none;
	}

	#append-span ul.nav > li.rd-mega.rd-mega--js.is-drill > ul.sub-menu > li.is-open {
		display: block;
	}

	#append-span ul.nav > li.rd-mega.rd-mega--js.is-drill > ul.sub-menu > li.is-open > ul.sub-menu {
		display: block;
		padding: 0;
		margin: 6px 0 0;
	}

	#append-span ul.nav > li.rd-mega .rd-mega__back {
		display: block;
		padding: 4px 0 10px;
		font-size: 15px;
		font-weight: 600;
		color: #3454D1;
		background: none;
	}

	#append-span ul.nav > li.rd-mega > ul.sub-menu li a {
		background-image: none;
		padding: 10px 0;
	}

	#append-span ul.nav > li.rd-mega .rd-mega__desc {
		display: block;
		font-family: 'robotoregular', Roboto, Arial, sans-serif;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.35;
		color: #626A74;
		margin-top: 2px;
	}

	/* Drilled in, the group's own row becomes the heading of the page list, under the back
	   link, the way the design has it: the rail link is hidden and the pane's copy of the
	   name takes its place. */
	#append-span ul.nav > li.rd-mega.rd-mega--js.is-drill > ul.sub-menu > li.is-open > a {
		display: none;
	}

	#append-span ul.nav > li.rd-mega .rd-mega__panehead {
		display: block;
		margin: 2px 0 10px;
		font-size: 20px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		color: #212121;
	}
}