/* ==========================================================================
   Primary nav — animated underline for the active/hovered menu item.
   Uses :before/:after instead of border-bottom so the indicator is drawn
   without affecting layout height, and can animate in on hover.
   ========================================================================== */
.site-nav-link {
  position: relative;
}

.site-nav-link:before,
.site-nav-link:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  pointer-events: none;
  will-change: transform;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1);
}

.site-nav-link:before {
  background-color: currentColor;
  opacity: 0.4;
}

.site-nav-link:hover:before {
  transform: scaleX(1);
  transition-delay: 0s;
}

.site-nav-link:hover:after {
  transform: scaleX(1);
  transition-delay: 0.25s;
}

.site-nav-link.is-active:after {
  transform: scaleX(1);
}

.menu-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 24px;
}

.menu-icon-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition:
    top 300ms ease,
    transform 300ms ease,
    opacity 300ms ease;
}

.menu-icon-bar--top {
  top: 6px;
}

.menu-icon-bar--middle {
  top: 11px;
}

.menu-icon-bar--bottom {
  top: 16px;
}

[data-menu-button][aria-expanded="true"] .menu-icon-bar--top {
  top: 11px;
  transform: rotate(45deg);
}

[data-menu-button][aria-expanded="true"] .menu-icon-bar--middle {
  opacity: 0;
}

[data-menu-button][aria-expanded="true"] .menu-icon-bar--bottom {
  top: 11px;
  transform: rotate(-45deg);
}

.hero-carousel .slick-slide > div {
  line-height: 0;
}

.hero-carousel:not(.slick-initialized) > div:not(:first-child) {
  display: none;
}

.hero-carousel-dots .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-carousel-dots .slick-dots li {
  display: flex;
}

.hero-carousel-dots .slick-dots button {
  display: block;
  width: 4rem;
  height: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #b3b3b3;
  font-size: 0;
  transition: background-color 200ms ease;
  cursor: pointer;
}

.hero-carousel-dots .slick-dots .slick-active button {
  background: #f47932;
}

/* ==========================================================================
   WPForms restyled to match the static contact-card design.
   Selectors are intentionally high-specificity (prefixed with
   `div.wpforms-container-full`) so they beat WPForms' own classic/modern
   frontend CSS. Works for both classic and modern markup.
   Theme tokens: brand #0d5d63, mint #cee3e2, coral #f47932,
   slate #3f4849, mist #f8f9fa, hairline #bfc8c9.
   ========================================================================== */

/* Modern-markup CSS variables (used when "Modern Markup" is enabled). */
.toivonkeskus-contact-form div.wpforms-container-full {
  --wpforms-field-size-input-height: 42px;
  --wpforms-field-size-input-spacing: 1rem;
  --wpforms-field-size-font-size: 1rem;
  --wpforms-field-size-padding-h: 0.75rem;
  --wpforms-field-size-sublabel-spacing: 0.375rem;
  --wpforms-field-border-radius: 0.5rem;
  --wpforms-field-border-style: solid;
  --wpforms-field-border-size: 1px;
  --wpforms-field-background-color: #f8f9fa;
  --wpforms-field-border-color: #cee3e2;
  --wpforms-field-text-color: #3f4849;
  --wpforms-label-size-font-size: 0.75rem;
  --wpforms-label-size-line-height: 1rem;
  --wpforms-label-color: #3f4849;
  --wpforms-label-sublabel-color: #3f4849;
  --wpforms-label-error-color: #f47932;
  --wpforms-button-background-color: #f47932;
  --wpforms-button-border-radius: 9999px;
  --wpforms-button-border-style: solid;
  --wpforms-button-border-size: 0px;
  --wpforms-button-border-color: transparent;
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-size-height: 50px;
  --wpforms-button-size-padding-h: 3rem;
  --wpforms-button-size-font-size: 1.25rem;
  --wpforms-button-size-margin-top: 0.25rem;
  --wpforms-container-padding: 0px;
  --wpforms-background-color: transparent;
  --wpforms-container-border-style: none;
  --wpforms-container-border-width: 0px;
  --wpforms-container-shadow-size-box-shadow: none;
}

/* Neutralise the container's own box so it sits flush inside the card. */
.toivonkeskus-contact-form div.wpforms-container-full,
.toivonkeskus-contact-form div.wpforms-container-full:not(:empty) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Field wrapper spacing (matches the static `gap-4` between fields). */
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-field {
  margin: 0 !important;
  padding: 0 0 1.5rem !important;
}

/* Labels: small, uppercase, tracked, slate — like the static form. */
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-field-label,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  legend.wpforms-field-label {
  margin: 0 0 0.375rem !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #3f4849 !important;
}

.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-field-sublabel {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #3f4849 !important;
}

.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-required-label {
  color: #f47932 !important;
}

/* Text inputs, selects and textareas. */
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="text"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="email"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="tel"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="url"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="number"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="password"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="search"],
.toivonkeskus-contact-form div.wpforms-container-full .wpforms-form select,
.toivonkeskus-contact-form div.wpforms-container-full .wpforms-form textarea {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid #cee3e2 !important;
  border-radius: 0.5rem !important;
  background-color: #f8f9fa !important;
  padding: 0 0.75rem;
  color: #3f4849 !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 200ms ease !important;
}

.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="text"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="email"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="tel"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="url"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="number"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="password"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="search"],
.toivonkeskus-contact-form div.wpforms-container-full .wpforms-form select {
  height: 42px !important;
}

.toivonkeskus-contact-form div.wpforms-container-full .wpforms-form textarea {
  height: auto !important;
  min-height: 162px !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  resize: vertical;
}

.toivonkeskus-contact-form div.wpforms-container-full .wpforms-form input:focus,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  select:focus,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  textarea:focus {
  border-color: #0d5d63 !important;
  box-shadow: none !important;
  outline: none !important;
}

.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input::placeholder,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  textarea::placeholder {
  color: #bfc8c9 !important;
}

/* Submit button: coral pill matching the static "Send" button. */
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-submit-container {
  margin-top: 0 !important;
  padding-top: 0.25rem !important;
}

.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  button[type="submit"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="submit"],
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem;
  width: auto !important;
  height: 50px !important;
  padding: 0 3rem !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background-color: #f47932 !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: filter 200ms ease !important;
}

.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  button[type="submit"]:hover,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input[type="submit"]:hover,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-submit:hover {
  background-color: #f47932 !important;
  filter: brightness(1.05);
}

/* Rows / containers full-width. */
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  .wpforms-field-row {
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

/* Validation states. */
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  label.wpforms-error,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  em.wpforms-error {
  color: #f47932 !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  input.wpforms-error,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  textarea.wpforms-error,
.toivonkeskus-contact-form
  div.wpforms-container-full
  .wpforms-form
  select.wpforms-error {
  border-color: #f47932 !important;
}