/*
 * MKAP Public Theme & Home Stability Layer
 * Part 21-D.4.1
 * Developer: mohammadkarimipoor
 *
 * Loaded after the White-Label runtime variables. This file intentionally
 * contains only final-state visual overrides so older experimental home
 * rules cannot win in the cascade.
 */

/* ---------- Public dark mode: complete, brand-aware surface ---------- */
html[data-mkap-public-theme="dark"] {
    color-scheme: dark;
    --mkap-brand-background: #07171c;
    --mkap-brand-surface: #0d242b;
    --mkap-brand-text: #edf7f4;
    --mkap-public-background: #07171c;
    --mkap-public-surface: #0d242b;
    --mkap-public-heading: #edf7f4;
    --mkap-public-muted: #9db2b7;
    --mkap-public-border: rgba(190, 224, 215, .15);
    --mkap-public-soft: #0a2027;
    --mkap-public-dark: #041216;
    --mkap-bg: #07171c;
    --mkap-surface: #0d242b;
    --mkap-text: #edf7f4;
    --mkap-muted: #9db2b7;
    --mkap-border: rgba(190, 224, 215, .15);
    --mkap-home-glass: rgba(13, 36, 43, .86);
}

html[data-mkap-public-theme="dark"] body,
html[data-mkap-public-theme="dark"] body.mkap-home-experience,
html[data-mkap-public-theme="dark"] .mkap-blog-page,
html[data-mkap-public-theme="dark"] .mkap-article-page,
html[data-mkap-public-theme="dark"] .mkap-public-page {
    background-color: var(--mkap-brand-background) !important;
    color: var(--mkap-brand-text) !important;
}

html[data-mkap-public-theme="dark"] .mkap-public-header {
    background: rgba(7, 23, 28, .94) !important;
    border-color: var(--mkap-public-border) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .22) !important;
}
html[data-mkap-public-theme="dark"] .mkap-public-brand__copy strong,
html[data-mkap-public-theme="dark"] .mkap-public-nav__link,
html[data-mkap-public-theme="dark"] .mkap-public-submenu-toggle,
html[data-mkap-public-theme="dark"] .mkap-public-theme-toggle {
    color: var(--mkap-brand-text) !important;
}
html[data-mkap-public-theme="dark"] .mkap-public-brand__copy small,
html[data-mkap-public-theme="dark"] .mkap-public-footer,
html[data-mkap-public-theme="dark"] .mkap-public-footer a {
    color: var(--mkap-public-muted) !important;
}
html[data-mkap-public-theme="dark"] .mkap-public-nav,
html[data-mkap-public-theme="dark"] .mkap-public-submenu,
html[data-mkap-public-theme="dark"] .mkap-public-theme-toggle,
html[data-mkap-public-theme="dark"] .mkap-public-menu-toggle,
html[data-mkap-public-theme="dark"] .mkap-public-footer {
    border-color: var(--mkap-public-border) !important;
    background-color: var(--mkap-brand-surface) !important;
}
html[data-mkap-public-theme="dark"] .mkap-public-nav__link:hover,
html[data-mkap-public-theme="dark"] .mkap-public-nav__item.is-current > .mkap-public-nav__item-main .mkap-public-nav__link,
html[data-mkap-public-theme="dark"] .mkap-public-submenu a:hover {
    background: rgba(255, 255, 255, .055) !important;
    color: #fff !important;
}

