/* ==========================================================================
   site.css
   Shared across the home page and the case pages, loaded by
   includes/container-head.php after bootstrap.min.css.

   Holds the button system. Two things were wrong with the buttons before:

   1. They were Bootstrap blue, a colour that appears nowhere else on this
      site. Everything else is the brand teal #1e7f86.
   2. This project's bootstrap.min.css is a customised build. Its .btn-primary
      paints a gradient from --bs-btn-bg-1 and --bs-btn-bg-2 and sets
      "border: none", so the usual --bs-btn-bg override does nothing. The two
      gradient stops are redefined here instead, which also repaints the
      arrow rule at the bottom of that file, since it reads --bs-btn-bg-1 too.
   ========================================================================== */

:root {
  --site-accent: #1e7f86;
  --site-accent-hover: #17646a;
  --site-accent-press: #124d52;
  --site-accent-rgb: 30, 127, 134;

  /* The two stops the customised .btn-primary gradient reads. The light stop
     is the brand itself: white text on it measures 4.73:1, over the 4.5:1
     WCAG AA floor. A brighter teal looked better and measured 3.63:1, which
     is why it is not here. */
  --bs-btn-bg-1: #145f65;
  --bs-btn-bg-2: #1e7f86;
}

/* --- shared shape and motion --------------------------------------------- */

.btn {
  --bs-btn-border-radius: 4em;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: .62em;
  --bs-btn-padding-x: 1.45em;
  --bs-btn-border-width: 2px;
  --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);

  display: inline-flex;
  align-items: center;
  gap: .5em;
  transition:
    transform .18s cubic-bezier(.2, .8, .2, 1),
    box-shadow .18s cubic-bezier(.2, .8, .2, 1),
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.btn-lg {
  --bs-btn-padding-y: .72em;
  --bs-btn-padding-x: 1.7em;
  --bs-btn-font-size: 1.05rem;
}

/* The icon leans the way it points. */
.btn .bi {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

.btn:hover .bi-arrow-right    { transform: translateX(3px); }
.btn:hover .bi-arrow-down     { transform: translateY(3px); }
.btn:hover .bi-arrow-up-right { transform: translate(2px, -2px); }

/* --- primary: the brand gradient, raised --------------------------------- */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-active-shadow: none;

  box-shadow: 0 6px 14px rgba(var(--site-accent-rgb), .30);
}

/* The gradient is a "background" shorthand in the vendored file, so the
   hover and active states have to be restated the same way. */
.btn-primary:hover {
  background: linear-gradient(349deg, var(--site-accent-press) 0%, var(--site-accent) 60%);
  transform: translateY(-2px);
  box-shadow: 0 11px 20px rgba(var(--site-accent-rgb), .36);
}

.btn-primary:active,
.btn-primary:focus:active {
  background: linear-gradient(349deg, var(--site-accent-press) 0%, var(--site-accent-hover) 60%);
  transform: translateY(1px);
  box-shadow: 0 3px 7px rgba(var(--site-accent-rgb), .28);
}

/* --- outline: a raised white chip with brand ink ------------------------- */

.btn-outline-primary {
  --bs-btn-color: var(--site-accent);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: rgba(var(--site-accent-rgb), .4);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--site-accent);
  --bs-btn-hover-border-color: var(--site-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--site-accent-press);
  --bs-btn-active-border-color: var(--site-accent-press);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--site-accent);
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: rgba(var(--site-accent-rgb), .4);

  background-color: #fff;
  box-shadow: 0 4px 11px rgba(var(--site-accent-rgb), .16);
}

.btn-outline-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(var(--site-accent-rgb), .28);
}

.btn-outline-primary:active,
.btn-outline-primary:focus:active {
  transform: translateY(1px);
  box-shadow: 0 3px 7px rgba(var(--site-accent-rgb), .22);
}

/* --- focus: a ring that survives the transform --------------------------- */

.btn:focus-visible {
  outline: 3px solid rgba(var(--site-accent-rgb), .5);
  outline-offset: 3px;
}

/* --- links pick up the brand too ----------------------------------------- */

main a:not(.btn):not(.navbar-brand) {
  color: var(--site-accent);
  text-underline-offset: .18em;
}

main a:not(.btn):not(.navbar-brand):hover {
  color: var(--site-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn .bi {
    transition: none;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* --- navbar locale tag: a white chip on the right of the navbar ---------- */

.navbar-locale {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .42em 1em;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1;
  color: #33454b;
  background: #fff;
  border: 1px solid var(--home-rule, #e3ecef);
  border-radius: 4em;
  box-shadow: 0 2px 7px rgba(20, 40, 45, .07);
  white-space: nowrap;
}

.navbar-locale-pin {
  font-size: .95em;
  line-height: 1;
}