/* Phone first: the default rules are for small screens.
   Bigger screens are handled at the bottom with a min-width media query. */

/* ---------- Colours and sizes (placeholders, brand not decided yet) ---------- */
:root {
  --color-bg: #f6f5f2;
  --color-surface: #ffffff;
  --color-text: #1f1f1f;
  --color-muted: #5f5f5f;
  --color-border: #e4e2dd;
  --color-button-border: #cfcdc8;
  --color-placeholder: #f3f2ef;
  --color-placeholder-icon: #8a8a8a;
  --color-open: #1f7a3f;
  --color-closed: #a12a2a;
  --color-chip-active-bg: #d7e7fb;
  --color-chip-active-text: #1d4f91;
  /* WhatsApp is the main action: filled green. WhatsApp's own #25d366 is too light for white text
     (contrast 1.98), this darker green reaches 5.02 (WCAG AA needs 4.5). */
  --color-primary: #1a7f4b;
  --color-primary-text: #ffffff;
  --radius: 10px;
  /* Tablets and computers only: the content (text, menu) never gets wider than this,
     it stays centred and the extra space goes to the left and right margins. */
  --content-width: 960px;
  --bar-height: 72px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, p {
  margin: 0;
}

a {
  color: inherit;
}

.page {
  background: var(--color-surface);
  min-height: 100vh;
  /* Room at the bottom so the sticky bar never hides the footer */
  padding-bottom: var(--bar-height);
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

#restaurant-name {
  font-weight: 600;
}

.badge {
  font-size: 0.95rem;
  font-weight: 500;
}

.badge-open {
  color: var(--color-open);
}

.badge-closed {
  color: var(--color-closed);
}

/* ---------- Hero photo ---------- */
.hero {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-placeholder);
}

.hero-icon {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--color-placeholder-icon);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* When the real photo loads, it covers the placeholder icon */
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Intro: tagline, hours, buttons ---------- */
.intro {
  display: grid;
  gap: 4px;
  padding: 16px;
}

#restaurant-tagline {
  font-size: 1.15rem;
  font-weight: 500;
}

#restaurant-hours {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.intro .contact-buttons {
  margin-top: 12px;
}

/* ---------- Buttons (intro and sticky bar) ---------- */
.contact-buttons {
  display: flex;
  gap: 10px;
}

.button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px; /* big enough for a thumb */
  padding: 0 16px;
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  text-decoration: none;
}

/* Primary action (buttons.md: one prominent button, distinguished by style, not size) */
.button.whatsapp-link {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* ---------- Category chips ---------- */
#category-chips {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto; /* scroll sideways if there are many categories */
  scrollbar-width: none;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.chip-active {
  border-color: var(--color-chip-active-bg);
  background: var(--color-chip-active-bg);
  color: var(--color-chip-active-text);
}

/* ---------- Menu ---------- */
.menu-section {
  padding: 16px 16px 4px;
  /* When a chip jumps here, keep the title below the sticky chips */
  scroll-margin-top: 56px;
}

.menu-section h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

/* One item: thumbnail on the left, name and price on the first line,
   description below. Grid areas name each zone. */
.menu-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  /* First row only as tall as the name; the description row takes the rest */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "thumb name price"
    "thumb desc desc";
  column-gap: 16px;
  row-gap: 2px;
  align-items: start;
  padding: 12px 0;
}

.menu-item + .menu-item {
  border-top: 1px solid var(--color-border);
}

.item-thumb {
  grid-area: thumb;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-placeholder);
}

.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photos stay invisible until loaded, so a missing file never shows a broken icon or alt text */
.item-thumb img:not(.loaded),
.hero img:not(.loaded) {
  visibility: hidden;
}

.item-name {
  grid-area: name;
  font-size: 1rem;
  font-weight: 500;
}

.item-price {
  grid-area: price;
  font-weight: 500;
  white-space: nowrap;
}

.item-description {
  grid-area: desc;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
#restaurant-info {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
}

.info-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Social links: plain text links, like the address. Not buttons: they don't look like the
   category chips, because they do something different (they leave the site). */
#social-links {
  display: block;
}

/* ---------- Sticky bottom bar ---------- */
#sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--bar-height);
  padding: 12px 16px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* ---------- Bigger screens: tablets (768px and up) and computers ----------
   Nothing below applies under 768px, so the phone layout stays exactly the same.
   Idea: every band (top bar, intro, chips, menu, footer, bottom bar) still goes from one edge
   of the screen to the other, so the lines and background have no visible "column" edges.
   Only the content inside each band is kept in a centred column, using side padding. */
@media (min-width: 768px) {
  :root {
    /* Side padding of each band: at least 24px. On wide screens it grows so the content
       stays --content-width wide and centred. 100% = width of the band's parent (the page).
       max() picks the bigger of the two values (Chrome 79+, Firefox 75+, Safari 11.1+). */
    --gutter: max(24px, calc((100% - var(--content-width)) / 2));
  }

  .topbar {
    padding: 14px var(--gutter);
  }

  /* Taller photo: the screen is wider, so a 150px strip would look thin */
  .hero {
    height: 260px;
  }

  .intro {
    padding: 24px var(--gutter);
  }

  /* Contact buttons keep a normal size instead of stretching across the whole screen */
  .contact-buttons .button {
    flex: 0 1 225px;
  }

  #category-chips {
    padding: 12px var(--gutter);
    /* With a mouse, sideways scrolling is hard (the scrollbar is hidden):
       on big screens the chips go to a second line instead */
    flex-wrap: wrap;
  }

  .menu-section {
    padding: 24px var(--gutter) 4px;
    /* Room for the sticky chips, even if they take two lines */
    scroll-margin-top: 112px;
  }

  /* Menu items in two columns side by side */
  .menu-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }

  /* In two columns, items 1 and 2 are both on the first row: neither gets a line above it,
     so the lines of the two columns stay level */
  .menu-item:nth-child(2) {
    border-top: none;
  }

  #restaurant-info {
    padding: 16px var(--gutter);
  }

  /* Bottom bar: full width line, buttons centred (same size as the buttons in the intro) */
  #sticky-bar {
    justify-content: center;
    padding: 12px var(--gutter);
  }
}

/* Computers: an even taller photo */
@media (min-width: 1024px) {
  .hero {
    height: 320px;
  }
}