/* Public safeguarding page only. Colours are explicit so contrast does not depend on the theme. */
.safeguarding {
    color: #1a1a1a;
}

/*
 * The shared nav and footer fade in from opacity 0 via theme.js, so with JavaScript off they never
 * appear. Start them visible here; when JavaScript runs, the animation's inline styles still win.
 */
.fancynavbar[data-zanim-trigger],
body > footer[data-zanim-trigger] {
    opacity: 1;
}

/* Sparrow pads every section by 7.5rem from the md breakpoint up; these are page sections, not bands. */
.safeguarding section:not(.safeguarding-callout) {
    padding: 0;
}

.safeguarding h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
}

.safeguarding h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
}

.safeguarding a {
    color: #0b4f9c; /* 8.1:1 on white */
    text-decoration: underline;
}

.safeguarding a[href^="tel:"],
.safeguarding a[href^="mailto:"] {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    padding: 0.6rem 0;
    line-height: 1.4;
}

.safeguarding-callout {
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    background: #fdecea;
    color: #1a1a1a; /* 14:1 on the callout background */
    border-left: 0.5rem solid #8b0000;
}

.safeguarding-callout h2 {
    margin-top: 0;
}

.safeguarding-callout-call {
    margin-bottom: 0.25rem;
    font-size: 2rem;
    font-weight: 700;
}

.safeguarding-callout a {
    color: #7a0000; /* 9.5:1 on the callout background */
}

.safeguarding-contacts {
    width: 100%;
    border-collapse: collapse;
}

.safeguarding-contacts caption {
    padding: 0 0 0.5rem;
    color: #1a1a1a;
    font-weight: 700;
    text-align: left;
}

.safeguarding-contacts th,
.safeguarding-contacts td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    text-align: left;
    border: 1px solid #595959;
}

.safeguarding-contacts th {
    background: #1a1a1a;
    color: #fff;
}

.safeguarding-reviewed {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #595959;
}

@media (max-width: 575.98px) {
    .safeguarding-contacts,
    .safeguarding-contacts tbody,
    .safeguarding-contacts tr,
    .safeguarding-contacts td {
        display: block;
        width: 100%;
    }

    /* A caption left as table-caption inside a block table shrinks to its longest word. */
    .safeguarding-contacts caption {
        display: block;
    }

    /* Visually hidden, still read by screen readers: each cell carries its own label instead. */
    .safeguarding-contacts thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .safeguarding-contacts tr {
        margin-bottom: 1rem;
        border: 1px solid #595959;
    }

    .safeguarding-contacts td {
        border: 0;
        border-bottom: 1px solid #d0d0d0;
        overflow-wrap: anywhere;
    }

    .safeguarding-contacts td:last-child {
        border-bottom: 0;
    }

    .safeguarding-contacts td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
    }
}

@media print {
    .fancynavbar,
    .indicator,
    body > footer {
        display: none !important;
    }

    .safeguarding,
    .safeguarding a,
    .safeguarding-callout,
    .safeguarding-callout a {
        color: #000 !important;
    }

    .safeguarding-callout {
        background: none;
        border: 2px solid #000;
        border-left-width: 0.5rem;
    }

    .safeguarding-contacts,
    .safeguarding-contacts tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .safeguarding-contacts th {
        background: none;
        color: #000;
    }

    /* Every phone number and address is already written out as the link text, so none is repeated here. */
    .safeguarding a[href^="http"]:not([href*="devonscp.org.uk"])::after {
        content: " (" attr(href) ")";
    }
}