/* fixes.css — UI fixes on top of the original site.css (kept byte-for-byte from sophia-genesis.ai).
   Each block says what was broken. Screenshots: _qa/before vs _qa/after. */

/* 1. Footer had no side gutter: `.footer{padding:64px 0 40px}` overrode the `.wrap` padding,
      so footer text touched the screen edge on phones. */
.footer { padding-left: var(--pad); padding-right: var(--pad); }

/* 2. Article lists: title and meta were inline spans, so "...leadershipKAPITSA · ATTRACTORS" ran together. */
.art .t, .art .m { display: block; }

/* 3. Founder block (home page): an inline `grid-template-columns:.7fr 1.3fr` beat the responsive
      `.split` rule, so on phones the portrait shrank to a thumbnail next to a 160px text column. */
.split.founder { grid-template-columns: .7fr 1.3fr; }
@media (max-width: 900px) {
  .split.founder { grid-template-columns: 1fr; }
  .split.founder > .shell { max-width: 360px; }
}

/* 4. "What you get" list (Hybrid Leadership): inline 3-column grid never collapsed on phones. */
.rows.rows-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
@media (max-width: 900px) { .rows.rows-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rows.rows-3 { grid-template-columns: 1fr; } }

/* 5. Buttons in a row had different widths and wrapped into a ragged stack on phones.
      On narrow screens action buttons fill the row and line up. */
@media (max-width: 480px) {
  .hero .actions, .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn, .actions .btn, .app-actions .btn, .cta-final .btn { width: 100%; justify-content: space-between; }
  .app-actions { flex-direction: column; align-items: stretch; }
}

/* 6. Long eyebrow labels ("Founder · Spokesperson (the Voice of the Ecosystem)") wrapped inside a
      pill with a 999px radius and looked broken. */
.eyebrow { max-width: 100%; }
@media (max-width: 640px) { .eyebrow { border-radius: 14px; line-height: 1.5; } }

/* 7. Language switcher. On phones (<=480px) the header hid it and the menu copy was invisible
      (it inherited the menu links' hidden state), so there was no way to change language.
      Now: always visible in the menu, and a compact switcher stays in the header bar. */
