/*
 * APF colour scheme. Everything is scoped under body.scheme-apf, so it only applies to users who chose it
 * (My account > Switch to APF colours) and the default look in site.css is untouched.
 *
 * Palette, from the APF website:
 *   red #e4502a, amber #e78f26, dark amber #c3762f, light red #e76241,
 *   charcoal #242424, cream #fafae1, pale yellow #fdd79a.
 * #e4502a on white has a contrast ratio of about 4:1, so it is used for buttons, borders and large text.
 * Small link text uses the darker #c3401f.
 *
 * Ubuntu font files: Ubuntu Font Licence 1.0, see ../fonts/UBUNTU-FONT-LICENCE.txt
 */

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ubuntu-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ubuntu-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ubuntu-latin-700-normal.woff2') format('woff2');
}

body.scheme-apf {
    --apf-red: #e4502a;
    --apf-red-dark: #c3401f;
    --apf-red-light: #e76241;
    --apf-amber: #e78f26;
    --apf-amber-dark: #c3762f;
    --apf-charcoal: #242424;
    --apf-cream: #fafae1;
    --apf-yellow: #fdd79a;

    --chart-checkins: #242424;
    --chart-downloads: #e78f26;
    --chart-growth: #e4502a;

    font-family: 'Ubuntu', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--apf-charcoal);
}

body.scheme-apf h1,
body.scheme-apf h2,
body.scheme-apf h3,
body.scheme-apf h4,
body.scheme-apf h5,
body.scheme-apf h6 {
    color: var(--apf-charcoal);
    font-weight: 500;
}

/* Links */
body.scheme-apf a {
    color: var(--apf-red-dark);
}

body.scheme-apf a:hover {
    color: var(--apf-red);
}

/* Footer links sit on the orange bar, so they match the white footer text */
body.scheme-apf .footer-link {
    color: #ffffff;
}

body.scheme-apf .footer-link:hover {
    color: var(--apf-cream);
}

/* Navbar keeps its orange, with the same colour for the dropdown states */
body.scheme-apf .navbar-bottom-border {
    border-bottom: 3px solid var(--apf-red);
}

/* Menu section headings (Content, Tags, Series...) must stay distinct from the items under them.
   They are h6 elements, so this has to outrank the heading rule above. */
body.scheme-apf .dropdown-header {
    color: var(--apf-red-dark);
    font-weight: 700;
}

body.scheme-apf .dropdown-item:hover,
body.scheme-apf .dropdown-item:focus {
    background-color: var(--apf-yellow);
    color: var(--apf-charcoal);
}

body.scheme-apf .dropdown-item.active,
body.scheme-apf .dropdown-item:active {
    background-color: var(--apf-red);
    color: #ffffff;
}

/* Rounded (pill) buttons, like the APF site. Where buttons are joined in a group, only the edges that touch
   another button are square. A group can also hold a dropdown menu, so this looks at the buttons only. */
body.scheme-apf .btn {
    border-radius: 50rem;
}

body.scheme-apf .btn-group > .btn + .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.scheme-apf .btn-group > .btn:has(~ .btn) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Buttons: primary and success are the APF red, as there is one main action colour */
body.scheme-apf .btn-primary,
body.scheme-apf .btn-success {
    background-color: var(--apf-red);
    border-color: var(--apf-red);
    color: #ffffff;
}

body.scheme-apf .btn-primary:hover,
body.scheme-apf .btn-primary:focus,
body.scheme-apf .btn-primary:active,
body.scheme-apf .btn-success:hover,
body.scheme-apf .btn-success:focus,
body.scheme-apf .btn-success:active {
    background-color: var(--apf-red-dark);
    border-color: var(--apf-red-dark);
    color: #ffffff;
}

body.scheme-apf .btn-primary:focus,
body.scheme-apf .btn-success:focus,
body.scheme-apf .btn-secondary:focus,
body.scheme-apf .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(228, 80, 42, 0.35);
}

body.scheme-apf .btn-secondary,
body.scheme-apf .btn-dark {
    background-color: var(--apf-charcoal);
    border-color: var(--apf-charcoal);
    color: #ffffff;
}

body.scheme-apf .btn-secondary:hover,
body.scheme-apf .btn-dark:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

body.scheme-apf .btn-warning,
body.scheme-apf .btn-info {
    background-color: var(--apf-amber);
    border-color: var(--apf-amber);
    color: var(--apf-charcoal);
}

body.scheme-apf .btn-warning:hover,
body.scheme-apf .btn-info:hover {
    background-color: var(--apf-amber-dark);
    border-color: var(--apf-amber-dark);
    color: #ffffff;
}

