/* ============================================================
   Restaurant Menu Plugin — Frontend CSS
   ============================================================ */

:root {
  --rtm-accent:  #e63329;
  --rtm-white:   #ffffff;
  --rtm-dark:    #111111;
  --rtm-text:    #2d2d2d;
  --rtm-muted:   #888888;
  --rtm-border:  #e2dbd2;
  --rtm-bg:      #f7f3ee;
}

/* ── Full-bleed wrapper ──────────────────────────────────────
   Breaks out of any theme container.
   If the theme has overflow-x:hidden on body/html, add:
     body { overflow-x: clip; }
   in your theme's CSS.
────────────────────────────────────────────────────────────── */
.rtm-menu {
  width:    100vw;
  position: relative;
  left:     50%;
  right:    50%;
  margin-left:  -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

/* ── Legend ─────────────────────────────────────────────────── */
.rtm-legend {
  display:     flex;
  flex-wrap:   wrap;
  gap:         14px;
  padding:     14px 32px;
  font-size:   13px;
  color:       var(--rtm-muted);
  background:  var(--rtm-white);
  border-bottom: 1px solid var(--rtm-border);
}
.rtm-legend-item { display: flex; align-items: center; gap: 5px; }

/* ── Dietary badges ─────────────────────────────────────────── */
.rtm-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:  22px; height: 22px;
  border-radius: 50%;
  font-size:   10px;
  font-weight: 800;
  color: #fff;
  vertical-align: middle;
  flex-shrink: 0;
}
.rtm-badge--v  { background: #43a047; }
.rtm-badge--vg { background: #7cb342; }
.rtm-badge--gf { background: #f57c00; }
.rtm-badge--h  { background: #00897b; }
.rtm-badge--sp { background: transparent; font-size: 15px; width: auto; height: auto; }

/* ── Category grid ───────────────────────────────────────────
   --rtm-cols is set via inline style by PHP (min of cat count, 4)
   and overridden to 1 on mobile via media query below.
────────────────────────────────────────────────────────────── */
.rtm-grid {
  display: grid;
  grid-template-columns: repeat(var(--rtm-cols, 3), 1fr);
  gap: 3px;
  background: #0a0a0a;
  /* No max-width — always fills 100vw */
}

/* ── Category tile ───────────────────────────────────────────
   .rtm-cat-tile is just a grid cell wrapper.
   .rtm-tile-btn is the actual clickable image area.
────────────────────────────────────────────────────────────── */
.rtm-cat-tile {
  position: relative;
  /* Height driven by the button below */
}

.rtm-tile-btn {
  /* Block-level, fills grid cell width */
  display:  block;
  width:    100%;
  /* Explicit height — 65vh is tall and dramatic */
  height:   65vh;
  min-height: 300px;
  /* Reset button styles */
  border:   none;
  padding:  0;
  margin:   0;
  cursor:   pointer;
  /* Clip the image zoom effect */
  overflow: hidden;
  /* Dark fallback while image loads */
  background: #1a1a1a;
  outline: none;
  /* Relative so absolutely-positioned children work */
  position: relative;
}

.rtm-tile-btn:focus-visible {
  outline: 3px solid var(--rtm-accent);
  outline-offset: -3px;
}

/* The actual photo — fills the button completely */
.rtm-tile-img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width:  100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slight desaturation and dim by default */
  filter: brightness(0.68) saturate(0.85);
  transition: transform 0.5s ease, filter 0.4s ease;
}

/* Brighten + zoom on hover, and when open */
.rtm-tile-btn:hover .rtm-tile-img,
.rtm-cat-tile.rtm-open .rtm-tile-btn .rtm-tile-img {
  transform: scale(1.05);
  filter: brightness(0.48) saturate(0.75);
}

/* Gradient overlay for text legibility */
.rtm-tile-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Placeholder when no image is set */
.rtm-tile-placeholder {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #1e1e1e 0%, #3a3a3a 100%);
}

/* Category name label */
.rtm-tile-label {
  position: absolute;
  bottom: 24px;
  left:   18px;
  /* Red pill background */
  background:   var(--rtm-accent);
  color:        #fff;
  font-family:  Impact, 'Arial Black', 'Haettenschweiler', sans-serif;
  font-size:    clamp(18px, 2.8vw, 38px);
  font-weight:  900;
  letter-spacing: 0.05em;
  line-height:  1;
  padding:      7px 16px 9px;
  text-transform: uppercase;
  /* Don't overflow the tile */
  max-width: calc(100% - 36px);
  /* Sit above the overlay */
  z-index: 2;
  pointer-events: none;
}

/* Down-arrow indicator when panel is open */
.rtm-cat-tile.rtm-open .rtm-tile-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left:   50%;
  transform: translateX(-50%);
  border-left:   16px solid transparent;
  border-right:  16px solid transparent;
  border-bottom: 16px solid var(--rtm-white);
  z-index: 3;
}

/* ── Expanded item panel ─────────────────────────────────────
   grid-column: 1 / -1  makes it span all columns.
   Set by JS when inserting after the row.
────────────────────────────────────────────────────────────── */
.rtm-tile-panel {
  grid-column: 1 / -1;
  background: var(--rtm-white);
  border-top: 4px solid var(--rtm-accent);
  padding: 36px 48px 44px;
  animation: rtm-panel-in 0.22s ease;
}
.rtm-tile-panel[hidden] { display: none; }

@keyframes rtm-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Item list inside panel ─────────────────────────────────── */
.rtm-item-list {
  list-style: none;
  margin:  0 auto;
  padding: 0;
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  column-gap: 48px;
  row-gap: 0;
}

.rtm-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rtm-border);
}
.rtm-item:last-child { border-bottom: none; }

.rtm-item-img {
  flex: 0 0 72px;
  width:  72px;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--rtm-bg);
}
.rtm-item-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.rtm-item-body  { flex: 1; min-width: 0; }
.rtm-item-top   { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }

.rtm-item-title {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size:   15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:  var(--rtm-dark);
  margin: 0;
  line-height: 1.2;
}
.rtm-item-badges { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.rtm-item-desc   { font-size: 13px; color: var(--rtm-muted); margin: 5px 0; line-height: 1.55; }
.rtm-item-price  {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size:   14px; font-weight: 700;
  color:       var(--rtm-accent);
  letter-spacing: 0.04em;
  display: block; margin-top: 2px;
}

.rtm-empty-items { color: var(--rtm-muted); font-style: italic; font-size: 14px; margin: 0; }
.rtm-error { color: #c0392b; background: #fdf2f2; border-left: 3px solid #c0392b; padding: 10px 14px; font-size: 13px; }

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet: max 2 columns */
@media (max-width: 900px) {
  .rtm-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rtm-tile-btn { height: 45vw; min-height: 220px; }
  .rtm-tile-label { font-size: clamp(16px, 4vw, 28px); bottom: 16px; left: 14px; }
  .rtm-tile-panel { padding: 24px 28px 32px; }
  .rtm-item-list  { column-gap: 32px; }
}

/* Mobile: always 1 column, taller tiles */
@media (max-width: 560px) {
  .rtm-grid {
    grid-template-columns: 1fr !important;
    gap: 2px;
  }
  .rtm-tile-btn { height: 60vw; min-height: 200px; }
  .rtm-tile-label { font-size: clamp(20px, 7vw, 32px); bottom: 14px; left: 12px; padding: 5px 12px 7px; }
  .rtm-tile-panel { padding: 20px 16px 28px; }
  .rtm-item-list  { grid-template-columns: 1fr; column-gap: 0; }
  .rtm-legend     { padding: 10px 16px; gap: 10px; }
}