/* Aggregator sheet — the component loader (includes/component-loader.php)
   enqueues ONLY <name>.css per folder, so desktop-nav's sibling variant sheets
   are @imported here to ride the same front-end request. This is their ONLY
   front-end load path: header-condense.css + desktop-ctas.css are named
   non-<name>.css and are referenced nowhere else, so without these @imports the
   header-condense chrome and the desktop CTA rail under-load fleet-wide.
   (Same fix pattern as footer.css @importing footer-typography + footer-chrome,
   and video.css @importing lite-video + video-background.) @imports must precede
   all style rules — keep them first. */
@import './desktop-ctas.css?ver=1787769613';
@import './header-condense.css?ver=1787769613';

/* ─── Desktop nav menu (UL/LI structure) ────────────────────────── */
.hzo-site-nav {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
    align-self: stretch;
    gap: 0;
    flex: 1;
    justify-content: center;
}
@media (min-width: 1250px) { .hzo-site-nav { display: flex; } }

/* display:flex + align-items:center keeps the link text vertically centered while
   the item itself spans the header's full height (align-items:stretch on the nav +
   align-self:stretch on the nav column). That makes the mega-menu's `top:100%`
   anchor to the header's BOTTOM edge instead of the middle of the header, and it
   auto-follows the condense-on-scroll height change. */
.hzo-nav-item { position: relative; display: flex; align-items: center; }

/* !important on color: fights a:visited from per-client main.css.
   Matching :visited rule at bottom-of-file preserves the color. */
.hzo-site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 14px 13px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: var(--fw-600, 600);
    color: var(--nav-link) !important;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 200ms ease;
}
/* Non-clickable dropdown parents: <span> triggers have no href, so no pointer cursor */
span.hzo-site-nav__link { cursor: default; }

.hzo-site-nav__link:hover,
.hzo-nav-item:hover > .hzo-site-nav__link,
.hzo-nav-item.is-open > .hzo-site-nav__link { color: var(--nav-link-hover) !important; }
a.hzo-site-nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* G37: current page — brand color, heavier weight, and a short underline bar so
   "where am I" reads at a glance (H1 visibility of status). */
.hzo-site-nav__link.is-active,
.hzo-site-nav__link[aria-current="page"] {
    position: relative;
    color: var(--nav-link-active, var(--brand-text, var(--brand))) !important;
    font-weight: var(--fw-bold, 700);
}
.hzo-site-nav__link.is-active::after,
.hzo-site-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 8px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.hzo-mega-menu__link.is-active { color: var(--brand-text, var(--brand)) !important; font-weight: var(--fw-bold, 700); }

.hzo-nav-chevron {
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 200ms ease, opacity 200ms ease;
}
.hzo-nav-item:hover > .hzo-site-nav__link .hzo-nav-chevron,
.hzo-nav-item.is-open > .hzo-site-nav__link .hzo-nav-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* Reduced motion: kill the nav-link colour + chevron rotate/fade transitions
   (the rotated/coloured end-states still apply — only the animation is dropped).
   header-condense.css ships its own reduced-motion block for the header shell. */
@media (prefers-reduced-motion: reduce) {
    .hzo-site-nav__link,
    .hzo-nav-chevron { transition: none; }
}