/* ============================================
   GrowthEstate.ca / Ontario Landlord
   Stylesheet
   ============================================ */

/* Base Reset & Typography */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  border-radius: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force 0px radius everywhere per design system */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Material Symbols configuration */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* ============================================
   Mobile Navigation
   ============================================ */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 2rem;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #4b5563;
  text-decoration: none;
  padding: 0.5rem 0;
}

.mobile-nav a:hover {
  color: #1b365d;
}

/* ============================================
   Responsive helpers
   ============================================ */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }

  .desktop-nav {
    display: none !important;
  }
}

/* ============================================
   Hero image wrapper
   ============================================ */
.hero-image-wrap {
  height: 540px;
}

@media (max-width: 1024px) {
  .hero-image-wrap {
    height: 420px;
  }
}

@media (max-width: 768px) {
  .hero-image-wrap {
    height: 360px;
  }
}

/* ============================================
   Image placeholders for easy swapping
   ============================================ */
.image-hero {
  /* Replace images/hero.png (or .jpg) for the hero section */
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 32px rgba(27, 54, 93, 0.18));
}

.image-founder {
  /* Replace images/founder.jpg for the founder portrait */
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* ============================================
   Hero image mobile adjustments
   ============================================ */
@media (max-width: 1024px) {
  .image-hero {
    object-position: top center;
  }
}

/* ============================================
   Utility: focus states
   ============================================ */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}