/* Juicy Joes — the four content pages written from the live site's own copy:
   About, Contact, Shipping & payment, Returns & refunds. Loaded after info.css on those pages only.
   Tokens from tokens.css; buttons, boards, plaques, notices, tables and accordions from components.css. */

/* ============ Shared ============ */
html:not(.js) .sign[data-sign] { color: var(--core); text-shadow: var(--glow-s); }   /* no script: signs are simply lit */
.info > * { min-width: 0; }   /* lets a wide table scroll inside its wrapper instead of stretching the whole column on a phone */
.band { padding-top: clamp(44px, 6.5vw, 92px); }
.band-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-bottom: clamp(24px, 3.5vw, 44px); }
.band-head p { margin: 0; color: var(--cream-2); max-width: 62ch; }
.band-head.centre { align-items: center; text-align: center; }
.band-head.centre p { margin-inline: auto; }
.page-cta { margin-top: clamp(44px, 6.5vw, 92px); padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 48px); border: 1px solid var(--brass-2); border-radius: var(--r-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  background: radial-gradient(90% 120% at 50% 0%, rgba(255, 45, 63, .12), transparent 60%), var(--glass); }
.page-cta p { margin: 0; color: var(--cream-2); max-width: 52ch; }
.page-cta .row { justify-content: center; }
.design-note { border: 1px dashed var(--brass-2); border-radius: var(--r-md); padding: 10px 14px; background: var(--info-bg); font-size: var(--fs-xs); line-height: 1.5; color: var(--brass); margin: var(--s3) 0 0; }
.design-note b { color: var(--cream); font-weight: 600; }

/* ============ About ============ */
.about-hero .sign { margin-bottom: var(--s3); }
.about-hero .lede { margin-top: var(--s3); }
.about-hero .row { margin-top: var(--s5); }

/* the story so far: three stops on one neon line */
.story-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); position: relative; }
.story-line::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--neon) 0%, var(--neon) 72%, rgba(255, 45, 63, .15) 100%); box-shadow: 0 0 10px var(--neon), 0 0 28px rgba(255, 45, 63, .45); }
.story-line > li { position: relative; padding-top: 42px; }
.story-line > li::before { content: ""; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--night); border: 3px solid var(--core); box-shadow: 0 0 6px rgba(255, 255, 255, .8), 0 0 16px var(--neon); }
.story-line .yr { display: block; margin-bottom: 10px; font: 400 clamp(2rem, 4vw, 3rem)/1 var(--sign); color: var(--core); text-shadow: var(--glow-s); }
.story-line h3 { font-size: 1.3rem; margin-bottom: 8px; }
.story-line p { margin: 0; color: var(--cream-2); font-size: var(--fs-sm); line-height: 1.65; }
.story-after { margin: clamp(24px, 3.5vw, 44px) 0 0; max-width: 70ch; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--cream); }

/* photo beside words, alternating */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 72px); align-items: center; }
.duo + .duo { margin-top: clamp(32px, 5vw, 72px); }
.duo.flip > figure { order: 2; }
.duo figure { margin: 0; display: grid; place-items: center; }
.duo figure img { width: min(100%, 460px); height: auto; }
.duo h2 { margin: var(--s3) 0; }
.duo p { color: var(--cream-2); max-width: 54ch; margin: 0 0 1em; }
.duo p:last-child { margin-bottom: 0; }
.duo .hash { color: var(--brass); font-weight: 600; }
.duo:has(figure[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* customer experience: one loud number, the words beside it */
.proof { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.proof .board { min-height: 190px; justify-content: center; align-items: center; text-align: center; }
.proof .board .c { font-size: clamp(3rem, 6vw, 4.4rem); }
.proof .board .s { margin-top: 8px; padding-top: 0; }
.proof p { color: var(--cream-2); max-width: 60ch; margin: 0 0 1em; }
.proof .row { margin-top: var(--s4); }

/* the wall of regulars */
.praise-wall { columns: 3 300px; column-gap: 16px; }
.praise { break-inside: avoid; margin: 0 0 16px; padding: 46px 20px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); position: relative; }
.praise::before { content: "\201C"; position: absolute; left: 16px; top: 8px; font: 400 3.6rem/1 var(--sign); color: var(--unlit); }
.praise:hover { border-color: var(--line-2); }
.praise:hover::before { color: var(--core); text-shadow: var(--glow-xs); }
.praise blockquote { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--cream-2); }
.praise blockquote p { margin: 0 0 .8em; }
.praise blockquote p:last-child { margin-bottom: 0; }
.praise figcaption { margin-top: 16px; display: flex; align-items: center; gap: 10px; font: 700 1rem/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); }
.praise figcaption::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--neon); box-shadow: 0 0 8px var(--neon); }

