/*---------- Media Query min-width Structure ----------*/ /*---------- Media Query max-width Structure ----------*/ /*---------- Break-point min-width Structure ----------*/ /*---------- Break-point max-width Structure ----------*/ .ast-header-break-point.ast-no-toggle-menu-enable { /*.main-navigation li { position: static; }*/ /** Layout */ /** Option: Hide custom menu item on mobile */ /** Removed custom menu item border if the custom menu item is within the menu. */ /** Removed hover color from anchor and toggle button and added it to the `li`, Because `li` contain both `a` and `toggle`. */ } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar .main-header-bar-navigation { display: block; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar-navigation .site-navigation { background: #fff; } .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation { position: relative; } .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation .sub-menu .menu-link { position: relative; } .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation .sub-menu .menu-item .menu-link { width: 100%; } .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation li, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation ul .menu-item .menu-link { display: inline-block; width: auto; } .ast-header-break-point.ast-no-toggle-menu-enable .ast-header-menu li.ast-sub-menu-goes-outside:hover > .sub-menu, .ast-header-break-point.ast-no-toggle-menu-enable .ast-header-menu li.ast-sub-menu-goes-outside.focus > .sub-menu, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu { position: absolute; left: 0; right: 0; width: 240px; } .ast-header-break-point.ast-no-toggle-menu-enable .ast-header-menu li.ast-sub-menu-goes-outside:hover > .sub-menu .sub-menu, .ast-header-break-point.ast-no-toggle-menu-enable .ast-header-menu li.ast-sub-menu-goes-outside.focus > .sub-menu .sub-menu, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .sub-menu { position: relative; width: 100%; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { right: 0; top: 0; position: relative; transition: all 0.2s linear; border-radius: 0; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu > .menu-item-has-children > .ast-menu-toggle { font-size: .8em; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu > .menu-item-has-children > .menu-link { padding-right: 0; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar .main-header-bar-navigation .sub-menu .menu-item-has-children > .ast-menu-toggle { position: absolute; background: transparent; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .menu-link { display: inline-block; width: 100%; } .ast-header-break-point.ast-no-toggle-menu-enable .sub-menu .menu-item .menu-link:before, .ast-header-break-point.ast-no-toggle-menu-enable .sub-menu .menu-item .menu-item .menu-link:before, .ast-header-break-point.ast-no-toggle-menu-enable .sub-menu .menu-item .menu-item .menu-item .menu-link:before, .ast-header-break-point.ast-no-toggle-menu-enable .sub-menu .menu-item .menu-item .menu-item .menu-item .menu-link:before { content: ""; } .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation ul .menu-item .menu-link { border: none; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar .main-header-bar-navigation .main-header-menu, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation ul ul .menu-item .menu-link { border: none; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar-navigation ul > .menu-item:first-child, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item { border-style: solid; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .sub-menu .menu-item, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation ul ul ul li { border-left: none; border-right: none; border-bottom: none; } @media (min-width: 769px) { .ast-header-break-point.ast-no-toggle-menu-enable .ast-main-header-bar-alignment { flex: none; width: auto; } } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-container { justify-content: space-between; align-items: center; width: 100%; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar-navigation { width: 100%; margin: 0; } .ast-header-break-point.ast-no-toggle-menu-enable .ast-main-header-bar-alignment { width: auto; order: 1; text-align: right; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-bar .main-header-bar-navigation { display: inline-block; width: auto; padding: 0; } @media (max-width: 544px) { .ast-header-break-point.ast-no-toggle-menu-enable .ast-mobile-header-stack .ast-main-header-bar-alignment { text-align: center; } } .ast-header-break-point.ast-no-toggle-menu-enable .header-main-layout-1.ast-mobile-header-stack .main-header-container, .ast-header-break-point.ast-no-toggle-menu-enable .header-main-layout-2.ast-mobile-header-stack .main-header-container, .ast-header-break-point.ast-no-toggle-menu-enable .header-main-layout-3.ast-mobile-header-stack .main-header-container { flex-direction: column; } @media (max-width: 544px) { .ast-header-break-point.ast-no-toggle-menu-enable .header-main-layout-1 .site-branding, .ast-header-break-point.ast-no-toggle-menu-enable .header-main-layout-2 .site-branding, .ast-header-break-point.ast-no-toggle-menu-enable .header-main-layout-3 .site-branding { padding-right: 0; padding-bottom: 1em; } } .ast-header-break-point.ast-no-toggle-menu-enable .ast-hide-custom-menu-mobile .main-navigation .ast-masthead-custom-menu-items { display: none; } .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation > .ast-above-header-menu > .menu-item.ast-masthead-custom-menu-items:last-child, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation > ul > .menu-item.ast-masthead-custom-menu-items:last-child, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation > ul > .menu-item.ast-masthead-custom-menu-items { border: none; } .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation ul li { transition: all 0.2s linear; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-link:hover, .ast-header-break-point.ast-no-toggle-menu-enable .ast-header-custom-item a:hover, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item:hover > .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.focus > .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation ul .menu-item .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation .sub-menu .menu-item .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation .sub-menu .menu-item:hover .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-navigation ul .menu-item:not(.ast-masthead-custom-menu-items) .menu-link { background: transparent; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.focus > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .current-menu-item > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .current-menu-ancestor > .ast-menu-toggle { color: inherit; } .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-ancestor > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-ancestor > .menu-link { color: inherit; } @media (max-width: 544px) { .ast-no-toggle-menu-enable .ast-mobile-header-stack .main-header-bar-navigation .main-header-menu { justify-content: center; } } /* Focus Management Styles - WCAG 2.1 Compliance */ /* Added for keyboard accessibility and screen reader support */ /* Button Focus Styles */ .hvac-button:focus, .hvac-content .button:focus, .hvac-content button:focus, .hvac-content input[type="submit"]:focus, .hvac-email-submit:focus, .hvac-filter-submit:focus, .hvac-certificate-actions button:focus, .hvac-certificate-actions a:focus { outline: 2px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); border-radius: 4px; } /* Input Focus Styles */ .hvac-form-input:focus, .hvac-content input[type="text"]:focus, .hvac-content input[type="email"]:focus, .hvac-content input[type="password"]:focus, .hvac-content input[type="url"]:focus, .hvac-content textarea:focus, .hvac-content select:focus, .hvac-email-form-row input:focus, .hvac-email-form-row textarea:focus, .hvac-filter-group input:focus, .hvac-filter-group select:focus { outline: 2px solid #005fcc; outline-offset: 2px; border-color: #005fcc; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* Link Focus Styles */ .hvac-content a:focus, .hvac-event-link:focus, .hvac-certificate-link:focus, .hvac-attendee-profile-icon:focus, .hvac-dashboard-nav a:focus, .hvac-email-navigation a:focus { outline: 2px solid #005fcc; outline-offset: 2px; text-decoration: underline; background-color: rgba(0, 95, 204, 0.1); border-radius: 2px; } /* Interactive Element Focus Styles */ .hvac-attendee-checkbox:focus, .hvac-select-all-container input[type="checkbox"]:focus, .hvac-modal-close:focus, .hvac-certificate-table tr:focus { outline: 2px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .hvac-content *:focus { outline: 3px solid #000000; outline-offset: 2px; background-color: #ffff00; color: #000000; } } /* Focus-visible polyfill support */ /* Reset focus for mouse users while preserving keyboard accessibility */ .js-focus-visible :focus:not(.focus-visible) { outline: none; box-shadow: none; } /* Ensure focus is visible for keyboard users */ .js-focus-visible .focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }