/* ============================================================
   Factospace — motyw (chrome: nagłówek, stopka, układ stron).
   Tokeny i komponenty fs-* pochodzą z design-systemu wtyczki
   (assets/factospace-ds.css, ładowany globalnie). Tutaj wyłącznie
   elementy specyficzne dla motywu, na tych samych tokenach.
   ============================================================ */

/* ---- Tokeny (samodzielne — motyw działa niezależnie od wtyczki) ---- */
:root{
  --slate-950:#0C1118; --slate-900:#11171F; --slate-850:#161D27; --slate-800:#1C2531;
  --slate-700:#28333F; --slate-600:#3A4654; --slate-500:#586575; --slate-400:#6B7685;
  --slate-300:#9AA4B2; --slate-200:#C6CDD6; --slate-100:#E2E6EB; --slate-50:#F1F3F6; --white:#fff;
  --signal-700:#B89E00; --signal-600:#D6B800; --signal-500:#EAD11A; --signal-400:#F2DE4E;
  --blue-600:#205C95; --blue-500:#2B6CB0;
  --surface-page:var(--slate-50); --surface-card:var(--white); --surface-sunken:#ECEFF3;
  --border-subtle:var(--slate-100); --border-default:var(--slate-200);
  --text-strong:var(--slate-950); --text-body:var(--slate-800); --text-muted:var(--slate-500); --text-faint:var(--slate-300);
  --accent:var(--signal-500); --on-accent:var(--slate-950);
  --font-display:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif;
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --dur-fast:140ms; --container:1240px; --gutter:24px; --tracking-caps:.18em;
}
/* Ciemny wariant — podmienia tokeny dla dowolnej sekcji z klasą .fs-dark */
.fs-dark{
  --surface-page:var(--slate-950); --surface-card:var(--slate-900); --surface-sunken:#05080C;
  --border-subtle:var(--slate-800); --border-default:var(--slate-700);
  --text-strong:var(--white); --text-body:var(--slate-200); --text-muted:var(--slate-400); --text-faint:var(--slate-600);
}

html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.5; color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; flex-direction:column; min-height:100vh; overflow-x:clip; }
* , *::before, *::after { box-sizing:border-box; }
.fs-site__main { flex:1 0 auto; }
.fs-footer { flex-shrink:0; }

/* ---- Header ---- */
.fs-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border-subtle); }
.fs-header__row { display:flex; align-items:center; gap:32px; height:66px; }
.fs-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.fs-logo svg { display:block; }
.fs-logo__wm { font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--slate-950); }
.fs-nav { display:flex; gap:28px; margin-right:auto; list-style:none; margin-block:0; padding:0; }
.fs-nav a { font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--text-muted); text-decoration:none; transition:color var(--dur-fast); white-space:nowrap; }
.fs-nav a:hover, .fs-nav .current-menu-item > a, .fs-nav .current_page_item > a { color:var(--text-strong); }
.fs-header__cta { display:inline-flex; align-items:center; gap:7px; background:var(--signal-500); color:var(--slate-950); text-decoration:none;
  font-family:var(--font-sans); font-size:13px; font-weight:600; padding:9px 15px; border-radius:var(--radius-md); transition:background var(--dur-fast); white-space:nowrap; }
.fs-header__cta:hover { background:var(--signal-600); color:var(--slate-950); }
.fs-header__burger { display:none; border:1px solid var(--border-default); background:var(--surface-card); border-radius:var(--radius-md); width:40px; height:40px; cursor:pointer; align-items:center; justify-content:center; }
.fs-header__burger svg { width:20px; height:20px; color:var(--text-strong); }

/* ---- Prose (zwykłe strony, np. O nas tekstowe) ---- */
.fs-prose { max-width:760px; margin:0 auto; padding:48px var(--gutter) 64px; }
.fs-prose h1, .fs-prose h2, .fs-prose h3 { font-family:var(--font-display); font-weight:600; color:var(--text-strong); letter-spacing:-.02em; line-height:1.2; }
.fs-prose h1 { font-size:40px; margin:0 0 18px; }
.fs-prose h2 { font-size:28px; margin:40px 0 14px; }
.fs-prose h3 { font-size:21px; margin:28px 0 10px; }
.fs-prose p, .fs-prose li { font-size:17px; line-height:1.65; color:var(--text-body); }
.fs-prose a { color:var(--blue-600); }
.fs-prose img { max-width:100%; height:auto; border-radius:var(--radius-lg); }
.fs-prose__kicker { font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); display:block; margin-bottom:8px; }

