/* components.css - Active Components */

/* Bar Menu Components */
.bar-menu-section {
  flex: 1;
  padding: var(--spacing-base);
  text-align: center;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.bar-menu-section h2 {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-menu);
  font-weight: normal;
}

.bar-menu-section.active h2 {
  font-weight: bold;
}

.bar-menu-section:hover {
  color: var(--text-primary);
}

/* Cocktail List Components */
.cocktail-border {
  padding: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-color);
}

.cocktail-name {
  font-family: var(--font-family-base);
  font-size: clamp(21px, 2.5vw, 21px);
  margin: 0;
  flex: 1 1 70%;
  color: var(--banner-text-color);
}

/* UPDATE: Changed to use theme-aware variables */
.clickable-row {
  cursor: pointer;
  border: 0;
  color: var(--text-primary);
  background-color: var(--banner-color);
  padding: var(--spacing-base);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
  transition: var(--transition-base);
}

.clickable-row:hover {
  opacity: 0.8;
  background-color: var(--state-hover);
}

/* Recipe Components */
.ingredient-wrapper {
  margin-top: 10px;
  margin-left: 2px;
  margin-right: 2px;
  width: 100%;
  max-width: 700px;
  background-color: var(--card-background);  
  border: 2px solid var(--primary-color);
  padding: 20px;
  border-radius: 20px;
}

.instructions-wrapper {
  margin-top: 10px;
  width: 100%;
  background-color: transparent;
}

.ingredients {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
}

.cocktail-illustration {
  width: 100%;
  height: auto;
  max-width: 100%;
  background-color: var(--card-background);
  opacity: 0.5;
  border-radius: 20px;
}

.cocktail-image {
  width: 25%;
  height: auto;
  position: relative;
  top: 0;
  right: 0;
  padding: 0;
  text-align: right;
}

.cocktail-title {
  text-align: center;
  font-family: 'Fjalla One', sans-serif; 
  font-size: 30px;
  margin-top: 0px;
  margin-bottom: 12px;
  color: var(--primary-color);
}

/* Images */
.image-border {
  height: var(--img-height);
  width: auto;
}

/* Section Headers */
.small-header {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

/* Footer Components */
.footer-credit {
  text-align: center;
  padding: var(--spacing-lg) 0;
  background-color: var(--card-background);
  color: var(--text-color);
}

.footer-credit img {
  height: var(--img-height);
  width: auto;
}

/* Table Components */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--text-primary);
}

/* Responsive Adjustments */
@media (max-width: 500px) {
  .ingredient, 
  .unit {
    font-size: 0.9em;
  }
}

/* For testing/debugging - uncomment to make clickable rows green */
/*
.clickable-row {
  background-color: green !important;
  color: white !important;
}

.clickable-row:hover {
  background-color: darkgreen !important;
}
*/