/*
Theme Name: MJSoft Theme
Author: MJSoft
Version: 1.0
Description: Custom MJSoft theme in brand colors (teal, dark cyan), minimalistic, modern.
*/

/* ================================
   BARVY – FIREMNÍ PALETA
================================ */
:root {
    --mj-teal: #0E9FB3;        /* hlavní tyrkys */
    --mj-teal-dark: #0C7E8D;   /* tmavší tyrkys */
    --mj-teal-light: #41C0D4;  /* světlejší tečky */
    --mj-dark: #0F2F38;        /* tmavý text */
    --mj-gray: #4B5563;
    --mj-bg-light: #F4F7F8;    /* světle šedé pozadí */
}

/* ================================
   ZÁKLAD
================================ */
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #ffffff;
    color: var(--mj-dark);
}

a {
    color: var(--mj-teal);
    text-decoration: none;
    transition: 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

/* ================================
   HEADER
================================ */
.site-header .header-inner {
    padding-left: 1rem;
    padding-right: 2rem;
}

.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;          /* mezera mezi kolečkem a textem */
}

.logo-icon {
    display: block;
    width: 70px;      /* můžeš si pohrát: 60–80px */
    height: auto;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-tagline {
    font-size: 0.95rem;
    font-weight: 600;
}

.logo-subtagline {
    font-size: 0.85rem;
    color: #555;
    margin-top: 2px;
    max-width: 360px;   /* ať to neleze moc doprava */
    line-height: 1.4;
}

/* Mobilní verze */
@media (max-width: 800px) {
    .logo {
        gap: 6px;
    }
    .logo-icon {
        height: 32px;
    }
    .logo-tagline {
        font-size: 10px;
        letter-spacing: 1px;
    }
}

.main-nav a {
    padding: 0.6rem 0.4rem;
    font-weight: 500;
}

.main-nav a:hover {
    color: var(--mj-teal-light);
}


/* ================================
   HEADER / NAV
================================ */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.6rem 0;
}

.logo-sub {
    font-weight: 400;
    opacity: 0.7;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* seznam v menu */
.main-nav-list {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* jednotlivé odkazy */
.main-nav-list > li > a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mj-dark);
    padding: 0.4rem 0;
    position: relative;
}

/* podtržení při hoveru */
.main-nav-list > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--mj-teal);
    transition: width 0.2s ease;
}

.main-nav-list > li > a:hover::after {
    width: 100%;
}

/* aktivní stránka – tyrkysový text + linka */
.main-nav-list > li.current-menu-item > a,
.main-nav-list > li.current-page-ancestor > a {
    color: var(--mj-teal);
}

.main-nav-list > li.current-menu-item > a::after,
.main-nav-list > li.current-page-ancestor > a::after {
    width: 100%;
}


/* ===============================
   MAIN MENU – SUBMENU „ŘEŠENÍ“
   =============================== */

.main-nav .menu-item-has-children {
    position: relative;
}

/* Submenu box */
.main-nav .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    padding: 0.75rem 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1000;
}

/* Show on hover (desktop) */
.main-nav .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Reset list */
.main-nav .sub-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Submenu links */
.main-nav .sub-menu a {
    display: block;
    padding: 0.45rem 1.25rem;
    font-size: 0.95rem;
    color: #0f172a;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Tyrkysová tečka */
.main-nav .sub-menu a::before {
    content: "•";
    color: #0ea5a4;
    margin-right: 0.5rem;
}

/* Hover state */
.main-nav .sub-menu a:hover {
    background: #f0fdfa;
    color: #0ea5a4;
}

/* ===============================
   MOBILE FALLBACK
   =============================== */

@media (max-width: 960px) {
    .main-nav .menu-item-has-children > .sub-menu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        padding: 0.5rem 0 0.5rem 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
    }

    .main-nav .sub-menu a {
        padding: 0.4rem 0;
    }
}

/* ================================
   CTA BUTTONS
================================ */

/* CTA tlačítko vpravo */
.nav-cta {
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    background: var(--mj-teal);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(14, 159, 179, 0.3);
}

.nav-cta:hover {
    background: var(--mj-teal-dark);
    color: #ffffff;
}

/* CTA tlačítko v kartách – decentní styl */
.btn-card {
    display: inline-block;
    padding: 10px 22px;
    background: #009fb1;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
    font-size: 16px;
}

.btn-card:hover {
    background: #017c8a;
}



.hero-inner,
.section.alt
 {
  width: 100%;
  max-width: 900px; /* nebo 1000 / 1100 – podle citu */
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}


