.site-focus,
html {
  scroll-behavior: smooth;
}

html,
body,
body *,
button,
input,
select,
textarea {
  font-family: Arial, sans-serif !important;
}

.font-display,
.font-mono {
  font-family: Arial, sans-serif !important;
}

.font-mono.text-xs,
.font-mono.tracking-\[0\.2em\] {
  font-size: .875rem !important;
  font-weight: 700 !important;
}

.hero-bg .font-mono.tracking-\[0\.2em\] {
  font-size: 1rem !important;
}

#quote,
#contact {
  scroll-margin-top: 90px;
}

.site-focus:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.dropdown,
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { display: none !important; }
.nav-item[data-open="true"] .dropdown { display: block !important; }

.dropdown-toggle {
  padding: .25rem;
  color: inherit;
  line-height: 1;
}

.dropdown-toggle[aria-expanded="true"] { color: var(--orange); }

header nav.hidden.md\:flex > a:hover,
header nav.hidden.md\:flex > .nav-item > a:hover,
header nav.hidden.md\:flex > .nav-item > .dropdown-toggle:hover {
  color: var(--orange);
}

@media (max-width: 767px) {
  .mobile-menu .dropdown {
    position: static;
    min-width: 0;
    margin-top: .5rem;
    border: 0;
    border-left: 1px solid var(--line-soft);
  }
}

.mobile-menu[hidden] {
  display: none;
}

.form-feedback {
  grid-column: 1 / -1;
  margin-top: .25rem;
  font-family: Arial, sans-serif;
  font-size: .75rem;
  line-height: 1.5;
  text-align: center;
}

.form-feedback[data-state="success"] { color: #5FC2B7; }
.form-feedback[data-state="error"] { color: #F29A5C; }

footer a { transition: color .2s; }
footer a:hover { color: var(--orange); }

a.bg-orange,
button.bg-orange {
  background-color: var(--orange);
  background-image: linear-gradient(135deg, #f58a32 0%, #e8792a 52%, #d96518 100%);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(232, 121, 42, .28), 0 2px 5px rgba(217, 101, 24, .22);
  transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}

a.bg-orange:hover,
button.bg-orange:hover {
  box-shadow: 0 11px 24px rgba(232, 121, 42, .36), 0 3px 7px rgba(217, 101, 24, .26);
  transform: translateY(-1px);
}

a.bg-orange:active,
button.bg-orange:active {
  box-shadow: 0 5px 12px rgba(232, 121, 42, .24);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}