:root {
  --st-brand-navy: #07111f;
  --st-brand-blue: #2463eb;
  --st-brand-cyan: #24c8e5;
  --st-brand-focus: rgba(36, 99, 235, 0.42);
  --st-brand-radius: 10px;
}

/* SecuTest identity layer. White-label reports do not load this stylesheet. */
.brand-mark {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  display: inline-block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/brand/secutest-mark.svg") center / contain no-repeat !important;
  box-shadow: none !important;
}

.brand-mark > svg,
.brand-mark > img {
  display: none !important;
}

.brand-name {
  font-weight: 780;
  letter-spacing: -0.025em;
}

/* Partner/auth surfaces often use a text-only .brand element. */
a.brand:not(:has(.brand-mark)) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

a.brand:not(:has(.brand-mark))::before {
  content: "";
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  background: url("/assets/brand/secutest-mark.svg") center / contain no-repeat;
}

.report-logo {
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/brand/secutest-mark.svg") center / contain no-repeat !important;
  box-shadow: none !important;
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--st-brand-focus);
}

/*
 * Canonical public Log In control.
 *
 * The landing page's commercial layout intentionally promotes the account
 * entry point to a 46px / 15px CTA. Other public shells historically kept
 * separate 40px / 13px definitions, which caused the button to resize and
 * recolor while navigating between pages.
 *
 * These selectors cover every public header implementation currently used:
 * - landing/about/guides: .site-header
 * - partners/remediation/partner terms: .st-public-header
 * - legal/contact pages: .legal-header
 *
 * !important is deliberate here: public-chrome-standalone.css is loaded after
 * brand-system.css on standalone pages. This identity layer must remain the
 * single final authority for the public Log In control regardless of load order.
 */
.site-header .header-actions > a[href="/partner/login/"],
.st-public-header .st-public-actions > a[href="/partner/login/"],
.legal-header .legal-header-actions > a[href="/partner/login/"] {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 46px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 20px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1px solid rgba(126, 232, 255, 0.22) !important;
  border-radius: 11px !important;
  background: linear-gradient(
    135deg,
    #3478f6 0%,
    #2463eb 58%,
    #147d96 100%
  ) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 28px rgba(36, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif !important;
  font-size: 15px !important;
  font-weight: 820 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease !important;
}

.site-header .header-actions > a[href="/partner/login/"]:hover,
.st-public-header .st-public-actions > a[href="/partner/login/"]:hover,
.legal-header .legal-header-actions > a[href="/partner/login/"]:hover {
  color: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(36, 99, 235, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px) !important;
}

/*
 * Guides use the landing header markup and the same landing/partner-discovery
 * styles. Keep guide-only CSS from adding even a one-pixel visual delta.
 */
.guides-body .site-header {
  box-shadow: none;
}

.guides-body .header-inner {
  min-height: 76px;
}

.guides-body .header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/*
 * Do not restyle the guide Log In button separately here. The canonical
 * public rule above is intentionally the sole authority.
 */

@media (max-width: 520px) {
  .brand-mark {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px;
  }

  a.brand:not(:has(.brand-mark))::before {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }
}