/* dbim-a11y.css: the accessibility controls of the header (DBIM chapter 8, Figure 44). Identical in all four apps.
   Home/header.jsp links this file and script/dbim-a11y.js itself, with their own ?version=, so no page is edited when
   they change. Each control is a class on <html>, set by the script. Colours are the tokens of dbim.css.

   High contrast keeps its own stylesheets (base-layout-high-contrast.css). While it is on, the script adds
   html.dbim-hc, and the rules under "the panel in high contrast" give the panel that mode's black and yellow. */

/* ---- the panel ---- */
.dbim-a11y-panel {
    width: 20rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.75rem;
    border: 1px solid var(--dbim-grey1);
    box-shadow: 0 0.5rem 1rem rgba(var(--dbim-c1-rgb), 0.15);
}
.dbim-a11y-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--dbim-c1);
    font-size: var(--dbim-fs-p1);
    font-weight: 600;
}
.dbim-a11y-close {
    display: flex;
    margin-left: auto;
    padding: 0.25rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: inherit;
}
.dbim-a11y-close:hover { background: var(--dbim-c5); }
.dbim-a11y-close:focus-visible {
    outline: 2px solid var(--dbim-c1);
    outline-offset: 2px;
}
/* minmax(0, ...): a column may shrink below its longest word, so a long translated label cannot push a tile out of the panel */
.dbim-a11y-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
}
.dbim-a11y-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 4.75rem;
    padding: 0.5rem;
    border: 1px solid var(--dbim-c1);
    border-radius: 0.375rem;
    background: var(--dbim-white);
    color: var(--dbim-c1);
    font-size: var(--dbim-fs-p2);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}
.dbim-a11y-tile:hover { background: var(--dbim-c5); }
.dbim-a11y-tile:focus-visible {
    outline: 2px solid var(--dbim-c1);
    outline-offset: 2px;
}
/* A control that is switched on is filled */
.dbim-a11y-tile[aria-pressed="true"] {
    background: var(--dbim-c1);
    color: var(--dbim-white);
}
.dbim-a11y-tile[aria-pressed="true"]:hover { background: var(--dbim-hover); }
/* An odd number of tiles (the feedback app has seven): the last one takes the whole row instead of sitting alone */
.dbim-a11y-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Windows contrast themes replace the colours above, so there "on" is shown in the system's own highlight colours */
@media (forced-colors: active) {
    .dbim-a11y-tile[aria-pressed="true"] {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }
}
/* "A+" and "A-" stand where the other tiles have an icon */
.dbim-a11y-glyph {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5rem;
}
.dbim-a11y-reset {
    width: 100%;
    margin-top: 0.75rem;
}

/* ---- the panel in high contrast (plain :focus, so a tile just clicked stays readable) ---- */
html.dbim-hc .dbim-a11y-panel {
    border-color: yellow;
    background: black;
    box-shadow: none;
}
html.dbim-hc .dbim-a11y-head { color: yellow; }
html.dbim-hc .dbim-a11y-close:hover,
html.dbim-hc .dbim-a11y-close:focus {
    background: yellow;
    color: black;
}
html.dbim-hc .dbim-a11y-tile {
    border-color: yellow;
    background: black;
    color: yellow;
}
/* Only a control that is on is filled. Hover and focus get a ring instead: filled, a tile just switched off (it keeps the
   focus, and on a touch screen the hover too) would look exactly like one that is on */
html.dbim-hc .dbim-a11y-tile[aria-pressed="true"] {
    background: yellow;
    color: black;
}
html.dbim-hc .dbim-a11y-tile:hover,
html.dbim-hc .dbim-a11y-tile:focus {
    outline: 2px solid yellow;
    outline-offset: 2px;
}

/* ---- what the controls do ---- */

/* Invert: the whole page. Photographs, videos and embedded players are turned back, so they look as they did (very
   saturated reds, greens and blues come back a little duller).
   The filter is on <html>, the one element where it does not disturb fixed and sticky parts (menu, pop-ups) */
