/* ============================================================================
   MRCL MAKE — design-system overlay.
   Applies the MAKE design language (extracted from the Beiersdorf MAKE system:
   geometric display + animated gradient-typography signature) over the shared
   pp-magnum tokens, re-themed to the TMICC / Magnum palette. Load AFTER
   response/pp-magnum-tokens.css so it wins the cascade.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* MAKE uses a geometric display face (Volte). Space Grotesk is the closest
     freely-available stand-in; swap to Volte when licensed. This replaces the
     serif display across the page for a true MAKE-system look. */
  --mag-serif: "Space Grotesk", "DM Sans", system-ui, sans-serif;

  /* MRCL MAKE / TMICC take on MAKE's animated cyan→magenta gradient: a molten
     gold→copper that stays legible on both the light canvas and the dark hero
     cards. */
  --mrcl-grad: linear-gradient(103deg, #ffe9b8 2%, #e6bd5f 32%, #d98a4e 68%, #c8894a 100%);
}

.mrcl-make-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

.mrcl-make-plaque img {
  display: block;
  width: 100%;
  height: auto;
}

/* geometric display wants a touch more weight + tighter tracking than serif */
.tab-hero-title { font-weight: 500; letter-spacing: -0.02em; }

/* ── MAKE signature: animated gradient-typography on the hero wordmark ── */
.tab-hero-title {
  background: var(--mrcl-grad);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mrclShimmer 7s linear infinite;
}
@keyframes mrclShimmer { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { .tab-hero-title { animation: none; } }

/* ============================================================================
   Mobile fixes — nav tab overflow + toolbar cramming (shared by Occasionist,
   Food Checker and any page using .nav-row / .tab-nav / .pill-btn).
   ========================================================================== */
.pill-btn { white-space: nowrap; }
.tab-link { white-space: nowrap; }

@media (max-width: 680px) {
  .nav-row { gap: 12px; row-gap: 12px; padding-left: 16px; padding-right: 16px; }
  /* tab bar becomes a full-width horizontal scroller so every tab is reachable */
  .tab-nav { flex: 1 0 100%; overflow-x: auto; flex-wrap: nowrap; gap: 18px; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-link { flex: 0 0 auto; }
  /* action pills wrap onto their own full-width row, each pill hugging its text */
  .nav-right { flex: 1 0 100%; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .nav-right .pill-btn { flex: 0 0 auto; }
  .asof { text-align: left; }
  .chat-fab { transform: scale(0.88); transform-origin: bottom right; }
}