/**********/
/* HEADER */
/**********/

body > header {
  container-type:inline-size;
  container-name:header;
  
  position:relative;

  grid-column:full;

  margin-bottom:clamp(min(15vh,9em),min(15vh,20vw),12em);
  padding:
    max(1em, var(--gap) * .5)
    var(--gap);

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap:.25em;
}





/*********************/
/* HEADER --> LINKS  */
/*********************/

header a {
  text-decoration-line:none;
  color:var(--clr-root);
  line-height: calc(1.3 * var(--line-height-factor));
}

header a:hover {
  text-decoration-line:underline;
}





/*************/
/* NAV EXTRA */
/*************/

.nav--extra {
  display:flex;
  align-items:center;
}


/* cmd logo */
.link--cmd {
  position: relative;

  margin-left:1em;

  display:grid;
  align-content:center;
}

/* streepje */
.link--cmd::before {
  content:"";
  position:absolute;
  width:1px;
  height:100%;
  left:-.5em;
  background-color:currentColor;
  pointer-events:none;
}


/* hva logo */
.link--hva svg {
  height:2em;
}

.logo--hva-icon {
  display:block;
}

.logo--hva-small {
  display:none;
}

.logo--hva-wide {
  display:none;
}





/*************/
/* SKIP LINK */
/*************/

.link--skip {
  position: absolute;
  top:100%;
  left:var(--gap);
  background-color:var(--bg-root);
  box-shadow:0 0 0 .125em var(--bg-root);
}





/************/
/* NAV TABS */
/************/

.nav--tabs {
  display:flex;
  gap:.25em;
}

.link--panel { 
  min-width:2em;
  
  display:grid;
  grid-template-rows:1.33em min-content;
  place-content:end center;
  place-items:center;
}

.link--panel[hidden] {
  display:none;
}


@supports (aspect-ratio:1) {
  html.js .link--panel[hidden] {
    display:grid;
  }
}

.link--panel__text {
  font-size:.55em;
}

.link--panel__icon {
  height:1.33em;
  width:1.33em;
}

@media only print {
  .nav--tabs {
    display:none;
  }
}



/******************/
/* RESPONSIVENESS */
/******************/

/* no room for CMD */
@container header (width < 36.799999em) {
  /* cmd logo  */
  .link--cmd {
    display:flex;
    align-items:center;
  }
  
  .link--cmd > span {
    display:flex;
  }

  .link__extra-text {
    position:absolute;
    left:-9999em;
  }
}


/* breathing room */
@container header (width > 21.4em) {
  /* nav tabs */
  .nav--tabs {
    gap:.5em;
  }

  .link--panel__text {
    font-size:.75em;
  }
}


/* more breathing room */
@container header (width > 36.8em) {
  /* cmd logo */
  .link--cmd {
    margin-left:2em;
  }

  /* streepje */
  .link--cmd::before {
    left:-1em;
  }

  /* hva logo */
  .link--hva svg {
    height:2.5em;
  }
}


/* single line */
@container header (width > 46em) {
  /* cmd logo */
  .link--cmd {
    display:block;
  }

  /* nav tabs */
  .nav--tabs {
    gap:1em;
  }

  .link--panel,
  html.js .link--panel[hidden] {
    display: flex;
    gap:.25em;
  }

  .link--panel__text {
    font-size:1em;
  }
}

/* single line hva logo */
@container header (width > 72em) {
  /* hva logo */
  .logo--hva-icon {
    display:none;
  }

  .logo--hva-small {
    display:none;
  }

  .logo--hva-wide {
    display:block;
    visibility:visible;
  }
}