/* ==========================================================================
   DOKUMENT — the page style for a plain legal document.
   Used by /ochrana-osobnych-udajov. Loaded after new.css, which supplies the
   ground, the type scale, .sec, .shead, .stmt, .slead, .eyebrow and .ilink.

   WHAT THIS IS NOT. It is not a designed page. This is a utility document: a
   person opens it once, usually because something made them uneasy, and they
   are looking for one paragraph. So there are no cards, no photographs, no
   leaves in the margins and no figure strips. What it does carry is the
   site's own ground, its serif headings and its measure, so that a visitor who
   clicks the footer link does not land on something that looks like it was
   pasted in from a generator.

   ONE COLUMN, NARROW. --wrap is 84rem, which is right for a page composed of
   bands and photographs and far too wide for running prose. The document sits
   at 42rem, which is around 70 characters at this size: the width a person
   can read paragraph after paragraph without losing the line.
   ========================================================================== */

/* The breadcrumb. Same object as .st-trail on /starostlivost and
   /o-zariadeni, declared here rather than reached for across files because
   this page loads neither of those stylesheets. When those two are merged
   into new.css, this goes with them. */
.dok-trail {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dok-trail a {
    color: var(--teal-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.1rem;
    transition: border-color 0.28s ease;
}

@media (hover: hover) {
    .dok-trail a:hover { border-color: var(--teal); }
}

/* The opening section: no top band, because the menu is directly above it and
   the page has no hero to clear. */
.dok-open {
    padding-top: clamp(7rem, 12vh, 10rem);
    padding-bottom: 0;
}

/* The measure. .nw-main .wrap wins on specificity (two classes) and sets
   width, not max-width, so a bare `.dok-in { max-width }` never lands. Scoped
   the same way and expressed as width, which is what that rule uses.

   42rem is around 70 characters at this size. --wrap is 84rem, which is right
   for a page built of bands and photographs and twice what running prose can
   carry: past about 80 characters the eye loses the start of the next line,
   and this is the one page on the site that is read paragraph after
   paragraph rather than scanned. */
.dok-in {
    width: min(100%, 42rem);
}

/* The title. Plain: this is a legal document and it is named, not
   introduced. The site's .stmt (a two-line serif statement with an italic
   second line) is the voice of a marketing band and reads as theatre on a
   page whose whole job is to be boring and checkable. */
.dok-h1 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.016em;
    color: var(--ink);
}

.dok-sub {
    margin: 1.1rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* Sections are separated by air and by a hairline, not by a box. The rule is
   the site's own --line, which is nearly invisible: it marks where one subject
   ends without drawing a table. */
.dok-s + .dok-s {
    margin-top: clamp(2.75rem, 5vw, 3.75rem);
    padding-top: clamp(2.75rem, 5vw, 3.75rem);
    border-top: 1px solid var(--line);
}

.dok-s h2 {
    margin: 0 0 1.1rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: balance;
}

/* 1.0625rem is the site's body size and 1.7 is a slightly looser line than the
   marketing pages use. This audience reads this page slowly and often on a
   phone held at arm's length. */
.dok-s p {
    margin: 0 0 1.05rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.dok-s p:last-child {
    margin-bottom: 0;
}

.dok-s b {
    font-weight: 600;
    color: var(--ink);
}

/* The four questions a person actually has about a form they filled in: what
   for, on what basis, for how long, who sees it. A definition list rather than
   four more paragraphs, because these are looked up rather than read through,
   and the label has to be findable by eye.

   Stacked, not two columns: at this measure a term column wide enough for
   "Na akom právnom základe" leaves the answers too narrow to read. */
.dok-dl {
    margin: 1.6rem 0 0;
}

.dok-dl > div + div {
    margin-top: 1.5rem;
}

.dok-dl dt {
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--teal-ink);
    margin-bottom: 0.5rem;
}

.dok-dl dd {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* Lists. Standard document lists, marker included: a legal page that hides
   its bullets to look designed makes an enumeration harder to count, and
   counting is what these are for. */
.dok-ul {
    margin: 0 0 1.05rem;
    padding-left: 1.35rem;
    list-style: disc;
}

.dok-ul li {
    margin-bottom: 0.4rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* The date the wording took effect. A privacy notice with no date is one
   nobody can tell is current. Set as meta, not as a sentence. */
.dok-date {
    margin: clamp(2.75rem, 5vw, 3.75rem) 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}