/* Brand: the HSC Northern Ireland teal is #00a3ad, but that bright cyan gives
   only ~3:1 with white text — below the 4.5:1 WCAG 2.1 AA minimum for the solid
   .btn-primary / bg-primary surfaces that carry white text. So the interactive
   primary is a darkened shade of the SAME HSC hue (~5.4:1 with white), which
   reads as HSC teal rather than the greener stock Tabler teal, while the true
   brand colour is kept in --hsc-teal for decorative use and for the dark sidebar
   (where full-strength teal has ample contrast). site.css loads after
   tabler-themes.min.css, so these override the theme variables. */
:root,
[data-bs-theme-primary="teal"] {
  --tblr-primary: #00767d;
  --tblr-primary-rgb: 0, 118, 125;
  --hsc-teal: #00a3ad;
  --hsc-teal-rgb: 0, 163, 173;
}

/* On the dark sidebar the full-strength brand teal clears contrast easily, so
   the nav accent and brand caption use the real HSC colour there. */
.navbar-vertical[data-bs-theme="dark"] {
  --tblr-primary: #00a3ad;
  --tblr-primary-rgb: 0, 163, 173;
}

/* Trust logo + "Policy Portal" subtitle, stacked and centred in the sidebar
   with a little breathing room from the top. */
.navbar-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: 100%;
  padding: .5rem 0 .75rem;
  line-height: 1;
  text-align: center;
}
.navbar-brand-image {
  width: 100%;
  max-width: 180px;
  height: auto;
}
.navbar-brand-subtitle {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hsc-teal, #00a3ad);
}

/* Tabler's light badge tints sit just under WCAG AA (e.g. bg-blue-lt text is
   only 4.36:1 on its tint); darken the text so tinted badges clear 4.5:1. */
.badge.bg-blue-lt { color: #0a4f96 !important; }
.badge.bg-purple-lt { color: #5b3bb8 !important; }
.badge.bg-yellow-lt { color: #7a5200 !important; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tblr-primary, #258cfb);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* An asp-validation-summary renders its wrapper (styled `alert alert-danger`)
   even with no errors, showing as an empty red bar. Hide it until it actually
   carries error content. */
.validation-summary-valid {
  display: none;
}

/* Tabler lays .alert out as a flex ROW, for its icon-beside-content variant.
   This app never uses that variant, but several alerts do carry more than one
   child — a heading plus body text, or one div per validation error — and each
   child was becoming its own narrow column, wrapping to about one word per
   line. Stack them instead. */
.alert {
  flex-direction: column;
  gap: 0.25rem;
}