html.dbim-invert {
    background: var(--dbim-white);
    filter: invert(1) hue-rotate(180deg);
}
html.dbim-invert img,
html.dbim-invert video,
html.dbim-invert iframe { filter: invert(1) hue-rotate(180deg); }

/* Saturation: colour removed. The third rule is both controls together, since an element has one filter */
html.dbim-saturation { filter: grayscale(1); }
html.dbim-invert.dbim-saturation { filter: invert(1) hue-rotate(180deg) grayscale(1); }

/* Highlight links. !important because the site's own link colours (and high contrast's) are !important too; the second
   selector outweighs the high-contrast rule for the menu, which is written with the menu's id */
html.dbim-highlight-links a[href],
html.dbim-highlight-links #nav-bar a[href] {
    outline: 2px solid var(--dbim-text);
    background: var(--dbim-warning) !important;
    color: var(--dbim-text) !important;
    text-decoration: underline !important;
}
/* Icons inside a link take the link's dark text colour (high contrast forces them yellow, which vanishes on the highlight) */
html.dbim-highlight-links a[href] svg,
html.dbim-highlight-links a[href] i { color: var(--dbim-text) !important; }
/* A card whose whole area is one link (an empty .stretched-link, itself 0 by 0) is outlined as a whole */
html.dbim-highlight-links a.stretched-link::after {
    outline: 3px solid var(--dbim-text);
    outline-offset: -3px;
}
/* The outline above would replace the browser's focus ring: the link with keyboard focus gets a thicker ring, set off from it */
html.dbim-highlight-links a[href]:focus-visible {
    outline: 3px solid var(--dbim-c1);
    outline-offset: 3px;
}
html.dbim-hc.dbim-highlight-links a[href]:focus-visible { outline-color: yellow; }
/* A paged table: the current page number stays told apart from the others, and one that cannot be used stays faint */
html.dbim-highlight-links .page-item.active a[href] {
    background: var(--dbim-c1) !important;
    color: var(--dbim-white) !important;
}
html.dbim-highlight-links .page-item.disabled a[href] { opacity: 0.5; }

/* Hide images: every picture except the CAPTCHA and the emblem and logo in the header. The space a picture took stays,
   so the text around it does not move.
   Where a picture is the only content of a link or button, the script copies its description to data-dbim-alt, and the
   link shows that description as ordinary text instead, so it can still be used. That text is in the normal flow (it
   wraps like any other text): laid over the picture's box it stuck out past the screen edge on phones.
   A picture the script marks dbim-keep (a link's only content, with no description) stays */
html.dbim-hide-images img { visibility: hidden; }
html.dbim-hide-images #captcha-image-div img,
html.dbim-hide-images .dbim-header img,
html.dbim-hide-images img.dbim-keep { visibility: visible; }
/* !important: many of these pictures carry Bootstrap's d-block, which is !important itself */
html.dbim-hide-images [data-dbim-alt] img { display: none !important; }
html.dbim-hide-images [data-dbim-alt]::after {
    content: attr(data-dbim-alt);
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: var(--dbim-white);
    color: var(--dbim-c1);
    font-size: var(--dbim-fs-p2);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: underline;
}
html.dbim-hc.dbim-hide-images [data-dbim-alt]::after {
    background: black;
    color: yellow;
}

/* Big cursor: a 48px pointer whose tip is 3px in and 2px down. !important because buttons and links set their own */
html.dbim-big-cursor,
html.dbim-big-cursor * { cursor: url(../images/dbim-cursor.png) 3 2, auto !important; }

/* ---- footer links ----
   The footer's links are padded inline boxes. When the row wraps (phones, tablets) each link's padding lies over the row
   above, so a tap on one link opens another, and "Highlight links" paints over its neighbours. As inline blocks they keep
   to their own line; the smaller vertical padding keeps the rows about as far apart as before. !important because the
   padding comes from Bootstrap's p-3, which is !important.
   This is here, not in dbim.css, only because this file reaches every page without editing the pages. It moves to
   dbim.css with the footer step, which bumps dbim.css on every page anyway */
footer .footer-top .list-inline-item > a {
    display: inline-block;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}