/* Recipe Block */
.recipe-container {
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 30px 0;
  border-radius: 6px;
}

.recipe-container h1 {
  margin-top: 0;
  font-size: 1.8em;
  color: #003366;
}

.recipe-container h2 {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #0056b3;
}

.recipe-container ul,
.recipe-container ol {
  margin-left: 20px;
  line-height: 1.5;
}

.recipe-container li {
  margin-bottom: 6px;
}

.recipe-container p {
  margin-top: 15px;
  font-style: italic;
}



/* others */


.page-title {
  text-align: center;
  color: #0000FF;
}

.divider {
  width: 80%;
  height: 2px;
  background-color: #ccc;
  margin: 20px auto;
}

.recipe-columns {
  display: flex;
  gap: 20px;
}

.ingredients, .instructions {
  flex: 1;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}

.divider {
  width: 80%;
  height: 2px;
  background-color: #ccc;
  margin: 20px auto;
}

.recipe {
  margin-bottom: 40px;
}

.cornbread-highlight {
    background-color: #fffaf0; /* A very light, warm off-white or cream */
    border: 1px solid #e0c28d; /* A subtle border, perhaps a light gold/brown */
    border-left: 5px solid #d4a700; /* A more prominent accent border on the left */
    padding: 1.5em; /* Generous padding inside the box */
    margin: 2em auto; /* Provides space above and below, and centers the box */
    max-width: 700px; /* Adjust this to fit nicely within your main content width */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1); /* A soft shadow for a "lifted" effect */
    border-radius: 5px; /* Slightly rounded corners */
}

.cornbread-highlight h3 {
    margin-top: 0; /* Remove default top margin for the h3 within this box */
    margin-bottom: 0.8em; /* Space below the heading */
    color: #8c6a00; /* A darker, complementary color for the heading */
    font-size: 1.2em; /* Slightly larger font for emphasis */
    text-align: center; /* Center the heading within the box */
}

.cornbread-highlight p {
    font-size: 0.95em; /* Slightly smaller text for the content within the box */
    line-height: 1.6; /* Good readability */
    color: #333; /* Standard text color */
    margin-bottom: 0; /* Remove default bottom margin for the last paragraph */
}


/* General Print Styles (Optional but Recommended) */
@media print {
    /* By default, hide everything when printing */
    body * {
        display: none; /* No !important here */
    }

    /* ONLY show the content inside the section with the 'recipe-to-print' class */
    .recipe-to-print {
        display: block !important; /* This is the key! Make it visible and override other 'none' */
        /* Ensure its children are also visible */
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure specific elements *within* the recipe-to-print are also visible */
    .recipe-to-print * {
        display: block !important; /* Make sure all children of the printed recipe are visible */
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        float: none !important; /* Remove any floats that might break layout */
    }

    /* Adjust text size for print if needed */
    p, li, h1, h2, h3, h4 {
        font-size: 12pt; /* Example font size for print */
        line-height: 1.2;
    }

    /* Hide the print button itself when printing */
    button, .print-button { /* Adjust selector if your buttons have other classes */
        display: none !important;
    }

    /* Optional: Ensure recipe columns lay out vertically for printing */
    .recipe-columns {
        display: block !important; /* Override grid/flex if it was horizontal */
        width: 100% !important;
        margin-bottom: 15px; /* Add margin-bottom if you want space between ingredients/instructions */
    }
    .recipe-columns .ingredients,
    .recipe-columns .instructions {
        width: 100% !important;
        float: none !important; /* Remove any floats */
        padding: 0 !important;
        margin: 0 !important;
    }
}