/* Interim ribbon + call CTA for the rehosted Joomla site (2026-09-28).
   Remove both, and this file, with the redesign. Palette is the site's own:
   black #000, header yellow #fef200, red #ff0000, white. Never green/teal.
   The page has NO viewport meta: phones lay it out at ~980px and zoom out,
   so the "phone" breakpoint is the layout viewport (max-width: 1024px) and
   sizes there are ~2.5x what they will appear on a 390px screen. */

/* ---------- Ribbon (pinned to the top; hides on scroll down, returns on scroll up) ----------
   No dismiss control: scrolling down puts it away, scrolling up brings it back
   (the JS toggles .is-hidden). body gets padding-top equal to its height so
   nothing sits underneath it at the top of the page. */
.aj-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9100; /* above the call CTA, below the gallery lightbox */
  background: #000; color: #fef200;
  border-bottom: 3px solid #ff0000;
  font: bold 14px/1.2 Geneva, Tahoma, "Nimbus Sans L", sans-serif;
  letter-spacing: .02em;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  transform: translateY(0);
  transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.aj-ribbon.is-hidden { transform: translateY(-110%); }
body { padding-top: 47px; } /* ribbon height (44 + 3px border) */
.aj-ribbon__inner { max-width: 958px; margin: 0 auto; display: flex; align-items: stretch; min-height: 44px; }
.aj-ribbon__viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.aj-ribbon__track { display: flex; width: max-content; animation: aj-marquee 45s linear infinite; will-change: transform; }
.aj-ribbon__group { display: flex; flex: none; white-space: nowrap; }
.aj-ribbon__item { display: inline-block; position: relative; padding: 0 26px; line-height: 44px; }
.aj-ribbon__item::before { /* red tick separator */
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; background: #ff0000;
}
.aj-ribbon:hover .aj-ribbon__track,
.aj-ribbon:focus-within .aj-ribbon__track { animation-play-state: paused; }
@keyframes aj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .aj-ribbon { transition: none; } /* still hides/shows, just without the slide */
  .aj-ribbon__track { animation: none; width: auto; }
  .aj-ribbon__group[aria-hidden="true"] { display: none; }
  .aj-ribbon__item { white-space: normal; padding-left: 12px; }
  .aj-ribbon__item::before { display: none; }
  .aj-ribbon__item + .aj-ribbon__item { display: none; } /* static: the announcement line only */
}

/* ---------- Call CTA ---------- */
/* Look: the nav bar's black + yellow, RuneScape "flash1:" red/yellow text.
   Motion budget (persistent element): ONE flash burst on load — 3 cycles at the
   game's 0.6s tick (1.2s per red/yellow cycle, well under the WCAG 3-flashes/s
   limit on a small area) — then it settles to yellow; after that only a faint
   ring every 8s. The puppy tilts its head during the burst. Reduced motion:
   static yellow text, no burst, no ring. */
