/* =========================================================================
   GOING BANANAS — client brand layer
   CLIENT-ONLY. Loaded after css/styles.css. Do not move this into css/,
   and never mirror it into Templates/Restaurant: sync-engine.bat copies the
   whole css/ folder, but leaves this file alone because it sits at the root
   of site/ next to index.html.

   Colours measured off the shop itself — the storefront photo and the
   printed board menu: banana yellow, hot magenta trim, board cyan, the
   green base course, and the near-black of the mural outlines.
   ========================================================================= */
:root {
  --gb-yellow:      #FFE135;
  --gb-yellow-soft: #FFF3C4;
  --gb-magenta:     #E4176B;
  --gb-magenta-deep:#B0104A;
  --gb-cyan:        #45CFEF;
  --gb-cyan-soft:   #D8F4FC;
  --gb-teal-deep:   #0E5A6B;
  --gb-green:       #58A87A;
  --gb-ink:         #241E26;

  --radius: 24px;
  --radius-sm: 14px;
}

/* ---- the sticker look, lifted from the bubble-letter logo -------------- */
.btn-wood,
.menu-tabs button[aria-selected="true"] {
  box-shadow: 4px 4px 0 var(--gb-ink);
  border: 2px solid var(--gb-ink);
  font-weight: 700;
}
.btn-wood:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--gb-ink);
}
.btn { transition: transform .12s ease, box-shadow .12s ease, background .2s ease; }
.btn-outline, .btn-ghost { border-width: 2px; font-weight: 700; }

/* ---- candy stripe, the way the board frames its panels ----------------- */
.section { position: relative; }
.section::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--gb-magenta) 0 14px,
    var(--gb-yellow)  14px 28px,
    var(--gb-cyan)    28px 42px
  );
}
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--gb-magenta) 0 14px,
    var(--gb-yellow)  14px 28px,
    var(--gb-cyan)    28px 42px
  );
}

/* ---- section colours: light, loud, alternating ------------------------- */
.today            { background: var(--gb-magenta-deep); color: #fff; }
.today .icon      { color: var(--gb-yellow); }
.today strong     { color: var(--gb-yellow); }

.moments          { background: var(--gb-cyan-soft); }
.menu-section     { background: var(--gb-yellow-soft); }
.gallery-section  { background: #fff; }
.reviews          { background: var(--gb-teal-deep); color: #fff; }
.reserve          { background: var(--gb-yellow-soft); }
.visit            { background: var(--gb-cyan-soft); }
.faq              { background: #fff; }

/* eyebrows and small labels in the shop's pink */
.eyebrow          { color: var(--gb-magenta-deep) !important; letter-spacing: .18em; font-weight: 700; }
.reviews .eyebrow,
.eyebrow-light    { color: var(--gb-yellow) !important; }
.info-list dt     { color: var(--gb-magenta-deep); }
.faq-list summary::after { color: var(--gb-magenta); }

/* ---- the three moment cards: playful, slightly off-square -------------- */
.moment-media {
  border: 3px solid var(--gb-ink);
  box-shadow: 6px 6px 0 rgba(36, 30, 38, .18);
}
.moment:nth-child(1) .moment-media { transform: rotate(-1.4deg); }
.moment:nth-child(2) .moment-media { transform: rotate(1.1deg); }
.moment:nth-child(3) .moment-media { transform: rotate(-0.8deg); }
.moment-media { transition: transform .2s ease; }
.moment:hover .moment-media { transform: rotate(0deg) translateY(-4px); }
.moment-time {
  background: var(--gb-yellow) !important;
  color: var(--gb-ink) !important;
  border: 2px solid var(--gb-ink);
  font-weight: 800;
}

/* ---- menu ------------------------------------------------------------- */
.menu-tabs button {
  border: 2px solid var(--gb-ink);
  font-weight: 700;
  background: #fff;
}
.menu-tabs button:hover { background: var(--gb-yellow); }
.menu-tabs button[aria-selected="true"] {
  background: var(--gb-magenta-deep);
  border-color: var(--gb-ink);
  color: #fff;
}
.menu-group h3 { color: var(--gb-magenta-deep); }
.menu-item { border-bottom: 2px dotted rgba(36, 30, 38, .22); }
.menu-item-price {
  background: var(--gb-magenta-deep); color: #fff;
  font-weight: 700; font-size: 14px;
  padding: 4px 10px; border-radius: 999px;
}
.tag-pop { background: var(--gb-magenta-deep) !important; color: #fff !important; }
.tag-v   { background: var(--gb-green) !important;        color: #fff !important; }

/* ---- reviews on deep teal --------------------------------------------- */
.reviews h2       { color: #fff; }
.rating-card      { border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.rating-card:hover{ background: rgba(255,255,255,.14); border-color: var(--gb-yellow); }
.rating-card .rating-score { color: var(--gb-yellow); }
.mentions li      { border: 2px solid rgba(255,255,255,.3); }

/* ---- gallery tiles get the outline treatment too ---------------------- */
.g { border: 3px solid var(--gb-ink); }

/* ---- forms ------------------------------------------------------------ */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gb-magenta) !important;
  box-shadow: 0 0 0 3px rgba(228, 23, 107, .22) !important;
}

/* ---- sticky mobile bar ------------------------------------------------ */
.action-bar .bar-primary { background: var(--gb-magenta-deep) !important; color: #fff; font-weight: 700; }

/* ---- respect reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .moment:nth-child(1) .moment-media,
  .moment:nth-child(2) .moment-media,
  .moment:nth-child(3) .moment-media,
  .moment:hover .moment-media { transform: none; }
  .btn-wood:hover { transform: none; }
}

/* ---- placeholder tiles in candy colours, not the default beach palette -- */
.tone-1 { background: linear-gradient(150deg, var(--gb-cyan)   0%, #9BE7F7 100%) !important; }
.tone-2 { background: linear-gradient(150deg, var(--gb-yellow)  0%, #FFF3C4 100%) !important; }
.tone-3 { background: linear-gradient(150deg, var(--gb-magenta) 0%, #FF8FB8 100%) !important; }
.tone-4 { background: linear-gradient(150deg, var(--gb-green)   0%, #A7E3C0 100%) !important; }
.tone-5 { background: linear-gradient(150deg, #FF9F1C           0%, var(--gb-yellow) 100%) !important; }
.tone-6 { background: linear-gradient(150deg, #7C5CFF           0%, #C3B4FF 100%) !important; }
.tone-afternoon { background: linear-gradient(160deg, var(--gb-cyan) 0%, #FFF3C4 100%) !important; }
.g .ph, .moment-media .ph { color: rgba(36, 30, 38, .42) !important; }