:root {
    /* reuseable focus color (RGB) and translucent ring */
    --site-focus-rgb: 213,195,129;
    --site-focus: rgba(var(--site-focus-rgb), 0.25);
    --site-focus-border: #d5c381;
    --bs-navbar-hover-color:;
}

/* Apply gold focus ring to common form controls */
.form-control:focus,
.form-select:focus,
.form-control-color:focus,
.form-check-input:focus,
.form-check-input:focus-visible {
    border-color: var(--site-focus-border) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--site-focus) !important;
}

/* Slider thumb focus (WebKit & Firefox) */
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.25rem var(--site-focus) !important;
}
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 0.25rem var(--site-focus) !important;
}

/* Ensure select validation focus matches (if you want validation states unchanged, omit these) */
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-select.is-valid:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-select.is-invalid:focus {
    /* Only change ring color for neutral focus; keep valid/invalid logic if desired.
       Comment out the rules above for .is-valid / .is-invalid if you want the green/red rings preserved. */
    box-shadow: 0 0 0 0.25rem var(--site-focus) !important;
}

/* Accordion: use site gold focus ring like other form controls */
.accordion-button:focus,
.accordion-button:focus-visible {
    outline: 0;
    /* keep existing visual semantics but replace Bootstrap blue ring with site gold */
    box-shadow: 0 0 0 0.25rem var(--site-focus) !important;
}

/* When an accordion button is focused while expanded (not collapsed), ensure the active state still looks correct */
.accordion-button:not(.collapsed):focus,
.accordion-button:not(.collapsed):focus-visible {
    box-shadow: 0 0 0 0.25rem var(--site-focus) !important;
}

/* If you want the visible focus indicator on the accordion header itself (alternate markup), target the header */
.accordion-header:focus-within {
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--site-focus) !important;
}

.navbar-dark, .navbar[data-bs-theme=dark] {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(213,195,129, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}

/* Ensure content is not overlapped by the fixed-top navbar.
   The navbar includes a 75px-tall logo; adjust the padding to match.
   Use responsive padding so smaller screens keep previous spacing. */
.fixed-navbar-padding {
    padding-top: 4.75rem; /* ~76px to accommodate the logo height */
}

@media (max-width: 767.98px) {
    /* On smaller screens the navbar shrinks; preserve the original smaller padding */
    .fixed-navbar-padding {
        padding-top: 3.5rem;
    }
}

.footer-copyright {
    color: rgba(213,195,129, 0.75);
}