/* =====================================================================
   TRUTHSPEAKS 365 — SITE BASE
   Layered on top of colors_and_type.css (the design-system tokens).
   ===================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

/* ---- Accessibility: visible focus ring for keyboard navigation ---- */
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Remove default outline only when focus-visible is supported */
:focus:not(:focus-visible) { outline: none; }

/* The client prefers white over the warm "cream/paper" base. Override the
   paper tokens to white site-wide (this file loads after colors_and_type.css).
   Brand colors + ink sections still carry the rhythm. */
:root {
  --paper: #ffffff;
  --paper-2: #ffffff;
}

body { background: var(--white); overflow-x: hidden; }
img { max-width: 100%; }
::selection { background: var(--lime); color: var(--ink); }

/* image-slot empty state picks up the frame color */
image-slot { background: var(--bg, var(--violet)); }

@keyframes ts-marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* entrance: content is ALWAYS visible. (Both IntersectionObserver and CSS
   animations get throttled/paused in offscreen iframes, which can leave
   opacity-gated content stuck invisible — so we never gate visibility on
   motion. .ts-reveal is kept as a harmless hook.) */
.ts-reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* section width helper */
.ts-wrap { max-width: 1220px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* responsive nav */
@media (max-width: 700px) {
  .ts-nav-desk { display: none !important; }
  .ts-nav-burger { display: grid !important; }
}
@media (max-width: 760px) {
  .ts-foot-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* responsive layout helpers */
@media (max-width: 640px) {
  .ts-split { grid-template-columns: 1fr !important; }
  .ts-grid-3 { grid-template-columns: 1fr !important; }
  .ts-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .ts-offers { grid-template-columns: 1fr 1fr !important; }
  .ts-logos { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  .ts-offers { grid-template-columns: 1fr !important; }
  .ts-grid-4 { grid-template-columns: 1fr !important; }
  .ts-logos { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 1000px) {
  .ts-steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .ts-steps { grid-template-columns: 1fr !important; }
}
/* Reset grid-column/row spans when a grid collapses to 1 col */
@media (max-width: 640px) {
  .ts-auto-grid > * { grid-column: auto !important; grid-row: auto !important; }
}
/* Prevent buttons from overflowing narrow screens */
@media (max-width: 480px) {
  .ts-btn { white-space: normal !important; text-align: center; justify-content: center; max-width: 100%; box-sizing: border-box; }
}

/* ---- Speaker profile mobile fixes ---- */
@media (max-width: 640px) {
  .ts-speaker-hero { grid-template-columns: 1fr !important; min-height: auto !important; }
  .ts-speaker-hero-text { padding: 48px 0 32px !important; }
  .ts-speaker-photo { min-height: 280px !important; border-left: none !important; border-top: 4px solid var(--accent-color, var(--sky)); }
  .ts-speaker-bio { grid-template-columns: 1fr !important; }
  .ts-topic-label { white-space: normal !important; }
}

/* ---- Home stats grid mobile ---- */
@media (max-width: 640px) {
  .ts-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 380px) {
  .ts-stats-grid { grid-template-columns: 1fr !important; }
}

/* ---- Prevent any nowrap text from overflowing on phone ---- */
@media (max-width: 640px) {
  .ts-wrap { padding-left: 18px; padding-right: 18px; }
}