/* ============================================================
   strona na wymiar — Legal pages shared stylesheet
   Pages: polityka-prywatnosci.html, regulamin.html
   Palette: light #F4F7FB / text #0E1A2B / accent #2563EB
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #F4F7FB;
  color: #0E1A2B;
}

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: #2563EB; color: #fff; }

a { color: #2563EB; text-decoration: underline; text-underline-offset: 3px; }
a:hover { opacity: .75; }

/* ============================================================
   Header
   ============================================================ */
.legal-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(244, 247, 251, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(14, 26, 43, 0.09);
  padding: 0 clamp(20px, 5vw, 60px);
}

.legal-header-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 58px;
}

.legal-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0E1A2B;
  text-decoration: none;
  letter-spacing: -.01em;
}

.legal-logo-accent {
  color: #2563EB;
}

/* ============================================================
   Main content wrapper
   ============================================================ */
.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 72px) clamp(20px, 5vw, 60px) clamp(60px, 10vh, 120px);
}

/* ============================================================
   Draft / disclaimer callout
   ============================================================ */
.legal-callout {
  background: #FFF8E1;
  border: 1.5px solid #F59E0B;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 40px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #78350F;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.legal-callout-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   Page title
   ============================================================ */
.legal-page-title {
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: #0E1A2B;
}

.legal-page-date {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: #6B7E99;
  margin-bottom: 40px;
}

/* ============================================================
   TOC
   ============================================================ */
.legal-toc {
  background: #EAF0FB;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 48px;
}

.legal-toc-title {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #2563EB;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legal-toc li {
  font-size: 14px;
  color: #2C4A72;
}

.legal-toc a {
  color: #2563EB;
  text-decoration: none;
}

.legal-toc a:hover {
  text-decoration: underline;
}

/* ============================================================
   Sections
   ============================================================ */
.legal-section {
  margin-bottom: 48px;
  padding-top: 8px;
  border-top: 1px solid rgba(14, 26, 43, 0.1);
}

.legal-section:first-of-type {
  border-top: none;
}

.legal-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0E1A2B;
  margin: 0 0 16px;
  letter-spacing: -.015em;
  padding-top: 12px;
}

.legal-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #0E1A2B;
  margin: 24px 0 10px;
}

.legal-section p {
  margin: 0 0 14px;
  color: #253650;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul,
.legal-section ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: #253650;
}

.legal-section li {
  margin-bottom: 6px;
}

/* ============================================================
   Placeholder spans — highlighted for easy replacement
   ============================================================ */
.ph {
  background: #DBEAFE;
  color: #1D4ED8;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Space Mono', monospace;
  font-size: .875em;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ============================================================
   Footer
   ============================================================ */
.legal-footer {
  background: #0B1521;
  color: #93A7C4;
  padding: 32px clamp(20px, 5vw, 60px);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.legal-footer-link {
  color: #94A6C0;
  text-decoration: none;
}

.legal-footer-accent {
  color: #2563EB;
}

.legal-footer-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.legal-footer-links a {
  color: #93A7C4;
  text-decoration: none;
}

.legal-footer-links a:hover {
  color: #94A6C0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  .legal-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ============================================================
   Motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}


/* === SNW legal feel (kursor + siatka 3D + ciemny hero) === */
@media (pointer:fine){ html.snw-cur, html.snw-cur *{ cursor:none !important; } }
.snw-root{ position:relative; }
.snw-cursor{ position:fixed; left:0; top:0; pointer-events:none; z-index:99999; border:1.4px solid rgba(37,99,235,.9); border-radius:3px; will-change:transform,width,height; }
.snw-cursor i{ position:absolute; width:6px; height:6px; background:#2563EB; border:1px solid #fff; border-radius:1px; }
.snw-cursor i:nth-child(1){ left:-3px; top:-3px; } .snw-cursor i:nth-child(2){ right:-3px; top:-3px; }
.snw-cursor i:nth-child(3){ left:-3px; bottom:-3px; } .snw-cursor i:nth-child(4){ right:-3px; bottom:-3px; }
@keyframes snw-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.snw-grid{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
@media (max-width:880px){ .snw-grid{ display:none; } }
/* ciemny pasek hero z siatka 3D - jak na pozostalych podstronach */
.legal-hero{ position:relative; background:#0B1521; color:#fff; overflow:hidden; padding:clamp(120px,18vh,180px) clamp(24px,6vw,80px) clamp(48px,7vh,80px); }
.legal-hero-inner{ position:relative; max-width:1100px; margin:0 auto; }
.legal-hero-kicker{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:1.5px; color:#5FA0FF; margin-bottom:16px; }
.legal-hero h1{ margin:0; font-size:clamp(34px,5.2vw,64px); line-height:1; letter-spacing:-.03em; font-weight:600; color:#fff; }
.legal-hero .legal-hero-date{ margin:18px 0 0; font-family:'Space Mono',monospace; font-size:13px; color:#94A6C0; }
/* biala czesc dokumentu - pelnoekranowa siatka 3D kropek (jak sekcje "light" na reszcie strony) */
.legal-body{ position:relative; background:#F4F7FB; }
.legal-body > .legal-main{ position:relative; z-index:1; }


/* SNW tap-targets >=44px (mobile, desktop nietknięty) */
@media (max-width:880px){ footer a{ display:inline-flex; align-items:center; min-height:44px; padding:4px 6px; } }
@media (max-width:880px){ .legal-toc a{ display:inline-block; padding:6px 4px; } }