/* ============ Contact ============ */
.spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.spot { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); overflow: hidden; }
.spot-photo { aspect-ratio: 16 / 10; background: #0B0708; border-bottom: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; position: relative; }
.spot-photo img { width: 100%; height: 100%; object-fit: cover; }
.spot-photo.is-art { background: radial-gradient(70% 90% at 50% 40%, rgba(255, 45, 63, .16), transparent 70%), #0B0708; }
.spot-photo.is-art img { position: absolute; top: 8%; left: 50%; width: auto; height: 84%; transform: translateX(-50%); object-fit: contain; }
.spot-photo.is-missing img { display: none; }
.spot-photo.is-missing::after { content: attr(data-name); font: 400 clamp(1.8rem, 3vw, 2.4rem)/1 var(--sign); color: var(--unlit); }
.spot-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.spot-title { display: flex; flex-direction: column; gap: 8px; }
.spot-title .sign { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.spot-sub { font: 600 var(--fs-xs)/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); overflow-wrap: anywhere; }

/* the OPEN sign: unlit until js/info.js has checked the hours against South African time */
.open-sign { align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 12px 7px 10px; border-radius: var(--r); border: 1px solid var(--unlit); font: 400 1.05rem/1 var(--sign); color: var(--unlit); }
.open-sign i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--unlit); }
.open-sign small { font: 500 var(--fs-xs)/1.2 var(--body); letter-spacing: .03em; color: var(--muted); text-shadow: none; }
.open-sign.is-open { border-color: var(--neon); color: var(--core); text-shadow: var(--glow-xs); box-shadow: 0 0 12px rgba(255, 45, 63, .35), inset 0 0 10px rgba(255, 45, 63, .18); }
.open-sign.is-open i { background: var(--core); box-shadow: 0 0 8px var(--neon); }
.open-sign.is-open small { color: var(--cream-2); }

