/* TLG Solutions site-fixes.css
 * Layered after the built Vite bundle to polish layout, density, and mobile lockup
 * without rebuilding the React source. Keep changes additive and minimal.
 * Updated: 2026-05-25
 */

/* Smooth font swap so Inter/Source Serif don't FOUT-flash too aggressively */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Image weight ceilings so heavy assets do not explode the layout */
img { max-width: 100%; height: auto; }

/* Capability bar (UEI / CAGE / NAICS / Set-asides / Status) — improve density and wrap behavior */
@media (max-width: 900px) {
  /* Any horizontally-laid metric strip should wrap and breathe */
  [class*="capability-strip"],
  [class*="metric-strip"],
  [data-capability-strip],
  [data-metric-strip] {
    flex-wrap: wrap !important;
    gap: 0.5rem 1.25rem !important;
    padding: 0.75rem 1rem !important;
  }
  [class*="capability-strip"] > *,
  [class*="metric-strip"] > *,
  [data-capability-strip] > *,
  [data-metric-strip] > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
}

/* Header / brand lockup wrap fix on small screens */
@media (max-width: 640px) {
  header [class*="brand"],
  header [class*="lockup"],
  header [class*="logo"] {
    flex-wrap: wrap;
  }
  header [class*="brand"] *,
  header [class*="lockup"] * {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* Make sure focused interactive elements are clearly visible (a11y polish) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #4b226f;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduce motion if the visitor asks for it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ensure the noscript SEO fallback is visually appealing if JS fails */
noscript .seo-noscript-content {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 32px -16px rgba(46, 23, 68, 0.18);
  margin: 2rem auto !important;
}

/* Print stylesheet so a PDF print of the capability statement is usable */
@media print {
  body { background: #ffffff !important; color: #111 !important; }
  header, footer, nav, [class*="cta"], [class*="cookie"] { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .seo-noscript-content { display: block !important; }
}

/* Slight nudge to the visually-hidden static H1 so it does not collide
   with the React-rendered visible H1 in any screen reader pass */
.seo-static-heading { speak: none; }