/* ============================================================
   CLUB HACHIKO — INLINE MASCOT SYSTEM
   Dogs live in the typography (headings, buttons, lists,
   sign-offs) instead of floating in the background.
   House rules:
   - one inline mascot per screenful
   - headings, buttons, dividers, sign-offs only; never mid-sentence
   - always alt="" (decorative)
   ============================================================ */

/* Core: image scales with surrounding text, sits on the baseline */
.mascot {
  height: 1.25em;
  width: auto;
  vertical-align: -0.28em;
  margin: 0 0.3em 0 0;
  display: inline-block;
}
.mascot--after { margin: 0 0 0 0.35em; }
.mascot--lg { height: 1.6em; vertical-align: -0.45em; }

/* Button tail: mascot rides the CTA, wags on hover */
.btn .mascot,
.cta-btn .mascot {
  height: 1.3em;
  vertical-align: -0.35em;
}
.btn:hover .mascot--after,
.cta-btn:hover .mascot--after {
  animation: mascot-wag 0.5s ease;
}
@keyframes mascot-wag {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-8deg); }
  60% { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover .mascot--after,
  .cta-btn:hover .mascot--after { animation: none; }
}

/* Paw-print bullets (uses existing /paw-doodle.svg) */
ul.paw-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.paw-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
}
ul.paw-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 15px;
  height: 15px;
  background: url("/paw-doodle.svg") no-repeat center / contain;
  opacity: 0.85;
}

/* Article sign-off stamp */
.hachiko-signoff {
  text-align: center;
  margin: 40px 0 8px;
  font-size: 0.875rem;
  color: #8a8aa3;
}
.hachiko-signoff img {
  height: 44px;
  display: block;
  margin: 0 auto 6px;
}

/* Badge icons (icons/badge-*.png) — uniform card icon system */
.badge-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 12px;
}
.card img.badge-icon,
.panel img.badge-icon,
.hero-path img.badge-icon {
  width: 64px;
  height: 64px;
  aspect-ratio: 1/1;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 0;
}
.hero-path img.badge-icon { width: 48px; height: 48px; margin-bottom: 8px; }

/* Multi-line headings: text wraps beside the mascot, not under it */
h1:has(> .mascot), h2:has(> .mascot), h3:has(> .mascot) {
  display: flex;
  align-items: center;
  gap: 0.35em;
}
h1:has(> .mascot) .mascot, h2:has(> .mascot) .mascot, h3:has(> .mascot) .mascot {
  margin: 0;
  flex: 0 0 auto;
}

/* Line-art mascots on solid blue buttons render invisibly — make them white */
.btn-primary .mascot, .nav-cta .mascot {
  filter: brightness(0) invert(1);
}