/* ==========================================================================
   BCE BASE — warstwa wspolna systemu wizualnego (KOPIA IZOLOWANA dla /home-v2/)
   --------------------------------------------------------------------------
   Ten plik jest SAMODZIELNA KOPIA warstwy bazowej z site/shk/assets/css/.
   Kopia, a nie wspoldzielony plik, jest celowa: strona glowna v2 jest na razie
   podgladem, a /shk/ dziala na produkcji. Scalenie obu warstw w jeden zasob
   (/assets/bce/) to osobna, recenzowana zmiana — NIE ten krok.

   Roznice wobec wersji z /shk/ (swiadome, udokumentowane):
     * usuniete prymitywy uzywane wylacznie przez landing /shk
       (.bce-action, .bce-btn--ghost, .bce-link-tech, .bce-h1/h2/h3,
        .bce-lead, .bce-text, .bce-only-mobile/.bce-only-desktop)
     * dolozona rodzina IBM Plex Sans Condensed 600 — strona glowna uzywa jej
       w 9 miejscach (tytuly pozycji w sekcji kompetencji). Bez tego pliku
       przegladarka podstawia 700 i typografia sekcji 03 sie rozjezdza.
     * szarosci i linie: strona glowna ma CHLODNA skale (#55636f / #d8e3ef),
       /shk/ ma CIEPLA (#8b8781 / #d8d5cf). Tokeny rozbiezne siedza
       w home.css w zasiegu .bce-home, zeby ta warstwa zostala neutralna.

   Fonty: IBM Plex (Sans / Sans Condensed / Mono), SIL Open Font License 1.1.
   Nota licencyjna: site/home-v2/assets/fonts/LICENSE-IBM-Plex.txt
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTY — self-hosted, zero polaczen do Google
   --------------------------------------------------------------------------
   IBM Plex Sans jest fontem VARIABLE: jeden plik obsluguje wagi 400–600.
   Condensed i Mono to instancje statyczne — osobny plik na wage.

   Pliki `-sym` to mikro-subsety zawierajace wylacznie znaki → (U+2192)
   i ■ (U+25A0). Standardowe subsety `latin`/`latin-ext` z Google ich NIE
   obejmuja, a projekt uzywa obu. Strzalka ↓ (U+2193) jest w subsecie `latin`,
   wiec nie wymaga osobnego pliku.
   -------------------------------------------------------------------------- */

/* --- IBM Plex Sans (variable 400–600) --- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- IBM Plex Sans Condensed 600 --- */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-cond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-cond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- IBM Plex Sans Condensed 700 --- */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-cond-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-cond-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-cond-700-sym.woff2') format('woff2');
  unicode-range: U+2192, U+25A0;
}

/* --- IBM Plex Mono 400 / 500 --- */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-mono-400-sym.woff2') format('woff2');
  unicode-range: U+2192, U+25A0;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-sym.woff2') format('woff2');
  unicode-range: U+2192, U+25A0;
}

/* --------------------------------------------------------------------------
   2. TOKENY WSPOLNE
   --------------------------------------------------------------------------
   Tylko wartosci identyczne z warstwa /shk/. Chlodne szarosci i linie strony
   glownej sa zdefiniowane w home.css, w zasiegu .bce-home.
   -------------------------------------------------------------------------- */

:root {
  /* Kolory — rola, nie tylko wartosc.
     bialy        = informacja / oferta
     jasny blekit = proces / struktura techniczna
     grafit       = mocne pozycjonowanie
     BCE blau     = dzialanie / marka / akcent                                */
  --bce-white: #ffffff;
  --bce-tint: #f2f7fc;
  --bce-graphite: #0f1112;
  --bce-blue: #0b5aa2;
  --bce-blue-light: #5aa9ee;
  --bce-offwhite: #faf9f7;
  --bce-body: #3a3c3d;
  --bce-line-dark: #33383a;

  /* Typografia */
  --bce-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --bce-sans: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --bce-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Uklad */
  --bce-max: 1440px;
  --bce-gutter: clamp(20px, 4vw, 64px);

  /* Wysokosc sticky headera — uzywana przez scroll-margin-top.
     Wartosc domyslna musi byc poprawna BEZ JavaScriptu; home.js tylko
     doprecyzowuje ja po zmierzeniu faktycznej wysokosci paska. */
  --bce-header-h: 61px;
}

/* --------------------------------------------------------------------------
   3. RESET I BAZA
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bce-white);
  color: var(--bce-graphite);
  font-family: var(--bce-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--bce-graphite);
  text-decoration: none;
}

a:hover {
  color: var(--bce-blue);
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kotwice nie moga chowac sie pod sticky headerem.
   Celowo tylko sekcje i glowny cel skip-linku — `[id]` objeloby tez inne
   elementy i psulo ich scrollIntoView przy fokusie. */
section[id],
main[id],
:target {
  scroll-margin-top: calc(var(--bce-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. FOKUS I DOSTEPNOSC
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--bce-blue);
  outline-offset: 3px;
}

/* Na ciemnych sekcjach granatowy outline bylby niewidoczny */
.bce-dark :focus-visible {
  outline-color: var(--bce-blue-light);
}

.bce-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bce-blue);
  color: var(--bce-white);
  font-family: var(--bce-cond);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 22px;
}

.bce-skip:focus {
  left: 0;
  color: var(--bce-white);
}

.bce-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}