/* Mobiz Help Centre — public theme.
   Light/flat look modelled on help.getmobiz.com: white surfaces, dark text,
   vivid blue (#334bfa) accent. --kb-primary is injected inline from
   KB_PRIMARY_COLOR so the accent stays reconfigurable per install. */

:root {
    --kb-primary: #334bfa;
    --kb-primary-dark: #2336c8;
    --kb-text: #1a1a1a;
    --kb-muted: #737373;
    --kb-bg: #ffffff;
    --kb-surface: #ffffff;
    --kb-hero-bg: #f7f8fc;
    --kb-border: #e6e6e6;
    --kb-accent-soft: #eef0ff;
    --kb-radius: 12px;
    --kb-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    --kb-shadow-hover: 0 8px 24px rgba(26, 26, 26, .10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--kb-bg);
    color: var(--kb-text);
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--kb-text);
    line-height: 1.25;
    margin: 0 0 .5em;
}

a { color: var(--kb-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.kb-container { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 20px; }

/* ---- Header (white bar) ---- */
.kb-header { background: var(--kb-surface); border-bottom: 1px solid var(--kb-border); }
.kb-header__bar { display: flex; align-items: center; padding: 16px 20px; }
.kb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--kb-text); }
.kb-brand:hover { text-decoration: none; opacity: .85; }
.kb-brand__name { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 18px; }

/* ---- Hero / search (light band) ---- */
.kb-hero { background: var(--kb-hero-bg); border-bottom: 1px solid var(--kb-border); padding: 44px 0 48px; text-align: center; }
.kb-hero__title { color: var(--kb-text); font-weight: 600; font-size: 28px; margin: 0 0 22px; }
.kb-search { position: relative; max-width: 640px; margin: 0 auto; }
.kb-search__icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; color: var(--kb-muted);
}
.kb-search input {
    width: 100%;
    padding: 15px 18px 15px 46px;
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: var(--kb-text);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.kb-search input:focus {
    border-color: var(--kb-primary);
    box-shadow: 0 0 0 3px rgba(51, 75, 250, .15);
}

/* ---- Main ---- */
.kb-main { padding: 44px 0 64px; }

/* ---- Collection grid (home) ---- */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.kb-card {
    display: flex;
    gap: 16px;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    padding: 22px;
    box-shadow: var(--kb-shadow);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.kb-card:hover { border-color: var(--kb-primary); box-shadow: var(--kb-shadow-hover); transform: translateY(-2px); text-decoration: none; }
.kb-card__icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--kb-accent-soft);
    color: var(--kb-primary);
}
.kb-card__icon svg { width: 24px; height: 24px; }
.kb-card__title { font-size: 17px; font-weight: 600; margin: 2px 0 6px; color: var(--kb-text); }
.kb-card__desc { color: var(--kb-muted); font-size: 14px; margin: 0 0 10px; }
.kb-card__count { color: var(--kb-muted); font-size: 13px; }

/* ---- Article list (collection page) ---- */
.kb-collection-head { margin-bottom: 28px; }
.kb-collection-head__icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--kb-accent-soft); color: var(--kb-primary);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.kb-collection-head__icon svg { width: 26px; height: 26px; }
.kb-article-list { list-style: none; margin: 0; padding: 0; background: var(--kb-surface);
    border: 1px solid var(--kb-border); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); }
.kb-article-list li { border-bottom: 1px solid var(--kb-border); }
.kb-article-list li:last-child { border-bottom: 0; }
.kb-article-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; color: var(--kb-text); font-weight: 500;
}
.kb-article-list a:hover { background: var(--kb-hero-bg); text-decoration: none; color: var(--kb-primary); }
.kb-article-list .kb-chevron { color: var(--kb-muted); }

/* ---- Breadcrumb ---- */
.kb-breadcrumb { font-size: 14px; color: var(--kb-muted); margin-bottom: 22px; }
.kb-breadcrumb a { color: var(--kb-muted); }
.kb-breadcrumb a:hover { color: var(--kb-primary); }
.kb-breadcrumb .kb-sep { margin: 0 8px; }

/* ---- Article page ---- */
.kb-article { background: var(--kb-surface); border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); padding: 40px 44px; }
.kb-article__title { font-size: 30px; font-weight: 700; margin-bottom: 6px; }
.kb-article__meta { color: var(--kb-muted); font-size: 14px; margin-bottom: 26px; }
.kb-article__body { font-size: 16.5px; color: var(--kb-text); }
.kb-article__body h2 { font-size: 23px; margin-top: 1.6em; }
.kb-article__body h3 { font-size: 19px; margin-top: 1.4em; }
.kb-article__body img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--kb-border); margin: 12px 0; }
.kb-article__body iframe { max-width: 100%; border: 0; border-radius: 8px; margin: 12px 0; }
.kb-article__body a { color: var(--kb-primary); text-decoration: underline; }
.kb-article__body pre { background: #f6f6f6; padding: 14px 16px; border-radius: 8px; overflow: auto; }
.kb-article__body code { background: #f2f2f2; padding: 2px 6px; border-radius: 5px; font-size: 90%; }
.kb-article__body blockquote { margin: 1em 0; padding: 4px 18px; border-left: 3px solid var(--kb-primary); color: var(--kb-muted); }
.kb-article__body table { border-collapse: collapse; width: 100%; margin: 14px 0; }
.kb-article__body th, .kb-article__body td { border: 1px solid var(--kb-border); padding: 8px 12px; text-align: left; }

/* ---- Search results ---- */
.kb-results { list-style: none; margin: 0; padding: 0; }
.kb-results li { background: var(--kb-surface); border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); padding: 18px 22px; margin-bottom: 14px; }
.kb-results h3 { font-size: 17px; margin: 0 0 4px; }
.kb-results .kb-results__ctx { color: var(--kb-muted); font-size: 13px; }
.kb-empty { color: var(--kb-muted); text-align: center; padding: 50px 0; }

.kb-page-title { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.kb-page-sub { color: var(--kb-muted); margin-bottom: 30px; }

/* ---- Footer ---- */
.kb-footer { border-top: 1px solid var(--kb-border); padding: 26px 0; color: var(--kb-muted); font-size: 14px; }
.kb-footer__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.kb-footer__sep { opacity: .5; }
.kb-footer a { color: var(--kb-muted); }

@media (max-width: 600px) {
    .kb-hero__title { font-size: 22px; }
    .kb-article { padding: 26px 22px; }
}