/* Flowkon Help Center — Custom Theme */
@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap');

/* ── Brand tokens (synced with globals.css) ── */
:root {
    /* primary = globals --primary oklch(0.6351 0.2006 307.8174) */
    --purple-hero:   #AC60E6;
    /* darker gradient stop */
    --purple-deep:   #6B21A8;
    /* lighter gradient stop */
    --purple-light:  #C084FC;
    /* pale hover bg = globals --accent oklch(0.9671 0.0154 242.4046) */
    --purple-pale:   #EEF2F8;

    /* text = globals --foreground / --muted-foreground */
    --text-dark:     #1A1B2E;
    --text-muted:    #6B7FA3;
    --text-light:    #94A3B8;

    /* borders & surfaces = globals --border / --sidebar bg */
    --border:        #E2E8F0;
    --surface:       #FFFFFF;
    --bg:            #F8FAFC;

    --font:          "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
    /* default card icon — stroke matches --purple-hero #AC60E6 */
    --card-icon:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='none' stroke='%23AC60E6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* ── Global reset ── */
* { box-sizing: border-box; }

body {
    background: var(--bg);
    font-family: var(--font);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV / HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#mainNav.navbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar .navbar-inner {
    background: transparent;
    box-shadow: none;
    height: 68px;
}
.navbar .navbar-inner .container-fluid {
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
}
a.brand > img {
    height: 36px;
    width: auto;
    vertical-align: middle;
    border: 0;
    margin-left: 0;
}
.navbar .brand {
    float: left;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}
.navbar .nav-collapse {
    margin-left: auto;
}
.navbar .nav li {
    display: inline-block;
    float: none;
    font-family: var(--font);
    font-size: 14px;
}
.navbar .nav li a,
.navbar .icon-private-w {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    transition: color .15s;
}
.navbar .nav li a:hover {
    color: var(--purple-hero);
    text-decoration: none;
}
/* hamburger on mobile */
.navbar .btn-navbar {
    margin-top: 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO SEARCH BAND
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#docsSearch {
    background: linear-gradient(98.33deg, #ac60e5 30.35%, #0c87f0 72.89%);
    border-top: none;
    padding: 3.5em 24px 3.5em;
    margin-bottom: 0;
    text-align: center;
}
#docsSearch h1 {
    font-size: 28px;
    font-weight: 600;
    font-family: var(--font);
    color: rgba(255,255,255,.95);
    margin: 0 0 1.4em;
    letter-spacing: -.01em;
    line-height: 1.3;
}

/* Search form wrapper */
#searchBar {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 580px;
    margin: 0 auto;
}
input.search-query {
    width: 100%;
    height: 52px;
    padding: 0 120px 0 20px;
    border-radius: 10px;
    border: none;
    background: #FFFFFF;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    color: var(--text-dark);
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    outline: none;
    letter-spacing: 0;
}
input.search-query::placeholder { color: var(--text-light); }
input.search-query:focus {
    box-shadow: 0 4px 24px rgba(0,0,0,.22), 0 0 0 3px rgba(139,82,255,.35);
}

/* Search button */
#searchBar button {
    position: absolute;
    right: 4px;
    top: 27px;
    height: 44px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--purple-deep), var(--purple-light));
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s;
}
#searchBar button:hover { opacity: .88; }

/* Dropdown results */
#serp-dd {
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    margin-top: 6px;
    overflow: hidden;
}
#serp-dd .result a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text-dark);
    text-decoration: none;
    transition: background .12s;
}
#serp-dd .result a:hover,
#serp-dd .result > li.active { background: var(--purple-pale); color: var(--purple-hero); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTENT AREA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#contentArea {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3em 24px 4em;
}

/* Collection heading */
.collection-category h2 {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-light);
    text-align: left;
    margin: 0 0 1em;
    padding-left: 2px;
}
.collection-category h2 a { color: var(--purple-hero); }
.collection-category .category-list {
    margin: 0 0 3em;
    text-align: left;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CATEGORY CARDS  (3-column grid)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.category-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    text-align: center;
}
.category-list .category {
    background-color: var(--surface);
    /* background-image: var(--card-icon); */
    background-position: top 20px center !important;
    background-size: 50px auto !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-sizing: border-box !important;
    min-height: 200px;
    padding: 120px 20px 20px;
    position: relative;
    width: auto !important;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.category-list .category:hover {
    /* re-declare background-image so Help Scout's hover shorthand can't clear it */
    /* background-image: var(--card-icon) !important; */
    background-color: var(--bg) !important;
    box-shadow: 0 6px 28px rgba(124,58,237,.13);
    border-color: rgba(124,58,237,.35);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Per-category image overrides — add rules like:
   #category-4 { background-image: url("https://..."); background-size: 80px auto !important; } */

/* Category title */
.category-list h3 {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 6px;
    line-height: 1.3;
    text-align: center;
}
.category-list .category:hover h3 { color: var(--purple-hero); }

/* Category description */
.category-list .category p {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0 0 8px;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
}

/* Article count badge */
.category-list .category .article-count {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: var(--purple-hero);
    margin-top: 8px;
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
    display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR (article / category pages)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sidebar .nav-list a {
    display: block;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    padding: 6px 0;
    line-height: 1.5;
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 12px;
    margin-left: -12px;
    transition: color .12s, border-color .12s;
}
#sidebar .nav-list a:hover { color: var(--purple-hero); border-left-color: var(--purple-hero); }
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
    color: var(--purple-hero);
    font-weight: 600;
    border-left-color: var(--purple-hero);
    text-decoration: none;
}
#sidebar h3 {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-light);
    margin-bottom: 8px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ARTICLE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: 32px 0 0 28px;
}
#fullArticle .title,
.contentWrapper h1 {
    font-family: var(--font);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 30px .6em 0;
    line-height: 1.3;
    letter-spacing: -.01em;
}
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    color: #374151;
    line-height: 1.7;
    letter-spacing: 0;
}
#fullArticle h2 {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
}
#fullArticle h3 {
    font-family: var(--font);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
}
#fullArticle h4 {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
}
#fullArticle strong { color: var(--text-dark); font-weight: 600; }

