/** =========================================================
 *  THE LEBANESE BITE — Shared site styles
 *  Single source of truth for every page (index, about, contact,
 *  faq, order, 404). Loaded by every page's <head>.
 *  Each page's own <style> block should only contain rules that
 *  are genuinely unique to that page — anything shared belongs
 *  here, so a change here updates every page at once.
 *
 *  Palette note: red + gold + a muted cedar green — drawn from the
 *  Lebanese flag and the marinade itself (chili, turmeric, parsley) —
 *  rather than a generic "food app" gradient. Green is used sparingly
 *  (halal mark, focus/active accents), never as a base color.
 *  ========================================================= */

/* ===========================
   Tokens / Reset
=========================== */
:root{
  --bg:#fbf5ee; --panel:#ffffff; --ink:#241c18; --muted:#6b5d55;
  --brand:#a81d0e; --brand-2:#eab53f; --border:#ece3d8;
  --herb:#3f6b4a; --herb-2:#e9f1ea;
  --radius:16px; --shadow:0 10px 28px rgba(40,20,10,.08);
  --glass:rgba(251,245,238,0.82); --ink-2:#2a2a2a; --success:#1a7f37;
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --grad: radial-gradient(900px 500px at 15% -10%, rgba(234,181,63,.14), transparent 62%),
          radial-gradient(700px 500px at 100% 0%, rgba(168,29,14,.08), transparent 60%);
}
*{ box-sizing:border-box }
html{ overflow-y:scroll } /* avoid layout shift when a page's content is shorter than the viewport */
html,body{
  margin:0; padding:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink); background:var(--bg);
}
a{ color:var(--brand); text-decoration:none }
img{ max-width:100%; display:block }
.container{ width:min(1180px,92%); margin:0 auto }
.muted{ color:var(--muted) }

h1, h2, h3, .brand .name b, .kicker, .btn{ font-family:var(--font-display) }

/* Soft gradient wash — quiet, two layers, not a decorative centerpiece */
.page-bg{ position:fixed; inset:0; pointer-events:none; background:var(--grad); z-index:-1 }

