/* ============================================================
   RESTAURANT CATEGORY — "Order Ticket" concept.
   For sit-down / counter-service restaurants (any cuisine).
   Signature element: a torn-edge order-ticket badge that carries
   today's open/closed status, plus a menu board with dotted
   price-leaders instead of generic cards.

   Tokens can be overridden per-business by an inline <style>
   block the build script injects when a business sets
   `accentColor` in its data file.
   ============================================================ */

:root{
  --ink:        #221A17;
  --paper:      #F1EAE0;
  --paper-2:    #FFFFFF;
  --accent:     #9C2B3D;   /* cranberry — default, overridable per business */
  --accent-2:   #C98A2B;   /* warm gold, used sparingly for price accents */
  --line:       #DAD0C2;
  --muted:      #6B5F54;
  --focus:      #C98A2B;
  --needs-input-border: #B98A57;
  --needs-input-bg: rgba(201,138,43,0.08);
  --needs-input-text: #7A5A30;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

h1,h2,h3{ font-family: var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }

.utility-bar{ background: var(--ink); color: #EDE3D6; font-size: 0.82rem; }
.utility-bar .wrap{ display:flex; justify-content:space-between; align-items:center; padding: 8px 24px; gap:16px; flex-wrap:wrap; }
.utility-bar a{ color: #EDE3D6; text-decoration:none; }
.utility-bar a:hover{ text-decoration:underline; }

.site-header{ background: var(--paper-2); border-bottom: 3px solid var(--ink); position: sticky; top:0; z-index: 50; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; gap: 20px; position: relative; }
.brand{ font-family: var(--font-display); letter-spacing: 0.03em; text-decoration:none; color: var(--ink); display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.brand-logo{ height: 40px; width: 40px; border-radius: 50%; object-fit: cover; flex-shrink:0; }
.footer-logo{ height: 30px; width: 30px; border-radius: 50%; object-fit: cover; flex-shrink:0; }
.brand-copy{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-name{ font-size: 1.5rem; }
.brand-sub{ display:block; font-family: var(--font-body); text-transform:none; letter-spacing:normal; font-size: 0.72rem; font-weight:600; color: var(--accent); }
@media (max-width: 560px){ .brand-name{ font-size: 1.15rem; } .brand-sub{ display:none; } }
.nav-toggle{ flex-shrink:0; }
.nav-inner > a.btn{ flex-shrink:0; }

.main-nav a{ text-decoration:none; color: var(--ink); font-weight:700; font-size:0.9rem; padding:10px 14px; text-transform: uppercase; letter-spacing: 0.03em; }
.main-nav a:hover{ color: var(--accent); }
@media (max-width: 860px){ .main-nav{ background: var(--paper-2); border-bottom: 3px solid var(--ink); } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration:none; border-radius: 6px; padding: 12px 22px; border: 2px solid var(--ink);
  font-size: 1rem; cursor:pointer; background: var(--ink); color: var(--paper);
}
.btn:hover{ background: var(--accent); border-color: var(--accent); }
.btn-outline{ background: transparent; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--paper); }

/* ---- Hero + ticket badge (signature element) ---- */
.hero{ padding: 56px 0 44px; }
.hero .wrap{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items:start; }
@media (max-width: 860px){ .hero .wrap{ grid-template-columns: 1fr; } }
.hero .kicker{ color: var(--accent); font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; }
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 6px 0 10px; }
.hero .tagline{ font-size: 1.1rem; color: var(--muted); max-width: 48ch; }
.hero-ctas{ display:flex; gap:12px; margin-top: 22px; flex-wrap:wrap; }

.ticket{
  background: var(--paper-2);
  border: 2px solid var(--ink);
  position: relative;
  padding: 22px 22px 26px;
  clip-path: polygon(
    0% 6px, 3% 0%, 6% 6px, 9% 0%, 12% 6px, 15% 0%, 18% 6px, 21% 0%, 24% 6px, 27% 0%, 30% 6px, 33% 0%, 36% 6px, 39% 0%, 42% 6px, 45% 0%, 48% 6px, 51% 0%, 54% 6px, 57% 0%, 60% 6px, 63% 0%, 66% 6px, 69% 0%, 72% 6px, 75% 0%, 78% 6px, 81% 0%, 84% 6px, 87% 0%, 90% 6px, 93% 0%, 96% 6px, 99% 0%, 100% 6px,
    100% calc(100% - 6px), 97% 100%, 94% calc(100% - 6px), 91% 100%, 88% calc(100% - 6px), 85% 100%, 82% calc(100% - 6px), 79% 100%, 76% calc(100% - 6px), 73% 100%, 70% calc(100% - 6px), 67% 100%, 64% calc(100% - 6px), 61% 100%, 58% calc(100% - 6px), 55% 100%, 52% calc(100% - 6px), 49% 100%, 46% calc(100% - 6px), 43% 100%, 40% calc(100% - 6px), 37% 100%, 34% calc(100% - 6px), 31% 100%, 28% calc(100% - 6px), 25% 100%, 22% calc(100% - 6px), 19% 100%, 16% calc(100% - 6px), 13% 100%, 10% calc(100% - 6px), 7% 100%, 4% calc(100% - 6px), 1% 100%,
    0% calc(100% - 6px)
  );
}
.ticket .stub-label{ font-family: var(--font-display); font-size:0.85rem; letter-spacing:0.15em; color: var(--muted); }
.ticket .status{ font-family: var(--font-display); font-size: 1.8rem; margin: 4px 0 10px; }
.ticket .status.open{ color: #2F6F4E; }
.ticket .status.closed{ color: var(--accent); }
.ticket .hours-row{ display:flex; justify-content:space-between; font-size:0.88rem; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.ticket .hours-row:last-child{ border-bottom:none; }
.ticket .rating{ margin-top: 14px; font-size:0.9rem; color: var(--muted); }
.ticket .rating b{ color: var(--ink); }

/* ---- Menu board ---- */
.menu-board{ background: var(--paper-2); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 56px 0; }
.menu-board .section-head{ text-align:center; max-width: 620px; margin: 0 auto 36px; }
.menu-board .section-head .kicker{ color: var(--accent); font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; }
.menu-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px){ .menu-grid{ grid-template-columns: 1fr; } }
.menu-cat h3{ font-size:1.3rem; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 14px; }
.menu-item{ display:flex; align-items:baseline; gap: 8px; padding: 8px 0; border-bottom: 1px dotted var(--line); }
.menu-item .name{ font-weight:700; white-space:nowrap; }
.menu-item .dots{ flex:1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.menu-item .price{ font-family: var(--font-display); color: var(--accent-2); font-size:1.05rem; white-space:nowrap; }
.menu-item .desc{ display:block; font-size:0.82rem; color: var(--muted); flex-basis:100%; }

/* ---- About / gallery / location ---- */
section.block{ padding: 56px 0; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 700px){ .gallery-grid{ grid-template-columns: 1fr 1fr; } }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0; }
.badge{ font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:5px 12px; border-radius:999px; background: var(--ink); color: var(--paper); }

footer.site-footer{ background: var(--ink); color: #EDE3D6; padding: 44px 0 24px; }
footer.site-footer h4{ font-family: var(--font-display); letter-spacing:0.05em; text-transform:uppercase; color:#fff; font-size:0.95rem; margin-bottom:12px; }
footer.site-footer a{ color:#EDE3D6; text-decoration:none; font-size:0.9rem; }
footer.site-footer a:hover{ text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.15); margin-top: 30px; padding-top: 18px; font-size:0.8rem; color:#C9BBA6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }