/* Accessibility helpers shared by every page (Stage C). */

/* "Skip to main content": hidden until it receives keyboard focus, then shown above the fixed navbar */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  background: #fff;
  color: #222;
  font-size: 16px;
  text-decoration: underline;
  border: 2px solid #222;
  border-radius: 3px;
}

/* the skip target is focused by the browser for a moment; no ring needed on the container itself */
main:focus { outline: none; }

/* ---- Links: not distinguished by colour alone ------------------------------------------------------------
   Links inside running text are underlined (thin, offset so descenders stay readable); navigation-style links
   (menus, cards, pager, share buttons, archive list) keep their plain look. */
main :is(p, li, dd, dt, td, blockquote, figcaption) a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
main :is(.pager, .social-buttons, .nav, .list-unstyled, .portfolio-caption, .navbar) a,
main a.btn,
main a.portfolio-link {
  text-decoration: none;
}

/* ---- Visible keyboard focus (mouse clicks do not show it) ------------------------------------------------- */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1a5fb4 !important;
  outline-offset: 2px !important;
}
.navbar-inverse a:focus-visible,
.navbar-inverse button:focus-visible {
  outline-color: #fff !important;
  outline-offset: -3px !important;
}

/* ---- Contrast: secondary text darkened from #999 (2.8:1) to a grey that passes AA (5.3:1 on white) ------- */
.blog-post-meta,
.blog-description,
.blog-footer {
  color: #6b6b6b;
}

/* ---- Motion: honour the system "reduce motion" setting ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Touch targets of at least 44 px on phones ------------------------------------------------------------ */
@media (max-width: 767px) {
  .navbar-nav > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  ul.social-buttons li a {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }
  .pager li > a,
  .pager li > span {
    padding: 12px 18px;
  }
}

/* ---- Phones: nothing wider than the screen (figures, embeds, long code, wide buttons) --------------------- */
@media (max-width: 767px) {
  .blog-main img {
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    height: auto;
  }
  main iframe {
    max-width: 100%;
  }
  main code {
    overflow-wrap: anywhere;
  }
  main .btn {
    white-space: normal;
  }
  .zoomContainer {
    display: none !important;          /* hover-zoom plugin: no use (and wider than the screen) on touch phones */
  }
}