/* Strony informacyjne (spec §6.8, makieta projekt/strona-informacyjna.html) — szablon page-templates/informacyjna.php, uchwyt jnr-info. */
/* okruszki — SPRAWDŹ (punkt 4): 7.11 — .crumbs nie ma w baza.css (tylko lista.css i produkt.css), blok zostaje */
.j-info .crumbs { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); padding: 12px 0 8px; white-space: nowrap; overflow: hidden; }
.j-info .crumbs a:hover { color: var(--brand); }
.j-info .crumbs svg { width: 13px; height: 13px; }
.j-info .crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
/* układ */
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.info-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px; /* wysokość 41 px jak w makiecie; overflow ucina obrys na zewnątrz pigułek, więc obrys leży wewnątrz (niżej) */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
.info-nav::-webkit-scrollbar { display: none; }
.info-nav .t { display: none; }
.info-nav a { flex: none; border: 1px solid var(--ctl); border-radius: 999px; padding: 8px 13px; font: 700 14px/1 Barlow, sans-serif; background: #fff; white-space: nowrap; color: var(--ink); }
/* Obrys fokusu wewnątrz pigułki: globalny obrys 3 px + odstęp 2 px wychodził 3 px ponad pole przewijania i był ucinany (T2-4). Pole zostaje 41 px jak w makiecie. */
.info-nav a:focus-visible { outline-offset: -3px; }
.info-nav a[aria-current="page"]:focus-visible { outline-color: #fff; } /* aktualna pigułka ma granatowe tło */
.info-nav a:hover { border-color: var(--brand); color: var(--brand-dk); }
.info-nav a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
/* treść z edytora (klasyczny HTML i bloki) */
.info-main { min-width: 0; max-width: 780px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.info-main > * { margin: 0; } /* odstępy daje gap; Blocksy nadaje .entry-content > * własne marginesy */
.info-main h1 { font: 800 31px/1.08 Barlow, sans-serif; margin: 0; color: var(--ink); }
.info-main .lead { margin: -6px 0 0; font-size: 16px; color: var(--text-2); line-height: 1.55; }
.info-main h2 { font: 800 23px/1.2 Barlow, sans-serif; margin: 12px 0 0; scroll-margin-top: 130px; color: var(--ink); }
.info-main h3 { font: 800 19px/1.25 Barlow, sans-serif; margin: 6px 0 0; color: var(--ink); }
.info-main p, .info-main li { font-size: 15px; line-height: 1.65; color: #2c3644; }
.info-main p { margin: 0; }
.info-main ul, .info-main ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.info-main a:where(:not([class])) { font-weight: 600; } /* kolor i podkreślenie: reguła treści z baza.css */
.info-main hr { border: 0; border-top: 1px solid var(--line); width: 100%; }
.info-main figure { margin: 0; }
.info-main .wp-block-table { overflow-x: auto; }
.info-main table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
/* Tabele z treści: przewija wrapper .tabela (jnr_info_tabele_fokus: role="region", fokus z klawiatury), tabela zostaje zwykłą tabelą (VoiceOver/Safari). */
.info-main .tabela { max-width: 100%; overflow-x: auto; }
.info-main .tabela:focus-visible { outline-offset: -3px; } /* obrys wewnątrz: wrapper ma overflow, więc obrys na zewnątrz byłby ucięty */
.info-main th { text-align: left; font: 700 13px/1.2 Barlow, sans-serif; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); }
.info-main td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.info-main img { height: auto; }
/* Promocje i inne listy produktów z shortcodów WooCommerce w treści — siatka kart jak na liście (plan 02).
   SPRAWDŹ (punkt 8): 7.11 — [sale_products] = ul.products.columns-3[data-products] > li.j-kafel > article.card (selektory dobre). */
.info-grid.bez-menu .info-main { max-width: none; }
.info-main ul.products { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-main ul.products > li { display: flex; min-width: 0; margin: 0; }
.info-main ul.products > li > .card { flex: 1; min-width: 0; }
@media (min-width: 900px) {
  .j-info .crumbs { padding: 18px 0 10px; font-size: 13px; }
  .info-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 44px; align-items: start; }
  .info-grid.bez-menu { grid-template-columns: minmax(0, 1fr); }
  .info-nav { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 2px; position: sticky; top: 140px; -webkit-mask-image: none; mask-image: none; }
  .info-nav .t { display: block; font: 700 12px/1 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 10px; }
  .info-nav a:focus-visible, .info-nav a[aria-current="page"]:focus-visible { outline-offset: 2px; outline-color: var(--brand); }
  .info-nav a { border: 0; border-radius: 10px; padding: 11px 12px; font-size: 16px; background: transparent; }
  .info-nav a:hover { background: var(--bg); }
  .info-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-dk); }
  .info-main h1 { font-size: 46px; }
  .info-main h2 { font-size: 27px; }
  .info-main ul.products { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* --- FAQ (plan 05 Task 3; makieta strona-informacyjna.html#faq) --- */
.faq-tools { display: grid; gap: 10px; position: sticky; top: var(--hh, 110px); z-index: 5; background: #fff; padding: 10px 0; margin: -4px 0 0; }
.faq-tools[hidden] { display: none; }
.faq-search { display: flex; align-items: center; gap: 8px; border: 1px solid #b9c3d1; border-radius: 12px; padding: 0 12px; background: #fff; }
.faq-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(62,104,178,.2); }
.faq-search svg { color: var(--muted); }
.faq-search input[type="search"] { appearance: auto; border: 0; border-radius: 0; box-shadow: none; outline: none; height: auto; font: 16px/1 "Open Sans", sans-serif; padding: 13px 0; width: 100%; background: transparent; color: var(--ink); }
.faq-search input[type="search"]::placeholder { color: #757575; opacity: 1; }
.qa { border-bottom: 1px solid var(--line); }
.qa[hidden] { display: none; }
.qa summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 15px 2px; font: 700 17px/1.3 Barlow, sans-serif; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { color: var(--muted); flex: none; margin-top: 1px; transition: transform .2s; }
.qa[open] summary svg { transform: rotate(180deg); }
.qa summary:hover { color: var(--brand-dk); }
.qa summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.qa .a { padding: 0 2px 16px; display: grid; gap: 8px; }
.qa .a p { margin: 0; }
.qa mark { background: #fff1c2; color: inherit; border-radius: 3px; padding: 0 1px; }
.faq-empty { border: 1px dashed #b9c3d1; border-radius: 12px; padding: 22px 18px; text-align: center; }
.faq-empty[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .qa summary svg { transition: none; } }
/* --- treści z mu-pluginów (Poradnik, Instrukcje): kolor akcji i fonty marki zamiast dawnego #0066cc — wygląd, nie treść --- */
.info-main .jnr-pr, .info-main .jnr-instr-wrap { max-width: none; margin: 0; }
.info-main .jnr-pr h2, .info-main .jnr-pr h3, .info-main .jnr-instr-card h2 { font-family: Barlow, sans-serif; font-weight: 800; color: var(--ink); }
.info-main .jnr-pr a, .info-main .jnr-instr-wrap a:not(.jnr-instr-btn) { color: var(--brand); }
.info-main .jnr-pr-picks li { border-left-color: var(--brand); }
.info-main .jnr-pr-picks .lbl { color: var(--brand-dk); }
.info-main .jnr-pr-table th { background: var(--navy); }
.info-main .jnr-pr-tldr { background: var(--brand-soft); border-color: #cddcf3; }
.info-main .jnr-instr-btn { background: var(--brand); border-radius: 10px; font-family: Barlow, sans-serif; font-weight: 700; font-size: 15px; }
.info-main .jnr-instr-btn:hover { background: var(--brand-dk); }
.info-main .jnr-instr-soon { background: var(--bg); color: var(--muted); }

/* --- formularze zwrotu i reklamacji w szablonie (mu-plugin jnr-formularze-zwrot-reklamacja.php ma własne style ekranu i druku) --- */
.info-main .jnr-form-wrap { margin: 0; max-width: none; box-shadow: none; border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px; }
@media (min-width: 900px) { .info-main .jnr-form-wrap { padding: 32px 36px; } }
@media print {
  .info-main .jnr-form-wrap { border: 0 !important; }
  /* Blocksy nadaje polom wysokość (--theme-form-field-height); w druku mu-plugin ustawia tylko min-height, więc pola rosłyby
     do 40 px i formularz rozlewał się na 2 strony. Cofamy to tu, w motywie: pola jak we wzorze PDF (dolna kreska, wysokość z wiersza). */
  .info-main .jnr-form-wrap .jnr-form-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea),
  .info-main .jnr-form-wrap .jnr-form-checkboxes input[type="text"] { height: auto !important; }
  .info-main .jnr-form-wrap .jnr-form-sec { break-after: avoid !important; page-break-after: avoid !important; break-inside: avoid !important; }
  .info-main .jnr-form-wrap .jnr-form-field, .info-main .jnr-form-wrap .jnr-form-addresat { break-inside: avoid !important; }
}

/* --- 404 (spec §6.9) --- */
.j-404 { display: grid; gap: 16px; padding-top: 28px; max-width: 780px; }
.j-404 h1 { font: 800 31px/1.08 Barlow, sans-serif; margin: 0; color: var(--ink); }
.j-404 .lead { margin: 0; font-size: 16px; color: var(--text-2); line-height: 1.55; }
.j-404-szukaj { display: flex; align-items: center; gap: 8px; border: 1px solid var(--field); border-radius: 12px; padding: 4px 4px 4px 12px; background: #fff; }
.j-404-szukaj .btn { padding: 11px 16px; font-size: 15px; flex: none; }
.j-404 .h2 { margin-top: 10px; }
.j-404-kat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.j-404-kat a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; color: var(--ink); }
.j-404-kat a:hover { border-color: var(--brand); }
.j-404-kat b { font: 700 17px/1.2 Barlow, sans-serif; }
.j-404-kat small { grid-row: 2; font-size: 12.5px; color: var(--muted); }
.j-404-kat svg { grid-column: 2; grid-row: 1 / 3; color: var(--brand); }
.j-404-pomoc { margin: 6px 0 0; font-size: 14.5px; color: var(--text-2); }
.j-404-pomoc a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) {
  .j-404 { padding-top: 54px; }
  .j-404 h1 { font-size: 46px; }
  .j-404-kat { grid-template-columns: 1fr 1fr; }
}

/* Kontrast tekstu pomocniczego z treści stron i mu-pluginów (axe, WCAG 1.4.3) — bez zmiany znaczników ani treści w bazie. */
.info-main .jnr-instr-meta { color: var(--muted); } /* mu-plugin jnr-instrukcje-flytec: #8a94a3 dawało 3,06:1; --muted (#5b6677) ma ok. 6:1 na bieli */
.info-main span[style*="#b8860b"] { color: var(--muted) !important; } /* „opcja” w Poradniku (treść strony ma kolor inline #b8860b, 3,1:1; zapis w treści w bazie, więc selektor po atrybucie — DŁUG: zadziała tylko przy dokładnie takim zapisie) */
.info-main .jnr-instr-btn.jnr-instr-soon { background: #eef1f6; color: var(--muted) !important; } /* „Instrukcja w przygotowaniu”: biały tekst na jasnym tle dawał 1,07:1 */