/* Site-specific overrides for the jdotorg template (loaded via template.joomla.custom.ltr) */

/* Breadcrumb background, as on the Joomla 3 site */
.mod-breadcrumbs__wrapper {
    margin-top: 1.5rem;
}

.mod-breadcrumbs {
    --bs-breadcrumb-bg: var(--bs-tertiary-bg);
    --bs-breadcrumb-border-radius: var(--bs-border-radius);
}

/* Colours as on the Joomla 3 site: a light grey page with a lighter blue for links, darkened to meet the WCAG AA contrast */
:root {
    --vol-page-bg: #f4f6f7;
    --bs-link-color: #0071a8;
    --bs-link-color-rgb: 0, 113, 168;
    --bs-link-hover-color: #005580;
    --bs-link-hover-color-rgb: 0, 85, 128;
}

@media (prefers-color-scheme: dark) {
    :root {
        --vol-page-bg: #1a1d20;
        --bs-link-color: #6ea8fe;
        --bs-link-color-rgb: 110, 168, 254;
        --bs-link-hover-color: #8bb9fe;
        --bs-link-hover-color-rgb: 139, 185, 254;
    }
}

body.site {
    background-color: var(--vol-page-bg);
}

/* The page content sits in a box with a border, as on the Joomla 3 site */
.body > .container {
    padding: 20px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .05);
}

/* The box keeps its content in line with the header and sticks out by its padding and border, as on the Joomla 3 site */
@media (min-width: 576px) {
    .body > .container {
        max-width: 558px;
    }
}

@media (min-width: 768px) {
    .body > .container {
        max-width: 738px;
    }
}

@media (min-width: 992px) {
    .body > .container {
        max-width: 978px;
    }
}

@media (min-width: 1200px) {
    .body > .container {
        max-width: 1158px;
    }
}

@media (min-width: 1400px) {
    .body > .container {
        max-width: 1338px;
    }
}

/* Joomla 3 class still used by the search module, hide the label for sighted users only */
.element-invisible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Article headings in line with the volunteer pages: a 28px title with a line under it, 22px and 18px headings in the text */
.com-content-article .page-header {
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.com-content-article .page-header h1,
.com-content-article .page-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.4;
}

.com-content-article__body h2 {
    margin-top: 1.5rem;
    margin-bottom: .6rem;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
}

.com-content-article__body h3 {
    margin-bottom: .6rem;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}

/* Light buttons are grey in light mode on every page, as on the Joomla 3 site */
@media (prefers-color-scheme: light) {
    .btn-light {
        --bs-btn-color: #333;
        --bs-btn-bg: #eee;
        --bs-btn-border-color: #e6e6e6;
        --bs-btn-hover-color: #333;
        --bs-btn-hover-bg: #e6e6e6;
        --bs-btn-hover-border-color: #d9d9d9;
        --bs-btn-active-color: #333;
        --bs-btn-active-bg: #e6e6e6;
        --bs-btn-active-border-color: #d9d9d9;
    }
}

/* Intro text uses the same font as the rest of the page instead of a thin Open Sans */
.lead {
    font-family: inherit;
    font-weight: 400;
}

/* Space between system messages and the page content */
#system-message-container joomla-alert {
    margin-bottom: 1rem;
}

/* The X share button uses the X brand colour instead of the old Twitter blue */
body .rrssb-buttons li.rrssb-twitter a {
    background-color: #000;
}
body .rrssb-buttons li.rrssb-twitter a:hover {
    background-color: #333;
}

/* Joomla form validation */
.form-control.invalid,
.form-select.invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.form-control.invalid:focus,
.form-select.invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

label.invalid,
.form-control-feedback {
    color: var(--bs-form-invalid-color);
}

.form-control-feedback {
    display: block;
    font-size: .875em;
}

/* Code blocks with a copy button, like the banner code of the Banners page */
.copy-code-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.copy-code-wrapper pre.copy-code {
    margin-bottom: 0;
    padding: .75rem 5.5rem .75rem .75rem;
    white-space: pre-wrap;
    word-break: break-all;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.copy-code-button {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

/* Smart Search results: the core colours are for a light background only, use the theme colours so the results work in dark mode */
.com-finder .result__item + .result__item {
    border-top-color: var(--bs-border-color);
}

.com-finder .result__title-url,
.com-finder .result__date {
    color: var(--bs-secondary-color);
}

.com-finder .result__item mark {
    padding: 0 .1em;
    color: inherit;
    background-color: rgba(var(--bs-warning-rgb), .3);
    border-radius: .15em;
}

/* A lighter highlight in dark mode, so the light text on it keeps the WCAG AA contrast */
@media (prefers-color-scheme: dark) {
    .com-finder .result__item mark {
        background-color: rgba(var(--bs-warning-rgb), .15);
    }
}

.com-finder .sorting__list-li-active {
    background-color: var(--bs-tertiary-bg);
}