:root {
    --aw-master: #009183;
    --aw-master-strong: #007a6e;
    --aw-green: #184147;
    --aw-blue: #122445;
    --aw-link: #006f64;
    --aw-link-hover: #007a6e;
    --aw-bg: #f3f6f7;
    --aw-surface: #ffffff;
    --aw-surface-2: #ffffff;
    --aw-border: #d8e2e6;
    --aw-text: #10222b;
    --aw-heading: #152f38;
    --aw-footer: #5d6d74;
    --aw-shadow-1: rgba(16, 34, 43, 0.08);
    --aw-shadow-2: rgba(16, 34, 43, 0.09);
    --aw-code-bg: #f2f6f8;
}

[data-bs-theme='light'] {
    --aw-link: #006f64;
    --aw-link-hover: #007a6e;
    --aw-bg: #f3f6f7;
    --aw-surface: #ffffff;
    --aw-surface-2: #ffffff;
    --aw-border: #d8e2e6;
    --aw-text: #10222b;
    --aw-heading: #152f38;
    --aw-footer: #5d6d74;
    --aw-shadow-1: rgba(16, 34, 43, 0.08);
    --aw-shadow-2: rgba(16, 34, 43, 0.09);
    --aw-code-bg: #f2f6f8;
}

[data-bs-theme='dark'] {
    --aw-link: #4fd2c4;
    --aw-link-hover: #8be7dd;
    --aw-bg: #0f171a;
    --aw-surface: #152126;
    --aw-surface-2: #1a2a30;
    --aw-border: #2b4048;
    --aw-text: #d7e7ed;
    --aw-heading: #eaf8fc;
    --aw-footer: #9ab1ba;
    --aw-shadow-1: rgba(0, 0, 0, 0.35);
    --aw-shadow-2: rgba(0, 0, 0, 0.45);
    --aw-code-bg: #0e1a1e;
}

html,
body {
    background: var(--aw-bg);
    color: var(--aw-text);
    font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
}

.navbar,
.navbar.bg-primary {
    background: linear-gradient(100deg, var(--aw-master), var(--aw-green), var(--aw-blue));
    border: 0;
    box-shadow: 0 6px 22px rgba(16, 34, 43, 0.2);
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
}

.navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.navbar .navbar-brand.brand-logo {
    display: inline-flex;
    align-items: center;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

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

.navbar .nav-link.active {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.65);
    text-underline-offset: 5px;
}

.navbar .nav-link[href^="https://autowatch.co.uk"]
{
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    margin-top: 5px;
    margin-right: 0;
    padding: 6px 14px;
}

.navbar .nav-link[href^="https://autowatch.co.uk"]:hover,
.navbar .nav-link[href^="https://autowatch.co.uk"]:focus
{
    background: #ffffff;
    color: var(--aw-green);
}

.navbar .dropdown-menu {
    background-color: var(--aw-surface);
    border-color: var(--aw-border);
    box-shadow: 0 10px 24px var(--aw-shadow-2);
}

.navbar .dropdown-item {
    color: var(--aw-text);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--aw-heading);
    background-color: color-mix(in srgb, var(--aw-master) 18%, transparent);
}

a {
    color: var(--aw-link);
    text-underline-offset: 2px;
}

a:hover,
a:focus {
    color: var(--aw-link-hover);
    text-decoration-thickness: 2px;
}

.container {
    max-width: 1180px;
}

.bs-sidebar .card {
    background: var(--aw-surface-2);
    border: 1px solid var(--aw-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px var(--aw-shadow-1);
}

.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
    border-right: 3px solid var(--aw-master);
    color: var(--aw-master);
    font-weight: 700;
}

[role='main'] {
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: 16px;
    box-shadow: 0 6px 24px var(--aw-shadow-2);
    color: var(--aw-text);
    padding: 28px 30px;
}

h1,
h2,
h3 {
    color: var(--aw-heading);
    font-weight: 700;
}

h1 {
    margin-top: 0;
}

code,
pre {
    border-radius: 10px;
}

code {
    background-color: var(--aw-code-bg);
    color: var(--aw-text);
}

.admonition {
    border-radius: 12px;
    border: 1px solid var(--aw-border);
}

.admonition.note {
    border-left: 4px solid var(--aw-master);
}

footer {
    color: var(--aw-footer);
}

footer hr {
    border-color: var(--aw-border);
}

@media (max-width: 768px) {
    [role='main'] {
        padding: 22px 18px;
    }

    .navbar .navbar-brand.brand-logo img {
        height: 26px;
    }

    .bs-sidebar .navbar-header {
        margin-bottom: 8px;
    }

    .bs-sidebar .navbar-header .navbar-toggler {
        align-items: center;
        background: var(--aw-surface-2);
        border: 1px solid var(--aw-border);
        border-radius: 12px;
        box-shadow: 0 4px 18px var(--aw-shadow-1);
        color: var(--aw-text);
        display: inline-flex;
        gap: 10px;
        min-height: 46px;
        padding: 10px 14px;
        width: 100%;
    }

    .bs-sidebar .navbar-header .navbar-toggler::after {
        content: 'Table of contents';
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1;
    }

    .bs-sidebar .navbar-header .navbar-toggler .fa {
        font-size: 18px;
        line-height: 1;
        min-width: 20px;
        text-align: center;
        transform: rotate(180deg);
        transition: transform 0.2s ease;
    }

    .bs-sidebar .navbar-header .navbar-toggler.collapsed .fa {
        transform: rotate(0);
    }

    .bs-sidebar .navbar-header .navbar-toggler:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw-master) 35%, transparent);
        outline: none;
    }
}

.nav-link[rel='next'] {
    display: none;
}

.nav-link[rel='prev'] {
    display: none;
}