/* Cucumber Lighting Controls brand, matching https://www.cucumberlc.co.uk
   (colours, font and logo taken from the company website). Loaded after Bootstrap and site.css.
   The header and footer use the website's dark green; page content stays light so the
   tables and forms remain easy to read. */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
}

:root {
    --brand-green: #0c221c;        /* website background */
    --brand-green-800: #1b4a3b;
    --brand-green-700: #205c49;
    --brand-cucumber: #00a072;
    --brand-bright-green: #a7f844; /* website highlight */
    --brand-green-200: #b9e1ce;
    --brand-green-50: #f0f9f5;
    --brand-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--brand-font);
    color: var(--brand-green);
    background-color: #fff;
}

/* No heading colour here: headings inherit, so they are dark green on the white page (from body)
   and stay white inside coloured banners such as the Site Viewer search panel. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

a {
    color: var(--brand-green-700);
}

a:hover {
    color: var(--brand-cucumber);
}

/* Header */
.brand-navbar {
    background-color: var(--brand-green);
    border-bottom: 3px solid var(--brand-cucumber);
}

.brand-navbar .navbar-brand img {
    height: 40px;
    width: auto;
    display: block;
}

.brand-navbar .nav-link,
.brand-navbar .btn-link.nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.3s;
}

.brand-navbar .nav-link:hover,
.brand-navbar .nav-link:focus,
.brand-navbar .btn-link.nav-link:hover {
    color: var(--brand-bright-green);
}

.brand-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Footer */
.brand-footer {
    background-color: var(--brand-green);
    color: rgba(255, 255, 255, 0.75);
    border-top: 0;
}

.brand-footer a {
    color: var(--brand-bright-green);
}

.brand-footer a:hover {
    color: #fff;
}

/* Buttons and controls */
.btn-primary {
    color: #fff;
    background-color: var(--brand-green-700);
    border-color: var(--brand-green-700);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: var(--brand-green);
    background-color: var(--brand-bright-green);
    border-color: var(--brand-bright-green);
}

.btn-primary:focus,
.btn-outline-primary:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 160, 114, 0.25);
}

.btn-outline-primary {
    color: var(--brand-green-700);
    border-color: var(--brand-green-700);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--brand-green-700);
    border-color: var(--brand-green-700);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-cucumber);
}

.form-check-input:checked {
    background-color: var(--brand-cucumber);
    border-color: var(--brand-cucumber);
}

.nav-pills .nav-link {
    color: var(--brand-green-700);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--brand-green-700);
}

.text-primary {
    color: var(--brand-green-700) !important;
}

.bg-primary {
    background-color: var(--brand-green-700) !important;
}

.page-link {
    color: var(--brand-green-700);
}

.page-item.active .page-link {
    background-color: var(--brand-green-700);
    border-color: var(--brand-green-700);
}