/* Visual identity carried over from the first site (2022–2025): the logo green, the sand
   background of its testimonials section, the slate headings, Montserrat for headings and
   Roboto for text. Values were read from the old site's computed styles, not guessed. */
:root {
    --vaf-green: #276955;
    --vaf-green-dark: #1d5040;
    --vaf-green-deep: #143a2f;
    --vaf-green-light: #e6efeb;
    --vaf-sand: #cec9bd;
    --vaf-sand-light: #f1eee8;
    --vaf-slate: #364957;
    --vaf-text: #2b3338;

    --bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--vaf-text);
    --bs-link-color-rgb: 39, 105, 85;
    --bs-link-hover-color-rgb: 29, 80, 64;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-5, .navbar-brand {
    font-family: "Montserrat", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    color: var(--vaf-slate);
    font-weight: 700;
}

/* Buttons */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--vaf-green);
    --bs-btn-border-color: var(--vaf-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vaf-green-dark);
    --bs-btn-hover-border-color: var(--vaf-green-dark);
    --bs-btn-active-bg: var(--vaf-green-dark);
    --bs-btn-active-border-color: var(--vaf-green-dark);
    --bs-btn-focus-shadow-rgb: 39, 105, 85;
}

.btn-outline-brand {
    --bs-btn-color: var(--vaf-green);
    --bs-btn-border-color: var(--vaf-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vaf-green);
    --bs-btn-hover-border-color: var(--vaf-green);
    --bs-btn-active-bg: var(--vaf-green-dark);
    --bs-btn-active-border-color: var(--vaf-green-dark);
}

/* On the green hero and CTA band */
.btn-on-green {
    --bs-btn-color: var(--vaf-green-dark);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--vaf-green-deep);
    --bs-btn-hover-bg: var(--vaf-sand-light);
    --bs-btn-hover-border-color: var(--vaf-sand-light);
    font-weight: 500;
}

.btn-outline-on-green {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .7);
    --bs-btn-hover-color: var(--vaf-green-dark);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* Navigation — green bar with white links, as on the first site */
.site-nav {
    background: var(--vaf-green);
}

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

.site-nav .nav-link {
    font-size: .9rem;
    letter-spacing: .02em;
    opacity: .85;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.active {
    color: #fff;
    opacity: 1;
}

.site-nav .nav-link.active {
    box-shadow: inset 0 -2px 0 #fff;
}

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

.site-nav .navbar-toggler-icon {
    filter: invert(1);
}

/* Hero */
.hero {
    background: linear-gradient(160deg, var(--vaf-green) 0%, var(--vaf-green-dark) 60%, var(--vaf-green-deep) 100%);
    color: #fff;
}

.hero h1 {
    color: #fff;
    font-weight: 700;
    line-height: 1.15;
}

.hero .lead {
    color: rgba(255, 255, 255, .88);
}

.hero .hero-logo {
    width: 88px;
    height: 88px;
}

.hero .install-line {
    color: rgba(255, 255, 255, .75);
}

.hero .install-line a {
    color: #fff;
    text-decoration: underline;
}

.hero .install-line code {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    padding: .15rem .4rem;
    border-radius: .25rem;
}

/* Section backgrounds */
.bg-sand {
    background: var(--vaf-sand);
}

.bg-sand-light {
    background: var(--vaf-sand-light);
}

.bg-green {
    background: var(--vaf-green);
    color: #fff;
}

.bg-green h2 {
    color: #fff;
}

.section-title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--vaf-green);
    margin-top: .75rem;
}

.text-center .section-title::after {
    margin-left: auto;
    margin-right: auto;
}

/* Layer tabs on the home page */
.layer-tabs .nav-link {
    color: var(--vaf-green);
    font-weight: 500;
}

.layer-tabs .nav-link.active {
    background: var(--vaf-green);
    color: #fff;
}

/* The three samples differ a lot in length; one height keeps the section from jumping. */
.layer-tabs + .tab-content pre {
    height: 30rem;
    overflow: auto;
}

/* Page header band for inner pages */
.page-header {
    background: var(--vaf-sand-light);
    border-bottom: 1px solid var(--vaf-sand);
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: var(--vaf-green-light);
    color: var(--vaf-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* Code samples */
.code-block {
    position: relative;
    background: #13241f;
    border-radius: .5rem;
    margin-bottom: 1rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.code-block pre {
    margin: 0;
    padding: 2.5rem 1.25rem 1rem;
    overflow-x: auto;
    color: #e3eee8;
    font-size: .875rem;
    line-height: 1.6;
}

.code-block .copy-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: .75rem;
    padding: .15rem .5rem;
}

code {
    color: var(--vaf-green-dark);
}

.code-block code {
    color: inherit;
}

/* A flex child defaults to min-width: auto, so a code block inside it would push the whole
   page wider than a phone screen instead of scrolling on its own. */
.d-flex > .flex-grow-1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--vaf-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

/* Testimonials on sand, as on the first site */
.testimonial-card {
    background: #fff;
    border-radius: .5rem;
    padding: 1.5rem;
    height: 100%;
    border-left: 4px solid var(--vaf-green);
}

.testimonial-card p {
    font-style: italic;
}

.site-footer {
    background: var(--vaf-slate);
    color: rgba(255, 255, 255, .75);
}

.site-footer a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}