/* The legal pages — Privacy, Terms, Refund, DPA, Acceptable Use — at /<slug>/ (static, also what the app opens) and at
   #/<slug> (the site). The Owner, 29.09.2026: "beji pak me elegante keto. fonti shume i keq. organizimi skandal. duhet te
   jete cdo gje web + mobile responsive". One sheet for both renders, loaded only by these pages (templates/legal.js and
   legalPage() in app.js), so the shared CSS budget is not touched. The text itself stays in public/legal/*.html. */

.legal-page{max-width:820px;margin:0 auto;font-family:var(--hz-body);color:var(--hz-ink);-webkit-font-smoothing:antialiased}
.legal-page .legal-fragment{display:block}

/* The heading: a document title, not a poster. */
.legal-page h1{max-width:none;margin:0 0 14px;font-family:var(--hz-display);font-size:clamp(32px,5vw,50px);font-weight:800;line-height:1.08;letter-spacing:-.025em;color:var(--hz-ink)}
.legal-page .legal-updated{display:flex;align-items:baseline;gap:9px;width:fit-content;max-width:100%;margin:0 0 22px;padding:7px 14px;border:1px solid var(--hz-line);border-radius:12px;background:var(--hz-surface);color:var(--hz-muted);font-size:13px;font-weight:600;line-height:1.4}
.legal-page .legal-updated::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--hz-mint);transform:translateY(-1px)}
.legal-page .legal-lead{margin:0 0 30px;padding:0 0 28px;border-bottom:1px solid var(--hz-line);color:var(--hz-ink-2);font-size:18px;font-weight:500;line-height:1.7}

/* Body text: darker, a touch heavier, a comfortable measure. */
.legal-page p,.legal-page li{color:#2a3450;font-size:16.5px;font-weight:500;line-height:1.75}
.legal-page p{margin:0 0 12px}
.legal-page b,.legal-page strong{color:var(--hz-ink);font-weight:700}
.legal-page a{color:var(--hz-mint-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-page a:hover{color:var(--hz-ink)}

/* Numbered clauses (Privacy, Terms, Acceptable Use): one card each, the number in a badge, the lead as its title. */
.legal-fragment>ol{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:clause}
.legal-fragment>ol>li{position:relative;margin:0;padding:22px 26px 22px 78px;border:1px solid var(--hz-line);border-radius:18px;background:var(--hz-surface);box-shadow:0 1px 2px rgba(10,18,38,.04);counter-increment:clause}
.legal-fragment>ol>li::before{content:counter(clause,decimal-leading-zero);position:absolute;top:22px;left:24px;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--hz-sun-tint);color:var(--hz-sun-ink-strong);font-size:13px;font-weight:800;letter-spacing:.02em}
.legal-fragment>ol>li>b:first-child{display:block;margin:5px 0 6px;font-size:18px;line-height:1.35;letter-spacing:-.01em}
.legal-fragment li ul,.legal-fragment li ol{margin:10px 0 0;padding-left:20px}
.legal-fragment li li{margin:4px 0;font-size:inherit}

/* Sectioned documents (DPA, Refund): one card per section. */
.legal-fragment>section{margin:0 0 14px;padding:24px 28px;border:1px solid var(--hz-line);border-radius:18px;background:var(--hz-surface);box-shadow:0 1px 2px rgba(10,18,38,.04);scroll-margin-top:96px}
.legal-fragment>section>h2{margin:0 0 10px;font-family:var(--hz-display);font-size:21px;font-weight:800;line-height:1.3;letter-spacing:-.015em;color:var(--hz-ink)}
.legal-fragment>section>:last-child{margin-bottom:0}
.legal-fragment>section ul{margin:8px 0 12px;padding-left:22px}
.legal-fragment>section li{margin:4px 0}
.legal-fragment table{display:block;width:100%;max-width:100%;margin:12px 0;overflow-x:auto;border-collapse:collapse;font-size:14.5px;-webkit-overflow-scrolling:touch}
.legal-fragment th,.legal-fragment td{min-width:130px;padding:10px 12px;border-bottom:1px solid var(--hz-line);text-align:left;vertical-align:top;line-height:1.55}
.legal-fragment th{background:var(--hz-surface-2);color:var(--hz-ink);font-weight:700}

/* "On this page" — built for a document with six or more sections (the DPA). */
.legal-toc{margin:0 0 26px;padding:18px 22px;border:1px solid var(--hz-line);border-radius:18px;background:var(--hz-surface-2)}
.legal-toc>b{display:block;margin:0 0 10px;color:var(--hz-muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.legal-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;margin:0;padding:0;list-style:none}
.legal-toc button{display:block;width:100%;padding:5px 0;border:0;background:none;color:var(--hz-ink-2);font:600 14.5px/1.45 var(--hz-body);text-align:left;cursor:pointer}
.legal-toc button:hover{color:var(--hz-mint-ink);text-decoration:underline;text-underline-offset:3px}
.legal-toc button:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:4px}

/* Phones: the same page, tighter. */
@media (max-width:640px){
  .legal-page h1{font-size:31px;line-height:1.12}
  .legal-page .legal-updated{font-size:12px;padding:6px 12px}
  .legal-page .legal-lead{margin-bottom:22px;padding-bottom:20px;font-size:16.5px;line-height:1.65}
  .legal-page p,.legal-page li{font-size:15.5px;line-height:1.7}
  .legal-fragment>ol{gap:10px}
  .legal-fragment>ol>li{padding:18px 16px 18px 60px;border-radius:16px}
  .legal-fragment>ol>li::before{top:18px;left:14px;width:32px;height:32px;border-radius:10px;font-size:12px}
  .legal-fragment>ol>li>b:first-child{margin-top:4px;font-size:16.5px}
  .legal-fragment>section{padding:18px 16px;border-radius:16px}
  .legal-fragment>section>h2{font-size:18.5px}
  .legal-fragment table{font-size:13.5px}
  .legal-fragment th,.legal-fragment td{min-width:110px;padding:8px 10px}
  .legal-toc{padding:14px 16px}
  .legal-toc ol{grid-template-columns:1fr}
  .seo-guide:has(.legal-page){padding-top:28px}
}