/* Delete stays a clearly different, darker red so it isn't confused with the main action */
body.scheme-apf .btn-danger {
    background-color: #8f1d12;
    border-color: #8f1d12;
    color: #ffffff;
}

body.scheme-apf .btn-danger:hover {
    background-color: #6d160d;
    border-color: #6d160d;
}

body.scheme-apf .btn-default {
    background-color: #ffffff;
    border-color: var(--apf-red);
    color: var(--apf-red-dark);
}

body.scheme-apf .btn-default:hover {
    background-color: var(--apf-red);
    color: #ffffff;
}

body.scheme-apf .btn-outline-secondary {
    border-color: var(--apf-charcoal);
    color: var(--apf-charcoal);
}

body.scheme-apf .btn-outline-secondary:hover {
    background-color: var(--apf-charcoal);
    color: #ffffff;
}

/* Forms */
body.scheme-apf .form-control:focus,
body.scheme-apf .form-select:focus {
    border-color: var(--apf-red-light);
    box-shadow: 0 0 0 0.2rem rgba(228, 80, 42, 0.2);
}

/* Native checkboxes and radio buttons (such as the Display Columns menu) take the accent colour */
body.scheme-apf input[type="checkbox"],
body.scheme-apf input[type="radio"] {
    accent-color: var(--apf-red);
}

body.scheme-apf .form-check-input:checked {
    background-color: var(--apf-red);
    border-color: var(--apf-red);
}

/* Tables and lists */
body.scheme-apf .grid-view th,
body.scheme-apf .grid-view th a {
    color: var(--apf-charcoal);
}

body.scheme-apf .table thead th {
    border-bottom: 2px solid var(--apf-red);
}

body.scheme-apf .table-striped tbody tr:nth-of-type(odd),
body.scheme-apf .table-hover tbody tr:hover {
    background-color: var(--apf-cream);
}

body.scheme-apf .pagination .page-link {
    color: var(--apf-red-dark);
}

body.scheme-apf .pagination .page-item.active .page-link {
    background-color: var(--apf-red);
    border-color: var(--apf-red);
    color: #ffffff;
}

body.scheme-apf .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(228, 80, 42, 0.25);
}

body.scheme-apf .list-group-item.active {
    background-color: var(--apf-red);
    border-color: var(--apf-red);
}

body.scheme-apf .nav-tabs .nav-link.active {
    border-top: 3px solid var(--apf-red);
    color: var(--apf-charcoal);
}

body.scheme-apf .badge.bg-primary {
    background-color: var(--apf-red);
}

body.scheme-apf .badge.bg-info,
body.scheme-apf .badge.bg-warning {
    background-color: var(--apf-amber);
    color: var(--apf-charcoal);
}

/* Breadcrumbs and info messages */
body.scheme-apf .breadcrumb {
    background-color: var(--apf-cream);
}

body.scheme-apf .alert-info {
    background-color: var(--apf-cream);
    border-color: var(--apf-yellow);
    border-left: 4px solid var(--apf-amber);
    color: var(--apf-charcoal);
}

/* RAG status: softer shades that sit with the APF palette. The label (RED, AMBER, GREEN) is always shown too,
   so the status doesn't rely on colour alone. Red is a deep crimson so it isn't mistaken for the brand red. */
body.scheme-apf .rag-red {
    background-color: #b3261e;
    color: #ffffff;
}

body.scheme-apf .rag-amber {
    background-color: #f5b942;
    color: var(--apf-charcoal);
}

body.scheme-apf .rag-green {
    background-color: #6aa84f;
    color: var(--apf-charcoal);
}

/* Home page */
body.scheme-apf .home-box {
    border-top: 3px solid var(--apf-red) !important;
}

body.scheme-apf .home-box:hover {
    box-shadow: 0 4px 12px rgba(228, 80, 42, 0.18);
}

body.scheme-apf .home-box-title {
    color: var(--apf-charcoal);
}

/* White pills with a red outline, like the "Read more" buttons on the APF site */
body.scheme-apf .home-btn {
    background-color: #ffffff;
    border: 1px solid var(--apf-red);
    border-radius: 50rem;
    color: var(--apf-red-dark);
}

body.scheme-apf .home-btn:hover,
body.scheme-apf .home-btn:focus {
    background-color: var(--apf-red);
    border-color: var(--apf-red);
    color: #ffffff;
}

body.scheme-apf .home-announcements {
    background-color: var(--apf-cream);
    border: 1px solid var(--apf-yellow);
    border-left: 4px solid var(--apf-amber);
    color: var(--apf-charcoal);
}