/* VegSafe.
 *
 * The theme. Palette, typography and chrome come from the VegSafe design
 * template: a paper-and-forest palette, a serif for anything that carries a
 * heading, and hairline rules instead of boxes. Bootstrap stays underneath —
 * every page is still written in Bootstrap classes — but its variables are
 * repointed here, so a page inherits the look without being rewritten.
 *
 * Scope §3.2: this works on a phone, a tablet and a computer, and no step may
 * require a large screen. Nothing below introduces a desktop-only layout.
 *
 * Scope §14: the visual language has a job in the legal positioning. A record
 * should read as the landholder's own document — paper, a stamp, a serif — and
 * not as a decision handed down by something official.
 */

:root {
    /* From the design template. The teal is the mark's own colour. */
    --vs-ink: #142522;
    --vs-forest: #173f38;
    --vs: #236c6f;
    --vs-dark: #195b5e;
    --vs-light: #2e8c99;
    --vs-sage: #b8cab7;
    --vs-cream: #f3f0e8;
    --vs-paper: #fbfaf6;
    --vs-line: rgba(20, 37, 34, .18);
    --vs-muted: #5c6a67;
    --vs-tint: #e7f1f2;
    --vs-stamp: #8a3a2e;

    --vs-serif: Georgia, 'Times New Roman', Times, serif;

    /* Bootstrap, repointed. */
    --bs-primary: var(--vs);
    --bs-primary-rgb: 35, 108, 111;
    --bs-body-bg: var(--vs-paper);
    --bs-body-bg-rgb: 251, 250, 246;
    --bs-body-color: var(--vs-ink);
    --bs-body-color-rgb: 20, 37, 34;
    --bs-secondary-color: var(--vs-muted);
    --bs-tertiary-bg: var(--vs-cream);
    --bs-border-color: var(--vs-line);
    --bs-border-radius: 3px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 4px;
    --bs-border-radius-xl: 6px;
    --bs-link-color: var(--vs-dark);
    --bs-link-color-rgb: 25, 91, 94;
    --bs-link-hover-color: var(--vs-ink);
    --bs-body-font-family: Arial, Helvetica, sans-serif;
    --bs-body-line-height: 1.6;
    --bs-emphasis-color: var(--vs-ink);
}

/* The home page is the only page with in-page anchors, and a jump that lands
   without any sense of travel loses the reader. Turned off below for anyone who
   has asked for less motion. */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--vs-paper);
    color: var(--vs-ink);
}

/* -------------------------------------------------------------- typography */

/* Headings are set in a serif, at the weight the template uses — regular, not
   bold. A form heading and a landing page heading are then the same voice. */
h1, h2, h3,
.h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--vs-serif);
    font-weight: 400;
    letter-spacing: -.03em;
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--vs-serif);
    font-weight: 400;
    letter-spacing: -.02em;
}

/* Small caps rule above a heading, standing in for a subtitle. */
.vs-label {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--bs-body-font-family);
    color: var(--vs);
}

.vs-label::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    flex: 0 0 auto;
}

.vs-label-light {
    color: var(--vs-sage);
}

.lead {
    color: var(--vs-muted);
}

.text-body-secondary {
    color: var(--vs-muted) !important;
}

/* ------------------------------------------------------------------ chrome */

/* The full-bleed gutter. Chrome and the home page share it, so the mark in the
   header sits on the same line as everything below it, at every width. It is a
   clamp rather than a breakpoint: the page keeps its proportions from a phone to
   a wide monitor without a step change. */
.vs-shell {
    width: 100%;
    padding-left: clamp(24px, 4.8vw, 78px);
    padding-right: clamp(24px, 4.8vw, 78px);
}


/* The public header sits on paper: the mark is teal and reads at its own
   weight, so nothing is knocked out or boxed. */
.vs-public-nav {
    background: var(--vs-paper);
    border-bottom: 1px solid var(--vs-line);
}

.vs-public-nav .nav-link {
    color: var(--vs-ink);
    font-weight: 600;
    font-size: 14px;
}

.vs-public-nav .nav-link:hover,
.vs-public-nav .nav-link:focus {
    color: var(--vs-dark);
}

/* The signed-in bar is forest, so the application reads as a different place
   from the public site without becoming a different product. */
.vs-nav {
    background: var(--vs-forest);
}

.vs-nav .navbar-brand,
.vs-nav .nav-link,
.vs-nav .navbar-text {
    color: #fff;
}

.vs-nav .nav-link {
    font-size: 14px;
    font-weight: 600;
}

.vs-nav .nav-link:hover,
.vs-nav .nav-link:focus {
    color: var(--vs-sage);
}

.vs-nav .nav-link.active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--vs-sage);
}

.vs-nav .navbar-brand img {
    height: 30px;
    width: auto;
}

.vs-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, .5);
}

.vs-nav .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

.vs-nav .dropdown-menu {
    --bs-dropdown-border-color: var(--vs-line);
    --bs-dropdown-border-radius: 3px;
    --bs-dropdown-link-active-bg: var(--vs);
}

/* The dark footer, shared by both layouts. */
.vs-footer {
    background: #0f2420;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
}

.vs-footer a {
    color: #fff;
    text-decoration: none;
}

.vs-footer a:hover {
    color: var(--vs-sage);
}

.vs-footer strong {
    color: #fff;
}

.vs-footer hr,
.vs-footer .border-top {
    border-color: rgba(255, 255, 255, .13) !important;
}

/* A page's own title bar, so a record reads as a document rather than a form. */
.vs-title {
    background: var(--vs-forest);
    color: #fff;
    border-radius: 3px;
}

