/* Ours, not the theme's — loaded last so a fresh copy of the theme's CSS can be
   dropped in over it without losing anything we have written. Same arrangement
   as /members/css/csear-portal-overrides.css. */

/* The template's root layout stamps Tailwind utility names on <body>:
   `min-h-full flex flex-col font-inter`. Tailwind itself is deliberately not
   loaded on this surface, so those normally do nothing — but the theme's own
   style.css happens to define a `.flex` class of its own:

       .flex { display: flex; flex-direction: row; flex-wrap: wrap; }

   which turned <body> into a wrapping ROW. The black header bar shrank to its
   content width, the logo clipped, and every section below it laid out as a
   flex item rather than a block. `flex-col` does not undo it — Tailwind's class
   is not defined here, so the direction stays `row`.

   Named with the class so the intent is legible in devtools, and so it beats
   the theme's single-class rule on specificity without !important. */
body.flex {
  display: block;
}

/* Conference cards on the events archive.
   .image_event is a fixed 441px flex panel that the theme centres a small logo
   in — the ACF `image_conference` graphic, not a poster. What the conferences
   table has is the members-area flyer, which is 1198x1600, so unconstrained it
   burst out of the panel and covered the page heading. Scaled to fit instead,
   until the website's own conference image field exists (STAGE-2-PLAN §4). */
.event-conference-row .image_event > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Homepage "Latest from the journal" card images.
   functions.php:57 registers add_image_size('front-size', 358, 405, true) and
   front-page.php asks WordPress for that size, so the theme can afford
   `.front-latest-journal .post_frame .image { height: auto }` (style.css:3102)
   — the file it is handed is already cropped. We serve the original out of
   Supabase Storage, so the crop has to happen here instead, or a portrait
   original makes the card 160px taller than the live one. */
.front-latest-journal .post_frame .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 358 / 405;
  object-fit: cover;
}

/* ── Skip link (WCAG 2.4.1 Bypass Blocks, Level A) ──────────────────────────
   Hidden until it takes keyboard focus, then it appears top-left above
   everything. Not display:none and not visibility:hidden — both remove an
   element from the focus order, which would make the link unreachable by the
   only people who need it. Clipped to a 1px box instead, the standard
   visually-hidden pattern.

   The header is fixed on this theme, so the z-index has to beat it or the link
   appears behind the navigation it exists to bypass. */
.vh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #ffffff;
  color: #111111;
  font-weight: 700;
  text-decoration: underline;
  border: 2px solid #111111;
  border-radius: 0 0 4px 0;
}
.vh-skip-link:focus,
.vh-skip-link:focus-visible {
  left: 0;
}

/* The skip target takes focus programmatically; it is not an interactive
   control, so the focus ring would be noise. Removing it is safe ONLY because
   the element is reached by the skip link rather than by tabbing. */
#main-content:focus {
  outline: none;
}