/*
 * Styles for Single Recipe Post
 * Final Optimized Version w/ Structural Fix
 */

/* ================== Main Layout ================== */
.aromapress-content-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
}

main.single-recipe-main {
    height: auto !important;      /* Allow height to be based on content, not 100% of the screen */
    flex-grow: 0 !important;      /* Prevent the main area from growing to fill empty space */
    display: block !important;    /* Reset from a flex container to a normal block */
}

.single-recipe-main {
    width: 100%;
    margin-bottom: 3rem; /* Space between main content and bottom nav */
}

/* ================== Top Title & Image ================== */
.recipe-title-main {
    font-family: 'Dawning of a New Day', cursive;
    font-size: 3.5rem;
    text-align: center;
    color: #222;
    margin-bottom: 1rem;
    font-weight: normal;
}
.breadcrumbs-container { text-align: center; margin-bottom: 2rem; font-size: 0.9rem; }
.recipe-featured-image-top { margin-bottom: 2rem; }
.recipe-featured-image-top img { width: 100%; height: auto; border-radius: 12px; }

/* ================== Jump to Recipe & Article ================== */
.jump-to-recipe-wrapper { text-align: center; margin: 2rem 0; }
.jump-to-recipe-button {
    display: inline-block;
    padding: 12px 25px;
    font-size: 1.1rem;
    background-color: #5a2c6d;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s;
}
.jump-to-recipe-button:hover { background-color: #2c003e; }
.recipe-article-content { margin-bottom: 3rem; line-height: 1.7; }
.recipe-article-content p { margin-bottom: 1.5em; }
.recipe-article-content h2,
.recipe-article-content h3 {
    font-family: 'Dawning of a New Day', cursive;
    font-weight: normal;
    font-size: 2.5rem; /* Adjust size as needed */
    color: #222;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

/* ================== Recipe Card ================== */
.recipe-card-container { background: #fafafa; border: 1px solid #e0e0e0; padding: 2rem; margin-top: 2rem; border-radius: 12px; }
.recipe-card-thumbnail { text-align: center; margin-bottom: 1.5rem; }
.recipe-card-thumbnail img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: inline-block;
}
.recipe-card-title-area { text-align: center; margin-bottom: 2rem; }
.recipe-card-title { font-family: 'Dawning of a New Day', cursive; font-size: 2.5rem; margin: 0 0 1rem 0; font-weight: normal; }
.print-recipe-button { display: inline-block; background: none; border: 1px solid #5a2c6d; color: #5a2c6d; padding: 8px 15px; border-radius: 5px; cursor: pointer; transition: all 0.3s; }
.print-recipe-button:hover { background: #5a2c6d; color: #fff; }
.recipe-section-divider { height: 2px; width: 100px; background-color: #5a2c6d; margin: 2rem auto; border: 0; }
.recipe-meta { display: flex; justify-content: center; text-align: center; gap: 2rem; margin-bottom: 2rem; padding: 1rem; background: #fff; border-radius: 8px; }
.recipe-columns { display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem; margin-top: 1.5rem; }
.recipe-ingredients h3, .recipe-instructions h3 { font-family: 'Dawning of a New Day', cursive; font-weight: normal; font-size: 1.9rem; color: #333; }
.recipe-ingredients ul { list-style-type: none; padding-left: 0; }
.recipe-ingredients li { padding: 8px 0; border-bottom: 1px dashed #ccc; }
.recipe-instructions p { margin-bottom: 1.2em; }
.recipe-notes { background: #fff; padding: 25px; margin-top: 30px; border-radius: 10px; background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 100% 30px; font-family: 'Dawning of a New Day', cursive; transform: rotate(-1.5deg); max-width: 95%; margin-left: auto; margin-right: auto; color: #333; }
.recipe-notes .notes-heading { font-size: 1.8rem; }
.recipe-notes .handwriting { font-size: 2.2rem; line-height: 1.4; }

/* ================== Gallery ================== */
.recipe-gallery-grid { margin: 3rem 0; }
.recipe-gallery-item { width: calc(50% - 7.5px); margin-bottom: 15px; }
.recipe-gallery-item img { width: 100%; height: auto; border-radius: 8px; display: block; }


/* ================== BOTTOM NAVIGATION & RECENT POSTS WRAPPER ================== */
.recipe-footer-content {
    border-top: 1px solid #e0e0e0; /* Single border for the entire section */
}
.recipe-post-navigation {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0; /* Only top and bottom padding */
}
/* --- Corrected Previous/Next Navigation Hover Image --- */

/* This rule combines original styles with the positioning fix */
.recipe-post-navigation a {
    position: relative;
    display: inline-block; /* Fix for stable positioning */
    font-weight: bold;
    color: #5a2c6d;
    text-decoration: none;
}

/* This rule combines original styles with centering and spacing fixes */
.recipe-post-navigation a .hover-img {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 15px; /* Adds space between image and text */
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center; /* Fix for image centering inside the box */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

/* This rule correctly shows the image on hover */
.recipe-post-navigation a:hover .hover-img {
    opacity: 1;
    visibility: visible;
}

.recent-posts-bottom {
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid #e0e0e0; /* A separator between the two sections */
}
.recent-posts-title { font-family: 'Dawning of a New Day', cursive; font-size: 2.5rem; color: #5a2c6d; margin-bottom: 2rem; font-weight: normal; }
.recent-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.custom-recent-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: inherit; overflow: hidden; }
.custom-recent-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.custom-recent-card-img-wrapper img { width: 100%; height: 150px; object-fit: cover; }
.custom-recent-card-content { padding: 1rem; }
.custom-recent-card-content h4 { font-size: 1.1rem; margin: 0; line-height: 1.3; }

/* ================== Responsive Adjustments ================== */
@media (max-width: 768px) {
    .recipe-columns { grid-template-columns: 1fr; }
    .recipe-gallery-item { width: calc(50% - 7.5px); }
}
@media (max-width: 480px) {
    .recipe-gallery-item { width: 100%; }
    .recipe-post-navigation { flex-direction: column; align-items: center; gap: 2rem; }
}