/* Utilities used by the dynamic menu that the compiled Tailwind sheet does not include. Same token pattern as styles.css. */
.w-20{width:calc(var(--spacing) * 20)}
.mt-1{margin-top:calc(var(--spacing) * 1)}
.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}
.line-through{text-decoration-line:line-through}
.text-maroon\/40{color:var(--maroon)}
.bg-maroon\/5{background-color:var(--maroon)}
@supports (color:color-mix(in lab, red, red)){
  .text-maroon\/40{color:color-mix(in oklab, var(--maroon) 40%, transparent)}
  .bg-maroon\/5{background-color:color-mix(in oklab, var(--maroon) 5%, transparent)}
}
@media (width>=40rem){
  .sm\:w-24{width:calc(var(--spacing) * 24)}
}

/* Saudi riyal symbol next to prices: scales with the price font, sits on its baseline. */
.riyal{height:.8em;width:auto;align-self:center;transform:translateY(-.04em)}

/* Kitchen tags — brand colours as specified. */
.badge-gulf{color:#FEF3DF;background-color:#380E1D}
.badge-levantine{color:#FF5602;background-color:#FEF3DF;border:1px solid #FF5602}
.badge-egyptian{color:#FEF3DF;background-color:#FF5602}

/* Photo lightbox (native <dialog>) — the full, uncropped image scaled to fit the viewport on any screen size. */
.cursor-zoom-in{cursor:zoom-in}
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;background:transparent;color:var(--cream);overflow:hidden}
.lightbox::backdrop{background:rgba(48,12,26,.92)}
@supports (color:color-mix(in lab, red, red)){.lightbox::backdrop{background:color-mix(in oklab, var(--maroon) 92%, transparent)}}
.lightbox-body{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:calc(var(--spacing) * 4)}
.lightbox-figure{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing) * 3);max-width:100%;max-height:100%}
.lightbox-img{display:block;width:auto;height:auto;max-width:calc(100vw - var(--spacing) * 8);max-height:calc(100vh - var(--spacing) * 24);max-height:calc(100dvh - var(--spacing) * 24);object-fit:contain;border-radius:var(--radius-md);box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.lightbox-caption{font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-weight:var(--font-weight-bold);text-align:center;color:color-mix(in oklab, var(--cream) 85%, transparent)}
.lightbox-close{position:absolute;top:calc(var(--spacing) * 4);inset-inline-end:calc(var(--spacing) * 4);display:grid;place-items:center;width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11);border-radius:calc(infinity * 1px);background:color-mix(in oklab, var(--cream) 12%, transparent);color:var(--cream);cursor:pointer;transition:background-color .15s,color .15s;z-index:1}
.lightbox-close:hover{background:var(--flame)}
.lightbox-close:focus-visible{outline:2px solid var(--flame);outline-offset:2px}
@media (width>=40rem){
  .lightbox-body{padding:calc(var(--spacing) * 8)}
  .lightbox-img{max-width:calc(100vw - var(--spacing) * 16)}
  .lightbox-close{top:calc(var(--spacing) * 6);inset-inline-end:calc(var(--spacing) * 6)}
}

/* Opening-offer ribbon: a diagonal band across the top-left corner of the menu header.
   The wrapper is a square as tall as the header; the band runs along its diagonal
   (bottom-left -> top-right), so it clears the nav row and the right-aligned title. */
.offer-ribbon{position:absolute;top:0;left:0;height:15rem;aspect-ratio:1/1;overflow:hidden;pointer-events:none;z-index:1;visibility:hidden}
.offer-ribbon span{position:absolute;left:50%;top:50%;width:150%;transform:translate(-50%,-50%) rotate(-45deg);background:var(--flame);color:var(--cream);text-align:center;font-weight:var(--font-weight-black);font-size:.78rem;line-height:1.25;padding:.45rem 2.5rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.55)}
@media (width>=40rem){
  .offer-ribbon{height:100%}
  .offer-ribbon span{font-size:1rem;padding:.7rem 3rem}
}