/* ==========================================================================
   Deltas between the prototype's CSS and this site's markup.

   tokens.css, layout.css and modules.css are the prototype's own sheets, kept
   as they were so the two stay comparable. Anything that had to change because
   pages are served rather than switched belongs here, where it can be seen.
   ========================================================================== */

/* The prototype's .nextup-row and .cal-ev were buttons and divs that swapped
   the visible page; here they are links to the event's own URL. Same boxes,
   without the anchor defaults. */
a.nextup-row,
a.cal-ev {
  text-decoration: none;
  color: inherit;
}

a.nextup-row:hover,
a.cal-ev:hover {
  text-decoration: none;
}

/* A gallery tile is a real button now rather than a div with a click handler,
   so the button defaults have to come off. */
button.tile {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* The nav says where you are. The prototype set this from its router; the
   server sets it from the route, as aria-current="page" (styled in layout.css)
   so a screen reader is told as well as a sighted visitor. */

/* Review: the prototype's info-card labels were small muted caps, lighter than
   the values under them, so the card read value-first. Now the card's name,
   then each label, then its value. */
.info-card h3 { font-size: 1.2rem; }
.info-card dt {
  font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--contrast);
}

/* Review: the accessibility page ran down the left with nothing beside it.
   Each document now has a side card with the site's contact details and a
   list of its sections. */
.access-card { grid-column: 2; grid-row: 1; }
.access-card + .def { grid-column: 1; grid-row: 1; }
.access-card nav { border-top: 1px solid var(--hair); padding-top: .8rem; }
.access-card--label {
  margin: 0 0 .4rem; font-size: .95rem; font-weight: 600; color: var(--contrast);
}
.access-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.access-card li a { font-size: .92rem; color: var(--accent-text); }
@media (max-width: 62rem) {
  .access-card, .access-card + .def { position: static; grid-column: auto; grid-row: auto; }
}

/* Review: the lists of benefits and of what is on at the gala were marked with
   check marks. They are marked now with a short bar, the one beside the
   section sub-headings. It sits against the first line, since a membership
   benefit can run to two. On the home page's navy band it takes the band's
   yellow, as the check marks did. */
.ticks li { align-items: flex-start; }
.ticks li::before {
  content: ""; flex: none; width: 2px; height: 1.1em; margin-top: .2em;
  background: var(--color-6);
  border-top-left-radius: .3rem; border-bottom-right-radius: .3rem;
}
.band .ticks li::before { background: var(--gal-accent); }

/* Review: the panels on the photograph bands were hard to read. Their 45% navy
   already passed on contrast (layout.css works the worst case), but the
   photograph's detail came through behind the small type. 80% navy and a
   blur leave the photograph as color and shape behind the panel rather than
   as edges under the text. Where backdrop-filter is not supported the 80%
   tint does the job alone. */
.visit-panel {
  background: rgba(var(--gal-rgb), .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Review: the page heroes were as tall as their text, so they ran from 199px
   to 393px across the site. Every page hero is one height now, with its text
   set from the top as the farm's is, so the breadcrumb and title land in the
   same place page to page.
   20rem holds the fullest of them (the farm's: address, title and a line of
   introduction); the two paragraph-long introductions moved into their pages.
   On a phone the text wraps differently page to page, so the height there is
   a floor rather than a match. The home hero and the home page's feature
   bands keep their own sizes. */
.band:not(.hero):not(.feature) {
  min-height: 20rem;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.band:not(.hero):not(.feature) > .in { width: 100%; }
@media (max-width: 54rem) {
  .band:not(.hero):not(.feature) { min-height: 15rem; }
}

/* Accessibility audit, WCAG 2.4.11 Focus Not Obscured: the nav is sticky, so
   anything the browser scrolls to - a focused control on Shift+Tab, or an
   in-page anchor - has to stop below it rather than under it. */
html { scroll-padding-top: 5.5rem; }

/* WCAG 2.5.8 Target Size: the footer's phone and email links sit a line apart,
   19px tall and 23px centre to centre. The padding makes each a 24px target
   without moving the text. */
.footer-brand p a { display: inline-block; padding: .2rem 0; }

/* ==========================================================================
   WCAG 3 (Working Draft, 10 September 2026)
   ========================================================================== */

/* Text style readable: nothing on the site set smaller than 12px. The date
   boxes, the calendar's weekday row and its entries, the kickers and the
   staff table's head ran from 9.9px to 11.8px, most of it in capitals. */
.nextup-date .m, .nextup-date .w { font-size: .75rem; }
.cal-dow, .cal-ev, table.staff th { font-size: .75rem; }
.kicker { font-size: .78rem; }
.visit-panel h2, .visit-panel .panel-h { font-size: .8rem; }

/* Interactive element contrast sufficient: the outlined buttons' and the
   social links' rings were 2.82:1 on white, 1.95:1 on the navy band and
   2.7:1 on the footer. These are 3.77:1, 4.68:1 and 4.34:1. */
.secondary-button { border-color: color-mix(in srgb, var(--blue-9) 55%, transparent); }
.band .secondary-button, .gal .secondary-button {
  border-color: color-mix(in srgb, var(--blue-1) 50%, transparent);
}
.social-media a { border-color: rgba(var(--light-rgb), .45); }

/* Custom keys documented: the lightbox says how its keys work. */
.lb-hint { margin: .5rem 0 0; font-size: .8rem; color: var(--gal-ink-3); text-align: center; }

/* Review: the sub-headings with the blue bar ("Mission", "Get Involved", the
   accessibility sections) were weak - weight 200 at 1rem, lighter and smaller
   than the paragraph under them. They are semi-bold and a size up now. The home
   page's two-column version keeps its own 1.5rem, and takes the same weight. */
h3.rule-h { font-size: 1.25rem; }
.rule-h, .def-2 h3.rule-h { font-weight: 600; }

/* Text color adjustable without loss (forced colors, Windows High Contrast).
   The system palette drops the band's scrim but not its photograph, which
   left titles on a bright picture held up only by the browser's backplate;
   with the system's own colors in force the photograph goes too. The list
   bars are backgrounds, which forced colors empties; they take the text
   color instead so the lists keep their markers. */
@media (forced-colors: active) {
  .band { background-image: none; }
  .ticks li::before { forced-color-adjust: none; background: CanvasText; }
}