/* ==========================================================================
   Site.css - page frame shared by _Layout.cshtml and _FormLayout.cshtml.

   WEB-5834 (WCAG 2.1 AA):
   - The legacy <table width="979"> frame is replaced by header/main/footer
     landmarks (1.3.1, 2.4.1) that reflow down to a 320px viewport (1.4.10).
   - The image-based footer navigation is replaced by text links (1.1.1,
     1.4.5, 2.4.4) styled like the Webdeposits footer (#FamilyFooter):
     white text on #6a6a6a = 5.53:1 (1.4.3).
   - A skip link and a consistent keyboard focus indicator are added
     (2.4.1, 2.4.7, 1.4.11). #005FCC on white is 5.6:1 and matches the focus
     colour used on Webdeposits grids.
   ========================================================================== */

body.SiteBody {
    margin: 0;
    background-color: #58595B;
}

.SitePage {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background-color: #FFFFFF;
}

/* --- Header: decorative gradient strip and the JailATM banner (same images as Webdeposits) --- */
.SiteHeader {
    background-color: #212121;
}

.SiteHeaderStrip {
    display: block;
    width: 100%;
    height: 34px;
}

.SiteBanner {
    display: flex;
    align-items: flex-start;
}

.SiteBannerLink {
    display: block;
    flex: 0 1 550px;
    min-width: 0;
    line-height: 0;
}

.SiteBanner img {
    display: block;
    max-width: 100%;
    height: auto;
}

.SiteBannerFill {
    flex: 0 1 430px;
}

@media (max-width: 979px) {
    /* The right-hand gradient filler carries no information; drop it so the
       banner can shrink to the viewport without horizontal scrolling. */
    .SiteBannerFill {
        display: none;
    }
}

/* --- Main content --- */
.SiteMain {
    display: block;
    background-color: #FFFFFF;
}

.SiteMain:focus {
    outline: none;
}

/* WCAG 1.4.1: links inside body text must not rely on colour alone.
   Scoped to prose (paragraphs, FAQ answers, accordion panels) so tabs and buttons keep their styling. */
.SiteMain p a,
.SiteMain .modal-body a,
.SiteMain .accordion-body a,
.SiteMain td a {
    text-decoration: underline;
}

/* Red "call to action" links in FAQ answers. Was #FF0000 (4.0:1); #C00000 is 6.5:1 on white. */
.LinkEmphasis,
.LinkEmphasis:link,
.LinkEmphasis:visited {
    color: #C00000;
}

/* --- Footer navigation --- */
.SiteFooter {
    background-color: #6a6a6a;
}

.SiteFooterNav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 50px;
}

.FooterLink,
.FooterLink:link,
.FooterLink:visited {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px; /* What the Webdeposits privacy and terms pages render their footer links at.
                        Pinned because the FAQ layout inherits Bootstrap's 14px, which pushed the
                        brand onto a second row; at 12px the five links and the brand fit the 980px
                        row with 37px to spare. */
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 28px;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

.FooterLink:hover,
.FooterLink:focus {
    text-decoration: underline;
    color: #ffffff;
}

.FooterBrand,
.FooterBrand:link,
.FooterBrand:visited {
    margin-left: auto;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
    padding: 0 40px;
    line-height: 50px;
}

.FooterBrand:hover,
.FooterBrand:focus {
    color: #ffffff;
    text-decoration: underline;
}

.SiteCopyright {
    background-color: #212121;
    color: #9E9FA3;
    text-align: center;
    margin: 0;
    padding: 8px 0 10px 0;
}

@media (max-width: 767px) {
    .SiteFooterNav {
        justify-content: center;
    }

    .FooterLink,
    .FooterLink:link,
    .FooterLink:visited {
        padding: 0 12px;
        line-height: 36px;
    }

    .FooterBrand,
    .FooterBrand:link,
    .FooterBrand:visited {
        margin-left: 0;
        flex-basis: 100%;
        text-align: center;
        padding: 0;
        line-height: 36px;
    }
}

/* --- Skip link (WCAG 2.4.1), same treatment as Webdeposits.Master --- */
.SkipLink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 8px 16px;
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #ff6600;
    font-weight: bold;
    text-decoration: underline;
}

.SkipLink:focus {
    left: 0;
}

/* --- Keyboard focus indicator (WCAG 2.4.7 / 1.4.11) --- */
.SitePage a:focus-visible,
.SitePage button:focus-visible,
.SitePage input:focus-visible,
.SitePage select:focus-visible,
.SitePage textarea:focus-visible,
.SitePage [tabindex]:focus-visible {
    outline: 2px solid #005FCC;
    outline-offset: 2px;
    box-shadow: none;
}

.SiteFooterNav a:focus-visible {
    outline-color: #ffffff;
    outline-offset: -3px;
}

/* --- Form helpers shared by the request forms --- */
/* WCAG 3.3.2: small, muted format hint shown beneath a field (same as Webdeposits .FieldHint). */
.FieldHint {
    display: block;
    font-size: .85em;
    color: #595959;
    margin: 2px 0 6px 0;
}

/* WCAG 3.3.2: visible required-field indicator. */
.RequiredMark {
    color: #BF4040;
    font-weight: bold;
}

.RequiredNote {
    margin: 0 0 10px 0;
}

/* Keeps a phone number on one line at narrow widths. */
.NoWrap {
    white-space: nowrap;
}

/* Visually hidden but available to assistive technology. */
.SrOnly {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}