/* ==========================================================================
   Teknosell 2026 - legal and policy pages
   Loaded on /privacy, /information-security and /cookies only.
   Depends on css/style.css for tokens, buttons, header, footer and reveals.

   These are long documents that people arrive at with one question, so the
   layout is built for finding rather than reading: a sticky contents list on
   the left, a measured column on the right, and every section anchored.
   ========================================================================== */

/* ---------- 1. Compact header ---------- */
.lg-hero{
  position:relative; isolation:isolate; overflow:hidden; color:var(--white);
  background:
    radial-gradient(820px 460px at 78% 6%, rgba(34,119,170,.34), transparent 64%),
    linear-gradient(158deg,var(--ink-900) 0%,var(--blue-900) 55%,#0A2740 100%);
  padding-block:calc(78px + clamp(1.5rem,3vw,2.5rem)) clamp(2rem,3.6vw,3rem);
}
.lg-hero h1{color:var(--white); margin-top:.9rem; font-size:var(--t-xl); max-width:20ch}
.lg-hero__meta{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:1.5rem;
  padding-top:1.15rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.875rem; color:#9DB6CC}
.lg-hero__meta b{color:var(--white); font-weight:600}

/* ---------- 2. Two column body ---------- */
.lg-body{display:grid; grid-template-columns:250px 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start}

.lg-toc{position:sticky; top:98px}
.lg-toc__label{font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--content-subtle); margin-bottom:1rem}
.lg-toc ol{list-style:none; margin:0; padding:0; display:grid; gap:.1rem}
.lg-toc a{display:block; padding:.42rem .7rem; border-radius:8px; border-left:2px solid var(--blue-300);
  font-size:.875rem; line-height:1.4; color:var(--content-body);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease)}
.lg-toc a:hover{background:var(--blue-100); color:var(--blue-700); border-left-color:var(--blue-700)}
.lg-toc a.is-active{background:var(--blue-100); color:var(--blue-800); font-weight:700;
  border-left-color:var(--detail)}

.lg-content{max-width:74ch; min-width:0}
.lg-content > * + *{margin-top:1.15rem}
.lg-content h2{
  font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem); margin-top:clamp(2.5rem,4.5vw,3.5rem);
  padding-top:clamp(1.5rem,2.5vw,2rem); border-top:1px solid var(--border);
  scroll-margin-top:100px;
}
.lg-content > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.lg-content h3{font-size:1.0625rem; margin-top:2rem}
.lg-content p{color:var(--content-body); line-height:1.72}
.lg-content a:not(.btn){color:var(--blue-700); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(34,119,170,.35);
  transition:text-decoration-color .25s var(--ease)}
.lg-content a:not(.btn):hover{text-decoration-color:var(--detail)}

.lg-list{display:grid; gap:.7rem}
.lg-list li{display:flex; gap:.75rem; align-items:flex-start; color:var(--content-body); line-height:1.65}
.lg-list li::before{content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--detail); margin-top:.62rem}

/* ---------- 3. Processing activity cards ---------- */
.proc{background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  padding:clamp(1.15rem,2vw,1.5rem); margin-top:1rem}
.proc h3{margin-top:0; font-size:1.0625rem; color:var(--content-title)}
.proc__rows{display:grid; gap:.55rem; margin:.9rem 0 0}
.proc__rows > div{display:grid; grid-template-columns:106px 1fr; gap:.9rem; align-items:baseline}
.proc__rows dt{font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue-700)}
.proc__rows dd{margin:0; font-size:.9688rem; line-height:1.6; color:var(--content-body)}
.proc__note{margin-top:.85rem; padding-top:.8rem; border-top:1px dashed var(--blue-300);
  font-size:.9063rem; line-height:1.6; color:var(--content-subtle)}

/* ---------- 4. Callout, quote, signature ---------- */
.lg-note{border-radius:var(--r-md); background:var(--blue-100); border:1px solid var(--blue-300);
  border-left:3px solid var(--blue-700); padding:clamp(1.15rem,2vw,1.4rem);
  font-size:.9688rem; line-height:1.66; color:var(--content-body)}
.lg-note b{color:var(--content-title)}
.lg-note--gold{background:rgba(95,115,136,.10); border-color:rgba(95,115,136,.35);
  border-left-color:var(--detail)}

.lg-quote{border-left:3px solid var(--detail); padding:.15rem 0 .15rem 1.35rem;
  font-size:1.125rem; line-height:1.6; color:var(--content-title); font-style:italic}

.lg-sign{margin-top:2rem; padding-top:1.35rem; border-top:1px solid var(--border);
  font-size:.9688rem; color:var(--content-body)}
.lg-sign b{display:block; font-family:var(--font-display); font-weight:800; font-size:1.0625rem;
  color:var(--content-title); font-style:normal}

/* ---------- 5. Certification strip ---------- */
.lg-certs{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem}
.lg-cert{display:inline-flex; align-items:center; gap:.65rem; padding:.6rem 1rem;
  border-radius:100px; background:var(--white); border:1px solid var(--border);
  font-size:.9063rem; font-weight:600; color:var(--blue-800)}
.lg-cert svg{width:20px; height:20px; flex:0 0 auto; color:var(--detail-strong)}

/* ---------- 6. Cookie table ---------- */
.lg-tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md)}
.lg-table{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:520px}
.lg-table th,.lg-table td{padding:.8rem 1rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border)}
.lg-table th{background:var(--blue-100); font-family:var(--font-body); font-weight:700;
  font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:var(--blue-800);
  white-space:nowrap}
.lg-table tr:last-child td{border-bottom:0}
.lg-table td{color:var(--content-body); line-height:1.55}
.lg-table td:first-child{font-weight:600; color:var(--content-title)}

/* ---------- 7. Closing strip ---------- */
.lg-foot{margin-top:clamp(3rem,5vw,4rem); padding:clamp(1.5rem,3vw,2rem);
  border-radius:var(--r-lg); background:var(--blue-900); color:#C3D6E7}
.lg-foot h2{color:var(--white); font-size:1.25rem; margin:0 0 .7rem; border:0; padding:0}
.lg-foot p{color:#C3D6E7; font-size:.9688rem; line-height:1.66}
.lg-foot a{color:var(--detail); font-weight:600; text-decoration:underline;
  text-underline-offset:3px}

/* ---------- 8. Responsive ---------- */
@media (max-width:900px){
  .lg-body{grid-template-columns:1fr; gap:2rem}
  /* Sticky is wrong once it is a block at the top of the document: it would
     pin the whole contents list over the text as you scroll past it. */
  .lg-toc{position:static; background:var(--blue-100); border:1px solid var(--blue-300);
    border-radius:var(--r-md); padding:1.15rem 1.25rem}
  .lg-toc ol{grid-template-columns:1fr 1fr; display:grid; gap:.15rem .75rem}
  .lg-content{max-width:none}
}
@media (max-width:560px){
  .lg-toc ol{grid-template-columns:1fr}
  .proc__rows > div{grid-template-columns:1fr; gap:.15rem}
}