/* ==== Csmart CRM: artykuły funkcji, karty, przyciski i mega menu (style dodane przy rozbudowie strony) ==== */

/* ---------- artykuły: obrazki na zmianę po lewej i prawej, tekst opływa obrazek ---------- */
.mk-article { max-width: 1000px; margin: 0 auto; padding: 6px 0 34px; color: #1a233a; font-size: 18px; line-height: 1.75; }
.et_pb_text_inner .mk-article p, .mk-article p { font-size: 18px !important; font-weight: 400 !important; line-height: 1.75 !important; margin: 0 0 1em !important; }
.mk-article .mk-lead { font-size: 21px !important; font-weight: 700 !important; border-left: 4px solid #5a8dee; padding-left: 18px; margin: 0 0 1.4em !important; }
.mk-article h2 { font-size: 30px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #1a233a; margin: 1.7em 0 .6em !important; padding: 0 !important; }
.mk-article h3 { font-size: 21px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #1a233a; margin: 1.1em 0 .3em !important; padding: 0 !important; }
.mk-article ul { margin: 0 0 1.2em 1.3em !important; padding: 0 !important; list-style: disc !important; }
.mk-article li { margin: 0 0 .45em !important; font-weight: 400; padding: 0 !important; }
.mk-article a { color: #3b6be0; text-decoration: underline; }
.mk-article figure { margin: .4em 0 1em; max-width: 46%; }
.mk-article figure.alignleft { float: left; margin: .35em 34px 16px 0; }
.mk-article figure.alignright { float: right; margin: .35em 0 16px 34px; }
.mk-article figure img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 12px 30px rgba(26, 35, 58, .18); }
.mk-article figcaption { font-size: 13px; color: #6b7690; margin-top: 8px; text-align: center; }
.mk-clear { clear: both; height: 0; }
.mk-benefits li::marker { color: #5a8dee; }
.mk-cta { background: #dfe6e9; border-radius: 18px; padding: 26px 30px; margin: 40px 0 0; text-align: center; clear: both; }
.mk-cta p { margin: 0 0 .6em !important; }
.mk-article a.mk-btn, .mk-btn { display: inline-block; background: #5a8dee; color: #fff !important; font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 30px; margin: 6px; text-decoration: none !important; transition: background .2s; }
.mk-btn:hover { background: #3b6be0; }
.mk-btn-ghost, .mk-article a.mk-btn-ghost { background: transparent; color: #3b6be0 !important; border: 2px solid #5a8dee; }
.mk-hero-title h1 { font-size: clamp(26px, 3.1vw, 46px) !important; line-height: 1.2 !important; }
@media (max-width: 767px) {
    .mk-article { font-size: 16px; }
    .mk-article figure, .mk-article figure.alignleft, .mk-article figure.alignright { float: none; max-width: 100%; margin: 0 0 18px; }
    .mk-article h2 { font-size: 24px !important; }
}

/* ---------- karty funkcji (strona Funkcje i strona główna) ---------- */
.mk-cards-wrap { max-width: 1200px; margin: 0 auto; padding: 20px 0; }
.mk-cards-wrap h2 { font-size: 34px !important; font-weight: 800 !important; text-align: center; color: #1a233a; margin: 0 0 .3em !important; }
.mk-cards-wrap .mk-lead { text-align: center; font-size: 19px !important; max-width: 760px; margin: 0 auto 1.4em !important; }
.mk-cards-wrap .mk-group { font-size: 13px !important; text-transform: uppercase; letter-spacing: .1em; color: #5a8dee; font-weight: 800 !important; margin: 34px 0 14px !important; }
.mk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.mk-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(26, 35, 58, .12); color: #1a233a; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.mk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(26, 35, 58, .2); }
.mk-card img.mk-card-img { width: 100%; height: auto; display: block; }
.mk-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.mk-card-body strong { font-size: 18px; font-weight: 800; }
.mk-card-body span { font-size: 14px; line-height: 1.5; color: #4a5678; font-weight: 400; }
.mk-card-body em { font-style: normal; font-size: 14px; font-weight: 700; color: #3b6be0; margin-top: 4px; }
.mk-more { text-align: center; margin-top: 26px !important; }

/* ---------- mega menu (desktop) w stylu livespace.pl: panel z kolumnami, ikonami i opisami ---------- */
@media (min-width: 981px) {
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-mega { position: static !important; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-mega > ul.sub-menu {
        display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 26px;
        left: 50% !important; right: auto !important; transform: translateX(-50%); top: 100% !important;
        width: min(1200px, 94vw) !important; max-width: none !important; box-sizing: border-box;
        padding: 30px 36px 22px !important; background: #fff !important; border-top: 3px solid #5a8dee !important;
        border-radius: 0 0 20px 20px; box-shadow: 0 34px 60px rgba(26, 35, 58, .2) !important; text-align: left;
    }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-mega > ul.sub-menu > li { width: auto !important; float: none !important; padding: 0 !important; }
    .et_pb_menu .et-menu li.mk-col > a { pointer-events: none; cursor: default; font-size: 12px !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 800 !important; color: #5a8dee !important; padding: 0 0 10px !important; margin-bottom: 8px; border-bottom: 2px solid #e6ebf5; width: auto !important; white-space: normal !important; }
    .et_pb_menu .et-menu li.mk-col > ul.sub-menu { position: static !important; opacity: 1 !important; visibility: inherit !important; display: block !important; width: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; transform: none !important; }
    .et_pb_menu .et-menu li.mk-col > ul.sub-menu > li { width: auto !important; padding: 0 !important; float: none !important; }
    .et_pb_menu .et-menu li.mk-item > a { position: relative; display: block !important; padding: 9px 10px 9px 56px !important; border-radius: 12px; width: auto !important; white-space: normal !important; font-weight: 700 !important; font-size: 14.5px !important; line-height: 1.3 !important; color: #1a233a !important; }
    .et_pb_menu .et-menu li.mk-item > a:hover { background: #eef2ff; }
    .et_pb_menu .et-menu li.mk-item > a::before { content: ""; position: absolute; left: 10px; top: 9px; width: 36px; height: 36px; border-radius: 10px; background: #eef2ff center / 22px no-repeat; }
    .et_pb_menu .et-menu li.mk-item .mk-desc { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: #6b7690; }
    .et_pb_menu .et-menu li.mk-all { grid-column: 1 / -1; padding-top: 8px !important; margin-top: 4px; border-top: 1px solid #e6ebf5; text-align: right; }
    .et_pb_menu .et-menu li.mk-all > a { display: inline-block !important; width: auto !important; font-weight: 800 !important; color: #3b6be0 !important; padding: 8px 4px !important; }
    /* zwykłe rozwijane podmenu (Rozwiązania, Zasoby, Firma) - spójny wygląd z mega menu */
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu { border-top: 3px solid #5a8dee !important; border-radius: 0 0 14px 14px; box-shadow: 0 24px 44px rgba(26, 35, 58, .18) !important; padding: 10px !important; width: 270px !important; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu > li > a { border-radius: 10px; padding: 10px 14px !important; font-weight: 700 !important; width: auto !important; white-space: normal !important; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu > li > a:hover { background: #eef2ff; }
}
/* ikony pozycji menu (SVG z biblioteki mediów) */
.mk-ico-guide > a::before { background-image: url(/wp-content/uploads/2022/12/guide.svg) !important; }
.mk-ico-analysis > a::before { background-image: url(/wp-content/uploads/2022/12/checklist.svg) !important; }
.mk-ico-calendar > a::before { background-image: url(/wp-content/uploads/2022/12/calendar.svg) !important; }
.mk-ico-chat > a::before { background-image: url(/wp-content/uploads/2022/12/chat.svg) !important; }
.mk-ico-email > a::before { background-image: url(/wp-content/uploads/2022/12/email.svg) !important; }
.mk-ico-calculator > a::before { background-image: url(/wp-content/uploads/2022/12/calculator.svg) !important; }
.mk-ico-file > a::before { background-image: url(/wp-content/uploads/2022/12/file.svg) !important; }
.mk-ico-bookmark > a::before { background-image: url(/wp-content/uploads/2022/12/bookmark.svg) !important; }
.mk-ico-checklist > a::before { background-image: url(/wp-content/uploads/2022/12/checklist.svg) !important; }
.mk-ico-add-profile > a::before { background-image: url(/wp-content/uploads/2022/12/add-profile.svg) !important; }
.mk-ico-add-menu > a::before { background-image: url(/wp-content/uploads/2022/12/add-menu.svg) !important; }
.mk-ico-contact-book > a::before { background-image: url(/wp-content/uploads/2022/12/contact-book.svg) !important; }
.mk-ico-menu-1 > a::before { background-image: url(/wp-content/uploads/2022/12/menu-1.svg) !important; }
/* menu mobilne: kolumny jako nagłówki grup */
.et_mobile_menu li.mk-col > a { font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; color: #5a8dee !important; font-weight: 800 !important; }
.et_mobile_menu li.mk-item .mk-desc { display: none; }

/* ---------- czcionka spójna z resztą strony (Sen, jak w sekcji "Poznaj Csmart") ---------- */
.mk-article, .mk-article *, .mk-cards-wrap, .mk-cards-wrap *, .mk-cta, .mk-cta *, .mk-btn, .mk-card, .mk-card * {
    font-family: 'Sen', Helvetica, Arial, Lucida, sans-serif !important;
}
.mk-article h2, .mk-cards-wrap h2 { font-weight: 700 !important; color: #1A233A !important; }
.mk-cards-wrap h2 { font-size: clamp(30px, 5vh, 48px) !important; line-height: 1.15 !important; text-align: left !important; }
.mk-cards-wrap .mk-lead { text-align: left; margin-left: 0 !important; }
.mk-article h3, .mk-card-body strong { font-weight: 700 !important; }

/* ---------- menu: stare panele z układu nagłówka (Funkcje / Baza wiedzy) zastąpione nowym mega menu ---------- */
.et-l--header .dropdown-menu, .et_mobile_menu .dropdown-menu { display: none !important; }

/* rozwijane podmenu (Rozwiązania, Zasoby, Firma) otwierają się pod własną pozycją, a nie przy lewej krawędzi ekranu */
@media (min-width: 981px) {
    .category-menu .et_pb_menu__menu > nav > ul > li.mk-drop { position: relative !important; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu { left: 0 !important; right: auto !important; top: 100% !important; transform: none !important; }
    /* strzałki przy pozycjach menu usunięte (nachodziły na tekst) */
    .et_pb_menu .et-menu .menu-item-has-children > a:first-child::after,
    .et_pb_menu .et-menu-nav li.menu-item-has-children > a::after { display: none !important; content: none !important; }
}

/* mega menu: ukryty panel nie reaguje na kursor (najechanie 100-200 px pod menu nie może go otwierać) */
@media (min-width: 981px) {
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-mega > ul.sub-menu, .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu { pointer-events: none; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-mega:hover > ul.sub-menu, .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop:hover > ul.sub-menu { pointer-events: auto; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-mega { padding-bottom: 0 !important; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu { width: 330px !important; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu > li > a { white-space: nowrap !important; }
}
/* panele podmenu nad treścią strony (animacje i obrazki w sekcjach nie mogą ich zasłaniać) */
.et-l--header { position: relative; z-index: 100000; }
.et_pb_menu .et-menu-nav ul.sub-menu { z-index: 100001 !important; }

/* blok "Nowości Csmart" na stronie głównej: 8 kart w dwóch równych rzędach po 4 */
@media (min-width: 1100px) { .mk-home .mk-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* grafiki wstawiane automatycznie do starszych artykułów (bez opakowania .mk-article) */
figure.mk-fig { margin: .4em 0 1em; max-width: 46%; }
figure.mk-fig.alignleft { float: left; margin: .35em 34px 16px 0; }
figure.mk-fig.alignright { float: right; margin: .35em 0 16px 34px; }
figure.mk-fig img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 12px 30px rgba(26, 35, 58, .18); }
figure.mk-fig figcaption { font-size: 13px; color: #6b7690; margin-top: 8px; text-align: center; }
@media (max-width: 767px) { figure.mk-fig, figure.mk-fig.alignleft, figure.mk-fig.alignright { float: none; max-width: 100%; margin: 0 0 18px; } }

/* rozwijane menu: białe, nieprzezroczyste tło */
@media (min-width: 981px) {
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-mega > ul.sub-menu,
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu { background: #fff !important; background-color: #fff !important; opacity: 1 !important; }
    .et_pb_menu .et-menu-nav > ul.et-menu > li.mk-drop > ul.sub-menu > li { background: transparent !important; }
}

/* stopka: kolumny z linkami */
.mk-foot, .mk-foot * { font-family: 'Sen', Arial, sans-serif !important; }
.mk-foot h4 { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2px; text-transform: uppercase; color: #1a233a; margin: 0 0 14px !important; padding: 0 !important; line-height: 1.3; }
.mk-foot ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mk-foot li { margin: 0 0 9px !important; padding: 0 !important; line-height: 1.35; }
.mk-foot a { font-size: 13px; color: #1a233a; text-decoration: none; transition: color .15s; }
.mk-foot a:hover { color: #5a8dee; }
.mk-foot li.mk-more a { color: #5a8dee; font-weight: 700; }
.mk-foot-brand p { font-size: 13px; line-height: 1.6; color: #1a233a; margin: 14px 0 16px !important; }
.mk-foot a.mk-foot-btn { display: inline-block; background: #1a233a; color: #fff !important; border-radius: 30px; padding: 11px 20px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.mk-foot a.mk-foot-btn:hover { background: #5a8dee; }
@media (max-width: 980px) { .mk-foot { margin-bottom: 22px; } }