/*
 * Styles the "Accessibility Statement" link that app.blade.php injects into the
 * SPA's bottom menu. Loaded only by the SPA layout, not by the statement page
 * itself (you are already there, so it renders a plain 4-item menu).
 *
 * Hand-written and safe to edit, unlike the build artifacts app.css and
 * chunk-vendors.css. Everything here is scoped so it can only affect this one
 * link, plus the two rules that make room for it.
 */

/* The menu is a nowrap flex row of four pills that shrink to fit narrow screens
   (54px at 320px wide). It must stay nowrap: enabling flex-wrap makes the items
   wrap to a second row at 320px instead of shrinking, which breaks the nav.

   So the statement link is taken out of flow and placed in space reserved at the
   bottom of the bar. The four pills keep the flex row to themselves, and the
   link gets a full-width row of its own beneath them — room for the whole label,
   which could never fit inside a 54px pill with overflow:hidden. */
.bottomMenu {
    padding-bottom: 36px;
}

.bottomMenu .a11yMenuLink {
    /* Overrides .bottomMenu a, which is a 54-71px wide inline-block pill. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    width: auto;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    font-family: Muli, sans-serif;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    /* Never signal a link by colour alone (WCAG 1.4.1 Use of Color). */
    text-decoration: underline;
    color: #4406c4;
}

.bottomMenu .a11yMenuLink::before {
    content: none;
}

.bottomMenu .a11yMenuLink:focus {
    outline: 3px solid #5207e9;
    outline-offset: 2px;
}

/* app.css reserves 84px at the bottom of every route to clear the fixed menu.
   The extra row makes the menu taller, so the reservation has to grow with it
   or the last line of each page sits underneath the bar. */
.page {
    padding-bottom: 116px;
}