/* ============================================================
   BizHub365: design token layer and Bootstrap overrides
   The colour tokens (light, and the dark theme below) are generated from
   design/tokens.json by scripts/build_tokens.py: edit the JSON, not this file.
   ============================================================ */

/* Skip navigation link (2.4.1) */
.skip-to-main:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--bh-surface);
  color: var(--bh-blue);
  font-weight: 600;
  border: 2px solid var(--bh-blue);
  border-radius: 4px;
  text-decoration: none;
}

/* ----------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ---------------------------------------------------------- */
:root {
  /* BEGIN generated: design/tokens.json (light) */
  /* Brand colours */
  --bh-blue:       #1B54B6;
  --bh-blue-deep:  #154399;
  --bh-blue-light: #E8F0FF;
  --bh-teal:       #1D7A70;
  --bh-teal-deep:  #16675F;
  --bh-teal-light: #E3F6F3;
  --bh-navy:       #0B1F42;
  --bh-navy-mid:   #123364;
  --bh-accent:     #E8B84A;

  /* Brand shades for dark bands, gradients and pressed states (app_ui.css) */
  --bh-navy-deep:     #081126;
  --bh-navy-panel:    #0D2248;
  --bh-navy-soft:     #0F2F5E;
  --bh-blue-press:    #123A82;
  --bh-blue-strong:   #1C4894;
  --bh-blue-disabled: #8BA9DF;
  --bh-blue-tint:     #DCE9FF;
  --bh-teal-dark:     #0E6B6B;
  --bh-teal-darkest:  #0A3D3D;
  --bh-teal-disabled: #8EC9C2;
  --bh-teal-tint:     #D0F0EB;
  --bh-accent-bright: #FFCF59;
  --bh-accent-hover:  #FFD978;

  /* Brand bands: the navbar, hero, footer and primary cards keep these in every theme, with white text on them */
  --bh-band-blue:      #1B54B6;
  --bh-band-blue-deep: #154399;
  --bh-band-teal:      #1D7A70;
  --bh-band-teal-deep: #16675F;
  --bh-band-info:      #2563C9;
  --bh-success-fill:   #0C5C42;
  --bh-danger-fill:    #8B1520;

  /* Text on a filled button or tab in --bh-blue / --bh-teal / --bh-danger (white in light, dark ink in dark, where those colours are light) */
  --bh-on-fill: #FFFFFF;

  /* Text on dark or brand surfaces (stays light in every theme) */
  --bh-white:          #FFFFFF;
  --bh-on-dark:        rgba(255, 255, 255, 0.92);
  --bh-on-dark-link:   #CFE0FF;
  --bh-danger-on-dark: #FFB4BC;

  /* Semantic surface colours */
  --bh-surface:        #FFFFFF;
  --bh-surface-raised: #F5F8FD;
  --bh-surface-inset:  #EAF1FB;
  --bh-page-bg:        #EEF3FA;
  --bh-surface-sheen:  #F4F8FD;
  --bh-page-bg-top:    #F4F7FC;
  --bh-page-bg-bottom: #E8EEF8;

  /* Text, darkened for readability */
  --bh-ink:        #0A1830;
  --bh-ink-soft:   #1E3050;
  --bh-muted:      #3D4F6B;
  --bh-muted-soft: #5A6B86;

  /* Borders */
  --bh-border:        #C5D6F0;
  --bh-border-soft:   #DCE7F6;
  --bh-border-strong: #A8C2E8;

  /* Form-control boundary: 3:1 against white for WCAG 1.4.11 */
  --bh-border-control: #6F83A3;

  /* Semantic states */
  --bh-success:        #0C5C42;
  --bh-warning:        #D9A03A;
  --bh-danger:         #8B1520;
  --bh-info:           #2563C9;  /* 5.67:1 on white (was #3B7DE8, 3.97:1) */
  --bh-code:           #A61E5A;  /* Bootstrap's pink code colour is 4.0:1 on the page tint; this is 6.1:1+ */
  --bh-chart-expenses: #0B1F42;  /* dashboard chart, expenses bars (hatched) */

  /* Shadows */
  --bh-shadow-xs: 0 1px 2px rgba(10,24,48,0.06);
  --bh-shadow-sm: 0 4px 14px rgba(10,24,48,0.07);
  --bh-shadow-md: 0 10px 28px rgba(10,24,48,0.10);
  --bh-shadow-lg: 0 18px 44px rgba(10,24,48,0.13);
  --bh-shadow-xl: 0 28px 60px rgba(8,18,36,0.16);
  /* END generated: design/tokens.json (light) */

  /* Radius scale */
  --bh-radius-xs:   4px;
  --bh-radius-sm:   8px;
  --bh-radius-md:   12px;
  --bh-radius-lg:   16px;
  --bh-radius-xl:   24px;
  --bh-radius-pill: 9999px;

  /* Typography — Outfit (Finazze-style corporate finance) */
  --bh-font: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  /* Bootstrap overrides via CSS vars */
  --bs-primary:            var(--bh-blue);
  --bs-primary-rgb:        27, 84, 182;
  --bs-secondary:          var(--bh-teal);
  --bs-secondary-rgb:      29, 122, 112;
  --bs-body-font-family:   var(--bh-font);
  --bs-btn-font-family:    var(--bh-font);
  --bs-body-color:         var(--bh-ink);
  --bs-body-bg:            var(--bh-page-bg);
  --bs-border-radius:      var(--bh-radius-sm);
  --bs-border-radius-sm:   var(--bh-radius-xs);
  --bs-border-radius-lg:   var(--bh-radius-md);
  --bs-border-radius-xl:   var(--bh-radius-lg);
  --bs-border-radius-pill: var(--bh-radius-pill);
  --bs-border-color:       var(--bh-border);
  --bs-link-color:         var(--bh-blue);
  --bs-link-hover-color:   var(--bh-blue-deep);
  --bs-link-color-rgb:     27, 84, 182;
  --bs-emphasis-color:     var(--bh-ink);
  --bs-secondary-color:    var(--bh-muted);
  --bs-tertiary-color:     var(--bh-muted-soft);
  --bs-secondary-bg:       var(--bh-surface-inset);
  --bs-tertiary-bg:        var(--bh-surface-raised);
  --bs-border-color-translucent: var(--bh-border-soft);
  --bs-heading-color:      var(--bh-ink);
  --bs-code-color:         var(--bh-code);
  color-scheme: light;
}

