:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #282658;
  /* jaśniejszy/ciemniejszy wariant tego samego navy — bez nich `primary: custom` dziedziczy indigo Material */
  --md-primary-fg-color--light: #53517a;
  --md-primary-fg-color--dark: #201e46;
  --md-accent-fg-color: #AD1545;
}

/* `video` dołożone w etapie 3 (zero nowych linii, jeden selektor szerzej):
   F11 mówi o 34 iframe'ach + 1 wideo self-hosted. Reguła obejmowała tylko
   iframe, więc ten jeden plik .mp4 renderował się w domyślnym pudełku 300x150
   obok 34 filmów na pełną szerokość. Zmierzone w przeglądarce. */
.md-typeset iframe,
.md-typeset video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Stopka firmowa (mkdocs.yml → copyright) — wzorowana na stopce www.infino.legal,
   kolory wg skilla infino-branding: NAVY nagłówki i znaki, NAVY_INK tekst,
   GRID linie, jasny odcień przy hover (nigdy karmin), aktywne = pełny granat.
   Karmin tylko raz: cienka linia na górze stopki. Nagłówki i przycisk: Poppins
   (--il-display-font z typography.css), reszta: font tekstu witryny.
   Układ: jedna siatka z obszarami — telefon 1 kolumna; ≥ 30em 2×2 (logo | demo,
   kontakt | produkty); ≥ 50em logo nad 3 kolumnami; ≥ 76.25em 4 kolumny w rzędzie.
   Kolumny wyrównane do góry, pasek prawny na tej samej siatce. */
