/*
Theme Name: Twój OMS
Theme URI: https://twojoms.pl
Author: SKAPANDE
Description: Motyw bloczkowy marki „Twój OMS”. Kolory, kroje i odstępy pochodzą z księgi znaku 1.0 — siedzą w theme.json, nie tutaj. Ten plik dokłada wyłącznie te elementy, których edytor blokowy nie ma: terminal, zestawienie różnic, spis rozdziałów, tabela specyfikacji, luki w treści.
Version: 1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twojoms
*/

/* ——— Kroje ————————————————————————————————————————————————
   IBM Plex z plików motywu, nie z Google Fonts: licencja OFL na to pozwala,
   strona nie zależy od cudzego serwera i nie wysyła tam adresów odwiedzających.

   ⚠️ KAŻDA WAGA MA DWA PLIKI. Podzbiór „latin” NIE ZAWIERA polskich znaków —
   siedzą w „latin-ext”. Gdyby wgrać tylko latin, „ó” w logotypie, czyli znak
   marki, leciałoby krojem zastępczym i różniło się od reszty napisu.
   Zakresy niżej są tymi samymi, których używa Google Fonts. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/plex-sans-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 Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/plex-sans-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 Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/plex-sans-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 Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/plex-sans-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 Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/plex-sans-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; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/plex-sans-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 Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/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(assets/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: 500; font-display: swap; src: url(assets/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(assets/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: 600; font-display: swap; src: url(assets/fonts/plex-mono-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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/plex-mono-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; }

/* ——— Elementy spoza edytora ——————————————————————————————
   Każda klasa niżej istnieje dlatego, że księga znaku wymaga czegoś, czego
   edytor blokowy nie umie: monospace’owego terminala, zestawienia „minus/plus”
   albo widocznej luki w treści. Nic tu nie nadpisuje kolorów ani krojów —
   te są w theme.json i tam się je zmienia. */

:root {
  --papier: var(--wp--preset--color--papier);
  --papier-2: var(--wp--preset--color--papier-2);
  --linia: var(--wp--preset--color--linia);
  --tusz: var(--wp--preset--color--tusz);
  --tusz-2: var(--wp--preset--color--tusz-2);
  --akcent: var(--wp--preset--color--akcent);
  --akcent-jasny: var(--wp--preset--color--akcent-jasny);
  --kod: var(--wp--preset--color--kod);
  --kod-tekst: #DDE3DC;
  --minus: #E28C8C;
  --komentarz: #7F8A82;
  --mono: var(--wp--preset--font-family--mono);
}

body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--papier-2);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

h1, h2, h3 { text-wrap: balance; }

/* Logotyp. „ó” w kolorze akcentu to znak marki — jedyny polski znak
   w kategorii, w której konkurencja nazywa się po angielsku. */
.marka {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.marka:hover { color: inherit; }
.marka .o { color: var(--akcent); }
.marka--mala { font-size: 16px; }

/* Nawigacja w pasku: mono i małe litery, bez wersalików. */
.nawigacja { font-family: var(--mono); font-size: 14px; display: flex; gap: 28px; flex-wrap: wrap; }
.nawigacja a { text-decoration: none; }
.nawigacja a:hover { text-decoration: underline; }

/* Terminal. Jedyne ciemne miejsce na stronie — tak jak w księdze:
   ciemne są WYŁĄCZNIE bloki kodu, nigdy sekcje strony. */
.sesja { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sesja figcaption { font-family: var(--mono); font-size: 13px; color: var(--tusz-2); }
.sesja pre {
  margin: 0;
  background: var(--kod);
  color: var(--kod-tekst);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  padding: 22px 24px;
  border-radius: 2px;
  overflow-x: auto;
}
.k { color: var(--komentarz); }
.p { color: var(--akcent-jasny); }
.m { color: var(--minus); }

/* Zestawienie „abonament kontra własny system” zapisane jak diff:
   minus to koszt, plus to rzecz, którą zyskujesz. */
.roznica {
  margin: 0;
  background: var(--kod);
  color: var(--kod-tekst);
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.5;
  padding: 22px 24px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.roznica .para { display: flex; flex-direction: column; gap: 6px; }
.roznica .w { display: grid; grid-template-columns: 16px 1fr; gap: 12px; }

/* Spis rozdziałów poradnika: numer, tytuł, zdanie. Linie zamiast kart. */
.spis { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.spis li {
  display: grid;
  grid-template-columns: 40px 180px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--linia);
}
.spis .nr {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--akcent);
  font-variant-numeric: tabular-nums;
}
.spis h3 { margin: 0; }
.spis p { margin: 0; color: var(--tusz-2); max-width: 58ch; }

/* Specyfikacja szkieletu. Tabela, nie karty z ikonkami. */
.spec { border-collapse: collapse; width: 100%; font-size: 16px; }
.spec th, .spec td { border-top: 1px solid var(--linia); vertical-align: top; text-align: left; padding: 14px 0; }
.spec th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--tusz-2);
  width: 140px;
  padding-right: 16px;
  white-space: nowrap;
}
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--linia); }
.spec td { font-variant-numeric: tabular-nums; }

blockquote.cytat { margin: 0; padding: 0; font-family: var(--mono); font-size: 19px; line-height: 1.45; font-weight: 500; }
blockquote.cytat footer { margin-top: 12px; font-family: inherit; font-size: 14px; color: var(--tusz-2); font-weight: 400; }

/* Zrzut panelu. */
.zrzut { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.zrzut img { display: block; width: 100%; height: auto; border: 1px solid var(--linia); border-radius: 2px; }
.zrzut figcaption { font-family: var(--mono); font-size: 13px; color: var(--tusz-2); }

/* ⚠️ LUKA W TREŚCI — widoczna celowo. Zasada z księgi: brakujący fragment
   oznaczamy, zamiast go zmyślać. Gdy Tomek wpisze treść, klasa znika. */
.luka {
  display: inline;
  background: var(--papier-2);
  border: 1px dashed var(--tusz-2);
  padding: 0 0.3em;
  font-family: var(--mono);
  font-size: 0.9em;
}

/* Formularz zapisu. */
.zapis { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0; }
.zapis label { font-family: var(--mono); font-size: 13px; color: var(--tusz-2); }
.zapis .rzad { display: flex; gap: 8px; flex-wrap: wrap; }
.zapis input[type="email"], .zapis input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--tusz-2);
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--tusz);
}
.zapis input:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); }
/* Formularz kontaktu (14.10): CF7 owija pola w <p> i <span> — pola na całą szerokość, wiadomość jak pole tekstowe. */
.zapis p { margin: 0; }
.zapis .wpcf7-form-control-wrap { display: block; }
.zapis input[type="email"], .zapis input[type="text"], .zapis textarea { width: 100%; box-sizing: border-box; }
.zapis label:not(:first-child) { margin-top: 10px; }
.zapis textarea {
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--tusz-2);
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--tusz);
  resize: vertical;
}
.zapis textarea:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); }
.zapis .rodo { font-size: 13px; line-height: 1.5; color: var(--tusz-2); margin: 14px 0 6px; }
.zapis input[type="submit"] { align-self: flex-start; cursor: pointer; border: 0; }
.zapis input::placeholder { color: var(--komentarz); }

/* Kreska nad sekcją zamiast tła w innym kolorze — cała strona zostaje na papierze. */
.sekcja { border-top: 1px solid var(--linia); }

@media (max-width: 860px) {
  .spis li { grid-template-columns: 40px 1fr; }
  .spis li p { grid-column: 2; }
  .nawigacja { gap: 18px; }
}