/* ----------------------------------------------------------
   1b. Dark theme (CustomUser.ui_theme; base.html sets data-theme on <html>).
   Dark when the user chose Dark, or chose System and the device is dark.
   Surfaces are navy, not inverted greys; brand bands keep their colours.
   Every text token is at least 4.5:1 on --bh-surface and --bh-page-bg, and
   --bh-border-control 3:1. Emails and PDFs never load this file's theme.
   ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    /* BEGIN dark tokens (system) */
    --bh-blue:           #86AEF7;
    --bh-blue-deep:      #AECBFA;
    --bh-blue-light:     #1A2C4D;
    --bh-teal:           #5CCBBB;
    --bh-teal-deep:      #7DD8CA;
    --bh-teal-light:     #12302E;
    --bh-blue-tint:      #1E3458;
    --bh-teal-tint:      #163A36;
    --bh-on-fill:        #0B1220;
    --bh-surface:        #131D30;
    --bh-surface-raised: #18243A;
    --bh-surface-inset:  #0F1828;
    --bh-page-bg:        #0B1220;
    --bh-surface-sheen:  #1A2740;
    --bh-page-bg-top:    #0D1526;
    --bh-page-bg-bottom: #0A101C;
    --bh-ink:            #E8EEF8;
    --bh-ink-soft:       #CBD6E8;
    --bh-muted:          #AAB8CE;
    --bh-muted-soft:     #94A4BD;
    --bh-border:         #2C3B57;
    --bh-border-soft:    #233049;
    --bh-border-strong:  #3D5070;
    --bh-border-control: #7186A8;
    --bh-success:        #5DD39E;
    --bh-danger:         #FF9AA3;
    --bh-info:           #86AEF7;
    --bh-code:           #F3A3C6;
    --bh-chart-expenses: #C7D3E6;
    --bh-shadow-xs:      0 1px 2px rgba(0,0,0,0.35);
    --bh-shadow-sm:      0 4px 14px rgba(0,0,0,0.35);
    --bh-shadow-md:      0 10px 28px rgba(0,0,0,0.40);
    --bh-shadow-lg:      0 18px 44px rgba(0,0,0,0.45);
    --bh-shadow-xl:      0 28px 60px rgba(0,0,0,0.50);
    --bs-link-color-rgb: 134, 174, 247;
    --bs-primary-rgb: 134, 174, 247;
    color-scheme: dark;
    /* END dark tokens (system) */
  }
}
:root[data-theme="dark"] {
  /* BEGIN dark tokens (chosen) */
  --bh-blue:           #86AEF7;
  --bh-blue-deep:      #AECBFA;
  --bh-blue-light:     #1A2C4D;
  --bh-teal:           #5CCBBB;
  --bh-teal-deep:      #7DD8CA;
  --bh-teal-light:     #12302E;
  --bh-blue-tint:      #1E3458;
  --bh-teal-tint:      #163A36;
  --bh-on-fill:        #0B1220;
  --bh-surface:        #131D30;
  --bh-surface-raised: #18243A;
  --bh-surface-inset:  #0F1828;
  --bh-page-bg:        #0B1220;
  --bh-surface-sheen:  #1A2740;
  --bh-page-bg-top:    #0D1526;
  --bh-page-bg-bottom: #0A101C;
  --bh-ink:            #E8EEF8;
  --bh-ink-soft:       #CBD6E8;
  --bh-muted:          #AAB8CE;
  --bh-muted-soft:     #94A4BD;
  --bh-border:         #2C3B57;
  --bh-border-soft:    #233049;
  --bh-border-strong:  #3D5070;
  --bh-border-control: #7186A8;
  --bh-success:        #5DD39E;
  --bh-danger:         #FF9AA3;
  --bh-info:           #86AEF7;
  --bh-code:           #F3A3C6;
  --bh-chart-expenses: #C7D3E6;
  --bh-shadow-xs:      0 1px 2px rgba(0,0,0,0.35);
  --bh-shadow-sm:      0 4px 14px rgba(0,0,0,0.35);
  --bh-shadow-md:      0 10px 28px rgba(0,0,0,0.40);
  --bh-shadow-lg:      0 18px 44px rgba(0,0,0,0.45);
  --bh-shadow-xl:      0 28px 60px rgba(0,0,0,0.50);
  --bs-link-color-rgb: 134, 174, 247;
  --bs-primary-rgb: 134, 174, 247;
  color-scheme: dark;
  /* END dark tokens (chosen) */
}

