.wp-block-mdsystec-header-mega-navigation.mds-header-mega-nav { --mds-mega-panel-top: 78px; flex: 1 1 auto; min-width: 0; margin-left: 0; } .mds-header-mega-nav *, .mds-header-mega-nav *::before, .mds-header-mega-nav *::after { box-sizing: border-box; } .mds-header-mega-nav__mobile-toggle { display: none; } .mds-header-mega-nav__menu, .mds-header-mega-nav__list, .mds-header-mega-nav__panel ul { margin: 0; padding: 0; list-style: none; } .mds-header-mega-nav__list { display: flex; align-items: center; justify-content: var(--mds-header-nav-justify, flex-start); gap: var(--mds-header-nav-gap, clamp(.9rem, 1.65vw, 1.8rem)); } .mds-header-mega-nav__item { position: static; display: flex; align-items: center; min-height: 78px; } .mds-header-mega-nav__item-row { display: flex; align-items: center; min-width: 0; } .mds-header-mega-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .25rem 0; color: var(--mds-nav-header-text, #111514) !important; font-size: var(--mds-header-nav-font-size, clamp(.84rem, .85vw, .96rem)); font-weight: 650; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: color .18s ease; } .mds-header-mega-nav__link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--mds-nav-hover-underline, #b4f300); transition: right .2s ease; } .mds-header-mega-nav__item:hover > .mds-header-mega-nav__item-row .mds-header-mega-nav__link, .mds-header-mega-nav__item.is-open > .mds-header-mega-nav__item-row .mds-header-mega-nav__link, .mds-header-mega-nav__link:focus-visible { color: var(--mds-nav-hover-text, #0053f3) !important; outline: none; } .mds-header-mega-nav__item:hover > .mds-header-mega-nav__item-row .mds-header-mega-nav__link::after, .mds-header-mega-nav__item.is-open > .mds-header-mega-nav__item-row .mds-header-mega-nav__link::after, .mds-header-mega-nav__link:focus-visible::after { right: 0; } .mds-header-mega-nav__panel-toggle { appearance: none; display: inline-grid; place-items: center; width: 1.25rem; height: 2.2rem; margin-left: .38rem; padding: 0; border: 0; background: transparent; color: var(--mds-nav-header-text, #111514); cursor: pointer; } .mds-header-mega-nav__panel-toggle span:first-child { display: block; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .18s ease; } .mds-header-mega-nav__item.is-open .mds-header-mega-nav__panel-toggle { color: var(--mds-nav-accent, #0053f3); } .mds-header-mega-nav__item.is-open .mds-header-mega-nav__panel-toggle span:first-child { transform: rotate(225deg) translate(-1px, -1px); } .mds-header-mega-nav__panel-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--mds-nav-accent, #0053f3) 45%, transparent); outline-offset: 2px; border-radius: 4px; } .mds-header-mega-nav__panel { position: fixed; z-index: 999; left: 0; right: 0; top: var(--mds-mega-panel-top, 78px); width: auto; max-width: 100%; max-height: min(76vh, 760px); overflow-x: hidden; overflow-y: auto; border-top: 1px solid color-mix(in srgb, var(--mds-nav-header-text, #111514) 10%, transparent); background: var(--mds-nav-mega-bg, #fff); box-shadow: 0 20px 40px rgba(16, 24, 40, .12); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .mds-header-mega-nav__panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .mds-header-mega-nav__panel-inner { width: min(1664px, calc(100% - clamp(2rem, 7.4vw, 8.5rem))); margin: 0 auto; padding: clamp(2rem, 2.5vw, 3rem) 0 clamp(2.5rem, 3.9vw, 4.4rem); } .mds-header-mega-nav__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr)); gap: clamp(1.4rem, 2vw, 2.5rem); } .mds-header-mega-nav__column { min-width: 0; } .mds-header-mega-nav__column h3, .mds-header-mega-nav__card h3 { margin: 0; font-size: clamp(1rem, 1.12vw, 1.1875rem); line-height: 1.4; letter-spacing: -.01em; } .mds-header-mega-nav__column h3 a, .mds-header-mega-nav__card h3 { color: var(--mds-nav-mega-text, #222) !important; font-weight: 750; text-decoration: none; } .mds-header-mega-nav__column h3 a { transition: color .18s ease; } .mds-header-mega-nav__column h3 a:hover, .mds-header-mega-nav__column h3 a:focus-visible { color: var(--mds-nav-mega-hover, #0053f3) !important; } .mds-header-mega-nav__column ul { display: grid; gap: .85rem; margin-top: 1rem; } .mds-header-mega-nav__column li a { display: inline-block; color: var(--mds-nav-mega-muted, #222) !important; font-size: clamp(1rem, 1.06vw, 1.125rem); line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; transition: color .18s ease; } .mds-header-mega-nav__column li a:hover, .mds-header-mega-nav__column li a:focus-visible { color: var(--mds-nav-mega-hover, #0053f3) !important; text-decoration: none; } .mds-header-mega-nav__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1rem, 1.4vw, 1.6rem); margin-top: clamp(1.75rem, 2.1vw, 2.5rem); padding-top: 0; border-top: 0; align-items: stretch; } .mds-header-mega-nav__card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 24px; min-width: 0; min-height: 266px; padding: clamp(1.35rem, 1.7vw, 1.9rem); border: 1px solid var(--mds-nav-card-border, #dbe3ef); border-radius: 18px; background: #fff; box-shadow: none; } .mds-header-mega-nav__card-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #eaf1ff; color: #0053f3; } .mds-header-mega-nav__card-icon svg { display: block; } .mds-header-mega-nav__card-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .mds-header-mega-nav__card-eyebrow { display: inline-block; margin: 0 0 .4rem; color: #0053f3; font-size: .875rem; font-weight: 750; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; } .mds-header-mega-nav__card h3 { font-size: clamp(1.125rem, 1.32vw, 1.375rem); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; } .mds-header-mega-nav__card p { margin: .5rem 0 .6rem; color: #596273; font-size: clamp(1rem, 1.12vw, 1.1875rem); line-height: 1.45; overflow-wrap: anywhere; } .mds-header-mega-nav__card .mds-header-mega-nav__card-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: auto; padding-top: 1rem; color: #0053f3 !important; font-size: clamp(1rem, 1.06vw, 1.125rem); font-weight: 650; line-height: 1.4; text-decoration: none !important; transition: color .18s ease, background .18s ease; } .mds-header-mega-nav__card .mds-header-mega-nav__card-link:hover { color: #003ab0 !important; } .mds-header-mega-nav__card--featured { border-color: #0053f3; background: #0053f3; } .mds-header-mega-nav__card--featured .mds-header-mega-nav__card-icon { background: rgba(255, 255, 255, .16); color: #fff; } .mds-header-mega-nav__card--featured .mds-header-mega-nav__card-eyebrow { padding: .2rem .6rem; border-radius: 5px; background: #b4f300; color: #222; letter-spacing: .08em; } .mds-header-mega-nav__card--featured h3 { color: #fff !important; } .mds-header-mega-nav__card--featured p { color: #fff; } .mds-header-mega-nav__card--featured .mds-header-mega-nav__card-link { margin-top: auto; padding: .7rem 1.2rem; border-radius: 8px; background: #fff; color: #0053f3 !important; } .mds-header-mega-nav__card--featured .mds-header-mega-nav__card-link:hover { background: #eaf1ff; color: #003ab0 !important; } .mds-header-mega-nav__column a:focus-visible, .mds-header-mega-nav__card .mds-header-mega-nav__card-link:focus-visible { outline: 2px solid #0053f3; outline-offset: 4px; border-radius: 3px; } .mds-header-mega-nav__card--featured .mds-header-mega-nav__card-link:focus-visible { outline-color: #b4f300; } @media (max-width: 1180px) { .wp-block-mdsystec-header-mega-navigation.mds-header-mega-nav { flex: 0 0 auto; order: 3; margin-left: 0; } .mds-header-mega-nav__mobile-toggle { appearance: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--mds-nav-header-text, #111514); cursor: pointer; } .mds-header-mega-nav__mobile-toggle:focus-visible { outline: 2px solid var(--mds-nav-accent, #0053f3); outline-offset: 2px; } .mds-header-mega-nav__mobile-icon, .mds-header-mega-nav__mobile-icon::before, .mds-header-mega-nav__mobile-icon::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; } .mds-header-mega-nav__mobile-icon { position: relative; } .mds-header-mega-nav__mobile-icon::before, .mds-header-mega-nav__mobile-icon::after { content: ''; position: absolute; left: 0; } .mds-header-mega-nav__mobile-icon::before { top: -7px; } .mds-header-mega-nav__mobile-icon::after { top: 7px; } .mds-header-mega-nav.is-mobile-open .mds-header-mega-nav__mobile-icon { background: transparent; } .mds-header-mega-nav.is-mobile-open .mds-header-mega-nav__mobile-icon::before { top: 0; transform: rotate(45deg); } .mds-header-mega-nav.is-mobile-open .mds-header-mega-nav__mobile-icon::after { top: 0; transform: rotate(-45deg); } .mds-header-mega-nav__menu { position: fixed; z-index: 998; left: 0; right: 0; top: var(--mds-mega-panel-top, 78px); bottom: 0; display: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .7rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: var(--mds-nav-mega-bg, #fff); box-shadow: 0 16px 30px rgba(16, 24, 40, .12); } .mds-header-mega-nav.is-mobile-open .mds-header-mega-nav__menu { display: block; } .mds-header-mega-nav__list { display: block; } .mds-header-mega-nav__item { display: block; min-height: 0; border-bottom: 1px solid var(--mds-nav-divider, #d7dde6); } .mds-header-mega-nav__item-row { width: 100%; } .mds-header-mega-nav__link { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: .85rem 0; font-size: 1rem; white-space: normal; } .mds-header-mega-nav__link::after { display: none; } .mds-header-mega-nav__panel-toggle { flex: 0 0 44px; width: 44px; height: 44px; margin-left: .5rem; border-radius: 6px; background: color-mix(in srgb, var(--mds-nav-accent, #0053f3) 7%, transparent); } .mds-header-mega-nav__panel { position: static; display: none; width: 100%; max-height: none; margin: 0; padding: 0 0 1rem 1rem; overflow: visible; border: 0; border-left: 2px solid color-mix(in srgb, var(--mds-nav-accent, #0053f3) 24%, transparent); box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; } .mds-header-mega-nav__panel.is-open { display: block; } .mds-header-mega-nav__panel-inner { width: 100%; padding: .6rem 0 0; } .mds-header-mega-nav__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1rem; } .mds-header-mega-nav__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .9rem; } .mds-header-mega-nav__column h3 { font-size: .95rem; } .mds-header-mega-nav__column ul { gap: .35rem; margin-top: .45rem; } .mds-header-mega-nav__column li a { padding: .18rem 0; font-size: .9rem; } .mds-header-mega-nav__cards { margin-top: 1rem; padding-top: 0; } .mds-header-mega-nav__card { min-height: 230px; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 1.2rem; } .mds-header-mega-nav__card-icon { width: 48px; height: 48px; border-radius: 13px; } .mds-header-mega-nav__card h3 { font-size: 1.15rem; } .mds-header-mega-nav__card p { font-size: 1rem; } } @media (max-width: 700px) { .mds-header-mega-nav__columns, .mds-header-mega-nav__cards { grid-template-columns: 1fr; } } @media (max-height: 560px) and (max-width: 1180px) { .mds-header-mega-nav__menu { padding-top: .35rem; } .mds-header-mega-nav__link { min-height: 46px; padding-block: .65rem; } } @media (max-width: 430px) { .mds-header-mega-nav__mobile-toggle { width: 38px; height: 38px; } } @media (max-width: 430px) { .mds-header-mega-nav__card { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 1rem; } .mds-header-mega-nav__card-icon { width: 40px; height: 40px; border-radius: 11px; } .mds-header-mega-nav__card-icon svg { width: 24px; height: 24px; } .mds-header-mega-nav__card-eyebrow { font-size: .75rem; } .mds-header-mega-nav__card--featured .mds-header-mega-nav__card-link { padding: .65rem .8rem; font-size: .95rem; } } @media (prefers-reduced-motion: reduce) { .mds-header-mega-nav__panel, .mds-header-mega-nav__card-link { transition: none; } }