/* Fully Approved Finance: mobile and tablet safeguards.
   Keep this stylesheet last so it can protect layouts added by feature styles. */

html,
body {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .site-nav .btn,
  .header-links .button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Shadows should never make the following content appear to collide. */
  .contact-grid + .legal-copy {
    margin-top: clamp(48px, 7vw, 72px);
  }

  .hero-copy,
  .hero-phone,
  .pay-grid > *,
  .loan-selector-grid > *,
  .two-col > *,
  .contact-grid > * {
    min-width: 0;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  /* The split form card is narrow at tablet landscape widths. Keep select
     prompts readable instead of squeezing them into half-width columns. */
  .lead-form-grid .lead-field:nth-child(5),
  .lead-form-grid .lead-field:nth-child(6) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .site-header .inner {
    max-width: 100%;
  }

  .site-logo,
  .header-links .button {
    min-height: 44px;
  }

  .header-links .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer-links a,
  .loan-guide-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .legal-copy,
  .prose,
  .contact-card,
  .info-panel,
  .faq-item,
  .related-links a {
    min-width: 0;
  }

  .legal-copy a,
  .prose a,
  .contact-card a:not(.button) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 72px;
  }

  body {
    overflow-x: clip;
  }

  section[id],
  form[id],
  h1,
  h2,
  .loan-type-detail {
    scroll-margin-top: 0;
  }

  .site-nav,
  .site-header .inner {
    width: 100%;
    max-width: 100%;
  }

  .nav-logo,
  .site-logo,
  .site-nav .btn,
  .header-links .button {
    min-height: 44px;
  }

  h1,
  h2,
  h3,
  .loan-type-name,
  .review-card blockquote {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .phone,
  .printer,
  .plate,
  .loan-type-detail,
  .info-panel,
  .contact-card,
  .review-card {
    max-width: 100%;
  }

  .offer-card,
  .offer-copy,
  .receipt .row,
  .review-meta {
    min-width: 0;
  }

  .offer-copy span,
  .receipt .row span {
    overflow-wrap: anywhere;
  }

  .receipt .row {
    gap: 10px;
  }

  .receipt .row span:last-child {
    text-align: right;
  }

  .loan-type-button,
  .loan-type-detail .btn,
  .hero-actions .button,
  .contact-card .button,
  .page-cta .button,
  .cta .btn {
    min-height: 48px;
  }

  form,
  fieldset,
  form > *,
  form .form-grid,
  form .field-grid,
  form .form-row {
    min-width: 0;
    max-width: 100%;
  }

  form .form-grid,
  form .field-grid,
  form .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  form input,
  form select,
  form textarea,
  form button {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  form textarea {
    min-height: 112px;
  }
}

@media (max-width: 359px) {
  .site-nav,
  .site-header .inner {
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .nav-logo img,
  .site-logo img {
    width: 126px;
  }

  .nav-logo::after,
  .site-logo::after {
    margin-left: 3px;
    font-size: 15px;
  }

  .site-nav .btn,
  .header-links .button {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 10.5px;
  }

  .sec,
  .hero-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  .wrap {
    width: calc(100% - 32px);
  }

  .review-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .lead-submit {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 16px;
    letter-spacing: .02em;
    white-space: nowrap;
  }
}

@media (hover: none) and (pointer: coarse) {
  .loan-type-button:hover,
  .related-links a:hover,
  .btn:hover,
  .button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .type-cursor {
    animation-play-state: paused !important;
  }
}