/* Page-specific theme for the Chef's Plaza case file.
   Overrides the CSS custom properties defined on .project-page in the
   shared /style.css, plus a small set of playful, bakery-only extras
   (floating hero decorations, icon rows, the recipe grid, the
   ecosystem row, and the soundtrack toggle) that don't belong in the
   shared stylesheet since no other project uses them. Structurally
   mirrors orbitErrands/orbit.css. */

.project-page[data-theme="chefs"] {
  --proj-accent: #D6577E;      /* raspberry pink */
  --proj-accent-2: #F3B54A;    /* butter-caramel yellow */
  --proj-accent-soft: #FBEDF1; /* pale pink tint */
  --proj-ink: #3B2A22;         /* cocoa brown */
}

.project-page[data-theme="chefs"] .project-hero-figure a {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.project-page[data-theme="chefs"] .project-hero-figure img {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-position: center 70%;
  transition: transform 0.35s ease;
}

.project-page[data-theme="chefs"] .project-hero-figure a:hover img {
  transform: scale(1.035);
}

/* ---- Floating hero decorations ---- */
.project-page[data-theme="chefs"] .project-hero {
  position: relative;
}

.chef-deco {
  position: absolute;
  display: block;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(3px 4px 6px rgba(59, 42, 34, 0.16));
  animation: chef-bob 6s ease-in-out infinite;
}

.chef-deco img {
  display: block;
  width: 100%;
}

.deco-cupcake-1 {
  width: 48px;
  top: -16px;
  left: 6%;
  animation-delay: 0s;
}

.deco-smoothie {
  width: 30px;
  top: 4%;
  left: 46%;
  animation-delay: 1.4s;
  animation-duration: 5s;
}

.deco-cherry {
  width: 34px;
  top: -20px;
  right: 14%;
  animation-delay: 0.6s;
  animation-duration: 7s;
}

.deco-cupcake-2 {
  width: 44px;
  bottom: -14px;
  left: 44%;
  animation-delay: 2s;
  animation-duration: 5.5s;
  transform: rotate(-6deg);
}

.deco-coffee {
  width: 32px;
  top: 36%;
  right: -14px;
  animation-delay: 1s;
  animation-duration: 6.4s;
}

.deco-sprinkles {
  width: 52px;
  bottom: -2%;
  left: 15%;
  animation-delay: 2.6s;
  animation-duration: 5.8s;
}

@keyframes chef-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chef-deco {
    animation: none;
  }
}

/* ---- Small icon rows (order-bubble states / patience bar) ---- */
.icon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px;
  margin: 22px 0 8px;
}

.icon-chip {
  width: 96px;
  text-align: center;
}

.icon-chip .icon-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 84px;
  background: #ffffff;
  border: 1.4px solid var(--proj-ink);
  border-radius: 4px 12px 3px 10px / 10px 3px 12px 4px;
  box-shadow: 4px 4px 0px rgba(59, 42, 34, 0.12);
}

.icon-chip .icon-block img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  /* Faked 1px outline (stacked drop-shadows) — the neutral order bubble
     is drawn near-white, which otherwise vanishes on the white chip
     background. */
  filter:
    drop-shadow(1px 0 0 var(--proj-ink))
    drop-shadow(-1px 0 0 var(--proj-ink))
    drop-shadow(0 1px 0 var(--proj-ink))
    drop-shadow(0 -1px 0 var(--proj-ink));
}

.icon-chip .icon-label {
  display: block;
  margin-top: 8px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.74rem;
  font-weight: bold;
  color: var(--proj-ink);
}

/* ---- Recipe cards: four across in one row ---- */
.hazard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0 28px;
}

.hazard-card {
  background-color: var(--proj-accent-soft);
  color: var(--proj-ink);
  padding: 16px 15px;
  box-sizing: border-box;
  border: 1.5px solid var(--proj-accent);
  border-radius: 3px 9px 2px 7px / 7px 2px 9px 3px;
  box-shadow: 4px 4px 0px rgba(59, 42, 34, 0.12);
}

.hazard-card h3 {
  font-family: "Rethink Sans", serif;
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--proj-ink);
  border-bottom: 1px dashed rgba(214, 87, 126, 0.35);
  padding-bottom: 7px;
}

.hazard-card p {
  font-family: "Rethink Sans", serif;
  font-size: 0.82rem;
  line-height: 1.42;
  margin: 0;
}

/* ---- Visual identity "ecosystem" — small sprites at close to their
   real in-game size, loosely scattered like the hero decorations
   rather than blown up into a photo gallery (they're canvas sprites,
   not photography, so upscaling them just makes them blurry). ---- */
.ecosystem-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px 28px;
  margin: 24px 0 10px;
  padding: 10px 4px 4px;
}

.ecosystem-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ecosystem-item:nth-child(3n+1) { transform: rotate(-5deg); }
.ecosystem-item:nth-child(3n+2) { transform: rotate(3deg); }
.ecosystem-item:nth-child(3n) { transform: rotate(-2deg); }

.ecosystem-item img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(2px 3px 5px rgba(59, 42, 34, 0.2));
  transition: transform 0.2s ease;
}

.ecosystem-item:hover img {
  transform: scale(1.14) rotate(-4deg);
}

.ecosystem-item .eco-label {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.66rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--proj-ink);
  opacity: 0.62;
}

.eco-sm img { width: 48px; height: 48px; }
.eco-md img { width: 64px; height: 88px; }
.eco-lg img { width: 84px; height: 104px; }

/* ---- Floating soundtrack toggle ---- */
.music-toggle {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 15px;
  background: var(--proj-accent, #D6577E);
  color: #ffffff;
  border: 1.5px solid #3B2A22;
  border-radius: 999px;
  font-family: "Aubrey", serif;
  font-size: 1rem;
  line-height: 1;
  cursor: none;
  box-shadow: 5px 5px 0px var(--proj-accent-2, #F3B54A);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.music-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--proj-accent-2, #F3B54A);
}

.music-toggle .music-icon {
  display: inline-block;
  font-size: 1.15rem;
  transition: transform 0.6s linear;
}

.music-toggle.playing {
  background: var(--proj-accent-2, #F3B54A);
  color: #3B2A22;
}

.music-toggle.playing .music-icon {
  animation: music-spin 2.2s linear infinite;
}

@keyframes music-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.music-toggle .music-label::after {
  content: "Play shop playlist";
}

.music-toggle.playing .music-label::after {
  content: "Pause shop playlist";
}

@media (max-width: 720px) {
  .chef-deco {
    display: none;
  }

  .music-toggle {
    right: 16px;
    bottom: 16px;
    padding: 9px 14px 9px 12px;
    font-size: 0.85rem;
  }

  .hazard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecosystem-row {
    gap: 18px 20px;
  }

  .eco-lg img {
    width: 68px;
    height: 84px;
  }
}