/* ============================================================================
   custom.css — project enhancements layered on top of the captured Elementor CSS.
   Loaded LAST in <head> so these rules win the cascade.
   Scope is deliberately narrow: accessibility + subtle interaction polish only.
   No brand redesign, no layout changes. The single colour change is a small,
   owner-approved contrast lift so text on the brand mocha meets WCAG AA.
   ========================================================================== */

/* 1. Contrast (WCAG AA)
   The brand secondary (mocha) was #8F7865 = 4.16:1 on white — just under the
   4.5:1 AA minimum for normal text (CTA buttons, active nav item). Nudge it to
   #836C59 = 4.94:1. Redefining the global custom property keeps every mocha
   usage consistent; it is only ever paired with light text, so darkening can
   only improve contrast, never worsen it. */
.elementor-kit-6 {
  --e-global-color-secondary: #836C59;
}

/* 2. Button hover/active feedback
   The captured :hover kept the exact same background, so buttons gave almost no
   feedback. Add a soft shadow + slight darken (no transform, so this never
   fights Elementor's own animation-* hover transforms) with a smooth transition. */
.elementor-button {
  transition: box-shadow .18s ease, filter .18s ease, background-color .3s ease;
}
.elementor-button:hover {
  box-shadow: 0 4px 14px rgba(22, 21, 19, .18);
  filter: brightness(.95);
}
.elementor-button:active {
  box-shadow: 0 2px 6px rgba(22, 21, 19, .22);
  filter: brightness(.9);
}

/* 3. Nav links — smooth colour transition on the existing hover/active states. */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .elementor-sub-item {
  transition: color .2s ease, background-color .2s ease;
}

/* 4. Accessible keyboard focus
   Mouse users are unaffected (:focus-visible only). Gives keyboard users a clear
   focus ring on every interactive element. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
.elementor-menu-toggle:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--e-global-color-secondary, #836C59);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 5. Smooth in-page scrolling — honours users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 7. Contact form — legibility + polish
   The captured Elementor form rendered as low-contrast brown-on-brown outlined
   fields on the mocha section (hard to read, cheap-looking). Give every contact
   form (kontakt / usluge / homepage share these classes) clean white filled fields
   with readable text, a proper custom select caret, and a high-contrast charcoal
   submit button that stands out against the mocha background. */
.elementor-form .elementor-field-group .elementor-field-textual {
    background-color: #ffffff !important;
    border: 1px solid #e7ded4 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    min-height: 52px !important;
    font-family: "DM Sans", Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;   /* captured CSS set fields to a 700-italic "gotham" that isn't loaded -> unreadable faux-italic; normalize */
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.45 !important;
    color: #2b2926 !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* Native <option> list — keep it readable and non-italic where the OS honours it. */
.elementor-form .elementor-field-group select.elementor-field-textual option {
    color: #2b2926;
    font-weight: 500;
    font-style: normal;
}
.elementor-form .elementor-field-group .elementor-field-textual::placeholder {
    color: #9a9086 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    opacity: 1 !important;
}
.elementor-form .elementor-field-group .elementor-field-textual:focus {
    border-color: #836c59 !important;
    box-shadow: 0 0 0 3px rgba(131, 108, 89, 0.18) !important;
    outline: none !important;
}
.elementor-form .elementor-field-group textarea.elementor-field-textual {
    min-height: 130px !important;
    resize: vertical;
}
.elementor-form .elementor-field-group select.elementor-field-textual {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23836c59' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 13px 9px;
}
/* Hide Elementor's own eicons select caret (.elementor-select-wrapper::before)
   so only the clean custom chevron above remains. */
.elementor-form .elementor-select-wrapper::before {
    content: "" !important;
    display: none !important;
}
.elementor-form button[type="submit"].elementor-button {
    background-color: #161513 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 16px 42px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    transition: background-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.elementor-form button[type="submit"].elementor-button:hover {
    background-color: #000000 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
    filter: none !important;
}

/* 6. Dropdown-caret de-duplication
   At runtime SmartMenus appends a SECOND .sub-arrow (also carrying an SVG caret) to
   each dropdown parent, on top of Elementor's own — so "Tretmani" showed a double
   arrow. Both are non-empty siblings inside the <a>, so hide every .sub-arrow after
   the first. Single-arrow items are unaffected. */
.elementor-nav-menu .sub-arrow ~ .sub-arrow {
  display: none !important;
}

/* 7. Partner logo marquee (partials/partners-marquee)
   Replaces the text marquee on home / o-nama / usluge. Logos are pre-standardized
   white circles (public/assets/images/partners); here they only get size, spacing
   and a subtle hover lift on the dark strip. */
.jbc-partners {
  --deensimc-item-gap: clamp(1.75rem, 3vw, 3.25rem);
  --deensimc-container-padding: clamp(1.25rem, 2vw, 2rem);
  /* soft fade at both edges so logos glide in/out instead of being cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.jbc-partners .deensimc-marquee-track { align-items: center; }
.jbc-partner { gap: 0 !important; flex-shrink: 0; }
.jbc-partner__logo {
  display: block;
  width: clamp(88px, 7vw, 124px);
  height: clamp(88px, 7vw, 124px);
  border-radius: 50%;
  line-height: 0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.jbc-partner__logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}
a.jbc-partner__logo:hover,
a.jbc-partner__logo:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 2px var(--e-global-color-secondary, #8F7865);
}
@media (max-width: 767px) {
  .jbc-partners {
    --deensimc-item-gap: 1.25rem;
    --deensimc-container-padding: 1.25rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
  .jbc-partner__logo { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .jbc-partners .deensimc-marquee-track { animation-play-state: paused; }
}

/* 8. Promo prices (price tables, price popup, service cards)
   <s class="price-old">regular</s> promo — regular price struck through next to the
   current promo price. Remove the <s> to end a promo. */
.price-old {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .55;
  font-weight: 400;
  margin-right: 4px;
}
.price-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.6;
  color: #8f7865;
}