/* A Very Long Lunch — Food section
   Shares the game's pixel/retro-arcade DNA (Press Start 2P, gold buttons,
   navy chrome) but built for reading on an iPad in a kitchen: cream paper
   background, generous type, big tap targets. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:#0a0814;
  --navy-2:#1a1230;
  --sky:#5C94FC;
  --sky-light:#a8d8f0;
  --gold:#ecca4e;
  --gold-light:#fdf3a8;
  --gold-dark:#b08c1e;
  --ink:#2a2010;
  --cream:#FFFBF2;
  --cream-2:#FFF3DC;
  --paper-border:#e8dcc4;
  --text:#241636;
  --text-soft:#6a5f7b;
  --green:#4f9d5c;
  --green-bg:#e9f4ea;
  --shield:#3f7fbf;
  --shield-bg:#e7f0fa;
  --amber:#c98a2c;
  --amber-bg:#fbf0dc;
  --px:'Press Start 2P',monospace;
  --ss:'DM Sans',sans-serif;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--ss);
  background:var(--cream);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:80px;
}

a{color:inherit}

/* ============ STICKY TAB BAR ============ */
.food-nav{
  position:sticky;top:0;z-index:50;
  background:var(--navy);
  border-bottom:4px solid var(--gold);
  box-shadow:0 6px 16px rgba(10,8,20,.25);
}
.food-nav-inner{
  display:flex;align-items:center;gap:10px;
  max-width:1180px;margin:0 auto;
  padding:10px 16px;
}
.food-brand{
  flex-shrink:0;
  font-family:var(--px);
  font-size:11px;
  color:var(--gold-light);
  letter-spacing:.08em;
  text-decoration:none;
  padding:8px 10px;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.food-brand .home-dot{font-size:14px}
.food-tabs{
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:thin;
  padding:4px 2px;
  -webkit-overflow-scrolling:touch;
}
.food-tabs::-webkit-scrollbar{height:6px}
.food-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.food-tab{
  flex-shrink:0;
  display:flex;align-items:center;gap:6px;
  font-family:var(--ss);font-weight:600;
  font-size:13px;
  color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.1);
  border-radius:30px;
  padding:9px 16px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
  min-height:40px;
}
.food-tab:hover{background:rgba(255,255,255,.12);color:#fff}
.food-tab.active{
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  border-color:var(--gold-dark);
  color:var(--ink);
  font-weight:700;
}

/* ============ HERO / HOME ============ */
.food-hero{
  max-width:900px;margin:0 auto;padding:48px 20px 8px;text-align:center;
}
.food-eyebrow{
  font-family:var(--px);font-size:10px;letter-spacing:.2em;
  color:var(--sky);margin-bottom:14px;
}
.food-h1{
  font-family:var(--px);
  font-size:clamp(20px,4vw,34px);
  line-height:1.5;
  color:var(--ink);
  letter-spacing:.02em;
  margin-bottom:16px;
}
.food-sub{
  font-size:17px;color:var(--text-soft);max-width:620px;margin:0 auto 30px;
}

/* diet buttons — small, quiet text-links, not competing with the page's real CTAs */
.diet-btns{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin-bottom:40px;
}
.diet-btn{
  font-family:var(--ss);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.01em;
  padding:6px 14px;
  border-radius:20px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
  transition:background .15s,border-color .15s;
  opacity:.85;
}
.diet-btn:hover{opacity:1}
.diet-btn.tom{background:var(--green-bg);color:var(--green);border-color:rgba(79,157,92,.3)}
.diet-btn.paddy{background:var(--shield-bg);color:var(--shield);border-color:rgba(63,127,191,.3)}
.diet-btn.kids{background:var(--amber-bg);color:var(--amber);border-color:rgba(201,138,44,.3)}
.diet-emoji{font-size:12px}

/* ============ RECIPE GRID ============ */
.food-grid{
  max-width:1180px;margin:0 auto;padding:0 20px 56px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}
.food-card{
  display:block;text-decoration:none;color:inherit;
  background:#fff;border:2px solid var(--paper-border);border-radius:18px;
  padding:22px 18px;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  min-height:150px;
  position:relative;
}
.food-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(42,32,16,.12);border-color:var(--gold-dark)}
.food-card-emoji{font-size:34px;margin-bottom:10px;display:block}
.food-card-title{font-weight:700;font-size:16.5px;margin-bottom:6px;color:var(--ink)}
.food-card-tag{font-size:13.5px;color:var(--text-soft);margin-bottom:14px}
.food-card-badges{display:flex;gap:6px;flex-wrap:wrap;position:absolute;bottom:16px;left:18px;right:18px}

