/*
 * JP-1070 — JTL-Blog "Unsere Themen-Welt" (topics index) redesign.
 *
 * Scoped to the `.blog-topics-page` wrapper that page-templates/themen.php emits,
 * which is the ONE template rendering both language twins
 * (/de/blog/themen/ and /en/jtl-blog/topics/), so both get the new design and
 * nothing else on the site is affected. The topic pill is a standalone
 * tag-cloud component (not one of the reusable CTA button variants), so it is
 * styled here rather than in the button widget.
 */

/* --- Eyebrow: tech-blue, uppercase, no underline (was slate Museo + orange rule) --- */
.blog-topics-page .subtitle {
    color: #2722f8;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
/* The theme draws an orange rule under the h1 via a high-specificity ::after
 * (h1:not(.line-none):not(.h3)…::after, 0,5,2) that outranks this selector, so
 * removing it needs !important. The .subtitle::after arm is a harmless no-op
 * here — the eyebrow carries no underline on this template. */
.blog-topics-page .subtitle::after,
.blog-topics-page h1::after {
    display: none !important;
    border-bottom: 0 !important;
    content: none !important;
}

/* --- Heading: navy Kurdis Wide Bold, no underline --- */
.blog-topics-page h1 {
    color: #0b1b45;
    font-family: "Kurdis", "Kurdis Wide Bold", "Inter", sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: 0;
    margin-bottom: 0;
}

/* Drop the container padding around the pill cloud. */
.blog-topics-page > section:nth-child(2) > .container {
    padding: 0;
}

/* --- Pill cloud: flowing flex-wrap with even gaps --- */
.blog-topics-page .blog-topics-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* --- Topic pill: fully-rounded, 2px navy border, navy text --- */
.blog-topics-page .blog-topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 2px solid #0b1b45;
    border-radius: 32px;
    background-color: #ffffff;
    color: #0b1b45;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* The theme's link-hover rule a:not(:disabled):not(.disabled):not(.active):hover
 * (specificity 0,4,1 via the three :not() pseudo-classes) outranks this class
 * selector (0,3,0) and repaints the label muted blue, so white needs !important. */
.blog-topics-page .blog-topic-pill:hover,
.blog-topics-page .blog-topic-pill:focus {
    background-color: #0b1b45;
    color: #ffffff !important;
    text-decoration: none;
}

/* --- Count badge: tech-blue circle, white bold number --- */
.blog-topics-page .blog-topic-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 160px;
    background-color: #2722f8;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
/* On hover the pill fills navy; swap the badge to white so it stays legible. */
.blog-topics-page .blog-topic-pill:hover .blog-topic-pill__count,
.blog-topics-page .blog-topic-pill:focus .blog-topic-pill__count {
    background-color: #ffffff;
    color: #0b1b45;
}