/*
 * Elementor 2.6 + Pro -> Elementor 4 (without Pro): keeps the pages looking like the old site.
 * Loaded after Elementor's own CSS (functions.php, globevnik_elementor_compat_css()).
 */

/* 1. Home page slogan "DOBRO ORODJE / DELO SKRAJŠA".
 *    Was the Elementor Pro "Custom CSS" of the heading widget 68600b9 on the home page (post 7);
 *    Elementor without Pro no longer prints widget custom CSS. Copied unchanged. */
/* Osnovni vsebnik za centriranje */
.slogan-wrapper {
  text-align: center;
  /* Priporočam uporabo moderne sans-serif pisave, kot je Montserrat ali Poppins */
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  margin: 20px auto;
  padding: 0 20px;
}

/* Stil za nadnaslov ("NAŠA FILOZOFIJA") s stranskimi črticami */
.slogan-nadnaslov {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #555555;
  margin-bottom: 15px;
}

/* Zlate črtice levo in desno od nadnaslova */
.slogan-nadnaslov::before,
.slogan-nadnaslov::after {
  content: "";
  height: 2px;
  width: 40px; /* Dolžina črtice */
  background-color: #d4af37; /* Zlata barva (prilagodite vašemu logotipu) */
  margin: 0 15px;
}

/* Glavni stil za h2 slogan */
.slogan {
  font-size: 52px;
  line-height: 1.2;
  color: #333333;
  font-weight: 300; /* Osnovna teža pisave (tanjša) za "ORODJE" in "DELO" */
  margin: 0;
  text-transform: uppercase;
}

/* Odebeljen črn tekst ("DOBRO") */
.slogan .bold-dark {
  font-weight: 800; /* Zelo odebeljeno */
  color: #222222;
}

/* Odebeljen zlat tekst ("SKRAJŠA.") */
.slogan .bold-gold {
  font-weight: 800;
  color: #d4af37; /* Zlata barva, ki se ujema z vašim gumbom "Rezila orodja" */
}

/* Prilagoditev za manjše zaslone (mobilni telefoni) */
@media (max-width: 768px) {
  .slogan {
    font-size: 32px;
  }

  .slogan-nadnaslov {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .slogan-nadnaslov::before,
  .slogan-nadnaslov::after {
    width: 25px; /* Krajše črtice na mobilnikih */
  }
}

/* 2. Kakovost page: its heading widget contains editor markup pasted by mistake, with an empty
 *    <h1 contenteditable="true">. The browser gave that empty editable h1 one line of height (48px);
 *    Elementor 4 strips contenteditable, so the h1 collapsed and the page content moved up 48px. */
.elementor-heading-title h1[data-elementor-setting-key="title"]:empty {
  min-height: 1.2em;
}

/* 3. Image box widgets (Zaščita prevleke): Elementor 4 lays the image on the text baseline,
 *    which adds ~6px under the image before the title. Elementor 2.6 had no gap. */
.elementor-widget-image-box .elementor-image-box-img {
  vertical-align: top;
}

/* 4. Icon lists (footer): Elementor 4 makes the icon 1.25em wide, Elementor 2.6 used the icon size,
 *    so the text sat 4px further right. */
.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon i {
  width: 1em;
}