/* ---- Footer ---- */
.fs-footer { background:var(--slate-950); }
.fs-footer__row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:32px var(--gutter) 22px; flex-wrap:wrap; }
.fs-footer__brand { display:flex; flex-direction:column; gap:8px; }
.fs-footer__wm { font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.02em; color:#fff; display:inline-flex; align-items:center; gap:10px; }
.fs-footer__tag { font-size:13px; color:var(--slate-400); margin:0; }
.fs-footer__nav { display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.fs-footer__nav a { font-size:13px; color:var(--slate-300); text-decoration:none; white-space:nowrap; }
.fs-footer__nav a:hover { color:#fff; }
.fs-footer__legal { font-family:var(--font-mono); font-size:11px; color:var(--slate-500); letter-spacing:.03em; margin:0; padding:16px 0 28px; border-top:1px solid rgba(255,255,255,.08); }

/* ---- Komunikat (brak wtyczki / pusty katalog) ---- */
.fs-notice { max-width:760px; margin:48px auto; padding:20px 22px; background:#fdfae6; border:1px solid #ecdf9a; border-radius:var(--radius-md); }
.fs-notice b { color:var(--text-strong); }
.fs-notice code { font-family:var(--font-mono); background:var(--surface-sunken); border:1px solid var(--border-subtle); border-radius:4px; padding:1px 6px; }

@media (max-width:860px) {
  .fs-nav { position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:0; background:var(--surface-card);
    border-bottom:1px solid var(--border-subtle); padding:8px 0; display:none; }
  .fs-nav.is-open { display:flex; }
  .fs-nav a { padding:12px var(--gutter); }
  .fs-header__burger { display:inline-flex; }
  .fs-prose h1 { font-size:30px; }
}

/* ============================================================
   Sekcje fs-* — automatyczne stylowanie bloków Gutenberga.
   Dodaj klasę (Zaawansowane → Dodatkowe klasy CSS) lub wklej
   gotowy kod bloku — wygląd dokleja się sam.
   ============================================================ */
.fs-bleed { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow-x:clip; background:var(--surface-page); }
.fs-shell { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.fs-kicker { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--signal-600); }
.fs-dark .fs-kicker { color:var(--signal-500); }
.fs-section-title { font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.02em; color:var(--text-strong); margin:48px 0 22px; }

/* Hero */
.fs-hero { position:relative; overflow:hidden; background:var(--surface-page); padding:64px 0 52px; }
.fs-hero--sm { padding:44px 0 36px; }
.fs-hero__grid { position:absolute; inset:0; background-image:linear-gradient(var(--slate-800) 1px,transparent 1px),linear-gradient(90deg,var(--slate-800) 1px,transparent 1px); background-size:32px 32px; opacity:.5; -webkit-mask-image:linear-gradient(180deg,#000,transparent 92%); mask-image:linear-gradient(180deg,#000,transparent 92%); }
.fs-hero__glow { position:absolute; top:-120px; left:18%; width:380px; height:380px; background:radial-gradient(circle,rgba(234,209,26,.18),transparent 62%); filter:blur(10px); }
.fs-hero__inner { position:relative; }
.fs-hero__title { font-family:var(--font-display); font-weight:600; color:var(--text-strong); font-size:44px; letter-spacing:-.03em; line-height:1.05; margin:14px 0 0; max-width:780px; }
.fs-hero__lead { color:var(--slate-300); font-size:18px; line-height:1.55; max-width:680px; margin:18px 0 0; }
.fs-hero__body { color:var(--text-muted); font-size:15px; line-height:1.7; max-width:680px; margin:16px 0 0; }

/* Statystyki */
.fs-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; margin:40px 0 0; }
.fs-stat { background:var(--surface-card); padding:22px 18px; display:flex; flex-direction:column; gap:6px; }
.fs-stat--accent { background:var(--signal-500); }
.fs-stat__label { font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); }
.fs-stat--accent .fs-stat__label { color:rgba(12,17,24,.6); }
.fs-stat__value { font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; color:var(--text-strong); line-height:1; }
.fs-stat__unit { font-size:15px; font-weight:500; color:var(--text-muted); margin-left:3px; }
.fs-stat--accent .fs-stat__value, .fs-stat--accent .fs-stat__unit { color:var(--slate-950); }
.fs-stat__cap { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }

/* Proces (kroki) */
.fs-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fs-step { border-top:2px solid var(--signal-500); padding-top:16px; }
.fs-step__n { font-family:var(--font-mono); font-size:13px; color:var(--text-faint); }
.fs-step__title { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text-strong); margin:8px 0 6px; }
.fs-step__desc { font-size:14px; line-height:1.55; color:var(--text-muted); margin:0; }

/* Karty cech */
.fs-features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:8px; }
.fs-feature { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:22px; }
.fs-feature__icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-md); background:var(--slate-950); color:var(--signal-500); margin-bottom:14px; }
.fs-feature__icon svg { width:22px; height:22px; }
.fs-feature__title { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--text-strong); margin:0 0 6px; }
.fs-feature__desc { font-size:14px; line-height:1.55; color:var(--text-muted); margin:0; }

