BloomValleyNursery/src/styles/index.css

.promo-item,
.testimonial-item,
.featured-item {
  display: none; /* Hide all by default */
}

.promo-item.visible,
.testimonial-item.visible,
.featured-item.active {
  display: block; /* Show visible or active items */
}

#left-side,
#category-nav {
  flex: 1;
  box-shadow: var(--shadow-strong);
}

#left-side {
  display: flex;
  flex-direction: column;
  background-color: var(--color-soft-golden);
  border: solid var(--color-destin-sand);
  padding: 5px 10px;
  margin-top: 10px;
  border-radius: 10px;
}

#left-side h2 {
  border: solid var(--color-dark-green);
  background-color: var(--color-light-teal);
  border-radius: 10px;
}

#promos-container {
  background-color: var(--color-mid-green);
  color: var(--color-dark-green);
  border: solid var(--color-dark-green);
  border-radius: 10px;
  padding: 5px 10px;
  margin-top: 5px;
  text-align: center;
  box-shadow: var(--shadow-strong);
}

.promo-item {
  background-color: var(--color-destin-sand);
  color: var(--color-dark-green);
  border: solid var(--color-dark-green);
  border-radius: 10px;
  padding: 5px 10px;
  white-space: normal;
  max-height: 175px;
  min-height: 175px;
  max-width: 400px;
  box-shadow: var(--shadow-strong);
  text-align: center;
}

#promos-heading, #testimonials-heading {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 1.875rem; /* 30px for title */
  box-shadow: var(--shadow-strong);
}

#featured-container {
  display: flex;
  flex: 2;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 10px;
  margin-left: 50px;
  margin-right: 50px;
}

#featured-container h2 {
  font-size: 1.875rem;
  text-align: center;
  text-shadow: var(--text-shadow-layered);
  color: var(--color-destin-sand);
  background-color: var(--color-mid-green);
  border: solid var(--color-destin-sand);
  border-radius: 10px;
  margin-left: 30px;
  width: fit-content;
  padding: 0 20px;
  box-shadow: var(--shadow-medium);
}
  
#featured-container ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

#featured-list {
  border: solid var(--color-mid-green);
  border-radius: 10px;
}


#featured-list a {
  color: var(--color-dark-green);
  background-color: var(--color-destin-sand);
  border-radius: 10px;
  padding: 5px 10px;
  display: block;
  text-align: center;
  font-size: 1.4rem;
  color:var(--color-dark-green);
}

#featured-list {
  min-width: 710px;
  background-color: var(--color-destin-sand);
}

#featured-list img {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  box-shadow: var(--shadow-strong);
}

#featured-list {
  overflow: hidden; /* Hide anything outside the container */
  /*text-align: center; 
  width: 100%; */
  height: auto; /* Let the height adapt to content */
}

figcaption {
  font-size: 1.2rem;
}

#featured-list img {
  max-width: 100%; /* Ensure images are responsive */
  height: auto; /* Maintain aspect ratio */
  background-color: var(--color-mid-green);
  border: solid var(--color-dark-green);
  border-radius: 5px;
  padding: 5px;
}

h3.product-name {
  font-size: 1.6rem;
  margin-bottom: 5px;
  padding-bottom: 0;
}

p.short-description {
  font-size: 1.1rem;
}

#featured-container a {
  text-decoration: none;
}


/* --- TESTIMONIALS --- */

#testimonials-container{
  background-color: var(--color-mid-green);
  color: var(--color-dark-green);
  border: solid var(--color-dark-green);
  border-radius: 10px;
  padding: 5px 10px;
  margin-top: 10px;
  white-space: normal;
  box-shadow: var(--shadow-strong);
}

#testimonials-container h2 {
  font-size: 1.675rem;
  text-align: center;
}

.testimonial-item {
  background-color: var(--color-destin-sand);
  color: var(--color-dark-green);
  border: solid var(--color-dark-green);
  border-radius: 5px;
  padding: 5px 10px;
  white-space: normal;
  max-height: 175px;
  max-width: 400px;
  min-height: 175px;
  box-shadow: var(--shadow-strong);
  text-align: center;
}


/* --- CATEGORY NAVIGATION --- */
#category-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-soft-gold);
  padding: 5px 10px;
  margin-top: 10px;
  border: solid var(--color-destin-sand);
  border-radius: 10px;
}

#category-nav-container {
  background-color: var(--color-destin-sand);
  color: var(--color-dark-green);
  border: solid var(--color-dark-green);
  border-radius: 10px;
  padding: 5px 10px;
  margin-top: 5px;
  text-align: center;
  width: 90%;
  box-shadow: var(--shadow-strong);
}

#category-nav h2 {
  font-size: 1.675rem;
  background-color: var(--color-light-teal);
  color: var(--color-dark-green);
  border: solid var(--color-dark-green);
  border-radius: 10px;
  padding: 0 5px;
  white-space: nowrap;
  box-shadow: var(--shadow-strong);
}

.categories ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  gap: 5px;
}

.categories ul li {
  border: solid var(--color-dark-green);
  border-radius: 10px;
  background-color: var(--color-mid-green);
  margin-top: 20px;
  min-width: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: var(--shadow-strong);
}

.categories a {
  color: var(--color-dark-green);
  font-size: 1.3rem;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;

}

.categories ul li:hover {
  background-color: var(--color-destin-sand);
  color: var(--color-dark-green); 
  box-shadow: var(--shadow-medium);
}

.categories ul li a:hover {
  background: none;
  border: none;
  box-shadow: none;
  color: inherit;
}