/* Campification theme.
   Loaded after Bootstrap on purpose: Bootstrap's defaults (blue, rounded, system font) would
   otherwise win over site.css. Colours, button shape, fonts and the content width are set here,
   mostly through Bootstrap's own CSS variables so existing markup follows without changes. */

:root {
    /* Palette */
    --accent: #c19957;            /* gold: buttons, highlights, headings on dark backgrounds */
    --accent-hover: #a88445;
    --accent-strong: #8a6a33;     /* darker gold for text and links on light backgrounds (contrast) */
    --accent-strong-hover: #6f5527;
    --on-accent: #121414;         /* text on a gold background */
    --surface-black: #000000;
    --surface-dark: #121414;      /* navigation, cards, footer */
    --surface-alt: #1c1f1f;       /* alternate dark section */
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #dbdbdb;

    /* Centred content column */
    --content-width: 1040px;

    /* Older variable names used across the stylesheets */
    --primary-color: var(--accent);
    --primary-hover: var(--accent-hover);
    --primary-light: #d4b47e;
    --primary-dark: var(--accent-strong);
    --nav-text-hover: var(--accent);

    /* Bootstrap */
    --bs-primary: #c19957;
    --bs-primary-rgb: 193, 153, 87;
    --bs-link-color: #8a6a33;
    --bs-link-color-rgb: 138, 106, 51;
    --bs-link-hover-color: #6f5527;
    --bs-link-hover-color-rgb: 111, 85, 39;
    --bs-font-sans-serif: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-weight: 300;
    --bs-focus-ring-color: rgba(193, 153, 87, 0.35);
}

body {
    font-family: var(--bs-font-sans-serif);
    font-weight: 300;
}

/* ---------- Content column ---------- */

@media (min-width: 1200px) {
    .container,
    .sb-container-fixed {
        max-width: var(--content-width);
    }

    /* Pages that need the room (map and card grid) opt out with ViewData["BodyClass"] = "sb-page--wide" */
    .sb-page--wide .container {
        max-width: 1140px;
    }

    .sb-page--wide .sb-container-fixed {
        max-width: 1200px;
    }
}

@media (min-width: 1400px) {
    .sb-page--wide .container {
        max-width: 1320px;
    }
}

/* ---------- Buttons: one shape everywhere ---------- */

.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-padding-x: 30px;
    --bs-btn-padding-y: 12px; /* 50px tall with the 1px border */
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 300;
    --bs-btn-font-family: var(--bs-font-sans-serif);
    --bs-btn-focus-shadow-rgb: 193, 153, 87;
    letter-spacing: 2px;
    text-transform: none;
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-border-radius: 0;
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 0.875rem;
    letter-spacing: 1px;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-border-radius: 0;
    --bs-btn-padding-x: 36px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 1.125rem;
}

/* Close buttons and icon-only toggles are not text buttons */
.btn-close,
.navbar-toggler {
    letter-spacing: normal;
}

.btn-primary {
    --bs-btn-color: var(--on-accent);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-color: var(--on-accent);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-strong);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--accent-strong);
    --bs-btn-disabled-border-color: var(--accent);
}

.btn-outline-light {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
}

.btn-link {
    --bs-btn-color: var(--accent-strong);
    --bs-btn-hover-color: var(--accent-strong-hover);
    --bs-btn-active-color: var(--accent-strong-hover);
}

/* ---------- Bootstrap components that carried the old blue ---------- */

.text-primary {
    color: var(--accent-strong) !important;
}

.bg-primary,
.badge.bg-primary,
.text-bg-primary {
    background-color: var(--accent) !important;
    color: var(--on-accent) !important;
}

/* Bootstrap pairs bg-primary with white text; on gold it has to be dark */
.bg-primary.text-white,
.bg-primary .text-white,
.bg-primary .text-white-50,
.bg-primary a:not(.btn) {
    color: var(--on-accent) !important;
}

.border-primary {
    border-color: var(--accent) !important;
}

.link-primary {
    color: var(--accent-strong) !important;
}

.pagination {
    --bs-pagination-color: var(--accent-strong);
    --bs-pagination-hover-color: var(--accent-strong-hover);
    --bs-pagination-focus-color: var(--accent-strong-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(193, 153, 87, 0.25);
    --bs-pagination-active-color: var(--on-accent);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-border-radius: 0;
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--on-accent);
    --bs-nav-pills-link-active-bg: var(--accent);
    --bs-nav-pills-border-radius: 0;
}

.nav {
    --bs-nav-link-color: var(--accent-strong);
    --bs-nav-link-hover-color: var(--accent-strong-hover);
}

.nav-pills .nav-link:not(.active),
.nav-tabs .nav-link:not(.active) {
    color: var(--accent-strong);
}

.nav-pills .nav-link.active {
    color: var(--on-accent);
}

.dropdown-menu {
    --bs-dropdown-link-active-color: var(--on-accent);
    --bs-dropdown-link-active-bg: var(--accent);
}

.list-group {
    --bs-list-group-active-color: var(--on-accent);
    --bs-list-group-active-bg: var(--accent);
    --bs-list-group-active-border-color: var(--accent);
}

.progress {
    --bs-progress-bar-bg: var(--accent);
    --bs-progress-bar-color: var(--on-accent);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(193, 153, 87, 0.25);
}

.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(193, 153, 87, 0.25);
}

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

/* Dark tick and dot so they read on gold */
.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23121414' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23121414'/%3e%3c/svg%3e");
}

/* ---------- Links ---------- */

a {
    color: var(--accent-strong);
}

a:hover {
    color: var(--accent-strong-hover);
}

/* Gold reads well on the dark surfaces, so links there use the brighter accent */
.sb-section-opt-dark a:not(.btn),
.bg-dark a:not(.btn) {
    color: var(--accent);
}

/* Gold controls carry dark text */
.skip-to-main-content,
.skip-to-main-content:focus,
.back-to-top,
.back-to-top:hover {
    color: var(--on-accent);
}

.sb-section-opt-dark .text-primary,
.site-footer .text-primary,
.bg-dark .text-primary,
.sb-navigation .text-primary {
    color: var(--accent) !important;
}

/* ---------- Navigation ---------- */

.sb-navigation .navbar-brand,
.sb-navigation__brand {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
}

.sb-navigation .navbar-nav .nav-link,
.sb-navigation__link {
    color: var(--text-on-dark-muted) !important;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 17px;
}

.sb-navigation .navbar-nav .nav-link:hover,
.sb-navigation .navbar-nav .nav-link:focus,
.sb-navigation__link.active {
    color: var(--accent) !important;
    background-color: transparent;
}

.sb-navigation .navbar-nav {
    align-items: center;
}

.sb-navigation .btn {
    --bs-btn-padding-x: 22px;
    --bs-btn-padding-y: 8px;
    --bs-btn-font-size: 0.85rem;
}

/* The collapsed menu stacks its items; left-align them there */
@media (max-width: 1199.98px) {
    .sb-navigation .navbar-nav {
        align-items: stretch;
    }

    .sb-navigation #auth-buttons {
        padding: 1rem;
    }
}

/* ---------- Compact buttons inside control rows ---------- */

/* Buttons that sit beside inputs match the input height instead of the 50px call-to-action size */
.input-group > .btn,
.btn.btn-control {
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 0.375rem;
    letter-spacing: 1px;
}