/* Practice subnav mega-panel content — shared by every add-on/Millwork panel rendered through the [bec_mega_panel] / [bec_mega_panel_services] shortcodes (see bluent-millwork.php). Every value below is ported verbatim from bluentcad-navigation.html CSS §1/§3/§4 — .mega-wrap, .mcol, .col-hd, .mitem, .mtitle, .mdesc, .mcol-divider, .panel-foot, .pf-lbl, .aside-note, .fam/.fam-t/.fam-c, .l2head/.l2grid/.l2/.l2-none/.l2-pf, .teaser and its t-* children, and the .w-1/.w-2/.w-3/.w-svc column-width presets — just under bec-mp- prefixed class names so nothing here can collide with the reference's own unprefixed names or anything else already on the page (see the bec-mega--{practice} collision bug documented elsewhere in this plugin for why that matters). Loaded once, only on pages that print a subnav, instead of being duplicated inline per widget — so changing a link's destination no longer needs a CSS/HTML push at all: content comes from the WP menu the shortcode reads. */ /* padding stays a fixed 40px on both sides — the row's own left/right inset; --bec-align-x (a transform, set live in bluent_render_addon_subnav()'s sync()) is the separate, sometimes-negative nudge that lines this box up with the global nav's "Microsites" item above it. Padding can't go negative, which is why that nudge isn't folded into padding-left directly. */ .bec-mp-wrap{max-width:1200px;margin:0 auto;padding:34px 40px 38px;display:grid;transform:translateX(var(--bec-align-x,0px));} /* Column-count presets, matching the reference's .w-1/.w-2/.w-3/.w-svc -- every panel carries a teaser, so the trailing 320px track is constant. */ .bec-mp-wrap--w1{grid-template-columns:minmax(0,1fr) 320px;} .bec-mp-wrap--w2{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 320px;} .bec-mp-wrap--w3{grid-template-columns:repeat(3,minmax(0,1fr)) 320px;} /* 264px (the reference's own value) wraps longer family names like "Cut Lists & CNC-Ready Production Data" onto two lines; the middle detail column has room to spare, so widening this track to fit the longest name on one line reads cleaner without shrinking the teaser. */ .bec-mp-wrap--wsvc{grid-template-columns:380px minmax(0,1fr) 320px;} .bec-mp-col{padding:0 28px;border-right:1px solid var(--bec-mp-border);min-width:0;} .bec-mp-col:first-child{padding-left:0;} .bec-mp-col-last{border-right:none;} /* "mw-2col" (set on the top-level WP menu item's own CSS Classes field, same admin-only pattern as mw-divider/mw-subhead/mw-note/mw-no-heading) flows a long link list into two columns instead of one tall one -- first needed for BIM's Proof "Portfolio" column once it grew past a dozen links. Deliberately does NOT grid-column:span -- panel width presets (w1/w2/w3) size their content tracks to exactly the number of populated columns (e.g. Proof's own w2 = two 400px content tracks, no spare), so spanning a second track here eats the *next* column's only track, pushing it (and the teaser after it) onto a new grid row instead of sitting beside this one. Splitting the list within its own single track avoids that. */ .bec-mp-col--2up{column-count:2;column-gap:16px;} .bec-mp-col--2up .bec-mp-hd{column-span:all;} .bec-mp-col--2up .bec-mp-item{break-inside:avoid;} .bec-mp-hd{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bec-mp-muted); padding-bottom:10px;margin-bottom:9px;border-bottom:1px solid var(--bec-mp-border);} .bec-mp-hd.bec-mp-sub{margin-top:16px;border-bottom:none;padding-bottom:4px;} .bec-mp-item{display:block;padding:9px 8px;border-radius:10px;text-decoration:none;transition:background .13s;margin-bottom:2px;} .bec-mp-item:hover{background:var(--bec-mp-surface);} .bec-mp-title{font-size:15px;font-weight:500;color:var(--bec-mp-text);letter-spacing:-.2px;display:block;margin-bottom:3px;} .bec-mp-desc{font-size:12px;color:var(--bec-mp-muted);line-height:1.45;display:block;} .bec-mp-divider{height:1px;background:var(--bec-mp-border);margin:11px 0;} .bec-mp-aside-note{font-size:13px;color:var(--bec-mp-muted);line-height:1.6;padding:9px 8px;} .bec-mp-aside-note b{color:var(--bec-mp-text);font-weight:600;} /* Services' family list (left column) */ .bec-mp-fam{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 10px;border-radius:10px;text-decoration:none;margin-bottom:1px;transition:background .13s;} .bec-mp-fam:hover,.bec-mp-fam[aria-current="true"]{background:var(--bec-mp-surface);} .bec-mp-fam-t{font-size:15px;font-weight:500;color:var(--bec-mp-text);letter-spacing:-.2px;line-height:1.34;} .bec-mp-fam[aria-current="true"] .bec-mp-fam-t{color:var(--bec-mp-accent);font-weight:600;} .bec-mp-fam-c{font-size:15px;color:#c3c3c9;flex-shrink:0;} .bec-mp-fam:hover .bec-mp-fam-c,.bec-mp-fam[aria-current="true"] .bec-mp-fam-c{color:var(--bec-mp-accent);} /* Services' selected-family detail (middle column) */ .bec-mp-l2head{padding:0 0 13px;} .bec-mp-l2head a{font-size:16.5px;font-weight:600;color:var(--bec-mp-text);text-decoration:none; letter-spacing:-.3px;display:inline-flex;align-items:center;gap:4px;} .bec-mp-l2head a:hover{color:var(--bec-mp-accent);} .bec-mp-l2head a::after{content:"\203A";font-size:17px;line-height:1;} .bec-mp-l2head p{font-size:12.5px;color:var(--bec-mp-muted);line-height:1.55;margin-top:5px;max-width:48ch;} .bec-mp-l2grid{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px;} .bec-mp-l2{display:block;padding:8px 10px;border-radius:8px;text-decoration:none; font-size:14px;color:var(--bec-mp-text);letter-spacing:-.15px;transition:background .12s;} .bec-mp-l2:hover{background:var(--bec-mp-surface);} .bec-mp-l2-none{font-size:13px;color:var(--bec-mp-muted);line-height:1.6;padding:2px 0 2px 14px; border-left:1px solid var(--bec-mp-border);max-width:46ch;} .bec-mp-l2-pf{margin-top:12px;padding-top:11px;border-top:1px solid var(--bec-mp-border);} .bec-mp-l2-pf .bec-mp-hd{border-bottom:none;padding-bottom:4px;margin-bottom:2px;} .bec-mp-l2-pf .bec-mp-l2{color:var(--bec-mp-accent);font-weight:500;} .bec-mp-subservices[hidden]{display:none;} /* Contextual teaser (right column, every panel) */ .bec-mp-teaser{padding-left:36px;display:flex;flex-direction:column;align-self:start;min-width:0;} .bec-mp-t-img{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden; clip-path:inset(0 round 12px);margin-bottom:17px;background:var(--bec-mp-surface);} .bec-mp-t-img img{width:100%;height:100%;object-fit:cover;display:block;} .bec-mp-t-img.bec-mp-no-img img{display:none;} .bec-mp-t-ey{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--bec-mp-muted);margin-bottom:10px;} .bec-mp-t-h{font-size:clamp(20px,1.5vw,24px);font-weight:700;letter-spacing:-.5px;line-height:1.19;color:var(--bec-mp-text);margin-bottom:11px;} .bec-mp-t-p{font-size:14px;color:var(--bec-mp-muted);line-height:1.6;margin-bottom:17px;} .bec-mp-t-link{font:600 14px/1 inherit;color:var(--bec-mp-accent);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:gap .15s;} .bec-mp-t-link:hover{gap:9px;} .bec-mp-t-link::after{content:"\203A";font-size:18px;line-height:1;} .bec-mp-t-credit{font-size:10.5px;color:#b0b0b6;margin-top:13px;line-height:1.5;} .bec-mp-t-img.bec-mp-no-img ~ .bec-mp-t-credit{display:none;} .bec-mp-foot{max-width:1200px;margin:0 auto;padding:0 40px 30px; display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;transform:translateX(var(--bec-align-x,0px));} /* A bare
  • outside a