/* Fundament stron w odsłonie v2 — tokeny i elementy powtarzające się
   na każdej z nich (kontener, nagłówki, etykiety, przyciski).
   Ładowany wszędzie tam, gdzie treść zawiera kontener .najdul-v2;
   style konkretnych sekcji mieszkają w arkuszach danej strony. */

.najdul-v2 {
    --nj-green: var(--theme-palette-color-1, #5a8139);
    --nj-green-dark: var(--theme-palette-color-2, #48682b);
    --nj-ink: var(--theme-palette-color-4, #192c27);
    --nj-mint: var(--theme-palette-color-5, #E6F0EE);
    --nj-slate: #434f58;
    /* Tekst drugorzedny — jedyna dozwolona szarosc na tekscie.
       4,5:1 na kazdym tle serwisu; nie dokladaj nowych odcieni. */
    --nj-muted: #5a6a64;
    /* Szarosc dozwolona WYLACZNIE na tekscie >= 24px (prog 3:1).
       Uzywa jej dekoracyjna numeracja kart. Nie stosuj na drobnym tekscie. */
    --nj-muted-lg: #7b8a85;
    --nj-mist: #F2F7F6;
    --nj-snow: #FBFCFC;
    --nj-radius: 14px;
    /* Zaokrąglenie dolnych narożników baneru — jeden kształt na całym serwisie. */
    --nj-hero-radius: 28px;
}

/* ---------- Elementy wspólne ---------- */

.najdul-v2 .nj-wrap {
    width: var(--theme-container-width, min(100%, 1290px));
    max-width: var(--theme-normal-container-max-width, 1290px);
    margin-inline: auto;
}

.najdul-v2 h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--nj-ink);
    margin: 0 0 14px;
}

.najdul-v2 .nj-lead {
    color: var(--nj-muted);
    font-size: 15px;
    line-height: 1.7;
    max-width: 60ch;
    margin: 0;
}

.najdul-v2 .nj-label {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nj-green);
    background: var(--nj-mint);
    padding: 6px 12px;
    border-radius: 999px;
    margin: 0 0 16px;
}

/* Przycisk wypełniony — ten sam kształt i wymiary co przycisk „Katalog roślin"
   w pasku. Wszystko poza kolorem bierze się ze zmiennych motywu, więc jeden
   suwak w Kreatorze → Przyciski przestawia każdy przycisk w serwisie.
   Pigułka 999px i wersaliki zniknęły 2026-10-04 na prośbę klienta. */
.najdul-v2 a.nj-btn,
.najdul-v2 .nj-btn>.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--theme-button-min-height, 40px);
    padding: var(--theme-button-padding, 5px 20px);
    border-radius: var(--nj-btn-radius);
    font-size: var(--theme-button-font-size, 15px);
    font-weight: var(--theme-button-font-weight, 500);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    transition: .24s ease;
}

.najdul-v2 a.nj-btn--solid,
.najdul-v2 .nj-btn--solid>.wp-block-button__link {
    background: var(--nj-green);
    color: #fff;
}

.najdul-v2 a.nj-btn--solid:hover,
.najdul-v2 .nj-btn--solid>.wp-block-button__link:hover {
    background: var(--nj-green-dark);
}

/* Obrys na jasnym tle. Wariant --ghost jest biały i czytelny tylko na
   ciemnych sekcjach, więc jasne karty potrzebują własnego. */
.najdul-v2 a.nj-btn--line,
.najdul-v2 .nj-btn--line>.wp-block-button__link {
    border: 1px solid #cfdcd4;
    background: #fff;
    color: var(--nj-ink);
}

.najdul-v2 a.nj-btn--line:hover,
.najdul-v2 .nj-btn--line>.wp-block-button__link:hover {
    border-color: var(--nj-green);
    color: var(--nj-green-dark);
}

.najdul-v2 a.nj-btn--ghost,
.najdul-v2 .nj-btn--ghost>.wp-block-button__link {
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
}

.najdul-v2 a.nj-btn--ghost:hover,
.najdul-v2 .nj-btn--ghost>.wp-block-button__link:hover {
    background: rgba(255, 255, 255, .14);
}

/* Etykieta wypełniona — używa jej sekcja karuzeli. */
.najdul-v2 .nj-label--solid {
    background: var(--nj-green-dark);
    color: #fff;
}

/* ---------- Baner główny ---------- */

.najdul-v2 .nj-hero {
    padding-block: clamp(80px, 11vw, 150px);
}

