/* =====================================
   J&R BARBEQUE — STYLE SHEET (refactored)
   ===================================== */

/* ---------- Theme + Base ---------- */
:root{
  --orange:#FF6A00;
  --charcoal:#111213;
  --coal:#1a1b1c;
  --ink:#0a0b0c;
  --text:#f4f4f5;
  --muted:#c3c6ca;
  --glow:0 0 8px rgba(255,106,0,.6),0 0 16px rgba(255,106,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--charcoal);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;display:block;border-radius:12px}
a{color:var(--orange);text-decoration:none}

/* ---------- Layout ---------- */
.container{width:92%;max-width:1100px;margin:0 auto}
.page-pad{padding:32px 0 64px}
section{padding:32px 0}

/* ---------- Header (injected) ---------- */
.sitebar{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(180deg,var(--ink),var(--coal));
  border-bottom:1px solid #222;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0; /* allows brand text to shrink on mobile */
}

.brand__logo{
  width:40px;
  height:40px;
  border-radius:8px;
  background:url("/assets/jandr-footer-logo.png") center/cover no-repeat;
  box-shadow:var(--glow);
  flex:0 0 auto;
}

.brand__name{
  font-family:"Bebas Neue",sans-serif;
  letter-spacing:.5px;
  font-size:28px;
  line-height:1.05; /* helps when it wraps */
  margin:0;
}

.nav__links{
  display:flex;
  gap:18px;
  flex-wrap:wrap; /* keeps it from overflowing on smaller widths */
  align-items:center;
  justify-content:flex-end;
}

.nav__link{
  padding:8px 12px;
  border-radius:10px;
  color:#f1f1f1;
  line-height:1; /* tighter vertically */
  display:inline-flex;
  align-items:center;
}

.nav__link:hover,
.nav__link[aria-current="page"]{
  background:#232425;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1000px 400px at 20% -10%,rgba(255,106,0,.18),transparent),
    linear-gradient(180deg,#0b0c0d,#141516 60%);
  border-bottom:1px solid #222;
  text-align:center;
}

.hero__inner{padding:72px 0 64px}

.headline{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(40px,8vw,92px);
  line-height:.95;
  margin:0 0 8px;
}

.neon{color:var(--orange);text-shadow:var(--glow)}

.subhead{
  margin:0 0 24px;
  color:var(--muted);
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid #2a2b2d;
  font-weight:600;
  cursor:pointer;
  line-height:1.3;
}

.btn--primary{
  background:var(--orange);
  color:#0b0b0c;
  border-color:transparent;
  box-shadow:var(--glow);
}

.btn--ghost{
  background:transparent;
  color:#f0f0f0;
  border:1px solid var(--orange);
}

.btn--warn{
  background:#2b1712;
  color:#ffd5c7;
  border-color:#4a2017;
}

.btn--sm{padding:8px 12px;font-size:14px}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ---------- Sections / Headings ---------- */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.about h2,
.quicklinks h3,
.menu-section h2,
.page-title{
  font-family:"Bebas Neue",sans-serif;
  letter-spacing:.5px;
  color:var(--orange);
}

.about p{max-width:70ch}

/* ---------- Cards / Quicklinks ---------- */
.card{
  display:block;
  border:1px solid #242527;
  border-radius:16px;
  padding:20px;
  background:linear-gradient(180deg,#151617,#111213);
  transition:transform .15s ease;
  line-height:1.4;
  min-height:110px;
  position:relative;
  overflow:visible;
}

.card:hover{transform:translateY(-2px)}
.card h3{margin:0 0 8px;color:var(--orange)}
.card p{margin:0;color:var(--muted)}

.quicklinks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  align-items:stretch;
  overflow:visible;
  text-align:left;
}

.quicklinks a.card{color:inherit;text-decoration:none}

.quicklinks > a.card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  width:100%;
}

