/* 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;
    }
}