/* assets/css/wellcore.css — nadpisania Wellcore, ładowane po color-3.css */
.wellcore-logo { font-family: var(--wc-font-two, "Kanit", sans-serif); font-weight: 700; font-size: 30px; letter-spacing: 1px; color: var(--wc-white, #ffffff); text-transform: uppercase; }
.wellcore-logo span { color: var(--wc-base, #F9FF04); }
.wellcore-logo:hover { color: var(--wc-base, #F9FF04); }
.main-menu-three__contact-box a + a { margin-left: 24px; }
.main-menu-three__contact-box a { color: var(--wc-white, #ffffff); }
.main-menu-three__contact-box a:hover { color: var(--wc-base, #F9FF04); }
.main-menu-three__contact-box .wc-social a + a { margin-left: 0; }
.why-choose-three__single .wc-time { margin-top: 6px; font-family: var(--wc-font-two, "Kanit", sans-serif); }
.why-choose-three__single .wc-time del { color: var(--wc-gray, #797E88); font-weight: 400; }
.why-choose-three__single .wc-time strong { color: var(--wc-base, #F9FF04); font-weight: 600; font-size: 18px; }
.why-choose-three__left { display: block; }
.why-choose-three__single { position: relative; display: block; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.why-choose-three__single:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.why-choose-three__content h3 { font-size: 18px; font-weight: 500; line-height: 26px; color: var(--wc-white, #ffffff); margin: 0; }
.about-three__happy-client { margin-top: 40px; }
.wc-about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
.wc-about-stats__count { display: flex; align-items: baseline; gap: 2px; }
.wc-about-stats__count h3 { font-size: 32px; font-weight: 600; line-height: 32px; font-family: var(--wc-font-two, "Kanit", sans-serif); color: var(--wc-white, #ffffff); margin: 0; }
.wc-about-stats__count span { font-size: 20px; font-weight: 600; line-height: 32px; color: var(--wc-white, #ffffff); font-family: var(--wc-font-two, "Kanit", sans-serif); }
.wc-about-stats__single p { font-size: 14px; line-height: 20px; color: var(--wc-white, #ffffff); margin-top: 4px; }

/* Fix round 1: template's .about-three__text-2 { text-transform: capitalize } Title-Cases the Polish paragraph */
.about-three__text-2 { text-transform: none; }

/* Realizacje (task 5): keep slide title/category/text visible without hover, readable over the photo */
.portfolio-three__text { text-transform: none; }
.portfolio-three__content { opacity: 1; transform: none; left: 24px; right: 24px; bottom: 24px; background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, .65) 35%, rgba(15, 15, 15, .94) 100%); padding: 60px 6px 6px; border-radius: 4px; }
.portfolio-three__single-title, .portfolio-three__sub-title { opacity: 1; transform: none; }
.portfolio-three__content .portfolio-three__text { color: var(--wc-white, #ffffff); font-size: 15px; line-height: 26px; margin-top: 10px; max-width: 510px; }

/* Stopka (task 5): kolumna "o firmie" bez odpowiednika w szablonie */
.footer-widget-three__about-title { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--wc-white, #ffffff); text-transform: uppercase; margin-bottom: 14px; }
.footer-widget-three__about p { color: var(--wc-gray, #797E88); line-height: 24px; margin-bottom: 8px; }
.footer-widget-three__about p:last-child { margin-bottom: 0; }

/* Kontakt (task 6): portretowe zdjęcie 1067x1600 w szerokim, niskim page-header — pokaż górną część sylwetki miasta zamiast geometrycznego środka */
.page-header__bg { background-position: center 25%; }

/* Kontakt (task 6): odstęp nad pełną szerokością mapy pod kolumnami info/formularz */
.wc-contact-map-row { margin-top: 50px; }

/* Keep the photo's natural aspect ratio below the 3-column desktop layout (width/height
   attributes stay for CLS; without height:auto the attribute height was used as CSS height). */
@media (max-width: 1199.98px) {
    .why-choose-three__img img { height: auto; }
}

/* Task 7: #czas — Bootstrap .row stretches the 3 columns to equal height (the 5-item
   list is the tallest), but the two photo columns only fill their natural (short)
   aspect-ratio height, leaving loose empty space under the photos on desktop.
   Let the photos fill the stretched column height instead of floating at the top. */
@media (min-width: 1200px) {
    .why-choose-three__middle,
    .why-choose-three__img {
        height: 100%;
    }

    .why-choose-three__img img {
        height: 100%;
        object-fit: cover;
    }
}

/* Task 7: stopka na mobile (<=767px) — kolumny "o firmie" / linki / kontakt stykają się
   bez odstępu (żadna z 2. i 3. kolumny nie ma nagłówka), CTA i dane firmy zlewają się
   w jeden blok. Odstęp + cienka linia oddzielają kolejne kolumny. */
@media (max-width: 767px) {
    .footer-widget-three__about,
    .footer-widget-three__link,
    .footer-widget-three__contact-list {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
}

/* Task 7: template's contact.css Title-Cases Polish copy via text-transform: capitalize.
   .contact-page__top-title breaks the lead sentence; .contact-page__contact-content h3
   turns "E-mail" into "E-Mail" and "Dane firmy" into "Dane Firmy". */
.contact-page__top-title { text-transform: none; }
.contact-page__contact-content h3 { text-transform: none; }

/* C2 (final fix wave): contact.html body lacked home-body-color, so the .contact-page /
   .page-header text (styled in contact.css/page-header.css for a light page) was unreadable
   on the default white background. body class fixed in contact.html; these overrides make the
   section readable on the dark #121212 body background from home-body-color. */
.contact-page__top-title { color: var(--wc-white, #ffffff); }
.contact-page__contact-content h3 { color: var(--wc-white, #ffffff); }
.contact-page__contact-content p { color: var(--wc-gray, #797E88); }
.contact-page__form-title { color: var(--wc-white, #ffffff); }
.contact-page__input-box input[type="text"],
.contact-page__input-box input[type="email"],
.contact-page__input-box input[type="number"],
.contact-page__input-box textarea {
    background: #1b1b1b;
    color: #fff;
    border: 1px solid #2a2a2a;
}
.contact-page__input-box input::placeholder,
.contact-page__input-box textarea::placeholder {
    color: var(--wc-gray, #797E88);
}
/* contact.css hard-codes this button to white-on-black; put back the template's
   yellow .thm-btn look (background: var(--wc-base, #F9FF04), black text). */
.contact-page__btn-box .thm-btn {
    background-color: var(--wc-base, #F9FF04);
    color: var(--wc-black, #121212);
}
.contact-page__btn-box .thm-btn::before { background-color: var(--wc-white, #ffffff); }
.contact-page__btn-box .thm-btn::after { background-color: rgba(var(--wc-white-rgb, 255, 255, 255), .30); }
.contact-page__btn-box .thm-btn:hover { color: var(--wc-black, #121212); }

/* C3: carousel slide photos had no fixed height, so the 4 realizacje slides were ragged.
   640px (was 520) so the long Debt Scanner description fits under the logo. */
.portfolio-three__img img { width: 100%; height: 640px; object-fit: cover; }
@media (max-width: 767px) {
    .portfolio-three__img img { height: 600px; }
}
/* Long-description card: tighter copy so three paragraphs fit under the logo band without
   overlapping it. Language-independent — PL/EN/RU all use the same tightened values (owner
   reported an ~8px overlap on the PL Debt Scanner card; EN/RU were already tightened here,
   this unifies PL onto the same rule instead of carrying per-language twins). */
.portfolio-three__single--long .portfolio-three__content .portfolio-three__text {
    font-size: 13px;
    line-height: 20px;
    margin-top: 6px;
}
@media (max-width: 767px) {
    .portfolio-three__single--long .portfolio-three__content .portfolio-three__text {
        font-size: 13px;
        line-height: 20px;
    }
}

/* Client logo overlay on a realizacje card: covers the whole image, photo dimmed underneath,
   sits above the hover dim layer and below the arrow / bottom content. */
.portfolio-three__logo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 160px 36px 0;
    background: rgba(15, 15, 15, .58);
    pointer-events: none;
}
/* Fixed 130px band so logos with different aspect ratios share one vertical axis. */
.portfolio-three__logo img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: 130px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}
@media (max-width: 767px) {
    .portfolio-three__logo { padding: 80px 24px 0; }
    .portfolio-three__logo img { height: 100px; }
}

/* C4: "Go Back Top" widget is fixed to the viewport bottom-right; keep it off the about-section
   stat labels ("...linii własnego kodu", "...zautomatyzowanych procesów") and off the footer
   copyright line. */
@media (min-width: 1200px) and (max-width: 1500px) {
    .about-three .wc-about-stats {
        padding-right: 56px;
    }
}
@media (max-width: 767px) {
    .site-footer-three__bottom { padding-bottom: 64px; padding-right: 56px; }
}

/* I1: template Title-Cases these via text-transform: capitalize/uppercase. */
.main-menu__list > li > a,
.mobile-nav__container .main-menu__list > li > a,
.thm-breadcrumb li,
.thm-breadcrumb li a {
    text-transform: none;
}

/* I4: banner and page-header main titles promoted from h2/h3 to h1 (single h1 per page).
   Replicate the template's h2/h3 rules exactly so styling is unchanged. */
.banner-three__title-one h1,
.banner-three__title-two h2 {
    font-size: 76px;
    font-weight: 700;
    line-height: 1.1em;
}
/* Avoid an orphaned last word ("rzeczy.") when the h1 wraps to two lines. */
.banner-three__title-one h1 {
    text-wrap: balance;
}
/* Yellow accent: the template paints h2 with a 2-line gradient (white top / yellow bottom),
   which only works when the heading wraps exactly to 2 lines. Use a solid span instead. */
.banner-three__title-two h2 {
    background: none;
    -webkit-text-fill-color: var(--wc-white, #ffffff);
    color: var(--wc-white, #ffffff);
}
.banner-three__title-two h2 .accent {
    color: var(--wc-base, #F9FF04);
    -webkit-text-fill-color: var(--wc-base, #F9FF04);
}
/* Owner request: second slogan line underlined and pushed down a bit. */
.banner-three__title-two-box {
    margin-top: 28px;
}
.banner-three__title-two h2 {
    margin-bottom: 36px;
}
.banner-three__title-two h2 .underline {
    text-decoration: underline;
    text-decoration-color: var(--wc-base, #F9FF04);
    text-decoration-thickness: 5px;
    text-underline-offset: 14px;
    text-decoration-skip-ink: none;
}
/* Banner intro is now four paragraphs: space them and cap the measure for readability. */
.banner-three__title-two p {
    max-width: 860px;
}
.banner-three__title-two p + p {
    margin-top: 14px;
}
@media only screen and (max-width: 991px) {
    .banner-three__title-two-box { margin-top: 18px; }
    .banner-three__title-two h2 { margin-bottom: 28px; }
    .banner-three__title-two h2 .underline { text-decoration-thickness: 3px; text-underline-offset: 9px; }
}
/* responsive.css (template, untouched) shrinks the h2 at these same breakpoints;
   override for both headings so the swap doesn't regress mobile/tablet sizing. */
@media only screen and (min-width: 1200px) and (max-width: 1319px) {
    .banner-three__title-one h1, .banner-three__title-two h2 { font-size: 68px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .banner-three__title-one h1, .banner-three__title-two h2 { font-size: 60px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner-three__title-one h1, .banner-three__title-two h2 { font-size: 50px; }
}
@media only screen and (max-width: 767px) {
    .banner-three__title-one h1, .banner-three__title-two h2 { font-size: 34px; }
}
.page-header__inner h1 {
    font-size: 54px;
    color: var(--wc-white, #ffffff);
    line-height: 1em;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: none;
}
/* responsive.css (template, untouched) shrinks .page-header__inner h3 to 30px at <=767px;
   replicate for h1 so the swap doesn't regress mobile sizing. */
@media only screen and (max-width: 767px) {
    .page-header__inner h1 { font-size: 30px; }
}

/* I8: separate the footer CTA ("Opisz go nam") block from the company-info row below it. */
@media (min-width: 768px) {
    .footer-widget-three__top-left { margin-bottom: 60px; }
}

/* M3: .wc-time used display:flex, which let the long "10 minut i ręczne sprawdzanie NIP" line
   wrap unevenly against the short strong text; grid keeps the 5 rows' del/strong columns aligned. */
.why-choose-three__single .wc-time {
    display: grid;
    grid-template-columns: minmax(170px, max-content) 1fr;
    gap: 20px;
    align-items: baseline;
}
.why-choose-three__single .wc-time strong { line-height: 26px; }
@media (max-width: 575px) {
    .why-choose-three__single .wc-time { grid-template-columns: 1fr; gap: 4px; }
}

/* Hero lost its arrow / feature list / counter block; portfolio sits right under it.
   Tighten both paddings so "Realizacje" follows the intro closely. */
.banner-three {
    padding-bottom: 40px;
}
.portfolio-three {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Services: 5 cards in a 3 + 2 grid — equal card heights within a row. */
.services-three .row > [class*="col-"] {
    display: flex;
}
.services-three__single {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}
.services-three__read-more {
    margin-top: auto;
    padding-top: 16px;
}

/* i18n: language switcher (desktop in header contact box, mobile in mobile-nav contact list). */
.wc-lang { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 0 24px; padding: 0; list-style: none; font-family: var(--wc-font-two, "Kanit", sans-serif); font-size: 14px; letter-spacing: .04em; }
.wc-lang li + li::before { content: "|"; color: rgba(255, 255, 255, .25); margin-right: 10px; }
.wc-lang a { color: var(--wc-gray, #797E88); font-weight: 500; }
.wc-lang a:hover { color: var(--wc-white, #ffffff); }
.wc-lang a.is-active { color: var(--wc-base, #F9FF04); font-weight: 600; }
.main-menu-three__contact-box .wc-lang { vertical-align: middle; }
.wc-lang-mobile { padding-top: 12px; }
.wc-lang-mobile .wc-lang { margin-left: 0; font-size: 15px; }

/* i18n: Kanit / DM Sans have no Cyrillic — Russian pages use Montserrat + Inter (loaded only there). */
html[lang="ru"] {
    --wc-font: "Inter", "DM Sans", sans-serif;
    --wc-font-two: "Montserrat", "Kanit", sans-serif;
}
html[lang="ru"] .wellcore-logo { font-family: "Kanit", sans-serif; }
/* Cyrillic in Montserrat runs wider than the PL/EN Kanit hero title — shrink so h2 stays on one line at 1920px. */
html[lang="ru"] .banner-three__title-one h1, html[lang="ru"] .banner-three__title-two h2 { font-size: 58px; }
/* Task 9: the rule above has no media query and (attribute selector + class) outranks the
   generic responsive .banner-three__title-one h1 / .banner-three__title-two h2 rules at every
   breakpoint below it, so RU stayed at 58px all the way down to 360px — the hero h1 overflowed
   its container by 50-108px (confirmed via scrollWidth/clientWidth + screenshot). Only ≤767px
   needs a fix: at 768-991px the RU text already fits at 58px with no overflow, and ≥992px must
   stay exactly as before. 34px matches the generic mobile size and eliminates the overflow. */
@media only screen and (max-width: 767px) {
    html[lang="ru"] .banner-three__title-one h1, html[lang="ru"] .banner-three__title-two h2 { font-size: 34px; }
}

/* Messenger / WhatsApp icons in the header contact box and contact tile. */
.wc-social { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; vertical-align: middle; }
.wc-social a { font-size: 20px; line-height: 1; transition: opacity .3s ease, transform .3s ease; opacity: .95; }
.wc-social a:hover { opacity: 1; transform: translateY(-1px); }
.wc-social .fa-facebook-messenger { color: #0084FF; }
.wc-social .fa-whatsapp { color: #25D366; }
.mobile-nav__contact .fa-facebook-messenger { color: #0084FF; }
.mobile-nav__contact .fa-whatsapp { color: #25D366; }
.contact-page__contact-single .fa-facebook-messenger { color: #0084FF; }
.contact-page__contact-single .fa-whatsapp { color: #25D366; }
.contact-page__icon .fa-facebook-messenger { color: #0084FF; }
.contact-page__contact-single a .fab { width: 18px; text-align: center; margin-right: 6px; }

/* Task 9: responsive / mobile pass (all 6 pages). Audit at 360/390/414/768px found real
   overflow only on the RU hero h1/h2 (fixed above); everything else below is a mobile-only
   tightening pass — no ≥992px behaviour changes. */

/* Tap targets: mobile-nav toggler, footer nav/contact links, mobile-menu contact list,
   language switcher and service-card CTAs measured 21-30px clickable height on mobile
   (self-review requires >=40px). Vertical padding only — no layout width change. */
@media (max-width: 767px) {
    a.mobile-nav__toggler,
    .footer-widget-three__link li a,
    .footer-widget-three__contact-list li a,
    .mobile-nav__contact li a,
    .wc-lang a,
    .services-three__read-more a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 8px 0;
        box-sizing: border-box;
    }
}

/* Contact map: 420px iframe (desktop height) is unnecessarily tall on a narrow phone screen. */
@media (max-width: 767px) {
    .wc-contact-map-row iframe {
        height: 300px;
    }
}

/* RU: Cyrillic compounds run longer than PL/EN — guard card headings and the "odzyskany czas"
   results against a narrow mobile column even though no overflow was observed in the audit.
   Scoped to <=991px: no ≥992px behaviour change (review fix round 1). */
@media (max-width: 991px) {
    html[lang="ru"] .portfolio-three__single-title,
    html[lang="ru"] .portfolio-three__sub-title,
    html[lang="ru"] .why-choose-three__single .wc-time strong,
    html[lang="ru"] .why-choose-three__single .wc-time del {
        overflow-wrap: anywhere;
    }
}

/* Privacy policy page (task: privacy policy). Section padding matches .contact-page
   (module-css/contact.css, not loaded on this page since the rest of that module is
   contact-form-specific). Body column capped for readability, same as a long-form page. */
.wc-privacy {
    position: relative;
    display: block;
    padding: 105px 0 120px;
    z-index: 1;
}
.wc-privacy__body {
    max-width: 820px;
    margin: 0 auto;
}
.wc-privacy__body h2 {
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--wc-white, #ffffff);
}
.wc-privacy__body h2:first-child {
    margin-top: 0;
}
.wc-privacy__body h3 {
    margin-top: 28px;
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4em;
    color: var(--wc-white, #ffffff);
}
.wc-privacy__body p {
    margin-bottom: 16px;
    line-height: 1.7;
    color: var(--wc-gray, #797E88);
}
.wc-privacy__body ul {
    list-style: disc;
    padding-left: 1.25em;
    margin-bottom: 16px;
}
.wc-privacy__body li {
    margin-bottom: 8px;
    line-height: 1.7;
    color: var(--wc-gray, #797E88);
}
.wc-privacy__body a {
    color: var(--wc-base, #F9FF04);
    text-decoration: underline;
}
.wc-privacy__body a:hover {
    color: var(--wc-white, #ffffff);
}
.wc-privacy__body a,
.wc-privacy__body p,
.wc-privacy__body li {
    overflow-wrap: anywhere;
}

/* Contact form privacy clause, directly under the submit button. */
.wc-form-privacy {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--wc-gray, #797E88);
}
.wc-form-privacy a {
    color: var(--wc-gray, #797E88);
    text-decoration: underline;
}
.wc-form-privacy a:hover {
    color: var(--wc-base, #F9FF04);
}

/* Footer privacy link, next to the copyright line. */
.site-footer-three__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 20px;
}
.wc-footer-privacy {
    color: var(--wc-white, #ffffff);
    font-size: 16px;
    text-decoration: underline;
}
.wc-footer-privacy:hover {
    color: var(--wc-base, #F9FF04);
}