/* Pizza di Joey — menu & reviews components.
   Sits on Avada's dark textured ground, so surfaces are translucent overlays
   rather than solid colours: they work over whatever the theme paints behind. */

:root{
  --pdj-accent:#f58220;
  --pdj-accent-ink:#1c1206;
  --pdj-surface:rgba(255,255,255,.045);
  --pdj-surface-2:rgba(255,255,255,.075);
  --pdj-line:rgba(255,255,255,.11);
  --pdj-line-2:rgba(255,255,255,.2);
  --pdj-muted:rgba(255,255,255,.68);
  --pdj-radius:5px;
}

/* ============================ shared ============================ */

.pdj-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.78em 1.35em;border-radius:3px;text-decoration:none!important;
  font-weight:700;font-size:.95rem;line-height:1.2;letter-spacing:.01em;
  border:1px solid var(--pdj-accent);transition:transform .12s ease,background-color .12s ease,color .12s ease;
}
.pdj-btn--solid{background:var(--pdj-accent);color:var(--pdj-accent-ink)!important;}
.pdj-btn--ghost{background:transparent;color:#fff!important;border-color:var(--pdj-line-2);}
.pdj-btn:hover{transform:translateY(-1px);}
.pdj-btn--solid:hover{background:#ff9235;}
.pdj-btn--ghost:hover{border-color:var(--pdj-accent);color:var(--pdj-accent)!important;}
.pdj-btn:focus-visible{outline:2px solid var(--pdj-accent);outline-offset:3px;}
.pdj-btns{display:flex;flex-wrap:wrap;gap:.65em;margin:1.2em 0;}

.pdj-eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--pdj-accent);margin:0 0 .55em;display:block;
}
.pdj-rule{height:3px;width:64px;background:var(--pdj-accent);border-radius:2px;margin:.85em 0 0;}

/* CTA band — closes both pages */
.pdj-band{
  background:var(--pdj-surface);border:1px solid var(--pdj-line);
  border-radius:var(--pdj-radius);padding:34px 32px;margin:44px 0 0;
}
.pdj-band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:30px 40px;}
.pdj-band h2{margin:0 0 .15em;}
.pdj-band .pdj-band-grid h3{margin:0 0 .6em;font-size:1.12rem;}
.pdj-band .pdj-hours,.pdj-band .pdj-address{margin:0;}

/* ============================ menu ============================ */

.pdj-jump{
  position:sticky;top:0;z-index:20;margin:0 0 34px;padding:11px 0;
  background:rgba(20,18,16,.93);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--pdj-line);
}
.pdj-jump ul{
  list-style:none;margin:0;padding:0 0 3px;display:flex;gap:7px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.pdj-jump li{flex:0 0 auto;}
.pdj-jump a{
  display:block;padding:.42em .95em;border-radius:100px;white-space:nowrap;
  font-size:.83rem;font-weight:700;text-decoration:none!important;
  color:var(--pdj-muted)!important;border:1px solid var(--pdj-line);
}
.pdj-jump a:hover,.pdj-jump a:focus-visible{
  color:var(--pdj-accent-ink)!important;background:var(--pdj-accent);border-color:var(--pdj-accent);
}

.pdj-sec{margin:0 0 58px;scroll-margin-top:78px;}
.pdj-sec-head{margin:0 0 22px;}
.pdj-menu .pdj-sec .pdj-sec-title{margin:0;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.1;}
.pdj-sec-head::after{content:"";display:block;height:3px;width:58px;background:var(--pdj-accent);border-radius:2px;margin-top:.6em;}
.pdj-sec-blurb{margin:.6em 0 0;color:var(--pdj-muted);font-style:italic;max-width:60ch;}

/* card grid — for sections where most items have a photo */
.pdj-cards{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));}
.pdj-card{
  display:flex;flex-direction:column;background:var(--pdj-surface);
  border:1px solid var(--pdj-line);border-radius:var(--pdj-radius);overflow:hidden;
  transition:border-color .15s ease,transform .15s ease;
}
.pdj-card:hover{border-color:var(--pdj-line-2);transform:translateY(-2px);}
.pdj-card-media{aspect-ratio:4/3;overflow:hidden;background:rgba(0,0,0,.25);}
.pdj-card-media img,.pdj-card-img{width:100%;height:100%;object-fit:cover;display:block;margin:0;}
.pdj-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:.35em;flex:1;justify-content:flex-start;}

/* Not every item has been photographed yet. A deliberate branded panel keeps the
   grid even and reads as a design choice, not a missing image. */
.pdj-card-media--ph{
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,rgba(245,130,32,.07) 0 12px,rgba(245,130,32,.03) 12px 24px),
    rgba(0,0,0,.22);
}
.pdj-card-media--ph span{
  font-size:2rem;font-weight:700;line-height:1;color:rgba(245,130,32,.5);
  letter-spacing:.02em;user-select:none;
}
.pdj-card-top{display:flex;align-items:baseline;gap:.7em;}
.pdj-menu .pdj-card .pdj-card-name{margin:0;font-size:1.05rem;line-height:1.24;flex:1;letter-spacing:.01em;}
.pdj-card-desc{margin:0;font-size:.9rem;line-height:1.5;color:var(--pdj-muted);}