body { padding-bottom: 80px; } /* the pill must never cover the footer's last line */
.aj-call {
  position: fixed; right: 16px; bottom: 16px; z-index: 9000; /* above menus (<=1000), below the gallery lightbox (10100) */
  display: inline-flex; align-items: center; box-sizing: border-box;
  min-height: 52px; padding: 8px 20px 8px 12px;
  background: #000; color: #fef200; border: 2px solid #fef200; border-radius: 999px;
  font: bold 17px/1.2 Helvetica, Arial, FreeSans, sans-serif; white-space: nowrap;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.35);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  transition: background-color .15s ease, color .15s ease;
}
.aj-call__label { animation: aj-flash 1.2s steps(1, end) 3; } /* RuneScape flash1: yellow ↔ red, 3 cycles, then base yellow */
@keyframes aj-flash { 0%, 49.99% { color: #fef200; } 50%, 100% { color: #ff0000; } }
.aj-call::after { /* faint reminder ring, opacity only */
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid #fef200; opacity: 0; pointer-events: none;
  animation: aj-ring 8s linear 4s infinite;
}
@keyframes aj-ring { 0% { opacity: 0; } 6% { opacity: .55; } 14% { opacity: 0; } 100% { opacity: 0; } }
.aj-call:focus { background: #fef200; color: #000; text-decoration: none; }
.aj-call:focus-visible { outline: 3px solid #fef200; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .aj-call:hover { background: #fef200; color: #000; text-decoration: none; }
  .aj-call:hover .aj-call__label { animation: none; color: inherit; }
}
.aj-call__pup { width: 34px; height: 34px; flex: none; margin-right: 10px; transform-origin: 50% 80%; animation: aj-tilt 1.2s ease-in-out 3; }
@keyframes aj-tilt { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
/* Head wiggle on hover (fine pointers only), keyboard focus, and press/tap.
   A tap on the bar also opens the dialer; the wiggle plays during the press. */
@keyframes aj-wiggle { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-8deg); } 85% { transform: rotate(5deg); } }
.aj-call:active .aj-call__pup, .aj-call:focus-visible .aj-call__pup { animation: aj-wiggle .7s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .aj-call:hover .aj-call__pup { animation: aj-wiggle .7s ease-in-out; } }

@media (prefers-reduced-motion: reduce) {
  .aj-call__label, .aj-call__pup, .aj-call::after, .aj-call:hover .aj-call__pup, .aj-call:active .aj-call__pup, .aj-call:focus-visible .aj-call__pup { animation: none; }
  .aj-call { transition: none; }
}

/* Footer Privacy link (template: #bottom a {color:#000}, a {text-decoration:none}) */
#bottom a { text-decoration: underline; }

/* ---------- "Phone": no viewport meta => layout viewport ~980px on phones/tablets ---------- */
@media (max-width: 1024px) {
  body { padding-bottom: 112px; padding-top: 91px; } /* = bar height / ribbon height (88 + 3) */
  .aj-ribbon { font-size: 34px; }
  .aj-ribbon__inner { min-height: 88px; }
  .aj-ribbon__item { padding: 0 44px; line-height: 88px; }
  .aj-ribbon__item::before { width: 6px; height: 36px; margin-top: -18px; }

  .aj-call {
    left: 0; right: 0; bottom: 0; width: 100%;
    justify-content: center; min-height: 112px; padding: 0 24px;
    border-width: 4px 0 0 0; border-radius: 0;
    font-size: 44px; box-shadow: 0 -4px 16px rgba(0,0,0,.3);
  }
  .aj-call::after { display: none; } /* no ring on the full-width bar */
  .aj-call__pup { width: 84px; height: 84px; margin-right: 24px; }
}

/* ---------- "Shop" nav tab (non-clickable) with a "Coming soon" starburst sticker ----------
   Uses the template's .separator styling so it matches the real tabs. The sticker
   mirrors the banner's "30 Years" starburst (yellow, black outline, red text).
   Flash1 (RuneScape): the star and its text swap red/yellow continuously at the
   game's 0.6s tick (0.83 flashes/s, a small area — well under the WCAG 3/s limit).
   Reduced motion: static. */
#horiz-menu li.aj-shop { position: relative; }
#horiz-menu li.aj-shop .separator { cursor: default; }
.menustyle1 #horiz-menu li.aj-shop:hover { background-color: transparent; }
.menustyle1 #horiz-menu li.aj-shop:hover .separator { background: none; color: #fff; }
.aj-shop__badge {
  position: absolute; right: -16px; top: -12px; width: 60px; height: 48px; z-index: 300; /* off the tab's right edge, clear of the word */
  pointer-events: none; background: #000;
  clip-path: polygon(50.0% 0.0%, 59.6% 14.3%, 75.0% 6.7%, 76.2% 23.8%, 93.3% 25.0%, 85.7% 40.4%, 100.0% 50.0%, 85.7% 59.6%, 93.3% 75.0%, 76.2% 76.2%, 75.0% 93.3%, 59.6% 85.7%, 50.0% 100.0%, 40.4% 85.7%, 25.0% 93.3%, 23.8% 76.2%, 6.7% 75.0%, 14.3% 59.6%, 0.0% 50.0%, 14.3% 40.4%, 6.7% 25.0%, 23.8% 23.8%, 25.0% 6.7%, 40.4% 14.3%);
  display: flex; align-items: center; justify-content: center;
}
.aj-shop__badge::before {
  content: ""; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; background: #fef200;
  clip-path: polygon(50.0% 0.0%, 59.6% 14.3%, 75.0% 6.7%, 76.2% 23.8%, 93.3% 25.0%, 85.7% 40.4%, 100.0% 50.0%, 85.7% 59.6%, 93.3% 75.0%, 76.2% 76.2%, 75.0% 93.3%, 59.6% 85.7%, 50.0% 100.0%, 40.4% 85.7%, 25.0% 93.3%, 23.8% 76.2%, 6.7% 75.0%, 14.3% 59.6%, 0.0% 50.0%, 14.3% 40.4%, 6.7% 25.0%, 23.8% 23.8%, 25.0% 6.7%, 40.4% 14.3%);
  animation: aj-star-bg 1.2s steps(1, end) infinite;
}
.aj-shop__badge-text {
  position: relative; color: #ff0000; text-align: center; text-transform: uppercase;
  font: bold 9px/1.05 Helvetica, Arial, sans-serif; letter-spacing: .02em;
  transform: rotate(-12deg);
  animation: aj-star-ink 1.2s steps(1, end) infinite;
}
@keyframes aj-star-bg { 0%, 49.99% { background: #fef200; } 50%, 100% { background: #ff0000; } }
@keyframes aj-star-ink { 0%, 49.99% { color: #ff0000; } 50%, 100% { color: #fef200; } }
@media (prefers-reduced-motion: reduce) {
  .aj-shop__badge::before, .aj-shop__badge-text { animation: none; }
}
@media (max-width: 1024px) {
  /* phones show the 958px layout zoomed out (~0.4x), so keep the sticker big here */
  .aj-shop__badge { width: 104px; height: 84px; top: -24px; right: -34px; }
  .aj-shop__badge-text { font-size: 15px; }
}

/* Five tabs (with "Request an Appointment") do not fit at the template's 60px tab
   padding — the nav wrapped to two rows and broke the float layout below it. */
#horiz-menu ul.menutop.aj-five a, #horiz-menu ul.menutop.aj-five .separator { padding: 0 30px; }
#horiz-menu ul.menutop.aj-five .aj-shop__badge { right: -30px; } /* the tighter tab needs the sticker further out */

/* ---------- Header social tiles (Facebook · Yelp · Google · Nextdoor) ----------
   Replaces the lone Facebook PNG: black tiles with yellow glyphs on the yellow
   header. Brand glyphs are Simple Icons (CC0). Add Instagram / TikTok tiles here
   once the shop's handles exist. */
.aj-social { float: left; margin: 2px 14px 0 0; display: flex; gap: 8px; }
.aj-social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: #000; border-radius: 9px; border: 2px solid #000; }
.aj-social a:hover, .aj-social a:focus-visible { background: #fef200; border-color: #000; }
.aj-social a:focus-visible { outline: 3px solid #ff0000; outline-offset: 2px; }
.aj-social svg { width: 24px; height: 24px; fill: #fef200; }
.aj-social a:hover svg, .aj-social a:focus-visible svg { fill: #000; }
@media (max-width: 1024px) {
  .aj-social { gap: 10px; }
  .aj-social a { width: 56px; height: 56px; border-radius: 12px; }
  .aj-social svg { width: 34px; height: 34px; }
}
.aj-social a[aria-label*="Nextdoor"] svg { width: 34px; } /* the Nextdoor mark is a wordmark; give it room */