/* 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 .txt { display:flex; flex-wrap:wrap; align-items:center; }
.recipecard .hero .txt > h3 { flex:0 0 100%; }
.recipecard .hero .txt > .fa-star { margin:2px 0; }
.recipecard .hero .txt > h5 { margin:2px 0 2px 12px; color:var(--rc-muted); font-weight:400; font-size:16px; }
.recipecard .hero .txt > a { margin-left:8px; }
.recipecard .hero .txt > .scalebar { flex:0 0 100%; }
.scalebar h5.serves { margin:0 14px 0 0; font-size:14px; font-weight:600; color:var(--rc-ink); display:inline-flex; align-items:center; }
.recipecard .serves-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); width:80px; }
.recipecard .extra a.teamlink { text-decoration:none; }
.recipecard .extra a.teamlink:hover .team { filter:brightness(1.15); text-decoration:underline; }
.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:16.5px; line-height:22.5px; }
.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:2; 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 .rc-chip, .scalebar .scale-mult, .scalebar .scale-reset, .recipecard .extra .related, .recipecard .hero .photo { display:none !important; }
  /* keep the Serves/Makes line (it lives in the scale bar), printed as plain text at the scaled amount */
  .scalebar { display:block; margin:4px 0 0; padding:0; border:0; background:none; box-shadow:none; }
  .scalebar h5.serves { margin:0; font-size:16px; }
  .recipecard .serves-input { border:0; background:none; padding:0 0 0 4px; margin:0; width:auto; max-width:5em; font:inherit; font-weight:600; color:#000; -moz-appearance:textfield; appearance:textfield; }
  .recipecard .serves-input::-webkit-inner-spin-button, .recipecard .serves-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  .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-warm-soft); color:var(--rc-ink); border:1px solid var(--rc-warm); 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; }

/* directions: larger text */
.recipecard .dir ol > li, .recipecard .dir p, .recipecard .dir ul li { font-size:17px; line-height:1.55; }
.recipecard .dir ol > li::before { top:1px; }

.nflseason article > header.w3-panel a.teamlink { text-decoration:none; display:inline-flex; }
.nflseason article > header.w3-panel a.teamlink:hover .team { filter:brightness(1.15); text-decoration:underline; }

.recipeindex .team { cursor:pointer; }
.recipeindex .rc-card .team:hover, .recipeindex td .team:hover { filter:brightness(1.15); text-decoration:underline; }

.recipeindex .rc-card .rc-season { cursor:pointer; }
.recipeindex .rc-card .rc-season:hover { text-decoration:underline; filter:brightness(1.1); }

/* NFL season intro: popover shown while hovering (or focusing/tapping) the year in the heading */
header:has(> .nfl-intro) { position:relative; }
.nfl-year { border-bottom:1px dotted currentColor; cursor:help; outline:none; }
.nfl-intro.nflseason {
  position:absolute; left:16px; width:min(560px, calc(100vw - 48px)); top:100%; z-index:20; margin:0;
  padding:12px 16px; background:var(--rc-warm-soft); color:var(--rc-ink); border:1px solid var(--rc-warm);
  border-radius:var(--rc-radius); box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transition:opacity .15s .25s, visibility 0s .4s;
}
header:has(.nfl-year:hover, .nfl-year:focus) .nfl-intro,
.nfl-intro.nflseason:hover { opacity:1; visibility:visible; transition-delay:0s; }
@media print { .nfl-intro.nflseason { position:static; opacity:1; visibility:visible; box-shadow:none; } }

/* Season chips (list view, recipe page footer): the default gray-on-lightgray was too faint in both modes */
.recipecard button.related, .recipeindex button.related {
  background:var(--rc-accent-soft); color:#1d5a37; border:1px solid var(--rc-accent);
  border-radius:6px; font-weight:700; padding:2px 9px; margin:1px 5px 1px 0;
}
body.dark-mode .recipecard button.related, body.dark-mode .recipeindex button.related { color:#9be0b6; }

/* Card-view season badge matches the list-view / recipe-footer chip */
.recipeindex .rc-card .rc-season {
  background:var(--rc-accent-soft); color:#1d5a37; border:1px solid var(--rc-accent);
  border-radius:6px; font-weight:700; padding:2px 9px; font-size:.9em; line-height:1.4;
}
body.dark-mode .recipeindex .rc-card .rc-season { color:#9be0b6; }

/* Print: dark ink on white. Main text goes pure black and slightly heavier so it doesn't print gray;
   colored text (headings, scaled amounts, chips) keeps its colors. Dark mode prints as light mode. */
@media print {
  body.dark-mode { background:#fff !important; color:#000 !important; }
  body.dark-mode .recipecard, .recipecard {
    --rc-ink:#000; --rc-muted:#333; --rc-card:#fff; --rc-line:#bbb; --rc-panel:#fff; --rc-field:#fff; --rc-photo:#fff;
    --rc-accent:#1d5a37; --rc-accent-soft:#e3f1e8; --rc-warm:#a84a08; --rc-warm-soft:#fff;
    background:#fff; color:#000;
  }
  .recipecard h3, .recipecard h5, .recipecard .ing li, .recipecard .ing li span, .recipecard .ing li .ingredient:not(.scaled),
  .recipecard .dir li, .recipecard .dir p, .recipecard .extra { color:#000 !important; }
  .recipecard .ing li, .recipecard .ing li span, .recipecard .dir li, .recipecard .dir p { font-weight:500; }
  .recipecard .ing li .ingredient.scaled { color:var(--rc-warm) !important; }
  .recipecard, .recipecard * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* the site's dark-mode fills (panels, number inputs) are more specific than the rules above, so match them */
  body.dark-mode .recipecard .dir .w3-panel:not(.no-dark):not(.w3-keep-color),
  body.dark-mode .recipecard .dir section { background:none !important; color:#000 !important; }
  body.dark-mode .recipecard input.serves-input:not(.no-dark) { background:none !important; color:#000 !important; border:0 !important; }
}