/* ============================================
   LAND TRULY — Global Stylesheet
   landtruly.com
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --green-darkest: #0d2218;
  --green-dark:    #1a3a2a;
  --green-mid:     #2d6a4f;
  --green-light:   #52b788;
  --green-pale:    #d8f3dc;
  --gold:          #c9a84c;
  --gold-light:    #f0d080;
  --gold-pale:     #fdf6e3;
  --cream:         #faf8f2;
  --white:         #ffffff;
  --text-dark:     #0d1f17;
  --text-mid:      #3a5a47;
  --text-light:    #6b8f7a;
  --border:        #d4e6da;
  --danger:        #e63946;
  --danger-light:  #fde8ea;
  --success:       #52b788;
  --success-light: #d8f3dc;
  --shadow-sm:     0 2px 8px rgba(13,34,24,0.06);
  --shadow-md:     0 8px 24px rgba(13,34,24,0.10);
  --shadow-lg:     0 16px 48px rgba(13,34,24,0.14);
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── TYPOGRAPHY ── */
.font-display { font-family: 'Cormorant Garamond', serif; }

/* ── NAVBAR ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 4rem;
  background: rgba(13, 34, 24, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.02em;
}

.nav-logo span { color: var(--green-light); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-links a {
  color: #ccc;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--gold-light); }

.nav-links a.active { color: var(--gold-light); }

.nav-auth {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-auth a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #ccc;
  transition: color 0.2s;
}

.nav-auth a:hover { color: var(--white); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  /* Explicit properties only — "transition: all" forces the browser to
     watch every property for changes (including ones that trigger
     layout/reflow), which is what made hovers/clicks feel heavy and
     abrupt rather than smooth. Naming only what actually changes is
     both cheaper to render and reads as noticeably smoother. */
  transition: background-color 0.18s ease, color 0.18s ease,
              transform 0.12s ease, box-shadow 0.18s ease,
              border-color 0.18s ease;
  cursor: pointer;
  letter-spacing: 0.01em;
}

/* The press itself — gives instant tactile feedback the moment you
   click, before whatever the click triggers (navigation, modal, etc.)
   happens. This was completely missing before, which is the main
   reason clicks felt like they "just fired" with nothing in between. */
.btn:active {
  transform: scale(0.97);
  transition-duration: 0.05s;
}

.btn-primary {
  background: var(--gold);
  color: var(--green-darkest);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0) scale(0.97);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.btn-outline {
  background: transparent;
  color: var(--green-mid);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--green-mid);
  background: var(--green-pale);
}

.btn-danger {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid rgba(230,57,70,0.2);
}

.btn-danger:hover {
  background: var(--danger);
  color: white;
}

.btn-sm {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.btn-full { width: 100%; }

.btn-green {
  background: var(--green-mid);
  color: white;
}

.btn-green:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.btn-green:active {
  transform: translateY(0) scale(0.97);
}

/* Disabled buttons shouldn't animate at all — no press feedback for
   an action that can't actually happen. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* ── FORM ELEMENTS ── */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-mid);
  margin-bottom: 6px;
}

.form-label span.required { color: var(--danger); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.1);
}

.form-input:active,
.form-select:active,
.form-textarea:active {
  border-color: var(--green-mid);
}

.form-input::placeholder,
.form-textarea::placeholder { color: #aac4b4; }

.form-textarea { resize: vertical; min-height: 100px; }

.form-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 4px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ── ALERTS ── */
.alert {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.alert-success {
  background: var(--success-light);
  color: var(--green-dark);
  border: 1px solid rgba(82,183,136,0.3);
}

.alert-error {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid rgba(230,57,70,0.2);
}

.alert-info {
  background: var(--gold-pale);
  color: #7a5c00;
  border: 1px solid rgba(201,168,76,0.3);
}

/* ── CARDS ── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-body { padding: 2rem; }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.badge-verified {
  background: var(--success-light);
  color: var(--green-mid);
}

.badge-pending {
  background: var(--gold-pale);
  color: #7a5c00;
}

.badge-declined {
  background: var(--danger-light);
  color: var(--danger);
}

.badge-sold {
  background: #e8e8e8;
  color: #666;
}

/* ── SECTION TAGS ── */
.section-tag {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-mid);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--green-darkest);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.section-sub {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.8;
  max-width: 520px;
}

/* ── DIVIDER ── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

.divider-text {
  text-align: center;
  position: relative;
  margin: 1.5rem 0;
}

.divider-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
}

.divider-text span {
  position: relative;
  background: var(--white);
  padding: 0 1rem;
  font-size: 0.8rem;
  color: var(--text-light);
}

/* ── PAGE WRAPPER ── */
.page-wrap {
  min-height: 100vh;
  padding-top: 80px;
}

/* ── FOOTER ── */
.footer {
  background: #060f0a;
  padding: 3rem 4rem;
  border-top: 1px solid #1a1a1a;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #444;
}

.footer-bottom span { color: var(--gold); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fadeUp { animation: fadeUp 0.5s ease both; }
.animate-fadeIn { animation: fadeIn 0.4s ease both; }
.animate-fadeOut { animation: fadeOut 0.18s ease both; }

/* ── SMOOTH SHOW/HIDE ──
   `.hidden` (below) is instant display:none — correct for things that
   should disappear immediately with no animation. For anything that
   should *ease* in and out instead (modals, dropdowns, alert banners),
   use this pattern from JS instead of toggling .hidden directly:

     el.classList.add('closing');
     setTimeout(() => el.classList.add('hidden'), 180);

   .closing plays the fade/shrink-out, then .hidden removes it from
   layout after the animation has actually had time to play — this is
   what was missing everywhere modals snapped shut instantly. */
.fade-toggle {
  animation: fadeIn 0.2s ease both;
}
.fade-toggle.closing {
  animation: fadeOut 0.18s ease both;
  pointer-events: none;
}

/* ── LOADING SPINNER ── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ── UTILITIES ── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.hidden { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .navbar { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .section-title { font-size: 2rem; }
  .footer { padding: 2rem 1.5rem; }
}