/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root { --ink:#1b2633; --muted:#667085; --line:#e7e9ed; --cream:#f8f6f1; --accent:#d85d38; } * { box-sizing:border-box } body { margin:0; color:var(--ink); background:var(--cream); font-family:Georgia,serif; } .container { width:min(1120px,calc(100% - 2rem)); margin:auto; } .site-header { background:#fff; border-bottom:1px solid var(--line); } .header-content { min-height:72px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,322px) minmax(0,1fr); gap:1rem; align-items:center; } .brand { justify-self:start; color:var(--ink); font-weight:bold; font-size:1.35rem; text-decoration:none; } .global-recipe-search { width:100%; max-width:322px; margin:0; justify-self:center; } .header-content > .button { justify-self:end; } .global-recipe-search input { padding:.55rem .7rem; font-size:.9rem; } main { padding:3.5rem 0; } h1 { font-size:clamp(2.1rem,5vw,4.2rem); line-height:1.05; margin:.2rem 0 1rem; } h2 { line-height:1.15; } a { color:inherit; } .hero { max-width:700px; margin-bottom:2.5rem; } .hero h1 { font-size:clamp(1.3rem,3vw,2.5rem); } .hero p { color:var(--muted); font-size:1.12rem; } .eyebrow { color:var(--accent)!important; font:700 .75rem Arial,sans-serif!important; letter-spacing:.12em; text-transform:uppercase; } .button { display:inline-block; border:0; border-radius:6px; padding:.7rem 1rem; cursor:pointer; font:600 .9rem Arial,sans-serif; text-decoration:none; } .button-primary { color:#fff; background:var(--accent); } .button-quiet { background:#fff; border:1px solid var(--line); } .button-danger { color:#a32c1a; background:#fff1ee; } .filters { display:flex; flex-wrap:wrap; gap:.65rem; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:10px; } input,textarea,select { width:100%; border:1px solid #cbd1d8; border-radius:6px; padding:.72rem; font:1rem Arial,sans-serif; } .filters input { flex:1 1 300px; } .filters select { width:auto; } .results { color:var(--muted); font: .85rem Arial,sans-serif; margin:1.5rem 0 .8rem; } .recipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.25rem; } .recipe-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:10px; } .card-image { display:block; height:155px; background:#e9e4da; } .card-image img { width:100%; height:100%; object-fit:cover; } .card-content { padding:1rem; } .card-content h2 { margin:.7rem 0 .35rem; font-size:1.2rem; } .card-content h2 a { text-decoration:none; } .card-content p,small { color:var(--muted); } .card-meta { display:flex; justify-content:space-between; color:var(--accent); font:700 .72rem Arial,sans-serif; text-transform:uppercase; } .pagination,.form-actions { display:flex; gap:.6rem; margin-top:2rem; align-items:center; } .pagination { justify-content:center; } .recipe-form { max-width:720px; background:#fff; padding:1.5rem; border:1px solid var(--line); border-radius:10px; } .form-field { margin-bottom:1rem; } .form-field label { display:block; margin-bottom:.35rem; font-weight:bold; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .errors { color:#9f2417; margin-bottom:1rem; } .notice { background:#e6f5ec; color:#17653c; padding:.8rem 1rem; border-radius:6px; } .recipe-detail { display:grid; grid-template-columns:minmax(0,430px) 1fr; gap:3rem; align-items:start; } .detail-image { min-height:250px; background:#e9e4da; border-radius:10px; overflow:hidden; } .detail-image img { width:100%; height:100%; object-fit:cover; } .byline { color:var(--muted); } .time-cards { display:flex; gap:.7rem; margin:1.5rem 0; } .time-cards div { min-width:95px; padding:.8rem; background:#fff; border:1px solid var(--line); border-radius:8px; } .time-cards strong,.time-cards span { display:block; } .time-cards span { margin-top:.25rem; color:var(--muted); font: .75rem Arial,sans-serif; } .ingredients { max-width:700px; margin-top:3rem; } .ingredients li { margin:.55rem 0; } @media(max-width:650px) { .header-content{min-height:auto;padding:.8rem 0;display:flex;flex-wrap:wrap}.global-recipe-search{order:3;flex-basis:100%;max-width:none;margin-left:0} main{padding:2rem 0}.recipe-detail{grid-template-columns:1fr;gap:1.5rem}.form-row{grid-template-columns:1fr}.filters select{width:100%}.time-cards{flex-wrap:wrap} }

.ingredient-page { display:grid; grid-template-columns:270px minmax(0,1fr); gap:2rem; align-items:start; } .ingredient-panel { position:sticky; top:1rem; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:10px; } .ingredient-panel-heading { display:flex; align-items:center; justify-content:space-between; } .ingredient-panel-heading h2 { margin:0 0 .8rem; font-size:1.15rem; } .ingredient-panel-heading span { color:var(--muted); font: .8rem Arial,sans-serif; } .ingredient-match-mode { display:flex; align-items:center; gap:.3rem; margin:0 0 .75rem; padding:0; border:0; } .ingredient-match-copy { color:var(--muted); font:.78rem Arial,sans-serif; white-space:nowrap; } .ingredient-match-mode label { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .5rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); cursor:pointer; font:.78rem Arial,sans-serif; } .ingredient-match-mode label:has(input:checked) { color:#217a3b; background:#eef9f0; border-color:#a9d9b2; } .ingredient-match-mode input { width:auto; margin:0; padding:0; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; } .selected-ingredients { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .75rem; } .selected-ingredient { display:inline-flex; align-items:center; gap:.4rem; max-width:100%; padding:.28rem .5rem; color:#9f3f27; background:#fff1ee; border:1px solid #f1b7a7; border-radius:999px; font:.78rem Arial,sans-serif; text-decoration:none; } .selected-ingredient:hover { background:#fde3dc; } .selected-ingredient-remove { font-size:1rem; line-height:.75; } .ingredient-list { max-height:55vh; margin-top:.75rem; overflow-y:auto; } .ingredient-option { display:flex; gap:.6rem; align-items:center; padding:.42rem .15rem; cursor:pointer; font-size:.92rem; } .ingredient-option:hover { color:var(--accent); } .ingredient-option.search-match { color:var(--ink); background:#fff1ee; border-radius:5px; outline:1px solid #f1b7a7; } .ingredient-option input { width:auto; margin:0; } @media(max-width:800px) { .ingredient-page { grid-template-columns:1fr; } .ingredient-panel { position:static; } .ingredient-list { max-height:280px; columns:2; } }

.ingredient-option[hidden] { display:none !important; }
.ingredient-option.search-exact-match span { color:var(--accent); font-weight:700; }

#ingredient-search { font-size:.85rem; }

.recipes-results { position:relative; } .recipes-results > .results { position:absolute; top:-1.5rem; left:0; margin:0; } @media(max-width:800px) { .recipes-results { position:static; } .recipes-results > .results { position:static; margin:1.5rem 0 .8rem; } }

.global-recipe-search { display:flex; align-items:center; gap:.35rem; } .global-recipe-search input { flex:1 1 auto; width:auto; min-width:0; } .global-recipe-search-submit { display:grid; flex:none; width:2.45rem; height:2.45rem; place-items:center; padding:0; color:#fff; background:var(--accent); border:0; border-radius:6px; cursor:pointer; } .global-recipe-search-submit:hover { background:#bd4929; } .global-recipe-search-submit:focus-visible { outline:2px solid var(--ink); outline-offset:2px; } .global-recipe-search-submit svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }

/* Recipe detail: a more compact image and title keep the actions in view. */
.recipe-detail { grid-template-columns:minmax(0,300px) 1fr; gap:2rem; }
.detail-image { min-height:175px; }
.recipe-detail h1 { font-size:clamp(1.6rem,3vw,2.6rem); }
@media(max-width:650px) { .recipe-detail { grid-template-columns:1fr; gap:1.5rem; } }

.header-actions { display:flex; justify-self:end; align-items:center; gap:.5rem; } .header-actions form { margin:0; } .header-actions .button { white-space:nowrap; } .current-user { color:var(--muted); font:.78rem Arial,sans-serif; white-space:nowrap; } .alert { padding:.8rem 1rem; color:#9f2417; background:#fff1ee; border-radius:6px; } .authentication-card { max-width:420px; padding:1.5rem; background:#fff; border:1px solid var(--line); border-radius:10px; } .authentication-card h1 { font-size:clamp(1.8rem,4vw,2.8rem); } .authentication-card > p:not(.eyebrow) { color:var(--muted); } @media(max-width:650px) { .header-actions { order:2; } .current-user { display:none; } }