/* Site header and mobile drawer.
 * Extracted from an inline <style> that lived inside parts/header.html and was
 * duplicated again inside templates-custom/partials.php. Both headers now
 * render from sp_render_site_header(), so this is the only copy.
 * Focus styles added: the header links previously had no visible focus state.
 */

    .sp-site-header{position:relative;z-index:200;background:#fff;border-bottom:1px solid #e5e7eb}
    .sp-header-inner{width:min(1180px,calc(100% - 32px));margin:0 auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .sp-brand-link{display:inline-flex;align-items:center;text-decoration:none;color:inherit}.sp-brand-logo{display:block;height:38px;width:auto}
    .sp-nav-wrap{display:flex;align-items:center;gap:24px}.sp-primary-nav{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}.sp-primary-nav a{text-decoration:none;color:#0f172a;font-weight:600}
    .sp-header-actions{display:flex;align-items:center;gap:12px}
    .sp-mobile-toggle{display:none;border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:10px 12px;font-weight:700;color:#0f172a;cursor:pointer;position:relative;z-index:221}
    .sp-mobile-menu{display:none}
    @media (max-width: 900px){.sp-header-inner{min-height:76px}.sp-nav-wrap{display:none !important}.sp-mobile-toggle{display:inline-flex;align-items:center;justify-content:center}}
  
    @media (max-width:900px){
      body.sp-menu-open{overflow:hidden!important;height:100vh!important}
      .sp-site-header.is-open .sp-mobile-menu{display:flex!important;position:fixed!important;top:76px!important;left:12px!important;right:12px!important;bottom:12px!important;height:calc(100vh - 100px)!important;background:#fff!important;z-index:999999!important;border-radius:18px!important;box-shadow:0 24px 60px rgba(0,0,0,.24)!important;overflow:hidden!important;padding:16px!important}
      .sp-mobile-menu-inner{display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;min-height:0!important}
      .sp-mobile-nav{display:block!important;flex:1 1 auto!important;overflow-y:auto!important;list-style:none!important;margin:0!important;padding:8px 0 0!important}
      .sp-mobile-nav a{display:block!important;padding:12px 0!important;color:#0f172a!important;font-size:18px!important;font-weight:800!important;text-decoration:none!important;border-bottom:1px solid #e5e7eb!important}
      .sp-mobile-actions{flex:0 0 auto!important;display:grid!important;gap:10px!important;padding-top:14px!important;background:#fff!important}
      .sp-mobile-actions .sp-button,.sp-mobile-actions .sp-button-secondary{width:100%!important;justify-content:center!important}
    }

  

/* Keyboard focus was invisible throughout the header. */
.sp-site-header a:focus-visible,
.sp-site-header button:focus-visible,
.sp-site-footer a:focus-visible {
  outline: 3px solid #0076a2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Current page indicator, driven by aria-current. */
.sp-primary-nav a[aria-current="page"],
.sp-mobile-nav a[aria-current="page"] {
  color: #0076a2;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* Tap targets on mobile: 44px minimum. */
@media (max-width: 900px) {
  .sp-mobile-nav a { min-height: 44px; display: flex; align-items: center; }
  .sp-mobile-toggle { min-height: 44px; min-width: 44px; }
}

.sp-footer-contact { margin: 6px 0 0; }
.sp-footer-contact a { color: inherit; }


/* The 6-item nav plus two calls to action wrapped "Case Studies" onto a
   second line at 1440px. Give the bar the full content width, stop the
   links wrapping, and let the CTA labels sit on one line. */
.sp-header-inner { width: min(1280px, calc(100% - 40px)); gap: 14px; }
.sp-primary-nav { gap: 20px; }
.sp-primary-nav a,
.sp-header-actions a { white-space: nowrap; }
.sp-primary-nav a { font-size: .97rem; }
.sp-header-actions .sp-button,
.sp-header-actions .sp-button-secondary {
  padding: 12px 18px;
  font-size: .93rem;
  line-height: 1.1;
  border-radius: 10px;
}
@media (max-width: 1180px) and (min-width: 901px) {
  .sp-primary-nav { gap: 15px; }
  .sp-primary-nav a { font-size: .92rem; }
  .sp-header-actions .sp-button-secondary { display: none; } /* keep one CTA */
}


/* --- QA fixes found by rendering every page at four breakpoints --- */

/* Grid children default to min-width:auto, so a long unbreakable heading
   refuses to shrink below its min-content width and pushes the whole row
   past the viewport. Cost 7px of horizontal scroll on /solutions/ at 320px. */
.sp-container > *,
.sp-reco-hero__grid > *,
.sp-grid > *,
.sp-visual-band > * { min-width: 0; }
.sp-title, .sp-lead, .sp-kicker { overflow-wrap: break-word; }

/* WCAG 2.2 asks for 24px minimum on targets that are not inline in text.
   Footer navigation links were rendering 19px tall in a tight stack. */
.sp-footer-links a,
.sp-footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
@media (max-width: 900px) {
  .sp-footer-links li { margin-bottom: 4px; }
  .sp-footer-links a { min-height: 32px; }
}

/* A merchant with no logo file gets their name set in the display face
   rather than a broken image or somebody else's mark. */
.sp-brand-wordmark {
  font-family: var(--spx-font-display, Manrope), Georgia, serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--spx-ink, #0f172a); line-height: 1;
}
.sp-brand-wordmark--inverse { color: #fff; }