/* Civic Platform theme — agency branding over Bootstrap 5.3 (self-hosted). */
:root {
  --civic-teal: #0f5c63;
  --civic-teal-dark: #0a4247;
  --civic-yellow: #f2c14e;
  --civic-ink: #10242b;
  /* Secondary text on white was #6c757d (4.68:1, right on the line); darken it so muted labels,
     grid headers and form help text stay legible in light mode. */
  --bs-secondary-color: #56676d;
}
body { color: var(--civic-ink); }
.navbar .nav-link { color: #234; border-bottom: 3px solid transparent; padding: .55rem .7rem; }
.navbar .nav-link:hover { color: var(--civic-teal); }
.navbar .nav-link.active { color: var(--civic-teal); border-bottom-color: var(--civic-yellow); }
.btn-primary { --bs-btn-bg: var(--civic-teal); --bs-btn-border-color: var(--civic-teal); --bs-btn-hover-bg: var(--civic-teal-dark); --bs-btn-hover-border-color: var(--civic-teal-dark); --bs-btn-active-bg: var(--civic-teal-dark); }
.btn-outline-primary { --bs-btn-color: var(--civic-teal); --bs-btn-border-color: var(--civic-teal); --bs-btn-hover-bg: var(--civic-teal); }
a { color: var(--civic-teal); }
.hero { background: linear-gradient(135deg, var(--civic-teal) 0%, #123f52 55%, #1b2f45 100%); }
.tile { transition: transform .12s ease, box-shadow .12s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(16, 36, 43, .12); }
.card { border-color: #dfe6e8; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.badge.text-bg-light { background: #f4f7f8 !important; }
.announcement { border-bottom: 1px solid #e3e8ea; }
.page > h1:first-child, .page > .d-flex:first-child h1 { letter-spacing: -.02em; }
dl.row dt { color: #5a6b70; font-weight: 500; }
@media (max-width: 575.98px) { .display-6 { font-size: 2rem; } }

/* Top-fixed black navigation bar. One pinned row on every page: brand, the four dropdowns, the
   compact search box and the initials avatar. The staff section bar rides underneath it. */
.civic-nav-sticky { position: sticky; top: 0; z-index: 1030; }
.civic-topbar { background: #0b0f11; border-bottom: 1px solid #23282b; padding: .35rem 0; }
.civic-topbar .navbar-brand { color: #fff; font-weight: 600; letter-spacing: -.01em; margin-right: 1rem; }
.civic-topbar .navbar-brand:hover, .civic-topbar .navbar-brand:focus { color: #fff; }
.civic-brand-text { font-size: 1rem; line-height: 1.1; }
.civic-topbar .nav-link { color: rgba(255, 255, 255, .78); border-bottom: 3px solid transparent; padding: .55rem .8rem; }
.civic-topbar .nav-link:hover, .civic-topbar .nav-link:focus { color: #fff; }
.civic-topbar .nav-link.show, .civic-topbar .nav-link.active { color: #fff; border-bottom-color: var(--civic-yellow); }
.civic-topbar .navbar-toggler { border-color: rgba(255, 255, 255, .3); }
.civic-topsearch { flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.civic-topsearch input { min-width: 0; }
.civic-topsearch .btn { flex: 0 0 auto; }
.civic-topsearch input { background: #161c1f; border-color: #2b3438; color: #fff; }
.civic-topsearch input::placeholder { color: #8b9aa0; }
.civic-topsearch input:focus { background: #161c1f; color: #fff; border-color: var(--civic-teal); box-shadow: none; }
/* S1 language picker: sits beside Global Search, never wraps the code badge. */
.civic-lang-picker .btn { white-space: nowrap; }
.civic-lang-picker .dropdown-menu { min-width: 9rem; }
.civic-lang-picker .dropdown-item.active { color: #fff; background: var(--civic-teal); }
.civic-subnav { background: #12181b; border-top: 1px solid #23282b; }
.civic-subnav .nav-link { color: #9fb0b6; }
.civic-subnav .nav-link:hover { color: #fff; }
.civic-subnav .nav-link.active { color: #fff; font-weight: 600; }
.civic-profile-toggle { border-radius: 999px; padding: .25rem; }
.civic-nav-actions { flex: 0 0 auto; }
.civic-brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.civic-topbar .navbar-toggler:focus { box-shadow: none; }
.civic-profile-toggle::after { color: rgba(255, 255, 255, .7); margin-left: .15rem; }
.civic-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--civic-teal); color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .03em; line-height: 1;
}
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background: var(--civic-teal); color: #fff; }
.civic-profile-menu { min-width: 16rem; }
.civic-footer { background: #0b0f11; color: #8b9aa0; }
.civic-footer strong { color: #fff; }
.civic-footer a { color: #9fb0b6; text-decoration: none; }
.civic-footer a:hover { color: #fff; }

/* Account Manager (My Account). The tab strip and section headers mirror the reference portal:
   a light header band per section, a right-aligned action button, dense data grids. */
.civic-account-tabs { border-bottom-color: #cfd9dc; }
.civic-account-tabs .nav-link {
  color: #3b4d53; border-radius: 0; padding: .55rem 1rem;
  border-bottom: 3px solid transparent;
}
.civic-account-tabs .nav-link:hover { border-bottom-color: #d7e2e4; }
.civic-account-tabs .nav-link.active {
  color: var(--civic-teal); font-weight: 600;
  background: #fff; border-bottom-color: var(--civic-teal);
}
.civic-panel { background: #f7fafa; border-color: #d7e2e4; }
.civic-section .civic-section-head {
  background: #eef4f5; border-bottom: 1px solid #d7e2e4;
  padding: .6rem 1rem;
}
.civic-section .civic-section-head h2, .civic-section .civic-section-head h1 { color: #24444a; }
.civic-grid { margin: 0; }
.civic-grid > thead > tr > th {
  background: #f7fafa; color: #4a6167; font-weight: 600;
  font-size: .8rem; text-transform: none; border-bottom-width: 1px;
}
.civic-grid > tbody > tr > td { font-size: .9rem; }

/* Dark theme. Bootstrap 5.3 flips its own components from data-bs-theme; the portal's custom
   surfaces (section bands, panels, grid headers, footer) need their own dark values. */
[data-bs-theme="dark"] body { color: var(--bs-body-color); }
/* Keep the light-mode secondary colour from leaking into dark mode: on a dark surface #56676d
   is 2.6:1. */
[data-bs-theme="dark"] { --bs-secondary-color: #a9bcc2; --bs-tertiary-color: #93a7ad; }

/* Links and outline buttons: the brand teal (#0f5c63) is unreadable on a dark page (1.6:1), so
   dark mode lightens it to the same hue at a contrast-safe luminance. Scoped to the page body so
   the black bar's own link colours stay as designed. */
[data-bs-theme="dark"] main a:not(.btn):not(.dropdown-item):not(.nav-link),
[data-bs-theme="dark"] .civic-footer a { color: #79cdd5; }
[data-bs-theme="dark"] main a:not(.btn):not(.dropdown-item):not(.nav-link):hover,
[data-bs-theme="dark"] .civic-footer a:hover { color: #a6e2e7; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #79cdd5; --bs-btn-border-color: #3f7f86; --bs-btn-hover-bg: #0f5c63; --bs-btn-hover-border-color: #0f5c63; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0f5c63; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c3ced2; --bs-btn-border-color: #55656b; --bs-btn-hover-bg: #2b3438; --bs-btn-hover-border-color: #55656b; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f08a8a; --bs-btn-border-color: #7a3a3a; --bs-btn-hover-bg: #5c2323; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-link { color: #79cdd5; }
/* `bg-white` / `bg-light` are used as card-header surfaces across the templates. Left literal,
   they stay white while the text turns light — invisible. Map them onto the dark surfaces. */
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .bg-light { background-color: #182125 !important; }
[data-bs-theme="dark"] .badge.text-bg-light { color: #d7e2e4 !important; }
[data-bs-theme="dark"] .text-body-secondary { color: #a9bcc2; }
/* The active page link sits on Bootstrap's primary fill, so the scoped dark link colour turns it
   teal-on-blue (2.5:1). Paint the active page with the dark surface colours instead. */
[data-bs-theme="dark"] .pagination .page-item.active .page-link {
  color: #06232b; background-color: #79cdd5; border-color: #79cdd5;
}
[data-bs-theme="dark"] .civic-panel { background: #151d21; border-color: #26343a; }
[data-bs-theme="dark"] .civic-section .civic-section-head { background: #182125; border-color: #26343a; }
[data-bs-theme="dark"] .civic-section .civic-section-head h1,
[data-bs-theme="dark"] .civic-section .civic-section-head h2 { color: #dfe9eb; }
[data-bs-theme="dark"] .civic-grid > thead > tr > th { background: #151d21; color: #a9bcc2; }
[data-bs-theme="dark"] dl.row dt { color: #93a7ad; }
[data-bs-theme="dark"] .card { border-color: #26343a; }
[data-bs-theme="dark"] .civic-account-tabs .nav-link { color: #a9bcc2; }
[data-bs-theme="dark"] .civic-account-tabs .nav-link.active { background: transparent; color: #fff; }
[data-bs-theme="dark"] .civic-account-tabs { border-bottom-color: #26343a; }
[data-bs-theme="dark"] .badge.text-bg-light { background: #1e2a2f !important; color: #d7e2e4; }
[data-bs-theme="dark"] .hero { background: linear-gradient(135deg, #0b3b40 0%, #10222c 55%, #0d1a24 100%); }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #151d21; --bs-dropdown-border-color: #26343a; }
[data-bs-theme="dark"] .civic-topsearch input { background: #0f1417; }

/* Bootstrap's .text-danger/.text-success/.link-success and the outline-success button use the raw
   palette colour in both themes: #dc3545 and #198754 are 4.1:1 on the dark surface (#0f1417),
   under WCAG AA for body text. Lighten them in dark mode only (8.5:1 and 10.9:1). */
[data-bs-theme="dark"] .text-danger { color: #ff8f9a !important; }
[data-bs-theme="dark"] .text-success { color: #6fdc9b !important; }
[data-bs-theme="dark"] .link-success { color: #6fdc9b !important; }
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #6fdc9b; --bs-btn-border-color: #3f7f5a;
  --bs-btn-hover-bg: #1d4a32; --bs-btn-hover-border-color: #3f7f5a; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1d4a32; --bs-btn-active-color: #fff;
}

/* The footer address block puts its mailto link inside running text, where colour alone must not
   be the only cue (WCAG 1.4.1). Standalone d-block links already own their line. */
.civic-footer a:not(.d-block) { text-decoration: underline; }

/* WCAG 2.4.7 focus visible. Bootstrap paints .btn:focus with --bs-btn-focus-box-shadow, which is
   fully transparent for the default and outline variants — a keyboard user could not see which
   button had focus. Links only got Chrome's 1px default ring. Give every focusable control one
   consistent ring (teal on light, the light teal on dark: 8.1:1 and 10.9:1 against their surfaces). */
:focus-visible { outline: 2px solid #0f5c63; outline-offset: 2px; }
/* .btn:focus-visible and .nav-link:focus-visible in Bootstrap 5.3 set `outline: 0` and rely on a
   button-variant box-shadow that is transparent by default, so the class rules beat the one above.
   Restore the ring on the controls that actually appear on screen. */
.btn:focus-visible, .btn-check:focus-visible + .btn, .nav-link:focus-visible, .page-link:focus-visible,
.dropdown-item:focus-visible, .navbar-toggler:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .form-check-input:focus-visible, .form-range:focus-visible {
  outline: 2px solid #0f5c63 !important; outline-offset: 2px; box-shadow: none;
}
[data-bs-theme="dark"] :focus-visible { outline-color: #79cdd5; }
[data-bs-theme="dark"] .btn:focus-visible, [data-bs-theme="dark"] .btn-check:focus-visible + .btn,
[data-bs-theme="dark"] .nav-link:focus-visible, [data-bs-theme="dark"] .page-link:focus-visible,
[data-bs-theme="dark"] .dropdown-item:focus-visible, [data-bs-theme="dark"] .navbar-toggler:focus-visible,
[data-bs-theme="dark"] .form-control:focus-visible, [data-bs-theme="dark"] .form-select:focus-visible,
[data-bs-theme="dark"] .form-check-input:focus-visible, [data-bs-theme="dark"] .form-range:focus-visible {
  outline-color: #79cdd5 !important;
}

/* Light-theme contrast: Bootstrap's outline-warning (#ffc107 on white, 1.6:1), the secondary
   outline button on the tinted card surface (4.2:1) and <code> inside the info alert
   (#d63384 on #cff4fc, 3.9:1) all miss AA for body text. Darken the text, keep the surfaces. */
.btn-outline-warning { --bs-btn-color: #6b5200; --bs-btn-border-color: #d39e00; --bs-btn-hover-bg: #6b5200; --bs-btn-hover-border-color: #6b5200; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #5a4300; }
.btn-outline-secondary { --bs-btn-color: #565e64; }
code { color: #a41e63; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #ffd75e; --bs-btn-border-color: #7a6415; --bs-btn-hover-bg: #5a4a10; --bs-btn-hover-border-color: #7a6415; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #5a4a10; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c3ced2; }
[data-bs-theme="dark"] code { color: #f08ac0; }