/* KVB Elementor bridge
   Native Elementor widgets wrap text in .elementor-heading-title /
   .elementor-widget-container and impose their own line-height (=1) and margins.
   The KVB design relies on inherited body typography (line-height 1.7) and on
   contextual selectors, so those resets have to be handed back to the design
   cascade. Only class-styled leaf text (div/span heading titles) is touched -
   real h1-h6 keep the design's own tag-level rules. Scoped to KVB pages only. */

body[class*="kvb-family-"] div.elementor-heading-title,
body[class*="kvb-family-"] span.elementor-heading-title {
  line-height: inherit;
  letter-spacing: inherit;
  font-style: inherit;
}

/* Text-editor widgets keep the design's <p>/<ul> markup; let their line-height
   inherit from the surrounding design context instead of Elementor's default. */
body[class*="kvb-family-"] .elementor-widget-text-editor > .elementor-widget-container {
  line-height: inherit;
}

/* Elementor adds a default bottom margin to some widgets; the KVB layout controls
   spacing itself, so neutralise it and let the design's own margins win. */
body[class*="kvb-family-"] .elementor-widget:not(.elementor-widget-heading):not(.elementor-widget-text-editor) {
  margin-bottom: 0;
}

/* Buttons. The design's `.btn*` classes land on the widget wrapper, while
   Elementor's inner `.elementor-button` brings its OWN padding, background,
   radius and font. That double-boxes every button (too wide -> the hero CTAs
   wrapped to two lines). Strip the inner anchor back to a transparent, unpadded,
   inheriting box so the wrapper's KVB styling is the whole visual button, and
   let the anchor fill it so the padded area stays clickable. */
body[class*="kvb-family-"] .elementor-widget-button .elementor-button {
  width: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}
