/* =============================================================
   Legal pages: /tietosuojaseloste and /kayttoehdot (views/landing/_legal.php).
   Loaded after landing.css through $pageCss = 'legal'. Classes .lg-*.

   Kaura head: the H1 with the date set big under a small label and a Kuusi rule, like the dated
   summary on the front page. Pinta reading band: a sticky numbered contents list whose line fills
   as you read (public/js/pages/legal.js), the document in .lp-prose. Kuusi closing band: email,
   phone and the other document. Tokens only; red never appears.
   ============================================================= */

/* ---------- head ---------- */
@media (min-width: 1024px) { .lg-head .lp-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.lg-stamp { justify-self: end; width: 100%; max-width: 380px; }
.lg-stamp__k { margin: 0; font: 600 16px/1.3 var(--lp-body); color: var(--muted); }
.lg-stamp__v { margin: 10px 0 0; padding-bottom: 14px; border-bottom: 2px solid var(--kuusi);
    font: 700 clamp(44px, 4.6vw, 72px)/.95 var(--lp-display); letter-spacing: -.045em; color: var(--kuusi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-stamp__meta { margin: 16px 0 0; padding: 0; list-style: none; font: 500 15.5px/1.45 var(--lp-body); color: var(--muted); }
.lg-stamp__meta li + li { margin-top: 4px; }

/* ---------- reading band ---------- */
.lg-band { padding-top: clamp(56px, 6vw, 104px); }
.lg-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 48px clamp(48px, 7vw, 128px); align-items: start; }
.lg-side { position: sticky; top: calc(var(--navh) + 36px); max-height: calc(100vh - var(--navh) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px 4px 8px 2px; }

/* contents: a numbered ladder, the line fills down to the section being read */
.lg-toc__box { margin: 0; }
.lg-toc__sum { display: flex; align-items: baseline; gap: 12px; list-style: none; padding: 0 0 18px; cursor: default; }
.lg-toc__sum::-webkit-details-marker { display: none; }
.lg-toc__h { font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.lg-toc__count { font: 500 15px/1.3 var(--lp-body); color: var(--muted); }
.lg-toc__pm { display: none; }
.lg-toc__list { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lg-toc__list::before, .lg-toc__list::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 20px; width: 2px; border-radius: 1px; }
.lg-toc__list::before { background: rgba(31,77,71,.16); }
.lg-toc__list::after { background: var(--kuusi); transform-origin: top center; transform: scaleY(var(--lg-p, 0)); transition: transform .3s var(--lp-ease); }
.lg-toc__list li { position: relative; }
.lg-toc__list a { position: relative; display: grid; grid-template-columns: 14px 30px minmax(0, 1fr); align-items: baseline; column-gap: 12px; padding: 9px 0; min-height: 44px; color: var(--yo); text-decoration: none; }
.lg-toc__list a::before { content: ""; position: relative; z-index: 1; align-self: center; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(31,77,71,.38); background: var(--pinta); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.lg-toc__n { font: 600 15px/1.4 var(--lp-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-toc__t { font: 500 16px/1.4 var(--lp-body); text-wrap: pretty; transition: color .2s; }
.lg-toc__list a:hover .lg-toc__t { color: var(--kuusi); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(31,77,71,.35); }
.lg-toc__list a.is-past::before { background: var(--kuusi); border-color: var(--kuusi); }
.lg-toc__list a[aria-current]::before { background: var(--kuusi); border-color: var(--kuusi); box-shadow: 0 0 0 5px rgba(31,77,71,.14); }
.lg-toc__list a[aria-current] .lg-toc__n, .lg-toc__list a[aria-current] .lg-toc__t { color: var(--kuusi); font-weight: 700; }

.lg-side__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(31,77,71,.16); }
.lg-side__date { margin: 0; font: 500 15px/1.4 var(--lp-body); color: var(--muted); }
.lg-side__date time { color: var(--yo); font-weight: 600; }
.lg-print { height: 44px; padding: 0 18px; font-size: 15px; }

/* ---------- the document ---------- */
.lg-prose { max-width: 44rem; color: #34423E; }
.lg-prose .lg-h { position: relative; display: flex; align-items: baseline; gap: .4em; margin-top: 1.9em; padding-top: 1em; border-top: 1px solid rgba(31,77,71,.16); font-size: clamp(26px, 2.3vw, 34px); }
.lg-prose > .lg-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lg-h__n { flex: none; color: var(--crest); font-variant-numeric: tabular-nums; }
/* wide screens: the numbers hang in the margin, so titles and text share one left edge */
@media (min-width: 1200px) { .lg-h__n { position: absolute; right: 100%; margin-right: .55em; } }
.lg-h__t { min-width: 0; }
.lg-prose h3 { font-size: clamp(19px, 1.5vw, 22px); }
.lg-prose li::marker { color: var(--crest); }
.lg-prose p, .lg-prose li { overflow-wrap: break-word; }
.lg-prose a[href^="mailto:"] { overflow-wrap: anywhere; }
/* the GDPR basis table: rules only, the header row sits on a Kuusi line */
.lg-prose .legal__table { margin-top: 1.1em; font-size: 16px; line-height: 1.5; }
.lg-prose .legal__table th { padding: 0 16px 12px 0; font: 700 15px/1.35 var(--lp-body); color: var(--yo); border-bottom: 2px solid var(--kuusi); }
.lg-prose .legal__table td { padding: 14px 16px 14px 0; }
.lg-prose .legal__table td:first-child { width: 46%; color: var(--yo); font-weight: 500; }
.lg-prose .legal__table tr:last-child td { border-bottom: 0; }

/* ---------- closing band ---------- */
.lg-end { padding: clamp(72px, 7.4vw, 120px) 0; }
.lg-end__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(40px, 6vw, 112px); align-items: end; }
.lg-end__copy .lp-lead { max-width: 30em; }
.lg-end__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 34px; }
.lg-end__acts .lp-btn { padding: 0 26px 0 22px; }
.lg-end__acts .lp-btn svg { transform: none !important; }
.lg-also { display: block; padding: 22px 0 18px; border-top: 2px solid var(--kaura); border-bottom: 1px solid rgba(241,243,242,.26); color: var(--kaura); text-decoration: none; }
.lg-also__k { display: block; font: 600 16px/1.3 var(--lp-body); color: var(--on-kuusi-2); }
.lg-also__v { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; font: 700 clamp(26px, 2.4vw, 36px)/1.1 var(--lp-display); letter-spacing: -.025em; }
.lg-also__v svg { width: 26px; height: 26px; flex: none; transition: transform .25s var(--lp-ease); }
.lg-also:hover .lg-also__v svg, .lg-also:focus-visible .lg-also__v svg { transform: translateX(4px); }

/* ---------- smaller screens ---------- */
@media (max-width: 1023px) {
    .lg-stamp { justify-self: start; max-width: none; }
    .lg-stamp__v { display: inline-block; padding-right: 18px; }
    .lg-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .lg-side { position: static; max-height: none; overflow: visible; padding: 0; }
    /* the contents fold into one row; legal.js closes it here (without JS it stays open) */
    .lg-toc__box { border-top: 2px solid var(--kuusi); border-bottom: 1px solid rgba(31,77,71,.2); }
    .lg-toc__sum { align-items: center; min-height: 68px; padding: 12px 0; cursor: pointer; }
    .lg-toc__h { font: 700 22px/1.2 var(--lp-display); letter-spacing: -.015em; text-transform: none; }
    .lg-toc__count { flex: 1; }
    .lg-toc__pm { position: relative; display: block; flex: none; width: 22px; height: 22px; color: var(--kuusi); }
    .lg-toc__pm::before, .lg-toc__pm::after { content: ""; position: absolute; left: 2px; right: 2px; top: 10px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .26s var(--lp-ease); }
    .lg-toc__pm::after { transform: rotate(90deg); }
    .lg-toc__box[open] .lg-toc__pm::after { transform: rotate(0deg) scaleX(0); }
    .lg-toc__list { padding-bottom: 12px; }
    .lg-side__foot { display: none; } /* the date is in the head; printing from a phone is rare */
    .lg-end__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .lg-also { max-width: 520px; }
}
@media (max-width: 639px) {
    .lg-stamp__v { font-size: 40px; }
    .lg-prose .lg-h { font-size: 25px; }
    .lg-prose .legal__table { font-size: 15px; }
    .lg-prose .legal__table td:first-child { width: 44%; }
    .lg-end__acts .lp-btn { width: 100%; }
}

/* ---------- print: the document only ---------- */
@media print {
    .nav, .nav__mobile, .skip-link, .footer, .flash, .lp-crumbs, .lg-side, .lg-end { display: none !important; }
    body { background: #fff; color: #000; }
    .lp-band, .lp-head { padding: 0 !important; background: #fff !important; }
    .lp-wrap { max-width: none; padding: 0; }
    .lp-head__grid, .lg-head .lp-head__grid, .lg-grid { display: block; }
    .lp-disp { font-size: 30px !important; color: #000; }
    .lp-lead { margin-top: 8px; font-size: 13pt; color: #000; }
    .lg-stamp { max-width: none; margin: 10px 0 18px; }
    .lg-stamp__k, .lg-stamp__v { display: inline; margin: 0; padding: 0; border: 0; font-size: 11pt; letter-spacing: 0; text-transform: none; color: #000; }
    .lg-stamp__k::after { content: " "; }
    .lg-stamp__v { font-weight: 700; }
    .lg-stamp__meta { margin-top: 2px; color: #000; font-size: 10pt; }
    .lg-prose { max-width: none; font-size: 11pt; color: #000; }
    .lg-prose .lg-h { font-size: 15pt; color: #000; break-after: avoid; }
    .lg-h__n { color: #000; }
    .lg-prose a { color: #000; }
}