/* Website-only layout for the legal pages. Loaded ONLY by the website copies
   (privacy.html, terms.html and their -fr twins), which
   scripts/build-web-legal.js generates from the app's pages and links to
   this file. The app's pages never load it.

   WHY (2026-09-13): horizon-legal-v3.css is the app's stylesheet, and on a
   wide screen it deliberately shows a 480px phone column on a dark backdrop,
   the way the app itself looks on a desktop. That is right inside the app and
   wrong on a website: a laptop reader got a phone. Below 700px nothing here
   applies, so phones still get the exact app layout. */

@media (min-width: 700px) {
  body { background: var(--bg); }

  .wrap {
    width: 100%;
    max-width: 1120px;
    min-height: 0;
    padding: 1.75rem clamp(1.5rem, 4vw, 3rem) 5rem;
    box-shadow: none;
  }

  /* Header across the full width: logo left, language switch right. */
  .topbar {
    grid-template-columns: auto 1fr auto;
    margin: 0 0 3.5rem;
    padding: 0;
  }
  .brand { grid-column: 1; width: auto; height: 48px; justify-content: flex-start; gap: 12px; }
  .brand-symbol-img { width: 15px; height: 25px; flex: 0 0 15px; }
  .brand-wordmark-img { width: 166px; height: 16px; flex: 0 0 166px; }
  .langswitch { grid-column: 3; font-size: .74rem; }

  /* The text itself keeps a comfortable reading measure (about 70 characters
     a line) instead of running the full width of the screen. */
  .wrap > h1,
  .wrap > .updated,
  .wrap > p,
  .wrap > .summary-box,
  .wrap > section,
  .wrap > .foot {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  h1 { font-size: 3rem; margin-bottom: .6rem; }
  .updated { font-size: .74rem; margin-bottom: 2.75rem; }

  .wrap > p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 2.5rem; }

  .summary-box { padding: 1.6rem 1.8rem; margin-bottom: 3rem; }
  .summary-box b { font-size: .74rem; }
  .summary-box p { font-size: 1.02rem; line-height: 1.65; }

  section { padding: 2.1rem 0; }
  h2 { font-size: 1.55rem; margin-bottom: 1rem; }
  h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
  p, li { font-size: 1rem; line-height: 1.7; }
  li { margin-bottom: .55rem; }

  /* Wide enough now for the data table to use its full width. */
  table { display: table; width: 100%; font-size: .95rem; }
  th { font-size: .74rem; }
  th, td { padding: .75rem 1rem .75rem 0; }

  .foot { margin-top: 3rem; font-size: .9rem; }
}