/* ==========================================================================
   Maroon buttons - trial

   Brief: "use maroon red for the buttons, let it be the secondary colour."

   Implementation note: --bs-secondary is referenced 191 times in style.css and
   currently carries the dark navy used for headings, body-text accents and the
   footer. Repointing that token to maroon would turn all of that maroon too,
   which is not what was asked for. So the maroon is applied to the button
   components directly and the text/footer colour is left alone.

   Loaded after fol.css so it wins without editing the vendor stylesheet.
   ========================================================================== */

/* ------------------------------------------------------- primary buttons -- */

/* The main call-to-action across the site (48 instances). Maroon now carries
   the action; navy stays as the brand and structural colour. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--fol-accent);
  --bs-btn-border-color: var(--fol-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fol-accent-dark);
  --bs-btn-hover-border-color: var(--fol-accent-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--fol-accent-dark);
  --bs-btn-active-border-color: var(--fol-accent-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--fol-accent);
  --bs-btn-disabled-border-color: var(--fol-accent);
  background-color: var(--fol-accent);
  border-color: var(--fol-accent);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--fol-accent-dark) !important;
  border-color: var(--fol-accent-dark) !important;
  color: #fff !important;
}

/* The template's hover-fill slides a panel across the button; it reads the
   old primary colour, so it needs repointing too. */
.btn-primary.btn-hover1::before,
.btn-primary.btn-hover2::before,
.btn-primary.btn-hover1::after,
.btn-primary.btn-hover2::after {
  background-color: var(--fol-accent-dark);
}

/* ----------------------------------------------------- secondary buttons -- */

/* Kept as a quiet outline. Two solid buttons competing is what makes a page
   feel shouty, and the maroon primary is doing the work now. */
.btn-secondary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-primary-border-subtle);
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
  --bs-btn-hover-border-color: var(--bs-primary);
  background-color: transparent;
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--bs-primary-bg-subtle) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary-text-emphasis) !important;
}
.btn-secondary.btn-hover1::before,
.btn-secondary.btn-hover2::before,
.btn-secondary.btn-hover1::after,
.btn-secondary.btn-hover2::after {
  background-color: var(--bs-primary-bg-subtle);
}

/* -------------------------------------------------------------- outlines -- */

.btn-outline-primary {
  --bs-btn-color: var(--fol-accent);
  --bs-btn-border-color: var(--fol-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fol-accent);
  --bs-btn-hover-border-color: var(--fol-accent);
  color: var(--fol-accent);
  border-color: var(--fol-accent);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--fol-accent) !important;
  border-color: var(--fol-accent) !important;
  color: #fff !important;
}

/* --------------------------------------------------------- emergency CTA -- */

/* .btn-accent was the emergency colour and is now the same maroon as primary,
   so it would no longer stand apart. Give it the inverse treatment: a filled
   dark maroon so the emergency line still reads as the most urgent control. */
.btn-accent {
  background-color: var(--fol-accent-dark);
  border-color: var(--fol-accent-dark);
  color: #fff;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: #55131E !important;
  border-color: #55131E !important;
  color: #fff !important;
}

/* --------------------------------------------------------- on dark areas -- */

/* Maroon on the dark navy footer/CTA band sits at 1.72:1 and is unreadable,
   so filled buttons in those contexts use the lifted variant. */
.bg-secondary .btn-primary,
.footer .btn-primary,
.content-wrapper.style-5 .btn-primary {
  background-color: var(--fol-accent-on-dark);
  border-color: var(--fol-accent-on-dark);
  color: #16151A;
}
.bg-secondary .btn-primary:hover,
.footer .btn-primary:hover,
.content-wrapper.style-5 .btn-primary:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--fol-accent-dark) !important;
}

/* ------------------------------------------------------------ form focus -- */

/* Focus rings follow the action colour so the form reads as one system. */
.form-control:focus,
.default-select .form-select:focus,
.form-select:focus {
  border-color: var(--fol-accent);
  box-shadow: 0 0 0 3px rgba(var(--fol-accent-rgb), .16);
}