/* =========================================================
   Shared styles for the three Hebrew content pages under
   /landing/: training/, puppy-guide/, emergency-vet/.
   Tokens + shared components come from vupo-theme.css; this
   file holds only what those three pages have in common.

   ⚠️ No .reveal / .rise here on purpose: these pages exist to be
   found in search, and a crawler (or a no-JS reader) must see every
   word at rest — see the blog SSR lesson in functions/blogRender.js.
   ========================================================= */

/* The [hidden] attribute must win over Tailwind display utilities: a filtered
   centre card is display:flex, and .flex (0,1,0) comes after preflight's [hidden]
   (also 0,1,0), so without this the region filter would hide nothing. */
[hidden] { display: none !important; }

h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* keyboard focus — the theme never defined one */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgb(var(--secondary-rgb));
  outline-offset: 3px;
  border-radius: .75rem;
}

/* 🐾 pointer back into the app — same look as the blog's blockquote.vupo-note */
.vupo-note {
  border-inline-start: 4px solid var(--primary);
  background: #EDFBEB;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}

/* <details> accordions: native, keyboard-accessible, work without JS */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.chev { transition: transform .25s ease; }
details[open] .chev { transform: rotate(180deg); }

/* vertical age timeline (puppy guide) — the rail sits behind the badges */
.timeline { position: relative; }
.timeline::before {
  content: ''; position: absolute;
  inset-inline-start: 31px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(var(--primary), var(--accent));
}

/* anchor targets clear the sticky header */
[id] { scroll-margin-top: 6rem; }

/* the section a site-search result jumped to (landing/site-search.js adds the
   class, then removes it) — a short glow so the eye finds where it landed */
@keyframes search-target-glow {
  0%, 60% { box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / .45); }
  100%    { box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0); }
}
.search-target { border-radius: 1rem; animation: search-target-glow 2.4s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .chev, .btn-cta, .pillar-card { transition: none !important; }
  .search-target { animation: none; outline: 3px solid rgb(var(--primary-rgb) / .6); outline-offset: 4px; }
}