/* Public-page refinements to the copied WordPress theme (corkins.css stays verbatim) */

/* Filter bar (Directory, Books): the chevron keeps clear of the label, and the label never wraps */
.filters-wrapper { container-type: inline-size; }
.btn-filter-toggle { padding-right: 2.6rem; white-space: nowrap; }
/* Where the column is too narrow for the label at full tracking, tighten it instead of crossing the chevron */
@container (max-width: 15.9rem) { .btn-filter-toggle { letter-spacing: 0.1rem; } }
@media (min-width: 64em) {
  /* Give each list column the room its label needs; at wide windows 25% is already more */
  .page-filters > .row > div:has(> .filters-wrapper) { flex: 0 0 auto; max-width: none; width: max(25%, 16rem); }
  .page-filters > .row > div:has(> .filters-wrapper) ~ div:last-child { flex: 1 1 0; max-width: none; margin-left: 0; }
}

/* Keyboard focus: a 2px black ring, only when the keyboard is driving; it reads on photos and on pink */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
a:focus:not(:focus-visible) { outline: 0; }
/* A field you type in shows it is active by its caret; no box around it (Kate, 2026-10-08) */
input:not([type=submit], [type=button], [type=checkbox], [type=radio], [type=file]):focus-visible, textarea:focus-visible { outline: 0; }
/* An option in an open filter list sits inside a clipped box: draw its ring inside the option so no side is shaved */
.btn-filter:focus-visible { outline-offset: -6px; }
/* The chosen option, order and display icons say so by more than colour */
.btn-filter.active { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
.view-filter.active { box-shadow: 0 6px 0 -1px #000; }

/* Our Story: whatever photo is uploaded fits the frame instead of stretching */
.page-hero:not(.surprise-hero) .hero-wrapper img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.content-blocks .container-image img { width: 100%; height: auto; aspect-ratio: 2880 / 1752; object-fit: cover; }