/* ==========================================================================
   alestrcek.com — the quiet document pages.

   /zasebnost/  /pogoji/  /en/privacy/  /en/terms/  /kontakt/  /en/contact/

   The first four are the legal texts. The last two are the contact form, which
   belongs to the same family: a narrow band, left-aligned prose, no sticky
   pill, nothing to sell. Section 9 at the foot of this file is the form; the
   rest of the file is the legal documents and predates it.

   Loaded AFTER assets/study-v5.css, which supplies every token, the body voice,
   the focus ring, the footer and the reduced-motion rules. Nothing is redefined
   here — this file only adds the shapes a long reading document needs and that
   the home page never had: a document head, left-aligned headings, tables,
   lists, definition rows.

   These pages are the quietest room in the house. No CTA, no sticky pill, no
   leather anywhere except the focus ring. A man reads them once, carefully, and
   the design's whole job is to stay out of the way while he does.
   ========================================================================== */

/* Field boundary. The hairline (#3A2C21) is a *drawn* line, not a control
   boundary: 1.47:1 on study-0, below the 3:1 WCAG 1.4.11 threshold a form
   field must clear. --field-line is the same family, lifted to 3.36:1. */
:root {
  --field-line: #6E6353;
}

/* --------------------------------------------------------------------------
   1. The page
   -------------------------------------------------------------------------- */
.legal {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(3rem, 9vh, 5.5rem) clamp(3rem, 8vh, 5rem);
  text-align: left;
}

/* --------------------------------------------------------------------------
   2. Document head
   -------------------------------------------------------------------------- */
.legal__head {
  padding-bottom: var(--u);
  border-bottom: 1px solid var(--hairline);
}

.legal h1 {
  font-weight: 600;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  text-wrap: balance;
}

.legal__meta {
  margin-top: 0.9rem;
  color: var(--muted);
}

/* The one line that tells a reader what he is holding. */
.legal__lead {
  margin-top: var(--sp-thought);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Sections
   -------------------------------------------------------------------------- */
.legal section {
  margin-top: calc(var(--u) * 2);
}

/* Left, not centred: the home page's centre axis is a device for a page of
   single sentences. A numbered document needs its headings on the reading edge,
   where the eye returns after every line. */
.legal h2 {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  letter-spacing: 0.1em;
  text-align: left;
  max-width: none;
  margin: 0 0 var(--h2-below);
}

.legal h3 {
  margin-top: calc(var(--u) * 1.25);
  margin-bottom: calc(var(--u) * 0.5);
  letter-spacing: 0.1em;
}

.legal p {
  margin-top: var(--sp-thought);
  /* Long-form prose only — progressive enhancement, ignored where unsupported. */
  text-wrap: pretty;
}

.legal blockquote,
.legal li { text-wrap: pretty; }

.legal h2 + p,
.legal h3 + p,
.legal section > p:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. Lists — an em dash, the same marker the letters use
   -------------------------------------------------------------------------- */
.legal ul {
  margin-top: var(--sp-thought);
  padding-left: 1.35rem;
}

.legal li {
  position: relative;
  margin-top: var(--sp-breath);
}

.legal li::before {
  content: "—";
  position: absolute;
  left: -1.35rem;
  color: var(--muted);
}

.legal li:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   5. Tables — hairlines only, never a box
   -------------------------------------------------------------------------- */
.legal .table-wrap {
  margin-top: var(--sp-thought);
  overflow-x: auto;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: left;
}

.legal th,
.legal td {
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.legal th {
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  line-height: 1.7;
  white-space: nowrap;
}

.legal td:last-child,
.legal th:last-child { padding-right: 0; }

/* A two-column key/value block (the entity details) — same hairlines, no head */
.legal table.rows th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: normal;
  width: 40%;
}

/* On a narrow phone a four-column processor table cannot stay a grid without
   a sideways scroll inside the reading column. Below 30rem every table folds
   into stacked label/value blocks: same DOM, same words, one column. The
   column head row goes visually hidden (assistive tech still reads it) and the
   first cell of each row carries the label in the interface voice. */
@media (max-width: 30rem) {
  .legal .table-wrap { overflow-x: visible; }

  .legal table,
  .legal tbody,
  .legal tr,
  .legal th,
  .legal td {
    display: block;
    width: auto;
  }

  .legal thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal tr {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--hairline);
  }

  .legal tbody tr:last-child,
  .legal table.rows tr:last-child { border-bottom: 0; }

  .legal th,
  .legal td,
  .legal table.rows th {
    padding: 0;
    border-bottom: 0;
    width: auto;
    white-space: normal;
  }

  /* The first cell of a row is the label — interface voice, engraved. */
  .legal tbody tr > :first-child,
  .legal table.rows tr > :first-child {
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    line-height: 1.7;
    margin-bottom: 0.15rem;
  }

  .legal tbody tr > :first-child ~ *,
  .legal table.rows tr > :first-child ~ * {
    margin-top: 0.15rem;
  }
}

