html {
  font-size: 14px;
}

/* Override Bootstrap carousel control icons to use black arrows */
/* Carousel control icons: left (prev) and right (next) in black */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 14.354a.5.5 0 0 1 0-.708L9.293 9 4.646 4.354a.5.5 0 1 1 .708-.708l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0z'/%3E%3C/svg%3E");
}

/* Featured carousel: ensure cards are equal height and image area fixed */
#featuredCarousel .feature-img {
  height: 240px;
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  #featuredCarousel .feature-img { height: 280px; }
}

@media (min-width: 1200px) {
  #featuredCarousel .feature-img { height: 320px; }
}

/* Featured strip: adjust card width for horizontal strip */
#featuredStrip .card { width: 320px; }

/* Landing featured heading uses Georgia font */
#landing-featured h2.display-6 {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Reduce vertical gap between the featured heading and the cards */
#landing-featured .row.mb-4 { margin-bottom: 0.25rem !important; }
#landing-featured h2.display-6 { margin-bottom: 0.25rem; }
#landing-featured { padding-top: 2rem; padding-bottom: 2rem; }

/* Custom strip controls: rounded white box with black chevron icon */
.strip-control {
  width:56px;
  height:56px;
  border-radius:10px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.strip-control:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
.strip-icon{ width:28px; height:28px; display:block; background-repeat:no-repeat; background-position:center; background-size:contain; }
.strip-icon.strip-next{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6 L15 12 L9 18' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.strip-icon.strip-prev{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6 L9 12 L15 18' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#featuredCarousel .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Ensure all featured carousel cards share the same minimum height so slides don't jump */
/* Featured carousel card heights: responsive adjustments */
/* Featured carousel card heights (reduced to ~50% of previous sizes) */
#featuredCarousel .card {
  min-height: 240px; /* base for small screens */
}
#featuredCarousel .carousel-item {
  /* reserve space for the tallest card so inactive slides match height */
  min-height: 240px;
}

@media (min-width: 768px) {
  #featuredCarousel .card,
  #featuredCarousel .carousel-item { min-height: 280px; }
}

@media (min-width: 1200px) {
  #featuredCarousel .card,
  #featuredCarousel .carousel-item { min-height: 320px; }
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html, body {
  height: 100%;
}

/* Make page a column flex container so footer can stay at bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0; /* reset margin so layout is consistent */
}

/* Allow main content to grow and push footer to the bottom */
main[role="main"] {
  flex: 1 0 auto;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}