.overlay .lang-switch a { opacity: 1; transform: none; font-size: 12px; min-width: 48px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.overlay nav { max-height: 100dvh; overflow-y: auto; padding-top: 80px; padding-bottom: 32px; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
@media (max-width: 480px) {
  .nav-island .lang-switch { display: flex; padding: 0 2px; border-left: 0; }
  .nav-island .lang-switch a { min-width: 32px; padding: 6px 4px; letter-spacing: .08em; font-size: 10.5px; }
  .nav-island .brand { padding-right: 4px; font-size: 12px; }
  .nav-island .brand-mark { display: none; }
  .nav-island { gap: 2px; padding-left: 14px; }
}

/* 8. Tap targets: footer links were 32px tall, text links 28px; WCAG 2.2 target size and
      Apple/Google guidance want ~44px on touch screens. */
@media (max-width: 768px) {
  .footer .col a { padding: 10px 0; }
  .link { min-height: 44px; }
  .footer { gap: 20px 28px; }
}

/* 9. Interactive pages (/app/*): the header row overflowed on phones ("SOPHIA / GENESIS" and
      "Back to / home" each broke into two lines) and 120px of empty space sat above it
      (room for a fixed nav these pages do not have). */
.app-shell { padding-top: 48px; }
.app-head { gap: 12px; flex-wrap: wrap; }
.app-head .brand { white-space: nowrap; }
@media (max-width: 480px) {
  .app-shell { padding-top: 28px; gap: 24px; }
  .app-head .lang-switch { margin-right: 0; }
  .app-head .link { flex-basis: 100%; }
  .app-head .lang-switch a { min-width: 40px; min-height: 40px; }
}

/* 10. Section rhythm on phones: 80px top+bottom on every section left 160px empty gaps. */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section.tight { padding: 48px 0; }
}

/* 11. The brand link (home) was ~20px tall in every header; make it a 40px target. */
.nav-island .brand, .app-head .brand { display: inline-flex; align-items: center; min-height: 40px; }

/* ---------- Footer: company line and legal links (all pages) ---------- */
.footer .legal-company { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 12.5px; line-height: 1.8; color: var(--fg-3); display: grid; gap: 10px; }
.footer .legal-company p { margin: 0; }
.footer .legal-company a { color: var(--fg-2); display: inline; padding: 0; }
.footer .legal-company a:hover { color: var(--amber-2); }
.footer .legal-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer .legal-links a { display: inline-flex; align-items: center; min-height: 32px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--fg-2); }
@media (max-width: 768px) { .footer .legal-links a { min-height: 44px; } }
.footer.footer-mini { display: block; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--hair-2); }
.footer.footer-mini .legal { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Legal pages (static, no JavaScript needed) ---------- */
.legal-body { background: var(--bg); }
.legal-shell { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 40px var(--pad) 64px; }
.legal-head { margin-bottom: 28px; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.legal-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--glass); color: var(--fg-2); font-size: 14px; }
.legal-tabs a:hover { color: var(--fg); border-color: var(--hair-3); }
.legal-tabs a[aria-current] { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.legal-doc { font-size: 16px; line-height: 1.7; color: var(--fg-2); overflow-wrap: anywhere; }
.legal-doc h1 { color: var(--fg); margin-bottom: 24px; }
.legal-doc h2 { font-size: clamp(20px, 2.4vw, 26px); color: var(--fg); margin: 48px 0 14px; line-height: 1.25; scroll-margin-top: 24px; }
.legal-doc h3 { font-size: 17px; color: var(--fg); margin: 28px 0 10px; line-height: 1.35; }
.legal-doc h4 { font-size: 15px; color: var(--fg); margin: 20px 0 8px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 1.3em; }
.legal-doc li { margin: 6px 0; }
.legal-doc li::marker { color: var(--amber); }
.legal-doc strong { color: var(--fg); font-weight: 600; }
.legal-doc a { color: var(--amber-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-doc a:hover { color: var(--fg); }
.legal-doc code { font-family: var(--mono); font-size: .88em; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px; color: var(--fg); }
.legal-doc hr { border: 0; border-top: 1px solid var(--hair-2); margin: 32px 0; }
.legal-doc .table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--hair); border-radius: 14px; -webkit-overflow-scrolling: touch; }
.legal-doc .table-wrap:focus-visible { outline-offset: 2px; }
.legal-doc table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 1.5; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--hair-2); overflow-wrap: normal; }
.legal-doc th { color: var(--fg); font-weight: 600; background: var(--glass); }
.legal-doc tr:last-child td { border-bottom: 0; }
.legal-toc { margin: 0 0 32px; padding: 18px 22px; border: 1px solid var(--hair); border-radius: 14px; background: var(--glass); }
.legal-toc ol { margin: 0; padding-left: 0; list-style: none; columns: 2 260px; column-gap: 32px; font-size: 14px; }
.legal-toc li { margin: 4px 0; break-inside: avoid; }
.legal-toc a { color: var(--fg-2); text-decoration: none; }
.legal-toc a:hover { color: var(--amber-2); }
@media (max-width: 480px) {
  .legal-shell { padding-top: 24px; }
  .legal-head .link { flex-basis: 100%; }
  .legal-tabs a { font-size: 13px; padding: 8px 12px; }
}
@media print {
  .legal-tabs, .legal-head .lang-switch, .mesh { display: none !important; }
  .legal-doc, .legal-doc h1, .legal-doc h2, .legal-doc h3, .legal-doc strong { color: #000; }
  .legal-body { background: #fff; }
}

/* 12. Article table of contents: 29px rows on phones; give each entry a 44px row. */
@media (max-width: 900px) { .article .toc { gap: 0; } .article .toc a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; } }

/* 13. Header language links: at least 40px tall on touch screens. */
@media (max-width: 768px) { .nav-island .lang-switch a, .app-head .lang-switch a { min-height: 40px; } }

/* 14. Rows labelled with a word ("Routine", "Outcome", "20 years") instead of a number: the label
       spilled into the title on phones ("RoutineMeetings…"). Stack the label above the title. */
@media (max-width: 768px) {
  .row.wide-n { grid-template-columns: 1fr; gap: 6px; }
  .row.wide-n .n { padding-top: 0; }
}