/* ----------------------------------------------------------
   2. Global Reset & Typography
   ---------------------------------------------------------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--bh-font);
  font-size: 0.975rem;
  line-height: 1.65;
  color: var(--bh-ink);
  background-color: var(--bh-page-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 0% -10%, rgba(27, 84, 182, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(47, 168, 154, 0.07), transparent 50%),
    linear-gradient(180deg, var(--bh-page-bg-top) 0%, var(--bh-page-bg) 40%, var(--bh-page-bg-bottom) 100%);
  /* Not fixed: a fixed background repaints the whole page on every scroll
     (UX-9 profiling: 50 to 90ms frames while scrolling the dashboard). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bh-font);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--bh-ink);
  line-height: 1.22;
}

h1, .h1 { font-size: clamp(1.85rem, 3.2vw, 2.4rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; }
h3, .h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }
h4, .h4 { font-size: 1.12rem; font-weight: 600; }
h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 { font-size: 0.9rem; font-weight: 600; }

p { margin-bottom: 1rem; }

a {
  color: var(--bh-blue);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--bh-blue-deep); }

footer a { text-decoration: none; }

.text-muted { color: var(--bh-muted) !important; }

/* ----------------------------------------------------------
   3. Bootstrap Colour Utility Overrides
   ---------------------------------------------------------- */
.text-primary   { color: var(--bh-blue)  !important; }
.text-secondary { color: var(--bh-teal)  !important; }
.text-muted     { color: var(--bh-muted) !important; }

.bg-primary   { background-color: var(--bh-band-blue) !important; }
.bg-secondary { background-color: var(--bh-band-teal) !important; }
.bg-success   { background-color: var(--bh-success-fill) !important; }
.bg-warning   { background-color: var(--bh-warning) !important; }
.bg-danger    { background-color: var(--bh-danger-fill)  !important; }

.border-primary   { border-color: var(--bh-blue) !important; }
.border-secondary { border-color: var(--bh-teal) !important; }

.text-bg-primary   { color: var(--bh-white) !important; background-color: var(--bh-band-blue)    !important; }
.text-bg-secondary { color: var(--bh-white) !important; background-color: var(--bh-band-teal)    !important; }
.text-bg-success   { color: var(--bh-white) !important; background-color: var(--bh-success-fill) !important; }
.text-bg-warning   { color: var(--bh-navy-deep) !important; background-color: var(--bh-warning) !important; }
.text-bg-danger    { color: var(--bh-white) !important; background-color: var(--bh-danger-fill)  !important; }

.text-danger { color: var(--bh-danger) !important; }

/* ----------------------------------------------------------
   4. Badge Variants
   ---------------------------------------------------------- */