/* Pasek „Poprzednia / Następna strona" nad stopką: granat marki zamiast czerni. */
.md-footer { background-color: var(--md-primary-fg-color); }
.md-footer-meta {
  --il-navy: #282658; --il-ink: #1E1D45; --il-crimson: #AD1545;
  --il-muted: #7C7B99; --il-grid: #E7E7F0; --il-tint: #EFEFF6;
  background: #fff;
  border-top: 3px solid var(--il-crimson);
  /* Material barwi treść stopki tymi zmiennymi (białe na ciemnym tle) */
  --md-footer-fg-color: var(--il-ink);
  --md-footer-fg-color--light: var(--il-ink);
  --md-footer-fg-color--lighter: var(--il-ink);
}
.md-copyright { width: 100%; margin: 0; padding: 2rem .8rem 1.2rem; color: var(--il-ink); font-size: .8rem; }
.il-footer__grid, .il-footer__legal { display: grid; column-gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.il-footer__grid { align-items: start; row-gap: 2rem; grid-template-areas: "brand" "contact" "products" "cta"; }
.il-footer__brand { grid-area: brand; justify-self: start; }
.il-footer__contact { grid-area: contact; }
.il-footer__products { grid-area: products; }
.il-footer__cta { grid-area: cta; }
.il-footer__brand img { display: block; height: 36px; width: auto; }
.il-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; font-style: normal; line-height: 1.5; }
.il-footer__heading {
  margin-bottom: .35rem; color: var(--il-navy); font-family: var(--il-display-font, inherit);
  font-size: .8rem; line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.il-footer__company { font-weight: 600; }
/* Linki: atrament marki, hover = jasne tło (padding zjedzony ujemnym marginesem, bez skoku układu). */
.md-typeset .il-footer a { color: var(--il-ink); font-weight: 500; }
.md-typeset .il-footer a:not(.il-footer__demo) { margin: -.1em -.35em; padding: .1em .35em; border-radius: 4px; }
.md-typeset .il-footer a:not(.il-footer__demo):is(:hover, :focus, :focus-visible) { color: var(--il-ink); background: var(--il-tint); }
.md-typeset .il-footer a:focus-visible { outline: 2px solid var(--il-navy); outline-offset: 2px; }
.md-typeset .il-footer .il-footer__phone { font-weight: 600; }
.md-typeset .il-footer__products a { text-transform: uppercase; letter-spacing: .03em; }
.il-footer__products a::before, .il-footer__demo::before {
  content: "→"; content: "→" / "";
  display: inline-block; margin-right: .7em; color: var(--il-navy); font-weight: 700; transition: transform 125ms;
}
.il-footer__products a:is(:hover, :focus-visible)::before, .il-footer__demo:is(:hover, :focus-visible)::before { transform: translateX(.2em); }
.md-typeset .il-footer .il-footer__demo {
  padding: .6rem 1.3rem; border-radius: 75px; background: var(--il-navy); color: #fff;
  font-family: var(--il-display-font, inherit); font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; transition: background-color 125ms, box-shadow 125ms;
}
.md-typeset .il-footer .il-footer__demo::before { color: #fff; }
.md-typeset .il-footer .il-footer__demo:is(:hover, :focus, :focus-visible) { background: var(--il-ink); color: #fff; box-shadow: 0 0 0 4px var(--il-grid); }
.il-footer__legal {
  align-items: baseline; row-gap: .4rem;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--il-grid); font-size: .7rem;
}
.il-footer__policies { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2em; }
.md-typeset .il-footer__policies a { font-weight: 600; }
.il-footer__sep { color: var(--il-muted); }
@media screen and (max-width: 29.984375em) { .il-footer__sep { display: none; } }
@media screen and (min-width: 30em) {
  .il-footer__grid, .il-footer__legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .il-footer__grid { grid-template-areas: "brand cta" "contact products"; }
}
@media screen and (min-width: 50em) {
  .il-footer__grid, .il-footer__legal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .il-footer__grid { grid-template-areas: "brand brand brand" "contact products cta"; }
  .il-footer__policies { grid-column: 2 / -1; }
}
@media screen and (min-width: 76.25em) {
  .il-footer__grid, .il-footer__legal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .il-footer__grid { grid-template-areas: "brand contact products cta"; }
}

/* Nagłówek biały, nie granatowy — logo jest granatowe i znikało na tle marki.
   Zmienne nadpisane w zasięgu nagłówka: tekst, ikony i placeholder wyszukiwarki
   biorą --md-primary-bg-color, które tu jest granatem. */
.md-header {
  background-color: #fff;
  border-bottom: 1px solid #e3e3ec;
  --md-primary-bg-color: var(--md-primary-fg-color);
  --md-primary-bg-color--light: #28265899;
}
@media screen and (min-width: 60em) {
  .md-search__form { background-color: #f2f3f5; }
  .md-search__form:hover { background-color: #e8e9ee; }
}
/* Ten sam problem w wysuwanym menu na telefonie (tytuł z logo). */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for=__drawer] {
    background-color: #fff;
    color: var(--md-primary-fg-color);
    border-bottom: 1px solid #e3e3ec;
  }
}

/* Lewy panel nawigacji (tylko desktop ≥ 76.25em; na telefonie to szuflada — bez zmian).
   Odcień marki #EFEFF6 + włosowa linia GRID odcinają nawigację od artykułu. Tło idzie
   gradientem na .md-main, a nie na samym sidebarze: sidebar jest sticky i krótszy od
   strony, więc tło na nim kończyłoby się w połowie. Panel = kolumna sidebara, od lewego
   brzegu siatki (50% − 30.5rem, .md-grid ma 61rem) do jej prawej krawędzi (+12.1rem),
   z włosową linią po obu stronach — równe wcięcie tekstu z lewej i prawej (16 px), a nie
   pusty margines okna po lewej. Od nagłówka do granatowego paska stopki.
   Hover/focus = jaśniejszy odcień (biały), nigdy karmin; bieżąca strona = pełny granat.
   Tytuł „Baza wiedzy Infino Legal" nad listą ukryty: pierwsza pozycja nav to strona
   główna o tej samej nazwie, a Material przewija sidebar tak, że wsuwała się pod
   przyklejony tytuł i prześwitywała przez jego cień — tekst wyglądał na zdublowany. */
@media screen and (min-width: 76.25em) {
  .md-main {
    --il-nav-start: calc(50% - 30.5rem);
    --il-nav-edge: calc(var(--il-nav-start) + 12.1rem);
    background: linear-gradient(to right,
      transparent var(--il-nav-start),
      #E7E7F0 var(--il-nav-start) calc(var(--il-nav-start) + 1px),
      #EFEFF6 calc(var(--il-nav-start) + 1px) var(--il-nav-edge),
      #E7E7F0 var(--il-nav-edge) calc(var(--il-nav-edge) + 1px),
      transparent calc(var(--il-nav-edge) + 1px));
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; }
  .md-sidebar--primary .md-nav__link { border-radius: 3px; }
  .md-sidebar--primary .md-nav__link:focus { color: #1E1D45; outline-color: var(--md-primary-fg-color); }
  .md-sidebar--primary .md-nav__link:not(.md-nav__container):is(:hover, :focus-visible) {
    color: #1E1D45; background: #fff; box-shadow: 0 0 0 .3em #fff;
  }
  .md-sidebar--primary .md-nav__link.md-nav__link--active,
  .md-sidebar--primary .md-nav__link.md-nav__link--active:is(:hover, :focus, :focus-visible) {
    color: #fff; background: var(--md-primary-fg-color); box-shadow: 0 0 0 .3em var(--md-primary-fg-color);
  }
}