/* Pasek CTA */
.fs-band { background:var(--signal-500); margin-top:48px; }
.fs-band__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:40px var(--gutter); flex-wrap:wrap; }
.fs-band__title { font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.02em; color:var(--slate-950); margin:0; }
.fs-band__text { color:rgba(12,17,24,.72); font-size:15px; margin:6px 0 0; max-width:520px; }
.fs-btn { display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:14px; font-weight:600; text-decoration:none; padding:12px 20px; border-radius:var(--radius-md); white-space:nowrap; }
.fs-btn--dark { background:var(--slate-950); color:#fff; }
.fs-btn--dark:hover { background:#000; color:#fff; }

/* Zgodność z blokami rdzenia (Kolumny → siatka fs-*) */
.fs-stats.wp-block-columns, .fs-steps.wp-block-columns, .fs-features.wp-block-columns { display:grid; }
.fs-stat.wp-block-column, .fs-step.wp-block-column, .fs-feature.wp-block-column { flex-basis:auto; }
.fs-hero > .wp-block-group__inner-container, .fs-band > .wp-block-group__inner-container { position:relative; }

@media (max-width:860px) {
  .fs-stats { grid-template-columns:repeat(2,1fr); }
  .fs-steps { grid-template-columns:1fr 1fr; }
  .fs-features { grid-template-columns:1fr 1fr; }
  .fs-hero__title { font-size:32px; }
  .fs-contact { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .fs-steps, .fs-features { grid-template-columns:1fr; }
  .fs-form__row { grid-template-columns:1fr; }
}

/* ============================================================
   Reset domyślnych odstępów Gutenberga wewnątrz kart fs-*.
   WordPress dodaje margines między blokami (block gap) — tu go
   zerujemy, by etykiety/wartości/opisy były ciasne jak w designie.
   ============================================================ */
.fs-stat, .fs-step, .fs-feature { display:flex; flex-direction:column; gap:6px; }
.fs-stat > *, .fs-step > *, .fs-feature > * { margin-top:0 !important; margin-bottom:0 !important; }
.fs-feature__icon { margin-bottom:8px !important; }
/* Karty rdzenia: bez wewnętrznego paddingu kolumny i bez sklejania wysokości */
.fs-stat.wp-block-column, .fs-step.wp-block-column, .fs-feature.wp-block-column { padding:22px 18px; }
.fs-step.wp-block-column { padding:16px 0 0; }
.fs-feature.wp-block-column { padding:22px; }

/* ============================================================
   Formularze + Kontakt (klasy fs-form / fs-contact / fs-info)
   ============================================================ */
.fs-btn--primary { background:var(--accent); color:var(--on-accent); border:1px solid transparent; }
.fs-btn--primary:hover { background:var(--signal-600); }
.fs-input, .fs-textarea { font-family:var(--font-sans); font-size:14px; color:var(--text-strong); width:100%;
  background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:11px 13px;
  outline:none; transition:border-color var(--dur-fast),box-shadow var(--dur-fast); }
.fs-textarea { resize:vertical; }
.fs-input:focus, .fs-textarea:focus { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(43,108,176,.45); }
.fs-input::placeholder, .fs-textarea::placeholder { color:var(--text-faint); }
.fs-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fs-form-msg { font-size:14px; padding:12px 14px; border-radius:var(--radius-md); margin:4px 0 0; }
.fs-form-msg.is-ok { background:#E7F4EC; color:#1f7a3d; }
.fs-form-msg.is-err { background:#FBE9E9; color:#b32d2e; }
.fs-form { display:flex; flex-direction:column; gap:16px; }
.fs-form__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fs-field { display:flex; flex-direction:column; gap:8px; }
.fs-label { font-size:14px; font-weight:500; color:var(--text-strong); }
.fs-contact { display:grid; grid-template-columns:1.4fr 1fr; gap:36px; margin:32px 0 8px; align-items:start; }
.fs-info { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:18px; }
.fs-info__block { display:flex; flex-direction:column; gap:10px; }
.fs-info__title { font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); }
.fs-info__line { display:block; font-size:14px; color:var(--text-body); text-decoration:none; }
a.fs-info__line:hover { color:var(--text-strong); }
.fs-info__line--addr { white-space:pre-line; }