body[class*="kvb-family-"] .elementor-widget-button .elementor-button-content-wrapper,
body[class*="kvb-family-"] .elementor-widget-button .elementor-button-text {
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
/* The button widget wrapper itself should shrink to content, not fill the row. */
body[class*="kvb-family-"] .elementor-widget-button {
  width: auto;
}

/* Hero headline colour. In the original the headline is white, inherited from the
   dark .hero. Elementor's kit Theme Style sets a direct colour on every h1 (brand
   blue), which overrides that inheritance and makes "Neuer Job oder eigene
   Gründung –" blue on the dark hero. Re-assert white on the hero h1 across every
   page and language. The gold <em> is unaffected (it paints via text-fill-color). */
body[class*="kvb-family-"] .hero h1,
body[class*="kvb-family-"] .hero h1 a {
  color: #ffffff !important;
}

/* The gold gradient <em> inside the hero headline. An Elementor rule strips the
   gradient's background-image (leaving transparent text = invisible), so re-assert
   it. Scoped to the families whose original design uses the gradient - the Standort
   pages deliberately use a solid gold em and are left alone. */
body.kvb-family-startseite .hero h1 em,
body.kvb-family-bewerbungscoaching .hero h1 em,
body.kvb-family-gruendercoaching .hero h1 em,
body.kvb-family-i18n-startseite .hero h1 em,
body.kvb-family-i18n-bewerbungscoaching .hero h1 em,
body.kvb-family-i18n-gruendercoaching .hero h1 em,
body.kvb-family-ar-startseite .hero h1 em,
body.kvb-family-ar-bewerbungscoaching .hero h1 em,
body.kvb-family-ar-gruendercoaching .hero h1 em {
  background-image: linear-gradient(135deg, #FAD97A 0%, #C9A84C 60%, #FAD97A 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---- Mobile navigation ----------------------------------------------------
   Below the tablet breakpoint the Xpro menu switches to its own slide-in panel
   (toggler + overlay + close button). The desktop rules above stretch .nav-links
   across the bar, which breaks that panel - so they are unwound here and the
   panel is restyled in the KVB design. */
@media (max-width: 1024px) {
  body[class*="kvb-family-"] .nav-inner {
    gap: 10px;
  }
  /* logo left | language switcher centred | burger right.
     The logo and burger sides both flex:1 so they claim equal width; that puts
     the switcher on the true viewport centre. `margin:0 auto` alone only
     centres it in the leftover space, which the wider logo pushes off-centre. */
  body[class*="kvb-family-"] .nav-inner > .nav-links {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    gap: 8px;
    justify-content: flex-end;
    order: 3;
  }
  body[class*="kvb-family-"] .nav-inner > .nav-logo {
    order: 1;
    flex: 1 1 0 !important;
    min-width: 0;
    justify-content: flex-start;
  }
  body[class*="kvb-family-"] .nav-inner > .lang-switch {
    order: 2;
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: static !important;
  }
  /* logo scales down so the bar never crowds */
  body[class*="kvb-family-"] .nav-logo img { height: 38px !important; }

  /* hamburger */
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-toggler {
    background: #1f3864 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
    border: 0 !important;
  }
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-toggler svg,
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-toggler i { color: #ffffff !important; fill: #ffffff !important; }

  /* the slide-in panel - explicitly driven off the .active class Xpro toggles,
     so it is reliably off-screen until the burger is tapped */
  body[class*="kvb-family-"] .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100% !important;
    background: #ffffff !important;
    width: min(86vw, 360px) !important;
    box-shadow: -14px 0 40px rgba(31, 56, 100, .22);
    padding: 76px 0 28px !important;
    display: block !important;
    overflow-y: auto;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
    z-index: 100000;
  }
  body[class*="kvb-family-"] .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    right: 0 !important;
  }
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-close {
    background: #eaf0fa !important;
    color: #1f3864 !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    top: 18px !important;
    left: 18px !important;
    right: auto !important;
  }
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-overlay {
    background: rgba(13, 31, 64, .55) !important;
    backdrop-filter: blur(2px);
  }
  /* menu items: big, tappable, KVB styling */
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
  }
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a {
    display: block !important;
    background: #ffffff !important;
    color: #1f3864 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 17px 26px !important;
    border-bottom: 1px solid #eaf0fa !important;
  }
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a:hover,
  body[class*="kvb-family-"] .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a {
    background: #eaf0fa !important;
    color: #2e5ba8 !important;
  }
  /* the CTA sits in the bar as a compact pill next to the burger */
  body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button {
    padding: 9px 14px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 600px) {
  /* very small screens: the CTA text would crowd the burger, keep only icon-sized items */
  body[class*="kvb-family-"] .nav-cta-wrap { display: none !important; }
  body[class*="kvb-family-"] .nav-logo img { height: 34px !important; }
  body[class*="kvb-family-"] .lang-btn { padding: 6px 10px !important; font-size: 12px !important; }
}

/* ---- Fördercheck (WPForms multi-step) -------------------------------------
   The quiz is a real WPForms form now. Style it to match the original design's
   .quiz-box: white card, blue header with the gold progress bar, and the light
   rounded answer options. WPForms Modern themes through CSS variables, so most
   of this is variable overrides rather than brute-force rules. */
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-container {
  --wpforms-field-border-radius: 12px;
  --wpforms-field-background-color: #f4f6fb;
  --wpforms-field-border-color: #d4dced;
  --wpforms-field-text-color: #1a1a2e;
  --wpforms-label-color: #1f3864;
  --wpforms-button-background-color: #1f3864;
  --wpforms-button-border-color: #1f3864;
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-border-radius: 6px;
  --wpforms-page-break-color: #c9a84c;
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(31, 56, 100, .13);
  overflow: hidden;
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-form {
  padding: 0 36px 36px;
}
/* the page indicator becomes the blue header bar with the gold progress fill */
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-indicator,
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-indicator.progress {
  background: linear-gradient(135deg, #1f3864, #2e5ba8) !important;
  margin: 0 -36px 28px !important;
  padding: 28px 36px !important;
  color: #ffffff !important;
  border: 0 !important;
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-indicator-page-title,
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-indicator-steps {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  color: #ffffff;
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-indicator-page-progress-wrap {
  background: rgba(255, 255, 255, .2);
  border-radius: 3px;
  height: 6px;
  margin-top: 14px;
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-indicator-page-progress {
  background: #c9a84c;
  border-radius: 3px;
  height: 6px;
}
/* questions + answer options */
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-field-label,
body[class*="kvb-family-"] .kvb-quiz-form legend.wpforms-field-label {
  font-family: 'Raleway', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #1f3864 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 16px !important;
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-field-radio ul li,
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-field-checkbox ul li {
  background: #f4f6fb;
  border: 1px solid #d4dced;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: border-color .2s, background .2s, transform .2s;
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-field-radio ul li:hover {
  border-color: #2e5ba8;
  background: #eaf0fa;
  transform: translateY(-1px);
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-field-radio ul li label {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
}
/* navigation + submit buttons */
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-button,
body[class*="kvb-family-"] .kvb-quiz-form button[type="submit"] {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  border-radius: 6px;
  padding: 12px 24px;
}
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-page-button.wpforms-page-prev {
  background: transparent;
  color: #5a5a70;
  border: 1px solid #d4dced;
}
/* the result screen keeps the design's own .quiz-result styling */
body[class*="kvb-family-"] .kvb-quiz-form .wpforms-confirmation-container-full {
  background: transparent;
  border: 0;
  padding: 8px 0;
}

/* Cover images. The design fills fixed-height boxes with `.box img{height:100%;
   object-fit:cover}` (hero photo, service cards, blog cards, …). Elementor's image
   widget inserts wrappers with auto height between the box and the <img>, so the
   height:100% chain breaks and the photo no longer fills / crops. Pass the height
   through the wrappers. Harmless where the box has no fixed height (100% of auto =
   auto), so ordinary images are unaffected. */
body[class*="kvb-family-"] .elementor-widget-image,
body[class*="kvb-family-"] .elementor-widget-image > .elementor-widget-container {
  height: 100%;
}

/* TranslatePress language switcher. It replaces the original custom dropdown in the
   header; TP themes its switcher through CSS variables, so restyle it to match the
   original white rounded pill. */
/* The switcher must always be visible in the header and sized to its content -
   Elementor's widget wrapper would otherwise collapse inside the flex row. */
body[class*="kvb-family-"] .nav-inner .lang-switch,
body[class*="kvb-family-"] .kvb-lang-switcher,
body[class*="kvb-family-"] .kvb-lang-switcher > .elementor-widget-container,
body[class*="kvb-family-"] .kvb-lang-switcher .elementor-shortcode {
  display: block !important;
  width: auto !important;
  flex: 0 0 auto;
}
body[class*="kvb-family-"] .nav-inner .lang-switch {
  position: relative;
}

body[class*="kvb-family-"] .kvb-tp-switcher,
body[class*="kvb-family-"] .kvb-tp-switcher .elementor-shortcode {
  width: auto;
}
body[class*="kvb-family-"] .kvb-tp-switcher .trp-shortcode-switcher__wrapper {
  display: inline-block;
  width: auto;
  --bg: #ffffff !important;
  --bg-hover: #eaf0fa !important;
  --text: #1f3864 !important;
  --text-hover: #2e5ba8 !important;
  --border: 1.5px solid #d4dced !important;
  --border-color: #d4dced !important;
  --border-width: 1.5px !important;
  --border-radius: 999px !important;
  --font-size: 13px !important;
  --flag-size: 16px !important;
  --flag-radius: 50% !important;
}
body[class*="kvb-family-"] .kvb-tp-switcher .trp-language-item-name {
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  color: #1f3864 !important;
}
/* Compact the pill to the original height and keep the current item on-brand. */
body[class*="kvb-family-"] .kvb-tp-switcher .trp-shortcode-anchor,
body[class*="kvb-family-"] .kvb-tp-switcher .trp-shortcode-overlay > .trp-current-language-item__wrapper {
  padding: 0 !important;
}
body[class*="kvb-family-"] .kvb-tp-switcher .trp-language-item__current {
  padding: 6px 12px !important;
  color: #1f3864 !important;
}
body[class*="kvb-family-"] .kvb-tp-switcher .trp-shortcode-arrow {
  width: 14px !important;
  height: 14px !important;
  margin-right: 8px !important;
}
/* the drop-down list matches the original .lang-menu card */
body[class*="kvb-family-"] .kvb-tp-switcher .trp-shortcode-overlay .trp-language-item:not(.trp-language-item__current) {
  font-family: 'Raleway', sans-serif !important;
  font-weight: 600 !important;
}

/* Header CTA. The original "Kostenlos anfragen" is the solid blue .nav-cta pill
   (white text). Here it is an Xpro button, which renders in its own (gold) style —
   restyle it to match the original exactly. */
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button {
  background: #1F3864 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: background .2s, transform .2s !important;
}
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button .xpro-elementor-button-inner,
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button .xpro-button-text {
  color: #ffffff !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
}
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button,
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button:hover,
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button:focus,
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button .xpro-elementor-button-inner,
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button .xpro-button-text {
  text-decoration: none !important;
}
body[class*="kvb-family-"] .nav-cta-wrap .xpro-elementor-button:hover {
  background: #2E5BA8 !important;
  transform: translateY(-1px) !important;
}

/* Elementor editor visibility. The design's reveal-on-scroll animation keeps every
   animated element at opacity:0 until the frontend IntersectionObserver adds .vis.
   That script does not run inside the Elementor editor, so the whole page looks
   empty and un-editable there. Force the animated elements to their final visible
   state whenever the editor is active. The published frontend is untouched — the
   animation still plays for visitors. */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal-l,
body.elementor-editor-active .reveal-r,
body.elementor-editor-active .reveal-s {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Logo. The Xpro site-logo widget nests the <img> inside auto-width containers
   that collapse to 0 in a flex row (max-width:100% of a 0-wide parent = 0). Let
   the image size to its natural aspect from the design's height, ignoring the
   collapsed ancestor, so the logo and the whole header lay out correctly. */
body[class*="kvb-family-"] .nav-logo img {
  width: auto;
  max-width: none;
  height: 48px;
}
body[class*="kvb-family-"] .footer-logo img {
  width: auto;
  max-width: none;
  height: 42px;
}
/* And stop the logo's own containers from collapsing. */
body[class*="kvb-family-"] .nav-logo,
body[class*="kvb-family-"] .nav-logo .xpro-site-logo,
body[class*="kvb-family-"] .nav-logo .elementor-widget-xpro-site-logo,
body[class*="kvb-family-"] .footer-logo,
body[class*="kvb-family-"] .footer-logo .xpro-site-logo,
body[class*="kvb-family-"] .footer-logo .elementor-widget-xpro-site-logo {
  width: auto;
  flex: 0 0 auto;
}

/* ---- Header / footer layout hardening -------------------------------------
   Elementor wraps every element in block width:100% divs, which collapse the
   design's shrink-to-content flex rows (the Xpro menu + CTA fell to width 0 and
   disappeared). Force the nav containers and their widgets to size to content so
   the design's space-between layout resolves. */
body[class*="kvb-family-"] .nav-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
body[class*="kvb-family-"] .nav-inner > .nav-logo,
body[class*="kvb-family-"] .nav-inner > .lang-switch { flex: 0 0 auto; width: auto; }
body[class*="kvb-family-"] .nav-inner > .nav-links {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  width: auto;
}
/* Menu + CTA widgets: size to their content, not to 100% of a shrink parent. */
body[class*="kvb-family-"] .nav-links > .elementor-element,
body[class*="kvb-family-"] .nav-cta-wrap {
  width: fit-content;
  flex: 0 0 auto;
}
body[class*="kvb-family-"] .elementor-widget-xpro-horizontal-menu > .elementor-widget-container {
  width: fit-content;
  display: flex;
  align-items: center;
}
/* Desktop only: below the tablet breakpoint this element becomes the slide-in
   mobile panel, and forcing display/width here would stop it from hiding. */
@media (min-width: 1025px) {
  body[class*="kvb-family-"] .xpro-elementor-horizontal-navbar-wrapper {
    width: fit-content;
    display: flex;
    align-items: center;
  }
}
/* Footer rows keep the same treatment. */
body[class*="kvb-family-"] .footer-top { display: flex; flex-direction: row; align-items: flex-start; }
body[class*="kvb-family-"] .footer-btm { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
body[class*="kvb-family-"] .footer-links-group,
body[class*="kvb-family-"] .footer-legal {
  display: flex;
  flex-direction: row;
  width: auto;
}
body[class*="kvb-family-"] .footer-links-group > .elementor-element,
body[class*="kvb-family-"] .footer-legal > .elementor-element,
body[class*="kvb-family-"] .footer-links-group .elementor-widget-xpro-horizontal-menu > .elementor-widget-container {
  width: fit-content;
  flex: 0 0 auto;
}

/* ---- Blog grids -----------------------------------------------------------
   The cards are printed by the [kvb_blog_grid] shortcode, but Elementor wraps
   every shortcode in two divs. Those wrappers sat between .blog-grid and the
   cards, so the cards were not grid items and stacked in one column. Collapsing
   the wrappers with display:contents makes the cards direct children again and
   the design's grid rules apply untouched. */
body[class*="kvb-family-"] .blog-grid > .elementor-widget-shortcode,
body[class*="kvb-family-"] .blog-grid > .elementor-widget-shortcode > .elementor-widget-container,
body[class*="kvb-family-"] .blog-grid .elementor-shortcode,
body[class*="kvb-family-"] .article-grid > .elementor-widget-shortcode,
body[class*="kvb-family-"] .article-grid > .elementor-widget-shortcode > .elementor-widget-container,
body[class*="kvb-family-"] .article-grid .elementor-shortcode {
  display: contents !important;
}

/* ---------------------------------------------------------------------------
   Blog article: anchors the design styles CONTEXTUALLY (`.article-cta a`,
   `.sb-cta a`) rather than by class. Those arrive wrapped in a button widget,
   so the generic "strip the inner .elementor-button" rule above out-specifies
   the design rule and the buttons lose their padding, gold background and
   colour. Collapse the wrapper so the anchor is a direct child again, then
   hand the design's own declarations back at matching specificity.
   --------------------------------------------------------------------------- */
body[class*="kvb-family-"] .article-cta > .elementor-widget-button,
body[class*="kvb-family-"] .sb-cta > .elementor-widget-button,
body[class*="kvb-family-"] .sb-phone > .elementor-widget-button {
  display: contents;
}

body[class*="kvb-family-"] .article-cta .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #1a1000;
  border-radius: var(--r-sm);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Raleway', sans-serif;
  line-height: inherit;
  text-decoration: none;
  width: auto;
}
body[class*="kvb-family-"] .article-cta .elementor-widget-button .elementor-button:hover {
  background: #b8963f;
  transform: translateY(-2px);
}

body[class*="kvb-family-"] .sb-cta .elementor-widget-button .elementor-button {
  display: block;
  background: var(--gold);
  color: #1a1000;
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Raleway', sans-serif;
  line-height: 1.7;
  text-decoration: none;
  margin-bottom: 10px;
  width: auto;
}
body[class*="kvb-family-"] .sb-cta .elementor-widget-button .elementor-button:hover {
  background: #b8963f;
  transform: translateY(-1px);
}
body[class*="kvb-family-"] .sb-cta .sb-phone .elementor-widget-button .elementor-button {
  background: transparent;
  color: #FAD97A;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
  margin: 4px 0 0;
  display: block;
  transform: none;
}
body[class*="kvb-family-"] .sb-cta .sb-phone .elementor-widget-button .elementor-button:hover {
  background: transparent;
  text-decoration: underline;
  transform: none;
}

/* These headings carry no line-height of their own - the design lets them
   inherit (1.9 inside .article-body, 1.7 from body). Elementor's
   .elementor-heading-title forces 1.2 and shrinks the boxes. */
:where(body[class*="kvb-family-"]) .elementor-heading-title {
  line-height: inherit;
}

/* Heading widgets keep the design's own bottom margin (e.g. .sb-card-title). */
body[class*="kvb-family-"] .sb-card-title.elementor-widget-heading {
  margin-bottom: 16px;
}

/* The author avatar's own inline styling (padding/background) lands on the
   image widget wrapper, which then measures 6px taller than the 30px avatar and
   pushes the whole meta row down. Collapse the wrapper so the <img> is the
   flex child the design sized. */
body[class*="kvb-family-"] .article-author > .elementor-widget-image {
  display: contents;
}

/* Elementor zeroes every widget's bottom margin inside a container
   (`.e-con .elementor-widget.elementor-widget`, specificity 0-3-0), which the
   design's own `body.kvb-family-x .thing` rules (0-2-1) cannot outrank. Hand
   back the bottom margins the design actually declares on widget wrappers. */
body[class*="kvb-family-"] .e-con .elementor-widget.featured-cat {
  margin-bottom: 12px;
}
body[class*="kvb-family-"] .e-con .elementor-widget.sb-card-title {
  margin-bottom: 16px;
}
/* The article headline's 10px sits on the <h1> itself, which is trapped inside
   the widget wrapper because flex items don't collapse child margins. */
body[class*="kvb-family-"] .article-full-body > .elementor-widget-heading:not(.featured-cat) {
  margin-bottom: 10px;
}

/* Category/tag archive: same blog design, but no hand-authored sidebar exists
   for a term page, so the article grid uses the full content width. */
body[class*="kvb-family-"] .blog-wrap.kvb-archive {
  display: block;
}
body[class*="kvb-family-"] .blog-wrap.kvb-archive .blog-main {
  width: 100%;
}
body[class*="kvb-family-"] .blog-wrap.kvb-archive .article-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
body[class*="kvb-family-"] .blog-wrap.kvb-archive .pagination,
body[class*="kvb-family-"] .blog-wrap.kvb-archive .nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
}
body[class*="kvb-family-"] .blog-wrap.kvb-archive .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
}
body[class*="kvb-family-"] .blog-wrap.kvb-archive .page-numbers.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Scroll performance.
   The design's two hero blobs are large static blur(90px) surfaces. Without a
   compositor layer of their own the blur is re-rasterised whenever the area
   repaints, which the Elementor DOM (~3800 elements against 519 in the source
   page) makes far more expensive than it was in the original HTML. Promoting
   them - and the elements that move on every frame - is visually identical.
   --------------------------------------------------------------------------- */
body[class*="kvb-family-"] .hero-blob {
  will-change: transform;
  transform: translateZ(0);
}
/* NOTE: deliberately NOT promoting .nav - `will-change: transform` would make
   the header a containing block for position:fixed descendants, and the mobile
   menu panel is fixed inside it (it collapsed to the header's 104px box). Only
   leaf fixed elements, which contain nothing fixed themselves, are promoted. */
body[class*="kvb-family-"] .progress-bar,
body[class*="kvb-family-"] .sticky-cta {
  will-change: transform;
}

/* Arabic keeps its RTL text, but the header bar is laid out left-to-right so the
   logo, menu and switcher sit exactly where they do in every other language. */
html[dir="rtl"] body[class*="kvb-family-"] .nav-inner,
body[class*="kvb-family-"][dir="rtl"] .nav-inner {
  direction: ltr;
}

/* The blog's topic filter bar stays in the flow instead of following the
   scroll down the page. */
body[class*="kvb-family-"] .filters {
  position: static !important;
  top: auto !important;
}