/*
 * Benin flag-color override for sitewide accent classes.
 *
 * assets/plugins/boostrap/colors.css (a ~9,900-line generated Bootstrap
 * utility file, shared unchanged across every country site) hardcodes
 * .btn-primary and .btn-info directly to fixed hex values, so overriding
 * core.css's own --primary variable alone has no effect. This file loads
 * AFTER colors.css on every layout so it wins the cascade instead.
 *
 * NOTE: never let an asterisk immediately precede a forward slash anywhere
 * in this comment's prose -- that two-character sequence closes a CSS
 * comment early and silently drops this whole root block. Root-caused on
 * Nigeria's build: a comment describing two variable names side by side
 * with a slash between them closed early, and every button and plain link
 * sitewide rendered transparent as a result -- a bug that only shows up
 * when you click through the real page, not in a code read. If you edit
 * this file, search it for that asterisk-slash sequence afterward and
 * confirm the only hit is this file's own closing marker below.
 */

:root {
  --flag-primary: #008751;
  --flag-primary-dark: #00492B;
  --flag-accent: #FCD116;
  --flag-accent-dark: #C4A400;
}

.btn-primary { background: var(--flag-primary) !important; border-color: var(--flag-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--flag-primary-dark) !important; border-color: var(--flag-primary-dark) !important; }
.btn-outline-primary { color: var(--flag-primary) !important; border-color: var(--flag-primary) !important; }
.btn-outline-primary:hover { background: var(--flag-primary) !important; color: #fff !important; }

.btn-info { background: var(--flag-accent) !important; border-color: var(--flag-accent) !important; color: #fff !important; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: var(--flag-accent-dark) !important; border-color: var(--flag-accent-dark) !important; }
.btn-outline-info { color: var(--flag-accent) !important; border-color: var(--flag-accent) !important; }
.btn-outline-info:hover { background: var(--flag-accent) !important; color: #fff !important; }

.text-primary { color: var(--flag-primary) !important; }
.bg-primary { background-color: var(--flag-primary) !important; }
.text-info { color: var(--flag-accent) !important; }
.bg-info { background-color: var(--flag-accent) !important; }

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active { color: var(--flag-primary) !important; }

a:not(.btn) { color: var(--flag-primary); }
a:not(.btn):hover { color: var(--flag-primary-dark); }

.custom-switch-input:checked ~ .custom-switch-indicator { background: var(--flag-primary) !important; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--flag-primary) !important; border-color: var(--flag-primary) !important; }