/* Recipes layout (2026-10-22) - loaded after /css/w3style.css on all /recipes pages.
   Sections: 1 shared tokens, 2 recipe page, 3 NFL season page, 4 index page, 5 print */

/* 1. shared tokens (light defaults; dark values follow the site's body.dark-mode) */
.recipecard, .nflseason, .recipeindex {
  --rc-card:#fff; --rc-ink:#26221e; --rc-muted:#6f675f; --rc-line:#e4ded6; --rc-panel:#fbfaf8;
  --rc-field:#fff; --rc-photo:#eee9e1; --rc-page:#f1f1f1;
  --rc-accent:#2f7d4f; --rc-accent-soft:#e3f1e8; --rc-warm:#c8641e; --rc-warm-soft:#fbeadd;
  --rc-radius:12px; --rc-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);
}
body.dark-mode .recipecard, body.dark-mode .nflseason, body.dark-mode .recipeindex {
  --rc-card:#2d2d2d; --rc-ink:#eee; --rc-muted:#a8a8a8; --rc-line:#3d3d3d; --rc-panel:#262626;
  --rc-field:#363636; --rc-photo:#363636; --rc-page:#1e1e1e;
  --rc-accent:#4fa874; --rc-accent-soft:#1f3a2a; --rc-warm:#f0a060; --rc-warm-soft:#3a2a1e;
  --rc-shadow:none;
}
.rc-chip, .scalebar .rc-chip {
  display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px;
  font-size:13px; border:1px solid var(--rc-line,#e4ded6); background:var(--rc-field,#fff); color:var(--rc-ink,#26221e); cursor:pointer;
  font-family:inherit;
}
.rc-chip:hover { border-color:#2f7d4f; }
.rc-chip.on, .scalebar .rc-chip.on { background:#2f7d4f; border-color:#2f7d4f; color:#fff; }

/* 2. recipe page */
.recipecard { background:var(--rc-card); border-radius:var(--rc-radius); box-shadow:var(--rc-shadow); overflow:hidden; margin:16px 0; color:var(--rc-ink); }
.recipecard .hero { display:grid; grid-template-columns:1fr 320px; }
.recipecard .hero .txt { padding:12px 24px 20px; }
.recipecard .hero .photo { background:var(--rc-photo); min-height:200px; }
.recipecard .hero .photo img { width:100%; height:100%; max-width:none; object-fit:cover; display:block; }
.recipecard .hero h3 { margin:8px 0 2px; font-size:28px; }
.recipecard .hero h5 { margin:2px 0 8px; color:var(--rc-muted); font-weight:400; }
.recipecard .cols { display:grid; grid-template-columns:340px 1fr; border-top:1px solid var(--rc-line); }
.recipecard .ing { padding:20px 24px; background:var(--rc-panel); border-right:1px solid var(--rc-line); margin:0; }
.recipecard .dir { padding:20px 24px; }
.recipecard .ing > h5 { margin:0 0 14px; font-size:15px; font-weight:600; }
.recipecard .ing > h5 input { margin-left:8px; padding:3px 8px; border:1px solid var(--rc-line); border-radius:8px; font-size:14px; background:var(--rc-field); color:var(--rc-ink); }
.recipecard h6 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--rc-muted); margin:18px 0 8px; }
.recipecard .ing > h6:first-of-type, .recipecard .dir > :first-child h6:first-child, .recipecard .dir > h6:first-child { margin-top:0; }
.recipecard .ing ul { list-style:none; margin:0; padding:0; }
.recipecard .ing li { padding:6px 0; border-bottom:1px dashed var(--rc-line); display:flex; gap:10px; font-size:15px; }
.recipecard .ing li input { margin-top:5px; accent-color:var(--rc-accent); flex:none; }
.recipecard .ing li:has(input:checked) span { text-decoration:line-through; color:var(--rc-muted); }
.recipecard .dir ol { counter-reset:step; list-style:none; margin:0; padding:0; }
.recipecard .dir ol > li { counter-increment:step; position:relative; padding:0 0 14px 42px; }
.recipecard .dir ol > li::before {
  content:counter(step); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%;
  background:var(--rc-accent-soft); color:var(--rc-accent); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.recipecard .dir section, .recipecard .dir .w3-panel { margin:0; padding:0; }
.recipecard .extra { border-top:1px solid var(--rc-line); padding:12px 24px; }
.recipecard .extra .w3-container { padding:4px 0; }
.recipecard .extra hr { display:none; }
.recipecard .ingredient.scaled { color:var(--rc-warm); font-weight:700; }

.scalebar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; }
.scalebar .lbl { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--rc-muted); margin-right:2px; }
.scalebar .cust { font-size:13px; color:var(--rc-muted); display:inline-flex; align-items:center; gap:5px; margin-left:8px; }
.scalebar .cust input { width:68px; padding:4px 8px; border:1px solid var(--rc-line); border-radius:8px; font-size:14px; background:var(--rc-field); color:var(--rc-ink); }
.scalebar .scale-reset { padding:3px 12px; border-radius:999px; border:1px solid var(--rc-line); background:var(--rc-field); color:var(--rc-ink); font-size:13px; cursor:pointer; margin-left:4px; }