.hero-cta {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s ease;
    background: var(--mj-teal);
    color: #ffffff;
}

.hero-cta:hover {
    background: var(--mj-teal-dark);
    color: #ffffff;
}

/* Outline varianta */
.hero-cta-secondary {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    margin-left: 1rem;
    border: 2px solid var(--mj-teal);
    color: var(--mj-teal);
    border-radius: 8px;
    font-weight: 500;
}

.hero-cta-secondary:hover {
    background: var(--mj-teal);
    color: #ffffff;
}

/* ================================
   HERO WITH DOTTED GRID
================================ */
.hero {
    padding: 4rem 1rem;
    color: var(--mj-dark);
    background: 
        radial-gradient(circle at top left, var(--mj-teal-light) 0px, transparent 300px),
        linear-gradient(135deg, #ffffff, #f8fafa);
    position: relative;
}

/* Jemná tečkovaná mřížka v pozadí */
.hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 280px;
    height: 180px;
    background-image:
        radial-gradient(var(--mj-teal-light) 2px, transparent 2px);
    background-size: 18px 18px;
    opacity: 0.25;
    pointer-events: none;
}

/* ================================
   SEKCE A OBSAH
================================ */
.section {
    padding: 3rem 1rem;
    background-color: #ffffff;
}

.section.alt {
    background-color: var(--mj-bg-light);
}

.section-title {
    font-size: 1.9rem;
    margin-bottom: 0.5rem;
    color: var(--mj-dark);
}

.section-subtitle {
    margin-bottom: 2rem;
    color: var(--mj-gray);
}

/* ================================
   GRID / CARDS
================================ */
.grid-2, .grid-3 {
    display: grid;
    gap: 1.5rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e1e7ea;
    box-shadow: 0 6px 16px rgba(15, 32, 40, 0.06);
    transition: 0.2s ease;
}

.card:hover {
    border-color: var(--mj-teal-light);
    box-shadow: 0 10px 25px rgba(15, 32, 40, 0.1);
}

.card h3 {
    color: var(--mj-teal-dark);
    margin-top: 0;
}

/* ================================
   CTA SEKCE (velká)
================================ */
.section.cta-block {
    background: var(--mj-teal);
    color: #ffffff;
    text-align: center;
    padding: 4rem 1rem;
    position: relative;
}

/* tečkovaná mřížka i zde */
.section.cta-block::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 10px;
    width: 240px;
    height: 160px;
    background-image:
        radial-gradient(#ffffff 2px, transparent 2px);
    background-size: 18px 18px;
    opacity: 0.25;
}

/* ================================
   FOOTER
================================ */
.site-footer {
    background: #0f172a;          /* tmavě modrošedá */
    color: #e5e7eb;
    padding: 3rem 1.5rem 2rem;
    font-size: 0.95rem;
    margin-top: 3rem;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1.7fr);
    gap: 2.5rem;
}

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

.footer-column h4 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: #f9fafb;
}

.footer-column p {
    margin: 0 0 0.75rem;
    color: #e5e7eb;
}

.footer-brand .footer-tagline {
    margin: 0.75rem 0 1.5rem;
    max-width: 26rem;
    color: #cbd5f5;
}

/* logo v patičce */
.footer-logo {
    margin-bottom: 0.5rem;
}

.footer-logo img {
    height: 40px;
    width: auto;
}

.footer-site-name {
    font-weight: 700;
    font-size: 1.3rem;
}

/* CTA tlačítko v patičce */
.footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background: #0ea5e9;
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.footer-cta:hover {
    background: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.55);
}

/* kontakty s ikonkami */
.footer-contact {
    margin-top: 0.5rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    color: #e5e7eb;
}

.footer-contact-icon {
    margin-top: 0.1rem;
    color: #38bdf8;
}

.footer-contact-item a {
    color: #e5e7eb;
    text-decoration: none;
}

.footer-contact-item a:hover {
    text-decoration: underline;
}

/* odkazy vpravo dole */
.footer-links {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-links a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: #e5e7eb;
    text-decoration: underline;
}

/* copyright dole */
.footer-copy {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid #1f2937;
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
}

/* =================================
   KONTAKT – LAYOUT STRÁNKY
================================= */

.page-id-9 .wpcf7 form > div[style*="margin-top: 1.5rem"] {
    margin-top: 2rem !important;
}

/* Kontakt – užší obsah, dvousloupec na velkém monitoru */
.page-id-9 .section-inner {
    max-width: 960px;
}

/* Na menších displejích jen pod sebe */
@media (min-width: 900px) {
    .page-id-9 .page-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
}

