/* ==========================================================================
   Kukurico — Menu detail page
   Dark + red, ghost background type, brush strokes, handwritten accents.
   Designed for transparent food PNGs (no white circle frame).
   ========================================================================== */

html, body { overflow-x: hidden; }      /* allow vertical scroll */
body { background: #0a0606; }

.detail {
  min-height: 100vh;
  background:
    radial-gradient(1100px 700px at 80% 0%,  rgba(220,38,38,.22), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(245,158,11,.14), transparent 60%),
    #0a0606;
  color: #f4eded;
  position: relative;
  /* DO NOT set overflow:hidden here — was the bug that killed scrolling */
  overflow-x: clip;
}

/* Faint grid texture */
.detail::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Top nav re-themed for dark */
.detail .nav { background: rgba(10,6,6,.78); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.05); }
.detail .nav-link { color: rgba(255,255,255,.78); }
.detail .nav-link:hover, .detail .nav-link.active { color: #fff; background: rgba(220,38,38,.20); }
.detail .brand-logo { filter: drop-shadow(0 4px 14px rgba(220,38,38,.35)); }

/* ── Stage ────────────────────────────────────────────────────────────── */
.detail-stage {
  position: relative;
  padding: calc(var(--header-h) + 56px) 0 100px;
  z-index: 1;
}

.detail-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.85);
  margin: 0 auto 20px;
}
.detail-eyebrow i { color: var(--brand); }

.detail-title-wrap {
  text-align: center;
  position: relative;
  z-index: 6;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Big handwritten kicker above the title */
.detail-kicker {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--brand);
  transform: rotate(-3deg);
  margin-bottom: -12px;
  position: relative;
  z-index: 1;
}
.detail-kicker::after {
  content: "";
  display: block;
  width: 70%;
  height: 12px;
  margin: 4px auto 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 1, 100 1, 198 7' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

.detail-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -.5px;
  color: #fff;
  margin-bottom: 8px;
}
.detail-title .ink {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--brand);
  font-size: .92em;
  margin: 0 .15em;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-2deg);
}
.detail-subtitle {
  color: rgba(255,255,255,.6);
  font-size: 17px;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
}

/* ── Composition: ghost text + transparent food PNG + ingredient chips ── */
.detail-comp {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  min-height: clamp(520px, 64vh, 760px);
  padding: 0 28px;
}

/* Huge background type that the food PNG sits on top of (the "3D depth" trick) */
.detail-ghost {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 22vw, 320px);
  letter-spacing: -.04em;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.10);
  text-stroke: 2px rgba(255,255,255,.10);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  text-transform: uppercase;
}
/* Second layer of ghost text — solid faint fill behind the food */
.detail-ghost-fill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(100px, 18vw, 260px);
  letter-spacing: -.02em;
  line-height: .85;
  color: rgba(220, 38, 38, .08);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  text-transform: uppercase;
}

/* Brush stroke under the food (red painterly slash) */
.detail-brush {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: clamp(420px, 60%, 760px);
  height: 70px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'><path d='M10 50 C 120 10, 320 80, 500 40 C 640 10, 750 50, 790 30' fill='none' stroke='%23dc2626' stroke-width='38' stroke-linecap='round' opacity='0.55'/></svg>") no-repeat center / 100% 100%;
  filter: blur(.4px);
}

/* Connector lines (SVG) */
.detail-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
.detail-lines path {
  fill: none;
  stroke: rgba(255,255,255,.20);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  animation: dashRun 30s linear infinite;
}
@keyframes dashRun { to { stroke-dashoffset: -300; } }

/* The food image (transparent PNG without bg) */
.detail-food {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 44%, 540px);
  z-index: 3;
  filter: drop-shadow(0 40px 60px rgba(220,38,38,.45)) drop-shadow(0 18px 30px rgba(0,0,0,.55));
  animation: foodFloat 7s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}
.detail-food img {
  width: 100%; height: auto;
  display: block;
}
@keyframes foodFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  50%      { transform: translate(-50%, calc(-50% - 12px)) rotate(2deg); }
}

/* Ground glow under the food */
.detail-food-shadow {
  position: absolute;
  left: 50%; top: 80%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 40%, 480px);
  height: 60px;
  z-index: 2;
  background: radial-gradient(ellipse, rgba(220,38,38,.45), transparent 60%);
  filter: blur(20px);
  animation: shadowPulse 7s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%, 100% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .7; transform: translate(-50%, -50%) scale(.85); }
}

/* Ingredient chip */
.ing {
  position: absolute;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px;
  background: rgba(20,12,12,.78);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14.5px; font-weight: 500;
  z-index: 5;
  cursor: pointer;
  transition: transform .35s var(--ease), border-color .25s, background .25s, box-shadow .25s;
  animation: ingFloat 6s ease-in-out infinite;
  text-decoration: none;
}
.ing:hover {
  background: rgba(220,38,38,.22);
  border-color: rgba(220,38,38,.55);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -10px rgba(220,38,38,.6);
  color: #fff;
}
.ing-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(220,38,38,.35), rgba(245,158,11,.35));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}