html[data-mkap-public-theme="dark"] .mkap-public-section,
html[data-mkap-public-theme="dark"] .mkap-home-zone,
html[data-mkap-public-theme="dark"] .mkap-public-section--soft {
    border-color: rgba(190, 224, 215, .08) !important;
}
html[data-mkap-public-theme="dark"] .mkap-public-section--soft {
    background:
        radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--mkap-brand-secondary) 8%, transparent), transparent 26%),
        linear-gradient(180deg, #0a1d23, #07171c) !important;
}
html[data-mkap-public-theme="dark"] .mkap-section-heading h2,
html[data-mkap-public-theme="dark"] .mkap-section-heading h3,
html[data-mkap-public-theme="dark"] .mkap-feature-card h3,
html[data-mkap-public-theme="dark"] .mkap-tool-card h3,
html[data-mkap-public-theme="dark"] .mkap-plan-card h3,
html[data-mkap-public-theme="dark"] .mkap-blog-card h2,
html[data-mkap-public-theme="dark"] .mkap-blog-card h3,
html[data-mkap-public-theme="dark"] .mkap-blog-card h2 a,
html[data-mkap-public-theme="dark"] .mkap-blog-card h3 a,
html[data-mkap-public-theme="dark"] .mkap-page-section h2,
html[data-mkap-public-theme="dark"] .mkap-page-section h3,
html[data-mkap-public-theme="dark"] .mkap-page-intro h2,
html[data-mkap-public-theme="dark"] .mkap-blog-hero h1,
html[data-mkap-public-theme="dark"] .mkap-article-hero h1,
html[data-mkap-public-theme="dark"] .mkap-article-body,
html[data-mkap-public-theme="dark"] .mkap-article-body h2,
html[data-mkap-public-theme="dark"] .mkap-article-body h3,
html[data-mkap-public-theme="dark"] .mkap-article-body h4 {
    color: var(--mkap-brand-text) !important;
}
html[data-mkap-public-theme="dark"] .mkap-section-heading p,
html[data-mkap-public-theme="dark"] .mkap-feature-card p,
html[data-mkap-public-theme="dark"] .mkap-tool-card p,
html[data-mkap-public-theme="dark"] .mkap-plan-card p,
html[data-mkap-public-theme="dark"] .mkap-blog-card p,
html[data-mkap-public-theme="dark"] .mkap-blog-hero p,
html[data-mkap-public-theme="dark"] .mkap-article-hero > p,
html[data-mkap-public-theme="dark"] .mkap-article-meta,
html[data-mkap-public-theme="dark"] .mkap-page-intro p,
html[data-mkap-public-theme="dark"] .mkap-page-section p {
    color: var(--mkap-public-muted) !important;
}

html[data-mkap-public-theme="dark"] .mkap-feature-card,
html[data-mkap-public-theme="dark"] .mkap-tool-card,
html[data-mkap-public-theme="dark"] .mkap-plan-card,
html[data-mkap-public-theme="dark"] .mkap-blog-card,
html[data-mkap-public-theme="dark"] .mkap-faq-list details,
html[data-mkap-public-theme="dark"] .mkap-public-faq-page details,
html[data-mkap-public-theme="dark"] .mkap-public-page-shell,
html[data-mkap-public-theme="dark"] .mkap-page-feature-card,
html[data-mkap-public-theme="dark"] .mkap-public-contact-card,
html[data-mkap-public-theme="dark"] .mkap-public-contact-form,
html[data-mkap-public-theme="dark"] .mkap-public-plan-card,
html[data-mkap-public-theme="dark"] .mkap-blog-filter,
html[data-mkap-public-theme="dark"] .mkap-article-shell,
html[data-mkap-public-theme="dark"] .mkap-public-empty-state {
    background: #0d242b !important;
    border-color: var(--mkap-public-border) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .22) !important;
}
html[data-mkap-public-theme="dark"] .mkap-blog-filter input,
html[data-mkap-public-theme="dark"] .mkap-blog-filter select,
html[data-mkap-public-theme="dark"] .mkap-public-form-grid input,
html[data-mkap-public-theme="dark"] .mkap-public-form-grid textarea {
    background: #081c22 !important;
    border-color: var(--mkap-public-border) !important;
    color: var(--mkap-brand-text) !important;
}
html[data-mkap-public-theme="dark"] .mkap-article-hero {
    background: linear-gradient(135deg, rgba(16,149,79,.08), rgba(255,255,255,.025)) !important;
}
html[data-mkap-public-theme="dark"] .mkap-article-body blockquote,
html[data-mkap-public-theme="dark"] .mkap-public-highlight-card,
html[data-mkap-public-theme="dark"] .mkap-pricing-guarantee,
html[data-mkap-public-theme="dark"] .mkap-faq-contact {
    background: rgba(16,149,79,.07) !important;
    color: var(--mkap-brand-text) !important;
}

