/* ============================================================
   KOLORY - narzedzie doboru kolorow (wtyczka bmpolska-pf_plugin)
   Ladowane na /kolory/ i podstronach - patrz bm-newlayout.php.

   CO TO ZA WIDOK:
   Cala tresc tych stron to jeden shortcode renderujacy '.pf-plugin'.
   Oxygen daje wylacznie baner i (ukryta juz) stopke. Zrodlo stylow to
   'proformat.css' (622 linie, uchwyt 'pf-css') plus 'custom.css'
   (uchwyt 'custom-css'). Nasz arkusz deklaruje zaleznosc od 'custom-css',
   wiec WordPress wypisze go PO obu - remisy specyficznosci wygrywamy
   kolejnoscia, bez !important.

   CZEGO CELOWO NIE RUSZAMY:
   - '.single-color', '.left-side' i siatki probek - kolory i wymiary
     ustawia tam JavaScript inline, a 'custom.css' juz raz przerabial
     ten uklad z poziomego na pionowy. Nadpisywanie = pewna regresja.
   - klas z sufiksem '-darker' ('.color-name-darker', '.color-more-darker',
     '.palette-header-darker') - to mechanizm KONTRASTU: skrypt dokleja je,
     gdy probka jest ciemna, zeby tekst na niej byl czytelny. Zmiana ich
     kolorow potrafi zrobic bialy tekst na bialym tle.
   Autor: claude, 2026-08-20.
   ============================================================ */

.pf-plugin {
    --navy:      #0B2240;
    --red:       #DB0632;
    --ink:       #171A1E;
    --muted:     #6C7079;
    --paper:     #FCFAF6;
    --cream:     #F5F1E9;
    --line:      rgba(11, 34, 64, .13);
    --line-soft: rgba(11, 34, 64, .07);
    --shadow-m:  0 14px 40px -18px rgba(11, 34, 64, .22);
    --r:         18px;
    --ease:      cubic-bezier(.22, 1, .36, 1);
    --serif:     "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-family: var(--sans);
    font-weight: 300;
    color: var(--ink);
}

/* ---------- 1. Naglowek narzedzia --------------------------
   Zrodlo: '.pf-plugin h2 { font-family:Poppins; font-weight:300;
   margin-bottom:50px }'. */
body .pf-plugin h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--navy);
    margin-bottom: 34px;
}

/* ---------- 2. Trzy kafelki wyboru (strona /kolory/) -------
   Zrodlo uklada je flexem 'space-between' ze sztywnymi 'width:30%'
   i 'height:300px'. Na waskim ekranie nie zawijaly sie w ogole -
   przechodzimy na siatke, ktora robi to sama. */
body .pf-plugin .boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
    justify-content: initial;
}

@media (max-width: 780px) {
    body .pf-plugin .boxes {
        grid-template-columns: 1fr;
    }
}

body .pf-plugin .boxes a {
    width: auto;
    height: auto;
    min-height: 260px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: none;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}

body .pf-plugin .boxes a:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-m);
    border-color: transparent;
}

body .pf-plugin .boxes a .box {
    gap: 18px;
    padding: 30px 22px;
}

body .pf-plugin .boxes a .box-image img {
    max-width: 100%;
    height: auto;
}

body .pf-plugin .boxes a .box-header {
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 500;
    color: var(--navy);
    text-align: center;
    transition: color .35s var(--ease);
}

body .pf-plugin .boxes a:hover .box-header {
    color: var(--red);
}

/* ---------- 3. Paski nawigacji: rodziny i palety -----------
   Zrodlo: Poppins 300, kolor #2D2D2D, aktywny z podkresleniem #ba0c2c
   (stara, ciemniejsza czerwien) - ujednolicamy z czerwienia marki. */
body .pf-plugin .families-menu .family-menu,
body .pf-plugin .palette-list .palette-list-item {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--navy);
}

body .pf-plugin .families-menu .family-menu .family-name,
body .pf-plugin .palette-list .palette-list-item .palette-name {
    color: var(--muted);
    font-family: var(--sans);
    font-weight: 500;
}

