@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* General NFL Theme */
  --nfl-primary: #013369;
  --nfl-secondary: #d50a0a;

  /* NFC Division */
  --nfc-primary: #0085ca;
  --nfc-secondary: #ffffff; /* White */

  /* AFC Division */
  --afc-primary: #a71930;
  --afc-secondary: #ffffff; /* White */
}

/* Override Bootstrap .btn-primary with NFL primary color */
.btn-primary {
  background-color: var(--nfl-primary) !important;
  border-color: var(--nfl-primary) !important;
  font-size: 1.5rem !important;
}

.afc-theme:hover,
.nfc-theme:hover,
.btn-primary:hover {
  opacity: 0.8;
  border-color: white;
}

.bg-nfl {
  background-color: var(--nfl-primary) !important;
}

.nfc-theme {
  background-color: var(--nfc-primary) !important;
  color: var(--nfc-secondary) !important;
}

.afc-theme {
  background-color: var(--afc-primary) !important;
  color: var(--afc-secondary) !important;
}

.team-button {
  @apply px-4 py-2 bg-blue-700 text-white font-semibold rounded-lg shadow-md hover:bg-blue-900 transition;
}

* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#map {
  width: 100%;
  height: calc(100vh - 56px);
}

.state-label {
  background: transparent;
  border: none;
  font-weight: bold;
  font-size: 14px;
  color: #000;
  text-align: center;
}

.img-thumbnail {
  height: 100px;
  width: 100px;
}

/* Highlighting toggled buttons (division filters, etc.) */
.active-division {
  outline: 3px solid orange;
  background-color: gray !important;
}