/* ====================
    ARCHIVE RECIPE STYLING (Matched to blog.css)
==================== */

/* Main Archive Page Layout (Container for both columns) */
main.recipe-archive-page {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    /* Main container should NOT scroll itself, its columns will */
    height: calc(100vh - (var(--hdr-height) + var(--admin-bar-height)));
    overflow-y: hidden;
    background: transparent;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Left Column / Sidebar Area */
.recipe-archive-page .column-left.sidebar-area {
    position: sticky;
    /* Position the sticky column below the header + admin bar + a small margin */
    top: calc(var(--hdr-height) + var(--admin-bar-height) + 2rem); /* Matches blog.css */
    align-self: start; /* Sticks to the top of its grid cell */
    height: fit-content; /* Only takes up as much height as its content */
    padding-top: 4.5rem; /* Matches blog.css for vertical alignment */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left-align content within sidebar */
    text-align: left; /* Ensure text is left-aligned */
    overflow-y: hidden; /* Left column should only scroll if its content exceeds height of its container, but prefer fixed */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.recipe-archive-page .column-left.sidebar-area::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Add padding to the *content* inside the sidebar, now that the sidebar itself has no left padding */
.recipe-archive-page .column-left.sidebar-area .archive-title,
.recipe-archive-page .column-left.sidebar-area .breadcrumbs-wrap {
    padding-left: 1.5rem; /* Add back the padding for these elements (Matches blog.css) */
}

.recipe-archive-page .column-left.sidebar-area .archive-title {
    font-family: var(--heading-font);
    font-size: 2.2rem;
    transform: rotate(-2deg);
    margin-bottom: 0.5rem;
    color: var(--heading-color-h1);
    line-height: 1.2;
    align-self: flex-start;
    display: block;
}

.recipe-archive-page .column-left.sidebar-area .breadcrumbs-wrap {
    width: 100%;
    margin-bottom: 1.5rem;
}

.recipe-archive-page .column-left.sidebar-area #breadcrumbs {
    font-size: 0.9rem;
    color: var(--body-text-color);
    margin: 0;
    line-height: 1.2;
    padding: 0;
}

/* For the containing element of the image: .archive-sketch */
.recipe-archive-page .column-left.sidebar-area .archive-sketch {
    position: static; /* Standard positioning within normal flow */
    width: 100%; /* The container will take up the full width of the left column (after padding) */
    margin-left: 0; /* Ensure no unnecessary horizontal offset */
    padding-left: 0; /* Ensure no unnecessary horizontal offset */
    overflow: visible; /* Ensure content is not clipped if it slightly exceeds bounds */
    text-align: center; /* Crucial for horizontally centering the image if its max-width is less than 100% */
}

/* For the image inside: .archive-sketch img */
.recipe-archive-page .column-left.sidebar-area .archive-sketch img {
    max-width: 65%; /* Adjust this percentage to control the image's maximum size relative to its container. */
                     /* If 80% is still too big, try 70%, 60%, etc., until it looks right. */
    width: 100%; /* Ensures the image scales down on smaller screens if its max-width is larger than the viewport */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Essential for margin: auto to work for centering */
    margin-top: 1rem; /* Keep existing top margin */
    margin-bottom: 0; /* Keep existing bottom margin */
    margin-right: auto; /* Centers the image horizontally */
    margin-left: auto; /* Centers the image horizontally */
    z-index: auto; /* Ensure no z-index conflicts */
}

/* Right Column / Content Area (where posts are) */
.recipe-archive-page .column-right.content-area {
    height: 100%;
    overflow-y: auto;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 4rem;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.recipe-archive-page .column-right.content-area::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.recipe-archive-page .aromapress-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    width: 100%;
}

/* ====================
    LOAD MORE BUTTON STYLING (Matched to blog.css)
==================== */

.load-more-wrapper {
    text-align: center;
    margin-top: 3rem;   /* Matches blog.css */
    margin-bottom: 3rem; /* Matches blog.css */
}

.load-more-wrapper .button {
    font-family: var(--heading-font); /* Matches blog.css */
    font-size: 1.6rem; /* Matches blog.css */
    background: transparent; /* Matches blog.css */
    border: none; /* Matches blog.css */
    color: var(--body-text-color); /* Matches blog.css */
    cursor: pointer;
    transition: color 0.3s ease; /* Matches blog.css */

    display: inline-block; /* Matches blog.css */
    padding: 0; /* Matches blog.css */
    box-shadow: none; /* Matches blog.css */
    text-decoration: none; /* Matches blog.css */
    font-weight: normal; /* Matches blog.css */
    text-transform: none; /* Matches blog.css */
    letter-spacing: normal; /* Matches blog.css */
    transform: none; /* Matches blog.css */
}

.load-more-wrapper .button:hover,
.load-more-wrapper .button:focus {
    color: var(--accent-purple); /* Matches blog.css */
}

/* Styles for loading/no more posts indicators */
.loading-indicator,
.no-more-posts {
    font-family: var(--body-font);
    font-size: 1rem;
    color: var(--body-text-color);
    margin-top: 1rem;
    text-align: center;
    display: block;
}

/* Responsive adjustments (Matched to blog.css) */
@media (max-width: 1024px) {
    main.recipe-archive-page {
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        height: auto;
        overflow-y: visible; /* Revert to visible for mobile */
        overflow-x: hidden; /* Prevent horizontal scroll on mobile if image is out of bounds */
    }

    .recipe-archive-page .column-left.sidebar-area {
        position: relative; /* Revert to normal flow for mobile */
        top: auto;
        padding-top: 2rem;
        padding-left: 1rem; /* Revert mobile padding for sidebar */
        padding-right: 1rem;
        height: auto;
        overflow-y: visible;
    }

    /* Reset padding for content inside sidebar on mobile */
    .recipe-archive-page .column-left.sidebar-area .archive-title,
    .recipe-archive-page .column-left.sidebar-area .breadcrumbs-wrap {
        padding-left: 1rem; /* Match mobile sidebar padding */
    }

    .recipe-archive-page .column-left.sidebar-area .archive-sketch {
        position: static; /* Revert to normal flow for mobile */
        margin-left: 0; /* Reset for mobile */
        padding-left: 0; /* Reset for mobile */
        width: 100%; /* Fill its normal parent width */
        overflow: visible; /* Ensure it's not hidden if previous rules made it so */
    }

    .recipe-archive-page .column-left.sidebar-area .archive-sketch img {
        position: static; /* Revert to normal flow for mobile */
        left: auto; /* Remove any absolute positioning */
        width: 100%; /* Fill its normal parent width */
        margin-left: 0; /* Remove negative margin */
        top: auto; /* Remove any absolute top positioning */
        max-width: 100%; /* Ensure it doesn't overflow on small screens */
        height: auto;
    }

    .recipe-archive-page .column-right.content-area {
        height: auto;
        overflow-y: visible;
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 640px) {
    main.recipe-archive-page {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .recipe-archive-page .column-left.sidebar-area,
    .recipe-archive-page .column-right.content-area {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    /* Reset padding for content inside sidebar on very small mobile */
    .recipe-archive-page .column-left.sidebar-area .archive-title,
    .recipe-archive-page .column-left.sidebar-area .breadcrumbs-wrap {
        padding-left: 0.5rem; /* Match very small mobile sidebar padding */
    }
}