/* Shared layout corrections; retain the original palette and typography. */
html { min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
body > section, body > header, body > footer { flex-shrink: 0; }
body > #smartlunch-footer { margin-top: auto; padding: 0; }
#smartlunch-footer .sm-footer__container { padding-top: 40px; padding-bottom: 32px; }
#smartlunch-footer .sm-footer__disclaimer { margin-bottom: 32px; }
.site-header { width: 100%; }
.site-header nav a[aria-current="page"] { color: var(--primary); }

/* Give all cards in informational sequences the same surface and contrast. */
.uniform-info-card { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.uniform-info-card h3 { color: var(--text) !important; }
.uniform-info-card p { color: var(--text-muted) !important; opacity: 1; }
.uniform-info-card > div:first-child:is(.rounded-full),
.uniform-info-card > div:first-child > .rounded-full { background: var(--primary) !important; color: var(--on-primary) !important; }
.uniform-info-card > div:last-child:not(:first-child) { border-color: var(--border); }
.uniform-info-card > div:last-child > span { color: var(--text-muted) !important; }

/* Repaired home recipe cards. */
.recipes-grid-card { padding: 0; overflow: hidden; }
.recipes-grid-card .rz-media { border: 0; border-radius: 0; aspect-ratio: 4 / 3; display: block; }
.recipe-card-content { display: flex; flex-direction: column; flex: 1; align-items: flex-start; gap: 14px; padding: 22px; }
.recipe-card-content h3 { font-size: 19px; font-weight: 700; line-height: 1.4; }
.recipe-card-content h3 a:hover { color: var(--primary); }
.recipe-card-content p { font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.recipe-card-content .rz-btn { margin-top: auto; width: 100%; font-size: 13px; gap: 8px; }

/* The guidance card should follow the height of its own text. */
.menu-list__spotlight { min-height: 0; height: auto; align-self: start; justify-content: flex-start; gap: 24px; }
.menu-list__spotlight li { align-items: baseline; flex-wrap: wrap; gap: 4px; }

/* Use an even, generous recipe catalogue rather than narrow centered strips. */
.recipes-catalog-section .recipes-listing-container { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
.recipes-catalog-section .recipe-clean-item { padding: 0; overflow: hidden; }
.recipes-catalog-section .recipe-clean-item > div { height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.recipes-catalog-section .recipe-clean-item .rz-media { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
.recipes-catalog-section .recipe-clean-item > div > div { padding: 22px; align-items: flex-start; text-align: left; }
.recipes-catalog-section .recipe-clean-item > div > div > div { justify-content: flex-start; }
.recipes-catalog-section .recipe-clean-item h3 { font-size: 21px; line-height: 1.4; }
.recipes-catalog-section .recipe-clean-item p { flex: 1; }
.recipes-catalog-section .recipe-clean-item .rz-btn { margin-top: auto; }
.recipes-listing-container .js-empty-message { grid-column: 1 / -1; }
.js-recipe-card.hidden { display: none !important; }

/* One procurement article is a full-width feature, not one quarter of a row. */
.shopping-feature-layout { display: block; }
.shopping-feature-layout .shopping-article-card { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr); column-gap: 36px; text-align: left; padding: 28px; }
.shopping-feature-layout .shopping-article-card > a { grid-row: 1 / 5; margin: 0; width: 100%; height: 100%; }
.shopping-feature-layout .shopping-article-card > a > div { width: 100%; height: 100%; min-height: 240px; border-radius: 4px; padding: 0; border: 0; }
.shopping-feature-layout .shopping-article-card img { width: 100%; height: 100%; aspect-ratio: 16 / 10; border-radius: 4px; object-fit: cover; }
.shopping-feature-layout .shopping-article-card > div { justify-content: flex-start; }
.shopping-feature-layout .shopping-article-card h3 { font-size: 24px; line-height: 1.4; }
.shopping-feature-layout .shopping-article-card p { font-size: 15px; }

.js-tips-tab.active, .js-tips-tab.active:hover, .js-recipe-filter.active:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--on-primary) !important;
}
.js-tips-tab:focus-visible, .js-recipe-filter:focus-visible, [data-comment-like]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.comment-form-panel { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; grid-column: 1 / -1; }
.comment-form-panel > h3 { text-align: center; }
[data-comment-like][aria-pressed="true"] { color: var(--primary) !important; font-weight: 700; }

@media (min-width: 1024px) and (max-width: 1199px) {
    .site-header nav.lg\:flex { gap: 14px; font-size: 13px; }
    .site-header .rz-btn.hidden { display: none; }
}
@media (max-width: 1023px) {
    .recipes-catalog-section .recipes-listing-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .site-contact-strip { display: none !important; }
    .recipes-catalog-section .recipes-listing-container { grid-template-columns: minmax(0, 1fr); }
    .shopping-feature-layout .shopping-article-card { display: flex; flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
    .shopping-feature-layout .shopping-article-card > a > div { min-height: 0; aspect-ratio: 16 / 10; }
    .shopping-feature-layout .shopping-article-card h3 { font-size: 20px; margin: 0; }
    .shopping-feature-layout .shopping-article-card p { margin-bottom: 0; }
    #smartlunch-footer .sm-footer__container { padding-top: 28px; padding-bottom: 28px; }
    .comment-form-panel { padding: 20px 16px; }
}