#fullArticle img {
    display: block;
    margin: 1.2em 0 2em;
    border-radius: 8px;
    border: 1px solid var(--border);
    max-width: 100%;
}
#fullArticle .printArticle {
    position: absolute;
    right: 46px;
    top: 40px;
}

/* In-article links */
.contentWrapper a,
#full-Article strong a,
.collection a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a span {
    color: var(--purple-hero);
    text-decoration: none;
    font-weight: 500;
    font-family: var(--font);
}
.contentWrapper a:hover,
.most-pop-articles .popArticles a:hover span { text-decoration: underline; }

.contentWrapper p {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    color: #374151;
    line-height: 1.7;
    margin-top: 0;
    word-wrap: break-word;
}

/* Category page sort */
#categoryHead .sort select {
    height: 28px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-muted);
    border-radius: 6px;
    border: 1px solid var(--border);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-deep), var(--purple-light));
    border: none;
    border-radius: 8px;
    padding: .55em 1.2em;
    cursor: pointer;
    transition: opacity .15s;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active { opacity: .85; color: #fff; background: linear-gradient(135deg, var(--purple-deep), var(--purple-light)); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ARTICLE FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.articleFoot p,
.articleFoot time {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-light);
    display: inline-block;
    font-style: italic;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer {
    border-top: 1px solid var(--border);
    padding: 2em 0;
    margin-top: 2em;
}
footer p,
footer p a {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-light);
    text-decoration: none;
}
footer p a:hover { color: var(--purple-hero); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT MODAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#contactModal h2,
.abuse h2 {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--surface);
    margin: 0;
    padding: 14px 0 12px 20px;
    border-bottom: 1px solid var(--border);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#contactModal .control-label {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INPUTS (global)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
input, button, select, textarea {
    font-family: var(--font), "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NO RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#noResults {
    font-family: var(--font);
    font-size: 15px;
    color: var(--text-muted);
    text-align: center;
    padding: 3em 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 3 → 2 columns at 900px */
@media screen and (max-width: 900px) {
    .category-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 2 → 1 column at 600px */
@media screen and (max-width: 600px) {
    .category-list {
        grid-template-columns: 1fr !important;
    }
    section.category-list .category {
        padding: 120px 20px 15px;
    }
    #docsSearch { padding: 2.5em 16px; }
    #docsSearch h1 { font-size: 22px; }
    #contentArea { padding: 2em 16px 3em; }
}
@media (max-width: 768px) {
    .navbar .btn-navbar { margin-top: 16px; right: -10px; }
    .related { padding: 24px 16px 20px; }
    .related ul { margin-left: 0; }
    .related h3, .related ul > li a { padding-left: 0; margin-left: 0; }
}
@media (max-width: 480px) {
    #searchBar button {
        background: transparent;
        color: transparent;
        border: none;
        border-radius: 0 7px 7px 0;
        padding: 0 1em;
        height: 44px;
        top: 20px;
        right: 4px;
    }
    #searchBar button .icon-search {
        display: block;
        color: var(--purple-hero);
        margin-top: 14px;
        font-size: 18px;
    }
    #fullArticle .title,
    .contentWrapper h1 { font-size: 22px; }
    #fullArticle h2 { font-size: 18px; }
}

#category-4{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/rocket.png");
}
#category-5{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/megaphone.png");
}
#category-26{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/user-cog.png");
}
#category-6{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/search.png");
}
#category-14{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/route.png");
}
#category-9{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/shield.png");
}
#category-10{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/file-braces-corner.png");
}
#category-12{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/webhook.png");
}
#category-7{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/users.png");
}
#category-8{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/layers.png");
}
#category-11{
     background-image: url("https://flowkon-app.s3.ap-south-1.amazonaws.com/flowkonhelpcenter/globe.png");
}