img {
    max-width: 100%;
    height: auto;
    display: block;
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1,  h2,  h3,  h4,  h5,  h6 {
    font-family: var(--bs-heading-font-family);
    font-weight: var(--bs-heading-font-weight);
    line-height: var(--bs-heading-line-height);
    color: var(--bs-heading-color);

    margin-bottom: 1rem;
}

a {
    color: var(--bs-link-color);
    text-decoration: var(--bs-link-decoration);
    transition: color .15s ease-in-out;
}
a:hover,
a:focus {
    color: var(--bs-link-hover-color);
    text-decoration: var(--bs-link-hover-decoration);
}

/* Optional: visible keyboard focus */
a:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-hover-rgb), .4);
    outline-offset: 2px;
}

.cursor-pointer {
    cursor: pointer;
}

.smaller {
    font-size: .75em;
}
.smallest {
    font-size: .5em;
}

.form-control.form-control-lg {
    font-size: calc(1rem   * var(--ra-p-scale));
    border-radius: var(--bs-border-radius);
}

.form-control-invert {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-secondary);
}

.form-control-invert::placeholder {
    color: rgba(255,255,255,.7);
}

.form-control-invert:focus {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb), .25);
}

/* Base sizing shared by all buttons (optional) */
.btn {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.2;
    --bs-btn-border-radius: var(--bs-border-radius, .5rem);
}

/* Solid Primary */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    /* Hover / Active -> your darker shade */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);

    /* Focus ring uses your darker RGB */
    --bs-btn-focus-shadow-rgb: var(--bs-primary-hover-rgb);

    /* Disabled */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Solid Secondary (light background, dark text) */
.btn-secondary {
    --bs-btn-color: #111;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);

    /* Hover / Active -> your shade */
    --bs-btn-hover-color: #111;
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);

    --bs-btn-active-color: #111;
    --bs-btn-active-bg: var(--bs-secondary-hover);
    --bs-btn-active-border-color: var(--bs-secondary-hover);

    /* Focus ring uses your secondary hover RGB (subtle) */
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-hover-rgb);

    /* Disabled */
    --bs-btn-disabled-color: rgba(17,17,17,.65);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* Outline Primary */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);              /* text = border */
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-bg: var(--bs-primary-hover);     /* fills on hover */
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-hover-color: #fff;                     /* keep contrast */

    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
    --bs-btn-active-color: #fff;

    --bs-btn-focus-shadow-rgb: var(--bs-primary-hover-rgb);

    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);     /* text = border */
}

/* Outline Secondary */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);            /* text = border */
    --bs-btn-border-color: var(--bs-secondary);

    --bs-btn-hover-bg: var(--bs-secondary-hover);   /* fills on hover */
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-hover-color: #111;                     /* readable on light fill */

    --bs-btn-active-bg: var(--bs-secondary-hover);
    --bs-btn-active-border-color: var(--bs-secondary-hover);
    --bs-btn-active-color: #111;

    --bs-btn-focus-shadow-rgb: var(--bs-secondary-hover-rgb);

    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-secondary);   /* text = border */
}

@media only screen and (min-width: 768px) {
    .w-md-auto {width: auto !important;}
}

@media only screen and (min-width: 992px) {
    .w-lg-auto {width: auto !important;}

    h1, .h1 { font-size: calc(2.5rem * var(--ra-h-scale)); }
    h2, .h2 { font-size: calc(2rem   * var(--ra-h-scale)); }
    h3, .h3 { font-size: calc(1.25rem* var(--ra-h-scale)); }
    h4, .h4 { font-size: calc(1.125rem * var(--ra-h-scale)); }
    h5, .h5,
    h6, .h6 { font-size: calc(1rem   * var(--ra-h-scale)); }

    p {
        font-size: calc(1rem   * var(--ra-p-scale));
        margin-bottom: 2rem;
    }
}