/* Jeden kształt baneru na wszystkich stronach: dolne narożniki zaokrąglone.
   core/cover trzyma zdjęcie w tle jako element pozycjonowany absolutnie, więc
   bez overflow: hidden obraz przykryłby zaokrąglenie. */
.najdul-v2 .nj-hero {
    border-bottom-left-radius: var(--nj-hero-radius);
    border-bottom-right-radius: var(--nj-hero-radius);
    overflow: hidden;
}

/* Wariant bez zdjęcia — dla stron, które czekają jeszcze na fotografię.
   To zwykła grupa, a nie core/cover, więc nie ma wewnętrznego kontenera
   ograniczającego szerokość — linię treści wyznacza padding samej sekcji.
   Liczony jest ze 100% szerokości sekcji, a NIE ze 100vw: vw obejmuje pasek
   przewijania i tekst uciekłby o kilkanaście pikseli w bok. */
.najdul-v2 .nj-hero--plain {
    background: linear-gradient(135deg, #192c27 0%, #31503f 100%);
    padding-inline: max(16px, calc((100% - min(var(--theme-container-width, 100%), var(--theme-normal-container-max-width, 1290px))) / 2));
}

/* Strony wewnętrzne dostają niższy baner niż strona główna. */
.najdul-v2 .nj-hero--compact {
    padding-block: clamp(56px, 7vw, 96px);
}

.najdul-v2 .nj-hero--compact .nj-hero__title {
    max-width: 24ch;
    font-size: clamp(28px, 3.4vw, 40px);
    margin-bottom: 14px;
}

.najdul-v2 .nj-hero--compact .nj-hero__lead {
    max-width: 76ch;
    margin-bottom: 0;
    font-size: 14px;
}

.najdul-v2 .nj-hero .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    /* Ta sama linia co logo i pozostałe sekcje — kontener Blocksy. */
    width: var(--theme-container-width, min(100%, 1290px));
    max-width: var(--theme-normal-container-max-width, 1290px);
    margin-inline: auto;
    padding-inline: 0;
}

/* Zabezpieczenie: układ "constrained" rdzenia WP centruje dzieci regułą
   margin-left/right: auto !important. Baner ma być wyrównany do lewej,
   więc blokujemy to na stałe — nawet gdyby ktoś wrócił do constrained. */
.najdul-v2 .nj-hero .wp-block-cover__inner-container > * {
    margin-inline: 0 !important;
}

.najdul-v2 .nj-hero__title {
    max-width: 16ch;
    margin: 0 0 22px;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
}

.najdul-v2 .nj-hero__lead {
    max-width: 58ch;
    margin: 0 0 34px;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}

/* Podstrony mają w banerze także etykietę, drugi akapit albo pigułki.
   Odstępy dokładamy tutaj, bo wariant --compact zeruje margines pod wstępem. */
.najdul-v2 .nj-hero .nj-label {
    margin-bottom: 18px;
}

.najdul-v2 .nj-hero__lead + .nj-hero__lead {
    margin-top: 14px;
}

.najdul-v2 .nj-hero--compact .wp-block-buttons {
    margin-top: 28px;
}

.najdul-v2 .nj-hero .wp-block-buttons {
    gap: 14px;
}

/* Przyciski w treści mają mówić tym samym językiem, co przycisk „Katalog
   roślin" w pasku: ten sam kształt, wysokość, krój i wielkość liter.
   Wymiary bierzemy ze zmiennych motywu, więc zmiana w Kreatorze (Przyciski)
   przenosi się tutaj sama. Jedyne, co dokładamy, to zaokrąglenie — token
   globalny Blocksy ma 0px, a pasek nadpisuje go na 10px. */
.najdul-v2 .wp-block-button.is-style-outline > .wp-block-button__link,
.najdul-v2 .nj-hero .wp-block-button__link {
    min-height: var(--theme-button-min-height, 40px);
    padding: var(--theme-button-padding, 5px 20px);
    font-size: var(--theme-button-font-size, 15px);
    font-weight: var(--theme-button-font-weight, 500);
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--nj-btn-radius);
    transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

/* Wariant na ciemnym banerze. Zieleń przycisku z paska (#5a8139) daje na
   powłoce baneru (#192c27) tylko 3,19:1, więc tutaj ten sam przycisk jest
   biały — kształt i wymiary bez zmian, kontrast 14,7:1. Najechanie działa
   jak w pasku: wypełnia się kolorem obrysu, a tekst przechodzi na kontrę. */
.najdul-v2 .nj-hero .is-style-outline > .wp-block-button__link {
    border-color: #fff;
    color: #fff;
    background: transparent;
}

