/*
 * site.css — single entry-point for all project styles.
 *
 * Layer order (lowest → highest priority):
 *   normalize < webflow < project < (unlayered)
 *
 * Unlayered rules at the bottom of this file always win over every layer,
 * which means a component class here beats base element rules in spark-duall.css
 * without needing !important or artificially raised specificity.
 */

@layer normalize, webflow, project;

@import url('./normalize.css')    layer(normalize);
@import url('./components.css')   layer(webflow);
@import url('./spark-duall.css')  layer(project);

/* ─── Unlayered component overrides ───────────────────────────────────────────
 * These are not inside any layer, so they have the highest possible cascade
 * priority. Add here any rule that must not be beaten by base element styles
 * (e.g. p {}, h1 {}) defined inside spark-duall.css / the project layer.
 * ─────────────────────────────────────────────────────────────────────────── */

.trusted-label {
  color: #afc571;
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  line-height: normal;
}

/* Hamburger — visible em mobile (components.css tem display:none por defeito) */
@media (max-width: 991px) {
  .humberger-menu-wrap {
    display: block;
  }
}

/* Fixed-height slider cards inside .why-choose-slider */
.why-choose-slider .slider-item-content {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.why-choose-slider.is--2 .slider-item-content {
  height: 200px;
}

/* Text always anchored to the bottom; grows upward with more content */
.why-choose-slider .slider-title-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@media screen and (max-width: 767px) {
  .why-choose-slider .slider-item-content {
    height: 180px;
  }

  .why-choose-slider.is--2 .slider-item-content {
    height: 140px;
  }

  /* Unify all slider icon sizes to match .is--nearby (38×38) on mobile */
  .slider-icon.is--2 {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 7px;
  }

  /* Nearby service cards — row layout on mobile */
  .slider-item-content.is--nearby {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 16px;
  }

  .slider-content-title.is--nearby {
    font-size: 18px;
  }
}

/* Map image swap — desktop vs mobile */
.nearby-thumbnail--mobile { display: none; }

@media screen and (max-width: 767px) {
  .nearby-thumbnail--desktop { display: none; }
  .nearby-thumbnail--mobile  { display: block; }
  .nearby-meta-box           { display: none; }
}

/* Remove all backgrounds from the hamburger button — every state */
.humberger-menu-wrap,
.humberger-menu-wrap:hover,
.humberger-menu-wrap:focus,
.humberger-menu-wrap.w--open,
.humberger-menu-wrap[aria-expanded="true"] {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  outline: none;
  border: none;
}

/* Make the Zone <select> look identical to the <input> fields */
select.contact-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%232f3e3f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}



/* ─── Language dropdown — desktop ─────────────────────────────────────────── */
.dropdown-menu-list-2.larze-dropdown-menu {
  background-color: var(--dark-green);
  border: none;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 64px;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
}

.menu-item-2.dropdown-menu {
  padding: 0;
}

.dropdown-menu-border {
  display: none;
}

.nav-link-5.w-nav-link {
  color: var(--white);
  font-family: var(--primary-font);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 20px;
  text-align: center;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-link-5.w-nav-link:hover {
  color: var(--lime);
}

/* Hamburger icon colour on legal pages (privacy policy, etc.) */
.humberger-menu-wrap.is-legal .menu-button-icon,
.humberger-menu-wrap.is-legal .menu-button-icon span {
  color: #2f3e3f;
  /* background-color: #2f3e3f; */
}

/* Placeholder state — match the 40% opacity of ::placeholder on the other inputs */
select.contact-input:has(option[value=""]:checked) {
  color: rgba(47, 62, 63, 0.4);
}