.badge {
  padding: 0.38rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--bh-radius-xs) !important;
}

.badge-secondary { background-color: var(--bh-band-teal);   color: var(--bh-white); }
.badge-danger    { background-color: var(--bh-danger-fill);  color: var(--bh-white); }
.badge-disabled {
  background-color: #6c757d !important;
  color: #fff !important;
  opacity: 1 !important;
}
.btn.disabled { pointer-events: none; opacity: 0.65; }

/* ----------------------------------------------------------
   5. Form Controls
   ---------------------------------------------------------- */
.form-label {
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bh-ink-soft);
}

.form-control,
.form-select,
.input-group-text {
  min-height: 2.75rem;
  border: 1.5px solid var(--bh-border-control);
  border-radius: var(--bh-radius-sm) !important;
  background: var(--bh-surface);
  color: var(--bh-ink);
  font-size: 0.9375rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

textarea.form-control { min-height: 6rem; }

.form-control::placeholder { color: var(--bh-muted-soft); }

.form-control:focus,
.form-select:focus {
  border-color: var(--bh-blue);
  box-shadow: 0 0 0 3px rgba(27, 84, 182, 0.22);
  outline: 2px solid var(--bh-blue);
  outline-offset: 1px;
}

.input-group > .btn { box-shadow: none; }

.form-check-input {
  border: 1.5px solid var(--bh-border-control);
  border-radius: var(--bh-radius-xs) !important;
}
.form-check-input[type="radio"] { border-radius: 50% !important; }
.form-check-input:checked {
  background-color: var(--bh-blue);
  border-color: var(--bh-blue);
}
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
  width: 2.2em;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='rgba(0,0,0,0.25)'/%3e%3c/svg%3e");
  background-position: left center;
  transition: background-position 0.15s ease-in-out;
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%2386b7fe'/%3e%3c/svg%3e");
}

/* ----------------------------------------------------------
   6. Dropdown caret suppression
   ---------------------------------------------------------- */
.dropdown-toggle::after { content: none; display: none; }

/* ----------------------------------------------------------
   7. Misc utilities
   ---------------------------------------------------------- */
.app-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

div#notif-list { color: var(--bh-ink); }
.hightlighted  { color: white; }

