/* BJL header nav - mega panel + dropdowns. Palette: ink #0a0f27, gold #c19951, panel #fff */

/* The mega panel spans the page container (.container, max-width 1500px, style.css:442).
   To do that it resolves against the header's own .container, so every box between that
   container and the panel must be static. style.css:515 sets .head-sec .topmenu ul to
   position:relative and :516 does the same for every li - both are overridden here. */
.head-sec .logo-menu > .container{position:relative}
.head-sec .topmenu .bjl-topmenu{position:static}
.head-sec .topmenu .bjl-topmenu:after{content:"";display:block;clear:both}

.head-sec .topmenu .bjl-caret{display:inline-block;width:7px;height:7px;margin-left:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);vertical-align:middle;transition:transform .18s ease}
.head-sec .topmenu li.is-open > a.bjl-top .bjl-caret{transform:translateY(1px) rotate(-135deg)}

/* panels: closed state must not eat clicks */
.head-sec .topmenu .bjl-mega,
.head-sec .topmenu .bjl-drop{position:absolute;top:100%;z-index:60;padding-top:16px;background:transparent;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .16s ease}
.head-sec .topmenu li.is-open > .bjl-mega,
.head-sec .topmenu li.is-open > .bjl-drop{visibility:visible;opacity:1;pointer-events:auto}
.head-sec .topmenu .bjl-mega a:after,
.head-sec .topmenu .bjl-drop a:after{display:none!important;content:none!important}

/* mega: full container width. Column ORDER is sorted tallest-first in PHP so the rows pack
   with the smallest gaps - a grid row is as tall as its tallest item. */