.badge{
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:4px 9px;border-radius:20px;
  display:inline-flex;align-items:center;gap:4px;
}
.badge.tom-yes{background:var(--green-bg);color:var(--green)}
.badge.tom-partial{background:var(--green-bg);color:#7a9c3f}
.badge.tom-no{background:#f3ecec;color:#a99}
.badge.paddy-yes{background:var(--shield-bg);color:var(--shield)}
.badge.paddy-partial{background:var(--shield-bg);color:#5a86ad}
.badge.paddy-no{background:#f3ecec;color:#a99}
.badge.pending{background:var(--amber-bg);color:var(--amber)}

/* ============ SAFE-LIST SECTIONS ============ */
.safe-section{
  max-width:1180px;margin:0 auto;padding:50px 20px;scroll-margin-top:90px;
}
.safe-section h2{
  font-family:var(--px);font-size:clamp(16px,2.6vw,22px);
  margin-bottom:8px;color:var(--ink);
}
.safe-section.tom h2{color:var(--green)}
.safe-section.paddy h2{color:var(--shield)}
.safe-section.kids h2{color:var(--amber)}
.safe-section-sub{color:var(--text-soft);margin-bottom:26px;font-size:15px}
.safe-section .food-grid{padding:0;max-width:none}
.safe-section.tom,.safe-section.paddy{max-width:900px}
.safe-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.safe-item{
  background:#fff;border:2px solid var(--paper-border);border-radius:14px;
  padding:16px 18px;display:flex;gap:14px;align-items:flex-start;
  text-decoration:none;color:inherit;
  transition:border-color .15s,transform .1s;
}
.safe-item:hover{border-color:var(--gold-dark);transform:translateX(3px)}
.safe-item .e{font-size:24px;flex-shrink:0}
.safe-item .txt{flex:1}
.safe-item .n{font-weight:700;margin-bottom:3px}
.safe-item .d{font-size:14px;color:var(--text-soft)}

/* ============ RECIPE PAGE ============ */
.recipe-hero{
  max-width:900px;margin:0 auto;padding:40px 20px 10px;
}
.recipe-emoji{font-size:46px;display:block;margin-bottom:10px}
.recipe-title{
  font-family:var(--px);font-size:clamp(18px,3.2vw,28px);color:var(--ink);
  margin-bottom:10px;line-height:1.5;
}
.recipe-tagline{color:var(--text-soft);font-size:16px;margin-bottom:14px}
.recipe-serves{
  font-size:13px;color:var(--text-soft);font-weight:600;
  background:var(--cream-2);display:inline-block;padding:6px 14px;border-radius:20px;
  margin-bottom:18px;
}
.diet-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.diet-note{
  background:var(--cream-2);
  border-left:5px solid var(--gold-dark);
  border-radius:6px;
  padding:14px 18px;
  font-size:14.5px;
  color:var(--ink);
  margin-bottom:8px;
}
.diet-note b{color:var(--ink)}

.recipe-body{max-width:900px;margin:0 auto;padding:10px 20px 40px}
.rblock{
  background:#fff;border:2px solid var(--paper-border);border-radius:18px;
  padding:26px 24px;margin-bottom:22px;
}
.rblock-heading{
  font-weight:700;font-size:18px;color:var(--ink);margin-bottom:4px;
}
.rblock-meta{font-size:13px;color:var(--text-soft);margin-bottom:14px;font-style:italic}
.rblock-text{margin-bottom:16px;color:var(--text)}

.rcols{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:760px){
  .rcols.has-method{grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr)}
}

.ing-label,.method-label{
  font-family:var(--px);font-size:10.5px;letter-spacing:.1em;color:var(--gold-dark);
  margin-bottom:12px;display:block;
}
.ing-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.ing-list li{
  display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer;
  padding:6px 4px;border-radius:8px;transition:background .1s;
}
.ing-list li:hover{background:var(--cream-2)}
.ing-list li .chk{
  width:20px;height:20px;flex-shrink:0;border:2px solid var(--paper-border);border-radius:5px;
  margin-top:2px;transition:background .15s,border-color .15s;
}
.ing-list li.done .chk{background:var(--green);border-color:var(--green)}
.ing-list li.done span.t{text-decoration:line-through;color:var(--text-soft)}

.method-list{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:16px}
.method-list li{
  counter-increment:step;display:flex;gap:14px;font-size:15.5px;
}
.method-list li::before{
  content:counter(step);
  font-family:var(--px);font-size:12px;
  background:var(--navy);color:var(--gold-light);
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.rnote{
  background:var(--cream-2);border-left:5px solid var(--gold-dark);border-radius:6px;
  padding:14px 16px;margin-top:18px;font-size:14px;color:var(--ink);
}
.rnote b{margin-right:4px}

/* ============ PREV/NEXT + FOOTER ============ */
.recipe-pager{
  max-width:900px;margin:0 auto;padding:0 20px 40px;
  display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;
}
.pager-link{
  flex:1;min-width:150px;
  background:#fff;border:2px solid var(--paper-border);border-radius:14px;
  padding:16px 18px;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .1s;
}
.pager-link:hover{border-color:var(--gold-dark);transform:translateY(-2px)}
.pager-link .lbl{font-size:11px;color:var(--text-soft);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.pager-link .nm{font-weight:700;display:flex;align-items:center;gap:8px}
.pager-link.next{text-align:right}
.pager-link.next .nm{justify-content:flex-end}

.food-footer{
  text-align:center;padding:30px 20px 10px;
  font-family:var(--px);font-size:9px;letter-spacing:.1em;
  color:var(--text-soft);
}
.food-footer a{color:var(--sky);text-decoration:none}

/* print styling: strip the chrome, keep the recipe */
@media print{
  .food-nav,.recipe-pager,.food-footer,.print-btn{display:none!important}
  body{padding:0;background:#fff}
  .rblock{border:1px solid #ccc;break-inside:avoid}
}

.print-btn{
  font-family:var(--px);font-size:9px;letter-spacing:.08em;
  background:#fff;border:2px solid var(--paper-border);border-radius:20px;
  padding:9px 16px;cursor:pointer;color:var(--text-soft);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;
}
.print-btn:hover{border-color:var(--gold-dark);color:var(--ink)}