/* Public / marketing / auth accessibility — keep out of app dashboard widgets */

:root {
  --bh-focus-ring: var(--bh-accent);
  --bh-focus-ring-contrast: var(--bh-navy);
  --bh-tap-min: 44px;
}

:where(
  .site-navbar:not(.site-navbar--app),
  .site-footer,
  .bh-pwa-prompt,
  .sales-home,
  .auth-shell,
  .public-a11y
) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--bh-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--bh-focus-ring-contrast);
}

.skip-to-main:focus-visible {
  outline: 3px solid var(--bh-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--bh-focus-ring-contrast);
}

/* Beat Bootstrap .btn:focus-visible { outline: 0 } without touching app chrome */
.site-navbar:not(.site-navbar--app) .btn:focus-visible,
.site-navbar:not(.site-navbar--app) .nav-link:focus-visible,
.sales-home .btn:focus-visible,
.auth-shell .btn:focus-visible,
.auth-shell .form-control:focus-visible,
.public-a11y .btn:focus-visible,
.bh-pwa-prompt .btn:focus-visible,
.bh-pwa-prompt__option:focus-visible,
.site-footer-links a:focus-visible,
.site-footer-links button:focus-visible {
  outline: 3px solid var(--bh-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--bh-focus-ring-contrast);
}

/* ~44px tap targets on public header, hero, support, and store badges.
   Center labels with flex + padding — min-height alone leaves text stuck at the top. */
.site-navbar:not(.site-navbar--app) .nav-link,
.site-navbar:not(.site-navbar--app) .navbar-toggler,
.site-navbar:not(.site-navbar--app) .header-btn,
.sales-home .btn,
.sales-home [data-pwa-install],
.sales-home .accordion-button,
.auth-shell .btn,
.auth-shell .form-control,
.auth-shell .form-select,
.public-a11y .btn,
.bh-pwa-prompt .btn,
.bh-pwa-prompt__option {
  min-height: var(--bh-tap-min);
  box-sizing: border-box;
}

.site-navbar:not(.site-navbar--app) .navbar-toggler,
.sales-home [data-pwa-install] {
  min-width: var(--bh-tap-min);
}

.site-navbar:not(.site-navbar--app) .nav-link,
.site-navbar:not(.site-navbar--app) .navbar-toggler,
.site-navbar:not(.site-navbar--app) .header-btn,
.sales-home .btn,
.sales-home [data-pwa-install],
.auth-shell .btn,
.public-a11y .btn,
.bh-pwa-prompt .btn:not([hidden]) {
  /* Grid/flex items blockify inline-block .btn to display:block, which
     leaves 21px line-height + 6px padding stuck at the top of min-height 44px. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
  text-align: center;
}

/* The rule above forces display on the public toggler, which beat Bootstrap's
   own hiding at desktop width, so the hamburger sat beside the logo next to
   the full menu. Hide it again where the menu is expanded. */
@media (min-width: 992px) {
  .site-navbar.navbar-expand-lg .navbar-toggler {
    display: none !important;
  }
}

.site-navbar:not(.site-navbar--app) .nav-link {
  justify-content: flex-start;
  text-align: start;
}

.sales-home .accordion-button {
  align-items: center;
  text-align: start;
  line-height: 1.3;
}

.auth-actions .btn {
  width: 100%;
}

/* Footer: 8px grid gap + 44px min-height + padding was ~52px rows.
   Keep a 44px tap target via an absolutely positioned hit area so the
   list stays visually dense (text + gap only). */
.site-footer-links a,
.site-footer-links button {
  position: relative;
  display: inline;
  width: fit-content;
  max-width: 100%;
  min-height: 0 !important;
  height: auto;
  box-sizing: border-box;
  line-height: 1.45;
  padding: 0 !important;
  margin: 0;
}

.site-footer-links a::after,
.site-footer-links button::after {
  content: "";
  position: absolute;
  left: -0.2rem;
  right: -0.2rem;
  top: 50%;
  height: var(--bh-tap-min);
  transform: translateY(-50%);
}

.site-footer-links .cookie-settings-link {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 400;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.site-footer-links .cookie-settings-link:hover,
.site-footer-links .cookie-settings-link:focus,
.site-footer-links .cookie-settings-link:focus-visible {
  color: var(--bh-on-dark-link);
  background: none;
  transform: none;
}

.sales-faq .accordion-button:focus-visible {
  border-color: transparent;
}

.auth-shell .form-text,
.auth-shell small.text-muted,
.public-a11y .form-text,
.public-a11y small.text-muted {
  color: var(--bh-ink-soft) !important;
}

.auth-shell .form-check {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.auth-shell .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.55rem;
  flex-shrink: 0;
}

/* HMRC's MTD mark (templates/includes/hmrc_mtd_mark.html; Group Legal ruling
   10 Nov 2026). HMRC's file has its own clear space around the square, so the
   image is never cropped: at 80px tall the square itself is about 56px, above
   the 10mm (38px) minimum. Always on a white panel, light or dark theme. */
.hmrc-mtd-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  background: var(--bh-white);
  color: var(--bh-navy);
  border-radius: var(--bh-radius-sm);
}
.hmrc-mtd-mark__image {
  display: block;
  height: 80px;
  min-height: 80px;
  width: auto;
  max-width: none;
}
.hmrc-mtd-mark__reference {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bh-navy);
}
.hmrc-mtd-mark__link:focus-visible {
  outline: 3px solid var(--bh-navy);
  outline-offset: 2px;
}
.hmrc-mtd-mark-footer {
  display: flex;
  justify-content: center;
  padding: 1rem;
}