/* Our Dogs page (/our-dogs/) — empty-filter state: the site's mascot pup
   (same character that peeks over the nav line, drawn in site.js) jogging
   in place. Inline SVG in page-our-dogs.php, animated here with plain CSS —
   no libraries. Shown when a status filter matches no dogs, or when there
   are no public dogs at all. */

.dogs-empty { text-align: center; padding: 44px 20px 8px; }
.dogs-empty[hidden] { display: none; }
.dogs-empty .de-dog { width: 240px; height: auto; }
.de-title,
.de-sub {
  /* crayon.css caps p at 62ch (left-anchored), which drags these off the
     SVG's centre line — let them span the row so everything centres together */
  max-width: none;
}
.de-title {
  margin: 8px 0 2px;
  font-weight: 800; font-size: 21px; color: var(--ink);
}
.de-sub {
  margin: 0;
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 24px; color: var(--red);
}
.de-sub span { display: inline-block; transform: rotate(-2deg); }

/* Run cycle: diagonal leg pairs alternate (phase-a vs phase-b, half a
   cycle apart); the whole dog bounces once per footfall, ears and tail
   flop along, the tongue lolls, and the dashes behind sell the "running"
   without the pup going anywhere. */
.de-bounce { animation: de-bounce .24s ease-in-out infinite; }
.de-leg {
  transform-box: fill-box; transform-origin: 50% 6%;
  animation: de-run .48s ease-in-out infinite;
}
.de-phase-b { animation-delay: -.24s; }
.de-head {
  transform-box: fill-box; transform-origin: 50% 88%;
  animation: de-nod .48s ease-in-out infinite;
}
.de-ear-l {
  transform-box: fill-box; transform-origin: 85% 12%;
  animation: de-ear-l .48s ease-in-out infinite;
}
.de-ear-r {
  transform-box: fill-box; transform-origin: 15% 12%;
  animation: de-ear-r .48s ease-in-out infinite;
}
.de-tongue {
  transform-box: fill-box; transform-origin: 40% 8%;
  animation: de-tongue .48s ease-in-out infinite;
}
.de-tail {
  transform-box: fill-box; transform-origin: 85% 90%;
  animation: de-tail .3s ease-in-out infinite;
}
.de-dash { animation: de-dash .5s linear infinite; opacity: 0; }
.de-dash-2 { animation-delay: .17s; }
.de-dash-3 { animation-delay: .34s; }

@keyframes de-run { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-26deg); } }
@keyframes de-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
@keyframes de-nod { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
@keyframes de-ear-l { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(9deg); } }
@keyframes de-ear-r { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-9deg); } }
@keyframes de-tongue { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } }
@keyframes de-tail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(7deg); } }
@keyframes de-dash {
  0% { transform: translateX(6px); opacity: 0; }
  30% { opacity: .5; }
  100% { transform: translateX(-16px); opacity: 0; }
}

/* Respect visitors who've asked their device for less motion. */
@media (prefers-reduced-motion: reduce) {
  .dogs-empty svg * { animation: none !important; }
}

/* =====================================================================
   Facebook nudge — the permanent last item in the grid. New arrivals are
   posted on the Facebook page first, so the "seen them all" moment points
   people there.

   It used to be a full dog card in brand blue, which made the loudest thing
   on a page about dogs a link to somewhere else (Shadie's call, July 2026).
   Now it is one outlined roundel, a handwritten line and a text link,
   centred in the last slot: a full stop after the pack rather than another
   card competing with it. No frame, no fill, no shadow at rest — the hard
   shadow only appears on hover, the way the rest of the site behaves.
   ===================================================================== */
.fb-quiet {
  align-self: center; justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 18px 10px; text-align: center;
  text-decoration: none; color: var(--ink);
}
/* The filter script hides this when a category has no dogs, so the running dog
   stands alone. Needed explicitly: the display above would otherwise beat the
   browser's own [hidden] rule and the roundel would stay on screen. */
.fb-quiet[hidden] { display: none; }
/* The roundel is drawn by rdr_fb_mark('ink'), so the shadow has to follow the
   circle's edge rather than the element box: drop-shadow, not box-shadow. */
.fb-quiet .fb-mark {
  width: 88px; height: 88px; display: block;
  transition: transform .15s, filter .15s;
}
.fb-quiet:hover .fb-mark { transform: translate(-2px,-2px); filter: drop-shadow(5px 5px 0 var(--ink)); }
.fb-quiet:active .fb-mark { transform: translate(2px,2px); filter: drop-shadow(0 0 0 var(--ink)); }
.fb-quiet .fq-note {
  font-size: 23px; line-height: 1.1; color: var(--blue);
  transform: rotate(-2deg); max-width: 22ch;
}
.fb-quiet .fq-link {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px;
  border-bottom: 2.5px solid var(--yellow); padding-bottom: 2px;
  transition: border-color .15s;
}
.fb-quiet:hover .fq-link { border-bottom-color: var(--ink); }
.fb-quiet:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 18px; }
/* One column: it sits under the last dog card with the grid gap above it,
   so it needs less padding of its own. */
@media (max-width: 600px) {
  .fb-quiet { padding: 6px 10px 0; }
}