/* ==========================================================================
   Navigation
   ========================================================================== */

nav ul li:hover {
  color: #000;
}

nav ul li a {
  position: relative;
  display: block;
  padding: 10px 0;
  margin: 0 10px;
  font: 400 1.1rem "Fjalla One", sans-serif;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  transition: color .1s, background-color .1s, padding .2s ease-in;
}

nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
  color: #999;
  text-decoration: none;
}

nav ul li a:active::before {
  background-color: #000;
}

nav ul li a.active {
  color: #999;
}

/* Optional icon/slot spacing (topnav) */
.topnav li span {
  display: inline-block;
  width: 20px;
}

/* Horizontal nav */
.nav,
.horiznav {
  display: flex;
  justify-content: center;
  padding-left: 0;
}

.horiznav li {
  list-style: none;
  white-space: nowrap;
  transition: all .5s ease;
}

/* Underline animation */
.horiznav li a::before,
.horiznav li a.active::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 3px;
  background-color: #000;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .2s ease-out, color .1s;
}

.horiznav li a:hover::before,
.horiznav li a:focus::before,
.horiznav li a.active::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.horiznav li a span {
  display: inline-block;
  width: 20px;
}

.horiznav li a i {
  vertical-align: top;
}

/* Submenus */
.horiznav li.topmenu {
  position: relative;
}

.horiznav li ul,
.horiznav .topmenu ul {
  display: none;
  position: absolute;
  z-index: 10;
  background: #fff;
}

.horiznav li ul {
  top: 40px;
  left: 0;
}

.horiznav li:hover > ul {
  display: block;
}

.horiznav ul.submenu {
  top: 100%;
  left: 0;
  padding: .5em 0;
  text-align: left;
  border: 1px solid #ccc;
}

.horiznav ul.submenu .submenu {
  top: -.5em;
  left: 100%;
  font-size: 1em;
}

.horiznav ul.submenu li {
  padding: .2em .5em;
}

.horiznav li.divider {
  margin: .5rem auto .3rem;
  padding: 0;
  border-top: 1px solid #343434;
  cursor: default;
}

.horiznav li.divider:hover {
  background-color: transparent;
}

/* ==========================================================================
   Flash messages
   ========================================================================== */

.flash-stack {
  margin: 16px 0;
  display: grid;
  gap: 8px;
}

.flash {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .15);
}

.flash-success { background: rgba(0, 128, 0, .08); }
.flash-error   { background: rgba(220, 0, 0, .08); }
.flash-warning { background: rgba(255, 170, 0, .10); }
.flash-info    { background: rgba(0, 90, 255, .08); }

/* ==========================================================================
   Base / common
   ========================================================================== */

body {
  font-family: "Nunito", Helvetica, Arial, sans-serif;
  background: url(img/bg-sky.jpg) center / cover no-repeat fixed #fff;
}

.container {
  background-color: #fff;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  background-color: #333;
  color: #fff;
}

/* <div id="confetti"></div> */
#confetti {
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
  display: flex;
}

header a {
  color: var(--black);
  text-decoration: none;
}

header .logo { width: 10%; }
header .top  { width: 80%; text-align: center; }
header .user { width: 10%; }

/* Logo */
header .logo img {
  float: left;
  max-width: 100%;
  max-height: 100%;
}

/* Title & nav */
header .top .menu li a {
  transition: color .3s ease;
}

header .top .site-title {
  font: 400 2em Verdana, sans-serif;
}

header .top .site-subtitle {
  font: 400 1.2em Verdana, sans-serif;
}

/* ==========================================================================
   Members area
   ========================================================================== */

.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, .06);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.user-name {
  font-weight: 600;
}

.user-id {
  font-size: 12px;
  opacity: .65;
}

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: 13px;
}

.badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  font-size: 12px;
}

tr.is-me {
  background: rgba(0, 0, 0, .03);
}

.mobile-hide {
  display: table-cell;
}

@media (max-width: 700px) {
  .mobile-hide { display: none; }
}