/**
 * Revisions stylesheet — 2026-08-25 client revision round.
 *
 * Kept separate from css/style.css on purpose: that file is a minified build
 * artifact with no source in the repo, so it cannot be edited safely by hand.
 * This file is hand-written, loaded via wp_enqueue_style() in functions.php.
 */

/* ---------------------------------------------------------------------------
 * Centered media inside a blog text block.
 *
 * The editor emits WordPress's standard alignment classes (32 rich-text blocks
 * already use `aligncenter`), but style.css has no rules for them at all, so
 * those images have always sat flush left. Only full-width images looked
 * centered, because they filled the container.
 *
 * Classic-editor output is a bare `<img class="aligncenter" width="597" ...>`;
 * the figure selectors cover block-editor output for future posts.
 * ------------------------------------------------------------------------- */
.blog-post-rich-text__content .aligncenter,
.blog-post-rich-text__content img.aligncenter,
.blog-post-rich-text__content figure.aligncenter,
.blog-post-rich-text__content .wp-block-image.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  /* width/height are hardcoded attributes on classic-editor images, so height
     must be released or the image distorts once max-width kicks in. */
  height: auto;
}

/* Block-editor figures wrap the image, so center the inner image too. */
.blog-post-rich-text__content figure.aligncenter > img,
.blog-post-rich-text__content .wp-block-image.aligncenter > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.blog-post-rich-text__content figure.aligncenter > figcaption,
.blog-post-rich-text__content .wp-block-image.aligncenter > figcaption {
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Thin dark-teal border on author headshots, so photos shot on white
 * backgrounds do not blend into the section behind them.
 *
 * darkTeal is rgb(1 71 81) in style.css.
 * Borders sit on the wrapper, which already carries the rounding and
 * overflow-hidden, so the ring follows the shape on both the circular blog
 * headshots and the rounded square on the author page.
 * ------------------------------------------------------------------------- */
.blog-post-hero__author-image,   /* byline avatar: blog + news posts */
.about-authors__card-image,      /* "About the author(s)" block on a blog post */
.about-author__image > div,      /* author archive page */
.local-guides__card-image {      /* destination leadership cards */
  /* Jason 2026-09-17: full-strength brand teal at 1px, no transparency. */
  border: 1px solid #014751;
}


/* ---------------------------------------------------------------------------
 * "Filter by:" label contrast — Portfolio and Our Team.
 *
 * The label is darkTeal at `text-opacity-40`, which measures 2.11:1 against the
 * cream panel behind it — the same 2.11:1 the June and August audits flagged,
 * and the only contrast failure left on these two pages (both scored 96).
 *
 * Raising the alpha to 0.75 puts it at 4.78:1, over the 4.5:1 AA floor for
 * normal-size text (the label is 18px semibold on desktop, 16px on mobile —
 * under the 18.66px bold cut-off, so the 3:1 large-text allowance does not
 * apply). Brand color itself is untouched: still rgb(1 71 81), just less faded.
 *
 * Overriding the Tailwind custom property rather than `color` keeps the brand
 * value in one place. The type selector is deliberate — `.text-opacity-40` is
 * also a single class, so `p.` guarantees this wins regardless of load order.
 * Tailwind has no source in the repo, so `text-opacity-75` cannot be generated;
 * swapping the class in the templates would drop the utility entirely and
 * render the label at full strength.
 * ------------------------------------------------------------------------- */
p.team-members__filter-nav-title,
p.portfolio-posts__filter-nav-title {
  --tw-text-opacity: 0.75;
}


/* ---------------------------------------------------------------------------
 * Keyboard focus ring for controls made operable by js/keyboard-a11y.js
 * (FAQ and state expanders, filter triggers and tabs, header service tabs)
 * and for the visually-hidden filter checkboxes, whose styled label is the
 * only thing a sighted keyboard user can see.
 *
 * currentColor keeps the ring readable on every section background, since
 * each control's text colour is already chosen to contrast with it.
 * :focus-visible means mouse clicks never show it.
 * ------------------------------------------------------------------------- */
[data-kbd]:focus-visible,
label:has(> input.sr-only:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}