/* Legal article layout. Shared chrome stays in site.css. */

:root {
  --pg-toc-hover-bg: rgba(10, 20, 40, .045);
  --pg-link-hover: var(--fe-text-hi);
  --pg-grid: rgba(10, 20, 40, .045);
}

:root[data-theme="dark"] {
  --pg-toc-hover-bg: rgba(255, 255, 255, .04);
  --pg-link-hover: var(--fe-white);
  --pg-grid: rgba(255, 255, 255, .04);
}

.fe-h1,
.fe-h2,
.fe-h3 {
  color: var(--fe-white);
}

.fe-pagehero__grid {
  background-image:
    linear-gradient(var(--pg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pg-grid) 1px, transparent 1px);
  background-size: 80px 80px;
}

.fe-breadcrumb a:hover,
.fe-crumbs a:hover,
.fe-breadcrumb [aria-current="page"],
.fe-crumbs [aria-current="page"] {
  color: var(--fe-white);
}

.legal-section{padding-top:8px}

.legal-layout{
  max-width:var(--fe-max);
  margin:0 auto;
  display:grid;
  gap:28px;
  align-items:start;
}

.legal-toc{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--fe-bg);
}

.legal-toc ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.legal-toc a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:6px 12px;
  border-radius:12px;
  color:var(--fe-text);
  font-size:14px;
  line-height:1.35;
  text-decoration:none;
}

.legal-toc a:hover{color:var(--pg-link-hover);background:var(--pg-toc-hover-bg)}

.fe-max-article{width:100%;max-width:var(--fe-max-article)}

.legal-doc{
  min-width:0;
  color:var(--fe-text);
  font-size:18px;
  line-height:1.7;
  overflow-wrap:break-word;
}

.legal-doc p{margin:0 0 1em}
.legal-doc .meta{color:var(--fe-muted);font-size:15px;line-height:1.5}

.legal-doc h2,
.legal-doc h3{
  color:var(--fe-white);
  font-weight:600;
  letter-spacing:-0.02em;
  scroll-margin-top:108px;
}

.legal-doc h2{
  margin:1.7em 0 .55em;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.25;
}

.legal-doc h3{
  margin:1.35em 0 .45em;
  font-size:clamp(18px,2vw,22px);
  line-height:1.3;
}

.legal-doc ul{margin:0 0 1em;padding-left:1.25em}
.legal-doc li{margin:0 0 .45em}
.legal-doc li::marker{color:var(--fe-eyebrow)}
.legal-doc strong{color:var(--fe-white);font-weight:600}
.legal-doc a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-doc a:hover{color:var(--pg-link-hover)}

.legal-doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;
  color:var(--fe-text-hi);
  word-break:break-all;
}

.legal-top{margin-top:2.2em}
.legal-top a{font-weight:600}

.legal-doc .fe-table-wrap{margin:0 0 1.2em}
.legal-doc .fe-table{
  min-width:0;
  table-layout:fixed;
  font-size:15px;
  line-height:1.45;
}
.legal-doc .fe-table td,
.legal-doc .fe-table th{
  padding:10px 8px;
  text-align:left;
  overflow-wrap:break-word;
}
.legal-doc .fe-table td:not(:first-child),
.legal-doc .fe-table th:not(:first-child){text-align:left}
.legal-doc .fe-table thead th{background:var(--fe-bg-alt);color:var(--fe-text-hi)}
.legal-doc .fe-table tbody tr:nth-child(odd) td{background:var(--fe-surface)}
.legal-doc .fe-table tbody tr:nth-child(even) td{background:var(--fe-row-alt)}

@media (max-width:720px){
  .legal-doc .fe-table,
  .legal-doc .fe-table tbody,
  .legal-doc .fe-table tr,
  .legal-doc .fe-table td{display:block;width:100%}
  .legal-doc .fe-table{table-layout:auto}
  .legal-doc .fe-table thead{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .legal-doc .fe-table tr{padding:4px 0 8px;border-bottom:1px solid var(--fe-line)}
  .legal-doc .fe-table td{border:0;padding:8px 14px 2px}
  .legal-doc .fe-table td::before{
    display:block;
    margin-bottom:2px;
    color:var(--fe-muted);
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .legal-doc .fe-table td:nth-child(1)::before{content:"Cel"}
  .legal-doc .fe-table td:nth-child(2)::before{content:"Podstawa"}
  .legal-doc .fe-table td:nth-child(3)::before{content:"Okres"}
}

@media (min-width:1040px){
  .legal-layout{
    grid-template-columns:220px minmax(0,var(--fe-max-article));
    justify-content:center;
    gap:48px;
  }
  .legal-toc{
    position:sticky;
    top:96px;
    max-height:calc(100vh - 120px);
    overflow:auto;
  }
  .legal-toc a{min-height:36px}
}