/**
 * Recipe Styles - Minimal CSS for recipe scaling and variant display
 */

body {
    margin: auto;
    max-width: 800px;
}

/* Site Navigation */
.site-navigation {
    background: #f1f1f1;
    padding: 4px;
}

.site-navigation a {
    color: black;
    text-decoration: none;
    padding: 2px 6px;
}

.site-navigation a:hover {
    background: #ddd;
}

/* Recipe Index */
.recipe-index {
    list-style: none;
    padding-left: 0;
}

/* Variant container layout */
.variants-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
}

/* Individual variant card */
.variant {
    border: 1px solid #ddd;
    padding: 4px;
}

.variant h2 {
    margin-top: 0;
}

.variant-date {
    font-style: italic;
    color: #666;
}

.variant-description {
    font-style: italic;
    color: #666;
}

/* Recipe controls (servings input and reset button) */
.recipe-controls label {
    margin-right: 8px;
}

.servings-input {
    width: 60px;
    padding: 2px;
    border: 1px solid #ccc;
}

.reset-servings {
    padding: 2px 8px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    cursor: pointer;
}

.reset-servings:hover {
    background: #ddd;
}

/* Ingredients list styling */
.ingredients-list {
    list-style: none;
    padding-left: 0;
}

/* Quantity styling */
.quantity {
    font-weight: bold;
}

.quantity.scaled {
    color: #d32f2f;
}

/* Responsive design */
@media (max-width: 768px) {
    .variants-container {
        grid-template-columns: 1fr;
    }
}