/* #region Hero */
.legal-wrapper {
    position: relative;
    z-index: 2;
}

/* The header is fixed and lies over the top of this band, so the section's own top space has to
   start below it — every other hero on the site is a full screen tall and never notices. Without
   it the eyebrow opened a hair under the menu. */
.legal-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--section-space) + var(--site-header-h, 78px)) 5vw var(--section-space);
    text-align: center;
    border-bottom: 1px solid var(--section-divider);
    isolation: isolate;
}

    .legal-hero::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        content: '';
        pointer-events: none;
        opacity: 0;
        background-image: linear-gradient(45deg, transparent calc(50% - .5px), var(--hairline-mid) 50%, transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--hairline-mid) 50%, transparent calc(50% + .5px));
        background-position: center;
        background-size: 72px 72px;
        -webkit-mask-image: radial-gradient(ellipse at center, #050505 10%, rgba(5, 5, 5, .55) 50%, transparent 82%);
        mask-image: radial-gradient(ellipse at center, #050505 10%, rgba(5, 5, 5, .55) 50%, transparent 82%);
        transform: scale(1.08);
        animation: legalHeroLatticeReveal 1.8s .3s var(--ease-house) forwards;
    }

    .legal-hero .container {
        position: relative;
        z-index: 1;
    }

@keyframes legalHeroLatticeReveal {
    to {
        opacity: .75;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-hero::before {
        opacity: .75;
        transform: none;
        animation: none;
    }
}

/* The eyebrow is .h-tag, the same one every other page uses, and this file defines no .legal-tag of its
   own: a different family with 5px of tracking instead of 8px makes the label over „Przejrzystość" a
   near-miss of the label over every heading on the home page. An eyebrow is one thing, declared once in
   site.css; what belongs here is the extra air a centred legal hero wants. */
.legal-hero .h-tag {
    margin-bottom: 4vh;
}

.legal-title {
    margin-bottom: 3vh;
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--section-title-size);
    font-weight: 400;
    line-height: 1.1;
}

    .legal-title i {
        color: var(--gold);
        font-style: italic;
    }

.legal-description {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.8;
}

/* The three lines lift in on their own, in CSS. Starting invisible and waiting for a class the observer
   in site.js adds, the whole hero of every legal page is a blank band whenever the script does not run,
   and the heading of a document may not depend on JavaScript. */
.legal-hero .immediate-reveal {
    opacity: 0;
    transform: translateY(24px);
    animation: legalHeroReveal 1s var(--ease-house) forwards;
}

.legal-hero .h-tag.immediate-reveal {
    animation-delay: .1s;
}

.legal-title.immediate-reveal {
    animation-delay: .25s;
}

.legal-description.immediate-reveal {
    animation-delay: .4s;
}

@keyframes legalHeroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-hero .immediate-reveal {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* #endregion */

/* #region Layout & sidebar navigation */
.legal-section {
    padding: var(--section-space) 5vw;
}

.legal-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
    gap: 8vw;
    max-width: 1200px;
    margin-inline: auto;
}

/* A long document's contents are taller than a laptop's screen under the offset, and a sticky rail
   that does not scroll leaves its last sections below the edge. */
.legal-sidebar {
    position: sticky;
    top: 120px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.legal-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 1px solid rgba(245, 245, 245, 0.1);
}

    .legal-nav.reveal-elem {
        transition-delay: .1s;
    }

    .legal-nav a {
        position: relative;
        padding-left: 20px;
        color: var(--text-muted);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.62rem;
        letter-spacing: 1.5px;
        line-height: 1.6;
        text-decoration: none;
        text-transform: uppercase;
        transition: color var(--motion-quick) var(--ease-house);
    }

        .legal-nav a::before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -1px;
            width: 2px;
            background: var(--gold);
            content: '';
            opacity: 0;
            transition: opacity var(--motion-quick) var(--ease-house);
        }

        .legal-nav a:hover,
        .legal-nav a.active {
            color: var(--gold);
        }

            .legal-nav a.active::before {
                opacity: 1;
            }
/* #endregion */

/* #region Document body */
/* A regulation is read in order, so its parts stand close enough to be read as one document. The
   spacing here was measured in vh — 12vh between paragraphs and 5vh between clauses — which on a
   tall screen put most of a screenful of nothing between „7.2." and „7.3." and broke a contract
   into a series of unrelated cards. */
.legal-document article {
    margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
    /* On top of the page's own scroll-padding for the header: a little air, not a second header. */
    scroll-margin-top: 1.5rem;
}

    .legal-document article:last-child {
        margin-bottom: 0;
    }

.legal-document h2 {
    margin-bottom: clamp(1.8rem, 3.2vh, 2.6rem);
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--hairline-mid);
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 400;
}

/* The clause number is a column of its own, not a word in front of the title: „1.1." and „13.10."
   are different widths, so a title that simply followed the number started somewhere else in every
   clause and never above the first letter of its own paragraph. One width, declared once and read
   by the number, the paragraph and the list, is what keeps the three edges on a single line. */
.legal-document {
    --clause-number: 3.4rem;
    --clause-gap: .9rem;
    --clause-indent: calc(var(--clause-number) + var(--clause-gap));
}

.clause {
    margin-bottom: clamp(1.5rem, 2.8vh, 2.2rem);
}

    .clause:last-child {
        margin-bottom: 0;
    }

