/* FLG Mega Menu — layout modeled on the CALG theme's practice-area mega menu, in FLG colors. */
:root {
  --flg-mm-navy: #0D1F4E;
  --flg-mm-accent: #C8343B;
  --flg-mm-muted: #5A6275;
  --flg-mm-panel: #F7F8FC;
  --flg-mm-rail: #EEF1F7;
  --flg-mm-line: rgba(13, 31, 78, .12);
}

/* The mega panel spans the header row, so the row is the positioning parent
   and everything between it and the menu stays static. */
.site-main-header-inner-wrap { position: relative; }
.site-main-header-inner-wrap .site-header-section,
.site-main-header-inner-wrap .site-header-item:has(.flg-menu),
.site-main-header-inner-wrap .header-navigation,
.site-main-header-inner-wrap .header-menu-container { position: static; }

/* ---------- Top level ---------- */
html body .flg-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
html body .flg-menu > li { position: relative; display: flex; align-items: center; margin: 0; padding: 0; }
html body .flg-menu > li.flg-has-mega { position: static; }
html body .flg-menu .flg-top-btn,
html body .flg-menu .flg-top-link {
  font: inherit; font-size: 17px; font-weight: 600; color: var(--flg-mm-navy); background: none; border: 0; cursor: pointer;
  text-decoration: none; padding: 10px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; line-height: 1.2;
  box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0;
}
html body .flg-menu .flg-top-btn:hover,
html body .flg-menu .flg-top-link:hover,
html body .flg-menu .flg-top-btn[aria-expanded="true"],
html body .flg-menu > li.flg-open > .flg-top-link { background: rgba(13, 31, 78, .07); color: var(--flg-mm-navy); }
html body .flg-menu .flg-top-link[aria-current="page"] { color: var(--flg-mm-accent); }
html body .flg-menu .flg-sub-toggle { background: none; border: 0; padding: 10px 6px; margin-left: -10px; cursor: pointer; color: var(--flg-mm-navy); border-radius: 8px; box-shadow: none; min-height: 0; }
.flg-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); display: inline-block; transition: transform .2s; }
[aria-expanded="true"] > .flg-chev { transform: rotate(225deg) translate(-2px, -1px); }

/* ---------- Panels ---------- */
html body .flg-menu .flg-dd,
html body .flg-menu .flg-mega {
  position: absolute; top: calc(100% + 8px); z-index: 1000;
  background: var(--flg-mm-panel);
  border: 1px solid var(--flg-mm-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(13, 31, 78, .18);
  max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
html body .flg-menu li.flg-open > .flg-dd,
html body .flg-menu li.flg-open > .flg-mega { opacity: 1; visibility: visible; transform: none; }

/* Simple dropdown */
html body .flg-menu .flg-dd { left: 0; min-width: 260px; list-style: none; margin: 0; padding: 8px; }
html body .flg-menu .flg-dd li { margin: 0; padding: 0; }
html body .flg-menu .flg-dd a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--flg-mm-navy); text-decoration: none; font-size: 14px; line-height: 1.35; }
html body .flg-menu .flg-dd a:hover { background: rgba(200, 52, 59, .08); color: var(--flg-mm-accent); }

/* Mega menu */
html body .flg-menu .flg-mega { left: 0; right: 0; display: grid; grid-template-columns: 250px 1fr; padding: 0; text-align: left; }
.flg-rail { background: var(--flg-mm-rail); border-radius: 12px 0 0 12px; border-right: 1px solid var(--flg-mm-line); padding: 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; align-self: start; min-height: 100%; }
html body .flg-rail .flg-rail-tab { font: inherit; text-align: left; background: none; border: 0; border-radius: 10px; padding: 12px 14px; cursor: pointer; color: var(--flg-mm-navy); display: flex; flex-direction: column; gap: 2px; box-shadow: none; min-height: 0; width: 100%; }
html body .flg-rail .flg-rail-tab:hover { background: rgba(13, 31, 78, .06); }
html body .flg-rail .flg-rail-tab[aria-selected="true"] { background: #fff; box-shadow: 0 1px 0 var(--flg-mm-line), 0 2px 10px rgba(13, 31, 78, .08); }
.flg-rail-t { font-weight: 700; font-size: 17px; }
.flg-rail-d { font-size: 13px; color: var(--flg-mm-muted); line-height: 1.3; font-weight: 400; }
.flg-rail-tab[aria-selected="true"] .flg-rail-t { color: var(--flg-mm-accent); }
.flg-rail-foot { margin-top: 10px; padding: 12px 14px 4px; border-top: 1px solid var(--flg-mm-line); display: flex; flex-direction: column; gap: 8px; }
html body .flg-rail-foot a { font-size: 14px; color: var(--flg-mm-navy); text-decoration: none; }
html body .flg-rail-foot a:hover { color: var(--flg-mm-accent); text-decoration: underline; }

.flg-pane { padding: 22px 26px 26px; display: flex; flex-wrap: wrap; gap: 12px 44px; align-content: flex-start; }
.flg-pane[hidden] { display: none; }
.flg-mm-group { min-width: 190px; }
.flg-mm-group.flg-mm-wide { flex: 1 1 440px; }
html body .flg-mm-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--flg-mm-muted); letter-spacing: .02em; line-height: 1.4; }
html body .flg-mm-h a { color: inherit; text-decoration: none; }
html body .flg-mm-h a:hover { color: var(--flg-mm-accent); text-decoration: underline; }
html body .flg-mm-list { list-style: none; margin: 0; padding: 0; }
.flg-mm-cols3 { columns: 3 150px; column-gap: 24px; }
html body .flg-mm-list li { break-inside: avoid; margin: 0; padding: 0; }
html body .flg-mm-list a { display: block; padding: 5px 0; color: var(--flg-mm-navy); text-decoration: none; font-size: 14px; font-weight: 400; line-height: 1.35; }
html body .flg-mm-list a:hover { color: var(--flg-mm-accent); text-decoration: underline; }
html body .flg-mm-all { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--flg-mm-accent); text-decoration: none; }
html body .flg-mm-all:hover { text-decoration: underline; }

.flg-menu :focus-visible { outline: 2px solid var(--flg-mm-accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html body .flg-menu .flg-dd, html body .flg-menu .flg-mega, .flg-chev { transition: none; }
}
