/* Reset and base styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 20px;
}

/* Hidden dropdown content by default */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  min-width: 120px;
  padding: 4px 0;
  z-index: 10;
}

/* Show content when active */
.dropdown-content.visible {
  display: block;
}

/* Links inside dropdown */
.dropdown-content a {
  display: block;
  padding: 8px 12px;
  transition: background 0.2s ease;
}

.dropdown-content a:hover {
  background-color: #f5f5f5;
}

/* Dropdown toggle button */
#dropdownToggle {
  background: none;
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}

/* Carousel & dots */
.dots {
  text-align: center;
  margin-top: 10px;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

.start-btn {
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.carousel {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.slide {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .start-btn,
  .carousel-controls button {
    width: 100%;
    font-size: 16px;
  }

  .dots {
    flex-wrap: wrap;
    gap: 5px;
  }
}

/* ===== UI Polish ===== */

/* Start/Pause button states via aria-label */
#startCarousel[aria-label="Start Carousel"] {
  background-color: #2e7d32; /* green */
}

#startCarousel[aria-label="Pause Carousel"] {
  background-color: #e74c3c; /* red */
}

#startCarousel:hover { filter: brightness(0.98); }
#startCarousel:active { transform: translateY(1px); }
#startCarousel:focus-visible { outline: 2px solid #333; outline-offset: 3px; }

/* Nicer prev/next buttons */
.carousel-controls button {
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.carousel-controls button:hover { background: #f7f7f7; }
.carousel-controls button:active { transform: translateY(1px); }
.carousel-controls button:focus-visible { outline: 2px solid #333; outline-offset: 3px; }

/* Smooth slide transitions (fade) */
.slides { position: relative; min-height: 200px; }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 320ms ease;
}

.slide.active {
  opacity: 1;
  position: relative;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none !important; }
}

/* Dots: clearer focus and bigger tap targets on mobile */
.dot { height: 12px; width: 12px; }
.dot:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

@media (max-width: 480px) {
  .dot { height: 14px; width: 14px; }
}

/* Page container for layout polish */
.container {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
}

.carousel { margin-top: 16px; }
.dropdown { margin-bottom: 16px; }

#startCarousel:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(20%);
}
.carousel-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* === Tweak pack: layout & a11y polish === */

/* 1) Dots as a centered flex row (so media flex-wrap works) */
.dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px; /* keeps your spacing */
}

/* 2) Carousel controls layout */
.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* 3) Taller slides + centered content, with reserved space */
.slides {
  position: relative;
  min-height: 260px; /* match .slide height to avoid layout jump */
}

.slide {
  display: grid;
  place-items: center;   /* center text/images inside slide */
  height: 260px;         /* consistent height */
  border-radius: 8px;
  background: #fafafa;   /* subtle backdrop; remove if using images */
}

/* 4) Unify dot sizing (override earlier 10px rule) */
.dot { height: 12px; width: 12px; }
@media (max-width: 480px) {
  .dot { height: 14px; width: 14px; }  /* easier taps on mobile */
}

/* 5) Focus style for dropdown toggle (a11y) */
#dropdownToggle:focus-visible {
  outline: 2px solid #333;
  outline-offset: 3px;
}