html {
  scroll-behavior: smooth; 
}
  
  span.h1-small {
    font-size: 18px; text-transform:uppercase;
  }

/* Town badges: force a red pill with accessible hover/focus */
  .town-badge {
    color: #ffffff !important;
    border: 0 !important;
    text-decoration: none;
    background-color: #302A4E;
    transition:  .15s ease, transform .08s ease, box-shadow .15s ease;
    padding: 10px;
    margin: 5px;
  }
  .town-badge:hover { background-color: #9F1855 !important;  }
  .town-badge:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
  }

  /* County card header: subtle red emphasis */
  .county-card .card-header {
    border-left: 4px solid #FFA400;
  }
  .county-card .card-header a {
    color: inherit;
    transition: color .15s ease, text-decoration-color .15s ease;
    text-decoration-color: transparent;
    text-underline-offset: .2rem;
  }
  .county-card .card-header a:hover { color: #9F1855; text-decoration: underline; }
  .county-card .card-header a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
    border-radius: .25rem;
  }

  /* Card hover state: gentle red glow */
  .county-card .card:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08), 0 0 0 .15rem rgba(220, 53, 69, .08);
  }
  
  .county-card .card-header a {
    color: inherit;
    transition: color .2s ease;
    font-weight: 600;
  }
  
  .county-card .card-header a:hover,
.county-card .card-header a:focus {
  color: #9F1855 !important;
  
}


.cards-grid .col-md-6 {
  display: flex;
}

/* Card styling */
.card {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  height: 100%; /* make the card fill the column */
}

/* Make the top part grow to fill available space */
.card-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 15px;
  flex: 1 1 auto; /* this lets the body stretch */
}

.card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 5px;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.card-body h3 {
  font-size: 1.2em;
  color: #343a40;
  margin: 0;
}

.rating {
  font-size: 0.95em;
  color: #ffc107;
}

.locations {
  font-size: 0.9em;
  font-weight: bold;
  color: #6c757d;
  margin-bottom: 10px;
}

.details-list {
  list-style: none;
  margin-bottom: 10px;
  padding-left: 0;
}

.card-separator {
  border: none;
  border-top: 1px solid #dee2e6;
  margin: 0;
}

/* Push the footer to the bottom of the card */
.card-footer {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* keeps all footers aligned */
}

.fee {
  font-size: 1.05em;
  font-weight: bold;
  color: #343a40;
}

/* Button group: make both buttons 50% width */
.button-group {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* Form and link each take half the width */
.button-group > * {
  flex: 1;
}

/* Buttons fill their half and centre text */
.contact-button,
.moreinfo-button {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

.moreinfo-button {
  color: #fff;
  background-color: #e21c76;
  border-color: #e21c76;
  font-weight: 600;
}

.moreinfo-button:hover {
  color: #fff;
  background-color: #9f1855;
  border-color: #9f1855;
}

.contact-button {
  color: #444;
  background-color: #ffa400;
  border-color: #ffa400;
  font-weight: 600;
}

.contact-button:hover {
  color: #444;
  background-color: #d38800;
  border-color: #d38800;
}

/* Responsive */
@media (max-width: 768px) {
  /* Add a subtle border around cards on mobile only */
  .card {
    border: 1px solid #dee2e6;
    margin: 0 10px 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  .card-inner {
    flex-direction: column;
    align-items: center;
  }

  .card img {
    width: 100%;
    height: auto;
    margin: 0 0 15px;
    border-radius: 5px 5px 0 0;
  }

  .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}