/* Links get an underline by default. Color alone is never enough to
   signal a link (WCAG 1.4.1). */
.wp-block-post-content a:where(:not(.wp-element-button)),
.wp-block-page-list a,
.wp-block-post-title a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Visible focus on everything interactive. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #0623BF;
  outline-offset: 2px;
}

/* Links on royal must not inherit the brand link blue: #2A62C9 on #0623BF
   is 1.84:1 and badly fails. White is 10.50:1. */
.has-brand-royal-background-color a:where(:not(.wp-element-button)) {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.has-brand-royal-background-color a:where(:not(.wp-element-button)):hover {
  text-decoration-thickness: 2px;
}

.has-brand-royal-background-color :where(a, button):focus-visible {
  outline-color: #FFFFFF;
}

/* Footer link columns are navigation, not prose. */
.has-brand-royal-background-color .wp-block-list {
  list-style: none;
  padding-left: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 2;
}

/* Palette. WordPress generates its own slugs and they don't match the ones
   this markup uses, so bind the classes to the real hex values.
     #0623BF royal  10.50:1 on white
     #2A62C9 link    5.69:1 on white
     #3276F1 light   4.20:1, large text only
     #E4EAFB pale    backgrounds; royal on it is 8.73:1 */
.has-brand-royal-color            { color: #0623BF !important; }
.has-brand-royal-background-color { background-color: #0623BF !important; }
.has-brand-link-color             { color: #2A62C9 !important; }
.has-brand-link-background-color  { background-color: #2A62C9 !important; }
.has-brand-light-color            { color: #3276F1 !important; }
.has-brand-light-background-color { background-color: #3276F1 !important; }
.has-brand-pale-color             { color: #E4EAFB !important; }
.has-brand-pale-background-color  { background-color: #E4EAFB !important; }
.has-brand-slate-color            { color: #4A5568 !important; }
.has-base-color                   { color: #FFFFFF !important; }
.has-base-background-color        { background-color: #FFFFFF !important; }
.has-contrast-color               { color: #111111 !important; }

.wp-block-post-content a:where(:not(.wp-element-button)),
.entry-content a:where(:not(.wp-element-button)) { color: #2A62C9; }
h1, h2, h3, h4 { color: #0623BF; }
.has-brand-royal-background-color :where(h1, h2, h3, h4) { color: #FFFFFF; }

/* Email addresses are one unbreakable word. At 320px
   heatherrobinsonann@gmail.com is 333px wide and pushes the page sideways,
   failing WCAG 1.4.10 reflow. */
a[href^="mailto:"],
a[href^="tel:"] {
  overflow-wrap: anywhere;
}

/* The page title sat 140px under the header: main has a 70px top margin and
   its first group another 70px of padding. The theme sets that with
   :root :where(.wp-site-blocks) > *, which outranks a plain child selector,
   so these need :root to win. */
:root .wp-site-blocks > main {
  margin-block-start: 0;
}
:root main > .wp-block-group:first-child {
  padding-top: 2.5rem;
}

/* 645px of content in a 1280px window read as empty. */
:root,
body {
  --wp--style--global--content-size: 780px;
}

/* Sub-headings were the same blue as links, so "First Parish Church,
   1 Church Street" read as clickable when it isn't. */
main h3 {
  color: #111111;
}