/* ==========================================================================
   Components: anything used on more than one page.
   icon, button, badge, photo, dish card, wave, swash, sticker, hours table,
   open-now status, map facade.
   ========================================================================== */

/* --- Icon ----------------------------------------------------------------- */
.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  fill: currentColor;
}
/* Directional icons point the reading direction. */
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* --- Button --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 3rem;
  padding: var(--space-2xs) var(--space-md);
  border: var(--border-thick) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(var(--press)); }

.btn--primary { background: var(--brand); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-deep); color: var(--paper); box-shadow: var(--shadow); }

.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--card); color: var(--brand); }

.btn--ghost-light { border-color: var(--ink-on-deep); color: var(--ink-on-deep); }
.btn--ghost-light:hover { background: var(--ink-on-deep); color: var(--deep); }

.btn--sm { min-block-size: 2.5rem; padding-inline: var(--space-sm); font-size: var(--fs-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

/* A quiet text link with an icon, used for phone and WhatsApp. */
.link-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.link-icon:hover { color: var(--brand); text-decoration: underline; }
.link-icon .icon { color: var(--sea-ink); }

/* --- Badge ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  white-space: nowrap;
}
.badge--outline { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 var(--border-thick) currentColor; }

/* --- Photo ---------------------------------------------------------------- */
.photo { background: var(--photo-ground); overflow: hidden; }
.photo picture { inline-size: 100%; block-size: 100%; }
.photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* --- Dish card (home: what we serve) ------------------------------------- */
.dish-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dish-card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow); color: var(--ink); }
.dish-card .photo { aspect-ratio: 4 / 3; }
.dish-card .photo img { transition: transform 600ms var(--ease); }
.dish-card:hover .photo img { transform: scale(1.05); }
.dish-card__body {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.dish-card__title { font-size: var(--fs-lg); }
.dish-card .badge {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
}

/* --- Wave ------------------------------------------------------------------ */
/* The brush wave from the logo, as a section edge. The SVG is inline in the
   page; colour comes from `color` so one path serves every band. */
.wave {
  display: block;
  inline-size: 100%;
  block-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--paper-2);
  /* Overlap the next band by a pixel so sub-pixel rounding never shows a seam. */
  margin-block-end: calc(var(--border) * -1);
  position: relative;
}
.wave--flip { margin-block: calc(var(--border) * -1) 0; }
.wave path { fill: currentColor; }
.wave--flip { transform: scaleY(-1); }

/* Hand-drawn underline under a word in a headline. */
.swash { position: relative; display: inline-block; color: var(--brand); }
.swash svg {
  position: absolute;
  inset-inline: -2%;
  inset-block-end: -0.28em;
  inline-size: 104%;
  block-size: 0.42em;
  color: var(--sea);
}
.swash path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; }

/* --- Sticker: rotated round tag ------------------------------------------- */
.sticker {
  display: grid;
  place-content: center;
  justify-items: center;
  inline-size: 8.5rem;
  aspect-ratio: 1;
  padding: var(--space-sm);
  border-radius: 50%;
  background: var(--coral-ink);
  color: var(--paper);
  text-align: center;
  font-family: var(--font-display);
  line-height: 1.15;
  transform: rotate(-9deg);
  box-shadow: var(--shadow);
  outline: var(--border-thick) dashed var(--sticker-dash);
  outline-offset: -0.55rem;
}
.sticker__top { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.sticker__big { font-size: var(--fs-md); font-weight: var(--fw-black); white-space: nowrap; }

/* --- Hours ---------------------------------------------------------------- */
.hours { inline-size: 100%; border-collapse: collapse; }
.hours th, .hours td {
  padding-block: var(--space-2xs);
  border-block-end: var(--border) dashed var(--line);
  text-align: start;
  font-weight: var(--fw-body);
}
.hours th { font-weight: var(--fw-medium); }
.hours td { text-align: end; font-variant-numeric: tabular-nums; }
.hours tr[data-today] th,
.hours tr[data-today] td { color: var(--brand); font-weight: var(--fw-bold); }
.hours__today { margin-inline-start: var(--space-2xs); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-medium);
}
.status::before {
  content: "";
  inline-size: 0.6em;
  block-size: 0.6em;
  border-radius: 50%;
  background: var(--coral-ink);
}
.status[data-open]::before { background: var(--sea); box-shadow: 0 0 0 var(--ring) var(--tint-sea); }

/* --- Map facade ----------------------------------------------------------- */
/* Nothing from Google loads until the visitor asks for it. */
.map {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    repeating-linear-gradient(35deg, transparent 0 var(--map-grid-a), var(--tint-brand) var(--map-grid-a) calc(var(--map-grid-a) + var(--border-thick))),
    repeating-linear-gradient(-55deg, transparent 0 var(--map-grid-b), var(--tint-brand) var(--map-grid-b) calc(var(--map-grid-b) + var(--underline))),
    var(--paper-2);
  box-shadow: inset 0 0 0 var(--border) var(--line);
}
.map__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  max-inline-size: 22rem;
  padding: var(--space-md);
  text-align: center;
}
.map__pin { inline-size: 3rem; block-size: 3rem; color: var(--coral-ink); }
.map__note { color: var(--ink-soft); font-size: var(--fs-xs); }
.map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }