header.site-header { box-sizing: border-box; min-height: 67px; padding: 8px 51px 7px 49px; background-color: var(--surface-card-light); display: flex; justify-content: space-between; } /* The top menu stays in view while scrolling — on every page except Equity Universes, where it is meant to scroll away and leave the room to the table (whose own heading row sticks instead). has-equity-universes is set on in inc/theme.php. Below the admin bar when that is shown. */ body:not(.has-equity-universes) header.site-header { position: sticky; top: 0; z-index: 60; } body.admin-bar:not(.has-equity-universes) header.site-header { top: var(--wp-admin--admin-bar--height, 32px); } header.site-header .menu { gap: 22px; } header.site-header .menu a { font-size: 13px; font-weight: bold; padding: 11px 14px; letter-spacing: 0.6px; border-bottom: 2px solid transparent; border-radius: 6px; transition: color 0.3s ease; } header.site-header .menu .current-menu-item a { color: var(--primary-400); border-color: var(--primary-400); } header.site-header .menu a:hover { color: var(--primary-400); border-color: var(--primary-400); } header.site-header .menu .menu-item.icon_only a { padding-left: 11px; padding-right: 11px; } /* Top-right log-out button: keep the SVG icon visible but hide the text label. font-size: 0 collapses the bare "Log out" text node; the SVG inside has explicit width/height attributes so it renders at its intrinsic size. width: 19px clamps the link's content box to the icon — without it the anonymous flex item created by the text node still reserves ~5px. */ header.site-header .menu .log_out_btn a { font-size: 0; width: 19px; } /* Account dropdown — injected sub-menu under the top-right Account item. */ header.site-header .menu .claryss-account-parent { position: relative; } /* Invisible bridge: keeps :hover continuous across the 14px gap between the Account item and its sub-menu, so the dropdown doesn't close while the cursor travels through that gap. */ header.site-header .menu .claryss-account-parent::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 11px; } header.site-header .menu .claryss-account-parent > .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 100; box-sizing: border-box; width: 179px; padding: 16px 13px; margin: 11px 0 0 0; list-style: none; background-color: #fff; border-radius: 6px; border-bottom: 2px solid var(--gradient-start); display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease; } header.site-header .menu .claryss-account-parent:hover > .sub-menu, header.site-header .menu .claryss-account-parent:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; } header.site-header .menu .claryss-account-submenu-item { margin: 0; } header.site-header .menu .claryss-account-submenu-item a { display: block; font-size: 13px; line-height: 1; font-weight: bold; letter-spacing: 0.6px; color: var(--action-dark); padding: 10px 11px; border-radius: 6px; border-bottom: 2px solid var(--secondary-100); background-color: transparent; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } header.site-header .menu .claryss-account-submenu-item a:hover { background-color: var(--primary-100); border-bottom-color: var(--primary-100); color: var(--action-dark); } /* <=991px: tighter 24px gutters and smaller, denser menu items so the nav fits */ @media (max-width: 991px) { header.site-header { padding-left: 24px; padding-right: 24px; } header.site-header .menu { gap: 10px; } header.site-header .menu a { font-size: 11px; padding: 6px 6px; letter-spacing: 0.3px; } header.site-header .menu .menu-item.icon_only a { padding-left: 6px; padding-right: 6px; } /* Logged-in: show first name only, hide the rest (last name) */ header.site-header .menu .claryss-account-name-rest { display: none; } } /* Mobile (<=767px): hide the header entirely until the mobile menu is designed */ @media (max-width: 767px) { header.site-header { display: none; } }