/* TradesFolks Sprint 885 — Premium Compact Desktop Mega Menu Ownership layer over enterprise-navigation-v2.css. Desktop only. Mobile navigation remains untouched. No gradients. */ @media (min-width:1025px){ .premium-header .nav-row, .premium-header .nav-inner{overflow:visible!important} /* Each non-category menu owns its own compact dropdown. */ .premium-header .tf-market-nav-item{ position:relative!important; } .premium-header .tf-market-nav-item>button{ min-height:40px!important; padding:0 13px!important; border-radius:8px!important; font-size:12px!important; } .premium-header .tf-market-nav-item>button:hover, .premium-header .tf-market-nav-item>button[aria-expanded="true"]{ background:#f6f8fb!important; color:#123b68!important; } .premium-header .tf-market-nav-item>button[aria-expanded="true"]::after{ right:13px!important; bottom:1px!important; left:13px!important; height:2px!important; background:#f4b72f!important; } /* Replace the oversized full-width sheet with a focused floating panel. */ .premium-header .tf-market-nav-item .tf-nav-dropdown{ position:absolute!important; z-index:1340!important; top:calc(100% + 5px)!important; left:50%!important; right:auto!important; width:min(680px,calc(100vw - 40px))!important; max-width:680px!important; min-height:0!important; grid-template-columns:180px minmax(0,1fr)!important; gap:12px!important; padding:12px!important; transform:translateX(-50%)!important; border:1px solid #dce5ef!important; border-top:2px solid #f4b72f!important; border-radius:12px!important; background:#fff!important; box-shadow:0 16px 40px rgba(7,27,70,.16)!important; overflow:hidden!important; } .premium-header .tf-market-nav-item .tf-nav-dropdown[hidden]{ display:none!important; } /* Right-most dropdowns align to navigation edge so they cannot overflow. */ .premium-header .tf-market-nav-item:nth-last-child(-n+2) .tf-nav-dropdown{ left:auto!important; right:0!important; transform:none!important; } /* Compact editorial intro. */ .premium-header .tf-nav-panel-intro{ justify-content:flex-start!important; padding:10px 12px 10px 4px!important; border-right:1px solid #e7edf3!important; } .premium-header .tf-nav-eyebrow{ margin:0 0 6px!important; color:#a97813!important; font-size:7px!important; letter-spacing:.1em!important; } .premium-header .tf-nav-panel-intro h3{ max-width:165px!important; font-size:16px!important; line-height:1.12!important; color:#102d50!important; } .premium-header .tf-nav-panel-intro p{ max-width:165px!important; margin:7px 0 10px!important; font-size:8px!important; line-height:1.45!important; color:#718398!important; } .premium-header .tf-nav-panel-cta{ min-height:31px!important; border-radius:7px!important; padding:0 9px!important; border-color:#d5e0ea!important; color:#173f69!important; font-size:7px!important; } /* Main action area: 2x3 compact cards, no huge whitespace. */ .premium-header .tf-nav-panel-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; align-content:start!important; gap:6px!important; } .premium-header .tf-nav-panel-grid>a{ grid-template-columns:30px minmax(0,1fr) 12px!important; min-height:48px!important; gap:7px!important; padding:6px 7px!important; border-radius:8px!important; border-color:#e1e7ed!important; background:#fff!important; box-shadow:none!important; } .premium-header .tf-nav-panel-grid>a:hover{ transform:none!important; border-color:#e5c66e!important; background:#fffaf0!important; } .premium-header .tf-nav-panel-grid>a::after{ font-size:13px!important; color:#8293a5!important; } .premium-header .tf-nav-menu-icon{ width:30px!important; min-width:30px!important; height:30px!important; min-height:30px!important; border-radius:7px!important; background:#f3f7fb!important; color:#285b8f!important; } .premium-header .tf-nav-menu-icon svg{ width:14px!important; height:14px!important; } .premium-header .tf-nav-panel-grid strong{ font-size:9px!important; line-height:1.15!important; color:#1d3957!important; } .premium-header .tf-nav-panel-grid small{ margin-top:1px!important; font-size:6.5px!important; line-height:1.2!important; color:#8796a6!important; } /* Promotional third column created the visual bulk in the old menu. Remove it on desktop; the intro CTA already carries the destination. */ .premium-header .tf-nav-panel-promo{ display:none!important; } /* Semantic accents stay subtle and consistent. */ .premium-header .tf-nav-dropdown--secure .tf-nav-menu-icon{ background:#edf8f1!important; color:#258456!important; } .premium-header .tf-nav-dropdown--rfq .tf-nav-menu-icon, .premium-header .tf-nav-dropdown--new .tf-nav-menu-icon{ background:#fff5d9!important; color:#926a0d!important; } /* All Categories remains a true mega-menu, but reduce height/density. */ .premium-header .tf-category-mega-dialog{ grid-template-columns:190px minmax(0,1fr)!important; height:min(330px,calc(100vh - 190px))!important; border-radius:0 0 12px 12px!important; box-shadow:0 15px 36px rgba(7,27,70,.14)!important; } .premium-header .tf-category-mega-sidebar{ padding:8px!important; } .premium-header .tf-category-mega-search{ min-height:34px!important; border-radius:7px!important; } .premium-header .tf-category-mega-list{ gap:2px!important; margin-top:5px!important; } .premium-header .tf-category-mega-parent{ min-height:34px!important; border-radius:7px!important; padding:4px 6px!important; font-size:9px!important; } /* Strong focus visibility without oversized active blocks. */ .premium-header .tf-market-nav-item>button:focus-visible, .premium-header .tf-nav-panel-grid>a:focus-visible, .premium-header .tf-nav-panel-cta:focus-visible{ outline:2px solid #e8b52c!important; outline-offset:2px!important; } } /* Tablet/mobile intentionally defer to existing mobile navigation ownership. */ @media (max-width:1024px){ .premium-header .tf-nav-dropdown{max-width:none} }