/* První odstavec nad formulářem – jemně zvýraznit */
.page-id-9 .page-content > p:first-child {
    font-size: 1.05rem;
    margin-top: 0.5rem;
    color: var(--mj-gray);
}

/* =================================
   CONTACT FORM 7 – VZHLED FORMULÁŘE
================================= */

.page-id-9 .wpcf7 {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.8rem 2rem;
    border: 1px solid #e1e7ea;
    box-shadow: 0 6px 18px rgba(15, 32, 40, 0.06);
}

/* Odstup mezi řádky formuláře */
.wpcf7-form p {
    margin: 0 0 1.1rem 0;
}

/* Text u políček (Jméno, Firma, ...) */
.wpcf7-form p:first-child,
.wpcf7-form p {
    font-weight: 500;
    color: var(--mj-dark);
}

/* Vstupní pole */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.3rem;
    border: 1px solid #d1d9de;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--mj-dark);
    background-color: #ffffff;
}

/* Výška textového pole */
.wpcf7-form textarea {
    min-height: 140px;
}

/* Fokus na políčko */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--mj-teal);
    box-shadow: 0 0 0 1px rgba(14,159,179,0.15);
}

/* Tlačítko Odeslat */
.wpcf7-form input[type="submit"] {
    border: none;
    cursor: pointer;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    background: var(--mj-teal);
    color: #ffffff;
    transition: 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background: var(--mj-teal-dark);
}

/* Chybové hlášky u polí */
.wpcf7-not-valid-tip {
    color: #b91c1c;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Globální info (odesláno / chyba) */
.wpcf7-response-output {
    margin-top: 1rem;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border-width: 1px;
    border-style: solid;
}

/* úspěch */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #16a34a;
    background: #ecfdf3;
}

/* chyba */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: #b91c1c;
    background: #fef2f2;
}

/* =================================
   SEO článek (page-id-206) – styl jako "GDPR/O nás"
================================= */

.page-id-206 .section-inner {
    max-width: 960px !important; /* přepíše inline max-width:900px */
}

/* H2 sekcí */
.page-id-206 .page-content h2.wp-block-heading {
    font-size: 26px;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.3;
    position: relative;
    padding-left: 18px; /* důležité: udělá místo na čárku */
}

/* tyrkysová čárka */
.page-id-206 .page-content h2.wp-block-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 24px;
    background: var(--mj-teal);
    border-radius: 2px;
}

/* jemná linka nad každou sekcí kromě první */
.page-id-206 .page-content h2.wp-block-heading:not(:first-of-type) {
    border-top: 1px solid #e1e7ea;
    padding-top: 22px;
}

/* H3 */
.page-id-206 .page-content h3.wp-block-heading {
    font-size: 18px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 8px;
}


/* =================================
   O NÁS – SPACING & TYPOGRAPHY
================================= */

.page-content h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-size: 1.7rem;
    color: var(--mj-dark);
}

.page-content p {
    margin-bottom: 1.2rem;
    line-height: 1.6;
}

.page-content ul {
    margin: 0 0 1.5rem 1.2rem;
    padding: 0;
}

.page-content li {
    margin-bottom: 0.8rem;
    line-height: 1.55;
}

/* první H2 na stránce – aby nebyl hned nalepený */
.page-content h2:first-of-type {
    margin-top: 2rem;
}

/* mezera pod hlavním H1 */
.section .section-inner h1.section-title {
    margin-bottom: 1.5rem;
}





/* ================================
   NAV – HAMBURGER & MOBILE
================================ */

/* tlačítko hamburger – defaultně schované (desktop) */
.nav-toggle {
    display: none;
    border: none;
    background: transparent;
    padding: 0.25rem;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--mj-dark);
    margin: 4px 0;
    transition: 0.2s ease;
}

/* po otevření menu změníme ikonku na "křížek" */
.site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}
.site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ====== MOBILE BREAKPOINT ====== */
@media (max-width: 800px) {

    .header-inner {
        padding: 0.5rem 1rem;
    }

    /* logo vlevo, toggle vpravo, menu se schová */
    .header-right {
        gap: 0.75rem;
    }

    .main-nav-list {
        position: absolute;
        top: 100%;
        right: 0;
        background: #ffffff;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem 0.9rem;
        margin-top: 0.2rem;
        border-bottom-left-radius: 12px;
        box-shadow: 0 10px 25px rgba(15, 32, 40, 0.18);
        display: none;
        z-index: 40;
        min-width: 200px;
    }

    .main-nav-list > li > a {
        padding: 0.25rem 0;
    }

    /* CTA přesuneme do menu a defaultně taky schováme */
    .nav-cta {
        display: none;
        margin-top: 0.5rem;
        width: 100%;
        text-align: center;
        border-radius: 999px;
    }

    /* zobrazit menu + CTA když je .nav-open */
    .site-header.nav-open .main-nav-list {
        display: flex;
    }

    .site-header.nav-open .nav-cta {
        display: inline-block;
    }

    /* hamburger je na mobilu vidět */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.with-icon .icon-wrapper {
    margin-bottom: 1rem;
    color: #0ea5e9; /* decentní modrá, ladí s tlačítky */
}

.card.with-icon {
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease;
}

.card.with-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.07);
}