.najdul-v2 .nj-hero .is-style-outline > .wp-block-button__link:hover,
.najdul-v2 .nj-hero .is-style-outline > .wp-block-button__link:focus-visible {
    border-color: #fff;
    background: #fff;
    color: var(--nj-ink);
}

@media (max-width: 689px) {
    .najdul-v2 {
        --nj-hero-radius: 20px;
    }

    .najdul-v2 .nj-hero__title {
        max-width: none;
    }

    .najdul-v2 .nj-hero .wp-block-buttons {
        width: 100%;
    }
}

/* ---------- Pasek „Zadzwoń do nas" ----------
   Zastąpił sekcję newslettera 2026-09-21: klient odłożył decyzję o liście
   mailingowej, a to miejsce ma prowadzić wprost do telefonu. Sekcja stoi na
   core/cover, więc zdjęcie i przyciemnienie robi rdzeń — tutaj zostaje układ
   i typografia. Ten sam blok jest na stronie głównej i na /kontakt/.
   Reguły newslettera (.nj-news, .nj-form) zostały usunięte razem z sekcją;
   jeśli newsletter wróci, są w historii pliku. */

.najdul-v2 .nj-call {
    padding: 64px 0;
}

.najdul-v2 .nj-call__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
}

.najdul-v2 .nj-call .nj-label {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.najdul-v2 .nj-call h2 {
    color: #fff;
    margin-bottom: 10px;
}

.najdul-v2 .nj-call__text p {
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    max-width: 52ch;
}

/* Biały przycisk zamiast zielonego: numer telefonu jest tu głównym wezwaniem,
   a biel na ciemnym tle daje wyraźnie wyższy kontrast niż zieleń marki. */
.najdul-v2 .nj-call__cta .nj-btn > .wp-block-button__link {
    background: #fff;
    color: var(--nj-ink);
    font-size: 15px;
    padding: 15px 30px;
    white-space: nowrap;
}

.najdul-v2 .nj-call__cta .nj-btn > .wp-block-button__link:hover,
.najdul-v2 .nj-call__cta .nj-btn > .wp-block-button__link:focus-visible {
    background: var(--nj-mint);
    color: var(--nj-ink);
}
/* ---------- FAQ (sekcja; harmonijkę stylizuje qa-sets.css) ---------- */

.najdul-v2 .nj-faq {
    background: #fff;
    padding: 96px 0;
}

.najdul-v2 .nj-faq__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 36px;
}

@media (max-width: 900px) {
    .najdul-v2 .nj-call__grid,
    .najdul-v2 .nj-faq__head {
        grid-template-columns: 1fr;
    }
}

/* ---------- Pułapka na boty ----------
   Pole musi wyglądać w HTML jak każde inne, więc chowamy je stylem, a nie
   atrybutem hidden. Wartość sprawdza inc/forms.php na filtrze wpcf7_spam. */

.najdul-v2 .nj-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Okruszki nawigacyjne ---------- */

/* Przeniesione do najdul-chrome.css — pasek okruszków pojawia się także na
   blogu, w katalogu i na kartach produktów, więc nie może zależeć od tego,
   czy treść wpisu zawiera kontener .najdul-v2. */

/* ---------- Zgoda RODO i pytanie antyspamowe ----------
   Wspólne dla wszystkich pięciu formularzy CF7: karty kontaktowej
   (.nj-form-card, contact-v2.css) i formularzy na podstronach Współpracy
   (.nj-inquiry__form, coop-v2.css). Dlatego reguły stoją w fundamencie,
   a nie w arkuszu jednej strony. Dodane 2026-09-21 razem ze zgodami. */

.najdul-v2 .nj-field--consent .wpcf7-list-item {
    margin: 0;
}

.najdul-v2 .nj-field--consent label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    cursor: pointer;
}

/* Etykieta zgody to zdanie, nie nagłówek pola — kasujemy wygląd
   nadawany przez `.nj-field > label > span:first-child`. */
.najdul-v2 .nj-field--consent .wpcf7-list-item-label {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--nj-muted);
}

.najdul-v2 .nj-field--consent .wpcf7-list-item-label a {
    color: var(--nj-green-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.najdul-v2 .nj-field--consent input[type="checkbox"] {
    appearance: auto;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--nj-green);
}

/* Pytanie kontrolne: CF7 sam rysuje <label> z .wpcf7-quiz-label,
   więc własnej etykiety nie dokładamy — tu tylko układ. */
.najdul-v2 .nj-field--quiz label {
    display: block;
}

.najdul-v2 .nj-field--quiz .wpcf7-quiz-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nj-slate);
}

.najdul-v2 .nj-field--quiz input {
    max-width: 180px;
}