/* Mobile overflow fixes.

   Both issues pre-date the WordPress conversion: the original design overflows
   its viewport by the same amounts at 375px (66px site-wide, 305px on /books/).
   The design marks every responsive element with data-r and collapses it in
   extra.css; these two elements were missed. Same convention, same breakpoint,
   so desktop rendering is untouched. */

@media (max-width: 620px) {

  /* Journey rows: the middle column was a fixed 320px and could not shrink.
     Keep the numbered gutter, put the description under the title. */
  [data-r="journeyrow"] {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: var(--space-4) !important;
  }
  [data-r="journeyrow"] > :last-child {
    grid-column: 2 / -1;
  }

  /* Footer: three tracks whose long link labels forced them wider than the
     viewport. Every other section of the design collapses here; this one had
     no rule. */
  [data-r="footcols"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-6) !important;
  }
}

/* Skip link - WCAG 2.4.1. Positioned off-screen rather than hidden, so it stays
   in the tab order and appears for keyboard users on focus. */
.ilp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 18px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: none;
}
.ilp-skip:focus { left: 8px; top: 8px; }
#ilp-main:focus { outline: none; }

/* Screen-reader-only heading: gives card lists a section heading so the
   document outline has no gaps, without showing anything. */
.ilp-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}