/* Import full Roboto font family from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* NWSL Data Brand Colors */
:root {
  --nwsl-blue: #3B82F6;
  --nwsl-dark: #1e293b;
  --nwsl-light: #f8fafc;

  /* Override Material's font variables */
  --md-text-font: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

/* White header with clean styling */
.md-header {
  background-color: white;
  color: var(--nwsl-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Ensure text in header is dark for contrast */
.md-header__title {
  color: var(--nwsl-dark);
  font-weight: normal;
}

.md-header__topic {
  color: var(--nwsl-dark);
}

/* Style search to work with white background */
.md-search__input {
  background-color: #f5f5f5;
  color: var(--nwsl-dark);
}

.md-search__input::placeholder {
  color: #666;
}

/* GitHub icon in header */
.md-header__source {
  color: var(--nwsl-dark);
}

/* Logo responsive behavior - hide on mobile/narrow screens */
@media screen and (max-width: 76.1875em) {
  .md-header__button + .md-header__topic .md-header__title--active .md-logo {
    display: none;
  }
}

/* Ensure site title remains visible on all screen sizes */
.md-header__title {
  opacity: 1 !important;
}

/* Custom navigation buttons to match homepage */
.nwsl-custom-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 1rem;
}

.nwsl-nav-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Regular navigation links */
.nwsl-nav-link {
  font-size: 0.875rem;
  color: #6b7280;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease;
}

.nwsl-nav-link:hover {
  color: #374151;
}

/* Discord button - matches homepage styling */
.nwsl-discord-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: white;
  background-color: #374151;
  text-decoration: none;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

.nwsl-discord-btn:hover {
  background-color: #111827;
  color: white;
}

.discord-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* Responsive behavior - hide custom nav on mobile */
@media screen and (max-width: 76.1875em) {
  .nwsl-custom-nav {
    display: none;
  }
}

/* Ensure search bar positioning works with custom nav */
.md-search {
  margin-left: 0.5rem;
}

/* Heading typography hierarchy - matches OpenAI style exactly */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 500;
  color: var(--nwsl-dark);
}

/* Body text size */
.md-typeset p,
.md-typeset li {
  font-size: 16px;
}