/* =====================================================================
   RentalLoans.com — Global Stylesheet
   ---------------------------------------------------------------------
   BRAND COLOR SYSTEM
   Change the values below to re-theme the ENTIRE site.
   Values are space-separated R G B channels (not hex) so Tailwind can
   apply opacity modifiers, e.g. bg-primary/10, text-accent/80.
   Hex equivalents are noted in comments.
   ===================================================================== */
:root {
  --color-primary:       3 32 79;     /* #03204F  Navy  — logo "RENTAL", house */
  --color-primary-dark:  2 20 52;     /* #021434  Deeper navy — hovers, footer */
  --color-accent:        94 160 20;   /* #5EA014  Green — logo "LOANS", bars   */
  --color-accent-dark:   74 130 12;   /* #4A820C  Green hover                  */
  --color-dark:          30 41 59;    /* #1E293B  Dark neutral — body text     */
  --color-muted:         100 116 139; /* #64748B  Secondary text               */
  --color-light:         226 232 240; /* #E2E8F0  Light neutral — borders      */
  --color-background:    248 250 252; /* #F8FAFC  Page background              */
  --color-surface:       255 255 255; /* #FFFFFF  Cards                        */

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", var(--font-sans);
  --radius: 14px;
  --shadow-card: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -8px rgb(15 23 42 / .10);
  --shadow-card-hover: 0 2px 4px rgb(15 23 42 / .06), 0 18px 40px -12px rgb(15 23 42 / .18);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: rgb(var(--color-background));
  color: rgb(var(--color-dark));
  -webkit-font-smoothing: antialiased;
}
/* Grid children may shrink below content width (prevents mobile overflow) */
.grid > * { min-width: 0; }
/* :where() = zero specificity, so Tailwind's .hidden / sm:inline-flex etc. always win */
:where(.btn) { display: inline-flex; }

h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ---------- Components ----------
   This file loads after Tailwind, so these rules win over utilities of equal
   specificity. Use the modifier classes (card-dark, btn-lg, field-prefix…)
   rather than utilities to change a component's background/padding. */
.card {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-light));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card-dark { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); color: #fff; }
.card-tint { background: rgb(var(--color-accent) / .10); border-color: rgb(var(--color-accent) / .30); }
.card-hover:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: rgb(var(--color-accent) / .45); }

.btn {
  align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; border-radius: 10px; padding: .8rem 1.4rem; line-height: 1.1;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .1s;
  cursor: pointer; white-space: nowrap;
}
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: .55rem 1rem; font-size: .875rem; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: rgb(var(--color-accent)); color: #fff; box-shadow: 0 6px 16px -6px rgb(var(--color-accent) / .7); }
.btn-accent:hover { background: rgb(var(--color-accent-dark)); }
.btn-primary { background: rgb(var(--color-primary)); color: #fff; }
.btn-primary:hover { background: rgb(var(--color-primary-dark)); }
.btn-outline { border: 1.5px solid rgb(var(--color-primary) / .25); color: rgb(var(--color-primary)); background: #fff; }
.btn-outline:hover { border-color: rgb(var(--color-primary)); }
.btn-ghost-light { border: 1.5px solid rgb(255 255 255 / .35); color: #fff; }
.btn-ghost-light:hover { background: rgb(255 255 255 / .1); border-color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--color-accent));
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* Hero background — navy with subtle grid + green glow */
.hero-bg {
  background:
    radial-gradient(900px 400px at 85% 10%, rgb(var(--color-accent) / .22), transparent 60%),
    linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(160deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-dark)) 100%);
}

/* Navigation */
.nav-link { position: relative; font-weight: 500; color: rgb(var(--color-dark)); padding: .5rem 0; transition: color .2s; }
.nav-link:hover { color: rgb(var(--color-primary)); }
.nav-link[aria-current="page"] { color: rgb(var(--color-primary)); font-weight: 700; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: rgb(var(--color-accent)); border-radius: 2px;
}
.site-header.scrolled { box-shadow: 0 6px 24px -12px rgb(15 23 42 / .25); }
.dropdown-panel { opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease; }
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* Forms */
.field-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: rgb(var(--color-dark)); }
.field {
  width: 100%; border: 1.5px solid rgb(var(--color-light)); border-radius: 10px;
  padding: .7rem .9rem; background: #fff; color: rgb(var(--color-dark)); font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.field-prefix { padding-left: 1.75rem; }
.field-suffix { padding-right: 2.5rem; }
.field:focus { outline: none; border-color: rgb(var(--color-primary)); box-shadow: 0 0 0 4px rgb(var(--color-primary) / .12); }
.field.is-invalid { border-color: #DC2626; box-shadow: 0 0 0 4px rgb(220 38 38 / .10); }
.field.is-valid { border-color: rgb(var(--color-accent)); }
.field-error { display: none; color: #DC2626; font-size: .8rem; margin-top: .3rem; }
.field-error.show { display: block; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.2rem; }

/* Option "chips" used in the pre-qual form (radio cards) */
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px;
  border: 1.5px solid rgb(var(--color-light)); border-radius: 10px; padding: .6rem .8rem;
  font-weight: 600; font-size: .9rem; cursor: pointer; background: #fff; transition: all .15s;
}
.choice span:hover { border-color: rgb(var(--color-primary) / .5); }
.choice input:checked + span { border-color: rgb(var(--color-accent)); background: rgb(var(--color-accent) / .08); color: rgb(var(--color-primary)); box-shadow: 0 0 0 3px rgb(var(--color-accent) / .15); }
.choice input:focus-visible + span { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }

/* Range slider */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: rgb(var(--color-light)); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: rgb(var(--color-accent)); border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--color-accent)); border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); cursor: pointer; }

/* Tabs */
.tab-btn { padding: .75rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: .92rem; color: rgb(var(--color-muted)); transition: all .2s; white-space: nowrap; }
.tab-btn:hover { color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / .05); }
.tab-btn[aria-selected="true"] { background: rgb(var(--color-primary)); color: #fff; box-shadow: 0 6px 16px -8px rgb(var(--color-primary) / .8); }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: fadeUp .35s ease; }
.tab-panel:focus { outline: none; }
.tab-panel:focus-visible { outline: none; }

/* Checklist bullets */
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: rgb(var(--color-accent) / .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235EA014'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .tab-panel { animation: none; } html { scroll-behavior: auto; } }

/* Utilities that pull from the brand variables (usable without Tailwind too) */
.text-gradient { background: linear-gradient(90deg, #fff, rgb(var(--color-accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-num { font-variant-numeric: tabular-nums; }
.btn svg { flex-shrink: 0; }