.vs-title h1, .vs-title h2, .vs-title .h1, .vs-title .h2 {
    color: #fff;
}

.vs-title a {
    color: var(--vs-sage);
}

.vs-title .text-body-secondary,
.vs-title .small {
    color: rgba(255, 255, 255, .7) !important;
}

/* ------------------------------------------------------------------- cards */

.card {
    --bs-card-border-color: var(--vs-line);
    --bs-card-bg: #fff;
    --bs-card-cap-bg: var(--vs-cream);
}

.card-header.vs-head {
    background: var(--vs-forest);
    color: #fff;
    border-bottom: 0;
}

.card-header.vs-head a {
    color: var(--vs-sage);
}

.card-header.vs-head .btn {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .5);
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* One criterion per row, separated rather than boxed. */
.vs-crit {
    border-bottom: 1px solid var(--vs-line);
    padding: .6rem 0;
}

.vs-crit:last-child {
    border-bottom: 0;
}

/* ------------------------------------------------------- the filed document */

.vs-stamp {
    border: 3px double var(--vs-stamp);
    color: var(--vs-stamp);
    padding: .6rem 1rem;
    transform: rotate(-2deg);
    display: inline-block;
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- register */

.list-group {
    --bs-list-group-border-color: var(--vs-line);
    --bs-list-group-bg: #fff;
}

.list-group-item.active {
    background: var(--vs-cream);
    border-color: var(--vs-line);
    color: inherit;
    box-shadow: inset 3px 0 0 var(--vs);
}

/* A long list beside a detail pane scrolls on its own, so the detail stays put.
   Below the breakpoint it is one column and the cap comes off, because a pane
   that scrolls inside a phone screen is a trap. */
.vs-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 991px) {
    .vs-scroll {
        max-height: none;
        overflow-y: visible;
    }
}

/* ---------------------------------------------------------------- semantics */

/* Bootstrap's defaults are a web palette — a bright green, a school-bus yellow —
   and they read as alien against paper and forest. These are the same six roles
   in the same colours the rest of the product uses. The red is the stamp's red,
   so a warning and a filed record are recognisably the same hand. */
:root {
    --bs-success: #3f6d4a;
    --bs-success-rgb: 63, 109, 74;
    --bs-warning: #a2711f;
    --bs-warning-rgb: 162, 113, 31;
    --bs-danger: var(--vs-stamp);
    --bs-danger-rgb: 138, 58, 46;
    --bs-info: var(--vs);
    --bs-info-rgb: 35, 108, 111;
    --bs-secondary: var(--vs-muted);
    --bs-secondary-rgb: 92, 106, 103;
    --bs-light: var(--vs-cream);
    --bs-light-rgb: 243, 240, 232;
    --bs-dark: var(--vs-ink);
    --bs-dark-rgb: 20, 37, 34;

    --bs-success-bg-subtle: #e6eee7;
    --bs-success-border-subtle: #bfd3c3;
    --bs-warning-bg-subtle: #f6eddc;
    --bs-warning-border-subtle: #e3cfa6;
    --bs-danger-bg-subtle: #f5e4e1;
    --bs-danger-border-subtle: #e0bdb7;
    --bs-info-bg-subtle: var(--vs-tint);
    --bs-info-border-subtle: #b9d6d8;
    --bs-secondary-bg-subtle: var(--vs-cream);
    --bs-secondary-border-subtle: #d8d3c5;
}

/* Darkened from Bootstrap's yellow, so the black it pairs with no longer reads. */
.text-bg-warning,
.badge.text-bg-warning {
    color: #fff !important;
}

.alert-success { --bs-alert-color: #2c4d34; }
.alert-warning { --bs-alert-color: #6f4d14; }
.alert-danger { --bs-alert-color: #6b2d23; }
.alert-info { --bs-alert-color: var(--vs-dark); }

/* ------------------------------------------------------------------ pieces */

.btn {
    --bs-btn-border-radius: 3px;
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: 14px;
    font-family: var(--bs-body-font-family);
}

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

.btn-outline-primary {
    --bs-btn-color: var(--vs-dark);
    --bs-btn-border-color: var(--vs);
    --bs-btn-hover-bg: var(--vs);
    --bs-btn-hover-border-color: var(--vs);
}

.btn-outline-secondary {
    --bs-btn-color: var(--vs-ink);
    --bs-btn-border-color: var(--vs-line);
    --bs-btn-hover-bg: var(--vs-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--vs-ink);
}

.form-control,
.form-select {
    --bs-border-radius: 3px;
    border-color: var(--vs-line);
    background-color: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vs);
    box-shadow: 0 0 0 .2rem rgba(35, 108, 111, .18);
}

.form-label {
    font-weight: 600;
    font-size: 14px;
}

a {
    color: var(--vs-dark);
}

.text-vs {
    color: var(--vs-dark) !important;
}

.bg-vs-tint {
    background-color: var(--vs-tint) !important;
}

.bg-vs-cream {
    background-color: var(--vs-cream) !important;
}

.badge.text-bg-vs {
    background-color: var(--vs) !important;
    color: #fff !important;
}

.bg-white {
    background-color: #fff !important;
}

.alert {
    --bs-alert-border-radius: 3px;
}

/* Legal documents are long prose. A comfortable measure and enough spacing to be
   read on a phone rather than skimmed. */
.legal-document {
    line-height: 1.7;
}

.legal-document h1 {
    font-size: 1.9rem;
    margin-bottom: 1rem;
}

.legal-document h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.legal-document ul {
    margin-bottom: 1rem;
}

/* Touch targets. A thumb in a ute is not a mouse on a desk. */
.btn-lg,
.form-control-lg,
.form-select-lg {
    min-height: 3rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}