/* ==========================================================================
   State pages (/alpaca-farm/states/{state}/) — page styles
   --------------------------------------------------------------------------
   The directory accordion itself lives in style.css. This file only adds
   what's specific to state pages: the breadcrumb, the prev/next state
   links, the finder band, and one accessibility patch.
   ========================================================================== */

/* --- Breadcrumb in the eyebrow --- */
.crumb{
  color:inherit;
  text-decoration:none;
}
.crumb:hover{
  color:var(--indigo);
  text-decoration:underline;
}

/* --- Accessibility patch for the accordion ---
   The farm panels now contain real links (websites). The grid-rows
   collapse hides them visually but leaves them in the tab order, so a
   keyboard user would tab through invisible links. visibility fixes
   that; keeping it in the transition list delays the hide until the
   collapse animation finishes, so nothing pops. Candidate for style.css
   proper once you're happy with it. */
.farm-panel{
  visibility:hidden;
  transition:grid-template-rows .32s var(--ease), visibility .32s;
}
.farm.is-open .farm-panel{ visibility:visible; }

/* --- Finder band --- */
.finder-band{ max-width:34rem; }

/* --- Prev / next state --- */
.state-nav{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  margin-top:1.5rem;
}
.state-nav a{
  display:block;
  flex:1;
  max-width:14rem;
  padding:.75rem 1rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:3px solid var(--fleece-beige);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--fleece-bay);
  text-decoration:none;
  transition:border-left-color .2s var(--ease),
             transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.state-nav a:hover{
  border-left-color:var(--indigo);
  transform:translateX(2px);
  box-shadow:var(--shadow-sm);
  color:var(--fleece-bay);
}
.state-nav a.is-next{ text-align:right; }

.state-nav small{
  display:block;
  margin-bottom:.15rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}
.state-nav span{
  font-size:.9375rem;
  font-weight:500;
}