/* ============================================================
   Saddlebrook HOA — saddlebrook.css
   Site-wide custom styles (loaded after Bootstrap)
   Copyright © 2026 IMD Digital Services LLC. All rights reserved.
   ============================================================ */

/* ── Color palette ── */
:root {
  --sb-dark:   #1a3d2b;   /* deep forest green */
  --sb-mid:    #2e7d4f;   /* medium green */
  --sb-accent: #f0a500;   /* gold accent */
}

/* ── Navbar ── */
.navbar-sb {
  background-color: var(--sb-dark);
}

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, var(--sb-dark) 0%, var(--sb-mid) 100%);
  min-height: 480px;
  display: flex;
  align-items: center;
}

/* ── Override Bootstrap primary to green ── */
.btn-primary {
  background-color: var(--sb-mid);
  border-color: var(--sb-mid);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sb-dark);
  border-color: var(--sb-dark);
}
.bg-primary { background-color: var(--sb-mid) !important; }

/* ── Feature cards ── */
.feature-icon {
  font-size: 2.5rem;
  color: var(--sb-mid);
}

/* ── Section divider ── */
.section-divider {
  border-top: 3px solid var(--sb-accent);
  width: 60px;
  margin: 0.5rem auto 1.5rem;
  opacity: 1;
}

/* ── Footer ── */
footer {
  background-color: var(--sb-dark);
}

/* ============================================================
   404 page
   ============================================================ */

/* Full-height flex layout for 404 */
.page-404 {
  background-color: #f4f7f4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.error-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

/* Big 404 number */
.error-number {
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 900;
  line-height: 1;
  color: var(--sb-mid);
  text-shadow: 4px 4px 0 var(--sb-dark);
  letter-spacing: -4px;
}

/* Wobbling street sign */
.street-sign {
  font-size: 5rem;
  animation: wobble 2.5s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}

/* Accent divider (404 page variant) */
.accent-line {
  border-top: 4px solid var(--sb-accent);
  width: 80px;
  margin: 1rem auto;
  opacity: 1;
}

/* Home button (404 page) */
.btn-home {
  background-color: var(--sb-mid);
  border-color: var(--sb-mid);
  color: #fff;
}
.btn-home:hover {
  background-color: var(--sb-dark);
  border-color: var(--sb-dark);
  color: #fff;
}