.head-sec .topmenu li.bjl-has-mega{position:static}
.head-sec .topmenu .bjl-mega{left:0;right:0;width:auto}
.head-sec .topmenu .bjl-mega__grid{box-sizing:border-box;background:#fff;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 48px;padding:34px 44px;box-shadow:0 18px 44px rgba(10,15,39,.18);align-items:start}
.head-sec .topmenu .bjl-mega__grid *{box-sizing:border-box}
.head-sec .topmenu .bjl-mega__col{min-width:0}

/* Every heading reserves two lines (2 x line-height 1.3 = 2.6em) so the gold rules and the
   first link of every column line up across the row. A one-line heading is centred in that
   box rather than sitting on the baseline. */
.head-sec .topmenu .bjl-mega__h{margin:0 0 12px;padding:0 0 9px;border-bottom:1px solid #c19951}
.head-sec .topmenu .bjl-mega__h a,
.head-sec .topmenu .bjl-mega__h .bjl-dead{display:flex;align-items:center;min-height:2.6em;float:none;margin:0;padding:0;color:#0a0f27;font-size:16px;line-height:1.3;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}

.head-sec .topmenu .bjl-mega__list{list-style:none;margin:0;padding:0;position:static}
.head-sec .topmenu .bjl-mega__list li{float:none;width:100%;margin:0;padding:0;position:relative}
.head-sec .topmenu .bjl-mega__list a,
.head-sec .topmenu .bjl-mega__list .bjl-dead{display:block;float:none;margin:0;padding:7px 0;color:#0a0f27;font-size:15px;line-height:1.35;font-weight:400;text-transform:none;letter-spacing:0;text-decoration:none}
.head-sec .topmenu .bjl-mega__list a:hover,
.head-sec .topmenu .bjl-mega__h a:hover{color:#c19951}
.head-sec .topmenu .bjl-mega__list a.is-current,
.head-sec .topmenu .bjl-mega__h a.is-current{color:#c19951}
.head-sec .topmenu .bjl-dead{color:#6b7280;cursor:default}

/* keep the panel inside the viewport on short screens; overflow-x must be explicit or the
   computed value becomes auto and a stray horizontal scrollbar appears */
.head-sec .topmenu .bjl-mega__grid{max-height:calc(100vh - 150px);overflow-x:hidden;overflow-y:auto}

/* single-column dropdowns: wider, roomier. These anchor to their own li, not the container. */
.head-sec .topmenu li.bjl-has-drop{position:relative}
.head-sec .topmenu .bjl-drop{left:0;width:300px}
.head-sec .topmenu li.bjl-has-drop:last-child .bjl-drop{left:auto;right:0}
.head-sec .topmenu .bjl-drop__list{box-sizing:border-box;list-style:none;margin:0;padding:10px 0;position:static;background:#fff;box-shadow:0 18px 44px rgba(10,15,39,.18)}
.head-sec .topmenu .bjl-drop__list li{float:none;width:100%;margin:0;padding:0;position:relative}
.head-sec .topmenu .bjl-drop__list a,
.head-sec .topmenu .bjl-drop__list .bjl-dead{display:block;float:none;margin:0;padding:14px 26px;color:#0a0f27;font-size:16px;line-height:1.3;font-weight:500;text-transform:none;letter-spacing:0;text-decoration:none}
.head-sec .topmenu .bjl-drop__list a:hover,
.head-sec .topmenu .bjl-drop__list a.is-current{color:#c19951;background:rgba(193,153,81,.08)}

/* 1600px and up: 4 columns. Columns get narrower than at 3-up (the container caps at 1500px),
   so the gutter and heading tracking tighten to keep headings inside their two lines. */
@media (min-width:1600px){
.head-sec .topmenu .bjl-mega__grid{grid-template-columns:repeat(4,1fr);gap:26px 36px}
.head-sec .topmenu .bjl-mega__h a,
.head-sec .topmenu .bjl-mega__h .bjl-dead{font-size:15px;letter-spacing:.02em}
}

@media (max-width:1199px){.head-sec .topmenu .bjl-mega__grid{grid-template-columns:repeat(2,1fr);gap:24px 36px;padding:28px 32px}}
@media (max-width:991px){.head-sec .topmenu .bjl-mega,.head-sec .topmenu .bjl-drop{display:none}}

/* ---- Mobile accordion (.mobinav) ----------------------------------------
   This is the THEME's core-walker nav, not the mu-plugin's markup - the panel
   renderer deliberately leaves it alone. Overridden here so style.css stays
   byte-identical to its backup.

   Overlap: style.css:551 gives every .mobinav a width:100% with no right
   padding, while :555 lays the +/- toggle over it at right:0. A label reaching
   the right edge runs under the icon. A 34px gutter fixes it.

   Do NOT also stretch the toggle with top:0;bottom:0;height:auto. The li is
   position:relative (:550) and contains the nested ul, so bottom:0 stretches
   the toggle over the whole expanded subtree - measured at 163px tall on a
   60px row - and .drop.open{width:22px} then lays a dead 22px strip down the
   right edge of every child link. The theme's own height:29px + top:0 already
   pins the icon to the top of a two-line row (measured topOff:0).

   Type scale: style.css:551 sets one font-size:16px for every depth and :554
   only changes text-transform, so sub items matched their heading exactly. */
@media (max-width:991px){
.mobinav ul li a{padding-right:34px}
.mobinav ul li ul li a{font-size:15px}
.mobinav ul li ul li ul li a{font-size:14px}
}

/* Practice Areas sub-items in initial caps. Presentational, so the menu titles in wp-admin
   stay as written and this is reversible by deleting the rule. Overrides the
   text-transform:none set on the same selectors earlier in this file. */
.head-sec .topmenu .bjl-mega__list a,
.head-sec .topmenu .bjl-mega__list .bjl-dead{text-transform:capitalize}

/* ---- 992-1375px: short top-level labels so the bar stays on one line -------
   .headar-blk is display:flex;flex-wrap:nowrap and .logo-rit is flex:0 1 auto, so the nav is
   SQUEEZED as the viewport narrows (the logo shrinks with it, 335 -> 300 -> 222px). The nav
   needs 1008px flat but only gets container minus logo, so it wraps below a 1360px container.

   Measured thresholds (wraps below): full labels 1360 | short labels 1090 |
   short + 7px item margins 980. Shrinking the logo does nothing - it already flex-shrinks -
   and type scaling alone bottoms out at 1230 even at an unusable 15px, so the item margins
   do the remaining work here rather than the font size. */
.head-sec .topmenu .bjl-lbl--short{display:none}
@media (min-width:992px) and (max-width:1375px){
.head-sec .topmenu .bjl-lbl--full{display:none}
.head-sec .topmenu .bjl-lbl--short{display:inline}
.head-sec .topmenu .bjl-topmenu > li{margin:0 7px}
}