/* ============================================================
   STRONY TRESCIOWE - warstwa typograficzna
   Ladowane na is_page(), z pominieciem stron majacych wlasne arkusze
   (koszyk, zamowienie, moje konto) - patrz bm-newlayout.php.

   DLACZEGO TYLKO TYPOGRAFIA, BEZ KOLOROW:
   Uklady tych stron sa budowane indywidualnie w Oxygenie - 370 z 380 stron
   ma wlasna zawartosc w builderze, wiec nie ma jednego layoutu do wdrozenia.
   Wspolna jest za to typografia, i ona daje najwiecej za najmniejsze ryzyko.

   Kolorow celowo NIE ruszamy. Oxygen ustawia globalnie 'h1..h6 { color:#ffffff }',
   bo w serwisie jest **48 sekcji z ciemnym tlem** (policzone w CSS Oxygena).
   Wymuszenie granatu unieczytelniloby naglowki na wszystkich tych sekcjach.
   Kroje, rozmiary i wagi sa bezpieczne na kazdym tle - kolor nie.

   Sprawdzone: 5 czarnych tel w 255.css siedzi w naglowku i stopce Oxygena,
   ktore i tak ukrywamy (ostatnie to pasek copyrightu). Na tresci stron
   problemu z czernia nie ma.
   Autor: claude, 2026-08-20.
   ============================================================ */

body.page {
    --navy:  #0B2240;
    --red:   #DB0632;
    --cream: #F5F1E9;
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 1. Tekst biezacy -------------------------------
   Oxygen ustawia 'body { font-family:Poppins; font-size:15px; font-weight:500 }'.
   Przechodzimy na Inter i lzejsza grubosc, zgodnie z makieta. */
body.page {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}

body.page p {
    line-height: 1.7;
}

/* ---------- 2. Naglowki ------------------------------------
   Oxygen: 'h1..h6 { font-family: Verdana; font-weight:700 }'.
   Zamieniamy na szeryfowy Playfair o lzejszej grubosci - charakter
   z makiety. KOLORU nie dotykamy (patrz naglowek pliku). */
body.page h1,
body.page h2,
body.page h3,
body.page h4,
body.page h5,
body.page h6 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* Skala wielkosci - lagodniejsza niz sztywne 36px Oxygena
   i skalujaca sie z szerokoscia ekranu. */
body.page h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
body.page h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
body.page h3 { font-size: clamp(1.22rem, 1.9vw, 1.5rem); }
body.page h4 { font-size: clamp(1.08rem, 1.5vw, 1.24rem); }
body.page h5,
body.page h6 { font-size: 1rem; }

/* ---------- 3. Nadtytuly i etykiety ------------------------
   Krotkie teksty pisane wersalikami traktujemy jak nadtytuly z makiety -
   sam krój i swiatlo miedzy literami, bez ingerencji w kolor. */
body.page .ct-text-block[style*="uppercase"],
body.page .ct-span[style*="uppercase"] {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: .14em;
}

/* ---------- 4. Listy i cytaty ------------------------------ */
body.page li {
    line-height: 1.7;
}

body.page blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.5;
}

/* ---------- 5. Tresc redakcyjna ----------------------------
   Bloki wypelniane w edytorze (oxy-stock-content-styles) dostaja
   szerokosc czytania, tak jak wpisy na blogu. */
body.page .oxy-stock-content-styles {
    font-family: var(--sans);
    font-size: 1.01rem;
    font-weight: 300;
    line-height: 1.78;
}

body.page .oxy-stock-content-styles p {
    margin: 0 0 1.35em;
}

body.page .oxy-stock-content-styles img {
    max-width: 100%;
    height: auto;
}

/* ---------- 6. Menu boczne (#menu-sidebar-left-menu) -------
   Zrodlo: universal.css, NIE szablon strony:
     .sidebar-menu a                            { color:#000 }
     .sidebar-menu .current-menu-item a,
     .sidebar-menu a:hover                      { background-color:#000; color:#fff;
                                                  border-color:#000 }
   Czern zamieniamy na granat z makiety.
   Specyficznosc: zrodlo ma (0,1,1) i (0,2,2), a universal.css laduje sie PO
   naszym arkuszu (sprawdzone przy karcie produktu), wiec remisu nie wolno
   zrobic - dokladamy 'body.page' i wychodzimy na (0,2,2) oraz (0,3,3). */
