/* Site-wide accessibility baseline.
 *
 * Every page inlines its own visual CSS, so this file deliberately carries
 * only what must be consistent everywhere: the skip link, a visible focus
 * ring, and the reduced-motion opt-out. One shared file means one cached
 * request rather than another few KB inlined into 1,200 pages.
 */

/* --- Skip link ------------------------------------------------------- */
/* Off-screen until focused, rather than display:none, so screen readers
   still announce it as the first item in the tab order. */
.shoug-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100001;
  transform: translateY(-120%);
  padding: 12px 22px;
  background: #ff2a4b;
  color: #050508;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 140ms ease;
}

.shoug-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #b829ea;
  outline-offset: 2px;
}

/* The skip target is focused programmatically; it should not draw a ring. */
[tabindex="-1"]:focus {
  outline: none;
}

/* --- Focus visibility ------------------------------------------------ */
/* :focus-visible only fires for keyboard and assistive input, so pointer
   users never see these rings. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #b829ea;
  outline-offset: 3px;
  border-radius: 2px;
}

body.shoug-light-mode a:focus-visible,
body.shoug-light-mode button:focus-visible,
body.shoug-light-mode input:focus-visible,
body.shoug-light-mode select:focus-visible,
body.shoug-light-mode textarea:focus-visible,
body.shoug-light-mode summary:focus-visible {
  outline-color: #7c1fa8;
}

/* --- Reduced motion -------------------------------------------------- */
/* Near-zero rather than 0s: some scripts wait on transitionend/animationend,
   and a true 0s duration can stop those events from ever firing. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Visually hidden ------------------------------------------------- */
/* Present to screen readers and crawlers, invisible on screen. Used to give
   pages a real <h1> where the visible title is a styled <div> that cannot be
   promoted without disturbing the layout. */
.shoug-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Print ----------------------------------------------------------- */
/* Printing a study page used to emit the fixed header, the whole sidebar
   tree and a mostly blank first sheet. Print gets the content column only,
   in ink-friendly colours, with link targets spelled out since a printed
   link cannot be clicked. */
@media print {
  .shoug-site-header,
  .academic-sidebar,
  .shoug-footer,
  .nav-strip,
  .content-tabs,
  .breadcrumb,
  .shoug-skip-link,
  .pdf-embed__actions,
  #shoug-search-backdrop,
  [data-lang-toggle],
  .shoug-theme-btn,
  .sidebar-collapse-button {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  body {
    font-size: 11pt;
  }

  main,
  .sys-main,
  .container,
  .embed-area-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }

  /* The layout is a flex row with the sidebar; without it the content
       column must reclaim the full width. */
  .sys-layout,
  .layout,
  body > div {
    display: block !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Only for real destinations -- in-page and javascript links would just
       add noise. */
  main a[href^="http"]::after,
  main a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }

  h1,
  h2,
  h3 {
    break-after: avoid-page;
  }

  pre,
  blockquote,
  table,
  figure,
  .qcard {
    break-inside: avoid;
  }

  .pdf-embed {
    min-height: 0 !important;
    padding: 0 !important;
  }
}