/*
 * Custom CSS, loaded after the theme's own stylesheets on every page
 * (wired up via layouts/partials/head/extensions.html). Anything you write
 * here overrides the theme.
 *
 * The theme exposes its color scheme as CSS variables, which is usually the
 * easiest thing to tweak here instead of hugo.yaml's params.color block:
 *
 *   :root {
 *     --primary-color: #007bff;
 *     --secondary-color: #f8f9fa;
 *     --background-color: #eaedf0;
 *     --secondary-background-color: #64ffda1a;
 *     --text-color: #343a40;
 *     --text-secondary-color: #6c757d;
 *     --text-link-color: #007bff;
 *   }
 *
 * Dark mode uses the *-dark suffixed versions of the same variables
 * (--primary-color-dark, --background-color-dark, ...). See README.md
 * "Customizing colors" for the full list and how they map to the config.
 *
 * Anything beyond variables — spacing, fonts, hiding/reshaping sections —
 * just goes here as plain CSS rules targeting the theme's classes.
 */

/*
 * Fix: the Experience section's company tabs are plain Bootstrap
 * ".nav-pills", which the theme never restyles — so both the inactive tab
 * text and the active tab's pill background are hardcoded to Bootstrap's
 * own blue (#0d6efd), ignoring every --primary-color/--text-color variable
 * set above. Re-point them at the theme's palette instead, using the same
 * primary-color/secondary-color pairing the theme itself uses elsewhere
 * (e.g. the round index numbers in the Education section) so it also
 * adapts correctly in dark mode.
 */
#pills-tab .nav-link {
    color: var(--text-color);
    cursor: pointer;
}

#pills-tab .nav-link:hover {
    color: var(--primary-color);
}

#pills-tab .nav-link.active {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
}