/*
 * Keyword Finder , brand-specific styles.
 *
 * Composes on top of:
 *   - code/assets/css/tools.css            (project-wide primitives)
 *   - code/assets/css/keyword-tool.css     (Keyword-Tools family CSS)
 *
 * Only Keyword-Finder-specific overrides live here: brand colour, the
 * brand band gradient, results-table sort-arrow colour, and the
 * primary-button tint.
 */

:root {
    --kt-brand: #7c3aed;
    --kt-brand-fade: #6d28d9;
    --kt-brand-tint: #ede9fe;
}

/* Brand logo from keywordfinder.io in the h1. Height-driven sizing
   so the pill wordmark keeps its 5:3 aspect ratio as the h1's
   font-size scales. */
.kf-hero-logo {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.22em;
    margin-right: 0.35em;
}
.kf-hero-logo img {
    height: 1.15em;
    width: auto;
    display: block;
}

/* Brand band uses violet gradient. */
.kt-brand-band {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #5b21b6 100%);
}

/* Subtle brand tint on the form card's submit button hover. */
.tool-form-card .primary-btn:hover {
    background: var(--kt-brand-fade);
}

/* Trend sparkline uses the brand color. */
.kt-trend polyline {
    stroke: var(--kt-brand);
}

/* Sort-arrow tint matches brand. */
.kt-results-table th[data-sort].is-sorted-asc::after,
.kt-results-table th[data-sort].is-sorted-desc::after {
    color: var(--kt-brand);
    opacity: 0.7;
}

/* Modifier badge gets a faint violet tint. */
.kt-modifier-badge {
    background: var(--kt-brand-tint);
    color: #6d28d9;
}

/* Brand-tinted progress fill. */
.kt-progress-fill {
    background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
}

/* History list clickable row styling. */
.history-item {
    cursor: pointer;
}
.history-item:hover {
    background: var(--kt-brand-tint);
}

/* Example chips on form: subtle violet on hover. */
.kt-example-chip:hover {
    border-color: var(--kt-brand);
    color: var(--kt-brand);
}

/* Results header strip background and spacing tweak. */
.results-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Empty-state hint inside the results region (when filtered list is empty). */
.kt-results-empty {
    padding: 24px;
    text-align: center;
    color: var(--ink-500, #64748b);
    font-size: 0.92em;
}