.hours { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; font-size: var(--fs-sm); }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; color: var(--cream); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hours .is-today { color: var(--core); }
.spot-lines { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: var(--fs-sm); }
.spot-lines li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--cream-2); }
.spot-lines svg { width: 18px; height: 18px; margin-top: 1px; stroke: var(--brass); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spot-lines a { color: var(--cream); overflow-wrap: anywhere; }
.spot-lines a:hover { color: var(--brass); }
.spot-lines .ext { display: inline-block; margin-left: 6px; padding: 2px 8px; border: 1px solid var(--brass-2); border-radius: var(--r-pill); font: 600 var(--fs-xs)/1.3 var(--body); letter-spacing: .06em; color: var(--brass); white-space: nowrap; }
.spot-foot { margin-top: auto; padding-top: 4px; }
.hours-note { margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.help-grid .plaque p { color: var(--cream-2); }
.help-grid .plaque .link-arrow { margin-top: auto; padding-top: 8px; }
.help-grid .socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }

/* ============ Shipping & payment ============ */
.notice-stack { display: grid; gap: 10px; margin-bottom: clamp(24px, 3.5vw, 44px); }
.notice-stack .notice { font-size: var(--fs-sm); line-height: 1.55; }
/* the delivery menu: a price board, one line per service */
.menu-board { list-style: none; margin: 0 0 var(--s6); padding: 0; border: 1px solid var(--brass-2); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(201, 154, 99, .07), transparent 140px), var(--glass); }
.info .prose .menu-board { padding-left: 0; }
.menu-board > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 24px; margin: 0; padding: 22px clamp(16px, 3vw, 28px); border-top: 1px solid var(--line); }
.menu-board > li:first-child { border-top: 0; }
.menu-board h3 { font-size: 1.4rem; color: var(--cream); }
.menu-board .area { grid-column: 1; margin: 6px 0 0; font: 600 var(--fs-xs)/1.5 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.menu-board .cost { grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: right; white-space: nowrap; font: 900 clamp(2.1rem, 4.4vw, 3.1rem)/.9 var(--display); color: var(--core); text-shadow: var(--glow-xs); }
.menu-board .cost small { display: block; margin-bottom: 6px; font: 600 var(--fs-xs)/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-shadow: none; }
.menu-board .facts { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.menu-board .facts li { margin: 0; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: 1.3; color: var(--cream-2); }
.menu-board .facts b { color: var(--cream); font-weight: 600; }
.menu-board .fine { grid-column: 1 / -1; margin: 12px 0 0; max-width: 84ch; font-size: var(--fs-sm); line-height: 1.65; color: var(--cream-2); }
.menu-board .fine + .fine { margin-top: 8px; }
.menu-board .fine a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--brass-2); text-underline-offset: 3px; }
.pudo-table td.num, .pudo-table td:nth-child(2), .pudo-table td:nth-child(3) { white-space: nowrap; }
.pudo-table th.num { white-space: normal; min-width: 132px; line-height: 1.35; }
.pudo-table th small { display: block; margin-top: 4px; font: 500 .68rem/1.35 var(--body); letter-spacing: .03em; text-transform: none; color: var(--muted); }
.pudo-table td.num { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--cream); }
.pudo-table td:first-child { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--cream); }
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: var(--s5); }
.pay-grid .plaque p { color: var(--cream-2); }
.checkout-line { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }

/* ============ Returns & refunds ============ */
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(24px, 3.5vw, 44px); }
.verdict { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); padding: 20px; }
.verdict h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: 12px; }
.verdict h3 i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.verdict.yes { border-color: rgba(93, 201, 138, .4); }
.verdict.yes h3 i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.verdict.fee { border-color: rgba(233, 176, 74, .4); }
.verdict.fee h3 i { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.verdict.no { border-color: rgba(255, 90, 90, .45); }
.verdict.no h3 i { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.verdict ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.5; color: var(--cream-2); }
.ready { border: 1px solid var(--brass-2); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); margin-top: var(--s4);
  background: linear-gradient(160deg, rgba(201, 154, 99, .08), transparent 60%), var(--glass); }
.ready ul { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 10px; }
.ready li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; color: var(--cream); }
.ready li svg { width: 20px; height: 20px; margin-top: 2px; stroke: var(--neon-hot); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ready p { margin: 0 0 var(--s4); }

/* ============ Narrow screens ============ */
@media (max-width: 1000px) {
  .spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-grid { grid-template-columns: 1fr; }
  .glance { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .story-line { grid-template-columns: 1fr; gap: 30px; padding-left: 36px; }
  .story-line::before { left: 9px; right: auto; top: 4px; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--neon) 0%, var(--neon) 72%, rgba(255, 45, 63, .15) 100%); }
  .story-line > li { padding-top: 0; }
  .story-line > li::before { left: -36px; top: 4px; }
  .duo { grid-template-columns: 1fr; }
  .duo.flip > figure { order: 0; }
  .duo figure img { width: min(80%, 340px); }
  .proof { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
  .menu-board .cost { font-size: 2.1rem; grid-row: 1; }
  .menu-board .area { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .spot-grid { grid-template-columns: 1fr; }
  /* reviews become one swipeable shelf; native scrolling, no script */
  .praise-wall { columns: auto; display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter); }
  .praise-wall::-webkit-scrollbar { display: none; }
  .praise { flex: 0 0 84%; margin: 0; scroll-snap-align: start; }
}