/* Accessible skip link */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{ left:10px; top:10px; width:auto; height:auto; z-index:999; background:#fff; padding:10px 12px; border-radius:10px; border:1px solid var(--border) }

/* ===========================
   Header / Nav / Language switch
=========================== */
header{
  position:sticky; top:0; z-index:40;
  background:var(--glass); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px }
.brand .logo{ width:38px; height:38px; border-radius:12px; box-shadow:var(--shadow) }
.brand .name{ display:flex; flex-direction:column; line-height:1 }
.brand .name b{ font-size:16px }
.brand .name span{ font-size:11.5px; color:var(--muted); font-weight:500 }

.navlinks{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.navlinks a{ padding:8px 12px; border-radius:999px; font-weight:700; color:#333; position:relative }
.navlinks a:is(:hover,.active){ background:rgba(154,26,18,.08) }
.navlinks a.active::after{
  content:""; position:absolute; inset:auto 10px -6px 10px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

.lang{ display:flex; gap:6px; align-items:center }
.lang button{ border:1px solid #ddd; background:#fff; padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:800 }
.lang button.active{ background:var(--brand); color:#fff; border-color:var(--brand) }

@media (max-width:640px){
  .nav{
    display:grid; grid-template-columns:1fr;
    grid-template-areas:"brand" "links" "lang";
    gap:8px; padding:8px 0; align-items:center;
  }
  .brand{ grid-area:brand; gap:8px }
  .brand .logo{ width:34px; height:34px }
  .brand .name b{ font-size:15px }
  .brand .name span{ font-size:11px }
  .navlinks{ grid-area:links; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start }
  .navlinks a{ padding:6px 10px; font-size:13.5px; border-radius:999px }
  .lang{ grid-area:lang; display:flex; gap:8px; justify-content:flex-end }
}

/* ===========================
   Hero (home / order)
=========================== */
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:28px 0 10px }
.panel{
  background:linear-gradient(135deg,#ffffff 0%,#fff1ed 85%);
  border:1px solid #f1e6e3; border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow);
}
.kicker{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.92rem; font-weight:600; color:var(--herb); margin:0 0 10px;
}
.kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--herb) }
h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(32px,4.4vw,58px); line-height:1.08; margin:0 0 10px }
.tagline{ font-size:clamp(15px,2vw,18px); color:var(--muted); margin:12px 0 18px }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; align-items:center }
.chip{ background:#fff; border:1px dashed #e8d5d3; padding:10px 16px; border-radius:999px; font-weight:800; color:#7b4d48; transition:transform .2s }
.chip:hover{ transform:translateY(-2px) }

.cta{ margin-top:22px; display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:10px; background:var(--brand); color:#fff;
  padding:12px 16px; border-radius:14px; font-weight:700; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease; border:1px solid var(--brand); cursor:pointer;
}
.btn:hover{ transform:translateY(-2px) }
.btn.secondary{ background:#fff; color:var(--ink); border:1px solid var(--border) }
.btn.primary{ background:var(--brand); color:#fff; border:1px solid var(--brand) }

@media (max-width:1000px){ .hero{ grid-template-columns:1fr } }

/* ===========================
   Sections / Cards / Grids
=========================== */
main{ padding:24px 0 40px }
.section{ padding:32px 0 }
.section h1, .section h2{ font-size:clamp(24px,2.6vw,30px); margin:0 0 12px }
.lead{ color:var(--muted); max-width:62ch }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px;
}
/* Lift-on-hover is reserved for the menu grid, since those cards are
   actually clickable ("Add to order") — informational cards elsewhere
   (testimonials, FAQ, about) stay still. */
.cards .card{ transition:transform .2s ease, box-shadow .2s ease }
.cards .card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(40,20,10,.10) }
.card h3{ margin:8px 0 }
.price{ font-weight:900; color:var(--brand) }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:flex-start }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.stack{ display:flex; flex-direction:column; gap:8px }

@media (max-width:900px){ .cards{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){
  .cards{ grid-template-columns:1fr }
  .grid-2{ display:flex; flex-direction:column; gap:16px }
  .grid-2 .card{ width:100% }
}

/* Food images */
.food-img{ width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border-radius:12px; border:1px solid #f0e7e6; margin-bottom:10px; transition:transform .4s ease }
@media (hover:hover){ .food-img:hover{ transform:scale(1.04) } }

/* Chips-style pill list used under section headings */
.pillbar{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 10px }
.pill{ border:1px dashed #e8d5d3; background:#fff; color:#7b4d48; padding:8px 12px; border-radius:999px; font-weight:800 }

/* Notices */
.notice{
  display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px dashed #ead7d3;
  border-radius:12px; padding:12px 14px; margin:4px 0 10px; color:#7b4d48;
}

/* ===========================
   Buttons / actions / order badge
=========================== */
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.actions .btn{ border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--ink); padding:10px 14px; cursor:pointer; font-weight:800 }
.actions .btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.order-count{ background:var(--brand); color:#fff; border-radius:999px; padding:2px 8px; font-size:.8rem; font-weight:800; margin-left:6px }

@media (max-width:520px){
  .actions{ flex-direction:column }
  .actions .btn{ width:100%; text-align:center }
}

/* ===========================
   Form fields (contact + order share the same look)
=========================== */
.form-group{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px }
.form-group label{ font-size:14px; font-weight:600; color:var(--ink-2) }

:where(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],textarea,select){
  width:100%; background:#fff; color:var(--ink);
  border:1.5px solid #e6dcdc; border-radius:12px; outline:none;
  padding:11px 14px; font-size:15px; font-family:inherit;
  transition:.15s border-color, .15s box-shadow, .15s background;
  -webkit-tap-highlight-color:transparent;
}
:where(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],textarea,select):focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(154,26,18,.16); background:#fffdfb;
}
textarea{ resize:vertical; min-height:110px }
select{ height:46px }
input[type="number"]{ text-align:right; appearance:textfield; -moz-appearance:textfield }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"][readonly]{ background:#fbf7f8; color:#6a6a6a }

.form-group button{
  align-self:flex-start; border:0; border-radius:14px; padding:10px 18px;
  font-weight:800; font-size:14px; cursor:pointer; background:var(--brand); color:#fff;
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.form-group button:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,.10); background:#7f140f }

/* Floating labels (used on the order page's customer-details fields) */
.fl{ position:relative; margin:8px 0 }
.fl input, .fl textarea{ padding-top:16px }
.fl label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  background:transparent; color:#828282; padding:0 6px; pointer-events:none;
  transition:.15s; font-size:.98rem;
}
.fl input::placeholder, .fl textarea::placeholder{ color:transparent }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label,
.fl textarea:focus + label, .fl textarea:not(:placeholder-shown) + label{
  top:-8px; transform:none; font-size:.78rem; font-weight:900; color:var(--brand); background:#fff;
}

@media (max-width:768px){
  .form-group{ margin-bottom:12px }
  .form-group input, .form-group textarea, .form-group button{ font-size:14px }
  .form-group button{ padding:12px 16px; width:100% }
}

/* ===========================
   Table (Order page — kept here so it stays visually
   identical if it's ever reused elsewhere)
=========================== */
.table-wrap{ background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden }
table.table{ width:100%; border-collapse:collapse }
table.table th, table.table td{ padding:12px 10px; border-bottom:1px solid #f1f1f1; text-align:left }
table.table th{ background:#fff7f5; font-weight:900 }
table.table tfoot td{ font-weight:900 }

.qty-wrap{ display:inline-grid; grid-template-columns:40px minmax(80px,1fr) 40px; gap:8px; align-items:center }
.qty-btn{
  border:1px solid var(--border); background:#fff; border-radius:10px;
  width:40px; height:40px; display:grid; place-items:center; font-weight:900; cursor:pointer;
}
.qty-wrap input{ height:40px; text-align:center }

@media (min-width:900px){
  .table-wrap{ overflow:visible }
  table.table{ table-layout:auto }
  table.table th:nth-child(2), table.table td:nth-child(2){ width:140px }
  table.table th:nth-child(3), table.table td:nth-child(3){ width:180px }
  table.table th:nth-child(5), table.table td:nth-child(5){ width:140px }
  table.table th:nth-child(6), table.table td:nth-child(6){ width:64px }
  table.table td:nth-child(2) input, table.table td:nth-child(5) input{ width:100%; text-align:right }
  table.table tfoot td{ white-space:nowrap; padding-right:12px; text-align:right; font-weight:900 }
}

/* Stacked "card" layout on phones */
@media (max-width:640px){
  .table-wrap{ overflow:visible !important; box-shadow:none; border-radius:0; border:0 }
  table.table{ border-collapse:separate; border-spacing:0 12px }
  table.table thead{ display:none }
  table.table tbody tr{
    display:flex; flex-direction:column; gap:10px;
    background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; margin:0 0 10px;
  }
  table.table tbody td{ display:flex; flex-direction:column; gap:4px; padding:0; border:0 }
  table.table tbody td::before{ content:attr(data-label); font-weight:700; font-size:13px; color:var(--ink); opacity:.85 }
  table.table tbody td:last-child{ align-self:flex-end }
  table.table select, table.table input{ height:44px; border-radius:12px; font-size:15px }
  tfoot tr td{ padding:8px 10px; font-size:15px }
}
@media (max-width:520px){
  table.table th, table.table td{ padding:10px 8px; font-size:14px }
}

/* Desktop: "Customer details" cards auto-arrange to 2 columns when there are 4 */
@supports (selector(.grid-3:has(> .card))) {
  @media (min-width:768px){
    .grid-3:has(> .card:nth-child(4)){ grid-template-columns:1fr 1fr; gap:16px }
  }
}
@media (min-width:768px){ .customer-grid{ grid-template-columns:1fr 1fr; gap:16px } }
@media (max-width:640px){
  .grid-3.customer-grid,
  .grid-3:has(> .card:nth-child(4)){ display:grid; grid-template-columns:1fr !important; gap:16px }
  .grid-3.customer-grid .card,
  .grid-3:has(> .card:nth-child(4)) > .card{ grid-column:1 !important; width:100% }
}

/* ===========================
   Footer
=========================== */
footer{ border-top:1px solid var(--border); padding:22px 0 48px; color:var(--muted); margin-top:26px }

/* ===========================
   Scroll-reveal helper (home page)
=========================== */
.reveal{ opacity:0; transform:translateY(14px); filter:blur(2px) }
.reveal.revealed{ opacity:1; transform:none; filter:none; transition:opacity .6s ease, transform .6s ease, filter .6s ease }