.clause-header {
    display: flex;
    align-items: baseline;
    gap: var(--clause-gap);
    margin-bottom: .55rem;
}

    /* Fixed basis with no shrink, so an unexpectedly wide number overflows into the gap instead of
       pushing the title out of the column and taking the alignment with it. */
    .clause-header span {
        flex: 0 0 var(--clause-number);
        color: var(--gold);
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-style: italic;
        white-space: nowrap;
    }

.clause h3 {
    margin: 0;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.legal-document p {
    padding-left: var(--clause-indent);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* A list inside a clause — the roll of specific regulations in the general terms, and whatever else
   a document enumerates. It arrives as raw HTML in the clause's extra slot, and the only rule the
   sheet had for one was in the print block, so on screen it fell back to the browser's own defaults:
   the body's font at the browser's size and weight, a default indent answering to nothing, and a
   black marker, inside a document where every other line is placed. It takes the clause's own indent
   and the same copy as the paragraph above it; the marker takes the house's gold, which is what the
   numbers beside the clauses already do. */
.legal-document ul,
.legal-document ol {
    margin: .65rem 0 0;
    padding-left: calc(var(--clause-indent) + 1.2rem);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
}

    .legal-document li {
        padding-left: .3rem;
        overflow-wrap: anywhere;
    }

        .legal-document li::marker {
            color: var(--gold);
        }

/* A link in a provision reads by its hairline at rest; gold arrives under the hand. */
.legal-document a {
    border-bottom: 1px solid var(--hairline-strong);
    color: var(--white);
    text-decoration: none;
    transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
    overflow-wrap: anywhere;
}

/* The document body arrives as raw HTML from translation resources — a table or preformatted
   block wider than a phone screen must scroll inside its own box, not push the page sideways. */
.legal-document table,
.legal-document pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

    .legal-document a:hover,
    .legal-document a:focus-visible {
        border-bottom-color: currentColor;
        color: var(--gold);
    }
/* #endregion */

/* #region Responsive */
@media (max-width: 1000px) {
    .legal-grid {
        grid-template-columns: 1fr;
        gap: 6vh;
    }

    .legal-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .legal-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 10px;
        border-bottom: 1px solid rgba(245, 245, 245, 0.1);
        border-left: 0;
        padding-bottom: 20px;
    }

        .legal-nav a {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding-left: 0;
            padding-inline: 0.4rem;
        }

            .legal-nav a::before {
                top: auto;
                right: 0;
                bottom: -5px;
                left: 0;
                width: auto;
                height: 1px;
            }

    /* The sidebar is static here, so only the fixed header height needs clearing on anchor jumps. */
    .legal-document article {
        scroll-margin-top: calc(var(--site-header-h) + 1rem);
    }
}

@media (max-width: 600px) {
    .legal-hero {
        padding-top: 20vh;
    }

    /* The number takes a line of its own on a phone, so the title already starts at the left edge —
       the indent has to go with it, or the paragraph would sit under nothing. */
    .legal-document {
        --clause-indent: 0px;
    }

    .clause-header {
        flex-direction: column;
        gap: 5px;
    }

        .clause-header span {
            flex: 0 0 auto;
        }
}
/* #endregion */

/* #region Print */
/* The sheet a binding document is printed on. Without this the page box was whatever the browser's dialog
   happened to be set to, which is where the too-small top margin came from — a regulation opening a
   centimetre under the edge of the paper. Stated here, the same document prints the same way from every
   browser, and it is the measure the printed licence in id.css is set to as well.

   Unlike the licence, the sides are on the page box rather than on the content: these pages have no masthead
   of their own to inset, and a clause list is the full measure of the column. */
@page {
    size: A4;
    margin: 20mm 16mm 16mm;
}

/* A document somebody prints — the processing agreement above all, which is a contract under Article
   28 and is meant to be signed and filed. On paper the contents rail is furniture: it navigates a
   screen and nothing else, and printed it takes a third of every page with it. The provisions take the
   whole width, set in points so the sheet decides the measure rather than the viewport, and a clause
   is never allowed to break across two pages. */
@media print {
    /* Odoardo Letters™ is a band of its own standing above the footer rather than inside it, so the rule in
       site.css that hides the footer does not reach it — and a regulation printed for the record ended with an
       invitation to subscribe to a newsletter. The customer area answered this in id.css long ago; these pages
       are the other half of the same sheet. */
    .letters-band {
        display: none !important;
    }

    /* Printouts are pure black on pure white (#000 on #fff); the colours come from the print block in site.css. */
    .legal-grid {
        display: block;
        max-width: none;
        margin: 0;
        gap: 0;
    }

    .legal-sidebar {
        display: none;
    }

    .legal-document {
        --clause-number: 2.6rem;
    }

        .legal-document article {
            break-inside: auto;
        }

        .legal-document h2 {
            break-after: avoid;
            font-size: 11pt;
        }

    .clause {
        break-inside: avoid;
        margin-bottom: 3mm;
    }

    .clause h3 {
        font-size: 9pt;
    }

    .legal-document p,
    .legal-document li {
        font-size: 8.2pt;
        line-height: 1.45;
    }

    /* In print the sidebar is not a column, so the rule down its side has nothing to divide. */
    .legal-nav {
        border-left: 0;
    }
}
/* #endregion */