/* grid jako u ostatních karet */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* ikonka v kruhu, decentní */
.reasons-grid .icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #e0f2fe;      /* světle modrá */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: #0ea5e9;           /* primární tyrkys/modrá */
}

/* stejné „dlaždice“ jako výše, jen lehký hover */
.reasons-grid .card {
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}

.reasons-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}


/* základní kolečko pro ikonky (používá se i u Proč firmy volí MAXim) */
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #e0f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: #0ea5e9;
}

/* karty v sekci Jak pracujeme */
.steps-grid .card {
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* hover efekt jako jinde */
.steps-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.integrations-grid .card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.integrations-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.products-grid .card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.products-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.solutions-grid .card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.solutions-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.what-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.what-grid .card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.what-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}


.reference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.reference-grid .card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.reference-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}



/* === COOKIE BANNER === */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0f172a;
    color: #e5e7eb;
    padding: 1rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
    z-index: 9999;
    display: none; /* skryto, JS ukáže */
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cookie-btn {
    background: #0ea5e9;
    color: #0f172a;
    border: none;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.2s ease;
}

.cookie-btn:hover {
    background: #38bdf8;
}


/* ===== GDPR stránka – vizuálně jako "O nás" ===== */

/* zúžení obsahu stejně jako u O nás */
.page-id-38 .section-inner {
    max-width: 900px;
}

/* H2 sekční nadpisy – styl jako na O nás (tyrkysová čárka) */
.page-id-38 .page-content h2.wp-block-heading {
    font-size: 26px;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.3;
    position: relative;
    padding-left: 18px;
}

.page-id-38 .page-content h2.wp-block-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 24px;
    background: #00b4b7;          /* stejná tyrkys jako "O nás" */
    border-radius: 2px;
}

/* H3 podsekce (2.1, 2.2…) – jen menší a blíž textu */
.page-id-38 .page-content h3.wp-block-heading {
    font-size: 18px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 8px;
}

/* Odstavce a položky seznamů – vzdušnější text jako na O nás */
.page-id-38 .page-content p,
.page-id-38 .page-content li {
    font-size: 16px;
    line-height: 1.7;
    color: #111827;
}

/* Seznamy – trochu odskočit od kraje */
.page-id-38 .page-content ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

/* Dělící linky – tenčí a světlejší, jako na O nás */
.page-id-38 .page-content hr.wp-block-separator {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 40px 0 32px;
}


/* Ikonky u produktů MAXIm */
.product-cards .card {
    text-align: left;
}

.micro-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #e7f6fb;        /* světle modrá bublina */
    color: #00a3c8;             /* tyrkysová linka */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.micro-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}


.micro-cta{
  margin-top: 2rem;
  text-align: center;
}

.micro-cta a{
  font-weight: 600;
}

.cta-band{
  margin-top: 4rem;
  padding: 3rem 1.5rem;
  background: #0ea5b7;
  text-align: center;
  border-radius: 18px;
}

.cta-band__title{
  font-size: 1.8rem;
  margin: 0 0 0.75rem 0;
  color: #0f172a;
}

.cta-band__text{
  font-size: 1.05rem;
  margin: 0 0 1.5rem 0;
  color: #0f172a;
  opacity: 0.9;
}

.cta-band__btn{
  display: inline-block;
  background: #020617;
  color: #fff;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
}

.cta-band__btn:hover{
  opacity: 0.92;
}

  .mj-title-link{
    color: inherit;
    text-decoration: none;
    display: inline-block;
  }
  .mj-title-link:hover{
    color: var(--mj-teal);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }


/* =================================
   PŘÍPADOVÉ STUDIE – SEKČNÍ NADPISY
================================= */

