/* ─── Navigation link ───────────────────────────────────────────────── */
.hzo-nav-link {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-500, 500);
    color: var(--nav-link);
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hzo-nav-link:hover {
    color: var(--brand-hover-on-dark); /* brighter brand — a clear jump, not one step */
}
.hzo-nav-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Simple underline default (Track-2 design pass) — a restrained hover underline
   grows in from the left. Token-driven color (var(--link-underline, currentColor)).
   A client can replace it with a richer treatment: its own .hzo-nav-link::after
   in custom.css loads last and fully overrides this default (byte-identical). */
.hzo-nav-link { position: relative; }
.hzo-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--link-underline, currentColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
    pointer-events: none;
}
.hzo-nav-link:hover::after,
.hzo-nav-link:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .hzo-nav-link::after { transition: none; }
}