/* Navigation display across viewports */
@media (max-width: 1039px) {
  .nav-desktop {
    display: none !important;
  }
  .nav-toggle-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 1040px) {
  .nav-desktop {
    display: flex !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    gap: clamp(0.25rem, 0.8vw, 1.25rem) !important;
  }
  .nav-toggle-btn {
    display: none !important;
  }
}

/* Ensure nav links wrap or size appropriately on desktop viewports without escaping or slicing */
.nav-desktop .nav-link {
  white-space: normal !important;
  text-align: center;
  line-height: 1.2;
}

/* Header when scrolled sticky */
.site-header.is-scrolled {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background-color: var(--ground) !important;
}

/* Squeezed text fix for rates.html at 320px */
.calc-output-hours {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* Low contrast fixes for a.mono in contact-detail-card and dark blocks */
.contact-detail-card a.mono {
  color: var(--primary) !important;
}
.contact-detail-card a.mono:hover {
  color: var(--ink) !important;
}
.block-dark .contact-detail-card a.mono {
  color: #ffffff !important;
}
.block-dark .contact-detail-card a.mono:hover {
  color: #92d3a5 !important;
}

/* Flat control fix for services.html a.btn */
a.btn, button.btn {
  transition: background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
a.btn:hover, button.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
  filter: brightness(1.1);
}
a.btn:active, button.btn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  filter: brightness(0.92);
}
a.btn:focus-visible, button.btn:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px !important;
}

/* Flat control fix for button.cookie-btn */
button.cookie-btn, .cookie-btn {
  transition: background-color 150ms var(--ease-out-quad),
              color 150ms var(--ease-out-quad),
              border-color 150ms var(--ease-out-quad),
              box-shadow 150ms var(--ease-out-quad),
              transform 120ms var(--ease-out-quad) !important;
}
button.cookie-btn:focus-visible, .cookie-btn:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}
button.cookie-btn-allow:hover, .cookie-btn-allow:hover {
  background-color: #1b54f5 !important;
  border-color: #1b54f5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}
button.cookie-btn-allow:active, .cookie-btn-allow:active {
  background-color: #001F7A !important;
  border-color: #001F7A !important;
  transform: translateY(1px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
button.cookie-btn-decline:hover, .cookie-btn-decline:hover {
  border-color: #8C93A4 !important;
  color: #FFFFFF !important;
  background-color: #2D333F !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}
button.cookie-btn-decline:active, .cookie-btn-decline:active {
  background-color: #14171E !important;
  transform: translateY(1px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Calc output layout fixes */
.calc-output-pane {
  min-width: 0 !important;
}

.calc-output-hours {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  line-height: 1.4 !important;
  font-size: 1rem !important;
}

@media (max-width: 480px) {
  .tool-calculator-box {
    padding: var(--space-s) !important;
  }
  .calc-output-pane {
    padding: var(--space-s) !important;
  }
  .calc-output-big {
    font-size: 2rem !important;
  }
}