/* ============================================================
   BASE.CSS — zmienne, reset, typografia
   Kompas / kolonie-dla-dzieci.pl
   ============================================================ */

/* ── CSS VARIABLES ── */
:root {
  /* Kolory marki */
  --orange:      #FF8500;
  --orange-dk:   #e07200;
  --navy:        #013475;
  --navy-dk:     #0E3460;
  --navy-lt:     #1a4a9e;
  --red:         #CC1919;

  /* Neutralne */
  --white:       #ffffff;
  --off-white:   #f8f6f1;
  --gray-lt:     #f0f0f0;
  --gray:        #ddd;
  --text:        #1a1a1a;
  --text-muted:  #555;

  /* Typografia */
  --font-body:    'Nunito', sans-serif;
  --font-display: 'Fraunces', serif;

  /* Rozmiary */
  --radius:      12px;
  --radius-lg:   20px;
  --max-width:   1160px;
  --section-pad: 80px 5vw;

  /* Cienie */
  --shadow:      0 4px 24px rgba(1,52,117,.12);
  --shadow-lg:   0 12px 48px rgba(1,52,117,.18);

  /* Przejścia */
  --transition:  .2s ease;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── TYPOGRAFIA ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.15;
  color: var(--navy);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.1rem; }

p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}
p:last-child { margin-bottom: 0; }

strong { font-weight: 800; color: var(--text); }

/* ── LAYOUT HELPERS ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 5vw;
}

.section {
  padding: var(--section-pad);
}

.section--white   { background: var(--white); }
.section--offwhite { background: var(--off-white); }
.section--navy {
  background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 100%);
}

/* ── UTILITY ── */
.text-center  { text-align: center; }
.text-orange  { color: var(--orange); }
.text-navy    { color: var(--navy); }
.text-white   { color: var(--white); }
.text-muted   { color: var(--text-muted); }

.mt-sm  { margin-top: 12px; }
.mt-md  { margin-top: 24px; }
.mt-lg  { margin-top: 40px; }
.mb-sm  { margin-bottom: 12px; }
.mb-md  { margin-bottom: 24px; }
.mb-lg  { margin-bottom: 40px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.toc-section{padding:24px 20px}
.toc-wrap{max-width:720px;margin:0 auto}
.toc-box{border:1px solid #e2e4ea;border-radius:12px;overflow:hidden;background:#fff}
.toc-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;user-select:none}
.toc-header-title{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--navy, #1a2e4a)}
.toc-toggle-lbl{font-size:12px;color:var(--orange, #f97316);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.toc-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(0.4,0,0.2,1)}
.toc-body.open{max-height:400px}
.toc-list{list-style:none;padding:4px 20px 16px;margin:0}
.toc-list li{margin-bottom:8px;display:flex;align-items:baseline;gap:8px}
.toc-list li::before{content:"›";color:var(--orange, #f97316);font-weight:700;font-size:16px;flex-shrink:0}
.toc-list a{color:var(--navy, #1a2e4a);text-decoration:none;font-size:14px;font-weight:600;transition:color .15s;line-height:1.5}
.toc-list a:hover{color:var(--orange, #f97316)}
.nav__logo img { background: white; padding: 4px 8px; border-radius: 6px; }