/*
 * Google Keyword Tool , 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 Google-specific overrides live here: brand colour, the
 * brand band gradient, results-table sort-arrow colour, and the
 * primary-button tint.
 */

:root {
    --kt-brand: #4285f4;
    --kt-brand-fade: #1a73e8;
    --kt-brand-tint: #e8f0fe;
}

/* Google "G" mark in the hero h1. Sized via em so it scales with the
   h1's font-size; vertically centered with the heading text. */
.gkw-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin-right: 0.45em;
    vertical-align: -0.12em;
    background: #fff;
    border-radius: 50%;
    padding: 0.18em;
    box-sizing: content-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.gkw-hero-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Brand band uses Google's blue gradient. */
.kt-brand-band {
    background: linear-gradient(135deg, #4285f4 0%, #1a73e8 60%, #1557b0 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 (already #4285f4 in keyword-tool.js;
   kept here as a CSS variable in case branding ever changes). */
.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 Google-blue tint. */
.kt-modifier-badge {
    background: var(--kt-brand-tint);
    color: #1a73e8;
}

/* Brand-tinted progress fill. */
.kt-progress-fill {
    background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);
}

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

/* Example chips on form: subtle Google blue 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;
}