/*
* MiraeLaw Areas of Expertise mega menu.
*
* The panel (.ml-mega-menu) is server-rendered once in wp_footer and, on
* page load, reparented by mega-menu.js into the
that contains the
* real "Areas of Expertise" link Elementor's own Nav Menu widget already
* renders (matched by URL, not by any Elementor-specific class — see
* class-mega-menu.php's docblock). mega-menu.js adds .ml-mega-menu-host to
* that
; every selector below that needs to know where the trigger
* lives targets that class, never an Elementor-owned one directly, so this
* file keeps working across Elementor Pro updates that might rename their
* own classes.
*
* Two interaction/layout modes, split at the exact same breakpoint
* Elementor's own header already collapses to a hamburger menu at
* (max-width: 1024px, confirmed in header.css) — there is no meaningful
* "tablet dropdown, phone accordion" distinction available once Elementor's
* own nav is already hidden behind its toggle button, since both then live
* inside the same narrow vertical mobile panel. Above that breakpoint: a
* hover-opened, absolutely-positioned grid dropdown. At or below it: a
* click-opened, statically-positioned single-column accordion, using the
* same open/close mechanics (mega-menu.js drives both with one code path).
*
* Within that compact accordion (≤1024px), a second, narrower split at
* 767px separates tablet from phone presentation — both share the same
* accordion mechanics and indentation, but the phone width additionally
* drops the icon and the "View All" footer CTA to keep each row compact
* (per spec: tablet shows icon + title, phone shows title only).
*/
.ml-mega-menu-host {
position: relative;
}
.ml-mega-menu {
margin: 0;
background: var( --ml-surface );
border: 1px solid var( --ml-border-muted );
box-shadow: var( --ml-shadow-card );
overflow: hidden;
max-height: 0;
opacity: 0;
transition: opacity var( --ml-transition-base ), max-height var( --ml-transition-slow );
}
.ml-mega-menu.is-open {
opacity: 1;
}
/* Desktop dropdown: absolutely positioned against .ml-site-header (see
header.css and mega-menu.js — that's the container the mega menu is
reparented into at this breakpoint, not the nav widget itself).
.ml-site-header's own box turned out NOT to be a reliable width
reference on its own: Elementor's sticky-header feature sets it to
position:fixed with a full-viewport-width box (confirmed live —
getBoundingClientRect() spans edge to edge even though it visually
reads as a boxed 1280px header), and the true boxed content width is
produced *inside* it via Elementor's own --content-width custom
property rather than by the container itself being narrower. Reading
that same custom property here — it's a plain inherited CSS variable,
already set to this header's real boxed_width (80rem) — is what
actually satisfies "remains aligned even if the navigation changes":
if that boxed_width is ever edited in Elementor, --content-width
changes with it and this rule follows automatically, with no separate
width value of our own to keep in sync. Falls back to the site's
general container token if the property is ever unset for some reason
(e.g. reused outside this specific header). */
@media ( min-width: 1025px ) {
.ml-mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX( -50% );
width: 100%;
max-width: var( --content-width, var( --ml-container-width ) );
z-index: 100;
}
}
/* Compact mode (tablet + mobile, matching Elementor's own ≤1024px hamburger
breakpoint): inline accordion — no absolute positioning, full width of
whatever vertical menu row it sits inside. */
@media ( max-width: 1024px ) {
.ml-mega-menu {
position: static;
width: 100%;
border-left: none;
border-right: none;
}
}
.ml-mega-menu-inner {
padding: var( --ml-spacing-md );
}
.ml-mega-menu-grid {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
column-gap: var( --ml-spacing-md );
/* Deliberately more generous than the column gap — the "increase
vertical spacing between rows" requirement — so multi-row layouts
read as distinct cards rather than a dense grid. */
row-gap: var( --ml-spacing-lg );
margin: 0;
padding: 0;
list-style: none;
}
@media ( max-width: 1024px ) {
.ml-mega-menu-grid {
grid-template-columns: 1fr;
row-gap: var( --ml-spacing-sm );
}
}
.ml-mega-menu-item {
margin: 0;
}
/* Typography-and-whitespace presentation — deliberately no permanent
border, background, shadow, or radius at rest (the earlier card
treatment's one deliberate exception to the sitewide "radius tokens are
all 0" rule is gone with it; nothing here needs a radius any more).
Separation between items comes entirely from .ml-mega-menu-grid's own
gap, not from a box around each one.
This is a CSS Grid, not the previous flex-column, specifically so the
icon can sit on the same line as the title without touching the
renderer: icon/title/summary are still three plain sibling elements in
exactly the markup MiraeLaw_Mega_Menu_Renderer already outputs (see
class-mega-menu-renderer.php — untouched) — grid-area placement below is
what reflows those three siblings into an "icon+title row, summary row"
layout, so no HTML change was needed for this redesign. */
.ml-mega-menu-link {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon title"
"summary summary";
column-gap: var( --ml-spacing-2xs );
/* Tight internal rhythm (icon/title to summary) — the counterpart to
the grid's own generous row-gap between separate practice areas
below, which is where the "more space" should read as belonging. */
row-gap: var( --ml-spacing-3xs );
padding: var( --ml-spacing-sm ) var( --ml-spacing-xs );
text-decoration: none;
color: inherit;
background: transparent;
/* Reserved at rest (transparent, not `none`) so its arrival on hover
never shifts layout — the "optional thin left accent border". */
border-left: 2px solid transparent;
transition: background-color var( --ml-transition-fast ), border-color var( --ml-transition-fast ),
box-shadow var( --ml-transition-fast ), transform var( --ml-transition-fast );
}
.ml-mega-menu-link:hover,
.ml-mega-menu-link:focus-visible {
background: var( --ml-surface-hover );
border-left-color: var( --ml-accent );
/* No blurred/soft-shadow token exists anywhere in design-system.css —
only the hard-offset --ml-shadow-card, wrong register for "very soft
shadow only during hover" here. This reuses --ml-primary's own RGB
value at low opacity, the same technique --ml-shadow-focus-accent/
-secondary already use for their own rgba() glows, rather than
inventing an unrelated color; see this file's header comment / the
deliverables for the token this suggests adding to design-system.css
(something like --ml-shadow-soft) instead of leaving it inline here. */
box-shadow: 0 4px 12px rgba( 20, 38, 56, 0.08 );
transform: translateY( -2px );
}
.ml-mega-menu-link:focus-visible {
outline: 3px solid var( --ml-focus-ring );
outline-offset: 2px;
}
.ml-mega-menu-item-icon {
grid-area: icon;
align-self: center;
display: block;
width: var( --ml-icon-lg );
height: var( --ml-icon-lg );
font-size: var( --ml-icon-lg );
line-height: 1;
/* Dashicons is a glyph font, so its color is a plain CSS `color` value
(an existing design token, same as any other themed color on the
site) rather than a fixed image asset — "icons inherit theme
colours" in the sense that changing this one line re-themes every
icon sitewide, not that it tracks a neighboring element's color. */
color: var( --ml-accent );
transition: color var( --ml-transition-fast );
}
.ml-mega-menu-link:hover .ml-mega-menu-item-icon,
.ml-mega-menu-link:focus-visible .ml-mega-menu-item-icon {
color: var( --ml-primary );
}
.ml-mega-menu-item-title {
grid-area: title;
align-self: center;
font-family: var( --ml-font-heading );
font-weight: var( --ml-font-weight-bold );
font-size: var( --ml-text-lg );
line-height: var( --ml-leading-snug );
color: var( --ml-neutral-700 );
transition: color var( --ml-transition-fast );
}
.ml-mega-menu-link:hover .ml-mega-menu-item-title,
.ml-mega-menu-link:focus-visible .ml-mega-menu-item-title {
color: var( --ml-primary );
}
.ml-mega-menu-item-summary {
grid-area: summary;
font-family: var( --ml-font-body );
font-weight: var( --ml-font-weight-regular );
font-size: var( --ml-text-sm );
line-height: var( --ml-leading-comfortable );
color: var( --ml-neutral-600 );
/* Keep each row's height predictable in the grid — a long summary is
clipped rather than pushing neighboring items out of alignment.
Trimmed from 3 lines to 2 as part of the overall height reduction. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.ml-mega-menu-footer {
/* Even more breathing room above the divider now that items sit closer
together and lighter on the page — the gap is what keeps this
reading as a distinct closing action, not the rule itself. */
margin-top: var( --ml-spacing-xl );
padding-top: var( --ml-spacing-md );
/* --ml-border-cool, not the previously-used --ml-border-warm: the
panel's own background is white (--ml-surface), and border-cool is
the token design-system.css itself documents for "hairline rule on
white background" — border-warm is for the cream (--ml-background)
surfaces elsewhere on the site. Also visibly lighter, which is the
"reduce its visual weight slightly" ask. */
border-top: 1px solid var( --ml-border-cool );
text-align: right;
}
@media ( max-width: 1024px ) {
.ml-mega-menu-footer {
text-align: left;
}
}
/* Accordion presentation (≤1024px): the summary is dropped everywhere in
compact mode (tablet spec: "hide summaries"; phone spec: same) — the grid
layout above still reserves a "summary" row for desktop, so this un-sets
it via `display: none` rather than fighting the shared grid-template-areas
with an empty area. Each link is also indented so the expanded practice
areas read as nested beneath "Areas of Expertise" in the accordion list,
and given a 48px minimum touch target (WCAG 2.5.5) — .ml-mega-menu-link
is naturally full width already at this breakpoint, so only min-height and
vertical centering are needed, not a min-width. Placed after every base
rule these selectors already have above — a class-for-class override at
equal specificity is decided by source order, so a media override written
earlier than its own base rule loses the cascade even while its condition
is true (caught live: computed style kept showing the desktop values at
tablet width until this block was moved below its base rules). */
@media ( max-width: 1024px ) {
.ml-mega-menu-item-summary {
display: none;
}
.ml-mega-menu-link {
grid-template-columns: auto 1fr;
grid-template-areas: "icon title";
align-items: center;
min-height: 48px;
padding-left: calc( var( --ml-spacing-xs ) + var( --ml-spacing-md ) );
}
}
/* Phone (<768px): a further-compacted accordion row — title only. The icon
column is dropped entirely (not just hidden visually) so the grid
collapses to one column instead of leaving a phantom "icon" gutter, and
the "View All Practice Areas" footer CTA is hidden — the spec's own
"Show: Title only" / "Hide: ... footer CTA ..." phone requirements; the
tablet breakpoint above (768–1024px) keeps both. Same source-order
requirement as the block above — must stay after the base rules for
.ml-mega-menu-link/-item-icon/-footer.
Visual-only polish pass, phone only: the toggle row, the submenu's
hierarchy cues (indent/typography/divider/spacing), and dropping the
desktop "card" hover treatment all live in this same block — nothing
here touches tablet, desktop, the renderer, JS, or any aria/focus
attribute; only presentation properties change. */
@media ( max-width: 767px ) {
.ml-mega-menu-item-icon {
display: none;
}
.ml-mega-menu-link {
grid-template-columns: 1fr;
grid-template-areas: "title";
/* Tighter than the tablet indent (36px) and the base rule's
vertical padding (16px) — a subnav row should read as compact
navigation, not a spaced-out card. min-height: 48px (inherited
from the ≤1024px block above) still guarantees the touch target;
this just lets that height come from min-height rather than from
generous padding.
!important: Elementor generates its own per-instance stylesheet
for this nav-menu widget (confirmed live —
".elementor-37 .elementor-element-70d7ed3 .elementor-nav-menu--
dropdown a { padding: 9px 12px }"), which matches every link here
too once the panel is reparented inside .elementor-nav-menu--
dropdown for compact mode (see mega-menu.js's compactAnchor). Its
4-class-plus-tag selector outranks this single class on
specificity alone, regardless of source order — the same kind of
conflict header.css/team-cta.css already document and resolve
the same way. */
padding: var( --ml-spacing-2xs ) var( --ml-spacing-xs ) var( --ml-spacing-2xs ) var( --ml-spacing-md ) !important;
/* Visible at rest, not just reserved for hover — a plain hairline,
not the accent color, so it reads as a structural "this belongs to
the item above" cue rather than an interactive affordance. */
border-left: 1px solid var( --ml-border-cool );
}
/* The base rule's hover/focus-visible "lift" (shadow + translateY) is a
desktop card affordance; a phone accordion row shouldn't move or cast
a shadow when tapped/focused. The accent left-border swap is kept —
subtle enough to still read as "navigation," not "card" — and the
focus-visible outline itself (WCAG-required) is untouched since it's
set on a separate, unrelated declaration below. */
.ml-mega-menu-link:hover,
.ml-mega-menu-link:focus-visible {
box-shadow: none;
transform: none;
}
.ml-mega-menu-item-title {
/* --ml-text-base is design-system.css's own "body copy, inputs, nav"
size token — literally the nav-appropriate choice — replacing the
desktop card's --ml-text-lg. Medium weight (500) instead of the
desktop's bold (700) is still legible as a link without reading
as a page heading. */
font-size: var( --ml-text-base );
font-weight: var( --ml-font-weight-medium );
}
.ml-mega-menu-grid {
/* Desktop/tablet space rows apart like separate cards; a phone
subnav should read as one continuous indented list under "Areas
of Expertise" instead. */
row-gap: var( --ml-spacing-3xs );
}
.ml-mega-menu-footer {
display: none;
}
/* The toggle is appended as a sibling of the trigger link inside the
same
(see mega-menu.js's setupCompactMode()) — .ml-mega-menu-host
is that