/*

.page-content h2.wp-block-heading {
    font-size: 26px;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.3;
    position: relative;
    padding-left: 18px;
}

-- tyrkysová čárka 
.page-content h2.wp-block-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 24px;
    background: var(--mj-teal);
    border-radius: 2px;
}

-- jemná linka nad sekcí kromě první 
.page-content h2.wp-block-heading:not(:first-of-type) {
    border-top: 1px solid #e1e7ea;
    padding-top: 22px;
}

-- H3 podsekce 
.page-content h3.wp-block-heading {
    font-size: 18px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 8px;
}
*/

/* jemná linka nad sekcí kromě první*/ 
.page-content h2.wp-block-heading:not(:first-of-type) {
    border-top: 1px solid #e1e7ea;
/*    padding-top: 22px;*/
    margin-top: 3rem;
}

/* Sekční nadpisy v obsahu – tyrkysová levá linka */
.page-content h2{
  position: relative;
  padding-left: 18px;           /* místo pro čárku */
  margin-top: 1.6rem;
}

/* samotná čárka */
.page-content h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;                  /* <- TADY se to doladí */
  width: 4px;
  height: 1.1em;                /* výška podle textu */
  border-radius: 999px;
  background: #0ea5a8;          /* tvoje tyrkys */
}



.mj-related {
  margin: 3rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid #19a5a5;
  background: #f7fbfb;
}

.mj-related h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

.mj-related ul {
  margin: 0.75rem 0 0 0;
  padding-left: 1.1rem;
}

.mj-related li {
  margin: 0.4rem 0;
}

.mj-related a {
  text-decoration: none;
  font-weight: 500;
}

.mj-related a:hover {
  text-decoration: underline;
}


/* Case study: box s odkazy (bez inline stylů) */
.mj-case-box{
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.6);
}

.mj-case-box h3{
  margin: 0;
}

.mj-case-box ul{
  margin: .75rem 0 0 0;
  padding-left: 1.1rem;
}


/* CTA řádek na konci případovky */
.mj-cta-row{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
}

.mj-cta-row .hero-cta,
.mj-cta-row .hero-cta-secondary{
  margin: 0;              /* zruší WP/tema odsazení */
  display: inline-flex;   /* stejná výška a zarovnání textu */
  align-items: center;
}

/* volitelné: aby tlačítka měla podobnou “hmotu” */
.mj-cta-row .hero-cta-secondary{
  padding: 0.9rem 1.1rem; /* když by secondary bylo menší než primary */
}


/* ================================
   STEPS GRID – karty vedle sebe
================================ */

/* STEPS GRID – fix přetékání */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* povolí smršťování grid itemů (jinak občas přetékají) */
.steps-grid > *{
  min-width: 0;
}

/* jistota: obsah karty nesmí vynutit šířku */
.steps-grid .card{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* když by tam bylo dlouhé slovo/link */
}

  .mj-container{max-width:1100px;margin:0 auto;padding:0 18px;}
  .mj-hero{padding:56px 0 30px;}
  .mj-title{font-size:clamp(28px,3.2vw,40px);line-height:1.15;margin:0 0 12px;}
  .mj-lead{font-size:18px;line-height:1.6;margin:0 0 18px;}
  .mj-muted{opacity:.75;margin-top:8px}
  .mj-small{font-size:14px;line-height:1.6}
  .mj-section{padding:34px 0;}
  .mj-section-alt{padding:34px 0;background:rgba(0,0,0,.03);}
  .mj-h2{font-size:26px;line-height:1.25;margin:0 0 10px;}
  .mj-h3{font-size:18px;line-height:1.3;margin:0 0 8px;}
  .mj-grid{display:grid;gap:16px;margin-top:18px;}
  .mj-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .mj-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mj-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:16px;box-shadow:0 8px 22px rgba(0,0,0,.04);}
  .mj-card p{margin:0 0 8px;line-height:1.65;}
  .mj-card-tight{padding:14px;}
  .mj-list{margin:10px 0 0 18px;line-height:1.7;}
  .mj-cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
  .mj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;border:1px solid rgba(0,0,0,.14);}
  .mj-btn-primary{background:rgba(0,152,170,.12);border-color:rgba(0,152,170,.35);}
  .mj-btn-ghost{background:#fff;}
  .mj-cta{padding:44px 0;}
  .mj-cta-box{background:rgba(0,152,170,.08);border:1px solid rgba(0,152,170,.25);border-radius:20px;padding:20px;}

  @media (max-width: 920px){
    .mj-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width: 620px){
    .mj-grid-3,.mj-grid-2{grid-template-columns:1fr;}
    .mj-hero{padding:44px 0 22px;}
  }
  
  
  .mj-checklist {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.mj-checklist li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.8rem;
}

.mj-checklist li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--mj-primary);
    font-weight: 600;
}