/* Navigation and Button Components */

/* Header navigation - positioned inside h1-container like h1 text */
.header-nav {
  position: absolute;
  top: 35px; /* Move up higher in the header */
  left: 40px; /* More margin from left edge */
  z-index: 1; /* Inside the h1-container */
}

.header-nav .nav-text {
  font-family: "Highway Gothic", "Arial Narrow", sans-serif;
  font-size: 32px; /* Slightly larger font size */
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white; /* Same white text as h1 */
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  padding: 12px 16px; /* Add padding for larger hit box */
  margin: -12px -16px; /* Negative margin to maintain visual position */
}

.header-nav .nav-text:hover {
  opacity: 0.8;
}

/* Base button styles shared by nav-link and card-link */
.nav-link,
.card-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin: 0.5rem;
  background: white;
  color: #231f20;
  border: 2px solid #231f20;
  text-decoration: none;
  font-family: "Highway Gothic", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.85rem;
  transition: all 0.2s;
  align-self: flex-start;
}

.card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  width: 100%;
  margin: 0;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

/* Color adaptations for all button-like elements */
.sign.red .nav-link,
.sign.red .card-link {
  color: #cc0000;
  border-color: #cc0000;
}

.sign.blue .nav-link,
.sign.blue .card-link {
  color: #003f87;
  border-color: #003f87;
}

.sign.yellow .nav-link,
.sign.yellow .card-link {
  background: #231f20;
  color: #ffd500;
  border-color: #231f20;
}

/* Remove ALL focus, active, and visited states for card-link */
.card-link:focus,
.card-link:active,
.card-link:focus-visible,
.card-link:visited:focus,
.card-link:visited:active {
  outline: none !important;
  background: white !important;
  color: inherit !important;
  border-color: currentColor !important;
}

.sign.red .card-link:focus,
.sign.red .card-link:active,
.sign.red .card-link:visited:focus,
.sign.red .card-link:visited:active {
  color: #cc0000 !important;
}

.sign.blue .card-link:focus,
.sign.blue .card-link:active,
.sign.blue .card-link:visited:focus,
.sign.blue .card-link:visited:active {
  color: #003f87 !important;
}

.sign.yellow .card-link:focus,
.sign.yellow .card-link:active,
.sign.yellow .card-link:visited:focus,
.sign.yellow .card-link:visited:active {
  background: #231f20 !important;
  color: #ffd500 !important;
}

/* Hover states */
.nav-link:hover,
.card-link:hover {
  background: #231f20;
  color: white;
  border-color: #231f20;
}

.sign.red .nav-link:hover,
.sign.red .card-link:hover {
  background: #cc0000;
  border-color: #cc0000;
}

.sign.blue .nav-link:hover,
.sign.blue .card-link:hover {
  background: #003f87;
  border-color: #003f87;
}

.sign.yellow .nav-link:hover,
.sign.yellow .card-link:hover {
  background: #ffd500;
  color: #231f20;
  border-color: #231f20;
}

/* Utility classes */
.full-size-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}