/* ── PICADILLY MENU (shared by menu / index / specials / collection) ──
   Builds on the existing .menu-card / .menu-badge / .price / .add-btn
   styles in style.css — this file only adds what the new menu needs:
   category badges, size chips, the Restaurant/Poolside switch and the
   category sections on menu.html. */

/* category badges (the base .menu-badge is in style.css) */
.menu-badge.cat-rice     { background: #E67E22; color: #0a0805; }
.menu-badge.cat-swallow  { background: #2ECC71; color: #0a0805; }
.menu-badge.cat-pepper   { background: #E84320; color: #fff; }
.menu-badge.cat-prepared { background: #C9962A; color: #0a0805; }
.menu-badge.cat-grill    { background: #B5301A; color: #fff; }
.menu-badge.cat-delicacy { background: #9B59B6; color: #fff; }
.menu-badge.cat-bites    { background: #E8A020; color: #0a0805; }
.menu-badge.cat-extras   { background: #8a7f6e; color: #fff; }
.menu-badge.cat-yam      { background: #D4A017; color: #0a0805; }
.menu-badge.cat-suya     { background: #8B3A1A; color: #fff; }
.menu-badge.cat-pork     { background: #D9647A; color: #0a0805; }

/* dish cards */
.dish-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem; margin-top: 2.2rem;
}
.dish-card { display: flex; flex-direction: column; cursor: default; }
/* Category-restricted extras (Extra Soup) are hidden via the plain
   `hidden` attribute (see picadilly-menu.js) until there's an eligible
   dish in the cart. `.dish-card` sets its own `display`, which — like
   every other explicitly-displayed element on this site — overrides the
   browser's built-in `[hidden] { display:none }` rule, so it needs this
   override to actually disappear. */
.dish-card[hidden] { display: none; }
.dish-card .menu-card-body { display: flex; flex-direction: column; flex: 1; }
.dish-card .menu-card-body p { min-height: 2.4em; }
.dish-card .menu-card-footer { margin-top: auto; align-items: flex-end; gap: .8rem; }
.dish-card .menu-card-img { background: var(--deep); }
.dish-pricebox { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dish-alt { font-size: .68rem; color: var(--mist); letter-spacing: .03em; }
.dish-pkg-note { font-size: .64rem; color: var(--mist); letter-spacing: .02em; opacity: .85; }
.dish-ask { font-size: .8rem; color: var(--mist); font-style: italic; }
.dish-sizes { display: flex; gap: .4rem; margin: 0 0 .9rem; }
.size-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .45rem .3rem; border-radius: 8px;
  border: 1px solid rgb(var(--line-rgb) / calc(.12 * var(--line-k))); background: transparent;
  color: rgb(var(--cream-rgb) / calc(.65 * var(--text-k))); font-size: .66rem; letter-spacing: .04em; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: border-color .2s, background .2s, color .2s;
}
.size-chip b { font-weight: 600; font-size: .72rem; color: var(--cream); }
.size-chip:hover { border-color: rgba(232,160,32,.5); }
.size-chip.active { background: rgba(232,160,32,.14); border-color: var(--gold); color: var(--gold-ink); }
.size-chip.active b { color: var(--gold-ink); }
.size-chip:focus-visible, .dining-toggle button:focus-visible, .add-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* soup/protein choice dropdowns (Semo + Soup, Jollof + Protein, etc.) */
.dish-choice { margin: 0 0 1rem; }
.dish-choice-label {
  display: block; margin-bottom: .45rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-ink);
}
.dish-choice-field { position: relative; }
.dish-choice-field::after {
  content: ''; position: absolute; right: 1rem; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none; transition: transform .25s ease;
}
.dish-choice-field:focus-within::after { transform: translateY(-35%) rotate(225deg); }

.dish-soup-select, .dish-protein-select, .dish-extra-select {
  width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: .7rem 2.3rem .7rem 1rem; border-radius: 10px;
  border: 1px solid rgba(232,160,32,.28);
  background:
    linear-gradient(180deg, rgba(232,160,32,.07), rgba(232,160,32,0) 55%),
    var(--deep);
  color: var(--cream); font-size: .76rem; font-weight: 500; letter-spacing: .02em; cursor: pointer;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.dish-soup-select:hover, .dish-protein-select:hover, .dish-extra-select:hover {
  border-color: rgba(232,160,32,.6);
  box-shadow: 0 6px 18px rgba(232,160,32,.14);
}
.dish-soup-select:active, .dish-protein-select:active, .dish-extra-select:active { transform: translateY(1px); }
.dish-soup-select:focus-visible, .dish-protein-select:focus-visible, .dish-extra-select:focus-visible {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,160,32,.22), 0 6px 18px rgba(232,160,32,.18);
}
.dish-soup-select option, .dish-protein-select option, .dish-extra-select option {
  background: var(--deep); color: var(--cream);
}
/* Extra Portion / Extra Soup with nothing yet in the cart to attach to —
   the picker and its Add button are disabled together until a dish is
   ordered first. */
.dish-extra-select:disabled {
  cursor: not-allowed; opacity: .55; border-color: rgb(var(--line-rgb) / calc(.12 * var(--line-k)));
  box-shadow: none;
}
.dish-card .add-btn:disabled {
  cursor: not-allowed; opacity: .4; background: var(--char); color: var(--mist);
  transform: none;
}
.dish-card .add-btn:disabled:hover { background: var(--char); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dish-choice-field::after, .dish-soup-select, .dish-protein-select, .dish-extra-select { transition: none; }
}

/* Restaurant / Poolside switch */
.dining-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  background: var(--char); border: 1px solid rgba(232,160,32,.18);
  border-radius: 14px; padding: 1rem 1.3rem; margin-top: 2rem;
}
.dining-bar-copy { display: flex; flex-direction: column; gap: .2rem; }
.dining-bar-copy strong { font-size: .9rem; font-weight: 600; }
.dining-bar-copy span { font-size: .78rem; color: var(--mist); }
.dining-toggle { display: flex; gap: .3rem; background: var(--deep); border-radius: 10px; padding: .3rem; }
.dining-toggle button {
  padding: .55rem 1.3rem; border-radius: 7px; border: none; background: transparent;
  color: rgb(var(--cream-rgb) / calc(.55 * var(--text-k))); font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .25s, color .25s; font-family: 'Inter', sans-serif;
}
.dining-toggle button.active { background: var(--gold); color: var(--on-gold); }

/* category sections on menu.html */
.menu-cat { scroll-margin-top: 128px; }
.menu-cat:nth-of-type(3n+1) { background: var(--bg); }
.menu-cat:nth-of-type(3n+2) { background: var(--deep); }
.menu-cat:nth-of-type(3n)   { background: var(--char); }
.menu-cat-blurb { color: rgb(var(--cream-rgb) / calc(.55 * var(--text-k))); font-size: .9rem; font-weight: 300; margin-top: .8rem; max-width: 520px; line-height: 1.7; }
.menu-cat-count { color: var(--mist); }
#menu-dining-slot { padding: 0 7vw 0; background: var(--char); }
#menu-dining-slot:empty { display: none; }
#menu-dining-slot .dining-bar { margin: 0; background: var(--deep); }
.menu-cat-empty { color: var(--mist); font-size: .9rem; }

@media (max-width: 1100px) { .dish-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .dish-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 520px) {
  .dish-grid { grid-template-columns: 1fr; }
  .dining-bar { flex-direction: column; align-items: stretch; }
  .dining-toggle button { flex: 1; }
  #menu-dining-slot { padding: 0 5vw; }
}
@media (prefers-reduced-motion: reduce) { .size-chip, .dining-toggle button { transition: none; } }

/* home page: switch above the grid, link below it */
#menu-dining-inline .dining-bar { margin: 0 0 2rem; }
.menu-more { text-align: center; margin-top: 2.5rem; }
#menu-tabs .tab-btn { white-space: nowrap; padding: .65rem 1.15rem; }

/* collection page: keep the plate clear of the caption */
.cc-card { background: var(--deep); }
#cc-grid .cc-card > img { height: 74%; }
#cc-grid .cc-card::after { background: linear-gradient(to top, rgba(10,8,5,.97) 0%, rgba(10,8,5,.9) 32%, rgba(10,8,5,0) 62%); }

/* menu page category nav: let the scroller shrink to the screen so the
   later categories are reachable by swiping (it was growing to fit its content) */
#cat-nav .swipe-scroller { min-width: 0; width: 100%; }

/* "Read more" on dish descriptions — phones only.
   Up to 768px the description is clamped to 3 lines; picadilly-menu.js adds
   the button only when the text is actually cut off. Wider screens show the
   whole description and never get the button. */
.desc-toggle { display: none; }
@media (max-width: 768px) {
  .dish-card .menu-card-body > p.dish-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .dish-card .menu-card-body > p.dish-desc.is-open {
    display: block; -webkit-line-clamp: unset; overflow: visible;
  }
  .desc-toggle {
    display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start;
    margin: -.6rem 0 0; padding: .55rem 0; border: 0; background: none; cursor: pointer;
    color: var(--gold-ink); font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600;
    letter-spacing: .02em;
  }
  .desc-toggle::after {
    content: ''; width: 6px; height: 6px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .25s ease;
  }
  .desc-toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
  .desc-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .desc-toggle::after { transition: none; } }