/* Button utility classes for Cape May Thrive */

:root {
  --capeBlue-50: #e5f1ff;
  --capeBlue-600: #0263a6;
  --capeBlue-700: #004f8a;
  --capeBlue-800: #003e6e;
}

.btn-outline {
  border-radius: 9999px;
  border: 2px solid var(--capeBlue-700);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
  color: var(--capeBlue-700);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background-color: var(--capeBlue-50);
  text-decoration: none;
  color: var(--capeBlue-700);
}

.btn-primary {
  border-radius: 9999px;
  background-color: var(--capeBlue-700);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--capeBlue-800);
  text-decoration: none;
  color: white;
}

/* Header specific styles to prevent hero styles from bleeding in */
header,
header a,
header button {
  color: #1e293b; /* text-slate-800 equivalent */
}

header a:hover {
  color: var(--capeBlue-600);
}

@media (max-width: 1023px) {
  .lg-hidden {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lg-flex {
    display: flex;
  }
  
  .lg-hidden {
    display: none;
  }
}