/* Sticky Bar CMS object. Animation and interaction styles are scoped to this object. */
.cms-sticky-bar {
    position: relative;
    min-height: 46px;
    padding-bottom: 1px;
    border-color: color-mix(in srgb, var(--site-color-border-strong) 95%, transparent) !important;
    background: var(--site-color-background);
}

.cms-sticky-bar__track { max-width: var(--site-content-width); }

/* The measure .site-container resolves to, so the bar's first item starts on the logo's left
   edge. A max-width on its own was not enough: it caps the bar at the content width but never
   subtracts the page gutter, so below 1464px of viewport the bar ran edge to edge while the
   header above it was still inset by --site-page-gutter. That is the "too far left on small
   screens" half of the report. */
.cms-sticky-bar__container {
    width: min(calc(100% - var(--site-page-gutter) - var(--site-page-gutter)), var(--site-content-width));
    margin-inline: auto;
}

/* The measure lives on the container above, so the content just fills it. A second copy of the
   cap here would subtract the gutter twice the moment the container stopped being full width.
   The fixed state further down is the one exception. Wrap crowded bars instead of making
   their navigation horizontally scrollable. */
.cms-sticky-bar__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 45px;
    margin: 0;
}

/* No left margin. The name is the first thing on the bar and has to start exactly on the
   measure's left edge; a leading 1rem is what put it slightly right of the logo on a large
   monitor even once the container itself was correct - the "too far right on large screens"
   half of the report. The right margin stays: it is the gap to the links beside it. */
.cms-sticky-bar__name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    margin: .25rem 1rem .25rem 0;
    padding: 0;
    color: var(--site-color-primary);
    font-size: calc(1.275rem + .3vw);
    font-weight: 300;
    line-height: 1.2;
}

.cms-sticky-bar__container--fixed {
    position: fixed !important;
    z-index: 9999;
    top: 0;
    right: 0;
    left: 0;
    width: 100% !important;
    max-width: none !important;
    background: color-mix(in srgb, var(--site-color-background) 95%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--site-color-border-strong) 95%, transparent);
    box-shadow: var(--site-shadow-small);
    animation: cms-sticky-bar-fixed-enter .5s both;
}

/* Pinned to the top of the window, the container has to span the whole viewport so its
   background and bottom border do - which means the measure moves inwards to the content for as
   long as that lasts. Without this the bar's items jump to the window edge at the moment it
   sticks, which is the same misalignment one scroll position later. */
.cms-sticky-bar__container--fixed .cms-sticky-bar__content {
    width: min(calc(100% - var(--site-page-gutter) - var(--site-page-gutter)), var(--site-content-width));
    margin-inline: auto;
}

/* The fixed track stays inside its CMS object. Raise that object's stacking layer
   above later edit borders and edge controls while the track is fixed. */
.cms-container-item-border.cms-container-item-border--sticky-bar-fixed,
.cms-container-item-border.cms-container-item-border--sticky-bar-fixed:hover,
.cms-container-item-border.cms-container-item-border--sticky-bar-fixed:focus-within {
    z-index: 20;
}