.quicklinks > a.card h3,
.quicklinks > a.card p{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- Hours ---------- */
.hours{
  background:linear-gradient(180deg,#121314,#0f0f10);
  border:1px solid #222;
  border-radius:16px;
  padding:20px;
  margin-top:8px;
}

.hours__content{
  white-space:pre-wrap;
  background:#0d0e0f;
  border:1px dashed #2b2c2e;
  padding:16px;
  border-radius:12px;
  min-height:120px;
}

.hours__editor{margin-top:12px}

#hoursTextarea{
  width:100%;
  background:#0d0e0f;
  color:var(--text);
  border:1px solid #2a2b2d;
  border-radius:12px;
  padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.editor-actions{display:flex;gap:8px;margin-top:8px}

/* ---------- Menu (list layout) ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

.menu-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.menu-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px dashed #2d2e30;
  border-radius:12px;
  background:#0e0f10;
}

.menu-list li span{font-weight:600}
.menu-list li em{color:var(--muted);font-style:normal;font-size:14px}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}

/* ---------- Contact / Map ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:860px){ .contact-grid{grid-template-columns:1.1fr 1fr} }

.map-embed iframe{width:100%;height:320px;border:0;border-radius:12px}

.socials{margin-top:12px;display:flex;gap:10px}
.social{display:inline-flex;padding:8px 10px;border:1px solid #2a2b2d;border-radius:10px}

/* ---------- Food Choices (two cols desktop, one col mobile) ---------- */
.food-columns{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:18px 28px !important;
  margin:8px 0 16px !important;
}

.food-group{margin:0 !important;padding:0 !important}

.food-group-title{
  margin:0 0 10px !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:#ff9340 !important;
  letter-spacing:.02em !important;
}

.food-group label{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:#eee !important;
}

.food-group input[type="checkbox"]{
  width:auto !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

@media (max-width:700px){
  .food-columns{grid-template-columns:1fr !important}
}

/* ---------- Home trailer image ---------- */
.home-trailer-wrap{margin:18px 0 22px}
.home-trailer-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
}

/* ---------- Menu graphic + zoom modal ---------- */
.menu-card{position:relative;overflow:hidden}

.menu-zoom-trigger{
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:zoom-in;
  text-align:left;
}

.menu-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

.menu-zoom-hint{
  position:absolute;
  right:14px;
  bottom:14px;
  background:rgba(0,0,0,0.65);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-size:.9rem;
}

/* keep hidden until opened */
.menu-modal{position:fixed;inset:0;display:none !important;z-index:9999}
.menu-modal[aria-hidden="false"]{display:block !important}

.menu-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.82)}

.menu-modal__content{
  position:relative;
  max-width:min(1100px,94vw);
  max-height:90vh;
  margin:5vh auto;
  background:#0f0f0f;
  border:1px solid #1e1e1e;
  border-radius:16px;
  overflow:auto;
  padding:46px 14px 14px;
}

.menu-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid #2a2a2a;
  background:#141414;
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}

.menu-modal__img{width:100%;height:auto;display:block;border-radius:12px}

.menu-modal__tip{
  margin-top:10px;
  color:#b9b9b9;
  font-size:.95rem;
  text-align:center;
}

.no-scroll{overflow:hidden}

/* ---------- Footer (injected) ---------- */
#jr-footer{
  background:#000;
  color:#aaa;
  padding:40px 0;
  text-align:center;
  overflow:hidden; /* safari safety */
}

#jr-footer a{color:var(--orange)}
#jr-footer p{margin:4px 0;line-height:1.3}

.jr-footer-inner{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* keep old logo class in case you ever switch back */
.jr-footer-logo{
  display:block;
  width:260px;
  max-width:95%;
  height:auto;
  border-radius:16px;
  box-shadow:0 0 10px rgba(255,106,0,.4);
  margin:0 auto;
}

/* video logo (desktop default) */
.jr-footer-logo-video{
  display:block;
  width:220px;
  max-width:220px; /* prevents global video {width:100%} overrides */
  height:auto;
  max-height:140px;
  object-fit:contain;
  margin:0 auto 12px;
  flex:0 0 auto;
}

/* Mobile sizing (force caps so Safari can’t blow it up) */
@media (max-width:700px){
  .jr-footer-logo-video{
    width:140px !important;
    max-width:140px !important;
    height:auto !important;
    max-height:110px !important;
  }
}

/* iOS Safari-specific hard cap */
@supports (-webkit-touch-callout: none){
  .jr-footer-logo-video{
    width:140px !important;
    max-width:140px !important;
    height:auto !important;
    max-height:110px !important;
  }
}

/* ---------- Utilities ---------- */
.hidden{ display:none !important; }

.thank-you{
  margin: 20px auto !important;
  padding: 18px 22px !important;
  max-width: 760px !important;

  display: block !important;
  text-align: center !important;

  color: #ffd7b8 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  background: linear-gradient(180deg, rgba(255,106,0,0.18), rgba(255,106,0,0.08)) !important;
  border: 1px solid rgba(255,106,0,0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 12px rgba(255,106,0,0.25) !important;
}



/* ---------- Mobile header polish (fix wrap spacing + button awkwardness) ---------- */
@media (max-width:700px){
  .nav{padding:10px 0;gap:10px}

  .brand{gap:10px}

  /* This fixes the vertical spacing when "Barbeque" wraps under "J&R" */
  .brand__name{
    font-size:22px;
    line-height:1.05;
    letter-spacing:.2px;
  }

  /* Make nav buttons less tall / less awkward */
  .nav__links{gap:10px}
  .nav__link{padding:6px 10px}
}
.thank-you{
  margin: 20px auto !important;
  padding: 18px 22px !important;
  max-width: 760px !important;

  text-align: center !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffd7b8 !important;

  background: linear-gradient(
    180deg,
    rgba(255,106,0,0.18),
    rgba(255,106,0,0.08)
  ) !important;

  border: 1px solid rgba(255,106,0,0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 12px rgba(255,106,0,0.25) !important;
}
/* Force-hide helper class (used by thank-you message, modals, etc.) */
.hidden{
  display: none !important;
  visibility: hidden !important;
}