/* ==========================================================================
   Webonomics: header.css
   Sticky white header: logo, Home, Client Gallery, "Choose packages".
   On phones the text links shrink into a compact row next to the logo.
   ========================================================================== */

/* The template-part wrapper must not trap the sticky header. */
.wbn-header-wrap { display: contents; }
.wbn-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--wbn-rule); }
.admin-bar .wbn-header { top: 32px; }

.wbn-nav { display: flex; align-items: center; gap: 40px; height: var(--wbn-header-h); }
.wbn-logo img { height: 30px; width: auto; }

.wbn-menu { margin-left: auto; }
.wbn-menu ul { display: flex; gap: 30px; list-style: none; font-size: 15px; color: var(--wbn-slate); }
.wbn-menu a { display: inline-block; padding: 10px 0; transition: color .18s ease; }
.wbn-menu a:hover, .wbn-menu a:focus-visible { color: var(--wbn-green); }
.wbn-menu a[aria-current="page"] { color: var(--wbn-ink); box-shadow: inset 0 -2px 0 var(--wbn-green); }

@media (max-width: 782px) { .admin-bar .wbn-header { top: 46px; } }

@media (max-width: 700px) {
	.wbn-nav { gap: 14px; }
	.wbn-logo img { height: 22px; }
	.wbn-menu ul { gap: 14px; font-size: 14px; }
	.wbn-nav-cta { display: none; } /* the welcome view's own buttons take over on phones */
}
@media (max-width: 360px) { .wbn-menu li:first-child { display: none; } }