.cms-sticky-bar .nav {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.cms-sticky-bar .nav-item {
    min-width: 0;
    max-width: 100%;
}

.cms-sticky-bar .nav-link {
    position: relative;
    min-height: 45px;
    margin-right: 1rem;
    margin-left: 1rem;
    padding: .625rem 0;
    overflow: hidden;
    color: var(--site-color-text);
    font-size: .875rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The list is pushed to the right of the measure, so the last link's trailing margin is the only
   thing between its text and that right edge - 1rem of it, against a left edge that now sits
   exactly on the logo. Zeroed here rather than by dropping margin-right from .nav-link, because
   that margin is half of the gap BETWEEN links and the variants below set their own values for
   it. Specificity is deliberately above every .nav-link rule in this file, including the ones
   inside the narrow-viewport media query, so the variants keep their spacing and only ever lose
   the trailing edge. The underline (::after) is inset to the link box, so it follows. */
.cms-sticky-bar .nav > li:last-child .nav-link {
    margin-right: 0;
}

.cms-sticky-bar .nav-link.active {
    color: var(--site-color-text);
    opacity: 1;
}

.cms-sticky-bar .nav-link::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 2px;
    content: "";
    transition: bottom var(--site-transition-fast), background-color var(--site-transition-fast);
}

.cms-sticky-bar .nav-link.active::after {
    bottom: 0;
    background: currentColor;
}

.cms-sticky-bar .nav-link:hover,
.cms-sticky-bar .nav-link:focus {
    color: var(--site-color-text);
    background: none;
    opacity: 1;
}

.cms-sticky-bar .nav-link:focus-visible {
    outline: 2px solid var(--site-color-primary);
    outline-offset: -2px;
}

.cms-sticky-bar .featureFadeInDown {
    -webkit-animation-name: featureFadeInDown;
    animation-name: featureFadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.cms-sticky-bar li:nth-child(1) .featureFadeInDown { animation-delay: .35s; }
.cms-sticky-bar li:nth-child(2) .featureFadeInDown { animation-delay: .5s; }
.cms-sticky-bar li:nth-child(3) .featureFadeInDown { animation-delay: .65s; }
.cms-sticky-bar li:nth-child(n+4) .featureFadeInDown { animation-delay: .8s; }

/* Left margin zeroed for the same reason as the base .cms-sticky-bar__name above - this variant
   was carrying its own 15px and would have walked back the alignment on any bar using it. */
.cms-sticky-bar--feature-navigation .cms-sticky-bar__name { margin: 5px 20px 12px 0; }

.cms-sticky-bar--feature-navigation .nav-link {
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cms-sticky-bar--snapshot,
.audit-snapshot .cms-sticky-bar {
    position: relative;
    height: auto;
}

/* width, not max-width: the container now states its measure as a width, so a max-width here
   would no longer release it to fill the snapshot. */
.cms-sticky-bar--snapshot .cms-sticky-bar__container,
.audit-snapshot .cms-sticky-bar__container {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: none;
}

.cms-sticky-bar-preview { width: min(100%, var(--site-content-width)); }
.cms-sticky-bar-preview .cms-sticky-bar { display: block !important; }

.cms-sticky-bar-preview .cms-sticky-bar__container {
    position: static !important;
    animation: none;
}

/* The editor preview uses a container-sized simulated viewport, so viewport media queries
   must be mirrored here with preview state selectors and container-relative units. */
.cms-preview-shell .cms-sticky-bar-preview .cms-sticky-bar__name {
    font-size: calc(1.275rem + .3cqw);
}

.cms-preview-shell[data-preview-viewport="tablet"] .cms-sticky-bar-preview .nav-link {
    margin-right: .5rem;
    margin-left: .5rem;
}

.cms-preview-shell[data-preview-viewport="tablet"] .cms-sticky-bar-preview .cms-sticky-bar--feature-navigation .nav-link {
    margin-right: 10px;
    margin-left: 10px;
}

.cms-preview-shell[data-preview-viewport="mobile"] .cms-sticky-bar-preview .cms-sticky-bar {
    display: none !important;
}

.cms-sticky-bar-editor-toolbar {
    margin-bottom: .5rem;
}

.cms-sticky-bar-editor-item {
    margin-bottom: .75rem;
    padding: .75rem;
    overflow: hidden;
    border: 1px solid var(--site-color-border);
    border-left: 3px solid var(--site-color-primary);
    border-radius: var(--site-radius-medium);
    background: var(--site-color-background);
    transition: box-shadow var(--site-transition-standard), transform var(--site-transition-standard);
}

.cms-sticky-bar-editor-item:hover {
    box-shadow: var(--site-shadow-medium);
    transform: translateY(-1px);
}

.cms-sticky-bar-editor-item.is-deleted {
    opacity: .55;
    border-left-color: var(--site-color-text-muted);
    background: var(--site-color-surface);
}

.cms-sticky-bar-editor-item.is-deleted:hover {
    box-shadow: none;
    transform: none;
}

.cms-sticky-bar-editor-item.is-deleted input:not([type="hidden"]) {
    color: var(--site-color-text-muted);
    text-decoration: line-through;
}

.cms-sticky-bar-item-actions {
    display: inline-flex;
    gap: .25rem;
}

.cms-sticky-bar-item-action {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    place-items: center;
    color: var(--site-color-text-muted);
    border: 1px solid var(--site-color-border);
    border-radius: var(--site-radius-small);
    background: var(--site-color-surface);
    font-size: .7rem;
    transition: color var(--site-transition-fast), border-color var(--site-transition-fast), background-color var(--site-transition-fast), transform var(--site-transition-fast);
}

.cms-sticky-bar-item-action:hover,
.cms-sticky-bar-item-action:focus-visible {
    color: var(--site-color-primary);
    border-color: color-mix(in srgb, var(--site-color-primary) 45%, var(--site-color-border));
    background: color-mix(in srgb, var(--site-color-primary) 8%, var(--site-color-background));
    outline: 0;
    transform: translateY(-1px);
}

.cms-sticky-bar-item-action:focus-visible {
    box-shadow: var(--site-focus-ring);
}

.cms-sticky-bar-item-action:disabled {
    opacity: .35;
    color: var(--site-color-text-muted);
    border-color: var(--site-color-border);
    background: var(--site-color-surface);
    transform: none;
}

.cms-sticky-bar-item-action--danger {
    color: var(--site-color-danger);
    border-color: color-mix(in srgb, var(--site-color-danger) 35%, var(--site-color-border));
    background: color-mix(in srgb, var(--site-color-danger) 6%, var(--site-color-background));
}

.cms-sticky-bar-item-action--danger:hover,
.cms-sticky-bar-item-action--danger:focus-visible {
    color: var(--site-color-danger-text);
    border-color: var(--site-color-danger);
    background: var(--site-color-danger-background);
}

.cms-sticky-bar-item-action--restore {
    color: var(--site-color-success-text);
    border-color: var(--site-color-success-border);
    background: var(--site-color-success-background);
}

.cms-sticky-bar-item-action--restore:hover,
.cms-sticky-bar-item-action--restore:focus-visible {
    color: var(--site-color-success-text);
    border-color: var(--site-color-success);
    background: var(--site-color-success-background);
}

@-webkit-keyframes featureFadeInDown {
    from { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
    to { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes featureFadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: none; }
}

@keyframes cms-sticky-bar-fixed-enter {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
    .cms-sticky-bar .nav-link {
        margin-right: .5rem;
        margin-left: .5rem;
    }

    .cms-sticky-bar--feature-navigation .nav-link {
        margin-right: 10px;
        margin-left: 10px;
    }
}

@media (min-width: 1200px) {
    .cms-sticky-bar__name { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cms-sticky-bar .nav-link::after,
    .cms-sticky-bar-editor-item { transition: none; }
}