/* TPRA — global styles. Page layout lives inline in the templates (as designed);
   this file holds the base rules, the interactive states the prototypes drove
   from JS, and responsive overrides for inline layouts. */

html, body { margin: 0; padding: 0; background: #070F26; }
body { font-family: 'Inter', system-ui, sans-serif; color: #FFFFFF; -webkit-font-smoothing: antialiased; }
a { color: #33B9E7; text-decoration: none; }
a:hover { color: #FFFFFF; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: none; }
input::placeholder, textarea::placeholder { color: #73767A; }
select option { background: #091432; color: #FFFFFF; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:focus-visible { outline: 2px solid #33B9E7; outline-offset: 2px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; background: #00A7E1; color: #091432; font-weight: 600; font-size: 14px;
}
.skip-link:focus { top: 16px; color: #091432; }

/* ---------- Site nav ---------- */
.nav-cur, .sol-cur { display: none !important; }
[aria-current="page"] > .nav-cur, .is-active > .sol-cur { display: block !important; }
[data-sol].is-active { color: #FFFFFF !important; }
@media (max-width: 1239px) { .nav-wide { display: none !important; } }
@media (min-width: 1240px) { .nav-narrow, [data-nav-mobile] { display: none !important; } }
body.nav-locked { overflow: hidden; }
@media (max-width: 479px) { .nav-login { display: none !important; } }

/* ---------- Homepage: client logo band ---------- */
@keyframes tpraLogos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-marquee:hover { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { [style*="tpraLogos"] { animation: none !important; } }

/* ---------- Homepage: services rows + hover mockup ---------- */
.svc-row { transition: opacity 400ms ease, border-color 400ms ease, color 400ms ease; }
.svc-fly { opacity: 0; transform: translateY(-46%) translateX(40px) scale(0.96); }
@media (hover: hover) and (min-width: 1000px) {
  .svc-list:hover .svc-row { opacity: 0.28 !important; }
  .svc-list .svc-row:hover { opacity: 1 !important; }
  .svc-row:hover .svc-fly { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
@media (hover: none), (max-width: 999px) { .svc-fly { display: none !important; } }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
}

/* ---------- Homepage: RADIUS feature cards ↔ mockup highlight ---------- */
.rf-card:hover { border-top-color: #00A7E1 !important; }
.rf-card:hover h3 { color: #33B9E7 !important; }
[data-hl-k] { transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.7,.2,1); }
[data-hl="enroll"] [data-hl-k]:not([data-hl-k="enroll"]),
[data-hl="channel"] [data-hl-k]:not([data-hl-k="channel"]),
[data-hl="prescreen"] [data-hl-k]:not([data-hl-k="prescreen"]),
[data-hl="sms"] [data-hl-k]:not([data-hl-k="sms"]) { opacity: 0.28; }
[data-hl="enroll"] [data-hl-k="enroll"],
[data-hl="channel"] [data-hl-k="channel"],
[data-hl="prescreen"] [data-hl-k="prescreen"],
[data-hl="sms"] [data-hl-k="sms"] { transform: translateY(-10px) scale(1.02); }

/* ---------- Tabs / filters / toggles ---------- */
[role="tab"][aria-selected="true"] { color: #FFFFFF !important; }
[role="tab"][aria-selected="true"] .tab-bar { opacity: 1 !important; }
[data-filter][aria-pressed="false"] .tab-cur { display: none; }
[data-role][aria-pressed="true"] { background: rgba(0,167,225,0.16) !important; border-color: #00A7E1 !important; }
[data-role]:hover { border-color: #33B9E7 !important; }

/* Privacy policy table of contents */
.toc-arrow { display: none; }
@media (max-width: 999px) {
  .toc { position: static !important; flex-basis: 100% !important; }
  .toc-toggle { cursor: pointer !important; }
  .toc-arrow { display: inline; }
  .toc:not(.is-open) .toc-list { display: none !important; }
}

/* ---------- Responsive overrides for fixed inline grids ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 520px) {
  [style*="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
}