/* topbar.css: the top bar shared by caligrafy.com and Caligrafy Cloud (layout.css draws it)
 * - the page you are on is marked (a.cq-nav-link.is-current, aria-current="page")
 * - when its links do not fit beside the name, they fold into the Menu button at any width (nav.cq-nav--folded,
 *   set by topbar.js), as they do on phones */
.cq-nav-link.is-current { position: relative; color: var(--cq-color-ink); font-weight: 600; }
.cq-nav-link.is-current::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--cq-color-ink); }
.cq-nav-links { flex-wrap: nowrap; white-space: nowrap; }
.cq-nav.cq-nav--measuring .cq-nav-links { visibility: hidden; }

.cq-nav.cq-nav--folded .cq-nav-toggle { display: inline-flex; align-items: center; }
.cq-nav.cq-nav--folded .cq-nav-links {
  display: none; position: absolute; top: var(--cq-nav-height); left: 0; right: 0; flex-direction: column; align-items: stretch;
  padding: 8px var(--cq-gutter) 16px; background: var(--cq-color-canvas); border-bottom: 1px solid var(--cq-color-border);
}
.cq-nav.cq-nav--folded.is-open .cq-nav-links { display: flex; }
.cq-nav.cq-nav--folded .cq-nav-link { min-height: 44px; padding: 0 12px; }
@media (max-width: 575px) { .cq-nav-links .cq-nav-link.is-current::after, .cq-nav.cq-nav--folded .cq-nav-link.is-current::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; } }
.cq-nav.cq-nav--folded .cq-nav-link.is-current::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
.cq-nav-toggle[aria-expanded="true"] { background: rgba(0, 0, 0, .1); }