/*
  Same look as the website header (website/ui/src/layout/header), shared by all pages here.

  <header>
    <a id="branding" href="/"><b>SABIO-RK</b><span>SPARQL endpoint</span></a>
    <nav>
      <a href="/" aria-current="page">Query editor</a>
      <a href="/tutorial.html">How to SPARQL</a>
      <a href="https://sabiork.h-its.org/ui/">SABIO-RK website</a>
    </nav>
  </header>
*/

body > header {
  --fg: #fff;
  --header-height: clamp(50px, 5vw, 60px);

  align-items: center;
  background: var(--cp-t1);
  border-radius: 0 0 var(--br-3) var(--br-3);
  box-shadow: var(--bs-high-strong);
  display: flex;
  gap: var(--s14);
  height: var(--header-height);
  padding-inline: var(--s12) var(--s6);
  position: sticky;
  top: 0;
  z-index: var(--z-top);

  #branding {
    color: var(--fg);
    display: flex;
    flex-direction: column;
    gap: var(--s0);
    text-decoration: none;

    b { font-family: var(--ff-logo); font-size: calc(var(--header-height) * .36); font-weight: normal; }
    span { font-size: calc(var(--header-height) * .15); opacity: .8; text-transform: uppercase; white-space: nowrap; }
    &:hover span { opacity: 1; }
  }

  nav {
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: var(--s4);

    /* a[href] keeps the base link color and hover underline from winning */
    a[href] {
      border-radius: 1lh;
      color: var(--cp-l8);
      font-size: var(--fs4);
      font-variant: small-caps;
      padding: var(--s1) var(--s5);
      text-decoration: none;
      white-space: nowrap;

      &:hover {
        background: linear-gradient(to bottom, #fff1, #ffffff09);
        box-shadow: var(--bs-low);
        color: var(--fg);
        text-decoration: none;
      }

      &[aria-current=page] {
        background: linear-gradient(to bottom, #fff2, #fff1);
        box-shadow: 0 -1px 0 #0002, inset 0 -1px 0 #fff2;
        color: #fff;
      }

      &:last-child { margin-inline-start: auto; }
    }
  }
}