/* HMRC MTD Recognised Badge */
.hmrc-mtd-recognised {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
img.img-fluid.hmrc-mtd-regonised {
  width: 90px;
  height: auto;
}
.hmrc-mtd-recognised-container {
  background: white;
  height: 130px;
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--bh-radius-sm);
  box-shadow: var(--bh-shadow-sm);
}
.hmrc-mtd-recognised-p {
  color: var(--bh-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700;
  font-size: 0.8rem;
}
a.hmrc-mtd-recognised-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
a.hmrc-mtd-recognised-link:hover .hmrc-mtd-recognised-p,
a.hmrc-mtd-recognised-link:focus-visible .hmrc-mtd-recognised-p {
  text-decoration: underline;
}
a.hmrc-mtd-recognised-link:focus-visible {
  outline: 2px solid var(--bh-primary, #1B54B6);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   8. View Transitions
   ---------------------------------------------------------- */
body { view-transition-name: page; }

::view-transition-old(page) { animation: 0.22s ease-in both bh-leave; }
::view-transition-new(page) { animation: 0.22s ease-out both bh-enter; }

@keyframes bh-leave {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes bh-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

::view-transition-group(*) { animation-duration: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s !important; }
}

/* ----------------------------------------------------------
   9. Cookie consent
   ---------------------------------------------------------- */
.site-footer-links .cookie-settings-link {
  font-weight: 400;
}

/* Modal header close button */
.modal-header button.btn-close {
    display: inline-block;
    background-position: left;
    padding-left: 20px !important;
    width: auto;
    height: 1.3em;
}

/* Choices.js item styling */
.choices__item {
    color: var(--bh-ink) !important;
}
.choices__placeholder {
    opacity: 1 !important;
}

/* Disabled form check labels */
.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
    opacity: 1 !important;
    cursor: not-allowed !important;
}

label.form-check-label.flex-grow-1 {
    color: white;
}

.bh-logo {
    width: 150px;
}
/* ----------------------------------------------------------
   WCAG 2.2 AA foundations (Phase 29)
   ---------------------------------------------------------- */

/* 2.4.7 / 2.4.13: one clear focus ring for keyboard users everywhere.
   Inputs keep their own ring above; this covers links, buttons and widgets. */
:focus-visible {
  outline: 3px solid var(--bh-blue);
  outline-offset: 2px;
}
.site-navbar :focus-visible,
.bg-primary :focus-visible,
.text-bg-primary :focus-visible,
.auth-panel :focus-visible,
[data-bs-theme="dark"] .site-navbar :focus-visible {
  outline-color: #fff;
}
.btn:focus-visible {
  outline: 3px solid var(--bh-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--bh-surface);
}

/* 2.4.11 Focus Not Obscured: the app navbar is sticky, so keep scrolled-to and
   tabbed-to elements clear of it. --bh-sticky-top is measured in base.html. */
html {
  /* Flash messages sit under the navbar until closed; --bh-alerts-height is 0 without them. */
  scroll-padding-top: calc(var(--bh-sticky-top, 4.5rem) + var(--bh-alerts-height, 0px) + 0.75rem);
  /* The shared TTT cookie banner (cookies.js) is fixed to the bottom until answered
     and publishes its height as --ttt-cookie-banner-height (0px when hidden).
     a11y-cookie-banner.js measures it as --bh-cookie-bottom; the larger wins, so a
     late or stale value from either never leaves content under the banner. */
  scroll-padding-bottom: calc(max(var(--ttt-cookie-banner-height, 0px), var(--bh-cookie-bottom, 0px)) + 1rem);
}
/* Content at the very end of the page can still scroll above the cookie banner. */
body { padding-bottom: max(var(--ttt-cookie-banner-height, 0px), var(--bh-cookie-bottom, 0px)); }

/* 2.4.7: component styles (Bootstrap accordion, Choices.js selects, <summary>,
   focusable cards and scroll regions) reset outline with higher specificity than
   the ring above, so restate it for them. */
.accordion-button:focus-visible {
  outline: 3px solid var(--bh-blue) !important;
  outline-offset: -4px;
  box-shadow: none;
}
summary:focus-visible,
.choices:focus-visible,
.choices.is-focused:has(:focus-visible),
[tabindex]:not(.btn):not(.form-control):not(.form-select):focus-visible {
  outline: 3px solid var(--bh-blue) !important;
  outline-offset: 2px;
}

/* 1.4.1 Use of Colour: links inside running text are not 3:1 against body
   text, so underline them. Buttons, nav and list-style links are unaffected. */
:is(p, label, li, dd, td, figcaption, small, .small, .form-text, .alert, .app-toolbar-copy) a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):not(.list-group-item):not(.stretched-link) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
:is(.navbar, .nav, .dropdown-menu, .list-group, .pagination, .breadcrumb, footer, ttt-footer) a {
  text-decoration: none;
}

/* 1.4.10 Reflow: Bootstrap badges never wrap, so long ones (help text shown as a
   badge, business names) pushed pages wider than 320px. */
.badge { white-space: normal; max-width: 100%; }

/* Calendars and the template editor need a two-dimensional layout (a WCAG 1.4.10
   exception), but should scroll inside themselves, not widen the page. */
.fc { max-width: 100%; overflow-x: auto; }
.fc .fc-toolbar { flex-wrap: wrap; gap: 0.5rem; }

/* Long email addresses and URLs may break anywhere rather than widen the page (1.4.10). */
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }

/* Bootstrap's pink code colour is 4.0:1 on the page tint; this is 6.1:1+. */
code { color: var(--bh-code); }

/* 2.3.3 / 2.2.2: honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .btn:focus { transform: none; }
}

/* Session timeout warning (templates/includes/session_timeout.html, WCAG 2.2.1) */
.session-timeout {
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--bh-border-strong);
  border-radius: var(--bh-radius-md);
  box-shadow: var(--bh-shadow-xl);
  color: var(--bh-ink);
  background: var(--bh-surface);
}
.session-timeout::backdrop { background: rgba(10, 24, 48, 0.55); }
.session-timeout__inner { padding: 1.5rem; }

/* Shared form pattern (static/js/a11y-forms.js; 3.3.1-3.3.3). */
.bh-required { color: var(--bh-muted); font-weight: 400; font-size: 0.875em; }
.bh-field-error { color: var(--bh-danger); font-size: 0.875rem; margin-top: 0.25rem; }
.bh-error-summary a { color: inherit; font-weight: 600; }

/* 2.5.8 Target Size (Minimum): small buttons, pagination and icon controls are
   at least 24 x 24 CSS px. */
.btn-sm, .page-link, .btn-icon, .dropdown-toggle-split { min-height: 24px; min-width: 24px; }
.btn-close { min-width: 1em; min-height: 1em; padding: 0.3em; }