body.page .sidebar-menu a {
    color: var(--navy);
    font-family: var(--sans);
}

body.page .sidebar-menu .current-menu-item a,
body.page .sidebar-menu a:hover {
    background-color: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ---------- 7. /dla-profesjonalistow/ - czarne sekcje ------
   225.css maluje na czarno sekcje z formularzem rejestracji i pasek
   "Strefa architekta / Strefa wykonawcy". Zamieniamy na granat z makiety -
   bialy tekst, ktory juz tam jest, zostaje czytelny.
   Selektory zrodlowe to same ID (1,0,0); 'body.page' daje (1,1,1). */
body.page #section-138-225,
body.page #new_columns-122-225 {
    background-color: var(--navy);
}

body.page #headline-139-225,
body.page #text_block-140-225 {
    color: #fff;
}

/* Formularz rejestracji w tej sekcji.
   225.css koloruje tylko naglowek i akapit wstepny (#headline-139-225,
   #text_block-140-225). Sam formularz (#shortcode-141-225) ma w zrodle
   WYLACZNIE 'width:100%' - zadnych kolorow. Zgody i akapity "Informujemy, ze"
   dziedziczyly wiec ciemny kolor tekstu i na czarnym tle byly nieczytelne
   juz wczesniej; na granacie byloby tak samo. Ustawiamy je na bialo.
   Reguly WooCommerce dla inputow z universal.css tu NIE dzialaja - wszystkie
   sa scope'owane pod '.woocommerce', a to jest Contact Form 7. */
body.page #section-138-225 .wpcf7,
body.page #section-138-225 .wpcf7 p,
body.page #section-138-225 .wpcf7 strong,
body.page #section-138-225 .wpcf7-list-item-label {
    color: #fff;
    font-family: var(--sans);
}

body.page #section-138-225 .wpcf7 a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Pola: biale, zaokraglone jak komponenty makiety. */
body.page #section-138-225 .wpcf7 input[type="text"],
body.page #section-138-225 .wpcf7 input[type="email"],
body.page #section-138-225 .wpcf7 input[type="tel"],
body.page #section-138-225 .wpcf7 select,
body.page #section-138-225 .wpcf7 textarea {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 11px 14px;
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--navy);
}

body.page #section-138-225 .wpcf7 input:focus,
body.page #section-138-225 .wpcf7 select:focus {
    outline: none;
    border-color: var(--red);
}

body.page #section-138-225 .wpcf7 ::placeholder {
    color: #7b8797;
    opacity: 1;
}

/* Przycisk wysylki - plaska czerwien, BEZ hoveru.
   Decyzja klienta z 2026-08-20: wczesniejsza wersja odtwarzala efekt
   "pedzla" z makiety na warstwie tla (input nie ma pseudoelementow,
   wiec maski z .bmx-btn nie dalo sie uzyc) - cofnieta na zyczenie.
   Przycisk ma byc czerwony i nieruchomy.

   'appearance:none' zostaje - bez niego normalize Oxygena
   ('-webkit-appearance: button') kaze przegladarce narysowac wlasne tlo
   i nasza czerwien znika. Ten sam problem zjadl kiedys ikone lupy
   w wyszukiwarce naglowka. */
body.page #section-138-225 .wpcf7 input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 999px;
    padding: 15px 30px;
    font-family: var(--sans);
    font-size: .735rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

/* CF7 trzyma przycisk wylaczony do czasu zaladowania skryptu - wtedy
   bez lapki, zeby nie obiecywac klikniecia. */
body.page #section-138-225 .wpcf7 input[type="submit"][disabled] {
    cursor: default;
    opacity: .55;
}

/* Hover trzech przyciskow "PRZEJDZ" - w zrodle czern, u nas czerwien marki. */
body.page #link_button-126-225:hover,
body.page #link_button-131-225:hover,
body.page #link_button-136-225:hover {
    background-color: var(--red);
    border-color: var(--red);
    color: #fff;
}