/* Position presets */
.ing-1 { top: 12%;  left: 6%; }
.ing-2 { top: 36%;  left: -2%;  animation-delay: -1.4s; }
.ing-3 { top: 64%;  left: 4%;   animation-delay: -2.8s; }
.ing-4 { top: 12%;  right: 6%;  animation-delay: -.7s; }
.ing-5 { top: 38%;  right: -2%; animation-delay: -2.1s; }
.ing-6 { top: 66%;  right: 4%;  animation-delay: -3.2s; }

@keyframes ingFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* Bottom action bar */
.detail-actions {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px;
  background: rgba(10,6,6,.7);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  margin: 60px auto 0;
  position: relative;
  z-index: 5;
}
.detail-action-wrap { text-align: center; position: relative; z-index: 5; }
.detail-price-tag {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 12px 22px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: #fff;
}
.detail-price-tag small { font-size: 12px; opacity: .7; }
.detail-add-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600; font-size: 15px;
  transition: background .25s, transform .25s;
  border: 0; cursor: pointer;
}
.detail-add-btn:hover { background: var(--brand-700); transform: translateY(-2px); }

/* Hand-drawn note next to action bar */
.detail-note {
  display: inline-flex; align-items: flex-end; gap: 6px;
  margin-top: 16px;
  color: var(--brand);
}
.detail-note-text {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 700;
  transform: rotate(-3deg);
  white-space: nowrap;
}
.detail-note-arrow { width: 70px; height: 38px; }
.detail-note-arrow path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawNote 1.6s var(--ease-out) .6s forwards;
}
@keyframes drawNote { to { stroke-dashoffset: 0; } }

/* Side category index (right rail) */
.detail-rail {
  position: absolute;
  top: 50%; right: 28px;
  transform: translateY(-50%);
  z-index: 6;
  display: flex; flex-direction: column;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.detail-rail a {
  display: flex; align-items: center; gap: 12px;
  color: inherit;
  transition: color .2s;
  text-decoration: none;
}
.detail-rail a::after {
  content: "";
  width: 26px; height: 1px;
  background: rgba(255,255,255,.2);
  transition: background .2s, width .2s;
}
.detail-rail a:hover { color: #fff; }
.detail-rail a:hover::after { background: var(--brand); width: 36px; }
.detail-rail a.active { color: var(--brand); }
.detail-rail a.active::after { background: var(--brand); }

/* Prev / next arrows */
.detail-arrow {
  position: absolute;
  top: 48%; transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  z-index: 6;
  transition: background .25s, border-color .25s, transform .25s;
  backdrop-filter: blur(8px);
  text-decoration: none;
}
.detail-arrow:hover {
  background: rgba(220,38,38,.30);
  border-color: rgba(220,38,38,.65);
  color: #fff;
}
.detail-arrow.prev { left: 24px; }
.detail-arrow.next { right: 24px; }
.detail-arrow.next:hover { transform: translateY(-50%) translateX(4px); }
.detail-arrow.prev:hover { transform: translateY(-50%) translateX(-4px); }

/* Description block below */
.detail-info {
  max-width: 1100px;
  margin: 90px auto 0;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  position: relative; z-index: 2;
}
.detail-info h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  letter-spacing: -.5px;
  margin-bottom: 16px;
  color: #fff;
  position: relative;
  display: inline-block;
}
.detail-info h2::after {
  content: "";
  position: absolute;
  left: 0; right: 30%; bottom: -10px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 60 1, 130 1, 198 7' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}
.detail-info p {
  color: rgba(255,255,255,.65);
  font-size: 16px; line-height: 1.7;
  margin-bottom: 12px;
}
.detail-info .handwritten-callout {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: var(--brand);
  transform: rotate(-2deg);
  display: inline-block;
  margin-top: 16px;
}
.detail-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 28px;
}
.meta-card {
  padding: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.meta-card:hover {
  transform: translateY(-3px);
  border-color: rgba(220,38,38,.4);
  background: rgba(220,38,38,.06);
}
.meta-card .meta-label {
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}
.meta-card .meta-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: 1px;
}
.meta-card .meta-value .accent { color: var(--brand); }

/* Back link */
.detail-back {
  position: absolute;
  top: calc(var(--header-h) + 18px);
  left: 28px;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.65);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  transition: color .2s, background .2s;
  text-decoration: none;
}
.detail-back:hover { color: #fff; background: rgba(220,38,38,.18); }

/* Footer (reuse home footer; tone it for detail page) */
.detail .footer { background: #050202; margin-top: 60px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .detail-rail { display: none; }
}
@media (max-width: 980px) {
  .detail-arrow { display: none; }
  .detail-comp { min-height: auto; padding: 24px 20px 20px; }
  .detail-food {
    position: relative;
    left: auto; top: auto;
    transform: none;
    margin: 32px auto;
    width: 80vw; max-width: 360px;
    animation: none;
  }
  .detail-food-shadow { display: none; }
  .detail-brush { top: 38%; }
  .ing {
    position: relative !important;
    inset: auto !important;
    display: inline-flex;
    margin: 6px;
    animation: none;
  }
  .detail-radial-chips {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin: 12px auto 0;
  }
  .detail-lines { display: none; }
  .detail-info { grid-template-columns: 1fr; gap: 28px; margin-top: 60px; }
  .detail-ghost, .detail-ghost-fill { font-size: clamp(80px, 18vw, 160px); }
}