/*
Theme Name: Nutree child
Template:   nutree
Theme URI: https://vedtheme.com/nutree/
Author: Themeht
Author URI: http://www.themeht.com
Description: Nutree - Child Theme
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nutree
*/

.comment-form-url {
    display: none !important;
}

/* === blog hero (Strefa wiedzy) - split layout === */
.ds-blog-hero { padding: 0 !important; background: none !important; }
.ds-blog-hero__inner { display: flex; min-height: 380px; position: relative; }

.ds-blog-hero__left {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #f3f7f0;
    padding: 60px 40px;
    box-sizing: border-box;
}

.ds-blog-hero__left .container,
.ds-blog-hero__left .theme-breadcrumb-box {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.ds-blog-hero__left .theme-breadcrumb-box h1 {
    margin: 0;
    white-space: nowrap;
    line-height: 1.1;
    color: var(--themeht-dark-color) !important;
}

.ds-blog-hero__right {
    flex: 1 1 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.ds-blog-hero__right::after {
    color: #000;
}

/* === MOBILE: ukryj lewa kolumne, napis na zdjeciu === */
@media (max-width: 991px) {
    .ds-blog-hero__inner { display: block; min-height: 0; }

    .ds-blog-hero__left { display: none; }

    .ds-blog-hero__right {
        width: 100%;
        min-height: 280px;
        position: relative;
    }

    /* CHANGED: czarny overlay na cale zdjecie */
    .ds-blog-hero__right::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    /* CHANGED: napis "STREFA\nWIEDZY" - 2 wiersze, do prawej */
    .ds-blog-hero__right::after {
        content: 'Strefa\Awiedzy';        /* \A = newline w CSS content -> 2 wiersze */
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;        /* CHANGED: do prawej */
        color: #fff;
        font-size: 2.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 2;
        text-align: right;                /* CHANGED: tekst wyrownany do prawej */
        padding: 20px 42px;
        font-family: inherit;
        white-space: pre;                  /* CHANGED: respektuj \A jako newline */
        line-height: 1.3;
    }
}


@media (max-width: 480px) {
    .ds-blog-hero__right { min-height: 220px; }
    .ds-blog-hero__right::after { font-size: 2rem; padding: 32px; }
}


/* ============================================================================ */
/* STRONA GŁÓWNA – hero slider na pełny ekran                                   */
/* Cel: wstęp (slider) wypełnia ekran, zielony pasek kalkulatora BMI ląduje na  */
/* samym dole pierwszego ekranu, a zdjęcie zakotwiczone OD GÓRY (twarze nie     */
/* są ucinane). Wysokości nagłówka i paska BMI to zmienne – łatwo dostroić.     */
/* ============================================================================ */
:root {
    --ds-header-h: 92px;   /* wysokość białego nagłówka u góry */
    --ds-bmi-h: 150px;     /* wysokość zielonego paska KALKULATOR BMI */
}

/* Slide wypełnia ekran minus nagłówek minus pasek BMI -> BMI na dole 1. ekranu */
.banner-slider.banner-slider-two,
.banner-slider.banner-slider-two .swiper-wrapper,
.banner-slider.banner-slider-two .swiper-slide {
    height: auto !important;
}

.banner-slider.banner-slider-two .swiper-slide {
    min-height: calc(100vh - var(--ds-header-h) - var(--ds-bmi-h));   /* fallback */
    min-height: calc(100svh - var(--ds-header-h) - var(--ds-bmi-h));  /* stabilne na mobile */
    display: flex;
    align-items: center;
}

/* Zdjęcie hero zawsze od góry (żeby twarze nie były ucinane).                   */
/* Jeśli osoba ucieka w bok, zmień 'center top' na 'right top'.                  */
.banner-slider.banner-slider-two .slider-img {
    background-position: center top !important;
    background-size: cover !important;
}

/* Wysokość daje teraz slide, więc redukujemy monstrualny padding pionowy.       */
.banner-slider.banner-slider-two .banner-content {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

@media (max-width: 991px) {
    :root {
        --ds-header-h: 70px;
        --ds-bmi-h: 230px;   /* na mobile pasek BMI jest wyższy (pola jeden pod drugim) */
    }
    .banner-slider.banner-slider-two .banner-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* ============================================================================ */
/* DOSTĘPNOŚĆ (Lighthouse Accessibility) — kontrast kolorów                     */
/* ============================================================================ */

/* Kalkulator BMI: biały tekst na jasnozielonym pasku nie spełniał AA.          */
/* Zostawiamy markowy zielony pasek, ale tekst robimy ciemny (czytelny, AA+).   */
.ds-bmi {
    --ds-bmi-text: #143109 !important;
    --ds-bmi-muted: #20420f !important;
}

/* Zielony akcent #8CC600 jako TEKST na jasnym tle ma kontrast ~1.9:1 (fail).    */
/* Głębsza zieleń #4f7a00 przechodzi AA, a wciąż czytelnie „markowa".            */
.banner-content span[style*="8CC600"],
.banner-content span[style*="8cc600"] {
    color: #4f7a00 !important;
}

/* Pomarańczowy przycisk „OBLICZ": biały tekst na #f59e0b nie spełniał AA.       */
/* Ciemny tekst na bursztynie (spójny z resztą kalkulatora) daje wysoki kontrast.*/
.ds-bmi__button {
    color: #1a1505 !important;
}

/* --- Globalny kontrast (wybór: zachowujemy żywe kolory, zmieniamy tekst) --- */

/* Pełne pomarańczowe CTA (secondary-btn) + przyciski formularzy CF7:            */
/* biały tekst na pomarańczu miał ~2.2:1. Ciemny tekst na pomarańczu = ~7:1.     */
.themeht-btn.secondary-btn,
.themeht-btn.secondary-btn span,
.wpcf7-submit,
input.wpcf7-submit,
.wpcf7 input[type="submit"] {
    color: #1a1505 !important;
}

/* Przyciski outline: zielony tekst/obwódka — głębsza zieleń (AA na białym).      */
.themeht-btn.outline-btn,
.themeht-btn.outline-btn span {
    color: #3d6800 !important;
}

/* Szare opisy w „featured" boxach (#717580 -> 4.32) — ciemniejszy szary.        */
.featured-desc p,
.featured-desc {
    color: #595d67 !important;
}

/* Stopka: szary tekst na ciemnym tle miał ~2.0:1 — rozjaśniamy do jasnoszarego. */
.footer .footer-info,
.footer .footer-info span,
.footer .footer-info-in,
.footer .footer-info-in span {
    color: #b9bcc4 !important;
}