/* leader-dot rows — drinks, condiments, anything without photos */
.pdj-list{list-style:none;margin:0;padding:0;
  display:grid;gap:2px 44px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));}
.pdj-row{padding:9px 0;border-bottom:1px solid var(--pdj-line);}
.pdj-row-line{display:flex;align-items:baseline;gap:.5em;}
.pdj-menu .pdj-row .pdj-row-name{font-weight:700;font-size:1rem;}
.pdj-row-dots{flex:1;border-bottom:1px dotted currentColor;opacity:.3;transform:translateY(-.25em);min-width:1.5em;}
.pdj-row-desc{margin:.2em 0 0;font-size:.87rem;line-height:1.45;color:var(--pdj-muted);max-width:58ch;}

.pdj-price{font-weight:700;color:var(--pdj-accent);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pdj-price--none{display:inline-block;min-width:0;}

/* ============================ reviews ============================ */

.pdj-awards{margin:0 0 8px;text-align:center;}
.pdj-awards img{
  display:block;margin:0 auto;max-width:min(660px,100%);height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));
}
.pdj-awards .pdj-awards-cap{
  margin:.9em auto 0!important;max-width:52ch;text-align:center;
  color:var(--pdj-muted);font-size:.95rem;
}
.pdj-awards-head{text-align:center;margin:0 0 26px;}
.pdj-awards-head h2{margin:0;font-size:clamp(1.6rem,4.6vw,2.5rem);line-height:1.08;}
.pdj-awards-head .pdj-rule{margin:.8em auto 0;}

.pdj-cta-center{display:flex;flex-wrap:wrap;gap:.65em;justify-content:center;margin:26px 0 0;}

.pdj-reviews-embed{
  margin:16px 0 0;min-height:180px;
  border:1px solid var(--pdj-line);border-radius:var(--pdj-radius);
  background:var(--pdj-surface);padding:18px;
}
.pdj-reviews-embed > *{max-width:100%;}
.pdj-embed-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5em;text-align:center;min-height:150px;color:var(--pdj-muted);font-size:.93rem;
}
.pdj-embed-empty code{background:rgba(0,0,0,.3);padding:2px 6px;border-radius:3px;font-size:.9em;}

/* ============================ misc ============================ */

.pdj-hours{border-collapse:collapse;}
.pdj-hours th,.pdj-hours td{text-align:left;padding:.3em 1.6em .3em 0;font-weight:400;}
.pdj-hours th{font-weight:700;white-space:nowrap;}
.pdj-hours td{font-variant-numeric:tabular-nums;white-space:nowrap;}
.pdj-address{font-style:normal;line-height:1.68;}
.pdj-order{margin:1.1em 0;}
.pdj-order-direct{width:fit-content;}
.pdj-order-note{margin:.6em 0 0;font-size:.88rem;color:var(--pdj-muted);max-width:34ch;}
.pdj-partners{margin:1.35em 0 0;}
.pdj-partners-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pdj-muted);margin:0 0 .7em;
}
.pdj-partners-list{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
}
.pdj-partners-list li{margin:0;}
.pdj-partners-list a{
  display:flex;align-items:center;justify-content:center;
  height:44px;padding:0 14px;border:1px solid var(--pdj-line);border-radius:4px;
  background:rgba(0,0,0,.18);transition:border-color .15s ease,background-color .15s ease;
}
.pdj-partners-list a:hover,.pdj-partners-list a:focus-visible{
  border-color:var(--pdj-accent);background:rgba(245,130,32,.1);
}
.pdj-partners-list img{max-height:19px;width:auto;display:block;margin:0;}
.pdj-partners-list span{font-weight:700;font-size:.85rem;}
/* legacy single-button variant, kept so older content still renders */
.pdj-order-btn{
  display:inline-block;padding:.72em 1.2em;border:1px solid var(--pdj-line-2);border-radius:3px;
  text-decoration:none!important;font-weight:700;font-size:.92em;
}
.pdj-order-btn:hover,.pdj-order-btn:focus-visible{border-color:var(--pdj-accent);color:var(--pdj-accent)!important;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* in-content links were visually identical to body text */
.fusion-text p a:not(.pdj-btn):not(.pdj-order-btn),.pdj-address a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
}

@media (max-width:640px){
  .pdj-cards{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;}
  .pdj-card-body{padding:12px 13px 14px;}
  .pdj-card-name{font-size:.95rem;}
  .pdj-card-desc{font-size:.84rem;}
  .pdj-band{padding:26px 20px;}
  .pdj-list{grid-template-columns:1fr;gap:0;}
}
@media (prefers-reduced-motion:reduce){
  .pdj-card,.pdj-btn{transition:none;}
  .pdj-card:hover,.pdj-btn:hover{transform:none;}
}