/* --------------------------------------------------------------------------
   6. The quiet callout — a rule on the reading edge, never a coloured box
   -------------------------------------------------------------------------- */
.legal blockquote {
  margin-top: var(--sp-turn);
  padding-left: 1.2rem;
  border-left: 2px solid var(--hairline);
  color: var(--parchment);
}

.legal blockquote p:first-child { margin-top: 0; }

/* The one paragraph in each document that changes what a man gets back. */
.legal .heed {
  border-left-color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. Links inside prose — underlined, because in a legal text a link is a fact
   -------------------------------------------------------------------------- */
.legal p a,
.legal li a,
.legal td a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
  padding-bottom: 1px;
}

.legal p a:hover,
.legal li a:hover,
.legal td a:hover { border-bottom-color: currentColor; }

/* A literal value quoted inside prose (a masked address, a code). Same family —
   a monospace face here would be a second typeface for one word. */
.legal code {
  font-family: var(--font);
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   8. Foot of the document
   -------------------------------------------------------------------------- */
.legal__end {
  margin-top: calc(var(--u) * 2);
  padding-top: var(--u);
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   9. The contact form — /kontakt/ and /en/contact/

   One field per line, the label above the field, nothing floating and nothing
   that moves. Fields are hairline boxes on the ground colour: the same rule the
   ledger and the tables draw, so the form belongs to the house rather than to
   the browser. The only leather on the page is the submit button and the focus
   ring — exactly the budget the rest of the site keeps.
   -------------------------------------------------------------------------- */
.legal--form .h2 {
  text-align: left;
  margin-inline: 0;
  max-width: none;
}

.form {
  margin-top: calc(var(--u) * 1.5);
}

.form__row {
  margin-top: calc(var(--u) * 1.25);
}

.form__row:first-child { margin-top: 0; }

.form__label {
  display: block;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.form__input {
  display: block;
  width: 100%;
  background: var(--study-0);
  color: var(--parchment);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.75rem 0.9rem;
  min-height: 48px;              /* the same touch floor the CTA keeps */
  border: 1px solid var(--field-line);
  border-radius: 1px;
  transition: border-color 0.25s ease;
}

.form__input:hover { border-color: var(--muted); }

.form__input:focus-visible { border-color: var(--muted); }

/* A field that failed: the boundary thickens and lifts to the interface voice
   (7.73:1). Colour never carries the message alone — the error text does. */
.form__input--invalid {
  border: 2px solid var(--muted);
}

.form__area {
  resize: vertical;
  min-height: 12rem;
}

.form__error {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.form__note {
  margin-top: var(--sp-thought);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.form__note--sent,
.form__note--error {
  padding-left: 1.2rem;
  border-left: 2px solid var(--hairline);
}

.form__send {
  margin-top: calc(var(--u) * 1.5);
}

/* 🪤 The honeypot. Off-screen rather than display:none or hidden — the field
   has to LOOK fillable to a bot that reads the DOM, and a bot skips a field the
   page has told it is not there. A man never reaches it: aria-hidden keeps it
   from assistive tech and tabindex="-1" keeps it out of the tab order. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__direct,
.form__gdpr {
  margin-top: var(--sp-thought);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.form__direct {
  margin-top: calc(var(--u) * 2);
  padding-top: var(--u);
  border-top: 1px solid var(--hairline);
}

.form__direct a,
.form__gdpr a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
  padding-bottom: 1px;
}

.form__direct a:hover,
.form__gdpr a:hover { border-bottom-color: currentColor; }