/* Base styles for the default theme
   - Keep ONLY global components here
   - Put page-specific CSS in assets/css/pages/*.css
*/

/* Header / Topbar */
.site-header{ position: sticky; top: 0; z-index: 1000; }
.site-topbar{
  background: #15181f;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 0;
}

.site-brand{ text-decoration:none; display:flex; align-items:center; gap:10px; color:#fff; }
.site-brand__logo{ height: 34px; width:auto; display:block; }
.site-brand__text{ font-weight: 800; letter-spacing: .2px; }

.site-nav__link{
  color: rgba(255,255,255,.85);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
}
.site-nav__link:hover{
  color:#fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* Search */
.site-search{
  position: relative;
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 280px;
}
.site-search__icon{ opacity:.7; margin-right: 8px; }
.site-search__input{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  color: rgba(255,255,255,.95);
}
.site-search__input::placeholder{ color: rgba(255,255,255,.55); }

/* Buttons used in header */
.site-btn{ border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.site-btn--icon{
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color:#fff;
}

/* Small responsive tweaks */
@media (max-width: 576px){
  .site-search{ min-width: 0; width: 100%; }
}
/* Header icons */
.icon-discord{ width: 20px; height: 20px; display:block; }

.site-btn--icon{ display:flex; align-items:center; justify-content:center; width: 40px; height: 40px; padding: 0; }

@media (max-width: 768px){
  .site-topbar{ padding: 10px 0; }
  .site-brand__logo{ height: 30px; }
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}

.site-logo {
  height: 36px;
  width: auto;
  display: block;
}

.site-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5px;
}