#cleverpub-kpi-widget {
  --cp-card-bg: #1a1a1a;
  --cp-gold:    #f5c518;
  --cp-green:   #22c55e;
  --cp-dim:     rgba(255, 255, 255, 0.5);

  font-family: system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem 0;
}

#cleverpub-kpi-widget *,
#cleverpub-kpi-widget *::before,
#cleverpub-kpi-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#cleverpub-kpi-widget .cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  width: 100%;
}

@media (max-width: 900px) {
  #cleverpub-kpi-widget .cp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  #cleverpub-kpi-widget .cp-grid {
    grid-template-columns: 1fr;
  }
}

#cleverpub-kpi-widget .cp-card {
  background: var(--cp-card-bg);
  border-radius: 1rem;
  padding: 2rem 1.25rem;
  min-height: 180px;
  min-width: 0;
  overflow: visible;
  text-align: center;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
}

#cleverpub-kpi-widget .cp-card--gold {
  border-color: rgba(245, 197, 24, 0.5);
  box-shadow: 0 0 28px rgba(245, 197, 24, 0.12);
}

#cleverpub-kpi-widget .cp-card--green {
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.10);
}

#cleverpub-kpi-widget .cp-label {
  font-size: clamp(0.78rem, 0.9vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-dim);
}

#cleverpub-kpi-widget .cp-value {
  font-size: clamp(2.0rem, 2.7vw, 2.75rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

#cleverpub-kpi-widget .cp-card--gold .cp-value {
  color: var(--cp-gold);
}

#cleverpub-kpi-widget .cp-card--green .cp-value {
  color: var(--cp-green);
}

/* ── Homepage header fix ─────────────────────────────────────────────────────
   WordPress adds class "home" to <body> on the front page. Scoping rules here
   to that class ensures they apply only on the homepage and only when this
   plugin's stylesheet is loaded.

   Problem: the theme header uses a transparent background designed to sit over
   a hero image. When the KPI strip is injected below it, the transparent header
   shows the white page background, making white menu text invisible.
   Fix: force a dark CleverPub-branded background and white text on the header. */

body.home header,
body.home .site-header,
body.home #masthead,
body.home #header,
body.home [role="banner"] {
  background:       rgba(5, 8, 7, 0.94) !important;
  background-color: rgba(5, 8, 7, 0.94) !important;
}

body.home header a,
body.home header li a,
body.home header .menu-item > a,
body.home header .nav-link,
body.home header .sub-menu a,
body.home .site-header a,
body.home #masthead a,
body.home [role="banner"] a {
  color: #ffffff !important;
}

body.home header,
body.home .site-header,
body.home #masthead,
body.home [role="banner"] {
  color: #ffffff !important;
}

/* ── Homepage CTA button fix ("POPTÁVKA") ───────────────────────────────────
   The theme renders this button white-on-white by default (visible only on
   hover). Target the most common patterns used by WordPress themes and
   page-builders for a pill-shaped CTA in the header navigation.
   All rules are scoped to body.home to avoid affecting other pages.          */

/* Generic class-based button patterns */
body.home header a.btn,
body.home header a.button,
body.home header a[class*="btn-"],
body.home header a[class*="-btn"],
body.home header a[class*="button"],
body.home .site-header a.btn,
body.home .site-header a.button,
body.home .site-header a[class*="btn"],
body.home #masthead a.btn,
body.home #masthead a.button,
body.home #masthead a[class*="btn"],
body.home [role="banner"] a.btn,
body.home [role="banner"] a.button,
body.home [role="banner"] a[class*="btn"],
/* Elementor button widget inside header */
body.home header .elementor-button,
body.home header .elementor-button-wrapper a,
body.home .site-header .elementor-button,
body.home .site-header .elementor-button-wrapper a,
body.home #masthead .elementor-button,
/* WPBakery / Visual Composer */
body.home header .vc_btn,
body.home .site-header .vc_btn,
/* Gutenberg button block */
body.home header .wp-block-button__link,
body.home .site-header .wp-block-button__link,
/* Positional fallback: last nav item is usually the CTA ("POPTÁVKA" before "EN") */
body.home header ul.menu > li:nth-last-child(2) > a,
body.home header ul.nav-menu > li:nth-last-child(2) > a,
body.home .site-header ul.menu > li:nth-last-child(2) > a,
body.home #masthead ul.menu > li:nth-last-child(2) > a {
  background:       #8cc63f !important;
  background-color: #8cc63f !important;
  color:            #ffffff !important;
  border-color:     #8cc63f !important;
  border-radius:    2em     !important;
}

/* Keep button green on hover/focus — slightly brighter */
body.home header a.btn:hover,
body.home header a.button:hover,
body.home header a[class*="btn"]:hover,
body.home header .elementor-button:hover,
body.home header .elementor-button-wrapper a:hover,
body.home .site-header a.btn:hover,
body.home .site-header .elementor-button:hover,
body.home #masthead a.btn:hover,
body.home #masthead .elementor-button:hover,
body.home [role="banner"] a.btn:hover,
body.home header ul.menu > li:nth-last-child(2) > a:hover,
body.home .site-header ul.menu > li:nth-last-child(2) > a:hover,
body.home #masthead ul.menu > li:nth-last-child(2) > a:hover {
  background:       #9fd44a !important;
  background-color: #9fd44a !important;
  color:            #ffffff !important;
  border-color:     #9fd44a !important;
}

/* ── CTA href-based selectors ("POPTÁVKA") ──────────────────────────────────
   Target by URL slug — works regardless of theme markup or builder class names.
   Covers both ASCII-transliterated and UTF-8 encoded forms of the slug.       */

body.home header a[href*="poptavka"],
body.home header a[href*="poptávka"],
body.home header .menu a[href*="poptavka"],
body.home header .menu a[href*="poptávka"],
body.home nav a[href*="poptavka"],
body.home nav a[href*="poptávka"],
body.home a[href*="poptavka"].btn,
body.home a[href*="poptavka"].button,
body.home .header a[href*="poptavka"],
body.home .navbar a[href*="poptavka"],
body.home .main-navigation a[href*="poptavka"],
body.home .site-header a[href*="poptavka"],
body.home #masthead a[href*="poptavka"],
body.home [role="banner"] a[href*="poptavka"] {
  background:       #8cc63f !important;
  background-color: #8cc63f !important;
  color:            #ffffff !important;
  border-color:     #8cc63f !important;
  border-radius:    2em     !important;
}

/* Force child elements (spans, icons) inside the CTA to white */
body.home header a[href*="poptavka"] *,
body.home header a[href*="poptávka"] *,
body.home nav a[href*="poptavka"] *,
body.home nav a[href*="poptávka"] *,
body.home .header a[href*="poptavka"] *,
body.home .navbar a[href*="poptavka"] *,
body.home .site-header a[href*="poptavka"] *,
body.home #masthead a[href*="poptavka"] *,
body.home [role="banner"] a[href*="poptavka"] * {
  color: #ffffff !important;
}

/* Hover state */
body.home header a[href*="poptavka"]:hover,
body.home header a[href*="poptávka"]:hover,
body.home nav a[href*="poptavka"]:hover,
body.home .site-header a[href*="poptavka"]:hover,
body.home #masthead a[href*="poptavka"]:hover,
body.home [role="banner"] a[href*="poptavka"]:hover {
  background:       #9fd44a !important;
  background-color: #9fd44a !important;
  color:            #ffffff !important;
  border-color:     #9fd44a !important;
}