/* Brand palette sampled from the logo; shades adjusted for text contrast. */
:root {
    --brand-blue: #4b699b;
    --brand-blue-dark: #354d76;
    --brand-blue-light: #a9c0e5;
    --brand-blue-pale: #d7e3f5;
    --brand-red: #d42836;
    --brand-red-dark: #b31f2b;
    --bs-primary: var(--brand-blue);
    --bs-primary-rgb: 75, 105, 155;
    --bs-danger: var(--brand-red);
    --bs-danger-rgb: 212, 40, 54;
    --bs-link-color: var(--brand-blue);
    --bs-link-hover-color: var(--brand-blue-dark);
    --site-focus-color: var(--brand-blue);
    --bs-light-rgb: 240, 244, 245;
    --site-page-background: #f0f4f5;
}
/* NHS component proportions, adapted to the existing brand palette.
   https://service-manual.nhs.uk/design-system
   Arial is the NHS fallback for the licensed Frutiger font. */
:root {
    --bs-body-font-family: Arial, sans-serif;
    --bs-font-sans-serif: Arial, sans-serif;
    --bs-body-font-size: var(--site-body-size);
    --bs-body-bg: var(--site-page-background);
    --site-body-size: 1rem;
    --site-heading-xl: 2rem;
    --site-heading-l: 1.5rem;
    --site-heading-m: 1.25rem;
    --site-heading-s: 1.125rem;
    --site-space-3: 0.5rem;
    --site-space-4: 1rem;
    --site-space-5: 1.5rem;
    --site-space-6: 1.5rem;
    --site-space-7: 3rem;
    --site-space-9: 3rem;
    --site-border: #d5dde7;
    --bs-border-color: var(--site-border);
    --bs-border-radius: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-sm: 0;
}
@media (min-width: 768px) {
    :root {
        --site-body-size: 1.1875rem;
        --site-heading-xl: 3rem;
        --site-heading-l: 2.25rem;
        --site-heading-m: 1.625rem;
        --site-heading-s: 1.375rem;
        --site-space-3: 1rem;
        --site-space-4: 1.5rem;
        --site-space-5: 1.5rem;
        --site-space-6: 3rem;
        --site-space-7: 3rem;
        --site-space-9: 3rem;
    }
}
/* Shared Bootstrap action buttons */
.btn {
    --bs-btn-font-family: var(--bs-body-font-family);
    --bs-btn-font-size: var(--site-body-size);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.263157895;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: 0.25rem;
    --bs-btn-border-width: 2px;
    --bs-btn-disabled-opacity: 0.5;
    --site-button-edge: var(--brand-blue-dark);
    --bs-btn-box-shadow: 0 4px 0 var(--site-button-edge);
    min-height: 2.75rem;
    box-shadow: var(--bs-btn-box-shadow);
    margin-bottom: 4px;
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-red-dark);
    --bs-btn-hover-border-color: var(--brand-red-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-red-dark);
    --bs-btn-active-border-color: var(--brand-red-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-red);
    --bs-btn-disabled-border-color: var(--brand-red);
    --bs-btn-focus-shadow-rgb: 212, 40, 54;
}

/* The solid lower edge is a site detail, independent of Bootstrap shadow utilities. */
.btn-danger { --site-button-edge: var(--brand-red-dark); }
.btn-light { --site-button-edge: #b9c1cb; }
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-blue-dark);
    --bs-btn-hover-border-color: var(--brand-blue-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-blue-dark);
    --bs-btn-active-border-color: var(--brand-blue-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-blue);
    --bs-btn-disabled-border-color: var(--brand-blue);
    --bs-btn-focus-shadow-rgb: 75, 105, 155;
}
.btn:not(:disabled):not(.disabled):active { transform: translateY(4px); box-shadow: none; }
@media (min-width: 768px) {
    .btn { --bs-btn-padding-y: 1rem; min-height: 3.5rem; }
}

/* Bootstrap cards: utilities in templates can override padding and alignment. */
.card {
    --bs-card-border-color: var(--site-border);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-spacer-y: 1.5rem;
    --bs-card-title-spacer-y: 1rem;
    border-bottom-width: 4px;
}
.card-body { overflow-wrap: anywhere; }
.card-secondary { border-top: 0; border-right: 0; border-left: 0; --bs-card-bg: transparent; }
.card-secondary > .card-body { overflow-wrap: normal; }
.card-non-clickable { border-bottom-width: var(--bs-card-border-width); }
.card-non-clickable > .card-body { overflow-wrap: normal; }
.card-title { font-size: var(--site-heading-m); line-height: 1.307692308; }
a:hover > .card { border-color: var(--brand-blue); }
a:focus-visible > .card { border-color: var(--brand-blue); }
.card .btn { align-self: flex-start; }
.card form .btn, .card .d-grid .btn { align-self: auto; }

/* Bootstrap 5.2 compiles input values into CSS; these site variables bridge that gap.
   Keep select arrow space and Bootstrap validation/disabled styles intact. */
:root {
    --site-input-padding-y: 0.5rem;
    --site-input-padding-x: 0.5rem;
    --site-input-border-width: 2px;
    --site-input-border-color: #687787;
    --site-input-focus-color: #212529;
    --site-input-focus-ring: var(--brand-blue-light);
}
.form-control, .form-select {
    font-family: var(--bs-body-font-family);
    font-size: var(--site-body-size);
    min-height: 2.75rem;
    border-width: var(--site-input-border-width);
    border-color: var(--site-input-border-color);
    border-radius: var(--bs-border-radius);
    padding-top: var(--site-input-padding-y);
    padding-bottom: var(--site-input-padding-y);
    padding-left: var(--site-input-padding-x);
}
.form-control { padding-right: var(--site-input-padding-x); }
.form-select { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--site-input-focus-color);
    outline: 3px solid var(--site-input-focus-ring);
    outline-offset: 0;
    box-shadow: inset 0 0 0 2px var(--site-input-focus-color);
}
.form-check-input:focus {
    border-color: var(--site-input-focus-color);
    outline: 3px solid var(--site-input-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}
.form-check { padding-left: 3rem; min-height: 2rem; }
.form-check .form-check-input { width: 2rem; height: 2rem; margin-left: -3rem; margin-top: 0; border-width: 2px; }
.form-check-input[type=checkbox] { border-radius: 0; }
.table { --bs-table-border-color: var(--site-border); font-size: inherit; }
.table > :not(caption) > * > * { padding: 1rem; }
.table > :not(caption) > * > :first-child { padding-left: 0; }
.table > :not(caption) > * > :last-child { padding-right: 0; }
.table th { font-weight: 600; }
.accordion {
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 1.5rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-body-padding-x: 1.5rem;
    --bs-accordion-body-padding-y: 1rem;
}
.accordion-header { margin-bottom: 0; }
.accordion-button { font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.modal { --bs-modal-padding: 1.5rem; --bs-modal-header-padding: 1.5rem; --bs-modal-border-radius: 0; }
.toast { --bs-toast-border-radius: 0; }
.modal-header { grid-gap: 1rem; gap: 1rem; --compat-gap-x: 1rem; --compat-gap-y: 1rem; }
.modal-title { margin-bottom: 0; }
.modal-body > :last-child { margin-bottom: 0; }
.btn-close { min-width: 1.5rem; min-height: 1.5rem; flex-shrink: 0; }
.alert { --bs-alert-border-radius: 0; --bs-alert-padding-x: 1rem; --bs-alert-padding-y: 1rem; border-left-width: 4px; }
.toast-body { border: 1px solid var(--site-border); }