@media (max-width:820px) {
  .recipecard .hero { grid-template-columns:1fr; }
  .recipecard .hero .photo { order:-1; min-height:0; max-height:240px; }
  .recipecard .cols { grid-template-columns:1fr; }
  .recipecard .ing { border-right:0; border-bottom:1px solid var(--rc-line); }
}

/* 3. NFL season page: restyles the existing markup (article > header + section.w3-row-padding) */
.nflseason article {
  color:var(--rc-ink); display:grid; grid-template-columns:200px 1fr; gap:16px; margin-bottom:14px;
  background:var(--rc-card); border-radius:12px; box-shadow:var(--rc-shadow); padding:14px 16px;
}
.nflseason article > header.w3-panel {
  margin:0; padding:0 12px 0 0 !important; background:none !important; border:0 !important; border-right:1px solid var(--rc-line) !important; border-radius:0 !important;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px; align-items:center;
}
.nflseason article > header.w3-panel > .week { flex:0 0 100%; text-align:left; font-size:22px; font-weight:700; padding:0; background:none; }
.nflseason article > header.w3-panel > .date { flex:0 0 100%; text-align:left; padding:0 0 6px; font-size:13px; color:var(--rc-muted); background:none; }
.nflseason article > header.w3-panel .team { padding:2px 9px; font-size:12px; font-weight:600; border-radius:6px; }
.nflseason article > header.w3-panel > .fa-star { flex:none; margin-top:6px; }
.nflseason article > section.w3-row-padding {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin:0; padding:0;
}
.nflseason article > section.w3-row-padding::before, .nflseason article > section.w3-row-padding::after { display:none; }
.nflseason article > header.w3-panel > .week { color:var(--rc-ink) !important; }
.nflseason article > header.w3-panel > .date { color:var(--rc-muted) !important; }
.nflseason article > section.w3-row-padding > .w3-third { width:auto; float:none; padding:0; }
.nflseason figure { margin:0; border-radius:8px; overflow:hidden; border:1px solid var(--rc-line); }
.nflseason figure img { height:110px; width:100%; object-fit:cover; display:block; }
.nflseason figure { display:block; background:var(--rc-card); }
.nflseason figcaption.caption {
  display:block; caption-side:initial; font-variant-caps:normal; text-align:left;
  background:var(--rc-card); color:var(--rc-ink); padding:8px 10px; font-size:14px; font-weight:600; line-height:1.3;
}
.nflseason figcaption.caption a, .nflseason figcaption.caption a:visited { color:var(--rc-ink); text-decoration:none; }
.nflseason figcaption.caption a:hover { color:var(--rc-accent); text-decoration:underline; }
.nflseason figcaption.w3-container:empty { display:none; }
.seasons.nflseason { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.seasons.nflseason a { padding:3px 12px; border-radius:999px; background:var(--rc-field); border:1px solid var(--rc-line); font-size:13px; }
.seasons.nflseason a.on { background:#2f7d4f; border-color:#2f7d4f; color:#fff; font-weight:700; }
@media (max-width:700px) {
  .nflseason article { grid-template-columns:1fr; }
  .nflseason article > header.w3-panel { border-right:0 !important; border-bottom:1px solid var(--rc-line) !important; padding:0 0 10px !important; }
}

/* 4. index page */
.recipeindex .rc-toolbar { position:sticky; top:0; z-index:5; background:var(--rc-page); padding:10px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.recipeindex .rc-toolbar input[type=search] { flex:1 1 240px; padding:9px 14px; border:1px solid var(--rc-line); border-radius:999px; font-size:15px; background:var(--rc-field); color:var(--rc-ink); }
.recipeindex .rc-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.recipeindex .rc-count { color:var(--rc-muted); font-size:13px; margin:4px 0 10px; }
.recipeindex .rc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.recipeindex .rc-card { background:var(--rc-card); color:var(--rc-ink); border-radius:12px; box-shadow:var(--rc-shadow); overflow:hidden; display:flex; flex-direction:column; color:inherit; text-decoration:none; }
.recipeindex .rc-card:hover { transform:translateY(-2px); }
.recipeindex .rc-card .rc-img { height:130px; background:var(--rc-photo); }
.recipeindex .rc-card img { height:130px; width:100%; object-fit:cover; display:block; }
.recipeindex .rc-card .rc-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; }
.recipeindex .rc-card h3 { color:var(--rc-ink); margin:0; font-size:16px; line-height:1.25; }
.recipeindex .rc-card .rc-meta { display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:12px; color:var(--rc-muted); }
.recipeindex .rc-card .rc-season { background:var(--rc-warm-soft); color:var(--rc-warm); padding:2px 9px; border-radius:6px; font-size:12px; font-weight:700; }
.recipeindex .rc-card .team { padding:2px 9px; font-size:12px; font-weight:600; border-radius:6px; }
.recipeindex.view-grid #listwrap { display:none; }
.recipeindex.view-list #gridwrap { display:none; }

/* 5. print: just the recipe, at the scaled amounts */
@media print {
  .scalebar, .recipecard .extra .related, .recipecard .hero .photo { display:none !important; }
  .recipecard { box-shadow:none; }
  .recipecard .cols { grid-template-columns:300px 1fr; }
}

.recipecard .hero.nophoto { grid-template-columns:1fr; }

/* NFL season pages show no star ratings (the stars stay in the markup) */
.nflseason article > header.w3-panel > .fa-star { display:none !important; }

/* NFL season intro: calm callout instead of the pink panel; more room before the weeks */
.nfl-intro.nflseason {
  max-width:75ch; margin:8px 0 4px; padding:12px 16px; line-height:1.6; font-size:15px;
  background:var(--rc-card); color:var(--rc-ink); border:1px solid var(--rc-line); border-left:4px solid var(--rc-accent); border-radius:8px;
}
.seasons.nflseason { margin:12px 0 28px; }
.nflseason article:first-child { margin-top:4px; }
.seasons.nflseason a:not(.on) { color:var(--rc-ink); text-decoration:none; }
.seasons.nflseason a:not(.on):hover { border-color:var(--rc-accent); }

/* any column width class (w3-quarter, w3-half, ...) must not squeeze items inside the card grid */
.nflseason article > section.w3-row-padding > div { width:auto !important; float:none !important; padding:0 !important; margin:0 !important; }
.nflseason figcaption.caption a, .nflseason figcaption.caption a:visited { color:var(--rc-ink) !important; }
.nflseason figcaption.caption a:hover { color:var(--rc-accent) !important; }
body.dark-mode .nflseason figcaption.caption a:not(.no-dark):not(.w3-keep-color),
body.dark-mode .seasons.nflseason a:not(.on):not(.no-dark):not(.w3-keep-color) { color:var(--rc-ink) !important; }
body.dark-mode .nflseason figcaption.caption a:not(.no-dark):not(.w3-keep-color):hover { color:var(--rc-accent) !important; }