/* LOGO */
[data-logo] {
  display: inline-block;
  padding: 0.5em;
  background: hwb(from light-dark(#13171f, #FAF9F6) h w b / 0.75);
  border-radius: 1rem;
  @media (prefers-color-scheme: light) {
    filter: invert(1);
    background-color: light-dark(#FAF9F6, #13171f);
  }
}


/* NAVIGATION */
body > header nav li > ul {
  margin-inline-start: 0.5rem !important;
}

.nav-item {
  position: relative;
}

.nav-item .sub-nav {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 200px;
  background: light-dark(#eeeeee, #232a39);
  z-index: 100;
}

.nav-item:hover > .sub-nav {
  display: block;
}

.sub-nav .nav-item {
  padding: 8px 16px;
  white-space: nowrap;
}


/* FOOTER */
footer {
  [data-logo] {
    filter: invert(1);
    background: transparent;
    @media (prefers-color-scheme: light) {
      filter: invert(0);
    }
  }
  [data-copyright] {
    text-align: center;
  }
}


/* EMPLOYEES */
employees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

employee-card {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid light-dark(#eee, #232a39);
  background: hwb(from light-dark(#13171f, #FAF9F6) h w b / 0.05);
}

employee-card [data-role] {
  display: inline-block;
  padding: 0.5em;
  border: 1px solid hwb(from light-dark(#13171f, #FAF9F6) h w b / 0.75);
  border-radius: 1rem;
  color: light-dark(#13171f, #FAF9F6);
}


/* EVENTS */
.event-detail a {
  filter: grayscale(0.5);
}


/* COMPONENTS */
[data-youtube-embed] {
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 640px;
  width: 100%;
}