/* ---------- Desktop header: stable three-zone layout ---------- */
@media (min-width: 981px) {
    body.mkap-home-experience > .mkap-public-header .mkap-public-container {
        width: min(1440px, calc(100% - 64px)) !important;
    }
    .mkap-home-experience .mkap-public-header__inner {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
        grid-template-areas: "actions nav brand" !important;
        align-items: center !important;
        gap: clamp(18px, 2.1vw, 34px) !important;
        min-height: 76px !important;
        padding-block: 0 !important;
        direction: ltr !important;
    }
    .mkap-home-experience .mkap-public-brand {
        grid-area: brand !important;
        justify-self: end !important;
        width: max-content !important;
        max-width: 290px !important;
        direction: rtl !important;
    }
    .mkap-home-experience .mkap-public-brand__logo-wrap {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
    }
    .mkap-home-experience .mkap-public-brand__copy strong { font-size: 16px !important; line-height: 1.35 !important; }
    .mkap-home-experience .mkap-public-brand__copy small { max-width: 210px !important; font-size: 10px !important; }
    .mkap-home-experience .mkap-public-nav {
        grid-area: nav !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        direction: rtl !important;
    }
    .mkap-home-experience .mkap-public-nav__list {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(2px, .55vw, 9px) !important;
        flex-wrap: nowrap !important;
    }
    .mkap-home-experience .mkap-public-nav__item-main { gap: 1px !important; }
    .mkap-home-experience .mkap-public-nav__link {
        padding: 9px clamp(7px, .65vw, 12px) !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }
    .mkap-home-experience .mkap-public-submenu-toggle {
        width: 26px !important;
        height: 26px !important;
        flex: 0 0 26px !important;
    }
    .mkap-home-experience .mkap-public-actions {
        grid-area: actions !important;
        justify-self: start !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        direction: rtl !important;
        white-space: nowrap !important;
    }
    .mkap-home-experience .mkap-public-actions .mkap-button { min-height: 42px !important; padding-inline: 18px !important; }
    .mkap-home-experience .mkap-public-theme-toggle { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
}

@media (min-width: 981px) and (max-width: 1180px) {
    body.mkap-home-experience > .mkap-public-header .mkap-public-container { width: calc(100% - 32px) !important; }
    .mkap-home-experience .mkap-public-header__inner { gap: 12px !important; }
    .mkap-home-experience .mkap-public-brand__copy small { display: none !important; }
    .mkap-home-experience .mkap-public-nav__link { padding-inline: 6px !important; font-size: 12px !important; }
    .mkap-home-experience .mkap-public-actions .mkap-button { padding-inline: 12px !important; font-size: 12px !important; }
}

/* ---------- Desktop capability/tool cards: no experimental spans ---------- */
@media (min-width: 981px) {
    .mkap-home-experience .mkap-home-zone--features .mkap-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-rows: 1fr !important;
        gap: 28px 22px !important;
        align-items: stretch !important;
    }
    .mkap-home-experience .mkap-home-zone--features .mkap-feature-card,
    .mkap-home-experience .mkap-home-zone--features .mkap-feature-card:nth-child(n) {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-height: 238px !important;
        height: 100% !important;
        transform: none !important;
    }
    .mkap-home-experience .mkap-home-zone--features .mkap-feature-card p,
    .mkap-home-experience .mkap-home-zone--features .mkap-feature-card:nth-child(n) p {
        max-width: 340px !important;
    }
    .mkap-home-experience .mkap-home-zone--tools .mkap-tool-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr !important;
        gap: 28px 18px !important;
        align-items: stretch !important;
    }
    .mkap-home-experience .mkap-home-zone--tools .mkap-tool-card,
    .mkap-home-experience .mkap-home-zone--tools .mkap-tool-card:nth-child(n) {
        min-height: 220px !important;
        height: 100% !important;
        transform: none !important;
    }
    .mkap-home-experience.has-card-motion .mkap-home-zone--features .mkap-feature-card:hover,
    .mkap-home-experience.has-card-motion .mkap-home-zone--tools .mkap-tool-card:hover,
    .has-card-motion .mkap-home-zone--features .mkap-feature-card:hover,
    .has-card-motion .mkap-home-zone--tools .mkap-tool-card:hover {
        transform: translateY(-6px) !important;
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    .mkap-home-experience .mkap-home-zone--tools .mkap-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Dark cards need visible icon wells, not light-mode white tiles. */
html[data-mkap-public-theme="dark"] .mkap-home-experience .mkap-card-top-icon {
    background: linear-gradient(145deg, rgba(16,149,79,.18), #102c33) !important;
    border-color: rgba(76, 201, 137, .34) !important;
    color: #dff8eb !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}
html[data-mkap-public-theme="dark"] .mkap-home-experience .mkap-feature-card::after,
html[data-mkap-public-theme="dark"] .mkap-home-experience .mkap-tool-card::after {
    border-color: rgba(76, 201, 137, .14) !important;
}

/* Mobile keeps explicit centering while retaining readable RTL lists. */
@media (max-width: 980px) {
    html[data-mkap-public-theme="dark"] .mkap-public-nav {
        background: #0d242b !important;
        border-color: var(--mkap-public-border) !important;
        box-shadow: 0 22px 55px rgba(0,0,0,.34) !important;
    }
    html[data-mkap-public-theme="dark"] .mkap-public-nav__item.has-children.is-open > .mkap-public-submenu {
        background: #081c22 !important;
        border-color: var(--mkap-public-border) !important;
    }
}