body .pf-plugin .families-menu .family-menu .family-name:hover,
body .pf-plugin .palette-list .palette-list-item .palette-name:hover {
    color: var(--navy);
}

body .pf-plugin .families-menu .family-menu .active-menu,
body .pf-plugin .palette-list .palette-list-item .active-menu {
    color: var(--navy) !important; /* zrodlo tez ma !important - inaczej remis */
    border-bottom: 2px solid var(--red);
}

/* ---------- 4. Naglowki panelu koloru ----------------------
   UWAGA: '.header-*' opisuja tekst obok probki, ale kolor tla bierze
   sie z inline'a JS-a. Ustawiamy tylko kroje, nigdy kolory. */
body .pf-plugin .single-family .header-1,
body .pf-plugin .single-family .header-2,
body .pf-plugin .single-family .header-3 {
    font-family: var(--sans);
}

body .pf-plugin .single-family .header-1 {
    font-family: var(--serif);
    font-weight: 500;
}

body .pf-plugin .single-family .header-3 a {
    color: var(--red);
}

body .pf-plugin .single-family .right-side .color-name {
    font-family: var(--serif);
    font-weight: 500;
}

/* Przycisk "wiecej o kolorze". Wariant '.color-more-darker' zostaje
   nietkniety - to on ratuje czytelnosc na ciemnych probkach. */
body .pf-plugin .single-family .right-side .color-more-button {
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- 5. Kolekcje (palety) ---------------------------
   Zrodlo: '.palette { width:30%; box-shadow:... }' - ta sama sztywna
   szerokosc co przy kafelkach, wiec tak samo przenosimy na siatke. */
body .pf-plugin .palettes-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    justify-content: initial;
}

@media (max-width: 980px) {
    body .pf-plugin .palettes-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body .pf-plugin .palettes-menu {
        grid-template-columns: 1fr;
    }
}

body .pf-plugin .palettes-menu .palette {
    width: auto;
    margin-bottom: 0;
    padding: 0 0 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: none;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}

body .pf-plugin .palettes-menu .palette:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-m);
    border-color: transparent;
}

body .pf-plugin .palettes-menu .palette a .palette-name {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--navy);
    padding: 22px 20px 10px;
}

body .pf-plugin .palettes-menu .palette a .palette-description {
    padding: 0 20px;
    font-family: var(--sans);
    font-weight: 300;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ---------- 6. Znajdz kolor --------------------------------
   Pole tekstowe ma w zrodle 'border:1px solid transparent' i wlasna
   ikone lupy w ':before' kontenera - ikony NIE ruszamy, zeby nie
   powtorzyc historii z wyszukiwarka w naglowku. */
body .pf-plugin .find-color .find-top .short-text {
    font-family: var(--sans);
    font-weight: 300;
    color: var(--muted);
}

body .pf-plugin input[name="color"] {
    font-family: var(--sans);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 40px 10px 18px;
    color: var(--navy);
}

body .pf-plugin input[name="color"]:focus {
    outline: none;
    border-color: var(--navy);
}

/* Przycisk szukania - w zrodle zwykla ramka #686868. */
body .pf-plugin .find-color .find-bottom input[name="find-color"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 999px;
    padding: 12px 30px;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

/* Wyniki wyszukiwania koloru. '.color-box' dostaje kolor inline z JS-a -
   dodajemy mu tylko zaokraglenie. */
body .pf-plugin .searched-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    justify-content: initial;
}

body .pf-plugin .searched-colors a .searched-color {
    width: auto;
    height: auto;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}

body .pf-plugin .searched-colors a:hover .searched-color {
    border-color: transparent;
    box-shadow: var(--shadow-m);
}

body .pf-plugin .searched-colors a .searched-color .color-box {
    flex: 0 0 70px;
    border-radius: 8px;
}

body .pf-plugin .searched-colors a .searched-color .color-details {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--navy);
}